html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins';
    color: #666;
    overflow-x: hidden;
}

.rounded-2rem {
    border-radius: 1rem !important;
}

.rounded-rem {
    border-radius: 0.5rem !important;
}

.card {
    position: relative;
}

    .card.bg-gradient {
        border-radius: 1rem !important;
    }

        .card.bg-gradient img {
            border-radius: 1rem !important;
        }

        .card.bg-gradient .card-header {
            border-radius: 2rem 2rem 0 0 !important;
        }

        .card.bg-gradient .card-footer {
            border-radius: 0 0 2rem 2rem !important;
        }

    .card.bg-primary {
        border-radius: 1rem !important;
    }

        .card.bg-primary img {
            border-radius: 1rem !important;
        }

        .card.bg-primary .card-header {
            border-radius: 2rem 2rem 0 0 !important;
        }

        .card.bg-primary .card-footer {
            border-radius: 0 0 2rem 2rem !important;
        }

    .card.bg-info {
        border-radius: 1rem !important;
    }

        .card.bg-info img {
            border-radius: 1rem !important;
        }

        .card.bg-info .card-header {
            border-radius: 2rem 2rem 0 0 !important;
        }

        .card.bg-info .card-footer {
            border-radius: 0 0 2rem 2rem !important;
        }

    .card.bg-warning {
        border-radius: 1rem !important;
    }

        .card.bg-warning img {
            border-radius: 1rem !important;
        }

        .card.bg-warning .card-header {
            border-radius: 2rem 2rem 0 0 !important;
        }

        .card.bg-warning .card-footer {
            border-radius: 0 0 2rem 2rem !important;
        }

    .card.bg-secondary-subtle {
        border-radius: 1rem !important;
    }

        .card.bg-secondary-subtle img {
            border-radius: 1rem !important;
        }

        .card.bg-secondary-subtle .card-header {
            border-radius: 2rem 2rem 0 0 !important;
        }

        .card.bg-secondary-subtle .card-footer {
            border-radius: 0 0 2rem 2rem !important;
        }

.login-sn {
    border-radius: 10px !important;
}

    .login-sn .card-footer.bg-lightblue.text-center {
        border-radius: 0 0 10px 10px;
    }

.login-sn-title {
    font-size: 3rem;
}

.back-button {
    border-radius: 0.5rem !important;
}

.detail-title {
    font-size: 18px;
}

button.btn.btn-warning.text-white.px-4, a.btn.btn-warning.text-white.px-4 {
    font-size: 14px;
}

table.example {
    font-size: 14px;
}

    table.example span {
        font-size: 12px !important;
    }

    table.example thead th, table.example thead td {
        border-bottom: 1px solid #d1d1d4 !important;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 0px solid;
}

input, select {
    border: 1px solid #D1D2D4 !important;
    border-radius: 4px !important;
}

    input::placeholder, select option:selected {
        color: #D1D2D4 !important;
    }

.object-cover {
    object-fit: cover;
}

.font-weight-medium {
    font-weight: 600 !important;
}

.p {
    font-size: 14px !important;
    word-wrap: break-word;
}

.font-12 {
    font-size: 12px !important;
}

.font-36 {
    font-size: 36px !important;
}

i.fa.fa-angle-down {
    float: right;
}

.profile-three-column li {
    font-size: 10px !important;
}

    .profile-three-column li b {
        font-size: 10px !important;
    }

.dropdown-toggle::after {
    display: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

.bg-blue {
    background: #0065b3;
}

.text-blue {
    color: #0065b3 !important;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: #ffff !important;
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    /* border: 1px solid #979797; */
    background: unset !important;
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #fff !important;
    border: 0px !important;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 0px !important;
}

.bg-gradient {
    background: rgb(2,102,179);
    background: linear-gradient(54deg, rgba(2,102,179,1) 0%, rgba(2,164,180,1) 90%);
}

.bg-secondary-subtle {
    background: #00a6b4;
    background: linear-gradient(54deg, #00a6b4 0%, rgba(2,164,180,1) 90%);
}

.btn,
.form-control {
    box-shadow: unset !important
}

.alert-warning {
    background: #ffe7bc;
    color: #e07e27;
    font-weight: 500;
}

.input-group-prepend .btn-outline-info {
    border-color: #ced4da
}

#banner {
    background: #000;
}

    #banner .carousel-inner img {
        opacity: 0.6;
    }

    #banner .carousel-caption {
        text-align: unset;
        padding: unset;
        left: 0;
        right: 0;
        bottom: unset;
    }

    #banner .carousel-indicators {
        position: unset;
        margin: unset;
        justify-content: unset
    }

        #banner .carousel-indicators li {
            height: 10px;
            width: 10px;
            border-radius: 20px;
            transition: 300ms;
            border: none;
            opacity: 1 !important
        }

            #banner .carousel-indicators li.active {
                height: 10px;
                width: 30px;
                background: #e07e27;
            }

