:root {
    --color-lightblue: #90CCF4;
    --color-blue: #08ACE4;
    --color-darkblue: #0690bf;
    --color-blue-disabled: #00a8ff;
    --color-verylightgray: #E5E5E5;
    --color-lightgray: #C2C2C2;
    --color-gray: #A09C9C;
    --color-lightblack: #808080;
    --color-yellow: #ffc700;
    --color-lightgreen: #6ACE74;
    --color-green: #60b969;
    --color-darkgreen: #4b9e53;
    --color-red: #F06060;
    --color-darkred: #D34242;
    --color-black: #474747;
    --color-white: #fff;
    --color-whiteblue: #eef1f7;
    --color-purple: #cb6fd7;
}

* {
    box-sizing: border-box;
}

nav {
    background: transparent !important;
    font-family: Font-Medium !important;
}

.navbar-brand {
    max-width: 160px;
}

.bgmain {
    background: url('../images/bg-image3.jpg') no-repeat left center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.bg-img-none {
    background-image: none !important;
}

.bg-blue-gradient {
    background: rgb(255,255,255) !important;
    background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(191, 229, 255, 0.8) 80%, rgba(191, 229, 255, 1) 100%) !important;
}

.bg-green-gradient {
    background: rgb(255,255,255) !important;
    background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(162, 249, 228, 1) 100%) !important;
}

.bg-yellow-gradient {
    background: rgb(255,255,255) !important;
    background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255, 227, 156) 100%) !important;
}

@font-face {
    font-family: Font-Light;
    src: url('../fonts/Kanit/Kanit-Light.ttf');
}

@font-face {
    font-family: Font-Regular;
    src: url('../fonts/Kanit/Kanit-Regular.ttf');
}

@font-face {
    font-family: Font-Medium;
    src: url('../fonts/Kanit/Kanit-Medium.ttf');
}

@font-face {
    font-family: Font-SemiBold;
    src: url('../fonts/Kanit/Kanit-SemiBold.ttf');
}

.font-Light {
    font-family: Font-Light !Important;
}

.font-Regular {
    font-family: Font-Regular !Important;
}

.font-Medium {
    font-family: Font-Medium !Important;
}

p, h1, h2, h3, h4, h5, span, .input-group {
    font-family: Font-Light !important;
}

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

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

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

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

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

.underline-black {
    border: none;
    border-bottom: 1px solid var(--color-black);
    box-shadow: none;
    background: transparent;
}

.line-height-2-5rem {
    line-height: 2.5rem !important;
}

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

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

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

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

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

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

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

.bg-whiteblue {
    background-color: var(--color-whiteblue) !Important;
}

.h-md-100 {
    height: 100% !important;
}

.h-25px {
    height: 25px !important;
}

.h-60px {
    height: 60px !important;
}

.h-200px {
    height: 200px !important;
}

.min-h-50px {
    min-height: 50px !Important;
}

.min-h-70vh {
    min-height: 70vh !Important;
}

.min-w-0 {
    min-width: 0 !important;
}

.w-max-content {
    width: max-content !important;
}

.min-w-100 {
    min-width: 100% !important;
}

.max-w-150px {
    max-width: 150px !important;
}

.max-w-200px {
    max-width: 200px !important;
}

.w-1rem {
    width: 1rem !important;
}

.w-16rem {
    width: 16rem !important;
}

.w-5 {
    width: 5% !important;
}

.w-8 {
    width: 8% !important;
}

.w-10 {
    width: 10% !important;
}

.w-12 {
    width: 12% !important;
}

.w-15 {
    width: 15% !important;
}

.w-17 {
    width: 17% !important;
}

.w-18 {
    width: 18% !important;
}

.w-20 {
    width: 20% !important;
}

.w-27 {
    width: 27% !important;
}

