.footer * {
    color: white;
}

@media screen and (max-width: 1200px) {
    #sidenav-menu {
        display: none;
        translate: translateX(-100%);
        transition: all 0.5s ease-in;
    }
}


.jumbotron {
    height: 60vh;
    width: 100%;
}

@media screen and (max-width: 520px) {
    .jumbotron {
        height: 20vh;
    }
}

/* .jumbotron-bg{
    background-image: linear-gradient( rgba(0, 0, 0, 0.6), transparent),
    url('../storage/asset/landingpage_ky.jpg');
    background-size: cover;
    height: 100%;
    width: 100%;
} */

.jumbotron-bg {
    background: linear-gradient(to bottom,
            rgb(23, 44, 79, 0.1),
            rgb(23, 44, 79) 100%),
        url("../storage/asset/landingpage_ky.jpg");
    background-size: cover;
    height: 100%;
    /* Use 100vh for full viewport height */
    width: 100%;
    position: relative;
}

.fade-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.9));
    /* Adjust the fade intensity as needed */
    z-index: 1;
}

.txt-orange {
    color: #fb6340 !important;
}

.txt-white {
    color: var(--white-color) !important;
}

/* Background  */

.bg-white {
    background-color: var(--white-color);
}

/* End of Background */

/* Button */
.btn-primary {
    background-color: #213962 !important;
    border-color: #213962 !important;
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    background-color: #213962 !important;
    border-color: #213962 !important;
    box-shadow: 0 0 0 0.25rem rgb(33 57 98 / 50%) !important;
}

/* End of Button */

/* Color */
:root {
    --default-color: #172b4d;
    --primary-color: #5e72e4;
    --secondary-color: #f4f5f7;
    --info-color: #11cdef;
    --success-color: #2dce89;
    --danger-color: #f5365c;
    --waning-color: #fb6340;
    --white-color: #fff;
}

/* Chart */
.chart {
    max-height: 16rem;
}

/* Font Color */
.text-default {
    color: var(--default-color);
}

.text-white {
    color: white !important;
}

