/* Progress Container */
.progresscontainer {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 99999; border:0;background:rgba(0,0,0,0.7); display:none;}
.progress {width:400px; height:60px; top:0; left:0; bottom:0; right:0;position: fixed; margin:auto; font-size:12px; color:#fff; }
.barbox {width:400px; height:23px; border: 1px solid #000;  border-radius: 3px; }
.bar {   background-color: #ff8e14;   width:0%;   height:20px;   border: 1px solid #ddd;  border-radius: 3px;  }
.percent { position:absolute;   display:inline-block;   top:3px;   left:48%; color:#B4F5B4; }
/* Loader */
.loader {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background:rgba(0,0,0,0.6);display: flex;justify-content: center;align-items: center; z-index:999999;}
.loader .loader-inner {position: relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;-webkit-transition: width .5s, height 1s;transition: width .5s, height 1s;}
.loader .loader-inner .loading-box {text-align: center;width: 100%;padding: 2em;}
.loader .loader-inner .loading-box .loader-message {padding: 1em 0;color: white; font-weight:600; font-size:14px;} 
.loader .loader-inner .loading-box .circular-loader {border: 3px solid #f3f3f3; /* Light grey */border-top: 3px solid #E04006; /* Blue */border-radius: 50%;
width: 50px;height: 50px;animation: spin 2s linear infinite;margin: 0 auto;transition: all .5s ease-out;position: relative;display: flex;justify-content: center;align-items: center;}
.loader .loader-inner .loading-box .circular-loader:before,.loader .loader-inner .loading-box .circular-loader:after {content: '';height: 0px;width: 0px;background-color: white;   position: absolute;-webkit-transition: height .5s; /* For Safari 3.1 to 6.0 */transition: height .5s;}
.loader .loader-inner .loading-box  button {outline: none;padding: .8em 2em;color: white;border-radius: 2px; cursor:pointer;}
.loader .loader-inner .loading-box  button.cancel {background-color: #fafafa;color:#999;}
.loader .loader-inner .loading-box  button.done,.loader .loader-inner .loading-box  button.retry {background-color: #f17f7f;}
.loader .loader-inner .loading-box  .loader-result-control {display: flex;justify-content: center !important;}
.loader .loader-inner .loading-box  button.cancel,.loader .loader-inner .loading-box  button.retry,.loader .loader-inner .loading-box  button.done {display: none;}
/* for success */
.loader.success .loader-inner,.loader.error .loader-inner{background-color: #f17f7f;}
.loader.success .loader-inner,.loader.error .loader-inner {width: 300px;height: 210px;border-radius: 5px;}
.loader.success .loader-inner .loading-box  button.done {display: block;}
.loader.success .loader-inner .loading-box  button.cancel,.loader.success .loader-inner .loading-box  button.retry {display: none;}
.loader.success .loader-inner .loading-box .circular-loader {border: 3px solid #aff5b2; animation: none;}
.loader.success .loader-inner .loading-box .circular-loader:before {transform: rotate(38deg);}
.loader.success .loader-inner .loading-box .circular-loader:after {transform: rotate(130deg);}
.loader.success .loader-inner .loading-box .circular-loader:before,.loader.success .loader-inner .loading-box .circular-loader:after {background-color: #aff5b2;}
.loader.success .loader-inner .loading-box .circular-loader:after {left: 11px;height: 10px;bottom: 12px}

/* for error */
.loader.error .loader-inner .loading-box .circular-loader {border-top: 3px solid #f3f3f3; animation: none;}
.loader.error .loader-inner .loading-box  .loader-result-control {justify-content:space-between;}
.loader.error .loader-inner .loading-box  button.done {display: none;}
.loader.error .loader-inner .loading-box  button.cancel,.loader.error .loader-inner .loading-box  button.retry {display: block;}
.loader.error .loader-inner .loading-box .circular-loader:before,.loader.error .loader-inner .loading-box .circular-loader:after,.loader.success .loader-inner .loading-box .circular-loader:before,.loader.success .loader-inner .loading-box .circular-loader:after {height: 30px;width: 3px;border-radius: 3px;}
.loader.error .loader-inner .loading-box .circular-loader:before {transform: rotate(50deg);}
.loader.error .loader-inner .loading-box .circular-loader:after {transform: rotate(130deg);}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Badges */
.badge {border-radius: 0.25rem;line-height: 1;padding:3px 5px;font-weight: 600; font-size:11px; display:inline-block;}
.badge-inactive,.badge-pending {border: 1px solid #ff7474;background-color: #ff7474;color: #ffffff;}
.badge-inprogress {border: 1px solid #ffbc34;background-color: #ffbc34;color: #ffffff;}
.badge-success,.badge-active {border: 1px solid #08d26f;background-color: #08d26f;color: #ffffff;}
.badge-awaiting {border: 1px solid #857bff ;background-color: #857bff ;color: #ffffff;}
.badge-closed,.badge-completed {border: 1px solid #35b0ff;background-color: #35b0ff;color: #ffffff;}

.star {position: relative;display: inline-block;width: 0;height: 0;margin-top: .6em;margin-left: 1.3em;margin-right: .9em;margin-bottom: 1.2em; border-right: .3em solid transparent;  border-bottom: .7em  solid #fff; border-left: .3em solid transparent;font-size: 5px;}
.star:before, .star:after {content: '';display: block;width: 0;height: 0;position: absolute;top: .6em;left: -1em;border-right: 1em solid transparent;border-bottom: .7em  solid #fff;border-left: 1em solid transparent;-webkit-transform: rotate(-35deg);transform: rotate(-35deg);}
.star:after {-webkit-transform: rotate(35deg);transform: rotate(35deg);}
#speech-bubble {width: 120px; height: 80px; background: blue;position: absolute;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#speech-bubble:before {content:"";position: absolute;width: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid blue;border-bottom: 13px solid transparent;margin: 13px 0 0 -25px;}