.fullpage {
    margin: 0px !important;
}

.main-bg {
    background: white;
}

.main-bg.survey {
    background: white;
    box-shadow: 0px 0px 5px #adadad;
    padding-top: 4px;
    padding-bottom: 3px;
}

.dts.page-header.survey {
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
}

.dts-sd-ft {
    background-color: #30653A;
    color: white;
    padding-top: 2em;
    padding-bottom: 3em;
}

.dts-sd-ft .sel-mod-pri {
    color: white;
    line-height: 1.4;
    font-size: 16pt;
}

.dts-sd-ft .sel-mod-sec {
    color: #cacaca;
    line-height: 1.4;
    font-size: 11pt;
}

.dts-sd-ft .sub-footer-box a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 1.5;
}

.dts-sd-ft img {
    width: 100%;
    max-width: 150px;
}

.copyright.sel-mod-sec {
    font-size: 11pt;
    color: #414141;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 16px;
}

img.sitelogo {
    width: 100%;
    max-width: 120px;
}
img.logosmall {
    max-width: 250px !important;
}

.sitename-box {
    display: inline-block;
}

.mid-row {
    display: flex;
    align-items: center;
    padding: 10px 0px;
}

.sitename-box > span {
    display: block;
}

span.site-title {
    font-size: 13pt;
}

span.site-desc {
    font-size: 10pt;
}

.topBar {
    box-shadow: rgb(98, 117, 102) 0px 0px 5px 0px;
}

.fade-bg {
    background-image: url("/portals/0/images/bg/login-bg-fade.png");
    background-size: cover;
    background-position: center;
}

.site-border-top {
    border-top: 5px solid #2E6135;
}

.dts-txt {
    font-size: 13pt;
    line-height: 1.4;
}

.white-txt, .white-txt * {
    color: white;
}

.announce-box {
    background-color: #30653A;
    padding: 20px;
    border-radius: 2em;
    margin: 4em 2em;
    max-width: 1060px;
}

.spec-tellme {
    width: 100%;
    /* aspect-ratio: 1/1; */
    position: relative;
}

.spec-tellme img {
    position: absolute;
    width: 100%;
    bottom: 0px;
}

img.spec-img {
    /* position: absolute; */
    width: 100%;
    /* bottom: -22%; */
    max-width: 160px;
}

.spec-img-box {
    position: relative;
    /* aspect-ratio: 1/1; */
    margin-top: -5em;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
}

.btn-dts.white-txt {
    color: white;
    text-decoration: none;
}

.btn-dts, a.btn-dts {
    box-shadow: rgb(187 187 187) 0px 0px 10px 0px;
    border: 1px solid white;
    border-radius: .5em;
}

a {
    font-family: 'KanitLight', sans-serif !important;
}

.btn-dts:hover {
    border-color: white;
}

.btn-primary.btn-dts {
    background-color: #3562B4;
}

.btn-primary.btn-dts:hover {
    background-color: #23488b;
}

.top-uname * {
    font-size: 12pt;
    color: #525252;
    vertical-align: top;
}

.sitename-box .site-title, .sitename-box .site-desc {
    line-height: 1;
}

.top-uname {
    display: flex;
}

.role-badge {
    border-radius: 4px;
    display: inline-block;
    transition: all 0.2s ease;
    background: rgb(255 0 127);
    background: linear-gradient(34deg, rgb(255 0 201) 0%, rgb(255 0 38) 44%, rgb(255 0 127) 100%);
    color: white;
    font-weight: bold;
    font-size: 8pt;
    padding: 5px 10px;
}

a.logout i {
    font-size: 15pt;
    color: #444;
}

.flex-uname {
    display: flex;
    align-items: center;
}

