:root {
    --title-font-size: 13px;
    --content-font-size: 13px;
    --min-height-button: 35px;
    --min-width-button: 100px;
}

html {
    font-size: 14px;
    font-family: ShinhanLight !important;
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
  }
}

@media only screen and (max-width: 480px) {
    /* Styles for mobile devices */
    .text-error.error-code {
        font-weight: 700;
        font-size: 100px;
    }

    .error-page-image {
        width: 80%;
    }

    .error-page.clearfix {
        padding-top: 100px;
    }

    .text-error.error-title {
        margin-top: -50px;
    }


    .body.flex-grow-1 {
        background-size: 80% auto;
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Styles for tablets */
    .text-error.error-code {
        font-weight: 700;
        font-size: 150px;
    }

    .error-page-image {
        width: 80%;
    }

    .error-page.clearfix {
        padding-top: 50px;
    }

    .text-error.error-title {
        margin-top: -70px;
    }


    .body.flex-grow-1 {
        background-size: 80% auto;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Styles for small desktop screens */

    .text-error.error-code {
        font-weight: 700;
        font-size: 200px;
    }

    .error-page-image {
        width: 70%;
    }

    .error-page.clearfix {
        padding-top: 50px;
    }

    .text-error.error-title {
        margin-top: -100px;
    }


    .body.flex-grow-1 {
        background-size: 70% auto;
    }
}

@media only screen and (min-width: 1025px) {
    /* Styles for large desktop screens */

    .text-error.error-code {
        font-weight: 700;
        font-size: 200px;
    }

    .error-page-image {
        width: 50%;
    }

    .error-page.clearfix {
        padding-top: 0px;
    }

    .text-error.error-title {
        margin-top: -100px;
    }

    .body.flex-grow-1 {
        background-size: 60% auto;
    }

    .modal-dialog.dialog-noti {
        margin-top: 10%;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}
.error-page {
    text-align: center
}

.text-error {
    color: #6f5dcd;
}

.error-page div > span {
    display: inline-block;
    overflow: hidden;
    transition-duration: 0.2s;
    transition-property: transform;
}

    .error-page div > span span {
        display: inline-block;
        transition-duration: 0.5s;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .error-page div > span:nth-child(odd) {
        transform: translateY(50%);
    }

        .error-page div > span:nth-child(odd) span {
            transform: translateY(-100%);
        }

    .error-page div > span:nth-child(even) {
        transform: translateY(-50%);
    }

        .error-page div > span:nth-child(even) span {
            transform: translateY(100%);
        }

.error-page div.loaded > span {
    transform: translateY(0);
}

    .error-page div.loaded > span span {
        transform: translateY(0);
    }

.error-page .outline {
    color: transparent;
    -webkit-text-stroke: 2px #6f5dcd;
}

.card-title {
    font-size: var(--title-font-size);
    font-weight: var(--header-font-weight);
    color: var(--header-text-color);
    margin-bottom: 1.2rem;
    text-transform: none;
}

.body.flex-grow-1 {
    padding: 20px;
}

.card-header {
    display: flex;
    background-color: var(--header-panel-color) !important;
    justify-content: space-between;
    height: 30px;
    padding: 7px 15px !important;
    border-radius: 10px 10px 10px 10px !important;
}

    .card-header.have-button {
        display: flex;
        background-color: var(--header-panel-color) !important;
        justify-content: space-between;
        height: 40px;
        padding: 4px !important;
    }
        .card-header.have-button .card-title {
            margin: 8px 15px;
        }

/*Button*/

.btn.btn-purple-style {
    min-width: var(--min-width-button);
    font-size: var(--content-font-size);
    margin: 5px 0px 5px 5px;
    color: var(--text-button-color);
    background-color: var(--background-button-color);
    border-color: var(--background-button-color);
}

.btn-purple-style:hover {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--background-button-color) !important;
}

.btn-purple-style:focus, .btn-purple-style.focus {
    color: var(--text-button-color) !important;
    background-color: var(--background-button-color) !important;
    border-color: var(--background-button-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-purple-style.disabled, .btn-purple-style:disabled {
    color: var(--text-button-color) !important;
    background-color: var(--background-button-color) !important;
    border-color: var(--background-button-color) !important;
}

.btn-purple-style:not(:disabled):not(.disabled):active, .btn-purple-style:not(:disabled):not(.disabled).active,
.show > .btn-purple-style.dropdown-toggle {
    color: var(--text-button-color) !important;
    background-color: var(--background-button-color) !important;
    border-color: var(--background-button-color) !important;
}

    .btn-purple-style:not(:disabled):not(.disabled):active:focus, .btn-purple-style:not(:disabled):not(.disabled).active:focus,
    .show > .btn-purple-style.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    }

.btn.btn-purple-invert {
    height: 32px;
    padding: 4px !important;
    min-width: var(--min-width-button);
    font-size: var(--content-font-size);
    color: var(--text-button-color);
    background-color: var(--background-button-color);
    border-color: var(--border-button-color);
    border: 2px solid var(--border-button-color);
}

.btn-purple-invert:hover {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--background-button-color) !important;
}

.btn-purple-invert:focus, .btn-purple-invert.focus {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--text-button-color) !important;
    box-shadow: 0 0 0 0.1rem var(--border-button-color);
}

.btn-purple-invert.disabled, .btn-purple-invert:disabled {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--text-button-color) !important;
}

.btn-purple-invert:not(:disabled):not(.disabled):active, .btn-purple-invert:not(:disabled):not(.disabled).active,
.show > .btn-purple-invert.dropdown-toggle {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--text-button-color) !important;
}

    .btn-purple-invert:not(:disabled):not(.disabled):active:focus, .btn-purple-invert:not(:disabled):not(.disabled).active:focus,
    .show > .btn-purple-invert.dropdown-toggle:focus {
        box-shadow: 0 0 0.1rem var(--border-button-color);
    }

