#tostrContainer 
{
    visibility:hidden;
    position: fixed;
    top: 60px;
    right: 0;
    width: 350px;
    background: #ffffff00;
    z-index:9999999;
    padding:0 10px;
}
.sneekmessage 
{
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    margin: auto;
    color: #fff;
    text-align: center;
    position: relative;
    width:50%;
    bottom: 30px;
    font-size: 12px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 6px 6px #00000038, 0 14px 8px -6px #0000001f, 0 0 4px #0000005c;
    margin:10px 0;
}
.sneekmessage.success { 
    background: rgb(0, 194, 78);
}
.sneekmessage.success  i
{
    background:rgb(28, 158, 60);
}
.sneekmessage.success
{
    background:rgb(0, 194, 78);
}
.sneekmessage.success .sneekmessagedesc 
{
    background:rgb(0, 194, 78);
    border-bottom: 1px solid rgb(0, 194, 78);
}
.sneekmessage.danger  i
{
    background:rgb(198, 0, 0);
}
.sneekmessage.danger
{
    background:rgb(247, 66, 66);
}
.sneekmessage.danger .sneekmessagedesc 
{
    border-bottom: 1px solid rgb(247, 66, 66);
}
.sneekmessage.warning  i
{  
    background: rgb(247, 132, 0);
}
.sneekmessage.warning
{
    background:rgb(247, 181, 49) ;
}
.sneekmessage.warning .sneekmessagedesc 
{
    background:rgb(247, 181, 49) ;
    border-bottom: 1px solid rgb(247, 181, 49);
}
.sneekmessage.question i
{  
    background: rgb(30, 30, 30);
}
.sneekmessage.question
{
    background: rgb(72, 72, 72);
}
.sneekmessage.question .sneekmessagedesc 
{
    background:rgb(72, 72, 72);
    border-bottom: 1px solidrgb(72, 72, 72);
}
.sneekmessage.primary  i
{
    background: rgb(0, 148, 198);
}
.sneekmessage.primary 
{
    background: rgb(49, 175, 222);
}
.sneekmessage.primary .sneekmessagedesc 
{
    background: rgb(49, 175, 222);
    border-bottom: 1px solid rgb(49, 175, 222);
}
.sneekmessage i{
	width: 50px;
	height: 50px;
    float: left;
    padding-top: 11px;
    padding-bottom: 11px;
    box-sizing: border-box;
    background-color: #111;
    color: #fff;
}
.sneekmessage .sneekmessagedesc {
    color: #fff;
    padding: 12px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.sneekmessage.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px} 
    to {min-width: 330px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 330px}
}
@-webkit-keyframes stay {
    from {min-width: 330px} 
    to {min-width: 330px}
}

@keyframes stay {
    from {min-width: 330px}
    to {min-width: 330px}
}
@-webkit-keyframes shrink {
    from {min-width: 330px;} 
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 330px;} 
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: -30px; opacity: 0;}
}

/*BOOTSTRAP-MODAL*/
.modal-header.success {
    border-radius: 3px 3px 0 0;
    background: linear-gradient(rgb(218, 218, 218), rgb(199, 199, 199)) !important;
}
.modal-header.danger {
    border-radius: 3px 3px 0 0;
    background: linear-gradient(rgb(218, 218, 218), rgb(199, 199, 199)) !important;
}
    .modal-header.warning {
    background: rgb(198, 0, 0);
    border-radius: 3px 3px 0 0;
}
.modal-header.primary {
    border-radius: 3px 3px 0 0;
    background: linear-gradient(rgb(218, 218, 218), rgb(199, 199, 199)) !important;
}
.modal-header.theme-color {
    border-radius: 3px 3px 0 0;
    background: linear-gradient(rgb(218, 218, 218), rgb(199, 199, 199)) !important;
}
.modal-dialog {
    top: 50px;
}
h4.modal-title {
    float: left;
    position: absolute;
    font-size: 20px;
    top: 0px;
    padding: 10px;
    color: White;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: 1;
    background: transparent;
}
.close:focus, .close:hover {
    color: #ff3636;
}

/*PASSWORD METER*/
span.input-hint {
    opacity: 0;
    display: none;
    position: absolute;
    top: 10px;
    width: auto;
    padding: 5px;
    background: #ffffeb;
    border: 1px solid #ccccb7;
    border-radius: 5px;
    z-index: -1;
    left: 0;
    box-shadow: 0 2px 3px #0000007d;
    transition: all ease-in 0s;
}

    span.input-hint.error {
        background: #f7baba;
    }

    span.input-hint::after {
        content: "";
        position: absolute;
        top: -6px;
        left: calc(50% - 5px);
        height: 4px;
        width: 0px;
        border-bottom: 5px solid #ccccb7;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }

input:focus + span.input-hint {
    opacity: 1;
    top: 30px;
    z-index: 9;
    transition: all cubic-bezier(0.59, 1.54, 1, 1) .3s;
    display: block;
}
ul.password-validation-type {
    list-style: none;
    padding: 0 10px;
    margin: 5px 0;
}

    ul.password-validation-type li:first-child {
        font-style: italic;
        font-size: 12px;
        color: #101010;
        line-height: 15px;
        border-bottom: 1px dotted;
        margin-bottom: 5px;
    }

.password-meter a.password-meter-range {
    display: block;
    max-width: 200px;
    width: 100%;
    float: left;
    height: 5px;
    background: #eaeaea;
    border-radius: 10px;
    box-shadow: 0 0 10px grey inset;
    overflow: hidden;
}

.password-meter a.password-meter-text {
    display: block;
    max-width: 100px;
    width: 30%;
    float: left;
}

.password-meter a.password-meter-range i:first-child {
    width: 33.33%;
    float: left;
    height: 10px;
    background: linear-gradient(to right, #ff1818,#efef00);
}

.password-meter a.password-meter-range i:nth-child(2) {
    width: 33.33%;
    float: left;
    height: 10px;
    background: linear-gradient(to right, #efec00,#f1d50f);
}

.password-meter a.password-meter-range i:nth-child(3) {
    width: 33.33%;
    float: left;
    height: 10px;
    background: linear-gradient(to right, #f1d80d,#00dc11);
}

ul.password-validation-type li i.password-valid {
    color: limegreen;
    transition: all ease-in .3s;
    animation-name: blink-zoom;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

ul.password-validation-type li i.password-invalid {
    color: red;
    transition: all ease-in .3s;
}

li.password-meter {
    position: relative;
    top: 2px;
}

@keyframes blink-zoom {
    0% {
        transform: sale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

a.password-meter-range needle {
    position: absolute;
    top: -9px;
    left: 0;
    content: "";
    color: white;
    text-shadow: 0px 0px 0px #000000, 1px 1px 0px #000000, 1px 1px 4px #000000;
    transition: all cubic-bezier(0.25, -0.18, 0.51, 1.46) .4s;
    height: 10px;
    width: 0;
    border-top: 5px solid #80808000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #565656;
}

ul.password-validation-type li:not(:first-child) {
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 5px;
}

/*RIGHT-POSITION*/
input.password-validation-pos-r + span + span.input-hint {
    left: calc(100% + 10px) !important;
    width: 160px !important;
    top: -15px !important;
}
    input.password-validation-pos-r + span + span.input-hint:after {
        border-bottom: 6px solid transparent !important;
        border-top: 6px solid transparent !important;
        border-right: 6px solid #b3b39a !important;
        border-left: none !important;
        left: calc(0% - 6px) !important;
        top: 20px !important;
    }
input.password-validation-pos-r + span + span a.password-meter-range needle {
    position: absolute;
    top: 0px !important;
}