/* the norm */
#gritter-notice-wrapper {
    /*position:fixed;*/
    position: absolute;
    top: 20px;
    right: 20px !important;
    width: 301px;
    z-index: 1032;
}
#gritter-notice-wrapper.top-left {
    left: 20px;
    right: auto;
}
#gritter-notice-wrapper.bottom-right {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
}
#gritter-notice-wrapper.bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
}
.gritter-item-wrapper {
	position:relative;
	margin:0 0 10px 0;
	background:url('../images/ie-spacer.gif'); /* ie7/8 fix */ 
}
.gritter-top {
	background:url(../images/gritter.png) no-repeat left -30px;
	height:10px;
}
.hover .gritter-top {
	background-position:right -30px;
}
.gritter-bottom {
	background:url(../images/gritter.png) no-repeat left bottom;
	height:8px;
	margin:0;
}
.hover .gritter-bottom {
	background-position: bottom right;
}
.gritter-item {
	display:block;
	background:url(../images/gritter.png) no-repeat left -40px;
	color:#eee;
	padding:2px 11px 8px 11px;
	font-size: 11px;
	font-family:verdana;
}
.hover .gritter-item {
	background-position:right -40px;
}
.gritter-item p {
	padding:0;
	margin:0;
	word-wrap:break-word;
}
.gritter-close {
	display:none;
	position:absolute;
	top:5px;
	left:3px;
	background:url(../images/gritter.png) no-repeat left top;
	cursor:pointer;
	width:30px;
	height:30px;
	text-indent:-9999em;
}
.gritter-title {
	font-size:14px;
	font-weight:bold;
	padding:0 0 7px 0;
	display:block;
	text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
}
.gritter-image {
	width:48px;
	height:48px;
	float:left;
}
.gritter-with-image,
.gritter-without-image {
	padding:0;
}
.gritter-with-image {
	width:220px;
	float:right;
}
/* for the light (white) version of the gritter notice */
.gritter-light .gritter-item,
.gritter-light .gritter-bottom,
.gritter-light .gritter-top,
.gritter-light .gritter-close {
    background-image: url(../images/gritter-light.png);
    color: #222;
}
.gritter-light .gritter-title {
    text-shadow: none;
}

/*sharon add*/
a.gritter-close .icon-cancel {
    font-size: 17px;
    color: #ea5541;
}

.gritter-close {
    background: none;
    text-indent: 0;
    top: 10px;
    width: 22px;
    /*20210415*/
    position: absolute;
    /*top: 48%;*/
    padding-left: 3px;
}

    .gritter-close:hover {
    }

.gritter-item-wrapper {
    background: #fff7df;
}

.gritter-image i, .gritter-image i.fa {
    font-size: 24px;
}

.gritter-item p {
    font-size: 13px;
}

.gritter-item {
    color: #cca023;
}

.gritter-close i.icon-cancel {
    color: #cca023;
}

.gritter-item-wrapper {
    background: #ffeded;
    border-radius: 8px;
    color: #ea5541;
}

.gritter-top {
    background: none;
}

.gritter-item {
    background: none;
    color: #ea5541;
}

.gritter-image {
    width: 25px;
}

.gritter-with-image {
    width: 240px;
    margin-top: -5px;
}

.gritter-bottom {
    background: none;
}

.gritter-item {
    padding-right: 16px;
}

.gritter-item-wrapper.warning {
    background: #fff7df;
}

    .gritter-item-wrapper.warning .gritter-item {
        color: #cca023;
    }

        .gritter-item-wrapper.warning .gritter-item .gritter-close i {
            color: #cca023
        }

.gritter-item-wrapper.success {
    background: #dbf8e8;
}

    .gritter-item-wrapper.success .gritter-item {
        color: #0e9c4d;
    }

        .gritter-item-wrapper.success .gritter-item .gritter-close i {
            color: #0e9c4d
        }

.gritter-item-wrapper.info {
    background: #d9edf7;
}

    .gritter-item-wrapper.info .gritter-item, .gritter-item-wrapper.info .gritter-item .gritter-close i {
        color: #3a78c3;
    }

.gritter-item-wrapper.error {
    background: #ffeded;
}

    .gritter-item-wrapper.error .gritter-item, .gritter-item-wrapper.error .gritter-item .gritter-close i {
        color: #ea5541;
    }

.gritter-close {
    display: inline;
}

a.gritter-close:hover {
    text-decoration: none;
}


/*.btn.btn-primary {
    margin-right: 10px;
    margin-bottom: 10px;
}*/


/*-----test scrollbar---*/

.gritter-image {
    margin-left: 11px;
    position: absolute;
    margin-top: 11px;
}

.gritter-item-wrapper.info .gritter-image i, .gritter-item-wrapper.info .gritter-top .gritter-close i {
    color: #3a78c3;
}

.gritter-item-wrapper.error .gritter-image i,
.gritter-item-wrapper.error .gritter-top .gritter-close i {
    color: #ea5541;
}

.gritter-item-wrapper.success .gritter-image i,
.gritter-item-wrapper.success .gritter-top .gritter-close i {
    color: #0e9c4d;
}

.gritter-item-wrapper.warning .gritter-image i,
.gritter-item-wrapper.warning .gritter-top .gritter-close i {
    color: #cca023;
}

.gritter-item {
    padding: 8px 16px 8px 20px;
    padding-left: 20px;
}

.gritter-with-image {
    min-height: 60px;
    overflow-y: auto;
    margin-right: 12px;
    padding-left: 12px;
    margin-top: -10px;
}
    /*-----test scrollbar---*/
    .gritter-with-image::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(254,254,254,0.2);
        background-color: #F5F5F5;
        border-radius: 16px;
    }

    .gritter-with-image::-webkit-scrollbar {
        width: 10px;
        background-color: #F5F5F5;
        background-color: rgba(254,254,254,.1);
        border-radius: 16px;
    }

    .gritter-with-image::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0,0,0,.1);
        transition: opacity .2s ease-in-out,background-color .2s ease-in-out;
        border-radius: 16px;
        width: 10px;
    }

.gritter-with-image {
    width: 460px;
}

#gritter-notice-wrapper {
    width: 521px;
}
    #gritter-notice-wrapper a.gritter-close i.fa.fa-times {
        font-size: 18px;
    }