.text-default {
    color: var(--default-color);
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.text-info {
    color: var(--info-color);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.text-waning {
    color: var(--waning-color);
}

/* Background Color */

/* Background Image */
.ky-bg-img {
    width: 100%;
    object-fit: cover;
    z-index: -1;
    position: absolute;

    filter: blur(1px);
    /* -webkit-filter: blur(1px); */
}

/*  */

.dropdown .dropdown-menu.show:before {
    top: 0px !important;
}

/* } */

/* Layout */
@media screen and (min-width: 1200px) {
    .layout {
        margin-left: 250px;
    }

    .sidenav.fixed-start+.main-content {
        /* margin-left: 0px; */
        /* Same as the width of the sidenav */
    }

}

/* card */

.card {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.card-color-1 {
    background-color: #172b4d !important;
    color: white !important;
}

.card-color-1 * {
    color: white;
}



/* End of Card */

/* DataTable */
div.dataTables_wrapper div.dataTables_length select {
    width: 4rem;
}

/* End of DataTable */

/* Iframe */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* Atur aspek ratio disini (misalnya: 16:9) */
    height: 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* End of Iframe */

/* login page */
.wellcome-head h2 {
    color: var(--white-color) !important;
    /* outline text color */
    text-shadow: 0 0 5px var(--default-color);
    /* border: 0.2em solid var(--default-color) !important; */
}

@media screen and (max-width: 400px) {
    .auth-body {
        height: fit-content;
    }
}

@media screen and (max-width: 1200px) {
    .auth-body {
        height: cover;
    }
}

/* End of Landing Page */

/* Margin */
@media screen and (max-widht: 520px) {
    .mt-sm-2 {
        margin-top: 0.5em !important;
    }

    .mx-sm-0 {
        margin-top: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (min-widht: 520px) {
    .mx-md-4 {
        margin-top: 4rem !important;
        margin-right: 4rem !important;
    }
}

/* End of Margin */

/* navigation */
.nav-link.active-custom {
    padding: 0 0.8em 0 0.8em !important;
    font-weight: 600 !important;
    color: #172b4d !important;
    /* margin: 0.8em !important; */
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
        rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px !important;
    border-radius: 0.8em !important;
    border: 2px var(--default-color) solid !important;
}

/* tab */
.tab-head {
    border-radius: 1em 1em 0 0 !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px -29px 29px 0px !important;
}

.tab-body {
    border-radius: 0 0 1em 1em !important;
}

/* table */
.dataTables_scrollHeadInner {
    width: auto !important;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #ddd;
}

.txt-right {
    text-align: right;
}

.txt-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

/* width */
.mw-100 {
    max-width: 100%;
}

.mw-50 {
    max-width: 50%;
}

.mw-30 {
    max-width: 30%;
}

.mw-25 {
    max-width: 25%;
}

.mw-20 {
    max-width: 20%;
}

.mw-15 {
    max-width: 15%;
}

.mw-10 {
    max-width: 10%;
}

.mw-100p {
    max-width: 100px;
}

.mw-60p {
    max-width: 60px;
}

.mw-50p {
    max-width: 50px;
}

.mw-40p {
    max-width: 40px;
}

.mw-30p {
    max-width: 30px;
}

.mw-25p {
    max-width: 25px;
}

.mw-20p {
    max-width: 20px;
}

.mw-15p {
    max-width: 15px;
}

.mw-10p {
    max-width: 10px;
}

.mw-5p {
    max-width: 5px;
}

/* Sizing */
/* Width */
.w-100 {
    width: 100%;
}

.w-80 {
    width: 80%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-25 {
    width: 25%;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%;
}

.w-10 {
    width: 10%;
}

/* Media screen small / mobile */
@media screen and (max-width: 540px) {
    .w-sm-100 {
        width: 100%;
    }

    .w-sm-80 {
        width: 80%;
    }

    .w-sm-60 {
        width: 60%;
    }

    .w-sm-50 {
        width: 50%;
    }

    .w-sm-40 {
        width: 40%;
    }

    .w-sm-30 {
        width: 30%;
    }

    .w-sm-25 {
        width: 25%;
    }

    .w-sm-20 {
        width: 20%;
    }

    .w-sm-15 {
        width: 15%;
    }

    .w-sm-10 {
        width: 10%;
    }
}

/* Media screen medium / tablet */
@media screen and (min-width: 720px) {
    .w-md-100 {
        width: 100%;
    }

    .w-md-80 {
        width: 80%;
    }

    .w-md-60 {
        width: 60%;
    }

    .w-md-50 {
        width: 50%;
    }

    .w-md-40 {
        width: 40%;
    }

    .w-md-30 {
        width: 30%;
    }

    .w-md-25 {
        width: 25%;
    }

    .w-md-20 {
        width: 20%;
    }

    .w-md-15 {
        width: 15%;
    }

    .w-md-10 {
        width: 10%;
    }
}

/* Media screen large / pc */
@media screen and (min-width: 960px) {
    .w-lg-100 {
        width: 100%;
    }

    .w-lg-80 {
        width: 80%;
    }

    .w-lg-60 {
        width: 60%;
    }

    .w-lg-50 {
        width: 50%;
    }

    .w-lg-40 {
        width: 40%;
    }

    .w-lg-30 {
        width: 30%;
    }

    .w-lg-35 {
        width: 35%;
    }

    .w-lg-25 {
        width: 25%;
    }

    .w-lg-20 {
        width: 20%;
    }

    .w-lg-15 {
        width: 15%;
    }

    .w-lg-10 {
        width: 10%;
    }
}

/* End of Width */
/* height */
@media screen and (max-width: 520px) {
    .h-sm-100 {
        height: 100%;
    }

    .h-sm-90 {
        height: 90%;
    }

    .h-sm-80 {
        height: 80%;
    }

    .h-sm-70 {
        height: 70%;
    }

    .h-sm-60 {
        height: 60%;
    }

    .h-sm-50 {
        height: 50%;
    }

    .h-sm-40 {
        height: 40%;
    }

    .h-sm-30 {
        height: 30%;
    }

    .h-sm-25 {
        height: 25%;
    }

    .h-sm-20 {
        height: 20%;
    }

    .h-sm-10 {
        height: 10%;
    }
}

/* Styles for screens between 521px and 768px */
@media screen and (min-width: 521px) and (max-width: 768px) {
    .h-md-90 {
        height: 90%;
    }

    .h-md-80 {
        height: 80%;
    }

    .h-md-70 {
        height: 70%;
    }

    .h-md-60 {
        height: 60%;
    }

    .h-md-50 {
        height: 50%;
    }

    .h-md-40 {
        height: 40%;
    }

    .h-md-30 {
        height: 30%;
    }

    .h-md-20 {
        height: 20%;
    }

    .h-md-10 {
        height: 10%;
    }
}

/* Styles for screens larger than 768px */
@media screen and (min-width: 769px) {
    .h-lg-80 {
        height: 80%;
    }

    .h-lg-70 {
        height: 70%;
    }

    .h-lg-60 {
        height: 60%;
    }

    .h-lg-50 {
        height: 50%;
    }

    .h-lg-40 {
        height: 40%;
    }

    .h-lg-30 {
        height: 30%;
    }

    .h-lg-20 {
        height: 20%;
    }

    .h-lg-10 {
        height: 10%;
    }
}

.mh-100p {
    max-height: 100px;
}

.mh-600p {
    max-height: 600px;
}

.mh-800p {
    max-height: 800px;
}

@media screen and (max-width: 540px) {
    .mh-sm-100 {
        max-height: 100px;
    }

    .mh-sm-400 {
        max-height: 400px;
    }

    .mh-sm-600 {
        max-height: 600px;
    }

    .mh-sm-800 {
        max-height: 800px;
    }
}

@media screen and (min-width: 720px) {
    .mh-md-100 {
        max-height: 100px;
    }

    .mh-md-600 {
        max-height: 600px;
    }

    .mh-md-800 {
        max-height: 800px;
    }
}

@media screen and (min-width: 960px) {
    .mh-lg-100 {
        max-height: 100px;
    }

    .mh-lg-600 {
        max-height: 600px;
    }

    .mh-lg-800 {
        max-height: 800px;
    }
}

/* Styles for screens smaller than or equal to 520px (sm) */
@media screen and (max-width: 520px) {

    /* Padding-top */
    .pt-sm-1 {
        padding-top: 0.25rem;
    }

    .pt-sm-2 {
        padding-top: 0.5rem;
    }

    .pt-sm-3 {
        padding-top: 1rem;
    }

    .pt-sm-4 {
        padding-top: 1.5rem;
    }

    .pt-sm-5 {
        padding-top: 2rem;
    }

    /* Margin-top */
    .mt-sm-1 {
        margin-top: 0.25rem;
    }

    .mt-sm-2 {
        margin-top: 0.5rem;
    }

    .mt-sm-3 {
        margin-top: 1rem;
    }

    .mt-sm-4 {
        margin-top: 1.5rem;
    }

    .mt-sm-5 {
        margin-top: 2rem;
    }

    /* Padding-y */
    .py-sm-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .py-sm-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .py-sm-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .py-sm-4 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-sm-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Margin-y */
    .my-sm-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .my-sm-2 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .my-sm-3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .my-sm-4 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .my-sm-5 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Styles for screens between 521px and 768px (md) */
@media screen and (min-width: 521px) and (max-width: 768px) {

    /* Padding-top */
    .pt-md-1 {
        padding-top: 0.25rem;
    }

    .pt-md-2 {
        padding-top: 0.5rem;
    }

    .pt-md-3 {
        padding-top: 1rem;
    }

    .pt-md-4 {
        padding-top: 1.5rem;
    }

    .pt-md-5 {
        padding-top: 2rem;
    }

    /* Margin-top */
    .mt-md-1 {
        margin-top: 0.25rem;
    }

    .mt-md-2 {
        margin-top: 0.5rem;
    }

    .mt-md-3 {
        margin-top: 1rem;
    }

    .mt-md-4 {
        margin-top: 1.5rem;
    }

    .mt-md-5 {
        margin-top: 2rem;
    }

    /* Padding-y */
    .py-md-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .py-md-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .py-md-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .py-md-4 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-md-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Margin-y */
    .my-md-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .my-md-2 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .my-md-3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .my-md-4 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .my-md-5 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Styles for screens larger than 768px (lg) */
@media screen and (min-width: 769px) {

    /* Padding-top */
    .pt-lg-1 {
        padding-top: 0.25rem;
    }

    .pt-lg-2 {
        padding-top: 0.5rem;
    }

    .pt-lg-3 {
        padding-top: 1rem;
    }

    .pt-lg-4 {
        padding-top: 1.5rem;
    }

    .pt-lg-5 {
        padding-top: 2rem;
    }

    /* Margin-top */
    .mt-lg-1 {
        margin-top: 0.25rem;
    }

    .mt-lg-2 {
        margin-top: 0.5rem;
    }

    .mt-lg-3 {
        margin-top: 1rem;
    }

    .mt-lg-4 {
        margin-top: 1.5rem;
    }

    .mt-lg-5 {
        margin-top: 2rem;
    }

    /* Padding-y */
    .py-lg-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .py-lg-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .py-lg-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .py-lg-4 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-lg-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Margin-y */
    .my-lg-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .my-lg-2 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .my-lg-3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .my-lg-4 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .my-lg-5 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Login page */
.login-container {
    max-width: 1600px !important;
    height: 100vh;
    /* margin: 0; */
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.login-page {
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    flex: auto;
}

.login-bg-aside {
    background-image: linear-gradient(to bottom,
            rgb(23, 44, 79, 0.1),
            rgb(23, 44, 79) 100%),
        url("../storage/asset/gedung-ky.jpg");
    background-size: cover;
    background-position: center;
}

.login-bg {
    /* background-image: url("../storage/asset/linier-bg.webp"); */
    background-color: white;
    background-size: cover;
    opacity: 0;
    /* Set initial opacity to 0 */
    animation: fadeIn 1s ease-in-out forwards;
    /* Use the fadeIn animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        /* Start with opacity 0 */
    }

    to {
        opacity: 1;
        /* End with opacity 1 */
    }
}

/* Login page responsive */
.login-container-wrapper {
    display: flex;
}

.login-container-wrapper .login-page {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
}

.login-container-wrapper .login-image-col {
    position: relative;
}

@media screen and (min-width: 992px) {
    .login-container-wrapper .login-page {
        flex-wrap: nowrap;
    }

    .login-container-wrapper .login-image-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .login-bg-aside {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

@media screen and (max-width: 991px) {
    .login-bg-aside {
        height: 150px;
    }
}

/* Navigation */
.navbar-vertical.bg-white {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

@media screen and (max-width: 1800px) {}

/* End of Navigation */

/* Pagination */
.page-item.active .page-link {
    background-color: #213962 !important;
    border-color: #213962 !important;
}


.paginate_button .page-item:hover {
    /* Styles for the hover effect go here */
    background-color: #11cdef !important;
    color: #333;
    /* Add any other styles you want to apply on hover */
}

/* End of Pagination */