:root {

    --blue: #60cae6;
    --dark-blue: #15416d;
    
    --green: #85e200;
    --orange:#ff7f00;
    --yallow:#fedd00;
  }

#search-dev{
    min-width: 33% ;
}
.div-width{
   min-width: 50% !important;
}

.toast-success { 
    background-color: #51a351; 
  }     
.toast-container {
    margin-top: 50px;
    color: black !important;
}
.toast-title{
    color: gray !important;

}
.toast-message{
    color: darkgray !important;

}

 .md-width-40{
    width: 40% !important;
 }
 .bg-p{
    background-color: #60cae6 !important;
 }
 .bg-s1{
    background-color: #85e200 !important;
 }
 .bg-s2{
    background-color: #ff7f00!important;
 }
 /* .nav-item .nav-link.active{
    background-color: var(--blue)!important;
 }  */
 .navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon{
    background-image: linear-gradient(310deg, var(--blue), var(--blue)) !important;
 }
 .btn-primary{
    background-color : var(--blue) !important;
 }
 .bg-gradient-primary{
    background-image: linear-gradient(310deg, var(--blue), var(--blue)) !important;
 }
 .bg-gradient-without-color{
   background-image: linear-gradient(310deg, var(--blue), #ffffff) !important;
}
 .btn-check:focus+.btn-primary, .btn-primary:focus {
    box-shadow: 0 0 0 .2rem var(--dark-blue) !important;
}
.bg-gradient-info{
   background-image: linear-gradient(310deg, var(--blue), #ffffff) !important;
}


 select option{
    text-align:left;
 }
 .form-control.is-invalid, .was-validated .form-control:invalid{
    background-position: left .75rem center !important;
 }
 .page-item.active .page-link {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
 }
 #customers thead tr th{
   text-align: right !important;
   margin-right: 7px;
 }
 .form-control{
   /* box-shadow: 1px 1px 7px 2px var(--green) !important; */
 }
 .form-control:focus {
   border-color:var(--dark-blue) !important;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--blue) !important;
 }
 .form-select:focus {
   border-color:var(--dark-blue) !important;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--blue) !important;
 }
 .badge.bg-primary{
    background: var(--blue) !important;
 }
 .text-gradient.text-primary{
   background-image: linear-gradient(310deg, var(--dark-blue), var(--blue)) !important;
 }

 .badge.bg-info{
   background:var(--dark-blue) !important;
 }
 .text-primary{
   color: var(--dark-blue) !important ; 
 }
@media only screen and (max-width: 600px) {
    #search-dev{
        min-width:70% ;
    }
    .div-width{
      min-width: 100%;
   }
    .sm-width-100{
        width: 100% !important;
    }
}