/* PRIMARY COLOR */
.bg-color-primary {
    background-color: rgba(203, 60, 255, 1) !important;
}

.bg-color-primary-tansparent{
    background: rgba(203, 60, 255, 0.2);
    
}

.bg-color-light-steel-blue2{
    background-color: rgba(137, 81, 255, 1) !important;
}

.bg-color-primary-gradient {
    background: linear-gradient(142deg, rgba(203, 60, 255, 1) 20%, rgba(127, 37, 251, 1) 68%) !important;
}

.bg-color-primary:hover {
    background-color: rgba(203, 60, 255, 0.2) !important;
}

.bg-color-light-steel-blue2:hover{
    background-color: rgba(203, 60, 255, 0.2) !important;
}

.bg-color-primary-gradient{
    background: linear-gradient(142deg, rgba(203,60,255,1) 20%, rgba(127,37,251,1) 68%) !important;
}

/* Border Color */

.border-color-primary-gradient {
    border-color: rgba(203, 60, 255, 1) !important;
}

/* TEXT */

.text-color-primary{
    color: rgba(203, 60, 255, 1) !important;
}

.text-color-black {
    color: rgba(0, 0, 0, 1) !important;
}

.text-color-black2 {
    color: rgba(30, 30, 30, 1) !important;
}

.text-color-independent {
    color: rgba(67, 84, 111, 1) !important;
}

.text-color-gray {
    color: rgba(153, 153, 153, 1) !important;
}

.text-color-white {
    color: rgba(255, 255, 255, 1) !important;
}

.text-color-light-steel-blue {
    color: rgba(174, 185, 255, 1) !important;
}

.text-color-light-steel-blue2 {
    color: rgba(137, 81, 255, 1) !important;
}

/* ALERT */

.alert {
    padding-bottom: 0.35rem !important;
    padding-top: 0.35rem !important;
    font-size: 14px !important;
        font-weight: 500 !important;
        color: white !important;
}

.alert-danger {
    background-color: rgba(255, 16, 4, 1) !important;
    border-color: rgba(255, 16, 4, 1) !important;
}

.alert-error {
    background-color: rgba(223, 100, 100, 1) !important;
    border-color: rgba(223, 100, 100, 1) !important;
}

.alert-warning {
    background-color: rgba(253, 181, 42, 1) !important;
    border-color: rgba(253, 181, 42, 1) !important;
}

.alert-info {
    background-color: rgba(20, 162, 184, 1) !important;
    border-color: rgba(20, 162, 184, 1) !important;
}

.alert-successfull {
    background-color: rgba(20, 202, 116, 1) !important;
    border-color: rgba(20, 202, 116, 1) !important;
}

/* BACKGROUND */
.bg-dark-mode {
    background-color: rgba(8, 16, 40, 1) !important;
}

.bg-content-dark-mode {
    background-color: rgba(11, 23, 57, 1) !important;
}

.bg-light-mode {
    background-color: rgba(240, 240, 245, 1) !important;
}

.bg-content-light-mode {
    background-color: rgba(255, 255, 255, 1) !important;
}

.bg-sidebar {
    background-color: rgba(239, 242, 246, 1) !important;
}

svg.nav-icon > path:hover {
    /* fill:rgba(203, 60, 255, 1) !important; */
    /* stroke: blue !important; */
    stroke: rgba(203, 60, 255, 1) !important;
}
.active{
    stroke: rgba(203, 60, 255, 1) !important;
}

.nav-link {
    padding-left:15px !important
}
.form-check-input:checked {
    background-color: rgba(203, 60, 255, 1);
    border-color: rgba(203, 60, 255, 1);
    color: white;
}

.outline-primary{
    color: rgba(203, 60, 255, 1);
    border-color: rgba(203, 60, 255, 1);
}

.outline-primary:hover{
    color: rgba(203, 60, 255, 1);
    border-color: rgba(203, 60, 255, 1);
}

h1 {
    font-size: 24px;
}

h4 {
    font-size: 16px;
}

 /* Perangkat kecil (SM) */
@media (min-width: 576px) {
    h1 {
        font-size: 28px;
    }

    h4 {
        font-size: 18px;
    }
}

 /* Perangkat sedang (MD) */
@media (min-width: 768px) {
    h1 {
        font-size: 32px;
    }

    h4 {
        font-size: 20px;
    }
}

 /* Perangkat besar (LG) */
@media (min-width: 992px) {
    h1 {
        font-size: 36px;
    }

    h4 {
        font-size: 22px;
    }
}

 /* Perangkat sangat besar (XL) */
@media (min-width: 1200px) {
    h1 {
        font-size: 40px;
    }

    h4 {
        font-size: 24px;
    }
}

 /* Perangkat sangat sangat besar (XXL) */
@media (min-width: 1400px) {
    h1 {
        font-size: 44px;
    }

    h4 {
        font-size: 26px;
    }
}

/* DROPDOWN */
.dropdown-menu .dropdown-item:hover{
    background-color: rgba(218, 237, 247, 0.6);
    border-radius: 10px;
}

.dropdown-menu .dropdown-item:hover{
    background-color: rgba(218, 237, 247, 0.6);
    border-radius: 10px;
    cursor: pointer;
}

.dropdown-toggle.optionInsideTable::after{
    content: none;
}

/* .dropdown:hover>.dropdown-menu, 
.dropstart:hover>.dropdown-menu {
    display: block;
    margin-top: .1em;
    margin-left: .1em;
}

@media screen and (min-width:769px) {
    .dropstart:hover>.dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
    }
    .dropstart .dropdown-toggle {
        margin-left: .5em;
    }
} */