.button-search-row {
    text-align: center;
}

.card .accordion-content{
    padding: 15px;
}

.card.form-control-ui {
    margin-top: 20px;
}

a {
    color: #6f5dcd;
    text-decoration: none;
}

.accordion-item {
    color: var(--cui-accordion-color);
    background-color: var(--cui-card-bg);
    border: var(--cui-accordion-border-width) solid var(--cui-card-border-color);
}

.fw-normal {
    font-size: 13px;
    font-family: ShinhanLight;
}

/*Devextreme*/

.dx-row.dx-column-lines.dx-header-row {
    color: var(--text-header-color);
    background-color: var(--background-header-color);
    font-weight: var(--header-font-weight);
}

.dx-widget {
    font-size: var(--content-font-size);
    font-family: ShinhanLight;
}


.dx-texteditor-input {
    font-size: var(--content-font-size);
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-lookup-empty .dx-texteditor-label .dx-label span, .dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty .dx-texteditor-label .dx-label span {
    font-size: var(--content-font-size);
}

.icon-grid {
    font-size: 14px;
    font-weight: 300;
    padding: 0px 2px;
    color: var(--background-header-color) !important;
    cursor: pointer;
}
    .icon-grid:hover {
        color: var(--cui-orange) !important;
    }
.container-fluid.p-0 {
    padding: 0px 5px !important;
}

.btn-purple-invert-icon {
    background-color: transparent;
    color: #fff; 
    padding: 5px; 
    border-radius: 9px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-purple-invert-icon:hover {
        color: var(--cui-orange);
    }

    .btn-purple-invert-icon i {
        font-size: 16px;
    }

.btn-icon-only {
    padding: 7px;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

    .btn-icon-only i {
        font-size: 18px;
    }

.custom-arrow.bi-arrow-down-circle, .custom-arrow.bi-arrow-up-circle {
    padding: 5px;
    color: white;
}

.sidebar-nav .nav-group.show .nav-group-toggle {
    margin: 1px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}


.overlay-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 79%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.three-body {
    --uib-size: 35px;
    --uib-speed: 0.8s;
    --uib-color: #5D3FD3;
    position: relative;
    display: inline-block;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}


.three-body__dot {
    position: absolute;
    height: 100%;
    width: 30%;
}

    .three-body__dot:after {
        content: '';
        position: absolute;
        height: 0%;
        width: 100%;
        padding-bottom: 100%;
        background-color: var(--uib-color);
        border-radius: 50%;
    }

    .three-body__dot:nth-child(1) {
        bottom: 5%;
        left: 0;
        transform: rotate(60deg);
        transform-origin: 50% 85%;
    }

        .three-body__dot:nth-child(1)::after {
            bottom: 0;
            left: 0;
            animation: wobble1 var(--uib-speed) infinite ease-in-out;
            animation-delay: calc(var(--uib-speed) * -0.3);
        }

    .three-body__dot:nth-child(2) {
        bottom: 5%;
        right: 0;
        transform: rotate(-60deg);
        transform-origin: 50% 85%;
    }

        .three-body__dot:nth-child(2)::after {
            bottom: 0;
            left: 0;
            animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;
        }

    .three-body__dot:nth-child(3) {
        bottom: -5%;
        left: 0;
        transform: translateX(116.666%);
    }

        .three-body__dot:nth-child(3)::after {
            top: 0;
            left: 0;
            animation: wobble2 var(--uib-speed) infinite ease-in-out;
        }

@keyframes spin78236 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes wobble1 {
    0%, 100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-66%) scale(0.65);
        opacity: 0.8;
    }
}

@keyframes wobble2 {
    0%, 100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(66%) scale(0.65);
        opacity: 0.8;
    }
}

