.timeline-container {
    width: 100%;
    overflow-x: auto;
    padding: 60px;
}

.timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Line */
.timeline::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 4px;
    background: #ababab;
    z-index: 0;
}

.timeline-step {
    position: relative;
    text-align: center;
    flex: 1;
    z-index: 1;
}

/* Circle */
.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Label */
.label {
    position: absolute;
    margin-top: 8px;
    font-size: 12px;
    transform: rotate(-45deg);
    top: -45px;
    left: 55px;
}

/* Value */
.label-value {
    margin-top: 8px;
    font-size: 12px;
}

/* STATUS COLORS */
.timeline-step.completed .circle {
    background-color: #28a745;
}

/* STATUS COLORS */
.timeline-step.na .circle {
    background-color: #c1c1c1;
}

.timeline-step.current .circle {
    background-color: #065769;
}

.timeline-step.pending .circle {
    background-color: #c1c1c1;
}

/* ===================================
   📱 MOBILE RESPONSIVE (VERTICAL MODE)
   =================================== */
@media (max-width: 768px) {

    .timeline-container {
        padding: 20px;
    }

    .timeline {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Vertical line */
    .timeline::before {
        top: 0;
        left: 15px;
        width: 3px;
        height: 100%;
    }

    .timeline-step {
        display: flex;
        align-items: flex-start;
        margin-bottom: 25px;
        text-align: left;
    }

    .circle {
        margin: 0 15px 0 0;
        width: 25px;
        height: 25px;
    }

    /* ❌ Remove rotation for mobile */
    .label {
        position: static;
        transform: none;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .label-value {
        font-size: 12px;
    }
}


section {
    padding:10px 0px!important;
}


.card-dark-header .card-header {
    background: linear-gradient(-45deg, #00263e, #1c5477);
    color:#fff!important;
}

.card-dark-header {
    opacity: 1!important;
}

.card-dark-header:hover {
    opacity: 1!important;
}

.card-dark-header .card-body ul {
    padding-left: 5px!important;
}

.card-dark-header .card-body ul li {
    color: #1c5477 !important;
}


/* Background colors */
.bg-red-100    { background-color: #fee2e2; }   /* light red */
.bg-green-100  { background-color: #d1fae5; }   /* light green */
.bg-yellow-100 { background-color: #fef3c7; }   /* light yellow */
.bg-blue-100   { background-color: #dbebff; }   /* light blue */

/* Text colors */
.text-red-700    { color: #b91c1c; }   /* dark red */
.text-green-700  { color: #047857; }   /* dark green */
.text-yellow-700 { color: #b45309; }   /* dark yellow / amber */
.text-blue-700   { color: #1d4ed8; }   /* dark blue */

/* Borders */
.border-red-400    { border: 1px solid #fca5a5; }
.border-green-400  { border: 1px solid #6ee7b7; }
.border-yellow-400 { border: 1px solid #fcd34d; }
.border-blue-400   { border: 1px solid #93c5fd; }

.model-header-dark {
    background: linear-gradient(-45deg, #00263e, #1c5477)!important;
}

.model-header-dark .modal-title {
    color:#fff!important;
}


.login-side-bar {
    background: linear-gradient(-45deg, #00263e, #1c5477);
}

.bg-login {      /* watermark effect */
    background: url('/static/img/bg_night_view_bsl.jpeg') no-repeat center bottom!important;
    background-size: cover!important;
}

.login-card {
    background-color:#cce5e9!important;
}


.logged-in-username {
    border: 1px solid #00263e!important;
    padding:5px 10px!important;
    color: #00263e!important;
}
/*custom Card *



/* Card Container */
.ta-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    font-family: "Segoe UI", sans-serif;
    background: #fff;
}

/* .ta-card .btn {
    visibility: hidden!important;
}

.ta-card:hover .btn {
    visibility: visible!important;
} */


/* Header */
.ta-card .card-header {
    padding: 5px!important;
    color: #fff!important;
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(-45deg, #00263e, #1c5477);
}

/* Body */
.ta-card .card-body {
    position: relative;
    padding: 5px!important;
    background: #f9fafc;
    color: #333;
    font-size: 14px!important;
    min-height: 120px;
}

/* Background Letter Icon */
.ta-card .card-icon {
    position: absolute;
    right: 12px;
    bottom: 4px;
    font-size: 110px;
    font-weight: 700;
    color: rgba(0,0,0,0.05);
    pointer-events: none;
    user-select: none;
}


/* Footer */
.ta-card .card-footer {
    padding: 2px!important;
    color: #fff!important;
    font-size: 11px!important;
    background: #022053;    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*custom Card */



/*Button Toggle*/



/* Custom size */


form .input-group .form-control {
    /* height: 28px!important; */
    background-color:#edf1f1!important;
}


.main {
    padding-top:90px!important;
    min-height: 700px!important;
    overflow-y:auto!important;
}

.hidden {
    display: none !important;
}

.title-text {
    color: var(--heading-color)!important;
    font-family: var(--heading-font)!important;
}

.bv-form .input-group > .input-group-text:nth-of-type(1) {
    min-width: 40px !important;
    padding: 5px!important;
    font-size: 14px !important;
    background-color: #0f2b41!important;
    color:#fff!important;
}

.bv-form .input-group > .input-group-text:nth-of-type(2) {
    min-width: 40px !important;
    padding: 5px!important;
    font-size:12px!important;
    font-weight: bold!important;
    background-color: #effa91ff!important;
}

.custom-switch {
    position: relative;
    display: inline-block;
}

.custom-switch .form-check-input {
    width: 70px;
    height: 32px;
    position: relative;
    cursor: pointer;
}

.custom-switch .form-check-label {
    position: absolute!important;
    font-size: 14px!important;
    font-weight: bold!important;
    width: 100%!important;
    pointer-events: none!important;
    padding: 0 8px!important;
}

/* Background colors */
.custom-switch .form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.custom-switch .form-check-input:not(:checked) {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* YES text alignment when checked */
.custom-switch .form-check-input:checked + .form-check-label {
    color: #fff !important;
    position: absolute !important;
    top: 10px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 0px!important;
}

/* YES text alignment when checked */
.custom-switch .form-check-input:not(:checked)::after {
    content: 'No';
    color: #fff !important;
    position: absolute !important;
    top: 5px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 35px!important;
}

/* Yes/No text inside switch */
.custom-switch .form-check-input::after {
    color: #fff !important;
    position: absolute !important;
    top: 10px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 25px!important;
    font-weight: bold;
    font-size: 14px;
}

/* Change text to Yes when checked */
.custom-switch .form-check-input:checked::after {
    content: 'Yes';
    color: #fff !important;
    position: absolute !important;
    top: 5px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 5px!important;
}


/*Button Toggle*/

li .lbl-hdr {
    color:#22608e!important;
    font-size: 13px!important;
    padding: 2px 5px;
}



li .lbl-val {
    color:#484d52!important;
    font-size: 13px!important;
    padding: 2px 5px;
}

li:hover .lbl-hdr {
    color:#520272!important;
    font-weight:bold!important;
    font-size: 13px!important;
    padding: 2px 5px;
}



li:hover .lbl-val {
    color:#055c50!important;
    font-weight:bold!important;
    font-size: 13px!important;
    padding: 2px 5px;
}

.btn-add {
    color:#fafafa!important;
    background-color: #22608e!important;
    border:1px solid #22608e!important;
    font-size: 12px!important;
    padding: 2px 5px!important;
}

.btn-add:hover {
    background-color:#22608e!important;
    color:#fff!important;
    border:1px solid #fff!important;
    font-size: 12px!important;
}


.form-inputs div p {
    color:#22608e!important;
}



.bv-form .input-group .input-label {
    position:absolute!important;
    font-size:12px!important;
    top:4px!important;
    left:4px!important;
    color: #860e5d !important;
}

.bv-form .input-group {
    padding-top: 20px!important;
}

.header {
    background-color:#fff!important;
}

p.title-text {
    font-size: 13px!important;
    font-style: italic!important;
    color: #22608e!important;
    font-weight: bold!important;
}

.filter-graphs .dt-length {
    display:none!important;
}

.form-floating > label {
    position: absolute!important;
    top: -15px!important;
    left: 36px!important;
    z-index: 51!important;
    font-size:12px!important;
    font-weight: bold!important;
    color:#860e5d!important;
}

.bv-form .form-control:focus, .bv-form  .has-success .form-control:focus, .bv-form  .has-error .form-control:focus{
    border-color: #22608e !important;
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 6px #020c13 !important;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 6px #020c13 !important;
    background-color: #f7dfab!important;
    border-width: 2px !important;
}

.datatable thead tr th, .dt-container table tr th, .bv-form table tr th {
    background-color:#22608e!important;
    color:#fff!important;
    padding:2px!important;
}


.bv-form {
    font-family: var(--nav-font);
}

.bv-form .input-group-text, .bv-form .form-control, .bv-form .form-control:focus {
    font-family: var(--nav-font);
}

.bv-form .input-group {
    margin-bottom: 20px !important;
}

.datatable tr td, .datatable tr th {
    white-space: nowrap !important;
}

.dt-container .dt-paging .dt-paging-button {
    padding: 2px !important;
    margin: 0px !important;
}

    .dt-container .dt-paging .dt-paging-button .page-link {
        font-size: 11px !important;
        padding: 2px !important;
    }

.dataTable tr td, .dataTable tr th, .expandable-table tr td, .expandable-table tr th {
    font-size: 11px !important;
    white-space: nowrap !important;
    padding:2px!important;
}

.dt-container .dt-length, .dt-container .dt-buttons, .dt-container .dt-search {
    float: left !important;
    font-size: 12px !important;
}

.dt-container .dataTables_filter {
    float: right !important;
    font-size: 12px !important;
}

.dt-container .dt-info, .dt-container .dt-length label {
    font-size: 12px!important;
    font-style: italic!important;
    color:#22608e!important;
    font-weight: bold!important;
}

.dt-container .form-control {
    padding: 2px !important;
    height: 20px !important;
}


.btn-rounded {
    border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    padding:5px!important;
    font-size: 11px !important;
}

.table tr td .btn {
    padding: 2px 5px !important;
    font-size: 11px !important;
}

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

.text-grey {
    color:#ccc!important;
}

.navmenu .dropdown ul a {
    text-align: left !important;
    justify-content:start!important;
}

.container-fluid {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/*forms*/


.bv-form .help-block {
    position: absolute !important;
    bottom: -20px !important;
    font-style: italic !important;
    font-size: 12px!important;
}

.input-group {
    margin-bottom: 4px !important;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    color: #3c763d;
}

.has-success .form-control {
    border-color: #3c763d;
    color: #3c763d !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #aeebaf !important;
    color: #3c763d !important;
}

    .has-success .form-control:focus {
        border-color: #2b542c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
        background-color: #aeebaf !important;
    }

.has-success .input-group-addon {
    color: #3c763d;
    border-color: #3c763d;
    background-color: #dff0d8;
    font-weight: bold !important;
}

.has-success .form-control-feedback {
    color: #3c763d !important;
    /*color: #fff !important;*/
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
    color: #8a6d3b;
}

.has-warning .form-control {
    border-color: #8a6d3b;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

    .has-warning .form-control:focus {
        border-color: #66512c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
    }

.has-warning .input-group-addon {
    color: #8a6d3b;
    border-color: #8a6d3b;
    background-color: #fcf8e3;
}

.has-warning .form-control-feedback {
    color: #8a6d3b;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #a94442;
}

.has-error .form-control {
    border-color: #a94442 !important;
    color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #efbbba !important;
}

    .has-error .form-control:focus {
        border-color: #843534;
        color: #a94442;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
        background-color: #efbbba !important;
    }

.has-error .input-group-addon {
    color: #a94442;
    border-color: #a94442;
    background-color: #f2dede;
    font-weight: bold !important;
}

.has-error .form-control-feedback {
    color: #a94442;
    /*color: #fff !important;*/
}

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

.form-control[disabled="disabled"] {
    background-color: #e9e9e9 !important;
}

.form-control-feedback {
    position: absolute !important;
    left: 100% !important;
    margin-left: -40px !important;
    top: 25px !important;
    padding-left: 5px!important;
    z-index: 2 !important;
    height: 20px !important;
    width: 20px !important;
    display: inline-block !important;
    font-weight: bold !important;
}

/*Forms*/

.nav-tabs .nav-link.active {
    color: var(--contrast-color)!important;
    border:1px solid #00263E!important;
    background-color:#00263E!important;
}

.nav-tabs .nav-link {
    border:1px solid #e7e7e7!important;
    background-color: #e7e7e7!important;
    border-bottom:1px solid #00263E!important;
    margin: 0px 1px;
}

.tab-content {
    padding: 10px;
    border: 0px solid #00263E !important;
    border-top: 2px solid #00263E !important;
    min-height: 360px !important;
    margin-top: -2px !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px !important;
    margin: 0px !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
        font-size: 11px !important;
        padding: 2px !important;
    }

.dataTable tr td, .dataTable tr th, .expandable-table tr td, .expandable-table tr th {
    font-size: 11px !important;
    white-space: nowrap !important;
    padding: 2px !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dt-buttons {
    float: left !important;
    font-size: 12px !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    font-size: 12px !important;
}


.dataTables_wrapper .form-control {
    padding: 2px !important;
    height: 20px !important;
}

ul {
    list-style-type: none !important;
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: auto;
    margin-left: auto;
}

form span {
    color: var(--primary) !important;
}

.btn, .fc button, .ajax-upload-dragdrop .ajax-file-upload, .swal2-modal .swal2-buttonswrapper .swal2-styled, .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-confirm, .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-cancel, .wizard > .actions a {
    padding: 0.2rem .8rem !important;
}

/*Filters*/

/*Filters  Styles*/

.filter-box .form-control {
    padding: 5px !important;
    font-size: 12px !important;
    height: 24px !important;
    margin-bottom: 2px !important;
    background-color: #e4f9fc !important;
}

    .filter-box .form-control:focus {
        background-color: #efd65d !important;
        color: #000 !important;
    }

.filter-box {
    position: relative;
    padding: 5px !important;
}

    .filter-box > ul {
        height: 130px !important;
        overflow: auto;
        background-color: #ffffff !important;
        border: 2px solid #fff !important;
        margin-top: -2px !important;
    }

    .filter-box > p {
        padding: 2px !important;
        margin-left: -0px !important;
        background-image: linear-gradient(#c5c7c9, #2b4a72, #203755) !important;
        color: #ccc !important;
        font-size: 12px !important;
        border: 1px solid #fff !important;
    }


    .filter-box li {
        padding: 1px !important;
        border: 0px solid #fff;
        border-bottom: 1px solid #ccc !important;
        font-size: small !important;
        font-weight: normal;
        color: #22608e !important;
        border-bottom: 1px solid #e9e7e7 !important;
        white-space: nowrap;
        font-size: 12px !important;
    }

        .filter-box li:hover {
            background-color: #afd7d5 !important;
            cursor: pointer !important;
        }

            .filter-box li:hover .li-unchecked {
                color: #193831 !important;
            }

.li-unchecked {
    font-size: 15px;
    height: 15px;
    width: 15px;
    color: #ccc !important;
    cursor: pointer;
}

.li-checked {
    font-size: 15px;
    height: 15px;
    width: 15px;
    color: #193831 !important;
    cursor: pointer;
}

/*Filters*/

.fs-24 {
    font-size: 24px;
    font-weight: bold !important;
}

.fs-30 {
    font-size: 24px;
    font-weight: bold !important;
}

.content-wrapper {
    padding: 0px !important;
}


.input-group-text {
    padding: 0px !important;
}
.modal .modal-dialog {
    margin-top: 5px !important;
}

p {
    margin-bottom: 2px !important;
}


/*Input Group*/



/*INput Group*/