/* --------------------------
 * CSS for btn utility plugin
 * ksankar | 2015
 * --------------------------
*/

.save-form {
  position:absolute;
  text-align:center;
  display:block;
  width:800px;
}

.btn-co {
  display:inline-block; 
  position:relative;
}

.btn-co .prog-btn {
  display:inline-block;
  border:1px solid #2e6da4;
  padding:3px;
  vertical-align: middle;
  text-align: center;
  color:#fff;
  font-size: 16px;
  margin: 0px;
  line-height: 2.5; 
  cursor:pointer;
  min-width:100px;
  height:46px;
  border-radius:23px;
  background-color:#337ab7;
  box-sizing: border-box;
  transition:all 400ms linear; 
  -ms-transition:all 400ms linear;
  -webkit-transition:all 400ms linear;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.4);
  }

.btn-co.inprogress .prog-btn {
  height:46px;
  min-width: 46px !important;
  border-radius:23px;
  pointer-events: none;
  border: 4px solid #eee !important;
  padding:0px;
  background-color:transparent;
  box-shadow:none;
 }

.btn-co.error-btn .prog-btn {
  background-color:#d9534f;
  border-color:#d43f3a;
  pointer-events: none;
}

.btn-co.success-btn .prog-btn {
 background-color:#5cb85c;
 border-color:#4cae4c; 
 pointer-events: none;
}

.btn-co .prog-btn:hover {
  _background-color:#527DA2; 
  background-color:#29689F;
}

.btn-co .svg-co {
 pointer-events: none;
 display: inline-block;
  position:absolute;  
  width:46px;
  height:46px;
  top:0%;
  left:50%;
  transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}

.btn-co path {
  opacity: 0;
 }

.btn-co.inprogress path {
 -webkit-transition: stroke-dashoffset 0.3s;
 transition: stroke-dashoffset 0.3s;
 -ms-transition: stroke-dashoffset 0.3s;
 opacity:1 !important;
}

.fa-cu {
  font-size:1.3em;
}

.spacer {
  width:100px;
  display:inline-block;
}

.center-co {
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 -webkit-transform: translate(-50%,-50%);
}

/* input type button (mininal effects) */

.btn-co .inp-btn {
  transition:all 400ms linear; 
  -ms-transition:all 400ms linear;
  -webkit-transition:all 400ms linear;
  opacity:1;
}

.btn-co.inprogress .inp-btn {
  opacity:0;
  pointer-events:none;
}

.btn-co.inprogress .svg-co {
  pointer-events: initial;
}


/* ------------------- */

.pb_status_box {
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid #d6e9c6;
border-radius:5px;
text-align:center;
display:inherit;
color:#fff;
z-index:1110;
padding:8px 14px 8px 14px;
font-size:16px;
background-color: rgba(10, 10, 10, 0.87);
}

.pb_trans_bg {
width:100%;
height:100%;
background-color: rgba(0,0,0, 0.7);
z-index:1105;
position:fixed;
color:rgba(255,255,255, 0.8);
left:0px;
top:0px;
display:none;
}

/* ----------- fade mode ---------------- */
.btn-co .alert-btn {
    margin: 0px auto;
    position: absolute;
    top: 0;
    background-color: #92D9E6;
    min-width: 130px;
    width:100%; 
    height: auto;
    border-radius: 6px;
    text-align: center;
    padding: 5px;
    color: #fff;
    transition: all 0.2s linear;
    z-index: -1;
    opacity:0;
}

.btn-co.inprogress .alert-btn {
    opacity:1;
    z-index: 10;    
}

.btn-co.success-btn .alert-btn {
   background-color:#B6C0A1;
       z-index: 10;
}

.btn-co.error-btn .alert-btn {
  background-color:#CE6060;
    z-index: 10;
}