#login {
    background: url(../images/login-bg.jpg) center no-repeat;
    background-size: cover;
}

.flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}




#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 255px;
    max-width: 255px;
    background: #00a6b4;
    transition: 300ms;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    padding-top: 30px;
    overflow: auto;
}

#wrapper.active #sidebar {
    left: -255px;
}

#content {
    width: calc(100% - 255px);
    padding: 0 15px;
    transition: 300ms;
    margin-left: 255px;
    overflow-x: hidden;
}

#wrapper.active #content {
    margin-left: 0;
}

@media (min-width:0) and (max-width:767px) {
    button.btn.btn-warning.text-white.px-4, a.btn.btn-warning.text-white.px-4 {
        width: 100%;
    }

    #sidebar {
        left: -300px;
    }

    #wrapper.active #sidebar {
        left: 0;
    }

    #content {
        margin-left: 0;
        width: 100%
    }

    #wrapper.active #content {
        margin-left: 255px;
        opacity: 0.2;
        width: calc(100% - 300px);
    }
}

@media (min-width:0) and (max-width:896px) {
    button.btn.btn-warning.text-white.px-4, a.btn.btn-warning.text-white.px-4 {
        width: 100%;
    }

    #sidebar {
        left: -300px;
    }

    #wrapper.active #sidebar {
        left: 0;
    }

    #content {
        margin-left: 0;
        width: 100%
    }

    #wrapper.active #content {
        margin-left: 255px;
        opacity: 0.2;
        width: calc(100% - 300px);
    }
}

.w-170 {
    min-width: 170px;
    max-width: 170px;
}

#sidebar .nav .nav-link {
    color: #fff;
    padding: 0.7rem 1rem;
}

#sidebar .nav a {
    transition: 300ms;
    font-size: 14px;
    font-weight: 500;
}

    #sidebar .nav .nav-item.show .nav-link,
    #sidebar .nav a:hover,
    #sidebar .nav .active {
        background: #00808b
    }

#sidebar .nav .dropdown-menu {
    position: unset !important;
    transform: unset !important;
}

    #sidebar .nav .dropdown-menu a {
        color: #fff;
        padding: 0.5rem 1rem 0.5rem 2rem;
    }

#myTab {
    background: #F7F7F7;
    border-radius: 30px;
    padding: 5px;
}

    #myTab a {
        color: #343a40;
        transition: 300ms;
        border-radius: 30px;
        font-weight: 500
    }

    #myTab .active {
        background: linear-gradient(120deg, rgba(248,226,103,1) 0%, rgba(246,185,17,1) 100%);
    }

#news h5 {
    font-size: 18px;
}

.breadcrumb {
    margin: 0 -15px;
}

    .breadcrumb a {
        color: #949599;
    }

    .breadcrumb .active {
        color: #0065b3;
    }

.overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.3)
}

#agent {
}

    #agent li {
        min-width: 200px;
        max-width: 200px;
        margin: 0 10px 10px 0;
        min-height: 100%
    }

.agen-comm li {
    max-width: 170px !important;
}

#agent a {
    background: #d1d2d4;
    color: #fff;
    transition: 300ms;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    min-height: 100%
}

#agent .active {
    background: rgb(2,102,179);
    background: linear-gradient(54deg, rgba(2,102,179,1) 0%, rgba(2,164,180,1) 90%);
}

    #agent .active i {
        transform: rotate(180deg);
    }

#agentp {
}

    #agentp li {
        min-width: 155px;
        max-width: 155px;
        margin: 0 10px 10px 0;
        min-height: 100%
    }

    #agentp a {
        background: #d1d2d4;
        color: #fff;
        transition: 300ms;
        border-radius: 10px;
        font-weight: 500;
        font-size: 14px;
        min-height: 100%
    }

    #agentp .active {
        background: rgb(2,102,179);
        background: linear-gradient(54deg, rgba(2,102,179,1) 0%, rgba(2,164,180,1) 90%);
    }

        #agentp .active i {
            transform: rotate(180deg);
        }

