body {
    background-color: #f5f5f5;
}

.btn-dep {
    background-color: #9B226A !important;
    background: linear-gradient(343deg, #520036, transparent 70%);
    font-weight: 500;
    border: none !important;
}

    .btn-dep:hover {
        background-color: #9B226A !important;
    }

    .btn-dep:active {
        background-color: #843E61 !important;
    }

    .btn-dep:focus-visible {
        background-color: #843E61 !important;
    }



#logoBox {
    height: 120px;
    width: 120px;
}

#logox {
    background-color: #ffffff75;
    /*background-color: white;*/
    padding: 15px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 15px -3px rgba(0,0,0,0.07),0 10px 20px -2px rgba(0,0,0,0.04);
    /*max-width: 450px;*/
    max-width: 350px;
}

.text-budget {
    color: #054991;
}

.bg-budget {
    background-color: #1aa4d1;
}

.btn-budget {
    background-color: #054991;
    /*background-color: #0d94f5;*/
}

    .btn-budget:hover, .btn-budget:active, .btn-budget:focus {
        background-color: #002c5a;
        /*background-color: #0775c9;*/
    }

.btn-pwd {
    border: 1px solid #ced4da !important;
    border-left: none !important;
    /*background-color: #efefef;*/
    background-color: #76c5fd54;
    color: #054991 !important;
    font-size: 14px;
    width: 36px;
    padding: 0px;
}

    .btn-pwd:active {
        border: 1px solid #ced4da !important;
        border-left: none !important;
    }


@media screen and (max-width: 640.98px) {
    #logoBox {
        height: 100px;
        width: 100px;
    }

    .fs-4 {
        font-size: calc(1.125rem + .3vw) !important;
    }

    .fs-5 {
        font-size: 1rem !important;
    }
}

.btm-dep {
    font-family: Kanit;
}

.bg-dep {
    background-color: #C40E7B !important
}

.text-auth {
    /*color: #f3feff;*/
    color: #06315e;
}

.login-box {
    font-family: Kanit;
    display: flex;
    flex-direction: row;
    width: 100%;
    /*max-width: 1100px;*/
    height: 100%;
    margin: auto;
    /*d-flex flex-column w-100 h-100 justify-content-center align-items-center */
}

.km-box {
    transition: width 0.3s ease-in-out;
    background-image: url(dep.jpg);
    background-size: cover;
    background-position: center;
    width: 65%;
    height: 100vh;
    padding: 40px;
    background-color: #eeeeee;
}

.km-box-body {
    padding: 10px;
    background-color: #eeeeeeaa;
}

.km-box-header {
    padding: 10px 5px;
    font-size: 22px;
    font-weight: 600;
    color: #054991;
    letter-spacing: 1.5px;
}

#dxCardKM > .card {
    border: none;
    background-color: #eeeeee50;
}

#dxCardWarning > .card {
    border: none;
    background-color: #eeeeee50;
}


.km-cv-content {
    background-color: #eeeeee50;
}

.km-card {
    border: none;
    box-shadow: 2px 3px 16px 4px rgb(219 213 213 / 25%);
    margin-bottom: 10px !important;
}

.card-body {
    height: fit-content !important;
}

.topic-box {
    color: #054991;
    padding-bottom: 10px;
}

.topic-text {
    margin-left: 10px;
    font-weight: 500;
}

.date-text {
    font-weight: 300;
    font-size: 14px;
    font-style: italic;
}

.desc-text {
    font-size: 12px;
    font-weight: 400;
    color: #2a2a2a;
    padding: 5px 0px;
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}


.btn-box {
    display: flex;
    justify-content: end;
}

.btn-attach,
.btn-attach:hover,
.btn-attach:active,
.btn-attach:focus,
.btn-attach:focus-visible {
    font-size: 0.9rem;
    color: #002c5a;
    background: none !important;
    border: none !important;
}


.pagination > .active > .page-link {
    background-color: #054991;
    border-color: #054991;
    /*background-color: #0d94f5;
    border-color: #0d94f5;*/
    color: #FFFFFF !important;
}

.pagination > .page-item > .page-link {
    color: #002c5a;
    font-size: 0.8rem !important;
}

    .pagination > .page-item > .page-link:focus {
        box-shadow: 0 0 0 0.25rem rgb(1 20 98 / 25%);
    }

.dxbs-fixed-header-content > a, .dxbs-fixed-header-content > span {
    font-weight: 500 !important;
}



.summary > .form-control-plaintext {
    font-size: 0.8rem;
}

.dxbs-edit-caption {
    color: #054991;
}

.auth-box {
    background-image: url(BG_69-01.png);
    background-size: cover;
    background-position: center;
    /**/
    transition: width 0.3s ease-in-out;
    background-color: #fafafa;
    box-shadow: -5px -1px 14px 8px rgb(151 151 151 / 22%);
    height: 100vh;
    width: 35%;
}

.auth-box-body {
    transition: width 0.3s ease-in-out;
    background-color: #c4c1ff75;
    /*background-color: #fafafa;*/
    box-shadow: -5px -1px 14px 8px rgb(151 151 151 / 22%);
    padding: 20px;
    justify-items: center;
    align-content: center;
    align-items: center;
    height: 100%;
}

@media screen and (max-width: 1200px) {
    .km-box {
        display: none;
    }

    .auth-box {
        width: 100%;
    }
}