/*------------------------------------------------------------------
    File Name: custom.css
-------------------------------------------------------------------*/

/** ADD YOUR AWESOME CODES HERE **/


@media only screen and (max-width: 576px){
    .card h4 { font-size: 14px; font-weight: 400; line-height:22px; }
   
    .main_bt {
        /*min-width: 125px;*/
        width: 100%;
        height:auto;
        float: left;
        background: #E8205F;
        text-align: center;
        color: #fff;
        padding: 8px 8px;
        font-size: 12px;
        border-radius: 5px;
        border: none;
        transition: ease all 0.5s;
        cursor: pointer;
        font-weight: 400;
        margin-top:-10px;
    }

    .common-form {
      width: 100%;
      padding: 20px 20px;
    margin-bottom: 30px;
    }

}

.pink_bt {
  min-width: 125px;
  width: 100%;
  height:auto;
  float: left;
  background: #E8205F;
  text-align: center;
  color: #fff;
  padding: 8px 8px;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  transition: ease all 0.5s;
  cursor: pointer;
  font-weight: 400;
  margin-top:-10px;
}


button.pink_bt{
  float: none;
  margin: 0;
}

.pink_bt:hover,
.pink_bt:focus {
  background: #0993B7;
  color: #fff;
}


.common-form {
  width: 100%;
  padding: 20px 50px;
margin-bottom: 30px;
}


.form-group {
    position: relative;
    padding:5px 10px;
    width: 100%;
    max-width: 100%;
}

.form-group input {
    border: none;
    border: 1px solid #1d1d1d;
    color: #181818;
    display: block;
    font-size: 14px;
}


.form-group label {
    color: #a70061!important;
    font-size: 16px;
    font-weight: 300;
    position: absolute;
    top: 0;
    left:0;
    pointer-events: none;
    transform: translateY(30px);
   
}

.form-group input:valid,
.form-group input:focus {
    border-bottom-color: #272727;
    outline: none;
}

.form-group input:valid + label,
.form-group input:focus + label {
    color: #8f0355;
    font-size: 14px;
    transform: translateY(0);
}


.form-group label {
    transition: all 0.2s ease-in-out;
}

/* style input */
.input-wrapper {
    position: relative;
    margin-top:20px; // To create space for floating inputs
    margin-inline: auto;
    max-width:100%;
  }



  .input {
    font-size: 16px;
    width: 100%;
    padding:8px ;
    /*padding-right: 30px;  To avoid overlapping with the clear button*/
    color: #333;
    border: 1px solid #ddd;
    transition: border-color 250ms;
    background-color: transparent;
    &:focus {
      outline: none;
      border-bottom-color: #777;
    }
  
    &::placeholder {
      color:transparent!important;
      
    }
    
    /*Hide Safari's autofill button*/
    &::-webkit-contacts-auto-fill-button {
      visibility: hidden;
      pointer-events: none;
      position: absolute;
    }
  }
  
  .label {
    position: absolute;
    top: 10px;
    left: 10px;
    color:#1f1f1f;
    pointer-events: none;
    transform-origin: left center;
    transition: transform 250ms;
    background-color:#ffffff;
   
  }
  
  .input:focus + .label,
  .input:not(:placeholder-shown) + .label {
    transform: translateY(-100%) scale(0.75);
    color:#E82060;
    padding:0px 10px;
    font-size: 16px;
  }
  
  .select {
    border-top: solid #1e365be3 1px;
    border-left: solid #1e365be3 1px;
    border-right: solid #1e365be3 1px;
    border-bottom: solid #1e365be3 1px;
    width: 100%;
    float: right;
    padding: 10px 10px;
    line-height: normal;
    font-weight: 300;
    transition: ease all 0.5s;
    border: 1px solid #ddd;
    transition: border-color 250ms;
    background-color: transparent;


    &:focus {
        outline: none;
        border-bottom-color: #777;
      }
    
      &::placeholder {
        color: transparent;
      }
      
        /*Hide Safari's autofill button*/
      &::-webkit-contacts-auto-fill-button {
        visibility: hidden;
        pointer-events: none;
        position: absolute;
      }
}
.mr-top-5 { margin-top: 5px!important;}