h3 {
    font-size: 24px !important;
}

h4 {
    font-size: 18px !important;
    line-height: 30px;
}

#oneCarousel .owl-stage-outer,
#oneCarousel .owl-stage {
    display: flex
}

#oneCarousel .owl-item:first-child {
    border-left: none;
    padding: 0
}

#oneCarousel .owl-item {
    height: 100%;
    padding-left: 15px;
}

#oneCarousel2 .owl-stage-outer,
#oneCarousel2 .owl-stage {
    display: flex
}

#oneCarousel2 .owl-item:first-child {
    border-left: none;
    padding: 0
}

#oneCarousel2 .owl-item {
    height: 100%;
    padding-left: 15px;
}

@media (min-width:767px) {
    #searchCollapse.collapse:not(.show) {
        display: unset;
    }
}


@media (min-width:992px) and (max-width:1399px) {
    #oneCarousel2 .owl-item:first-child {
        width: 120% !important;
    }

    div#lupaPassword {
        left: 30% !important;
    }
}

@media (min-width:768px) and (max-width:991px) {
    #banner .display-4 {
        font-size: 38px
    }

    .md-sn {
        font-size: 1.5rem;
    }

    .md-fn {
        font-size: 0.5rem;
    }
}

@media (min-width:576px) and (max-width:767px) {
    #mobileHeader {
        padding: 0;
    }

    #banner .display-4 {
        font-size: 44px
    }
}

@media (min-width:0px) and (max-width:575px) {
    #mobileHeader {
        padding: 0;
    }

    .form-inline.float-sm-right .btn {
        width: 120px;
    }
}

.bg-neworange {
    background: #e07e27;
}

.bg-lightblue {
    background: #00a6b4;
}

.bg-greensh {
    background: #00808b;
}

.bg-yellow {
    background: #ffc107;
}

.bg-fbb033 {
    background: #fbb033 !important;
}

.bg-grey-s {
    background: #d1d2d4;
}

.bg-footer-section {
    background: #D1D2D4;
}

.show a#navbarDropdown {
    border-bottom: 1px solid #068793;
}

.h-46 {
    height: 46px;
}

.placeholder_title {
    font-size: 4.5rem
}

.loin-text {
    color: #0065b3;
}

.login-text-back {
    color: #d1d2d4;
    font-size: 35px;
}

a.btn.btn-outline-dark.btn-sm.w-100.mt-2:hover {
    border-color: blue;
    background: white;
    color: black;
}

.sh_hr_bg {
    background: rgb(217 220 223) !important;
}

/* .table-outline { */
/* border: 1px solid; */
/* border-color: #d8dbe0; */
/* box-sizing: border-box; */
/* font-size: 12px; */
/* font-weight: 400; */
/* line-height: 1.5; */
/* text-align: left; */
/* -webkit-font-smoothing: antialiased; */
/* color: #768192; */
/* } */

.paddingPeriod {
    padding: 0px !important;
}

#footer {
    bottom: 0;
    padding: 8px;
    font-size: 11px;
    clear: both;
    text-align: center;
    color: #666;
    background-color: #e9ecef;
    margin: 0 -15px;
}


/* Ukuran font header dan isi tabel */
.datatable-custom th,
.datatable-custom td,
div.dataTables_scrollHead th {
    font-size: 12px !important;
}

/* Warna background untuk header */
.datatable-custom thead th,
div.dataTables_scrollHead thead th {
    background-color: #e9ecef !important;
    font-size: 12px !important;
}

/* Zebra striping baris: putih-abu */
.datatable-custom tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}

.datatable-custom tbody tr:nth-child(even) td {
    background-color: #f8f9fa !important;
}

/* Font-size elemen DataTables lainnya */
.dataTables_wrapper * {
    font-size: 12px !important;
}




/* Font size pagination */
.dataTables_wrapper .dataTables_paginate .pagination {
    font-size: 12px !important;
}

/* Styling tombol Previous, Next, angka */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    padding: 8px 10px;
    margin: 0 4px;
    color: #007bff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
}

/* Active page number */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #007bff;
    color: white !important;
    border-color: #007bff;
}

/* Disabled buttons */
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #f8f9fa;
}

/* Remove default focus outline */
.dataTables_wrapper .dataTables_paginate .page-link:focus {
    box-shadow: none;
}