.modal.fade.show.in {
    margin-top: 0px;
}

.required-validation .dx-label span::before {
    content: "* ";
    color: #f44336;
}

.dx-row.dx-freespace-row{
    display: none;
}

.validation-text {
    font-size: 13px !important;
}

.button-right-row {
    text-align: right;
    margin-bottom: 5px;
    margin-top: 15px;
}

.icon-card-header {
    margin: -9px 5px -5px -13px;
    height: 30px;
}

.modal-header {
    padding: 10px;
}

    .modal-header .form-title {
        font-size: 16px;
        margin-bottom: 0px !important;
    }

.avatar-md {
    --cui-avatar-width: 2.0rem;
    --cui-avatar-height: 2.0rem;
    --cui-avatar-font-size: 0.5rem;
    --cui-avatar-status-width: 0.7rem;
    --cui-avatar-status-height: 0.7rem;
}

.wrapper.d-flex.flex-column.min-vh-100 {
    background: linear-gradient(to bottom, #e6ebf7, #ffffff);
}

/*2024-12-16*/

a {
    cursor: pointer;
}

.form-control.otp-input {
    margin: 5px;
    text-align: center;
}

.modal-content {
    background: linear-gradient(to bottom, #e6ebf7, #ffffff);
}



.dx-checkbox-container {
    align-items: normal;
}

.dx-checkbox-icon {
    border: 2px solid var(--dx-border-color);
}

.sidebar-header .btn-close {
    margin-left: 10px;
}

/*CSS RESPONSIVE*/

@media (max-width: 480px) {
    .modal-dialog.dialog-noti {
        margin-top: 40%;
    }
    
    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 20px;;
    }

    .content-noti{
        font-size: 15px;;
    }

    .sign-noti{
        font-size: 15px;;
    }

    .content-all{
        margin-top: 10%;
    }
}

@media (min-width: 481px) {

    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 30px;;
    }

    .content-noti{
        font-size: 20px;;
    }

    .sign-noti{
        font-size: 20px;;
    }

    .content-all{
        margin-top: 10%;
    }
}

@media (min-width: 768px) {
    
    
    .container.footer-top{
        text-align: left;
    }

    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 30px;;
    }

    .content-noti{
        font-size: 20px;;
    }

    .sign-noti{
        font-size: 20px;;
    }

    .content-all{
        margin-top: 10%;
    }
}

@media (min-width: 992px) {
    
    .container.footer-top{
        text-align: left;
    }

    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 40px;;
    }

    .content-noti{
        font-size: 30px;;
    }

    .sign-noti{
        font-size: 30px;;
    }

    .content-all{
        margin-top: 10%;
    }
}

@media (min-width: 1200px) {
    
    .container.footer-top{
        text-align: left;
    }

    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 40px;;
    }

    .content-noti{
        font-size: 30px;;
    }

    .sign-noti{
        font-size: 30px;;
    }

    .content-all{
        margin-top: 10%;
    }
}


@media (min-width: 1280px) {
    .modal-dialog.dialog-noti {
        margin-top: 10%;
    }

    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 30px;;
    }

    .content-noti{
        font-size: 20px;;
    }

    .sign-noti{
        font-size: 20px;;
    }

    .content-all{
        margin-top: 10%;
    }
}


@media (min-width: 1280px) {
    .modal-dialog.dialog-noti {
        margin-top: 10%;
    }

    .qr-image{
        width: 100%;
    }

    .title-noti{
        font-size: 40px;;
    }

    .content-noti{
        font-size: 30px;;
    }

    .sign-noti{
        font-size: 30px;;
    }

    .content-all{
        margin-top: 10%;
    }
}