.bg-primary {background-color: #1a9120!important;}
.bg-success {background-color: #009ef7!important;}
.bg-info {background-color: #7239ea!important;}
.bg-warning {background-color: #ffc700!important;}
.bg-danger {background-color: #f1416c!important;}

.border-top-primary,.border-right-primary,.border-bottom-primary,.border-left-primary {border-color: #1a9120 !important;}
.border-top-success,.border-right-success,.border-bottom-success,.border-left-success {border-color: #009ef7 !important;}
.border-top-info,.border-right-info,.border-bottom-info,.border-left-info {border-color: #7239ea !important;}
.border-top-warning,.border-right-warning,.border-bottom-warning,.border-left-warning {border-color: #ffc700 !important;}
.border-top-danger,.border-right-danger,.border-bottom-danger,.border-left-danger {border-color: #f1416c !important;}

.text-primary,#closeb span, .btn-link{color: #1a9120 !important;}
.text-success{color: #009ef7 !important;}
.text-info{color: #7239ea !important;}
.text-warning{color: #ffc700 !important;}
.text-danger{color: #f1416c !important;}

.bg-login-image{
  background: url(../img/login-up.jpg) no-repeat center center;
  background-size: cover
}

#wrapper #content-wrapper {
    background-color: #f3f6f9;
}

#wrapper #content-wrapper .pageTitle{
    padding: 27px 0 45px 0;
}

.bpom-logo{
height: 47px;
width: auto;
}

.sidebar{
  position: fixed;
  left:0;
  top:0;
  z-index:99;
  overflow-y: auto;
  height:100%;
}

.sidebar-light hr.sidebar-divider{
border-color: transparent;
}

.card{
border: none;
border-radius: 0.85rem;
}

.card-header:first-child {
    border-radius: 0.85rem 0.85rem 0 0;
}

.card-header{
    border: none;
    background-color: transparent;
    padding: 1.75rem 2.0rem;
}

.card-header h6{
    color: #181c32 !important;
    margin: 0.75rem 0.75rem 0 0 !important;
    font-weight: 600 !important;
    font-size: 1.275rem!important; 
}

.card-body {
    padding: 1.75rem 2.0rem;
}

.shadow{
box-shadow: 0px 10px 35px 0px rgba(56, 71, 109, 0.075) !important;
}

.dropdown-menu{
border: none !important;
border-radius: 0.475rem !important;
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15) !important;
}

.topbar .dropdown-list .dropdown-item{
border: none !important;
}

.sidebar-light .nav-item.active .nav-link,.sidebar-light .nav-item.active .nav-link i,.sidebar-light .nav-item .nav-link:active, .sidebar-light .nav-item .nav-link:focus, .sidebar-light .nav-item .nav-link:hover,.sidebar-light .nav-item .nav-link:active i, .sidebar-light .nav-item .nav-link:focus i, .sidebar-light .nav-item .nav-link:hover i,.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover  {
    color: #04c8c8;
}

.sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner{
font-size: 0.95rem;
font-weight:500;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item{
color: #7e8299;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item{
padding: .7rem 1rem;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: #fafbff;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item::before, .sidebar .nav-item .collapsing .collapse-inner .collapse-item::before{
content: "\f111";
font-family: "Font Awesome 6 Free";
font-size: 5px;
font-weight: 900;
position: relative;
top: -5px;
margin-right: 10px;
color: #7e8299;
}

.sidebar.toggled .nav-item .nav-link span.text-wrap,.sidebar.toggled .nav-item .nav-link span{
  position: absolute;
    left: 100%;
    width: 175% !important;
    z-index: 99;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    top: 5px;
    display: none;
}

.sidebar.toggled .nav-item .nav-link:hover span.text-wrap,.sidebar.toggled .nav-item .nav-link:hover span{
    display: block;
}

#rightTopbar{
  position: absolute;
  top:15px;
  right:8px;
  width: 100%;
  z-index: 98;
}

#rightTopbar .navbar-nav .nav-item .nav-link{
    background-color: #fff;
    color: #5e6278;
    border-radius: 8px;
    padding: 0 12px;
    height: 40px;
    margin-left:4px;
}

#closeb span{
transform: rotate(45deg);
font-size: 32px;
display: block;
width: 48px;
height: 48px;
float: right;
}

#userTable th,#userTable td{
vertical-align:middle;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5EAAA8;
  --bs-btn-border-color: #5EAAA8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2B5958;
  --bs-btn-hover-border-color: #2B5958;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2B5958;
  --bs-btn-active-border-color: #2B5958;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5EAAA8;
  --bs-btn-disabled-border-color: #5EAAA8;
}



@media (min-width: 576px){
  .topbar .dropdown .dropdown-menu {
      width: 450px;
      top: 50px;
  }
  
  .topbar .dropdown .dropdown-menu.userMenu {
      width: initial;
      top: initial;
  }
  
}

@media (min-width: 768px){
  #wrapper{
     padding-left: 20rem;
  }
  
  #rightTopbar{
     width: 80rem;
  }
  
  .sidebar-toggled #wrapper{
     padding-left: 6.5rem;
  }

  .sidebar {
      width: 20rem!important;
      padding: 0 15px;
  }

  .sidebar .nav-item .nav-link {
        width: 100%;
  }  
  
  .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
        transform: rotate(180deg);
        font-size: 12px;
        margin-top:4px;
  }
  
  .sidebar .nav-item .nav-link.collapsed[data-toggle=collapse]::after{
        transform: rotate(90deg);
  }  
  
  .sidebar .nav-item .nav-link span{
        font-size: 0.95rem;
        font-weight: 500;
  }
  
  .sidebar.toggled .nav-item .nav-link {
      width: 100%;
  }  
  
  .sidebar.toggled .nav-item .nav-link i{
      font-size: 1.2rem
  }  
  
  .sidebar.toggled .nav-item .collapse{
      left: 120%;
  }  
      
}

@media (max-width: 767px){

  .topbar .dropdown .dropdown-menu.userMenu {
      right: 0;
  }
  
  #content-wrapper{
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
    padding-top: 60px;
  }
  
  #content-wrapper.fade{
    opacity: 0.3;
  }
  
  .sidebar{
    -webkit-transform: translatex(-100%);
    transform: translatex(-100%);  
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
    box-shadow: none;
    padding: 0 15px;
  }
  
  .sidebar.active{
    -webkit-transform: translatex(0%);
    transform: translatex(0%);  
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
  }

  .sidebar,.sidebar .nav-item .nav-link{
    width: 100%;
  }
  
  .sidebar .nav-item .nav-link{
    text-align: left;
    padding: 1rem;
  }
  
  .sidebar .nav-item .collapse{
    position: relative;
    left:0;
    -webkit-animation: none;
    animation: none;    
  }
  
  .sidebar .nav-item .collapse .collapse-inner{
    box-shadow: none;
  }  
  
  .sidebar .nav-item .nav-link span,.sidebar .nav-item{
    font-size: 1.1rem;
  }
  
  .sidebar .nav-item .nav-link span{
    display: inline;
  }
  
  .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
      width: 1rem;
      text-align: center;
      float: right;
      vertical-align: 0;
      border: 0;
      font-weight: 900;
      content: '\f107';
      font-family: 'Font Awesome 5 Free';      
      font-size: 12px;
      margin-top:4px;      
  }  
  
  .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
      transform: rotate(180deg);  
  }  
  
  .sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after {
      transform: rotate(0deg);   
  }  

  .sidebar .nav-item .nav-link i {
      font-size: .85rem;
      margin-right: 0.25rem;
  }  
    
}