/*------------------------------------------------------------------
    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 !important;
  margin-bottom: 30px;
  }
    .container-fluid
    {
        padding-right:0 !important
    }

}

.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: #2196f3;
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:10px ;
  /*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 !important;
  pointer-events: none;
  transform-origin: left center;
  transition: transform 250ms;
  background-color: #ffffff;
  padding: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: inherit !important;
}

.input:focus + .label,
.input:not(:placeholder-shown) + .label {
  transform: translateY(-85%) 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;
  font-size:16px;


  &: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:-170px!important; width:100%;

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 */
.blue_bt {
min-width: 135px;
height:auto;
float: left;
background: #2196f3;
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.blue_bt{
float: none;
margin: 0;
}

.blue_bt:hover { border:2px solid #004b91be;
color: #ffffff;
transition: ease all 0.5s;
background: #007fe7;
}


.blue_bt:focus {
background: #007fe7;
color: #fff;
}

/*button dark pink */
.darkpink_bt {
min-width: 135px;
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.darkpink_bt{
float: none;
margin: 0;
}

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

}


.darkpink_bt:focus {
background: #E8205F;
color: #fff;
}

.bootstrap-select
{
  width:100% !important;
}
  .bootstrap-select .dropdown-toggle {
      padding: 10px;
      line-height: 2.2rem;
      font-size: 16px;
      border:1px solid #ddd
   }
  .bootstrap-select.btn-group .dropdown-menu.inner
  {
      font-size:13px;
  }
  .bootstrap-select .dropdown-toggle:hover
  {
      background:#fff;
  }
.dropdown-toggle::after
{
  display:none !important
}
.form-check-label
{
  font-size:16px;
}

#productContainerAddcard .card-show {
    /*margin-top: -80% !important*/
    margin-top: 0% !important
}
#productContainerAddcard table
{
  border:1px solid #ddd;
}
#productContainer td
{
  padding: 5px 1px;
}
#productContainerAddcard td {
    padding: 5px 1px;
}

#productContainer td .form-control
{
  padding: 6px 0;
  text-align: center;
}