/*body {
}*/

.button_to_link {
    background: none !important;
    border: none;
    padding: 0 !important;
    /*optional*/
    font-family: arial,sans-serif; /*input has OS specific font-family*/
    color: #069 !important;
    font-size: small;
    text-decoration: underline;
    cursor: pointer;
}

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

/*show progress when loading page*/
.no-js #loader {
    display: none;
}

.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/LoaderIcon.gif) center no-repeat #fff;
}

/*show modal popups at the centre of the screen*/
.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
}

.modal-header {
    color: #fff;
    /*background-color: #007bff;*/
    background-color: #3c8dbc;
    /*border-color: #337ab7;*/
}

.divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

/*hide/show action icons on list*/
tr .action-icons {
    /*float: right;*/
    /*visibility : hidden;*/
    /*display: none;*/
}

tr:hover .action-icons {
    /*display: inline-block;*/
    /*visibility : visible;*/
}

li .action-icons {
    /*float: right;*/
    /*visibility: hidden;*/
    /*display: none;*/
}

li:hover .action-icons {
    /*display: inline-block;*/
    /*visibility: visible;*/
}
.connect_user-image {
    border-radius: 50px;
    height: 50%;
    width: 30px;
}


/* basic positioning */
.legend {
    list-style: none;
}

    .legend li {
        float: left;
        margin-right: 10px;
    }

    .legend span {
        /*border: 1px solid #ccc;*/
        border-radius: 10px;
        float: left;
        width: 12px;
        height: 12px;
        margin: 2px;
    }
    /* your colors */
    .legend .green {
        background-color: green;
    }

    .legend .red {
        background-color: red;
    }

    .legend .purple {
        background-color: purple;
    }

    .legend .grey {
        background-color: grey;
    }

    .legend .orange {
        background-color: orange;
    }

    .legend .black {
        background-color: black;
    }

    .legend .blue {
        background-color: blue;
    }

    .nopaddingtop {
        padding-top : 0 !important;
    }

    .nopaddingleft {
        padding-left: 0 !important;
    }

    .nopaddingright {
        padding-right: 0 !important;
    }

.navbar-static-top {
     background: url(/images/Interface-TopBar-1903x65-A.png);
     background-size: cover;
}

.panel-footer{
    background-color: #F7931E;
    color: #fff;
}

