:root{
    --yellow: #F4D118;
    --gray-light: #00000029;
}

.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.error{
    color: #D8000C;
    background-color: #FFBABA;
}

.form-login{
    border: 1px solid #fff;
}

.icon-form{
    padding: 10px;
    color: var(--gray-light);
    min-width: 40px;
    text-align: center;
    border-left: 4px solid var(--yellow);
}

.icon-form::before{
    content: '' !important;
}

.f-blue{
    color: rgb(40, 134, 221);
}

.input-container{
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.btn-yellow{
    background-color: var(--yellow);
}

.btn-yellow:disabled,
button[disabled]{
  background-color: #cccccc;
  color: #666666;
}

.deznav{
    background: url('/assets/images/background-sidebar.svg') bottom left no-repeat;
    /* background-size: cover; */
}

li.mm-active.child-sidebar{
    background-color: #F4D118;
    box-shadow: 3px 3px 6px #4409651F;
    border-radius: 10px;
    margin: 5px 0px 5px 10px;
}

li.mm-active.child-sidebar > a{
    color: #0F1E3D;
    font-weight: bold;
}

li.child-sidebar:hover,
li > .has-arrow:hover{
    background-color: #E0EAFC;
    color: black !important;
}

li.mm-active.child-sidebar:hover{
    background-color: #F4D118;
}

.btn-green-outline{
    color: #3AC47D;
    background-color: #fff;
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    border: 1px solid #3AC47D;
    border-radius: 5px;
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
    align-items: center;
    padding: 0px 15px;
}

.btn-green{
    color: #fff;
    background-color: #3AC47D;
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
}

.btn-green:hover{
    background-color: #2a8b59;
}

.btn-green > div{
    background-color: #31a368;
    padding: 5px 10px;
}

.btn-blue{
    color: #fff;
    background-color: #1492E6;
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
}

.btn-blue:hover{
    background-color: #0276C4;
}

.btn-blue > div{
    background-color: #0276C4;
    padding: 5px 10px;
}

.btn-blue > span,
.btn-green > span{
    margin: 0px 5px 0px 5px;
}

.dataTables_length .btn{
    padding: 5px 10px;
}

.dataTables_length label{
    margin-bottom: 0px;
}

.dataTables_length{
    align-items: center;
    display: flex;
    margin-top: 10px;
}

table.dataTable.no-footer{
    border-bottom: 1px solid #D1CAC7 !important;
}

table{
    padding: 0px !important;
}

thead{
    background-color: #E4E4E4;
    border: 1px solid #D1CAC7;
}

table.dataTable thead th{
    border-bottom: 0px !important;
}

.form-search{
    background: url("/assets/images/search.svg") no-repeat scroll 7px 7px;
    background-position: 97% center;
}

.form-search::placeholder{
    color: rgb(199, 197, 197);
}

.breadcrumb-container{
    background-color: #E4E4E4;
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.breadcrumb-container > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: black;
    font-size: 13px;
}

.copyright{
    font-size: 12px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 18px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: -3px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .child-sidebar{
      background-color: #fff;
  }

.btn-action{
    background-color: #b7dffa;
    border-radius: 5px;
    width: 20px;
    height: 20px;
    display: grid;
}

.btn-action > img{
    margin: auto;
}

.detail-harga{
    color: #76bff0;
    font-weight: bold;
}

.header{
    padding-left: 17rem !important;
}

.nav-header{
    width: 17rem !important;
}

.menu-toggle .deznav{
    width: 5rem !important;
}

.menu-toggle .content-body{
    margin-left: 5rem !important;
}

.menu-toggle .header{
    padding-left: 5rem !important;
}

.menu-toggle .nav-header{
    width: 5rem !important;
}

.content-body{
    margin-left: 17rem !important;
}    

@media only screen and (min-width:768px){
    [data-sidebar-style="mini"] .deznav .nav-text{
        display: inline !important;
    }    

    [data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a{
        background: #fff !important;
        color: red;
    }

    [data-sidebar-style="mini"] .deznav .metismenu > li > a.has-arrow::after{
        display: inline;
    }

    [data-sidebar-style="mini"] .deznav .metismenu li > ul{
        display: none !important;
        left: 2rem !important;
    }

    [data-sidebar-style="mini"] .deznav .metismenu li > ul.mm-show{
        display: contents !important;
        left: 2rem !important;
    }

    .nav-control,
    .nav-control > .hamburger{
        display: inline !important;
    }

    [data-sidebar-style="mini"] .nav-header .nav-control .hamburger{
        left: 0rem !important;
    }

    .menu-toggle .deznav .nav-text,
    .menu-toggle .deznav .metismenu > li > a.has-arrow::after{
        display: none !important;
    }

    [data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li:nth-last-child(-n+1) > ul{
        top: 50px !important;
    }
    

    [data-sidebar-style="mini"] .deznav .deznav-scroll{
        overflow: auto !important;
    }

    .metismenu > li{
        background-color: #fff;
    }
}

.deznav{
    width: 17rem !important;
}

.deznav .metismenu ul a{
    padding-left: 3rem !important;
}

.text-underline{
    text-decoration: underline;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: linear-gradient(to bottom, #F4D118 0%, #F4D118 100%) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: linear-gradient(to bottom, #E0EAFC 0%, #E0EAFC 100%) !important;
    color: black !important;
} 

.table-responsive{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#noRekamMedis .dropdown-toggle,
.group-privilege-options .dropdown-toggle,
.branch-options .dropdown-toggle,
.tindakan-category .dropdown-toggle,
#tindakan .dropdown-toggle,
#selectEmailUsers .dropdown-toggle,
#selectPenanggungJawab .dropdown-toggle,
#selectInsurance .dropdown-toggle,
#vendorContainer .dropdown-toggle,
#branchContainer .dropdown-toggle,
.group-satuan .dropdown-toggle,
.partner-asuransi .dropdown-toggle,
.type-code .dropdown-toggle{
    display: none !important;
}

.dropdown .btn{
    padding: 0.3rem 0.4rem !important;
}

.head-group-privilege{
    background-color: rgb(230, 227, 227);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsed .icon-chevron{
    transform: rotate(180deg);
}

.accordion-group-privilege{
    max-height: 600px;
    overflow: auto;
}

.basic-rate {
    appearance: none;
    width: 64px;
    margin: 0;
    border-radius: 16px;
    background: radial-gradient(circle 12px, white 100%, transparent calc(100% + 1px)) rgb(27, 172, 216) -16px;
    transition: 0.3s ease-in-out;
    padding-left: 33px !important;
    display: flex;
    align-items: center;
}

.basic-rate.active{
    padding-left: 9px !important;
}
  
.basic-rate::before {
    content: "Rp";
    font: bold 16px Verdana;
    color: white;
    text-shadow: 0 1px black;
}
  
.basic-rate:checked {
    padding-left: 8px;
    background-color: rgb(27, 172, 216);
    background-position: 16px;
}

.basic-rate:checked::before {
    content: "%";
}

.basic-rate:checked::after {
    content: "" !important;
    display: none !important;
}

.basic-rate:after{
    content: '' !important;
    display: none !important;
}

#dataTable > tr{
    background-color: rgb(182, 180, 180) !important;
}

.head-detail th{
    text-align: center !important;
    vertical-align: middle !important;
}

.icon-sort{
  height: 11px;
  width: 11px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.icon-sort.default{
    background-image: url("/assets/images/sort-default.svg");
}

.icon-sort.asc{
    background-image: url("/assets/images/sort-asc.svg");
}

.icon-sort.desc{
    background-image: url("/assets/images/sort-desc.svg");
}

.sort{
    cursor: pointer;
}

.body-table-detail{
    height: 400px; 
    overflow: auto;
}

.bootstrap-select{
    width: 100% !important;
}

#selectGroupPrivilege .dropdown-menu,
.branch-container .dropdown-menu,
.filter-branch .dropdown-menu,
#selectBranch .dropdown-menu{
    transform: none !important;
    min-width: 100% !important;
}

.signature-pad--body canvas{
    border: 1px dashed black;
    border-width: thin;
}

.asColorPicker-wrap{
   display: flex !important;
}

.asColorPicker-trigger{
    width: 30px !important;
    height: 32px !important;
    left: 0px !important;
}

.as_colorpicker{
    width: 100px;
    margin-right: 10px;
}