.bnr-tracking,
.bnr-request,
.bnr-kpi,
.bnr-eval {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bnr-tracking {
    background-image: url("/portals/0/images/banner/bnr-02-s.jpg");
}

.bnr-request {
    background-image: url("/portals/0/images/banner/bnr-01-s.jpg");
}

.bnr-kpi {
    background-image: url("/portals/0/images/banner/kpi-bnr-main-s.jpg");
}

.bnr-eval {
    background-image: url("/portals/0/images/banner/kpi-bnr-eval-s.jpg");
}

.text-bold {
    font-weight: bold;
}

.search-bg {
    background-color: #222;
}

.form-subject {
    font-size: 13pt;
    margin: 8px 0px;
    display: inline-block;
    line-height: 1.2;
}

.form-section .row > div {
    margin-bottom: 8px;
}

.section-title {
    font-weight: bold;
    font-size: 16pt;
}

.form-section .row:last-child > div {
    margin-bottom: 0px;
}

.form-section {
    margin-top: 3em;
    margin-bottom: 3em;
}

.form-check-input[type=checkbox].form-check-lg {
    font-size: 20pt;
    margin-left: 0px;
    float: initial;
    margin: 0px;
    min-width: 26px;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
}

.form-check.form-check-dts {
    padding-left: 0px;
    margin-left: 0px;
    display: flex;
    align-items: center;
}

.check-box-group {
    display: flex;
}

.green-txt {
    color: #009a7b !important;
}

.textarea-10 {
    height: 15em;
}

.tab-content {
    border: 1px solid #dadada;
    padding: 8pt 15px 24pt;
    border-radius: 4px;
    background-color: #fbfbfb;
}

span.mark-txt {
    color: #e66800;
}

.form-desc {
    font-size: 11pt;
    margin: 8px 0px;
    display: inline-block;
    line-height: 1.2;
}

.dts-btn-sm {
    --bs-btn-padding-y: 0.25rem  !important;
    --bs-btn-padding-x: 0.5rem  !important;
    --bs-btn-font-size: 0.875rem !important;
    --bs-btn-border-radius: 0.25rem !important;
    font-size: 11pt !important;
}

.attach-file-box {
    display: flex;
    flex-wrap: wrap;
}

.attach-file-item, .list-file-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 12pt;
    border-radius: 2px;
    border: 1px solid #e7e7e7;
    padding: 8pt;
    margin-right: 6px;
    margin-bottom: 6px;
    align-items: center;
    background-color: white;
    border-radius: 4px;
}

.list-file-box {
    display: inline-flex;
    flex-wrap: wrap;
}

.attach-file-item .file-name {
    width: calc(100% - 27px);
    padding: 0px 10px;
    font-size: 10pt;
    line-height: 1;
    /* text-decoration: none; */
    color: #444;
}

.attach-file-item .fa-trash,
.list-file-box .fa-trash {
    cursor: pointer;
    color: orange;
}

.admin-box {
    border: 1px solid #888;
    padding: 20pt 24pt;
    background-color: #efefef;
}

.admin-box .form-desc {
    color: #007dc6;
}

.question-bg {
    background-color: #8CC63F;
    border-bottom: 1px solid white;
}

.question-img-frame {
    display: inline-block;
    aspect-ratio: 1/1;
    position: relative;
    width: 90px;
}

img#question-img {
    position: absolute;
    bottom: -7px;
}

.dts-list-header, .dts-list-body {
    font-size: 12pt;
    line-height: 1.2;
}

.dts-list-body div[class^='col'] {
    padding-bottom: 5px;
}

a.dts-btn-sm {
    color: white !important;
    text-decoration: none;
    line-height: 1;
}

.row.list-item {
    border: 1px solid #d3d3d3;
    border-radius: 4pt;
    padding: 1em;
    margin-bottom: 10pt;
}

.dts-list-body .main-col {
    font-size: 14pt;
    color: #222;
}

.dts-list-header {
    border-bottom: 2px solid #727272;
}

.dts-list-header .th-col {
    font-size: 11pt;
    color: #626262;
}

.dts-list-hint {
    color: #0ba349;
    width: 100%;
    display: block;
    font-size: 11pt;
}

.sim-list-hint {
    color: #0b4ba3;
    width: 100%;
    display: block;
    font-size: 10pt !important;
    padding-top: 10px !important;
}

.dts-list-paging .paging-box {
    display: block;
}

