:root {
    --primary: #335075;
    --dark: #000;
    --white: #fff;
    --light: #f8f8f8;
    --text-dark: #333;
    --dark-primary: #714200;
}

/* fonts */
@font-face {
    font-family: "Lato", sans-serif;
    src: url('../fonts/Lato-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato", sans-serif;
    src: url('../fonts/Lato-Bold') format('ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'materialIcons';
    src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'notosans-n';
    src: url('../fonts/NotoSans-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'notosans-b';
    src: url('../fonts/NotoSans-Bold.ttf') format('ttf');
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Noto Sans", sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
    background-color: var(--white);
}

/* custome css */
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.5s ease;
    color: inherit;
}

/* Buttons */
.btn-darktxt {
    color: var(--dark) !important;
}

.btn-darktxt:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* btn design */
.cd-grpBtns {display: flex;gap: 2rem;font-size: 16px;font-family: "Noto Sans", sans-serif;margin-top: 10px;}
.cd-grpBtns .cd-accept {background-color: #335075;color: var(--white);box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding: 11px 17px;border-radius: 3px;position: relative;line-height: normal;font-family: "Lato", sans-serif;}
.cd-grpBtns .cd-accept:not([disabled]):focus,  .cd-grpBtns .cd-accept:not([disabled]):hover {
    background-color: #335075;
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #335075;
}
.cd-grpBtns .cd-accept:not([disabled]):hover:before {
        outline: none;
    content: " ";
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #fff;
    z-index: 1;
}
.cd-grpBtns .cd-reportbtnlink {padding: 11px 17px;}
.cd-btnDisable {
    background-color: #e0e0e0 !important;
    color: #636363 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.cd-userLoginName {
    display: inline-flex;
    align-items: center;
    color: rgba(0, 0, 0, .87);
}
/* # btn design */

/* fonts */
.cd-font20 {font-size: 20px;color: #000000de;font-weight: 400;font-family: "Lato", sans-serif;}
.cd-font34 {font-size: 34px;color: #000000de;font-weight: 700;font-family: "Lato", sans-serif;}
/* fonts */
.cd-link {text-decoration: underline;color: var(--primary);}
.cd-infoAlert {
    border: .06rem dotted #1c578a;
    border-radius: 0;
    border-left: .2rem solid #1c578a;
}


/* -------------------- start --------------------- */
.cd-section-maintenance {
    background: #f9f4d4;
    border-left: 4px solid #f90;
    border-right: 1px solid #f90;
    border-top: 1px solid #f90;
    border-bottom: 1px solid #f90;
}

.cd-section-maintenance .close {
    cursor: pointer;
    font-size: 36px;
    display: inline-block;
    color: rgb(0, 0, 0);
    font-weight: 500;
    padding: 2px 18px;
    border-radius: 3px;
    line-height: normal;
}

.cd-section-maintenance .close:hover {
    background-color: #efeacc;
}

.cd-section-maintenance .cd-close {
    text-align: right;
}

.cd-section-maintenance .cd-iconcriticl {
    position: relative;
    font-size: 4rem;
}

.cd-section-maintenance .cd-iconcriticl::before {
    color: #f90;
    content: "";
    font-family: 'materialIcons';
}

.cd-section-maintenance .cd-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: -10px;
}

.cd-section-maintenance .cd-content p {
    font-size: 20px;
    color: var(--dark);
    font-family: "Noto Sans", sans-serif;
    line-height: 33px;
}

.cd-section-maintenance .cd-head {
    font-size: 34px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    color: var(--dark);
}

.py-22 {
    padding: 22px 0;
}
.cd-loginForm {max-width: 640px;}
.cd-loginForm .cd-asterisk {
    font-size: 27px;
    font-family: "Noto Sans", sans-serif;
    color: #b10609;
    font-weight: 600;
    position: absolute;
}

.cd-loginForm .form-label {
    font-size: 20px;
    font-family: "Noto Sans", sans-serif;
    color: var(--dark);
    font-weight: 600;
    padding-left: 18px;
    margin-bottom: 2px;
}

.cd-loginForm .cd-errorMsg span.cd-text {
    font-weight: 700;
    color: var(--dark);
}

.cd-loginForm .cd-text-danger {
    color: #b10609;
}

.cd-loginForm .cd-errorMsg {
    padding: .2em .6em .3em;
    font-weight: 400;
    background: #f3e9e8;
    border: solid #c62828;
    border-width: 0 0 0 4px;
    display: inline-block;
    overflow: hidden;
    color: #000;
    font-family: "Noto Sans", sans-serif;
    font-size: 20px;
    margin-bottom: 7px;
}

.cd-loginForm .form-control {
    min-height: 65px;
    font-size: 20px;
    transition: all 0.2s ease;
    border-color: #000;
}

.cd-loginForm .form-control:hover {
    border-width: 2px;
    border-color: #000;
}

.cd-loginForm .form-control:focus {
    border-color: #c62828;
    box-shadow: none;
}

.cd-loginForm .cd-signin {
    background-color: #767676;
    color: var(--white);
    padding: 12px 16px;
    line-height: normal;
    border-radius: 4px;
}

.cd-register {
    margin-top: 1.5rem;
}

.cd-register .cd-text {
    font-size: 20px;
    color: var(--dark);
}

.cd-register .cd-link {
    color: #335075;
    text-decoration: underline;
}

.cd-register .cd-dateshow {
    font-size: 16px;
    margin-bottom: 0;
    color: var(--dark);
}

.cd-register span.cd-number {
    color: var(--dark);
}

.cd-header {
    padding: 12px 0 30px;
    border-bottom: 3px solid #38414d;
}

.cd-header .cd-logobox {
    padding-top: 11px;
}

.cd-header .cd-logo {
    height: 27px;
    max-width: 100%;
}

.cd-header .cd-country {
    text-align: right;
}

.cd-header .cd-country a.cd-country-name {
    font-size: 16px;
    text-decoration: underline;
    color: #335075;
    font-family: 'Noto Sans', sans-serif;
}

.cd-breadcrumb {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}

.cd-breadcrumb .cd-breadcrumbItem {
    font-size: 16px;
    text-decoration: underline;
    color: #335075;
}

h1.cd-singntxt {
    font-size: 38px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    padding-bottom: .2em;
    color: var(--dark);
    border-bottom: 1px solid #af3c43;
}

.cd-login .cd-reportBtn, .mt-40 {
    margin-top: 40px;
}

.cd-reportBtn .cd-reportbtnlink {
    font-size: 14px;
    color: #284162;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: #eaebed;
    padding: 9px 24px;
    border: 0;
    border-radius: 3px;
    transform: translate3d(0, 0, 0);
    transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

.cd-reportBtn .cd-reportbtnlink:not([disabled]):focus,
.cd-reportBtn .cd-reportbtnlink:not([disabled]):hover {
    outline: none;
    border-radius: 4px;
    background-color: #eaebed;
    box-shadow: 0 0 0 3px #335075;
}

section.cd-Strapline {
    background: #26374a url('../images/landscape.80f363ef24c5920c9c8e.png') no-repeat 100% 100%;
    height: 75px;
    display: block;
    margin-top: 1rem;
}

/* T&C */
.cd-termsTxtPara p {font-size: 20px;color: var(--dark);line-height: 33px;}
.cd-termsTxtPara ul {list-style-type: disc;padding-left: 3rem;margin-bottom: 20px;}
.cd-termsTxtPara ul li {font-size: 20px;color: var(--dark);line-height: 33px;}
.cd-termsTxtPara .cd-link {color: #335075;text-decoration: underline;}


/* ==== home page ===== */
.cd-accountgrpbtn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -moz-column-gap: 10px;
    column-gap: 10px;
    padding: .5rem;
}
.cd-section-table {
    border: 1px solid #ccc;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}
.cd-section-table table thead tr {background-color: #335075;color: var(--white);}
.cd-section-table table thead tr {font-size: 20px;color: var(--white);font-weight: 700;vertical-align: middle;}
.cd-home .cd-content {margin-top: 30px;}
.cd-home .cd-content .cd-link {font-size: 20px;color: #335075;font-family: "Noto Sans", sans-serif;font-weight: 400;text-decoration: underline;}
.cd-home .cd-content > p {font-size: 20px;}

/* Responsive DIV Table */
.cd-section-row {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #e5e5e5;
}
.cd-section-row:last-child {
    border-bottom: none;
}
.cd-section-cell {
    flex: 1;
    padding: 12px;
    font-size: 15px;
}
.cd-section-header {
    background: #1b2a4e;
    color: #fff;
    font-weight: bold;
}

/* table design */
/* Default Table Styling */
.responsive-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
/* Sort arrow */
.responsive-table th {
    cursor: pointer;
    position: relative;
}

.responsive-table th::after {
    content: " ⇅";
    font-size: 12px;
    color: var(--white);
    position: absolute;
    right: 8px;
    opacity: 0;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.2s ease;
}
.responsive-table th:hover::after {opacity: 1;}
/* Active ascending */
.responsive-table th.asc::after {
    content: " ↑";
    color: var(--white);
}

/* Active descending */
.responsive-table th.desc::after {
    content: " ↓";
    color: var(--white);
}
/* Default table styling */
.responsive-table th,
.responsive-table td {
    padding: 12px 10px;
    border-right: 1px solid #ccc;
    text-align: left;
    font-size: 20px;
}
.responsive-table tbody tr:nth-child(odd) {
    background-color: rgba(0,0,0,.04);
}

/* Non-sortable TH (no arrow + no pointer) */
.responsive-table th.no-sort {
    cursor: default !important;
}
.responsive-table th.no-sort::after {
    content: "" !important;
}
.cd-databoldtxt {font-weight: 700;}
.table-footer {
    padding: 24px 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #555;
    border-top: 1px solid #ddd;
}
.table-footer .items-per-page, .table-footer .page-info {font-size: 16px;font-family: "Noto Sans", sans-serif;color: #757575;}

.items-per-page select {
    color: #757575;
    padding: 2px 4px;
    border: none;
    border-bottom: 1px solid #777;
    background: transparent;
    outline: none;
    font-size: 16px;
}

.pagination-controls .pg-btn {
    border: none;
    background: transparent;
    cursor: pointer;    
    padding: 0;
}
.pagination-controls .pg-btn svg {width: 26px;fill: #757575;}

.pagination-controls .pg-btn:hover {
    color: #000;
}

/* ----------- Mobile View: Card Style ----------- */
/* mobile view user login */
.cd-userlogin {position: relative;}
.d-mobile {
    display: none;
}

#mainContent {
    transition: 0.3s;
}

/* Default: Desktop/tablet (≥768px) — menu should always show */
.cd-offcanvas-menu {
    position: relative;
    left: 0;
    width: 250px;
    height: auto;
    display: block !important;
    transition: none;
}
/* Backdrop toggle button */
.cd-offcanvas-backdrop {
    font-size: 30px;
    cursor: pointer;
    display: none;
}
/* mobile view user login # */

/* ===== app. status ====== */
/* Info alert */
.cd-alert {
    background: #e5f6ff;
    border-left: 4px solid #3da9d6;
    padding: 15px;
    border-radius: 6px;
}

/* Dual info boxes */
.cd-info-box {
    background: #fff;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}
.cd-info-title {
    font-weight: bold;
    background: #eaebed;
    padding: 4px 16px;
    margin-bottom: 10px;
}
.cd-applicationStatus .cd-innercontent {font-size: 20px;padding: 1rem;}
.cd-applicationStatus .cd-innercontent p:last-child {margin-bottom: 0;}
.cd-applicationStatus .cd-innercontent ul li + li {padding-top: 8px;}
.cd-hrline {margin: 2rem 0;}
.cd-borderbox {background-color: #c2cbd6;padding: 15px;}
.cd-applicationStatus .cd-reciveApp {display: flex;align-items: center;flex-wrap: wrap;gap: 1rem;justify-content: space-between;margin: 1rem 0 1.5rem;}
.cd-applicationStatus .cd-content p {font-size: 20px;}
.cd-applicationStatus .cd-content .cd-title {display: flex;align-items: center;gap: 1rem;}
.cd-applicationStatus .cd-content .cd-title .cd-img {width: 30px;}
.cd-applicationStatus .cd-content .cd-title .cd-step-title {font-size: 24px;font-weight: 600;font-family: Lato, sans-serif;margin-bottom: 0;}
.cd-applicationStatus .cd-content .cd-infomodelBtn {color: #284162;font-size: 1.4rem;padding: 0;}
.cd-applicationStatus .cd-content .cd-discround {padding-left: 40px;}
.cd-applicationStatus .cd-content .cd-discround li {list-style-type: circle;font-size: 20px;padding: 8px 0;}
.cd-applicationStatus .cd-content .cd-infomodel .modal-header {background-color: #335075;color: var(--white);font-size: 24px;padding: 1rem;font-weight: 500;font-family: Lato, sans-serif;}
.cd-applicationStatus .cd-content .cd-infomodel .modal-footer .cd-close {width: 100%;background-color: var(--primary);color: var(--white);font-size: 1rem;padding: 10px;}
 /* Steps section */
.cd-step {
    padding: 10px 0;
}
.cd-step:last-child {
    border-bottom: none;
}
.cd-infoAlert {padding: 2rem;margin-top: 2rem;}

/* search */
.cd-search-box {
    position: relative;
    width: 250px;
    min-height: 70px;
    display: flex;
    align-items: center;    
    background: #ffffff;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    padding: 8px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cd-search-box input {
    font-size: 20px;
    border: none;
    outline: none;
    width: 89%;
}
.cd-search-box .icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    background-color: transparent;
    border: 0;
    padding: 0;
}
/* search */
/* ===== app. status # ====== */

/* ==== footer ==== */
.cd-section-footer {
    padding: 24px 0;
    background: #f8f8f8;
}
.cd-section-footer .cd-footerMenu ul {position: relative;display: flex;align-items: center;gap: 20px;}
.cd-section-footer .cd-footerMenu ul .cd-link {position: relative;padding: 10px;font-size: 15px;color: #284162;}
.cd-section-footer .cd-footerMenu ul .cd-link:hover {background-color: #eeeeee;}
.cd-section-footer .cd-footerMenu ul .cd-link::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #000;
    right: -14px;
    top: 50%;
}
.cd-footerMenu ul li:last-child .cd-link::before {
    content: none;
}
.cd-section-footer p {
    color: #ffffffb3;
    margin: 0;
}
.cd-footermenu {display: flex;gap: 1rem;justify-content: space-between;align-items: center;}
/* # */

/* =============================================
    responsive 
========================================================= */
@media (min-width: 768px) {
    .responsive-table table span.cd-mobilehead {display: none;}
    .cd-offcanvas-menu {width: auto;}
    .cd-offcanvas-close {display: none;}
}
@media (max-width: 767px) {
    .cd-section-row {
        flex-direction: column;
        padding: 10px 0;
    }
    .cd-section-header {
        display: none;
    }
    .cd-section-cell {
        padding: 6px 12px;
    }
    .cd-section-cell::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: #555;
    }
    .table-footer {display: block;text-align: center;}
    .table-footer .page-info {padding: 10px 0;}
    .cd-offcanvas-backdrop {
        display: inline-block;
    }
    /* table design */
    .responsive-table table thead {
        display: none;
    }

    .responsive-table table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 0;
    }

    .responsive-table td {
        border: none;
        position: relative;
        border-bottom: 1px solid #eee;
    }
    span.cd-mobilehead {
        display: block;
        font-size: 20px;
        font-weight: 700;
        color: rgba(0,0,0,.87);
    }
    .responsive-table td:last-child {
        border-bottom: none;
    }

    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 12px;
        font-weight: bold;
        color: #333;
    }
    /* table design # */
    .cd-offcanvas-menu {
        position: fixed;
        top: 0;
        /* margin-top: -40px; */
        left: -200px;
        width: 200px;
        height: 100%;
        background: #fff;
        transition: 0.3s ease;
        z-index: 9999;
        padding: 1rem;
        box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
    }
    .cd-offcanvas-menu.active {
        left: 0;
    }
    .cd-offcanvas-close {
        font-size: 30px;
        cursor: pointer;
        display: inline-block;
        width: 100%;
        text-align: right;
        line-height: normal;
    }
    .cd-reportBtn .cd-reportbtnlink {text-align: center;margin: 10px 0;background-color: transparent !important;box-shadow: none;color: var(--dark);font-weight: 600;width: 100%;display: flex;justify-content: center;}
    .cd-accountgrpbtn {display: block;text-align: center;}
}

@media (max-width: 575px) {
    .cd-section-footer .cd-footerMenu ul {flex-direction: column;gap: 2px;align-items: start;}
    .cd-section-footer .cd-footerMenu ul .cd-link::before {left: 0;right: unset;top: 48%;}
    .cd-footerMenu ul li:last-child .cd-link::before {display: block;content: '';}
    .cd-footermenu {flex-direction: column;}
    a.cd-footlogo svg {min-width: 140px !important;}
    .cd-terms .cd-grpBtns {justify-content: center;}
}