.panel-heading {
    background-image: linear-gradient(#7CBEF5, #090979);
}

.logo {
    background: url(/images/Interface-TopBar-logo.png);
    background-size: cover;
}

.sidebar-toggle {
    color: #F7931E;
}

.main-sidebar {
    background-image: url('/images/Interface-Bar-230x736.png');
    background-size: cover;
}

/* The skin paints the "Menu" section header with a dark band (#1a2226),
   which shows up as black space at the top of the sidebar. Make it
   transparent so the blue sidebar/navbar artwork shows through instead. */
.skin-blue .sidebar-menu > li.header {
    background: transparent;
    color: #cfe0f5;
}

.bg-very-light-blue {
    background-color: #B2DCFA;
    /*background-color: #F7931E;*/
    /*background-color: #bfd0db;*/
    color: #fff;
}

    .bg-very-light-blue:active {
        background-color: #F7931E;     
    }
    .bg-very-light-blue:hover {
        cursor: pointer;
    }

.user-body .row.small {
    margin-left: 0;
    margin-right: 0;
    padding: 0 8px;
}

.custom-links {
    padding: 4px 0;
}

/* Left-align the menu links under the profile text (overrides the .text-center in markup). */
.user-body .custom-links.text-center {
    text-align: left !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body .custom-links a,
.custom-links a {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    /* Black + underlined so "My Account" / "Sign out" read clearly as links. */
    color: #1f2d3d !important;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body .custom-links a:hover,
.custom-links a:hover,
.custom-links:hover a {
    color: #fff !important;
    background-color: #0f6cbd;
    text-decoration: underline;
}



@media only screen and (max-width: 800px) {
    .logo {
        /*background: url(/images/Interface-TopBar-logo.png);*/
        background-image: url('/images/Interface-TopBar-SMALL.png');
        /*background-image: url('/images/Interface-TopBar-1903x65-B.png');*/
        background-size: cover;
    }
}
/*}
    background-image: url('../images/Interface-Bar-230x736.png');
    background-size: cover;
}*/

/* ============================================================
   Level 1 - Standard Page Header (the page identity)
   Usage (preferred, with description):
     <div class="connect_page_header">
        <i class="fa fa-users cph-icon"></i>
        <div class="cph-text">
           <span class="cph-title">Users Management</span>
           <span class="cph-sub">Manage logins, access and account status.</span>
        </div>
     </div>
   Legacy usage still works (title only):
     <span class="connect_page_header">Users Management</span>
   ============================================================ */
.connect_page_header {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    font-weight: 600;
    color: #1f2430;
    padding: 16px 20px;
    margin-bottom: 18px;
    background: #f7f7f9;
    border: 1px solid #ededf0;
    border-radius: 10px;
}

/* Icons removed from the standard headers - keep just title + description. */
.connect_page_header > i,
.connect_page_header > .fa,
.connect_page_header .cph-icon {
    display: none;
}

.connect_page_header .cph-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.connect_page_header .cph-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2430;
    line-height: 1.2;
}

.connect_page_header .cph-sub {
    font-size: 14px;
    font-weight: 400;
    color: #605e5c;
    line-height: 1.35;
}

/* Bigger, richer "hero" variant for landing-style pages (My Applications, My Inbox). */
.connect_page_header.connect_page_header--hero {
    gap: 18px;
    padding: 24px 26px;
    background: linear-gradient(135deg, #1c63b3 0%, #0f6cbd 55%, #2aa5c9 100%);
    border: 0;
    color: #fff;
    box-shadow: 0 6.4px 14.4px rgba(15,108,189,.25);
}
.connect_page_header--hero > i,
.connect_page_header--hero > .fa,
.connect_page_header--hero .cph-icon {
    display: none;
}
.connect_page_header--hero .cph-title { color: #fff; font-size: 28px; font-weight: 700; }
.connect_page_header--hero .cph-sub { color: rgba(255,255,255,.85); font-size: 15px; }

.connect_page_header_nopadding {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    font-weight: 600;
    color: #1f2430;
    padding: 16px 20px;
    background: #f7f7f9;
    border: 1px solid #ededf0;
    border-radius: 10px;
}

.connect_page_header_nopadding > i,
.connect_page_header_nopadding > .fa,
.connect_page_header_nopadding .cph-icon {
    display: none;
}
.connect_page_header_nopadding .cph-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.connect_page_header_nopadding .cph-title { font-size: 24px; font-weight: 600; color: #1f2430; line-height: 1.2; }
.connect_page_header_nopadding .cph-sub { font-size: 14px; font-weight: 400; color: #605e5c; line-height: 1.35; }

/* Dashboard section headings (My Applications / My Inbox / Noticeboard / Calendar /
   Recent Activity) - larger, bolder and a consistent heading colour. */
.dash-section-header h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2430;
    margin: 4px 0;
}
.dash-section-header h4 > i,
.dash-section-header h4 > .fa {
    font-size: 22px;
    margin-right: 8px;
}

/* ---- Lightweight toast notifications (window.bcToast) ---- */
.bc-toast-wrap {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bc-toast {
    min-width: 280px;
    max-width: 400px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .25s ease, transform .25s ease;
}
.bc-toast.show { opacity: 1; transform: none; }
.bc-toast--error   { background: #d13438; }
.bc-toast--success { background: #2e9c5a; }
.bc-toast--info    { background: #0f6cbd; }
.bc-toast--warning { background: #c77700; }
.bc-toast > i { font-size: 18px; margin-top: 1px; }
.bc-toast .bc-toast-close {
    margin-left: auto;
    cursor: pointer;
    opacity: .85;
    background: none;
    border: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 6px;
}
.bc-toast .bc-toast-close:hover { opacity: 1; }

/* Keep the DataTables "Search" box from running off the right edge on listing pages. */
.dataTables_wrapper .dataTables_filter {
    float: right;
    margin-right: 18px;
    padding-right: 4px;
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: 6px;
    max-width: 220px;
    display: inline-block;
}


.picbox {
    position: relative;
    display: block;
    text-align: center;
    padding: 12px 0 6px;
}

/* Circular avatar with a camera badge (top-right user dropdown). */
.picbox-avatar {
    position: relative;
    display: inline-block;
}

.picbox-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    /* Brand primary blue (matches .btn-primary) instead of the old light cyan ring. */
    border: 4px solid #282560;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    background: #fff;
}

.picbox-cam {
    position: absolute;
    right: 4px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Same gradient as .btn-primary so the camera badge matches the app's primary blue. */
    background-image: linear-gradient(to bottom right, #282560, #00BDE6);
    background-color: #282560;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 13px;
    text-decoration: none;
}
.picbox-cam:hover {
    background-image: linear-gradient(to bottom right, #1f1c4d, #00a9cf);
    background-color: #1f1c4d;
    color: #fff;
}

    .picbox .text {
        position: static;
        margin: 10px 0 0;
        left: auto;
        right: auto;
        text-align: left;
        background: transparent;
        font-family: Arial, sans-serif;
        color: #333;
        width: 100%;
        padding: 0 16px;
        line-height: 1.45;
    }

/* Stack the profile name onto its own row. */
.picbox .text > .picbox-name {
    display: block !important;
    width: 100%;
}

.picbox-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2d3d;
}

.picbox-code {
    display: inline;
    font-weight: 400;
    color: #8a97a5;
    font-size: 13px;
}

/* Clean single divider between the profile text and the menu row.
   Header is now auto-height, so this line sits below the text instead of cutting through it. */
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    border-top: 1px solid #eef1f4 !important;
    border-bottom: 0 !important;
    padding-top: 10px !important;
    margin-top: 6px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background-color: #fff !important;
    height: auto !important;      /* was fixed 175px, which clipped the text and let the next row's border cut through it */
    min-height: 0 !important;
    padding: 14px 0 10px !important;
    text-align: center;           /* keeps the avatar centred; the .text block is left-aligned separately */
    overflow: visible !important;
}

.text-drop-shadow {
    /*text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;*/
    color: #fff;
    /*font-family: 'Arial Rounded MT';*/
}

.orange-bg {
    background-color: #F7931E;
    
}
    .orange-bg h4 {
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 15px;
    }

.orange-icon {
    color: #F7931E;
}

.white-icon {
    color: #fff;
}

.cblue-bg{
    background-image: linear-gradient(to bottom right, #282560, #00BDE6);
}
    .cblue-bg h4 {
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 15px;
    }

.bold-text{
    font-weight:bold;
}
.grey-bg{
    color: lightslategrey;
}




/*.custom-dropdown {
    position: relative;
    display: inline-block;
}

.custom-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1; `
}

.custom-dropdown:hover .custom-dropdown-content {
    display: block;
}*/



/* ============================================================
   Global form field alignment
   Keep text/select/textarea fields stretched full width and
   left-justified consistently across all views. Inline controls
   (radios, checkboxes) and their labels are excluded so they
   keep their natural inline layout.
   ============================================================ */
.form-group {
    text-align: left;
}

.form-group .control-label,
.form-group > label {
    text-align: left;
}

.form-group input[type="text"].form-control,
.form-group input[type="email"].form-control,
.form-group input[type="number"].form-control,
.form-group input[type="password"].form-control,
.form-group input[type="tel"].form-control,
.form-group input[type="url"].form-control,
.form-group input[type="search"].form-control,
.form-group input[type="date"].form-control,
.form-group textarea.form-control,
.form-group select.form-control {
    width: 100%;
    text-align: left;
}


/* ============================================================
   MODERN MODAL + FORM + BUTTON STYLING (2026)
   Brings every standard Bootstrap modal, add/edit form and primary
   (Apply / Submit / Save) button in line with the modern
   "New / Edit Employee" design. The Employee modals use custom
   .ne-* classes and are intentionally NOT affected here.
   Brand gradient: #282560 -> #00BDE6.
   ============================================================ */

/* --- Modal shell: rounded, elevated, clipped corners --- */
.modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(40, 37, 96, 0.25);
    overflow: hidden;
}

/* --- Gradient header with white title + close --- */
.modal .modal-header {
    background-image: linear-gradient(to bottom right, #282560, #00BDE6);
    color: #fff;
    border-bottom: none;
    padding: 16px 22px;
}

.modal .modal-header .modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.modal .modal-header .close,
.modal .modal-header .close:hover,
.modal .modal-header .close:focus {
    color: #fff;
    opacity: 0.9;
    text-shadow: none;
    font-size: 24px;
    outline: none;
}

/* --- Body + modernised form fields --- */
.modal-body {
    padding: 22px;
}

.modal-body .form-control {
    border-radius: 7px;
    border: 1px solid #dfe3ec;
    box-shadow: none;
}

    .modal-body .form-control:focus {
        border-color: #00BDE6;
        box-shadow: 0 0 0 3px rgba(0, 189, 230, 0.12);
    }

.modal-body .control-label,
.modal-body label {
    color: #6b7180;
    font-weight: 600;
}

/* --- Footer: light bar, right aligned actions --- */
.modal-footer,
.form-group.modal-footer {
    background: #f8fafc;
    border-top: 1px solid #eef0f6;
    padding: 14px 22px;
    text-align: right;
}

/* --- Brand primary button (Apply / Submit / Save / Create) ---
   Matches the Employee "Create Employee" button so listing "Apply"
   buttons and modal "Submit" buttons look identical and modern. */
.btn-primary {
    background-image: linear-gradient(to bottom right, #282560, #00BDE6);
    background-color: #282560;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(40, 37, 96, 0.18);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:active:focus,
    .btn-primary:active:hover {
        background-image: linear-gradient(to bottom right, #1f1c4d, #00a9cf);
        background-color: #1f1c4d;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(40, 37, 96, 0.24);
        outline: none;
    }

    .btn-primary.disabled,
    .btn-primary:disabled,
    .btn-primary[disabled] {
        background-image: none;
        background-color: #9aa0b3;
        box-shadow: none;
        transform: none;
        opacity: .65;
    }

/* --- Secondary (Cancel / Close) button inside modals --- */
.modal .btn-default {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #64748b;
    font-weight: 600;
}

    .modal .btn-default:hover,
    .modal .btn-default:focus {
        background: #f1f5f9;
        color: #475569;
    }


/* ============================================================
   Global "primary action" button with icon — matches the modern
   "New Employee" button so listing Apply / New buttons across the
   app (Leave, Advance, Loan, Overtime, Suggestions, Timesheets, ...)
   share the same look. Use: class="btn btn-new-employee" with a
   leading <i class="fa fa-plus-circle"></i> icon.
   (Keep the "btn" class so Bootstrap's ".btn.disabled { pointer-events:none }"
   still blocks clicks when disabled.)
   ============================================================ */
.btn-new-employee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background-image: linear-gradient(to bottom right, #282560, #00BDE6);
    box-shadow: 0 4px 10px rgba(40, 37, 96, 0.18);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .btn-new-employee:hover,
    .btn-new-employee:focus,
    .btn-new-employee:active {
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(40, 37, 96, 0.24);
        outline: none;
    }

    .btn-new-employee i { font-size: 16px; }

    .btn-new-employee.disabled,
    .btn-new-employee:disabled,
    .btn-new-employee[disabled] {
        background-image: none;
        background-color: #9aa0b3;
        box-shadow: none;
        transform: none;
        opacity: .65;
        cursor: not-allowed;
        pointer-events: none;
    }


/* NOTE: An earlier attempt force-stacked all modal form fields (label above
   input) into a single column. That broke the intended multi-column layouts
   (e.g. Leave: Type|Source and From|To side by side), so it was removed.
   Modal forms now keep their NATIVE Bootstrap horizontal layout (label beside
   input) and only receive the modern chrome (gradient header, rounded inputs,
   gradient buttons) from the rules above. */

/* =====================================================================
   Scrollable modal helper (opt-in via .modal-scrollable on .modal-dialog)
   ---------------------------------------------------------------------
   Bootstrap 3 doesn't ship with a scrollable-body modal, so the whole
   page scrolls when a modal is taller than the viewport. Add the
   "modal-scrollable" class to a .modal-dialog to make ONLY the modal
   body scroll while the header, footer, and page underneath stay put.

   Usage:
     <div class="modal fade">
       <div class="modal-dialog modal-scrollable">   <-- opt in
         <div class="modal-content">
           <div class="modal-header"> ... </div>
           <div class="modal-body">   ... </div>   <-- this scrolls
           <div class="modal-footer"> ... </div>
         </div>
       </div>
     </div>

   Existing modals without the class behave exactly as before, so this
   is safe to ship without touching working screens.
   ===================================================================== */
.modal-scrollable {
    display: flex;
    align-items: center;
    max-height: calc(100vh - 40px);
    margin: 20px auto;
}

.modal-scrollable .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    width: 100%;
    overflow: hidden;
}

.modal-scrollable .modal-header,
.modal-scrollable .modal-footer {
    flex: 0 0 auto;
}

.modal-scrollable .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Preserve the standard modal-lg / modal-sm width behaviour when the
   modal-scrollable modifier is used alongside them. */
@media (min-width: 768px) {
    .modal-dialog.modal-scrollable {
        max-height: calc(100vh - 60px);
        margin: 30px auto;
    }
    .modal-dialog.modal-scrollable .modal-content {
        max-height: calc(100vh - 60px);
    }
}

/* =====================================================================
   Global "submitting..." button state
   ---------------------------------------------------------------------
   Applied automatically by Scripts/formSubmitState.js whenever a form
   is submitted. Also applied to <a class="js-submit-state"> anchors
   after they're clicked (e.g. Regenerate OTP). Keeps the button
   readable but clearly "busy" so the user knows something is happening.
   ===================================================================== */
.is-submitting {
    opacity: 0.75 !important;
    cursor: wait !important;
    pointer-events: none;
}

/* When it's an <a>, also visually flatten it slightly. */
a.is-submitting {
    text-decoration: none;
    color: inherit;
}