/**
* @author Elimar Xavier
* @owner Focatec
* @version 1.3
*/
.alert {padding: 20px;background-color: #f44336;color: white;opacity: 1;
    transition: opacity 0.6s;-webkit-transition: opacity 0.6s;-moz-transition: opacity 0.6s;
    -ms-transition: opacity 0.6s;-o-transition: opacity 0.6s; margin: 15px auto;z-index: 9999;
}

.alert-notify {padding: 20px;position: fixed;top: 70px;left: 56px; right: 56px;color: #fff;
    background-color: #f44336; opacity: 1;transition: opacity 0.6s;-webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s; -ms-transition: opacity 0.6s;-o-transition: opacity 0.6s; 
    margin: 15px auto;z-index: 9999; box-shadow: 0 3px 16px rgba(0,10,20,0.2); 
    animation: introEffect 150ms ease forwards;}

.alert.success,
.alert-notify.success {background-color: #4CAF50;}
.alert.info,
.alert-notify.info {background-color: #2196F3;}
.alert.warning,
.alert-notify.warning {background-color: #ff9800;}

.alert strong, .alert-notify strong { font-weight: 700; font-family: 'Century Gothic';}

.closebtn {margin-left: 15px;color: white;font-weight: bold;float: right;font-size: 34px;
    line-height: 20px; cursor: pointer;transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;
    -ms-transition: 0.3s;-o-transition: 0.3s;}

.closebtn:hover {color: #444;}

/* SNACKBAR */
.snackbar {
    visibility: hidden;
    min-width: 250px;
    border: 2px solid var(--ThemeColor);
    border-radius: 30px;
    background-color: #fff;
    color: #444;
    text-align: center;
    padding: 6px;
    position: fixed;
    z-index: 3;
    left: 50%;
    bottom: 0px;
    font-size: 17px;
    transform: translateX(-50%);
    opacity: 0;
    transition: bottom 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
    box-shadow: 0 10px 20px rgba(0,50,50,0.2);
}

.snackbar.show {
    visibility: visible;
    bottom: 30px;
    opacity: 1;
    /*-webkit-animation: fadeinSnack 0.5s, fadeoutSnack 0.5s;
    animation: fadeinSnack 0.5s, fadeoutSnack 0.5s;*/
}

.snackbar > ul { margin-bottom: 0; }
.snackbar > ul  li { list-style: none; position: relative;padding: 10px;border-radius: 50px; 
    background-color: rgba(20,40,80,0.1); }
.snackbar > ul  li > i { margin-right: 4px; animation: snackSpin 1.4s linear infinite; 
	color: var(--ThemeColor); }
.snackbar .name_file { margin-right: 4px; padding: 3px;border-radius: 4px; color: #fff;
    background: var(--ThemeColor); }
.snackbar .timeleft { font-style: italic;color: #666; }
.snackbar.success { border-color: #2ecc71; }
.snackbar.success > ul li > i:before { color: #2ecc71; }
.snackbar.success .name_file { background: #2ecc71; }
.snackbar .snackprogress_bar { display: block; position: relative; bottom: 0px; margin: 0; 
    margin-top: 4px; height: 4px; width: 0; border-radius: 10px; background-color: #2ecc71;}

.progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}
.progress_bar.loading {
    opacity: 1;
}
.progress_bar .progress_percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
}

/* ToolTip */
._tooltip {position: relative;}
._tooltip:not(._tooltip-right, ._tooltip-left, ._tooltip-bottom):hover ._tooltip-text {
    opacity: 1;z-index: 4;top: 120%;}
._tooltip._tooltip-right:hover ._tooltip-text {opacity: 1;z-index: 4;right: 20%;}
._tooltip-text {display: block; position: absolute;left: 50%;top: 150%; width: auto;padding: 5px;
    border-radius: 10px; background-color: #222;color: #fff;text-transform: none;font-size: 12px;
    transition: 0.2s all ease;opacity: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.4);pointer-events: none;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;transform: translateX(-50%);}
._tooltip-text:after {position: absolute;content: '';left: 40%;top: -5px; width: 0;height: 0;
    border-bottom: 5px solid #222;border-right: 5px solid transparent;
    border-left: 5px solid transparent; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
._tooltip._tooltip-right > ._tooltip-text { left: auto; top: 50%; right: 0; 
    transform: translate(calc(100% + 10px), -50%); }
._tooltip._tooltip-right > ._tooltip-text:after { left: -9px; top: 50%; transform: translateY(-50%);
    border-bottom: 5px solid transparent; border-left: 5px solid transparent;
    border-left: 5px solid #222;border-top: 5px solid transparent;}
._tooltip._tooltipwhite > ._tooltip-text { background-color: #fff; color: #444; }
._tooltip._tooltipwhite > ._tooltip-text:after { border-bottom: 5px solid #fff; box-shadow: none; }
._tooltip._tooltipwhite._tooltip-right > ._tooltip-text:after { border-bottom: 5px solid transparent;
    border-left: 5px solid transparent; border-right: 5px solid #fff;border-top: 5px solid transparent;}

/*animations*/

@-webkit-keyframes fadeinSnack {
    from {bottom: 0;opacity: 0;} 
    to {bottom: 30px;opacity: 1;}
}

@keyframes fadeinSnack {
    from {bottom: 0;opacity: 0;}
    to {bottom: 30px;opacity: 1;}
}

@-webkit-keyframes fadeoutSnack {
    from {bottom: 30px;opacity: 1;} 
    to {bottom: 0;opacity: 0;}
}

@keyframes fadeoutSnack {
    from {bottom: 30px;opacity: 1;}
    to {bottom: 0;opacity: 0;}
}

@keyframes introEffect {
	0% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes snackSpin{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (min-width: 520px){
	.alert-notify {left: auto; right: 56px;}
}