/*Popup*/
#overlay {background: #000;color: #fff;position: fixed;height: 100%;width: 100%;z-index: 99999;top: 0;left: 0;text-align: center;padding-top: 23%;opacity: .80; display:none}
.spinner {margin: 0 auto;height: 64px;width: 64px;animation: rotate 0.8s infinite linear;border: 5px solid #007bff;border-right-color: transparent;border-radius: 50%;}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#popup {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);transition: opacity 500ms;visibility: hidden;opacity: 1; z-index:9;}
#popup.whitebg {background: rgba(255,255,255,1);}
.popup {margin: calc((100vh - 280px)/2) auto;padding: 30px;background: #fff;border-radius: 5px;width: 40%;position: relative;}
.popup.fullscreen {width: 90%;margin: 40px auto 0 auto; height:calc(100vh - 60px);}
.popup.halfscreen {width: 50%;margin: 100px auto 0 auto; height:calc(100vh - 200px);}
.popup.miniscreen {width: 50%;margin: 100px auto 0 auto; height:calc(100vh - 320px);}

.popup h2 {margin-top: 0;color: #575757; padding:10px 0; font-size:30px; font-weight:500;}
.popup h4 {margin-top: 0;color: #575757; padding:10px 0; font-size:24px; font-weight:500;}
.popup .popclose {position: absolute;top: 8px; right:8px; margin:0 auto;text-decoration: none;
width: 32px;height: 32px;display:inline-block;background: url(../img/close-line.svg) no-repeat 50% 50%;background-size: 18px auto;}
.popup .popclosebt {position: absolute;bottom: 20px; margin:0 auto;transition: all 200ms; font-size:14px;text-decoration: none; left:calc(50% - 30px);}
.popup .popcontent {min-height:100px; maxheight: 100%;overflow: auto; font-size:14px; color:#797979;}
.popup .popcontent input,.popup .popcontent input + label{ font-size:14px;}

/*LOADER*/
.circle-loader {margin-bottom: 10px;border: 2px solid rgba(0, 0, 0, 0.2);border-left-color: #000;animation: loader-spin 1.2s infinite linear;position: relative;display: inline-block;vertical-align: top;border-radius: 50%;width: 70px;height: 70px;}
.circle-loader.success {border-left-color: #32CD32;}
.circle-loader.failure {border-left-color: #F27474;}
.load-complete {-webkit-animation: none;animation: none;transition: border 500ms ease-out;}
.success.load-complete {border-color: #ddd;}
.failure.load-complete {border-color: #F27474;}
.checkmark {display: none;}
.success .checkmark:after {animation-duration: 800ms;animation-timing-function: ease;animation-name: checkmark;transform: scaleX(-1) rotate(135deg);}
.success .checkmark:after {opacity: 1;height: 45px;width:18px;transform-origin: left top;border-right: 3px solid #A5DC86;border-top: 3px solid #A5DC86;content: "";left: 14px;top: 40px;position: absolute;}
.failure1 .checkmark:after {opacity: 1;height: 45px;width:18px;transform-origin: left top;border-right: 3px solid #FF0000;border-top: 3px solid #FF0000;content: "";left: 14px;top: 40px;position: absolute;}
.failure .checkmark:before {animation-duration: 800ms;animation-timing-function: ease;animation-name: checkmark1;transform: scaleX(-1) rotate(135deg);}
.failure .checkmark:after {animation-duration: 800ms;animation-timing-function: ease;animation-name: checkmark2;transform: scaleX(-1) rotate(135deg);}
.failure .checkmark::before {content: " ";position: absolute;display: block;background-color: #F27474;width: 2px;left: 33px;top: 10px;bottom: 10px;transform: rotate(45deg);}
.failure .checkmark::after {content: " ";position: absolute;display: block;background-color: #F27474;height: 2px;top:33px;left: 10px;right: 10px;transform: rotate(45deg);}

@keyframes loader-spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes checkmarkb {
0% {height: 0;width: 0;opacity: 1;}
20% {height: 0;width: 18px;opacity: 1;}
40% {height: 45px;width: 18px;opacity: 1;}
100% {height: 45px;width: 18px;opacity: 1;}
}
@keyframes checkmark1a {
0% {left: 0;top: 0; bottom: 0;opacity: 1;}
40% {left: 13;top: 5; bottom: 5;opacity: 1;}
100% {left: 33;top: 10; bottom: 10;opacity: 1;}
}
@keyframes checkmark2a {
0% {top: 0;right: 0; left: 0;opacity: 1;}
40% {top: 13;right: 5; left: 5;opacity: 1;}
100% {top: 33;right: 10; left: 10;opacity: 1;}
}

/* line Loader */
.loader {background-color:#111;overflow: hidden;width: 100%;height: 100%;position: fixed;top: 0; left: 0;display: flex;align-items: center;align-content: center; justify-content: flex-start;  z-index: 100000;}
.loader__element {height: 3px;width: 100%;background:#e4e4e4;}
.loader__element:before {content: '';display: block;background-color: #000;height: 3px;width: 0;animation: getWidth 3s ease-in infinite;}
@keyframes getWidth {
100% { width: 100%; }
}