/*BACKGROUND*/

    .bg-muted
    {
        background: linear-gradient(to right top, #c2d8d8, #afc7cb, #9eb6be, #8fa4b1, #8193a3, #8193a3, #8193a3, #8193a3, #8fa4b0, #9fb6bd, #b0c7ca, #c4d8d7);
    }
    .bg-info
    {
        background:linear-gradient(to right, #1d2197, #005866);
    }
    .bg-warning
    {
        background: linear-gradient(351deg, rgb(255, 207, 84) 11.2%, rgb(255, 158, 27) 91.1%);
    }
    .bg-success
    {
        background: linear-gradient(to right, #1d976c, #006642); 
    }
    .bg-danger
    {
        background: linear-gradient(to right top, #8e0f1b, #9a0b19, #a70716, #b30412, #bf010c, #c7020c, #ce020b, #d6030a, #dc0612, #e10918, #e70c1e, #ec0f24);
    }

.mlm-5{
    margin-left: -5px !important;
}
.mr-1{
    margin-right: 10px !important;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-orange{
    color: #ff8d00;
}
.dataTable td, .dataTable th {
    border: solid 0.1px white !important;
}
.transparent{
    background: #02367617 !important;
}
a:hover{
    color: orange;
}
.page-title-box
{
    background: url('https://localhost/assets/images/rabbit.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat,repeat;
    border-bottom: solid 3px orange;
}
.navbar-brand-box 
{
    padding: 0px;
}
.page-title-box{
    background: radial-gradient(circle at 0% 0.5%, rgb(241, 241, 242) 0.1%, rgb(224, 226, 228) 100.2%);
}


.text-danger {
    color: #ff0600!important;
}
body[data-topbar=colored] .navbar-header .dropdown .show.header-item {
    background-color: #ffc300c2;
}
.navbar-header .dropdown .show.header-item {
    background-color: #ffc300c2;
}
.dropdown-menu.show {
    top: 98%!important;
}
.dropdown-menu{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
.line-space-1{
    letter-spacing: 1px;
}
.tombol-bawah{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
.line-hr
{
    padding-left: 15px;
    padding-right: 15px;
}
.back-none {
    background: none !important;
}

/* --------TOMBOL--------- */
    .btn{
        font-weight: bold;
        text-transform: uppercase;
    }

    .btn-bst{
        color: white;
        background-color: #1e407a;
        border-color: #1e407a;
    }
    .btn-bst:hover
    {
        color: white;
        border-color:orange;
        background-color: orange;
    }

    .btn-danger {
        color: white;
        background-color: red;
        border-color: red;
    }
    .btn-danger:hover {
        background: #f55454;
        border-color: #f55454;
        color: white;
    }

    .btn-success {
        color: white;
        background-color: green;
        border-color: green;
    }

    .btn-info{
        background-color: #1e3f79;
        border-color: #1e3f79;
    }
    .btn-info:hover{
        background-color: #4c5970;
        border-color: #4c5970;
        color: white;
    }

    .btn-warning:hover
    {
        color: white;
        border-color:#edbe5b;
        background-color: #edbe5b;
    }
/* ----------------------*/
body{
    background: #fbfbfb;
}
.card
{
    border-radius: 0px;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 8%);
}
.jajargenjang
{    
    margin-left: 5px;
    border-radius: 0px;
    -ms-transform: skew(340deg); /* Support untuk IE 9 */
    -webkit-transform: skew(340deg); /* support untuk Safari */
    transform: skew(340deg); /* default syntax */
}
.table-dark 
{
    --bs-table-bg: #1e407a;
}
.table thead th 
{
    border-top: none;
}
.img-fluid {
    height: unset;

    max-height: 300px;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active 
{
    background: #ebe9e9;
}
.logo-sm
{
    display: none;
}
@media screen and (max-width: 1000px)
{
    .navbar-brand-box .logo-dark span.logo-sm 
    {
        display: none;
    }
}

@media screen and (max-width: 1000px)
{
    .logo span.logo-lg 
    {
        display: block;
    }
}
@media screen and (max-width: 600px)
{
    .navbar-brand-box
    {
        display: none;
    }
}
.notification-item .d-flex 
{
    margin-bottom: 1rem!important;
}
.italic
{
    font-style: italic;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b 
{
    margin-top: -5px;
}
.page-title-box .page-title h4 
{
    text-transform: uppercase;
}
.breadcrumb-item 
{
    text-transform: uppercase;
    font-weight: bold;
    font-style: italic;
}
#sidebar-menu ul li a.active {
  color: #1e407a !important;
  background: #80808040 !important;
}
.mm-active .active i {
  color: #1e407a !important;
}
.mm-active .active a {
  color: #1e407a !important;
}
/*SETTING HALAMAN LOGIN*/
.wrapper-page 
{
    margin-top: 10rem;
    margin-bottom: 0.5%;
    max-width: 350px;
}
/*SETTING MAIN PAGE*/
body
{
    letter-spacing: 0.03rem;
}
.text-shadow {
    text-shadow: -1px -1px 0 black, 1px -1px 0 #b0b0b0, -1px 1px 0 #b0b0b0, 1px 1px 0 #b0b0b0;
}
.navbar-header 
{
    height: 49px;
}
.header-item 
{
    height: 50px;
}
.d-flex 
{
    height: px;
}
.logo 
{
    height: 50px;
    line-height: 50px;
}
.vertical-menu 
{
    top: 50px;
    width: 235px;
}
.main-content
{
    margin-left: 235px;
}
a {
    color: #1E407A;
}
/*SETTING SIDE BAR*/
#sidebar-menu ul li a 
{
    padding: 5px 25px;
    font-size: 14px;
    color: black;
}
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover i
{
    color: orange;
}

#sidebar-menu ul li ul.sub-menu li a 
{
    padding: 10px 20px 10px 50px;
    background: none;
    font-size: 13px;
    font-weight: bold;
}
#sidebar-menu ul li a i{
    color: black;
}
#sidebar-menu ul li ul.sub-menu li a:hover 
{
    color: black;
    font-weight: 700;
    /*letter-spacing: 0.15rem;*/
    font-size: 13px;
}
#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a 
{
    font-size: 13px;
}

#sidebar-menu .has-arrow::after 
{
    font-size: 10px;
}
.mm-active > a 
{
    color: #1e407a !important;
}
.mm-active > a i 
{
    color: #1e407a !important;
}
.mm-active .active 
{
    color: white !important;
    font-weight: 700;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a
{
    color: white;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover 
{
    color: white;
    font-weight: 700;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul 
{
    padding: 0px;
}

/*SETTING CARD*/
.page-content-wrapper 
{
    margin-top: -70px;
}
.card {
    margin-bottom: 1rem;
}
.card-body {
    padding: 1rem 1rem;
}
.card-body .card-title
{
    font-size: 15px;
    margin-bottom: 8px;
    text-transform: uppercase;
    
}
.card-body hr
{
    margin-top: 8px;
}

/*SETTING PAGE TITLE BOX*/
.page-title-box
{
        
    box-shadow: unset;
    margin-bottom: 10px;
    position: relative;
    top: -25px;
}
.page-title-box .page-title .breadcrumb
{
    padding-top: 0px;
}
.page-title-box .page-title .breadcrumb .breadcrumb-item 
{
    font-size: 0.75rem;
}
.page-title-box .page-title .breadcrumb .breadcrumb-item > a 
{
    color: grey;
}
.page-title-box .page-title h4
{
    font-size: 20px !important;
    color: #1e407a;
}

/*SETTING FORM*/
.form-control-sm
{
        font-size: 0.79rem;
}
.col-form-label 
{
    font-size: 13px;
}
.breadcrumb-item.active 
{
  color: orange;
  font-weight: 700;
}
.navbar-brand-box 
{
  padding-left: 1rem;
  width: 235px;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul 
{
  background-color: #e2e8e7;
}
.text-right
{
  text-align: right;
}
.text-left
{
  float: left;
}
#page-topbar 
{
    background: linear-gradient(112.1deg, rgb(255, 255, 255) 11.4%, rgb(63, 76, 119) 70.2%);
}

/*SETTING DATA TABLE */
.dataTable td.bolder, .dataTable th.bolder 
{
  border-left: 1px black solid !important;
  border-right: 1px black solid !important;
}

div.dataTables_wrapper div.dataTables_length label 
{
    font-size: 14px;
}

.table thead th 
{
    font-size: 14px;
}
table.dataTable td, table.dataTable th 
{
    font-size: 14px;
}
.dataTables_info 
{
    font-size: 14px;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination 
{
    font-size: 14px;
}

.select2-container .select2-selection--single .select2-selection__rendered 
{
    line-height: 30px;
}

.select2-container .select2-selection--single {
  height: 30px;
  font-size: 12px;
}
.header-profile-user 
{
    height: 30px;
    width: 30px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link 
{
    color: #fff;
    background-color: #1E407A;
}
.nav-link:focus, .nav-link:hover 
{
    color: #1E407A;
}
.nav-link 
{
  color: #1E407A;
}
.pull-right
{
    float: right;
}
.pull-left
{
    float: left;
}
.border-none
{
    border:none !important;
}
.table-rep-plugin .btn-group .btn-default 
{
    display: none;
}


/* TYPOGRAGPHY */
.f10px
{
    font-size: 10px !important;
}
.f11px
{
    font-size: 11px !important;
}
.f12px
{
    font-size: 12px !important;
}
.f13px
{
    font-size: 13px !important;
}
.f14px
{
    font-size: 14px !important;
}
.f15px
{
    font-size: 15px !important;
}
.f16px
{
    font-size: 16px !important;
}
.f17px
{
    font-size: 17px !important;
}
.f18px
{
    font-size: 18px !important;
}
.f19px
{
    font-size: 19px !important;
}
.f20px
{
    font-size: 20px !important;
}
.bold
{
    font-weight: bold;
}


/* CUSTOM */
table.dataTable.dtr-inline.collapsed.table-sm>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed.table-sm>tbody>tr>th:first-child:before 
{
    top: 20px;
}
.select2-results__option {
  padding: 6px 12px;
  font-size: 12px;
}

div.dataTables_wrapper div.dataTables_filter label
{
    font-weight: bold;
}
.table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before 
{
  height: 14px;
  background-color: #1e407a;
}
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link 
{
    font-size: 14px;
}
#vertical-menu-btn
{
    display: none;
}

#vertical-menu-img
{
    display: none;
}
@media screen and (max-width: 1224px) 
{
    .page-title-box{
        background: none !important;
    }
}
/* TABLET VIEW */
@media screen and (max-width: 992px) 
{
    #vertical-menu-btn
    {
        display: block;
    }
}
/* TABLET VIEW */
@media screen and (max-width: 600px) 
{

    #vertical-menu-img
    {
        display: block;
    }
}
@media screen and (max-width: 770px) 
{
    .only_wide
    {
        display: none;
    }

}
/* MOBILE VIEW */
@media screen and (max-width: 500px) 
{
    .nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link 
    {
        font-size: 20px;
    }
    
    
    div.dataTables_wrapper div.dataTables_length label 
    {
        font-size: 12px;
    }

    .table thead th 
    {
        font-size: 12px;
    }
    table.dataTable td, table.dataTable th 
    {
        font-size: 12px;
    }
    .dataTables_info 
    {
        font-size: 12px;
    }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination 
    {
        font-size: 12px;
    }
    .navbar-brand-box 
    {
        padding-left: 0px;
        width: 185px;
    }
}