.dts-list-paging .paging-box .btn-paging {
    font-size: 12pt;
    line-height: 1;
    color: #888;
    background-color: #dedede;
    border: 1px solid #d9d9d9;
    display: inline-flex;
    aspect-ratio: 1/1;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.dts-list-paging .paging-box .btn-paging:hover { 
    color: #444;
    background-color: #d0d0d0;
    border: 1px solid #bfbfbf;
}

.dts-list-paging .paging-box .btn-paging.active {
    color: #fff;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    cursor: default;
    pointer-events: none;
}

.frameBody.error {
    border-top: 20px solid #444;
    padding-top: 2em;
    padding-bottom: 2em;
    min-height: calc(100vh - 260px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px !important;
}

.error .block-content {
    text-align: center;
    max-width: 576px;
    margin: 0px auto;
    font-family: kanitlight;
}

.error .block-content .title {
    font-size: 21pt;
    line-height: 1.2;
    font-weight: 200;
    font-family: kanitlight;
}

.error .block-content .detail {
    font-size: 14pt;
    line-height: 1.325;
    font-family: kanitlight;
}

.bg-nopm {
    background-color: #fdb015;
}

.oops {
    background: rgb(217 47 47);
}









@media (min-width:576px) {
    span.site-title {
        font-size: 18pt;
    }
    
    span.site-desc {
        font-size: 14pt;
    }

    .bnr-tracking {
        background-image: url("/portals/0/images/banner/bnr-02-m.jpg");
    }

    .bnr-request {
        background-image: url("/portals/0/images/banner/bnr-01-m.jpg");
    }

    .bnr-kpi {
        background-image: url("/portals/0/images/banner/kpi-bnr-main-m.jpg");
    }

    .bnr-eval {
        background-image: url("/portals/0/images/banner/kpi-bnr-eval-s.jpg");
    }

    .attach-file-item {
        width: 48%;
    }
}

@media (min-width:768px) {
    .spec-img-box {
        height: 100%;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    .dts-form-control-switch-sm {
        min-height: calc(1.5em + .5rem + 2px);
        padding: .25rem .5rem !important;
        font-size: .875rem !important;
        border-radius: .25rem !important;
    }
    
    .dts-form-select-switch-sm {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important;
        padding-left: .5rem !important;
        font-size: .875rem !important;
        border-radius: .25rem !important;
    }

}

@media (min-width:996px) {
    .spec-img-box {
        aspect-ratio: 1/1;
        text-align: initial;
    }

    img.spec-img {
        position: absolute;
        left: 15px;
        bottom: -108px;
        max-width: 200px;
    }

    .bnr-tracking {
        background-image: url("/portals/0/images/banner/bnr-02-l.jpg");
    }

    .bnr-request {
        background-image: url("/portals/0/images/banner/bnr-01-l.jpg");
    }

    .bnr-kpi {
        background-image: url("/portals/0/images/banner/kpi-bnr-main-l.jpg");
    }

    .bnr-eval {
        background-image: url("/portals/0/images/banner/kpi-bnr-eval-l.jpg");
    }

    .attach-file-item {
        width: 32%;
    }

    .row.list-item {
        padding: 0px;
        border: none;
        border-bottom: 1px dashed #d6d6d6;
    }

    .row.list-item:last-child {
        border: none;
    }
}

@media (min-width:1200px) {
    .announce-box {
        margin: 7em auto;
    }

    .attach-file-item {
        width: 24%;
    }    
}

i.required-end {
    font-size: 12pt;
    margin-left: 8px;
    color: #de9151;
}


.datetimepicker td {
    padding: 0px 11.3px;
}

.datetimepicker-months .table-condensed,
.datetimepicker-years .table-condensed{
    width: 100%;
    min-width: 300px;
}

.nav-pills .nav-item button {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.form-control.check-box-group {
    display: flex;
    border: none;
    padding: 0px;
    padding-right: 22px;
}

.form-control.check-box-group.is-invalid.was-validated input[type="checkbox"] {
    border-color: red;
}

.form-control.check-box-group.is-invalid.was-validated .form-check-label {
    color: red;
}

.kpi-logo-box.light {
    color: white;
}

.kpi-logo-box {
    padding: 1em 0px;
    line-height: 1;
}

.kpi-logo-box .content {
    font-size: 1rem;
}

.kpi-logo-box .title {
    font-size: 2rem;
    color: #e0e000;
}

.green-bar {
    background-color: rgb(0 178 164 / 90%);
}

.dark-bar {
    background-color: rgb(31 31 31 / 90%);
}

.bar-bg .kpi-logo-box .content {
    font-size: .8rem;
}

.bar-bg .title {
    font-size: 1rem;
    font-weight: 100;
    color: white;
}

.flex-center {
    display: flex;
    align-items: center;
}

a.btn-aws {
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    padding: 4px;
    font-size: 1.125em;
    cursor: pointer;
}

.space-for-btn-1 {
    width: 40px !important;
}

.list-body a.btn-aws {
    border: 1px solid #efefef;
    display: flex;
    aspect-ratio: 1/1;
    color: #008cff;
    text-decoration:none;
    justify-content: center;
    align-items:center;
    font-size: 1.2em;
}

.list-body div, 
.list-body span {
    font-size: 16px;
    margin: 0px !important;
}

.relate-top-minus {
    position: relative;
    top: -6px;
}

.list-body .sim-card-lg {
    margin-bottom: 1em !important;
}

.selected-title {
    font-size: 1.5em;
    font-weight: bold;
}

.sim-modal .modal-title {
    font-size: 18pt;
    color: black;
}

.edit-present-section {
    background-image: url("/portals/0/images/banner/kpi-bnr-note-m.jpg");
    background-size: cover;
    background-position: center;
    min-height: 4rem;
}

.main-col.no {
    font-size: 2em;
    font-weight: bold;
    font-style: italic;
    min-width: 35px;
    display: inline-block;
    line-height: .5;
    text-align: center;
    color: #606060;
}

.title {
    font-size: 16pt;
}

.secondary-bg {
    background-color: #EAF4F2;
}

.subject-label-box {
    width: 100%;
    display: flex;
    color: white;
    background-color: #317760;
    border-radius: 4px;
    align-items: center;
    line-height: 1;
    padding: 4pt 8pt;
    font-size: 12pt;
}

.subject-label-box .subject-no {
    font-size: 2em;
    font-weight: bold;
    width: 1em;
    text-align: center;
}

.subject-label-box .subject-desc {
    font-size: .825em;
    padding-top: 2px;
}

.q-box {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.btn-sm.btn-form {
    font-size: 10pt;
}

.form-section.sim-form .row > div {
    margin-bottom: 4pt;
}

.textarea-5 {
    height: 6em;
}

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

.list-file-box > span {
    font-size: 11.5pt;
    display: block;
}

.list-file-box .list-name {
    width: 100%;
}

.list-file-box .list-empid {
    width: 30%;
}

.list-file-box .list-usr {
    width: 60%;
}

@media (min-width: 768px) {
    .list-file-box .list-name {
        width: 40%;
    }
    
    .list-file-box .list-empid {
        width: 20%;
    }
    
    .list-file-box .list-usr {
        width: 30%;
    }
}

@media (min-width: 992px) {
    .file-wp .attach-file-item {
        width: 48%;
    }
    
    .w-100-lg-50 {
        width: 49.3%;
    }
}

.sitename-box.survey .title-l1, .sitename-box.survey .title-l2 {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    top: -4px;
}

.sitename-box.survey .title-l2 {
    color: #008f00;
}
.sitename-box.survey {
    padding-top: 6px;
}
.survey-h {
    min-height: calc(100vh - 370px);
}

.thankyou-body {
    border-top: 16px solid #006400;
    background-image: url('/portals/0/images/bg/thank-bg-small.jpg');
    background-size: cover;
    background-position: top center;
    padding-top: 10%;
}

.card.thankyou {
    background-color: rgb(0 159 206 / 80%);
    text-align: center;
    padding: 1.5em 2em;
    border-radius: 12pt;
    border: none;
    max-width: 640px;
}

.card.thankyou .title {
    font-size: 1.5rem;
    font-weight: bold;
}

.card.thankyou .content {
    font-size: 1rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .thankyou-body {
        background-image: url('/portals/0/images/bg/thank-bg-large.jpg');
    }
}

.bnr-survey {
    min-height: 150px;
    background-image: url('/portals/0/images/banner/banner01-large.jpg');
    background-size: cover;
    background-position: center;
}

.survey .content {
    font-size: 1rem;
    line-height: 1.2;
}

.gray-bg {
    background-color: #efefef;
}

.elearn_block {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    min-height: calc(100vh - 640px);
}

.elearn_content {
    padding: 0px !important;
    margin: auto;
}

.elearn_instructionBlock {
    width: 100%;
}

@media (min-width: 576px) {
    .elearn_content {
        max-width: 540px;
        
    }
}

@media (min-width: 768px) {
    .elearn_content {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .elearn_content {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .elearn_content {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .elearn_content, .elearn_Message {
        max-width: 1320px;
    }
}

.elearn_Message {
    display: block;
    margin: auto;
    margin-bottom: 1em;
    border-radius: 8px !important;
    overflow: hidden;
    font-family: 'KanitLight' !important;
}

.elearn_Message * {
    font-family: 'KanitLight' !important;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: normal;
}

a.elearn_button {
    padding: .5em 1em !important;
    border-radius: 4pt !important;
    font-family: 'KanitLight' !important;
    font-size: 1rem;
}

.elearn_instructionBlock {
    display: none;
}

.QNumber {
    font-size: 2rem !important;
    color: #becbda;
    line-height: 1;
}

.QuestBlock label {
font-family: 'KanitLight' !important;font-size: 1.1rem;color: #437599;white-space: break-spaces;}

.QText {
    font-size: 1.1rem;
    padding-left: 0px !important;
}

.QuestBlock input[type='radio'] {
    width: 20pt;
    height: 20pt;
    position: relative;
    top: 0px;
    margin-right: 8px;
    vertical-align: top;
}

.elearn_Category {
    display: none;
}

.elearn_content table {
    width: 100%;
}

.QuestBlock {
    width: calc(100% - 50px);
}

.QuestBlock > div:nth-child(2) {
    padding-left: 0px !important;
}

.elearn_content table td {padding-bottom: 8px;}

.QuestBlock div {
    padding-right: 0px !important;
}

.elearn_NumberSection {
    width: 38px;
    text-align: center;
}

.banner-block {
    
    background-size: cover;
    
}

.tran-dark-bg {
    background-color: rgb(0 0 0 / 0.4);
    padding: 20px 20px 40px;
    line-height: 1;
}

.set-h-kpi-list {
    min-height: calc(100vh - 575px);
}

.set-h-kpi-form {
    min-height: calc(100vh - 555px);
}

.text-logo-box {
    text-align: right;
    max-width: 350px;
    padding-top: 16px;
    border-right: 1px solid #efefef;
    padding-right: 16pt;
}

.text-logo-box div {
    font-family: 'KanitLight', kanit !important;
}

.text-logo-title {
    font-size: 20pt;
    font-weight: bold;
    color: white;
    line-height: 1 !important;
    display: block;
}

.text-logo-desc {
    font-size: 14pt;
    color: #c9c9c9;
}

a.menu-type-1 {
    text-align: left;
    display: flex;
    vertical-align: top;
    align-items: center;
    text-decoration: none;
    max-width: 230px;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid rgb(118 118 118 / 0%);
}

a.menu-type-1:hover {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(118 118 118 / 20%);
}

a .menu-txt {
    display: inline-block;
    text-align: left;
    text-decoration: none;
    font-size: 1em;
    line-height: 1;
}

.main-menu .title {
    font-size: 1.5rem;
}

.main-menu {
    font-size: 1.5em;
    color: #e0e0e0;
}

a.menu-type-1 i {
    margin-right: 8px;
    background-color: #c7c7c7;
    aspect-ratio: 1/1;
    border-radius: 6pt;
    font-size: 1.5em;
    padding: 8px;
    border: 1px solid white;
}

a.menu-type-1 .fa-gauge-high {
    background-color: #ff8600;
}

a.menu-type-1 .fa-ballot-check {
    background-color: #00b89d;
}

a.menu-type-1 .fa-typewriter {
    background-color: #1c7fcd;
}

a.menu-type-1 .fa-lock {
    background-color: #1c962e;
}

.main-bgc {
    background-color: rgb(0 124 60 / 80%);
    border-radius: 20pt 20pt 0pt 0pt;
    padding-top: 2em;
}

.main-bgc .subtitle {
    color: white;
    font-weight: bold;
    font-size: 1.1em !important;
    max-width: 325px;
    margin: auto;
}

.main-left-bgc {
    background-color: rgb(255 255 255 / 90%);
    padding: 2em;
    padding-bottom: 3em;
}

.main-right-bgc {
    background-color: rgb(255 255 255 / 60%);
    border-bottom-right-radius: 20pt;
    border-bottom-left-radius: 20pt;
    padding: 2em;
    padding-bottom: 3em;
}
.main-left-bgc, .main-left-bgc a,
.main-right-bgc, .main-right-bgc a{
    color: #222;
}

@media (min-width: 576px) {
    .main-left-bgc {
        border-bottom-left-radius: 20pt;
    }
    .main-right-bgc {
        border-bottom-right-radius: 20pt;
        border-bottom-left-radius: 0pt;
    }
}

.kpi-modal-header {
    background-color: rgb(0 147 135);
}

.kpi-modal-header .modal-title {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: 5px;
}

.modal-footer.select-bu-bg {
    background-image: url(/Portals/0/images/BG/bg-select-company.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}

.white-box {
    background-color: white;
    color: #222;
    padding: 5px 15px 0px;
}

.white-box * {
    font-size: 12pt;
    line-height: 1.2;
    display: inline-block;
    width: 100%;
}

.selectric span.label, .selectric-scroll ul li {
    font-size: 12pt !important;
}

.select-com-sep .view {
    margin-bottom: 5pt;
}

.select-emp-footer {
    background-image: url("/portals/0/images/bg/Banner-EmployeeSelector.jpg");
    background-size: cover;
}

input[type='number'].is-invalid {
    padding-right: 1em !important;
}

span.tag-item {
    display: inline-block;
    background-color: #c0f1ff;
    border: 1px solid #6d6d6d;
    border-radius: 4px;
    padding: 2px 4px;
    margin-right: 4pt;
    color: black;
}
a.btn:visited {
    color: white;
}

a.btn {
    text-decoration: none;
}

input[readonly], textarea[readonly], select[readonly] {
    background-color: #f2f2f2;
    pointer-events: none;
}

a.file-name {
    text-decoration: none;
    cursor: pointer;
}

.attach-file-item .fa-trash:hover, .list-file-box .fa-trash:hover {
    color: #ff5000;
}

a.login-item-box {
    display: inline-block;
    vertical-align: top;
    /* border: 1px solid #e2e2e2; */
    border-radius: 8px;
    text-align: center;
    margin: 0.5em;
    width: 28.4%;
    background-color: white;
    overflow: hidden;
}

@media screen and (min-width: 576px) {
    a.login-item-box {
        width: 22%;
    }
}

@media screen and (min-width: 768px) {
    a.login-item-box {
        width: 17.8%;
    }
}

@media screen and (min-width: 992px) {
    a.login-item-box {
        width: 15%;
        max-width: 140px;
    }
}

@media screen and (min-width: 1200px) {
    a.login-item-box {
        width: 22.5%;
    }
}



.set-h.top-relate {
    background-color: black;
    min-height: calc(100vh);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/Portals/0/images/banner/login-large.jpg");
    background-position: center;
    background-size: cover;
}


.group-page {
    background-color: white;
}

.liquid-box {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2em 1em;
  color: white;
  margin: 2em;
}

.logo-txt {
    font-size: 1rem;
}

.datatable-css {
    text-align: center;
    font-size: 12pt;
}

.datatable-css .title {
    font-size: 10pt !important;
    color: green;
}


.datatable-css .dt-buttons {
    display: inline-block;
    position: absolute;
    left: 0;
}

.datatable-css .dt-buttons a {
    background-color: #0067b4;
    color: white;
    border-radius: 4pt;
    padding: 4px 15px;
}

.dash .main {
    display: inline-flex;
}

.dash .Content > span {
    font-size: 12pt;
}

.dash {
        display: flex;
    flex-wrap: wrap;
}

.white-bg {
    background-color: white;
}

.card-box {
    border: 1px solid #efefef;
    border-radius: .5rem;
}

.step-box-dsc .step-title {
    font-size: 16pt;
}

.step-box-dsc .step-desc {
    font-size: 14pt;
    color: #666;
}

#dnn_ctr446_Main_ctl00_bnForgotPassword {
    display: none;
}

div#UserManagement .btn.btn-sm {
    font-size: 10pt;
    line-height: 1.2;
    padding: 10px;
}

div#business-blk .content {
    font-size: 13pt;
    line-height: 1;
    margin: 0px !important;
}

div#business-blk {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div#usrmm-body > .row {
    padding-top: 5px;
    padding-bottom: 10px;
}

div#usrmm-body > .row:nth-child(even) {
    background-color: #f5f5f5;
}

.box-company .dts-txt {
    font-size: 12pt;
    line-height: 1.25;
    color: #222;
}

.box-company .dts-dsc.text-primary {
    font-size: 10pt;
    color: #009651 !important;
}

div#usrmm-head .text-sm-90 {
    font-size: 15pt;
    color: black;
}

div#usrmm-body > .row > div > div {
    font-size: 15pt;
    color: #0068a7;
}

div#usrmm-body i {
    background-color: #cecece;
    padding: 6pt;
    border-radius: 50pt;
    margin: 0px 5px 5px 0px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-size: 10pt;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.orange-bg {
    background: #ef6c00 !important;
}

.blue-bg {
    background: #0277bd !important;
}

.green-bg {
    background: #2e7d32 !important;
}

.red-bg {
    background: #d8004e !important;
}

div#usrmm-body .box-sub-content .btn.btn-primary.btn-sm,
div#usrmm-body .box-sub-content .btn.btn-secondary.btn-sm {
    font-size: 10pt;
    padding: 5px 10px; 
    margin-right: 4px;
}

.sub-box-item {
    background-color: #e0f7ff;
    border: 1px solid #d1e8f0;
    border-radius: 8px;
    margin-left: 15px;
    margin-top: 8px;
    padding: 8px 12px;
    width: calc(100% - 28px);
    font-size: 12pt;
}

.sub-box-item .col-role {
    font-weight: bold;
    font-size: 12pt;
    display: inline-block;
    padding-bottom: 9px;
    width: 100%;
}

.col-user-row .header {
    display: none;
}

@media (min-width: 576px) {
     .hint-header {
         display: none;
     }   
    .col-user-row .header {
        display: block;
    }
}

.btn-set {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0px;
    justify-content: right;
}

.sub-box-item .header {
    color: #999999;
}

.hint-header {
    color: gray;
    margin-top: 8px;
}

span.form-subject.remark {
    color: #096f4d;
}

input.readonly {
    background-color: #efefef;
    pointer-events: none;
}

.card.card-desc {
    background-color: #f7f7f7;
    border-color: #ececec;
}

.card-desc .section-title {
    font-weight: normal;
    font-size: 16pt;
    color: #222;
}

.card-desc .content {
    font-weight: normal;
    font-size: 11.5pt;
    line-height: 1.2;
    color: #444;
}

ul.list-no li {
    list-style: num;
}

.card-desc ul.list-no {
    margin-left: 15px !important;
}

.card-desc ul.list-no li {
    font-size: 11.5pt;
}

.form-check.sim-check input[type="radio"] {
    min-width: 15pt;
    min-height: 15pt;
    margin-right: 8px;
}

.form-check.sim-check {
    display: inline-flex;
    margin-bottom: 10pt;
}


.form-check.sim-check span {
    display: block;
    font-size: 17px;
    line-height: 1.2;
}

.form-check.sim-check span.desc {
    color: #1e54a3;
    font-size: 12pt;
    margin-top: 4px;
}

i.fa-solid.fa-asterisk {
    color: #f10000;
    font-weight: bold;
    font-size: 10pt;
    padding: 4px;
}

.remark .main {
    font-size: 12pt;
    display: block;
}

.remark .desc {
    font-size: 11pt;
    display: block;
}