.w-37 {
    width: 37% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.visibility-hidden {
    visibility: hidden
}

.o-scroll {
    overflow: scroll !important;
}

.p-relative {
    position: relative !important;
}

.text-align-left {
    text-align: left !important;
}

.text-align-right {
    text-align: -webkit-right !important;
}

.text-align-center {
    text-align: -webkit-center !important;
}

.text-align-justify {
    text-align: justify;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.place-content-center {
    place-content: center !important;
}

.inline-box {
    display: -webkit-inline-box !important;
}

.inline-size-max-content {
    inline-size: max-content !important;
}

.object-fit-contain {
    object-fit: contain !important;
}

.pt-sm-02 {
    padding-top: 0.2rem !important;
}

.pt-6 {
    padding-top: 6px !important;
}

.pt-2px {
    padding-top: 2px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-5rem {
    padding-top: 5rem !important;
}

.pt-8rem {
    padding-top: 8rem !important;
}

.ps-20 {
    padding-left: 40px !important;
}

.ps-08-r {
    padding-left: 0.8rem !important;
}

.ps-17-r {
    padding-left: 1.7rem !important;
}

.py-25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

.px-0-5 {
    padding: 0px 5px !important;
}

.ms-1px {
    margin-left: 1px !important;
}

.ms-3px {
    margin-left: 3px !important;
}

.mt-2px {
    margin-top: 2px !important;
}

.mt-12px {
    margin-top: 12px !important;
}

.mt-40px {
    margin-top: 40px !important;
}

.mb-50px {
    margin-bottom: 50px !important;
}

.container-heading {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    padding: 0.5rem 0px 0px 1rem;
}

.container-button-back {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    padding: 0rem 2rem 0rem 0rem !Important;
}

.container-list {
    padding: 0rem 1.5rem 0rem 1.5rem !Important;
    width: 100%;
}

.container-sm-page {
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1rem 1rem 0rem 1rem !important;
}

.container-md-page {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    padding: 1rem 2rem 1rem 2rem !important;
    margin-bottom: 2%;
}

.container-breadcrumbs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    padding: 1rem 2rem 0 2rem !important;
}

.card-none {
    width: 100%;
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.card-sm {
    width: 390px;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    padding: 100px 55px 100px 55px;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.card-sm-2 {
    width: 390px;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    padding: 100px 55px 100px 55px;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.card-md {
    width: 30rem;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    padding: 5rem 4rem 5rem 4rem;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.card-md-3 {
    width: 28rem;
    background: var(--color-white);
    border-radius: 20px;
    overflow: hidden;
    padding: 8rem 4rem 8rem 4rem;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.card-md-4 {
    width: 45rem !important;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    padding: 6rem 4rem 6rem 4rem;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.card-lg {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    padding: 2rem 2rem 2rem 2rem;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
    transition: 0.8s ease-in-out !important;
}

.card-dropdown-nav {
    width: 100%;
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    padding: 1rem 2rem 1rem 2rem;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
}

.wrap-member-search {
    width: 100%;
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    padding: 20px 30px;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.wrap-member-result {
    width: 100%;
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    padding: 20px 30px;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.line-h-1-3 {
    line-height: 1.3 !important;
}

.text-navbar-name {
    font-family: Font-Light !important;
    font-size: 16px;
    color: var(--color-black);
}

.text-heading-md {
    display: block;
    font-family: Font-Medium !important;
    font-size: 40px;
    color: var(--color-black);
}

.text-heading-sm {
    display: block;
    font-family: Font-Medium !important;
    font-size: 38px;
    color: var(--color-black);
}

.text-heading-ssm {
    display: block;
    font-family: Font-Medium !important;
    font-size: 30px;
    color: var(--color-black);
}

.text-heading {
    display: block;
    font-family: Font-Medium !important;
    font-size: 45px;
    color: var(--color-black);
    margin-left: 3rem;
}

.text-title-tab {
    font-family: Font-Medium;
    font-size: 22px;
    color: var(--color-white);
    background-color: var(--color-blue);
    padding: 1rem 1rem 1rem 1.8rem !Important;
}

.text-title-lg {
    font-family: Font-Medium !important;
    font-size: 40px;
    color: var(--color-black);
    height: 3.2rem;
}

.text-title-md {
    font-family: Font-Medium !important;
    font-size: 20px;
    color: var(--color-black);
}

.text-title-sm {
    font-family: Font-Medium !important;
    font-size: 18px;
    color: var(--color-black);
}

.text-title {
    font-family: Font-Medium !important;
    font-size: 20px;
    color: var(--color-black);
}

.text-content-md {
    font-family: Font-Light !important;
    font-size: 20px;
    color: var(--color-black);
}

.text-content-sm {
    font-family: Font-Light !important;
    font-size: 20px;
    color: var(--color-black);
    line-height: normal;
}

.text-content {
    font-family: Font-Light !important;
    font-size: 18px;
    color: var(--color-black);
    line-height: normal;
}

.text-breadcrumb {
    font-family: Font-Regular !important;
    font-size: 18px;
    color: var(--color-black);
    line-height: normal;
}

.rounded-10 {
    color: var(--color-white);
    border-radius: 10px !important;
}

.rounded-25 {
    color: var(--color-white);
    border-radius: 25px !important;
}

button {
    outline: none !important;
    border: none;
    background: transparent;
    font-family: Font-Medium !Important;
    font-size: 20px !Important;
    padding: 5px 20px;
    text-align: center;
    display: inline-block;
}

    button:hover {
        cursor: pointer;
    }

    button span {
        font-family: Font-Medium !Important;
    }

.button {
    min-width: 130px;
}

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

.button-green2 {
    color: var(--color-white);
    background-color: var(--color-green);
    min-width: 100%;
}

.button-yellow {
    color: var(--color-white);
    background-color: #f4b300;
    min-width: 100%;
}

    .button-green:hover {
        background-color: var(--color-darkgreen);
    }
.button-green2:hover {
    background-color: var(--color-darkgreen);
}

.button-gray {
    color: var(--color-white);
    background-color: var(--color-lightgray);
}

    .button-gray:hover {
        background-color: var(--color-gray);
    }

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

    .button-black:hover {
        background-color: var(--color-gray);
    }

.button-blue {
    color: var(--color-white) !important;
    background-color: var(--color-blue) !important;
}

    .button-blue:hover:not([disabled]) {
        background-color: var(--color-darkblue) !important;
    }

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

    .button-red:hover {
        background-color: var(--color-darkred);
    }

.button-md {
    padding: 10px 15px;
    border-radius: 30px;
}

.button-lg {
    padding: 15px 20px;
    border-radius: 30px;
}

.icon-logout {
    font-size: 20px !Important;
    color: var(--color-white);
    display: block;
    background-color: var(--color-blue);
    padding: 4px 10px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
}

    .icon-logout:hover {
        color: var(--color-darkblue);
        border: 2px solid var(--color-darkblue);
    }

.icon-continue {
    font-size: 14px !Important;
    color: var(--color-blue);
    background-color: var(--color-white);
    border: 2px solid var(--color-blue);
    padding: 5px 10px 5px 12px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px !important;
}

    .icon-continue:hover {
        color: var(--color-darkblue);
        border: 2px solid var(--color-darkblue);
    }

.icon-file {
    font-size: 16px !Important;
    color: var(--color-blue);
    display: block;
    background-color: var(--color-white);
    border: 2px solid var(--color-blue);
    padding: 4px 10px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px !important;
}

    .icon-file:hover {
        color: var(--color-darkblue);
        border: 2px solid var(--color-darkblue);
    }

.icon-alert {
    font-size: 90px;
    padding: 4px 10px;
    text-align: center;
    border-radius: 10px;
}

.input-title {
    font-family: Font-Light;
    font-size: 18px;
    color: var(--color-blue);
}

h2.input-title {
    font-size: 22px;
    font-weight: 600;
}

.input-title-eng {
    font-family: Font-Light;
    font-size: 15px;
    color: var(--color-blue);
}

.input-titleline {
    font-family: Font-Light;
    font-size: 20px;
    color: var(--color-blue);
    margin-left: 1%;
}

.input-titleline-eng {
    font-family: Font-Light;
    font-size: 15px;
    color: var(--color-blue);
}

.input-text {
    font-family: Font-Light;
    font-size: 20px !important;
    color: var(--color-black) !important;
    background-color: transparent;
    border: none !important;
    text-align: left;
    border-radius: 15px !important;
    border: 1px solid var(--color-lightblue) !important;
    width: clamp(33%, 100%, 100%) !important;
    padding: 0 1rem !important;
    margin-bottom: 0.5rem;
    height: 36px;
}

    .input-text:focus {
        outline: none;
        border: 1px solid var(--color-blue);
    }

.input-text-disabled {
    font-family: Font-Light;
    font-size: 22px;
    color: var(--color-black);
    background-color: var(--color-whiteblue);
    border: none;
    text-align: left;
    border-radius: 15px;
    border: 1px solid var(--color-gray);
    width: 95%;
    padding: 0px 5%;
    margin-bottom: 0.5rem;
}

.form-select {
    border: 5px solid var(--color-whiteblue) !important;
}

.form-select-lg {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

.form-select-button {
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.input-select {
    font-family: Font-Light !important;
    font-size: 20px !important;
    color: var(--color-black) !important;
    background-color: var(--color-white) !important;
    border: none;
    text-align: left;
    border-radius: 15px !important;
    border: 1px solid var(--color-lightblue) !important;
    width: 100%;
    padding: 0px 5%;
    margin-bottom: 0.5rem;
    height: 36px;
}

.input-select-md {
    font-family: Font-Light !important;
    font-size: 21px !important;
    color: var(--color-black) !important;
    background-color: transparent !important;
    border: none;
    text-align: left;
    border-radius: 50px !important;
    border: 1px solid var(--color-lightblue) !important;
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 1.7rem !Important;
}

.input-select-disabled {
    font-family: Font-Light !important;
    font-size: 22px !important;
    color: var(--color-black) !important;
    background-color: var(--color-whiteblue) !important;
    border: none;
    text-align: left;
    border-radius: 15px !important;
    border: 1px solid var(--color-gray) !important;
    width: 95% !important;
    padding: 0px 5%;
    margin-bottom: 0.5rem;
    line-height: 0.9 !important;
}

.input-radio {
    font-family: Font-Light !important;
    font-size: 18px !important;
    color: var(--color-black) !important;
    border: none;
    text-align: left;
    width: 95% !important;
    padding: 0.2rem 0 0 0.7rem;
}

.input-radio-specify {
    font-family: Font-Light !important;
    font-size: 18px !important;
    color: var(--color-black) !important;
    border: none;
    text-align: left;
    padding: 0% 0% 25px 10px;
}

.form-check-input-pdf {
    width: 20px !Important;
    height: 20px !Important;
    border: 2px solid var(--color-blue) !Important;
}

    .form-check-input-pdf:checked {
        background-color: var(--color-blue) !Important;
    }

.form-check-input-main {
    width: 1.75rem !Important;
    height: 1.75rem !Important;
    border: 2px solid var(--color-blue) !Important;
    color: var(--color-black) !Important;
}

    .form-check-input-main.isRequired, .input-select.isRequired {
        border: 2px solid var(--color-red) !Important;
    }

    .form-check-input-main:checked {
        background-color: var(--color-blue) !Important;
    }

.form-check-input-disabled {
    width: 1.5em !Important;
    height: 1.5em !Important;
    border: 2px solid var(--color-gray) !Important;
    color: var(--color-black) !Important;
    background-color: var(--color-whiteblue) !Important;
}

    .form-check-input-disabled:checked {
        background-color: var(--color-gray) !Important;
    }

.input-text-radio {
    font-family: Font-Light;
    font-size: 22px;
    color: var(--color-black);
    background-color: transparent;
    border: none;
    text-align: left;
    border-radius: 15px;
    border: 1px solid var(--color-lightblue);
    width: 45% !important;
    padding: 0px 5%;
    margin-bottom: 0.5rem;
    line-height: inherit !important;
}

    .input-text-radio:focus {
        outline: none;
        border: 1px solid var(--color-blue) !important;
    }

.input-text-radio-disabled {
    font-family: Font-Light;
    font-size: 22px;
    color: var(--color-black);
    background-color: var(--color-whiteblue);
    border: none;
    text-align: left;
    border-radius: 15px;
    border: 1px solid var(--color-gray);
    width: 45% !important;
    padding: 0px 5%;
    margin-bottom: 0.5rem;
    line-height: inherit !important;
}

.input-radio-eng {
    font-size: 17px !important;
}

.input-text-copy {
    font-family: Font-Light;
    font-size: 16px !important;
    color: var(--color-blue) !important;
    background-color: transparent !important;
    text-align: left;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    border: 1px solid var(--color-blue) !important;
    padding: 0 1rem !important;
    height: 36px;
}

.button-copy {
    font-size: 21px !important;
    background-color: transparent !important;
    text-align: left;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border: 1px solid var(--color-blue) !important;
    height: 36px;
}

.input-text-sms {
    font-family: Font-Light !important;
    font-size: 16px !important;
    color: var(--color-black) !important;
    background-color: transparent !important;
    text-align: left;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    border: 1px solid var(--color-lightblue) !important;
    padding: 0 1rem !important;
    height: 36px;
}

.button-sms {
    font-family: Font-Medium !important;
    font-size: 16px !important;
    color: var(--color-white) !important;
    background-color: var(--color-blue) !important;
    text-align: left;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border: 1px solid var(--color-blue) !important;
    height: 36px;
}

    .button-sms:hover {
        background-color: var(--color-darkblue) !important;
    }

.input-text-datepicker {
    font-family: Font-Light;
    font-size: 20px !important;
    color: var(--color-black) !important;
    background-color: transparent !important;
    border: none;
    text-align: left;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    border: 1px solid var(--color-lightblue) !important;
    padding: 0 1rem !important;
    margin-bottom: 0.5rem;
    height: 36px;
}

.input-text-datepicker {
    font-family: Font-Light;
    font-size: 20px !important;
    color: var(--color-black) !important;
    background-color: transparent !important;
    border: none;
    text-align: left;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    border: 1px solid var(--color-lightblue) !important;
    padding: 0 1rem !important;
    margin-bottom: 0.5rem;
    height: 36px;
}

    .input-text-datepicker:focus {
        outline: none;
        border: 1px solid var(--color-blue);
    }

.button-datepicker {
    min-width: 15% !important;
    font-size: 21px !important;
    color: var(--color-blue) !important;
    background-color: transparent !important;
    text-align: left;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border: 1px solid var(--color-lightblue) !important;
    padding: 0px 5%;
    margin-bottom: 0.5rem;
    height: 36px;
}

.dropdown-menu {
    font-family: Font-Light !important;
    font-size: 19px !important;
    color: var(--color-black) !important;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 20px 20px 20px 20px !important;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.datepicker th.datepicker-switch {
    width: 190px;
    background-color: var(--color-whiteblue) !important;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--color-blue)), to(var(--color-darkblue))) !important;
}

.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--color-blue)), to(var(--color-darkblue))) !important;
}

img {
    width: 100%;
}

.btn-radius-start {
    border-radius: 25px 0px 0px 25px !important;
}

.btn-radius-end {
    border-radius: 0px 25px 25px 0px !important;
}

.bd-0 {
    outline: none !important;
    border: none !important;
}

.bd-inset {
    border-bottom: inset;
}

.readonly {
    pointer-events: none !important;
}

    .readonly.input-text, .readonly.input-select, .readonly.button-datepicker, .readonly.datepicker_input {
        opacity: 1 !important;
        border: 1px solid var(--color-gray) !important;
        background-color: var(--color-whiteblue) !important;
    }

        .readonly.button-datepicker i {
            color: var(--color-gray) !Important;
        }

iframe {
    border: none !important;
}

.wrap-login100 {
    width: 390px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 100px 55px 100px 55px;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.readonly {
    pointer-events: none;
    opacity: 0.5;
}

.login100-form {
    width: 100%;
}

.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid #adadad;
    margin-bottom: 37px;
}

.input100 {
    font-family: Font-Light;
    font-size: 20px;
    color: #555555;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 45px;
    background: transparent;
    padding: 0 5px;
}

.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

    .focus-input100::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        background: #08ace4;
        background: -webkit-linear-gradient(left, #90ccf4, #00acff);
        background: -o-linear-gradient(left, #90ccf4, #00acff);
        background: -moz-linear-gradient(left, #90ccf4, #00acff);
        background: linear-gradient(left, #90ccf4, #00acff);
    }

    .focus-input100::after {
        font-family: Font-Light;
        font-size: 20px;
        color: #999999;
        line-height: 1.2;
        content: attr(data-placeholder);
        display: block;
        width: 100%;
        position: absolute;
        top: 16px;
        left: 0px;
        padding-left: 5px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }

.input100:focus + .focus-input100::after {
    top: -15px;
}

.input100:focus + .focus-input100::before {
    width: 100%;
}

.has-val.input100 + .focus-input100::after {
    top: -15px;
}

.has-val.input100 + .focus-input100::before {
    width: 100%;
}

.btn-show-pass {
    font-size: 15px;
    color: #999999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    padding-right: 5px;
    cursor: pointer;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

    .btn-show-pass:hover {
        color: #08ace4;
        color: -webkit-linear-gradient(left, #90ccf4, #00acff);
        color: -o-linear-gradient(left, #90ccf4, #00acff);
        color: -moz-linear-gradient(left, #90ccf4, #00acff);
        color: linear-gradient(left, #90ccf4, #00acff);
    }

    .btn-show-pass.active {
        color: #08ace4;
        color: -webkit-linear-gradient(left, #90ccf4, #00acff);
        color: -o-linear-gradient(left, #90ccf4, #00acff);
        color: -moz-linear-gradient(left, #90ccf4, #00acff);
        color: linear-gradient(left, #90ccf4, #00acff);
    }

.container-login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 13px;
}

.wrap-login100-form-btn {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 25px;
    overflow: hidden;
    margin: 0 auto;
}

.login100-form-bgbtn {
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: #00acff;
    background: -webkit-linear-gradient( right, #90ccf4, #00acff, #90ccf4, #00acff );
    background: -o-linear-gradient(right, #90ccf4, #08ace4, #90ccf4, #08ace4);
    background: -moz-linear-gradient(right, #90ccf4, #00acff, #90ccf4, #00acff);
    background: linear-gradient(right, #90ccf4, #08ace4, #90ccf4, #08ace4);
    top: 0;
    left: -100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.login100-form-btn {
    font-family: ThaiSansNeue-Medium;
    font-size: 22px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
}

.wrap-login100-form-btn:hover .login100-form-bgbtn {
    left: 0;
}

.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 2px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0px;
    pointer-events: none;
    font-family: Font-Light;
    color: #c80000;
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    font-size: 16px;
    color: #c80000;
    display: block;
    position: absolute;
    background-color: #fff0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

.table {
    border-bottom-width: 0 !important;
    margin-bottom: 0 !important;
}

.table-result {
    border-collapse: collapse;
    border-radius: 20px;
    overflow: hidden;
    width: 73rem !important
}

.thead-result {
    font-family: Font-Light;
    font-size: 20px;
    color: var(--color-lightblack);
    background-color: var(--color-whiteblue);
    border-radius: 20px;
    border-bottom: 2px solid transparent;
}


td {
    font-size: 20px;
    vertical-align: middle;
}

.text-result {
    font-family: Font-Light;
    font-size: 20px;
    color: var(--color-black);
}

.text-error {
    color: var(--color-red);
}

.pagination > li > a {
    background-color: white;
    color: var(--color-lightblack);
    font-family: Font-Light;
    font-size: 20px;
    min-width: 36px;
    text-align: center;
}

    .pagination > li > a:focus,
    .pagination > li > a:hover,
    .pagination > li > span:focus,
    .pagination > li > span:hover {
        color: var(--color-lightblack);
        background-color: var(--color-whiteblue);
        border-color: var(--color-lightblue);
    }

.pagination > .active > a {
    color: var(--color-white);
    background-color: var(--color-blue) !important;
    border: solid 1px var(--color-whiteblue) !important;
}

.h1-title-text {
    display: block;
    font-family: Font-Medium !Important;
    font-size: 55px;
    color: var(--color-black);
    margin: 0px 0px 0px 7%;
}

.h2-title-name {
    display: block;
    font-family: Font-Regular;
    font-size: 20px !Important;
    color: var(--color-black);
    margin-left: 7.5%;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    width: 130px;
    height: 50px;
    font-family: Font-Medium;
    font-size: 20px !Important;
    color: var(--color-black) !Important;
    background-color: var(--color-white) !Important;
}

.nav-tabs .nav-link {
    width: 120px;
    font-family: Font-Medium;
    font-size: 20px !Important;
    color: var(--color-white);
    background-color: var(--color-blue) !important;
    border-top-left-radius: 0rem !important;
    border-top-right-radius: 2rem !important;
}

    .nav-tabs .nav-link:not(.active) {
        width: 150px;
        margin-left: -25px !important;
    }

    .nav-tabs .nav-link:first-child:not(.active) {
        margin-left: 0px !important;
        border-top-left-radius: 2rem !important;
        border-top-right-radius: 0rem !important;
    }

    .nav-tabs .nav-link:not(:first-child).active {
        margin-left: -25px;
    }

    .nav-tabs .nav-link.active {
        border-top-left-radius: 2rem !important;
        z-index: 1;
    }

.tab-content {
    padding: 0.1rem 1.5rem 1rem 1.5rem;
    background-color: var(--color-white) !Important;
    padding: 0.1rem 2rem 1.5rem 2rem !Important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


.form-check-label.sub-check-label {
    color: #A09C9C;
    font-size: 16px;
}

.radio-title {
    font-family: Font-Light;
    font-size: 20px;
    color: var(--color-black);
}

.radio-subtitle {
    font-family: Font-Light;
    font-size: 18px;
    color: var(--color-black);
}

.radio-button {
    justify-content: right;
    text-align: end;
}

.list-group-item {
    height: auto;
    padding: 0.7rem 0.5rem 1rem 0.5rem !Important;
}

page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

    page[size="A4"] {
        width: 21cm;
        height: 29.7cm;
    }

.container-pdf {
    padding-right: var(--bs-gutter-x, 3rem) !Important;
    padding-left: var(--bs-gutter-x, 3rem) !Important;
    padding-top: var(--bs-gutter-x, 1rem) !Important;
    padding-bottom: var(--bs-gutter-x, 0rem) !Important;
}

.navbar-pdf {
    justify-content: flex-start !Important;
    background-color: var(--color-blue) !Important;
    padding: 5px 0px 10px 30px !Important;
}

.footer-pdf-blue {
    background-color: var(--color-blue) !Important;
    padding: 5px 0px 10px 30px !Important;
}

.footer-text-pdf {
    justify-content: space-between !Important;
    background: transparent;
    margin-top: 5px !Important;
}

.footer-icon-pdf {
    font-size: 22px !Important;
}

.img-navbar-pdf {
    height: 45px;
    max-width: 180px;
}

.img-logo-pdf {
    height: 50px;
    max-width: 250px;
}

.img-signature-pdf {
    height: 60px;
    border: none;
    max-width: 150px;
    border-bottom: 1px solid var(--color-black);
    object-fit: contain;
}

.text-navbar-topic-pdf {
    font-family: Font-Regular;
    font-size: 20px;
    color: var(--color-white);
}

.text-topic-pdf {
    font-family: Font-Regular;
    font-size: 15px;
    color: var(--color-black);
}

.text-footer-pdf {
    font-family: Font-Regular;
    font-size: 12px;
    color: var(--color-black) !Important;
}

.text-footer-sm-pdf {
    font-family: Font-Regular;
    font-size: 9px;
    color: var(--color-black) !Important;
}

.text-title-pdf {
    font-family: Font-Medium;
    font-size: 13px;
    color: var(--color-black) !Important;
    margin-top: 5px !Important;
    margin-bottom: 5px !Important;
}

.text-consent-pdf {
    font-family: Font-Regular;
    font-size: 11px;
    color: var(--color-black) !Important;
}

.text-content-pdf {
    font-family: Font-Regular;
    font-size: 12px;
    color: var(--color-black) !Important;
    margin-left: 5px;
    margin-right: 5px;
}

.input-group-pdf {
    padding: 5px 0px 5px 0px !Important;
}

.input-underline-pdf {
    font-family: Font-Regular;
    font-size: 15px;
    color: var(--color-black);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-black);
    box-shadow: none;
    border-radius: 0;
    height: 20px;
}

.form-check-pdf {
    min-height: 0rem !Important;
    margin-left: 15px !Important;
    margin-right: 2px;
    margin-bottom: 0rem !Important;
}

.form-check-pdf-disabled {
    margin-top: 0em !Important;
    width: 1em !Important;
    height: 1em !Important;
    border: 2px solid var(--color-blue-disabled) !Important;
    opacity: 100%;
    color: var(--color-black) !Important;
    background-color: transparent !Important;
    background-position: center;
}

    .form-check-pdf-disabled:checked {
        background-color: var(--color-blue-disabled) !Important;
    }

.table-pdf {
    width: 95% !Important;
    margin-left: 12px;
    border: 2px solid var(--color-black) !Important;
    margin-bottom: 5px !Important;
}

.table-td-pdf {
    font-size: 11px !Important;
    border: 2px solid var(--color-black) !Important;
}

.widget-paragraph-body div {
    overflow-x: auto
}

.widget-paragraph-body .table {
    width: 70rem;
    border: 2px solid var(--color-gray);
    margin-bottom: 5px;
    margin-bottom: 1rem !Important;
}

    .widget-paragraph-body .table th {
        font-size: 18px;
        border: 2px solid var(--color-gray);
        width: 15rem;
        line-height: normal;
    }

    .widget-paragraph-body .table td {
        font-size: 18px;
        border: 2px solid var(--color-gray);
        width: 15rem;
        line-height: normal;
    }

.table-td-left-pdf {
    border-left: 2px solid var(--color-black) !Important;
}

.table-td-none-bt-pdf {
    border-bottom: none !Important;
}

.input-underline-signature-pdf {
    font-family: Font-Regular;
    font-size: 12px;
    color: var(--color-black);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-black);
    box-shadow: none;
    border-radius: 0;
    height: 20px;
}

button:disabled {
    background-color: #C2C2C2 !important;
    pointer-events:none ;
}

.img-qrcode {
    width: 250px;
}

.input-title-OTP {
    font-family: Font-Light;
    font-size: 20px;
    color: var(--color-black);
    background-color: var(--color-white);
}

.input-otp input {
    font-family: Font-Medium;
    font-size: 30px;
    color: var(--color-black);
    width: 50px;
    height: 60px;
    border: 2px solid var(--color-blue);
}

    .input-otp input.invalid {
        border: 2px solid var(--color-red) !important;
        color: var(--color-red) !important;
    }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.wrap-breadcrumbs {
    width: 100%;
    background-color: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
    height: 60px;
    margin-bottom: 20px;
}

.breadcrumb {
    padding: 0px;
    background: var(--color-white);
    list-style: none;
    overflow: hidden;
    height: 100%;
    font-family: Font-Regular;
    font-size: 20px !important;
    color: var(--color-black);
}

    .breadcrumb > li + li:before {
        padding: 0;
    }

    .breadcrumb li {
        float: left;
    }

        .breadcrumb li.active a {
            background: var(--color-blue);
            color: var(--color-white);
            min-inline-size: max-content;
        }

            .breadcrumb li.active a:after {
                border-left: 30px solid var(--color-blue);
            }

        .breadcrumb li.last {
            background: var(--color-white);
            color: var(--color-black);
        }

        .breadcrumb li a {
            position: relative;
            display: block;
            float: left;
            width: 95%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 30px;
        }

            .breadcrumb li a:after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 30px solid var(--color-white);
                position: absolute;
                top: 50%;
                margin-top: -50px;
                left: 100%;
                z-index: 2;
            }

            .breadcrumb li a:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 30px solid var(--color-lightgray);
                position: absolute;
                top: 50%;
                margin-top: -50px;
                margin-left: 1px;
                left: 100%;
                z-index: 1;
            }

a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
    justify-content: center !important;
    text-align: -webkit-center !important;
    vertical-align: middle !important;
    min-inline-size: max-content;
}

.widget-paragraph-body {
    overflow-y: auto;
    max-height: 500px;
}

@media only screen and (max-width: 782px) {
    .breadcrumb li a {
        font-size: 14px;
    }
}

.icon-completed {
    font-size: 80px;
    color: var(--color-green);
}

.text-title-form {
    font-family: Font-Regular !Important;
    font-size: 18px;
    color: var(--color-black) !Important;
}

.form-content .row .widget-size-100 .widget-body section {
    padding-right: 30px;
}

.wrap-member-search .widget-size-100 .widget-body section {
    padding-right: 0 !important;
}

.widget-size-100 .input-text {
    width: clamp(33px, 48.5%, 50%) !important;
}

.widget-size-100 .input-select {
    width: clamp(33px, 48.5%, 50%) !important;
}

.widget-size-100 .input-group.date {
    width: clamp(33px, 48.5%, 50%) !important;
}

.widget.widget-html-code-widget {
    margin-bottom: 0.3rem !important;
}

.nav-tabs .nav-link {
    min-height: 60px;
}

#loading-div {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    background-color: #ffffff69;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

        .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: var(--color-blue);
            margin: -4px 0 0 -4px;
        }

        .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }

            .lds-roller div:nth-child(1):after {
                top: 63px;
                left: 63px;
            }

        .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }

            .lds-roller div:nth-child(2):after {
                top: 68px;
                left: 56px;
            }

        .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }

            .lds-roller div:nth-child(3):after {
                top: 71px;
                left: 48px;
            }

        .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }

            .lds-roller div:nth-child(4):after {
                top: 72px;
                left: 40px;
            }

        .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }

            .lds-roller div:nth-child(5):after {
                top: 71px;
                left: 32px;
            }

        .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }

            .lds-roller div:nth-child(6):after {
                top: 68px;
                left: 24px;
            }

        .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }

            .lds-roller div:nth-child(7):after {
                top: 63px;
                left: 17px;
            }

        .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }

            .lds-roller div:nth-child(8):after {
                top: 56px;
                left: 12px;
            }

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

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

#member-list_paginate .pagination {
    float: right;
    margin-top: 20px;
}

.container-pdf.content-main {
    min-height: 986px;
}

p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.swal2-popup {
    font-family: Font-Light !important;
    padding: 2rem 0 2rem 0 !Important;
}

b, strong {
    font-weight: bolder;
    color: var(--color-blue) !important;
}

.wrap-member-search .widget-html-code-widget .card .widget-html-code-widget h2.input-title {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 18px !important;
}

.swal2-confirm {
    color: var(--color-white) !important;
    background-color: var(--color-green) !important;
    border-radius: 25px !important;
    min-width: 120px !important;
    padding: 0.5rem 1.5rem !important;
}

.swal2-cancel {
    color: var(--color-white) !important;
    background-color: var(--color-red) !important;
    border-radius: 25px !important;
    min-width: 120px !important;
    padding: 0.5rem 1.5rem !important;
}

.was-validated .form-select:invalid, .form-select.is-invalid, .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
    border-color: var(--color-red) !important;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: var(--color-red) !important;
    padding-right: calc(1.5em + 0.75rem);
}

.swal2-container.swal2-center > .swal2-popup {
    border-radius: 20px;
}

.swal2-title {
    font-family: Font-Regular !important;
    padding: 0 !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0em;
}

form.form-readOnly input:not(.bd-0), form.form-readOnly select:not(.bg-img-none), form.form-readOnly textarea, form.form-readOnly .interest-item {
    pointer-events: none ;
    opacity: 1;
    background-color: var(--color-whiteblue) !important;
    border: 1px solid var(--color-gray) !important;
}

form.form-readOnly label.input-radio {
    pointer-events: none;
    opacity: 1;
}

form.form-readOnly .form-check-input-main:checked {
    background-color: var(--color-gray) !Important;
    border: 2px solid var(--color-gray) !important;
}

form.form-readOnly .form-check-input-main {
    border: 2px solid var(--color-gray) !important;
}

form.form-readOnly .button-datepicker {
    color: var(--color-gray) !Important;
    background-color: var(--color-whiteblue) !Important;
    border: 1px solid var(--color-gray) !important;
}

.readonly .form-check-input-main:checked {
    background-color: var(--color-gray) !Important;
    border: 2px solid var(--color-gray) !important;
}

.readonly .form-check-input-main {
    background-color: var(--color-whiteblue) !Important;
    border: 2px solid var(--color-gray) !important;
}

.nav-text-position {
    display: -webkit-inline-box !important;
    padding-top: 0.5rem;
}

.icon-nav {
    font-size: 20px;
    padding-top: 0.2rem;
    color: var(--color-gray);
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0rem !important;
}

.navbar-collapse, .collapse, .show > .card-lg {
    text-align: -webkit-left !important;
}

.nav-positon {
    display: -webkit-inline-box !important;
    padding-top: 0rem !important;
}

.wrapper.isRequired {
    border-color: var(--color-red);
    box-shadow: 0 0 10px var(--color-red);
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.8s ease !important;
    padding: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}

.cursor-pointer {
    cursor: pointer;
}

.widget.widget-html-code-widget {
    margin-bottom: 0.8rem;
}

.progress-container {
    width: 4px;
    height: 100%;
    background: #e4e4e4;
}

.paragraph-progress-bar {
    height: 0%;
    background: var(--color-blue);
    width: 4px;
}

.paragraph-progress-bar-x {
    height: 4px;
    background: var(--color-gray);
    width: 0%;
}

input.input-text.isRequired, .input-text-sms.isRequired {
    border-color: var(--color-red) !important;
}

.wrapper {
    position: relative;
    min-height: 300px;
    border: 2px solid;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #FFFFFF;
    border: 1px solid var(--color-black);
    border-radius: 10px;
    border-color: var(--color-black) !important;
}

.datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active {
    color: var(--color-white) !important;
}

.breadcrumbs-treatment .breadcrumb li a:before {
    border-left: none !important;
}

.breadcrumbs-treatment .breadcrumb li a {
    width: 100% !important;
}

.alert {
    font-family: Font-Medium !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

.badge {
    font-family: Font-Medium !important;
    font-size: 14px !important;
    padding: 0.3em 0.65em !important;
    background-color: #ffffff !important;
}

    .badge.badge-pill {
        border-radius: 20px;
        font-weight: normal;
        align-self: center !important;
    }

    .badge.badge-danger {
        border: 2px solid var(--color-red) !important;
        color: var(--color-red) !important;
    }
    .badge.badge-blue {
        border: 2px solid var(--color-blue) !important;
        color: var(--color-blue) !important;
    }

    .badge.badge-gray {
        border: 2px solid var(--color-gray) !important;
        color: var(--color-gray) !important;
    }

    .badge.badge-warning {
        border: 2px solid #f4b000 !important;
        color: #F4B000 !important;
    }

    .badge.badge-success {
        border: 2px solid var(--color-green) !important;
        color: var(--color-green) !important;
        background-color: #fff !important;
    }

    .badge.badge-purple {
        border: 2px solid var(--color-purple) !important;
        color: var(--color-purple) !important;
    }

.button-black-around {
    font-size: 16px !important;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 2px solid var(--color-black);
    float: right;
    margin-left: -8rem !important;
}

.icon-div {
    width: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0px !important;
    color: var(--color-white);
    font-size: 14px;
    max-width: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-div.circle {
        border-radius: 50%;
    }

    .icon-div.icon-success {
        background-color: var(--color-lightgreen);
    }

    .icon-div.icon-warnning {
        background-color: var(--color-yellow);
    }

    .icon-div.icon-danger {
        background-color: var(--color-red);
    }

    .icon-div.icon-gray {
        background-color: var(--color-gray);
    }

    .icon-div.icon-blue {
        background-color: var(--color-blue);
    }

body > footer {
    height: 30px !important;
    line-height: 30px !important;
    background-color: #f5f5f500 !important;
    color: var(--color-lightblack) !important;
    font-size: 12px;
}

.list-group-item .radio-title .readonly {
    opacity: 1 !important;
}

    .list-group-item .radio-title .readonly p {
        opacity: 0.5 !important;
    }

.icon-continue.danger {
    color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    background-color: var(--color-white) !important;
}

.icon-continue.warning {
    color: var(--color-yellow) !important;
    border-color: var(--color-yellow) !important;
    background-color: var(--color-white) !important;
}

.icon-continue.gray {
    color: var(--color-gray) !important;
    border-color: var(--color-gray) !important;
    background-color: var(--color-white) !important;
}

.icon-continue.purple {
    color: var(--color-purple) !important;
    border-color: var(--color-purple) !important;
    background-color: var(--color-white) !important;
}

.form-control:valid.isRequired {
    background-image: none !important;
}

    .form-control:valid.isRequired:focus {
        box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%) !important;
    }

.col-md-8 .col-md-8 .input-group .input-text-sms {
    border: 1px solid var(--color-lightblue) !important;
}

.rounded-pill-start {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.rounded-pill-end {
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

.input-group.datepicker-content > * {
    background-color: var(--color-white) !important;
    border-color: var(--color-lightblue) !important;
    color: var(--color-blue) !important;
}

.input-group.datepicker-content .form-control.datepicker {
    color: var(--color-black) !important;
    font-weight: 400 !important;
    font-size: 20px;
}

button.nav-link:hover {
    color: var(--color-white) !important;
}

form.form-readOnly input.lable-readonly, form.form-readOnly select.lable-readonly {
    border: none !important;
    background-color: transparent !important;
}

.readonly .d-md-block .d-flex input.form-control, .readonly .col-md-12 .input-group input.input-text-sms {
    background-color: var(--color-whiteblue) !Important;
    border: 2px solid var(--color-gray) !important;
}

.readonly .col-md-12 .input-group span.button-sms {
    background-color: var(--color-gray) !Important;
    border: 2px solid var(--color-gray) !important;
}

.paragraph-scrolling {
    overflow-y: scroll;
    --webkit-overflow-scrolling: touch;
}

    .paragraph-scrolling::-webkit-scrollbar {
        width: 0px;
    }

.row > .row {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.container-pdf .form-control {
    font-family: Font-Light !important;
    color: var(--color-black);
    font-size: 14px;
    border: none;
    border-bottom: 1px solid var(--color-black);
    box-shadow: none;
    background: transparent !important;
    text-align: -webkit-center !important;
    max-width: 250px;
    height: 25px !important;
}

.w-50px {
    width: 50px !important;
}

.w-80px {
    width: 80px !important;
}

.w-199px {
    width: 199px !important;
}

.w-216px {
    width: 216px !important;
}

.w-219px {
    width: 219px !important;
}

.w-233px {
    width: 233px !important;
}

.w-237px {
    width: 237px !important;
}

.w-246px {
    width: 246px !important;
}

.w-252px {
    width: 252px !important;
}

.w-261px {
    width: 261px !important;
}

.w-264px {
    width: 264px !important;
}

.w-282px {
    width: 282px !important;
}

.w-343px {
    width: 343px !important;
}

.w-350px {
    width: 350px !important;
}

.w-365px {
    width: 365px !important;
}

.w-373px {
    width: 373px !important;
}

.w-405px {
    width: 405px !important;
}

.w-410px {
    width: 410px !important;
}

.w-445px {
    width: 445px !important;
}

.w-447px {
    width: 447px !important;
}

.w-458px {
    width: 458px !important;
}

.w-464px {
    width: 464px !important;
}

.w-470px {
    width: 470px !important;
}

.w-500px {
    width: 500px !important;
}

.w-544px {
    width: 545px !important;
}

.w-545px {
    width: 545px !important;
}

.w-520px {
    width: 520px !important;
}

.w-584px {
    width: 584px !important;
}

form.form-lable .form-check-input-main:checked {
    background-color: var(--color-gray) !Important;
    border: 2px solid var(--color-gray) !important;
}

form.form-lable .form-check-input-main {
    background-color: transparent !Important;
    border: 2px solid var(--color-gray) !important;
}

form.form-lable input.form-control.input-text, form.form-lable select:not(.bg-img-none) {
    pointer-event: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    border: none !important;
    font-weight: 700 !important;
    margin-top: auto !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
    padding-top: 0rem !important;
    margin-bottom: 0rem !important;
    font-family: Font-Light !important;
    font-size: 18px;
    color: var(--color-black);
    line-height: normal;
    width: 100% !important;
}

form.form-lable .widget-header span.input-title {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

form.form-lable span.input-title {
    font-family: Font-Light !important;
    font-size: 18px;
    color: var(--color-black);
    line-height: normal;
    flex: 0 0 auto;
    width: max-content !important;
    padding-left: 0rem !important;
    padding-right: 1rem !important;
}

form.form-lable span.text-error {
    opacity: 0 !important;
}

form.form-lable .button-datepicker {
    color: var(--color-gray) !Important;
    background-color: var(--color-whiteblue) !Important;
    border: 1px solid var(--color-gray) !important;
}

form.form-lable section {
    display: -webkit-inline-box !important;
}

form.form-lable.was-validated .form-control:valid, form.form-lable.was-validated .form-select:valid:not([multiple]):not([size]) {
    background-image: none !important;
}

.card-md-3.col-lg-10 {
    max-width: 800px;
}

.flag-div {
    max-width: 28px;
    width: 28px;
}

    .flag-div img.flag {
        box-shadow: 1px 2px 4px 1px #6c6c6c85;
        border-radius: 50%;
        border: 1px solid;
    }

.typeform-div {
    width: 2rem !important;
    height: 2rem !important;
}

    .typeform-div i.typeform-green {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1rem;
        color: var(--color-darkgreen);
        border-radius: 50%;
        border: 2px solid var(--color-darkgreen);
        background-color: var(--color-white);
        padding: 0.3rem;
    }

    .typeform-div i.typeform-yellow {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1rem;
        color: #f4b300;
        border-radius: 50%;
        border: 2px solid #f4b300;
        background-color: var(--color-white);
        padding: 0.3rem;
    }
    .typeform-div i.typeform-blue {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1rem;
        color: var(--color-darkblue);
        border-radius: 50%;
        border: 2px solid var(--color-darkblue);
        background-color: var(--color-white);
        padding: 0.3rem;
    }

.typeform-img-div {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    text-align: start !important;
}

    .typeform-img-div img {
        width: 100px;
        opacity: 0.6;
    }

        .typeform-img-div img.sm {
            width: 100px;
            vertical-align: bottom;
        }



#represent-form.readonly, #represent-form .widget.readonly {
    opacity: 1 !important;
}

    #represent-form .widget.readonly .widget-body {
        opacity: 0.5 !important;
    }

    #represent-form.readonly input.input-text, #represent-form.readonly select.input-select {
        opacity: 1 !important;
        border: 1px solid var(--color-gray) !important;
        background-color: var(--color-whiteblue) !important;
    }

.container-pdf.container-full-widht {
    min-height: 1100px
}

.ta-content .button-blue {
    padding: 5px 20px !important;
}

.ta-content .badge {
    font-family: Font-Regular !important;
}

.ta-content .col-md-6 {
    padding-bottom: .5rem !important;
}

.ta-content li {
    cursor: unset !important;
    background-color: transparent !important;
}

.ta-content li:hover {
    background-color: transparent !important;
}

[dir]:root[data-theme=default] .btn-primary, [dir]:root[data-theme=default] .button {
    border-color: var(--color-blue) !important;
}

@media (min-width: 991px) {
    .text-title-md {
        font-size: 27px !important;
    }

    .text-title-sm {
        font-size: 25px !important;
    }
}

@media (min-width: 767px) {
    .text-title-md {
        font-size: 23px !important;
    }

    .text-title-sm {
        font-size: 20px !important;
    }

    .w-md-48 {
        width: 48% !important;
    }

    form.form-lable input.form-control.input-text, form.form-lable select:not(.bg-img-none) {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
}

@media (max-width: 992px) {
    table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:before {
        right: 1.2em !important;
        -webkit-transform: scale(1.3) !important;
    }

    table.dataTable > thead .sorting:before, table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:before, table.dataTable > thead .sorting_desc_disabled:after {
        bottom: .6em !important;
        -webkit-transform: scale(1.3) !important;
    }

    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }

    .thead-result {
        font-size: 16px;
    }

    td {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .w-button-confirm {
        width: 30% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#LastName, .widget.widget-html-code-widget.widget-size-50 .inline-box input#RepreLastName, .widget.widget-html-code-widget.widget-size-50 .inline-box input#FirstName, .widget.widget-html-code-widget.widget-size-50 .inline-box input#RepreFirstName, .widget.widget-html-code-widget.widget-size-50 .inline-box input#HouseNo {
        width: 71% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#Country, .widget.widget-html-code-widget.widget-size-50 .inline-box input#ProvinceId {
        width: 76% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#ProvinceId {
        width: 75% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#RepreIDCard {
        width: 74% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#VillageNo {
        width: 69% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#Lane {
        width: 68% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#DistrictId {
        width: 63% !important;
    }

    .widget.widget-html-code-widget.widget-size-50 .inline-box input#DOBStr {
        width: 59% !important;
    }
}

@media (max-width: 767px) {
    .widget-size-100, .widget-size-75, .widget .widget-size-75, .widget-size-66, .widget .widget-size-66, .widget-size-50, .widget .widget-size-50, .widget-size-33, .widget .widget-size-33, .widget-size-25, .widget .widget-size-25 {
        width: 100% !important;
    }

        .widget-size-100 .input-select {
            width: 100% !important;
        }

        .widget-size-100 .input-text {
            width: 100% !important;
        }

    .wrap-member-search .widget-html-code-widget .card .widget-html-code-widget h2.input-title {
        margin-top: 0.2rem !important;
        margin-bottom: 0.2rem !important;
        font-size: 14px !important;
    }

    .nav-text-position {
        display: block !important;
        padding-top: 0rem !important;
    }

    .wrapper {
        height: 200px !important;
        min-height: 200px !important;
    }

    .form-control.input-text.mx-3.fw-bolder {
        width: 90% !important;
    }

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

    .button-black-around {
        padding: 0px 0px !Important;
        border: none;
        float: none;
        margin-left: 0.1rem !important;
    }

    body > footer {
        height: 60px !important;
        font-size: 10px;
        line-height: normal !important;
        padding: 10px 0;
    }

    .widget-paragraph-body .table th {
        font-size: 14px !important;
    }

    .widget-paragraph-body .table td {
        font-size: 14px !important;
    }

    .img-qrcode {
        width: 150px;
    }

    .input-title-OTP {
        font-size: 16px !important;
    }

    .icon-completed {
        font-size: 60px;
    }

    .widget-size-100 .input-group.date {
        width: 100% !important;
    }

    .pagination > li > a {
        font-size: 16px;
    }

    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        width: 120px !Important;
        height: 30px !Important;
    }

    .nav-tabs .nav-link:not(.active) {
        width: 130px !Important;
        margin-left: -25px !important;
    }

    .tab-content {
        padding: 0.1rem 1.5rem 1rem 1.5rem !Important;
    }

    .radio-title {
        font-size: 16px !important;
        padding-top: 0.15rem;
    }

    .radio-subtitle {
        font-size: 14px !important;
        padding-top: 0.15rem;
    }

    .page-link {
        padding: 0.375rem 0.5rem !important;
    }

    .pagination .page-item.previous, .page-item.next {
        display: none;
    }

    .input-group.datepicker-content .form-control.datepicker {
        font-size: 16px !important
    }

    .widget.widget-html-code-widget {
        margin-bottom: 0rem !important;
    }

    .pt-sm-4 {
        padding-top: 1rem !important;
    }

    .pt-sm-02 {
        padding-top: 0.4rem !important;
    }

    .container-list {
        padding: 0rem 1rem 0rem 1rem !Important;
    }

    .card-sm-2 {
        width: 350px;
        padding: 100px 40px 100px 40px;
    }

    .card-md {
        width: 20rem;
        padding: 3rem 3rem 3rem 3rem !important;
    }

    .card-md-3 {
        width: 20rem;
        padding: 5rem 3rem 5rem 3rem !important;
    }

    .card-md-4 {
        width: 35rem !important;
        padding: 3rem 2rem 3rem 2rem !important;
    }

    .text-heading-md {
        font-size: 32px !important;
    }

    .text-heading-sm {
        font-size: 28px !important;
    }

    .text-heading-ssm {
        font-size: 20px !important;
    }

    .text-heading {
        font-size: 40px !important;
        margin-left: 2rem;
    }

    .text-title-tab {
        font-size: 18px !important;
        padding: 0.7rem 1rem 0.7rem 1.2rem !Important;
    }

    .text-title-lg {
        font-size: 32px !important;
        height: 2.7rem !important;
    }

    .text-title {
        font-size: 16px !important;
    }

    .text-content-md {
        font-size: 18px !important;
    }

    .text-content-sm {
        font-size: 16px !important;
    }

    .text-content {
        font-size: 14px !important;
    }

    button {
        font-size: 16px !important;
    }

    .button-md {
        padding: 0.4rem 0.7rem !important;
    }

    .button-lg {
        padding: 0.6rem 1rem !important;
    }

    .icon-file {
        padding: 4px 9px;
    }

    .icon-alert {
        font-size: 70px;
    }

    .input-title {
        font-size: 16px !important;
    }

    .input-text {
        height: 34.2px !important;
        font-size: 16px !important;
    }

    .form-select-button {
        padding: 0.5rem 1rem 0.5rem 1.5rem !important;
    }

    .input-select {
        font-size: 16px !important;
    }

    .input-select-md {
        font-size: 18px !important;
    }

    .input-radio {
        font-size: 16px !important;
    }

    .input-radio-specify {
        font-size: 14px !important;
        padding: 0% 0% 0.1rem 0;
    }

    .input-text-datepicker {
        font-size: 16px !important;
        height: 34.2px !important;
    }

    .button-datepicker {
        height: 34.2px !important;
        font-size: 18px !important;
        padding-right: 0.9rem !important;
    }
}

@media (max-width: 766px) {
    .w-button-confirm {
        width: 100% !important;
    }

    .h-md-100 {
        height: auto !important;
    }
}

@media (max-width: 576px) {
    .wrap-login100 {
        padding: 77px 15px 33px 15px;
    }
    .text-heading {
        font-size: 24px !important;
        margin-left: 1rem;
    }
}

@media (max-width: 575px) {
    .nav-positon {
        display: block !important;
        padding-top: 0rem !important;
    }

    .nav-text-position {
        border-bottom: 2px solid var(--color-lightgray) !important;
    }
}

@media (max-width: 493px) {
    .button-otp {
        min-width: 100%;
    }
}

@media (max-width: 492px) {
    .text-heading-md {
        font-size: 25px !important;
    }
}

@media (max-width: 425px) {
    .container-md-page, .card-lg {
        padding: 1rem !important;
    }
}

textarea.form-control {
    border-radius: 15px;
    border: 1px solid var(--color-lightblue);
    font-weight: 400;
    font-family: Font-Light;
    font-size: 20px !important;
}
.pagination.page-size {
    max-width: 70px;
}
.page-size-div {
    bottom:30px;
}
.language-radio-text:focus {
    box-shadow:none !important;
}
.language-radio-text {
    color: #BCC6D4 !important;
    font-weight: normal !important;
}

.btn-check:checked + .language-radio-text {
    color: #000 !important;
}

.readonly.input-text.onlyread-form-control {
    background-color: unset !important;
    border: unset !important;
}

.readonly.input-select.onlyread-form-select {
    background-image: unset !important;
    background-color: unset !important;
    border: 0px !important;
}
.skeleton-load {
display:none;
}

form.loading-data .skeleton-load {
    display: block;
}

form.loading-data .widget-body {
    display : none;
}

form.loading-data .widget-size-100 .skeleton-load {
    width: clamp(33px, 48.5%, 50%) !important;
}