/* DATA TABLE STYLE */
.dt-paging .pagination .dt-paging-button .page-link{
    border-radius: 100px;
}

.dt-paging .pagination .dt-paging-button.page-item .page-link{
    color: black !important;
    border:none;
}

.dt-paging .pagination .dt-paging-button.page-item.active .page-link{
    background-color: rgba(203, 60, 255, 1) !important;
    border-color:rgba(203, 60, 255, 1) !important;
    color: white !important;
}

.dt-paging .pagination .dt-paging-button .page-link.next{
    border: none;
}

.dt-paging .pagination .dt-paging-button .page-link.next:hover{
    color: rgba(203, 60, 255, 1) !important;
}

.dt-paging .pagination .dt-paging-button .page-link.previous{
    border: none;
}

.dt-paging .pagination .dt-paging-button .page-link.previous:hover{
    color: rgba(203, 60, 255, 1) !important;
}

.table-custom tbody,.table-custom td,.table-custom tfoot,.table-custom th,.table-custom thead,.table-custom tr {
    border-style: none !important;
}

.table-custom table.dataTable {
    border: none;
    border-collapse: collapse !important;
}

table.dataTable {
    border-collapse: collapse !important;
}

/* table.dataTable tr:hover {
    background-color: rgba(218, 237, 247, 1);
} */

.table-custom table.dataTable td {
    padding: 15px 0px 10px 10px;
}

.table-custom tbody>tr:nth-child(odd)>td, 
.table-custom tbody>tr:nth-child(odd)>th {
    background-color: rgba(218, 237, 247, 1);

}

tbody>tr>td[rowspan] {
    vertical-align: middle;
}

.table th,
.table td{
    vertical-align: middle !important;
}

table.dataTable td.dt-empty {
    text-align: center;    
}

.swal2-cancel-custome{
    background-color: transparent !important;
    color: #6e7d88 !important;
    border-style: solid !important;
    border-width: 1px !important;
}
.swal2-cancel-custome:hover{
    background-color: #6e7d88 !important;
        color: white !important;
        border-style: solid !important;
        border-width: 0px !important;
}

.swal2-delete-custom{
    background-color: #FF1004 !important;
    color: white !important;
    border-style: solid !important;
    border-width: 1px !important;
}
.swal2-delete-custom:hover{
    background-color: #FF1004 !important;
    color: white !important;
    border-style: solid !important;
    border-width: 0px !important;
}
.custom-a{
    color: #6c757d;
}

.form-check-input:checked {
    background-color: rgba(29, 201, 160, 1);
    border-color: rgba(29, 201, 160, 0.5);
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(29, 201, 160, 1)'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(209, 209, 214, 1)'/%3e%3c/svg%3e");
}

/* SIDE BAR COSTUM SIZE */
div.os-content{
    padding: 0px !important;
}

@media (min-width: 992px) {

    .sidebar-mini.sidebar-collapse .main-sidebar,
    .sidebar-mini.sidebar-collapse .main-sidebar::before {
        margin-left: 0;
        width: 3.9rem;
    }
}

.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused,
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover {
    width: 3.9rem;
}
.brand-link{
    padding: 0.8125rem 0rem;
}
@media (min-width: 992px) {

    .sidebar-mini.sidebar-collapse .content-wrapper,
    .sidebar-mini.sidebar-collapse .main-footer,
    .sidebar-mini.sidebar-collapse .main-header {
        margin-left: 3.9rem !important;
    }
}
.bgHover:hover svg.nav-icon>path{
    /* background: rgba(203, 60, 255, 0.2); */
    stroke: rgba(203, 60, 255, 1) !important;
}
.bgHover:hover{
    background: rgba(203, 60, 255, 0.2);
}

label.file {
    position: relative;
    display: block;
    width: 100%;
    font-size: 80%;
    text-align: center;
    text-transform: uppercase;
    border: 2px dashed #ccc;
    margin: 3rem 0;
    padding: 3rem;
}

label.file:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

label.file:active,
label.file.focus {
    border-color: #09f;
}

label.file input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    outline: 0;
    border: 1px solid red;
}

@media (max-width: 565.98px) {
    .table-responsivecustom-sm {
        display: block;
        width: 100%;
        overflow-x: auto;
        /* -webkit-overflow-scrolling: touch; */
        -ms-overflow-style: none;
    }

    .table-responsivecustom-sm>.table-bordered {
        border: 0;
    }
}

@media (max-width: 757.98px) {
    .table-responsivecustom-md {
        display: block;
        width: 100%;
        overflow-x: auto;
        /* -webkit-overflow-scrolling: touch; */
        -ms-overflow-style: none;
    }

    .table-responsivecustom-md>.table-bordered {
        border: 0;
    }
}

@media (max-width: 980.00px) {
    .table-responsivecustom-lg {
        display: block;
        width: 100%;
        overflow-x: auto;
        /* -webkit-overflow-scrolling: touch; */
        -ms-overflow-style: none;
    }

    .table-responsivecustom-lg>.table-bordered {
        border: 0;
    }
}

@media (max-width: 1189.98px) {
    .table-responsivecustom-xl {
        display: block;
        width:100%;
        overflow-x: auto;
        /* -webkit-overflow-scrolling: touch; */
        -ms-overflow-style: none;
    }

    .table-responsivecustom-xl>.table-bordered {
        border: 0;
    }
}

.table-responsivecustom {
    display: block;
    width: 100%;
    overflow-x: scroll;
    /* -webkit-overflow-scrolling: touch; */
    -ms-overflow-style: none;
}
.table-responsivecustom::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}
.table-responsivecustom>.table-bordered {
    border: 0;
}