/**
 *	****************************************
 *	FOR FRONTEND USE
 *	****************************************
 *	Description	:	This css file is for the popup structure used throughout the site
 *					This structure is common and creats the skelton for the popup. Internal
 *					structure can be cutomized further.
 *	Author 		:	Evolvan
 *	website 	:	http://www.evolvan.com
 *	Date		:	Friday 04 Sep, 2015
 */

.overlay {position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:1000;}
.databox {font-size:14px;display:none;width:100%;height:100%;vertical-align:middle;text-align:center;}
.databox > div{text-align:left;}
.scroll-wrap{position:relative;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}
.scroll-wrap .popup-case{display:block;	margin:50px auto;}
.popup-case form {margin:0px;}
.popup-case {position:relative;background:#fff;display:inline-block;box-shadow:0 0 10px #222;}
.popup-cross {position:absolute;right:-10px;top:-10px;z-index:10;}
.popup-header {background:#f33;color:#fff;padding:10px;}
.sz-small {width:300px;}
.padded {padding:10px;box-sizing:border-box;width:100%;}
.ex-padded {padding:30px;box-sizing:border-box;width:100%;}
.confirm-msg {font-size:14px;font-weight:bold;margin:4px 0;height:50px;}
.pop-btn {border-radius:3px;border:0px;cursor:pointer;background:#f33;padding:7px 13px;color:#fff;font-size:14px;font-family:inherit;text-decoration:none;}
.trans-btn {font-weight:bold;background:transparent !important;color:#f33 !important;}
.trans-btn:hover {text-decoration:underline;}
.btn-panel {text-align:right;}
.popup-row:before, .popup-row:after {content: "";display: table;clear: both;}
/* popup content related css */ 
.popup-row {margin-bottom:5px;}
.textbox {box-sizing:border-box;width:100%;padding:8px 10px;}
.selectbox, .textarea{box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid #e1e1e1;}
.filebox {box-sizing:border-box;width:100%;padding:8px 10px;border:0;}
.textbox[type=text], .textbox[type=password] {border:1px solid #e1e1e1;}
.input-label {width:100px;float:left;margin-right:10px;padding:5px 0;}
.input-case {position:relative;float:left;}
.inb {display:inline-block;}
.error-msg {color:#f33;padding:3px 10px 0;display:none;}
/*** Misc ***/
.error{	color:#f00;}
.success {color:#499403;}
/***  wait popup template  ***/
.green-wait-box{border-radius:30px;background:#499403;color:#fff;min-width:300px;display:inline-block;margin:0 auto;text-align:center!important;padding:10px;font-size:13px;box-shadow:0 0 10px #222}
/*************************/
/****** round progress bar ******/
/*************************/
.progress-layer{position:absolute;display:none;z-index:100;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,.8);}
.progress-align{margin-top:10%;text-align:center;}
.cr-wrap{position:relative;display:inline-block;max-width:100px;text-align:center;font-family:arial;font-size:13px}
.cr-wrap::before{content:"";position:absolute;top:24px;left:22px;width:50px;text-align:center;color:#fff;z-index:100}
.cr-wrap.file::before{content:attr(data-value) "%";position:absolute;top:24px;left:22px;width:50px;text-align:center;color:#fff;z-index:100}
.cr-wrap::after{content:attr(data-text);background:#f33;padding:4px 15px;margin-top:10px;border-radius:3px;display:inline-block;color:#fff}
.circle{display:inline-block;width:50px;height:50px;border:5px solid;border-color:transparent;border-radius:100%;border-top-color:#f33;border-bottom-color:#f33;-webkit-animation:rotation 1s linear infinite;animation:rotation 1s linear infinite}
.circle::after{content:"";display:inline-block;width:40px;height:40px;border:5px solid;border-color:transparent;border-radius:100%;border-top-color:#fff;border-bottom-color:#fff;-webkit-animation:rotation 10s linear infinite;animation:rotation 10s linear infinite}
@-webkit-keyframes rotation {
0%{-webkit-transform:rotate(0deg)}
50%{-webkit-transform:rotate(180deg)}
100%{-webkit-transform:rotate(360deg)}
}
@keyframes rotation {
0%{transform:rotate(0deg)}
50%{transform:rotate(180deg)}
100%{transform:rotate(360deg)}
}