html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body {
    background: url(/Asset/images/bg.png) repeat center center;
    background-size: 300px;
    font-family: Sarabun !important;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

#form1 {
    background: linear-gradient(135deg, rgba(255, 243, 134, 0.7) 10%, rgba(231, 214, 127, 0.9) 50%, #edbf33e6 90%);
    height: 100vh;
    width: 100%;
    align-content: center;
    overflow: auto;
}

#outterBox {
    padding: 50px 0px;
}

.login-box {
    max-width: 840px;
    width: 840px;
    justify-self: center;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 0px;
    background: linear-gradient(135deg, rgb(255 255 255 / 70%) 10%, rgb(223 223 223 / 90%) 50%);
    box-shadow: 0px 0px 25px 10px #00000040;
}

.label-box {
    margin: auto;
    font-size: 18px;
    font-weight: 400;
    font-family: Sarabun !important;
    font-style: italic;
    text-align: center;
    margin: 10px 0px;
}

.box-logo > a:hover {
    text-decoration: none;
    color: unset;
}

.box-content {
    display: flex !important;
    flex-direction: row;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.lbl-caption {
    font-size: 14px;
    font-family: Sarabun !important;
    font-style: italic;
}

.col-thaid {
    width: 50%;
    padding: 25px 0px;
}

.col-rdens {
    width: 50%;
    padding: 25px 0px;
    border-left: solid 1px #b5b5b5;
}

.btn-signin {
    background-color: #0c7842;
    color: #FFFFFF;
    /*border: solid 1px #b5b5b5;*/
    border: none;
    font-size: 14px;
    font-style: italic;
}

.btn-thaid {
    background: linear-gradient(315deg, #030650e6 10%, #030650fa 50%, #030650 90%), url(../../Asset/images/bg.png) repeat center center;
    background-color: #030650;
    color: #ffd600;
    /* border: solid 1px #b5b5b5; */
    border: none;
    font-size: 16px;
    font-weight: 600;
    width: 280px;
    height: 50px;
    align-content: center;
    margin: auto;
    text-align: center;
    border-radius: 5px;
    transition: color .35s ease-in-out, background-color .35s ease-in-out, border-color .35s ease-in-out, box-shadow .35s ease-in-out;
}

    .btn-thaid:hover, .btn-thaid:active, .btn-thaid:after, .btn-thaid:focus {
        cursor: pointer;
        background-color: #0d1285 !important;
        color: #ffd600 !important;
        background: linear-gradient(315deg, #0d1285e6 10%, #0a0e60 50%, #030650 90%), url(../../Asset/images/bg.png) repeat center center;
        transition: color .35s ease-in-out, background-color .35s ease-in-out, border-color .35s ease-in-out, box-shadow .35s ease-in-out;
    }

    .btn-thaid:active, .btn-thaid:after, .btn-thaid:focus {
        box-shadow: 0 0 0 .2rem rgb(72 109 180 / 50%);
    }


#btnThaiDImg {
    height: 48px;
    width: 48px;
    margin-right: 10px !important;
}

.icon-thaid {
    height: 48px;
    width: 48px;
}

.btn-pwd {
    border: 1px solid #ced4da;
    border-left: none;
    /*background-color: #efefef;*/
    background-color: #FFFFFF30;
    width: 36px;
    padding: 0px;
}

.box-warning {
    font-size: 12px;    
    color: #d1001b;
}

.pop-control {
}

    .pop-control > .modal-content {
        border: none;
        border-radius: 10px !important;
        box-shadow: 0px 0px 25px 20px #00000010;
    }

.pop-header {
    color: #4e4e4e;
    font-size: 14px;
    font-weight: 600;
    padding: 0.5rem 0.75rem !important;
}

.pop-icon {
    color: #d1001b;
}

.pop-btn-close {
    font-family: 'Font Awesome 6 Free' !important;
    color: #4e4e4e;
}

.pop-content {
    color: #4e4e4e;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 0.5rem 0.75rem !important;
}

#PopupError_OV {
    opacity: 0.4;
}

@media(max-width: 839px) {
    .login-box {
        width: 540px;
    }

    .box-content {
        flex-direction: column !important;
    }

    .col-thaid {
        width: 100%;
    }

    .col-rdens {
        width: 100%;
    }
}

.mnh-53px {
    min-height: 53px !important;
}


.m-auto {
    margin: auto;
}

.level-1,
.level-2,
.level-3 {
    font-family: Sarabun !important;
    color: #0c7842;
}

.level-1 {
    font-size: 22px !important;
    font-weight: 800;
}

.level-2,
.level-3 {
    font-size: 16px !important;
    font-weight: 600;
    margin-top: -3px;
}

.text-red {
    color: red;
}

.text-semi-secondary {
    color: #cacaca;
}

.w-400px {
    width: 400px;
}

@media screen and (max-width: 419px) {
    #d2,
    #d3 {
        font-size: 13px !important;
    }
}

.showPwd {
    width: 50px;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
}

    .showPwd i {
        height: 100%;
    }


.flex-grow-1{
    flex: 1 1 0px;
}

.gap{
    gap: 7px;
}