.mr-top-10 { margin-top: 10px!important;}
.mr-top-15 { margin-top: 15px!important;}
.mr-bot-15{ margin-bottom:15px!important;}
.mr-bot-min { margin-bottom:-12px!important;}
.mr-left-10 { margin-left:10px!important;}
.mr-right-10 { margin-right:10px!important;}

  .input:placeholder-shown + .label + .clear {
    display: none;
  }
  
  /*new design */
  /* --- material floating label --- */

.form-group {
  display: flex;
  height: 55px;
  width: 500px;
  margin: 0 auto;
}

.control-label {
  font-size: 16px;
  font-weight: 400;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
  line-height: 29px;
}

.form-group.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
  color: #2196f3;
}

.form-control {
  align-self: flex-end;
}

.form-control::-webkit-input-placeholder {
  color: transparent;
  transition: 240ms;
}

.form-control:focus::-webkit-input-placeholder {
  transition: none;
}

.form-group.focused .form-control::-webkit-input-placeholder {
  color: #bbb;
}

.img-thumbnail { height: 250px!important; width:auto;}


.card { padding: 0px !important;}

.card-show {
position:relative; 
margin-top:-250px!important; width:100%;
margin-right: 2px;
margin-left: 2px;
align-content: center; 
background-color:#ffffff;
padding: 8px!important;
}

.card-img-top { width:100%; height:auto; }

.table-sm td {padding: 2px 5px!important; color: #1f1f1f; border: 0px !important;}

.table-sm th {padding: 2px 5px!important; color: #8f0355; border: 0px !important; font-weight: 400!important;}

/*  multiple check list */
.toggle-next-ch{
  border-radius: 0;}
  
label {
  cursor: pointer}
  
.ellipsis {
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.apply-selection{
  display: none;
  width: 100%;
  margin: 0;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

  .ajax-link {
    display: none}
    
.checkboxes{
  margin: 0;
  display: none;
  border: 1px solid #ccc;
  border-top: 0;}

  .inner-wrap{
    padding: 5px 10px;
    max-height: 140px;
    overflow: auto;}

    /*button blue */
.btn-blue {
  min-width: 140px;
  height:auto;
  float: left;
  background: #056C7B;
  text-align: center;
  color: #fff;
  padding: 8px 8px;
  font-size: 14px;
  border-radius:30px;
  border:2px solid #006bcfbe;
  transition: ease all 0.5s;
  cursor: pointer;
  font-weight: 400;
  margin-top:5px;
  margin-right: 5px;
  margin-left: 5px;
}


button.btn-blue {
  float: none;
  margin: 0;
}

.btn-blue:hover { border:2px solid #004b91be;
  color: #ffffff;
  transition: ease all 0.5s;
  background: #003842e5;
}


.btn-blue:focus {
  background: #007fe7;
  color: #fff;
}

 /*button dark pink */
 .btn-darkpink {
  min-width: 140px;
  height:auto;
  float: left;
  background: #E8205F;
  text-align: center;
  color: #fff;
  padding: 8px 8px;
  font-size: 14px;
  border-radius:30px;
  border:2px solid #ff53b7be;
  transition: ease all 0.5s;
  cursor: pointer;
  font-weight: 400;
  margin-top:5px;
  margin-right: 5px;
  margin-left: 5px;
}


button.btn-darkpink{
  float: none;
  margin: 0;
}

.btn-darkpink:hover { border:2px solid #ff53b7be;
  color: #ffffff;
  transition: ease all 0.5s;
  background: #c5134b;

}


.btn-darkpink:focus {
  background: #E8205F;
  color: #fff;
}
    

/* new login css */

.login_form {
  padding: 20px 20px;
  background: #ffffff!important;
}

.login_form .input-wrapper { background: #ffffff!important;}

.bg-login-img { background-image: url("../images/layout_img/bg-loginR.jpeg");
  background-repeat: no-repeat;
  background-position: right top;
  }

.bg-login3 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#017fef+0,00b2f9+100 */
  background:linear-gradient(45deg,  #017fef 0%,#00b2f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  }

.bg-login {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00626e+0,1b96b5+52,1b96b5+52,0091b6+100 */
background: linear-gradient(90deg,  #00626e 4%,#1b96b5 52%,#1b96b5 52%,#0091b6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  
  }

  .bg-login-green {background: rgb(27,190,114);
background: linear-gradient(333deg, rgba(27,190,114,1) 0%, rgba(0,212,255,1) 66%);


  }
.col-container-login {
  display: table;
  width:50%;
  margin:15% auto;
  box-shadow: 0px 0 10px -8px #000;
 
}
.col-login {
  display: table-cell;
  padding: 0px;
  vertical-align: top;
}

.col-login img { width:350px; height:450px; }
.login_form img { width:350px; height:205px; }

@media only screen and (max-width: 768px) {
  .col-login { 
    display: table-cell;
    padding: 0px;
    vertical-align: top;
    
  }
  .login_form {
    padding: 20px 20px;
    margin-top: 10px;
  }
  .login_form img { width:100%; height:205px; }

  .col-container-login {
    display: table;
    width: 100%;
    margin-top: 30px;
  }
  .col-login img { width:350px; height:auto; }

}


@media only screen and (max-width: 600px) {
  .col-login { 
    display: block;
    width: 100%;
    height:350px;
    
  }
  .login_form {
    padding: 20px 20px;
  }
  .login_form img { width:205px; height:auto; }

  .col-container-login {
    display: table;
    width: 100%;
    margin-top: 30px;
  }
  .col-login img { width:350px; height:auto; }
}



@media only screen and (max-width:480px) {
  .col-login { 
    display: block;
    width: 100%;
    height: 280px;
    
  }
  .login_form {
    padding: 20px 20px;
    vertical-align:top;
    background: #fff!important;

  }
  .login_form img { width:350px; height:30px; }

  .col-container-login {
    display: table;
    width: 100%;
    vertical-align: top;
  }
  .col-login img { width:100%; height:auto; }
}
/* new login css */


.solid-border {border-style: solid; border-width: 2px!important; border-color: #00626e!important;}
.solid-border-top {border-style: solid; border-top:2px!important; ; border-width: 2px!important; border-color: #00626e!important;}
.text-big {font-size:medium!important; font-weight: 500!important;}

.dark_bg {
  background: #0971b8;
}

.progress.skill-bar .progress-bar {
  background-color: #0971b8;
}

.dash_head {
  background-color: #0971b8;
}


.counter_section .counter_no p.total_no {
  color: #fff;
}

.counter_section .counter_no p.head_couter {
  color: rgba(255,255,255,.7);
}


/* main login equal height */
.equal-col { min-height: 100vh;}

.gatway-login { text-align: center!important; }
.login_form_wrapper { width:320px !important;  margin: 0 auto; }


.login-icon_section {
  height: 100px;
  width: 100px;
  display: block;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border: 2px solid #e7e7e7;
  padding: 25px;
  background: #fff;
  border-radius:50%;
  color: #ffffff;
  margin: 5px;
}
  
.login-icon_section:hover { border: 2px solid #1414149f;  }

.couter_icon_new span {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin: 10px auto!important;
}



.couter_icon_new i {
  color: #ffffff;
  font-size: 30px;
  text-align: center;
}

.couter_icon_new i:hover { color: #0000009a;}


.couter_icon_new>div {
 /* border-right: solid rgba(255, 255, 255, 0.3) 1px;
  padding-right: 35px;*/
  margin: 0 auto;


}



.login-icon_section_wid { width: 60%; margin: 0 auto;}
.spacer_20 {height:20%;}
.spacer_10 {height:10%;}
.spacer_5 {height:5%;}