/* Reference Colors: 
    
    AL-MA Blue:#304f7f 
    Y in Mn Blue: #306AC0
    --
    Pantone pallet for classic blue:
    2016 Winner Serenity (blue) : #92a8d1
    2000 Winner Cerulean (Blue) : #98b4d4
    Provence(lighter blue): #658dc6  
    Baby Blue: #b5c7d3 
    Monument (Grey): #84898c
    Stucco (brownish): #a58d7f
    Peach Quartz: #f5b895
    Cornhusk: #f2d6ae
    Honey: #ba9645 
    Quicksilver: #828290
    Arctic Ice: #bec6d5
    --
    Grey (used as table header) : #8894A2
    btn-secondary Grey : #6c757d
    Mango: #F7B801
    Roman Silver : #878D93


*/


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html, body {
    width: 100%;
}

/* Client-specific top actions spacing (adds space below the Download PDF/Back row) */
.client-top-actions { margin-bottom: 1rem; }

/* When header + top actions should have extra spacing for clients */
.client-header-spacing { margin-bottom: 1rem; }

body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
    overflow-x: hidden; /* prevert horizontal scroll bar */
}

a {
    color: #106eea;
    text-decoration: none;
}

    a:hover {
        color: #3b8af2;
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", sans-serif;
}

/*-------------------------------------------------------------
# CUSTOM
--------------------------------------------------------------*/
/* container-responsive - applied to _Layout.cshtml - reduces padding-top on smaller screens*/
.container-responsive {
    padding-bottom: 100px;
    padding-top: 40px;
    transition: all 0.3s ease;
}
@media (max-width: 768px) {
    .container-responsive {
        transition: all 0.3s ease;
        padding-bottom:60px;
        padding-top:30px;
    }
}

/* Slightly smaller inline button spinner (e.g., Declaration 1804 index export/print) */
.spinner-border-sm2 {
    width: 0.80rem;
    height: 0.80rem;
    border-width: 0.22em;
    color:#106eea
}

/* Prevent icon action links from shifting layout when spinner is injected */
.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.icon-action-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em; /* reserve space comparable to a Bootstrap icon */
    height: 1em;
    min-width: 1em;
}

.icon-action-hidden {
    visibility: hidden; /* keep footprint, hide glyph */
}

.icon-action-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
}

/* Make icon-only form submit buttons match <a> icon links (size/spacing) */
button.icon-action {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}

button.icon-action:hover {
    color: inherit;
    text-decoration: none;
}

/* badge-details (tooltip for dates on order-cards */
.badge-container {
    position: relative;
}

.badge-details {
    top: 50%; /* Center align vertically with the badge */
    left: -10px; /* Position to the left of the badge */
    transform: translate(-100%, -50%); /* Adjust for centering and alignment */
    z-index: 1050; /* Ensure it appears above other elements */
    white-space: nowrap; /* Prevent text wrapping */
    display: none; /* Initially hidden */
}

    .badge-details.d-none {
        display: none; /* Hide when the class is present */
    }

    .badge-details:not(.d-none) {
        display: block; /* Show when the class is removed */
    }

    .badge-details::before {
        content: '';
        position: absolute;
        top: 50%; /* Center align the arrow vertically */
        right: -5px; /* Position the arrow on the right side of the tooltip */
        transform: translateY(-50%); /* Adjust for centering */
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #f8f9fa; /* Arrow pointing left */
    }


/* Order Cards */
.order-card {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    font-size: 0.9rem;
    padding: 2px;
}

.orders-toolbar-search-wrap {
    flex: 1 1 24rem;
    min-width: 22rem;
}

.exports-toolbar-row {
    column-gap: 0.25rem;
    row-gap: 0;
}

.exports-toolbar-row .btn {
    margin-bottom: 0;
}

.orders-search-shell {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    background-color: #fff;
    overflow: hidden;
    flex-wrap: nowrap;
}

.orders-search-pills {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 0.1rem 0.15rem;
    min-height: calc(1.5em + .1rem + 1px);
}

.orders-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 1 auto;
    max-width: 11rem;
    border: 1px solid #304F7F;
    background-color: #304F7F;
    color: #fff;
    border-radius: 5px;
    padding: 0.18rem 0.18rem;
    font-size: 0.7rem;
    line-height: 1.60;
    white-space: nowrap;
}

.orders-filter-pill:hover {
    background-color: #dee2e6;
    color: #106eea;
}

.orders-filter-pill-value {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-search-input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: calc(1.5em + .15rem);
    box-shadow: none !important;
    padding: 0.1rem 0.25rem;
}

.orders-search-reset {
    flex: 0 0 auto;
    white-space: nowrap;
}

.orders-search-input:focus {
    box-shadow: none;
}

.orders-table-truncate {
    display: inline-block;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 576px) {
    .orders-toolbar-search-wrap {
        flex-basis: 100%;
        min-width: 100%;
    }

    .orders-search-pills {
        padding: 0.08rem 0.2rem;
    }

    .orders-filter-pill {
        max-width: 8rem;
        font-size: 0.68rem;
        padding: 0.12rem 0.16rem;
    }

    .orders-search-input {
        min-width: 0;
    }

    .orders-search-reset {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

@media (max-width: 1200px) {
    .orders-table-truncate {
        max-width: 12ch;
    }
}

.orders-skeleton-row td,
.orders-skeleton-card {
    pointer-events: none;
}

.orders-skeleton-line {
    display: block;
    width: 100%;
    height: 0.95rem;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #eef2f6 25%, #dde5ee 37%, #eef2f6 63%);
    background-size: 400% 100%;
    animation: orders-shimmer 1.25s ease-in-out infinite;
}

.orders-skeleton-line-xs {
    width: 1.5rem;
}

.orders-skeleton-line-sm {
    width: 60%;
}

.orders-skeleton-line-md {
    width: 75%;
}

@keyframes orders-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}



/* SignalR Notifications*/
/* Toast Notifications (in-app) */
.notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px; /* was 360px make it larger to fit the In Stock and Pending Status Text*/
    max-width: calc(100vw - 40px); /* keep it responsive on small screens */
    z-index: 1100;
}
    .notifications-container a {
        color: #304f7f;
        text-decoration: none; /* Removes underline, optional */
    }

    .notifications-container .notification-item {
        background-color: #ffffff;
        border: 1px solid #ccc;
        border-left: 5px solid #304f7f;
        border-radius: 4px;
        padding: 12px 16px;
        margin-bottom: 8px;
        width: 100%; /* fill container width */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .notifications-container .notification-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .notifications-container .notification-header h6 {
            margin: 0;
            font-size: 16px;
        }

        .notifications-container .notification-header button {
            background: none;
            border: none;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }

    .notifications-container .notification-item p {
        margin: 8px 0;
        font-size: 14px;
    }

    .notifications-container .notification-timestamp {
        font-size: 12px;
        color: #888;
    }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Styles for nested dropdowns (Used by Filter dropdown in Orders 16/APR/25) */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -0.125rem;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

#filterForm .btn,
#filterForm .dropdown {
    vertical-align: middle;
}

.input-group.border-secondary {
    border-width: 1px; /* Adjust as needed */
}

    .input-group.border-secondary:hover {
        border-color: #6c757d; /* Adjust to desired hover color */
    }

.form-control:focus {
    box-shadow: none;
}

/* Always show scrollbar (prevents modal from shifting navbar (need another workaround as this shifts the body container left + looks weird)
html {
    overflow-y: scroll;
}
*/

.container { /* VERY IMPORTANT MAKES THE BODY CONTENT OF THE SITE WIDER add width:95% to make it very wide! */
    padding-right: 0;
    padding-left: 0;
    max-width: 90%;
}

/* Base font size for active-filters */
.active-filters {
    font-size: 0.9rem; /* Slightly smaller base font size */
    color:#34568b;
}

.badge-custom-font {
    font-size: 0.8rem; /* Adjust the value as needed */
}

/* Styles for Headings that sit above the table menu of the Views that have tables with menus */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .header-container h2 {
        margin: 0;
    }

.responsive-h2 {
    font-size: 1.5rem; /* Default font size */
    text-align: end;
    transition:all 0.2s ease;
}

@media (max-width: 1200px) {
    .responsive-h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 992px) {
    .responsive-h2 {
        font-size: 1.25rem;
    }
}

.responsive-h3 {
    font-size: 2rem; /* Default font size */
    text-align: start;
    transition: all 0.2s ease;
}

@media (max-width: 1200px) {
    .responsive-h3 {
        font-size: 1.75rem;
    }
}

@media (max-width: 992px) {
    .responsive-h3 {
        font-size: 1.5rem;
    }
}

.filter-item {
    display: inline-block;
    background-color: #34568b; /* Bootstrap's secondary color */
    color: #fff;
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    font-size: 0.8rem; /* Adjust as needed */
}

    .filter-item a {
        color: #fff;
    }

        .filter-item a:hover {
            text-decoration: none;
        }

/* On small screens, reduce font size further */
@media (max-width: 576px) {
    .active-filters {
        font-size: 0.7rem;
    }

    .filter-item {
        font-size: 0.7rem;
    }
}

.sorted-column a {
    color: #0d6efd; /* Bootstrap primary color */
    font-weight: bold;
}

    .sorted-column a .bi {
        margin-left: 5px;
    }

.dropdown-menu-scrollable {
    max-height: 300px; /* Adjust the height as needed */
    overflow-y: auto;
}


/* Background images for each tab */
.bg-air-freight {
    background-image: url('/img/bg-airfreight1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;

}

.bg-ocean-freight {
    background-image: url('/img/bg-seafreight1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.bg-road-freight {
    background-image: url('/img/bg-roadfreight1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.bg-rail-freight {
    background-image: url('/img/bg-railfreight1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.bg-multi-modal {
    background-image: url('/img/bg-multimodal1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.alma-text {
    color: #304f7f;
}

/* Utility class: apply AL-MA brand color to text or icons
   Use this on any element or icon to force the brand color. */
.text-alma {
    color: #304f7f !important;
}

/* Ensure common icon elements inherit the text color when this class is applied
   (Bootstrap icons are fonts; SVGs should use fill="currentColor" to pick this up). */
.text-alma i,
.text-alma .bi,
.text-alma .bx,
.text-alma svg {
    color: inherit;
    fill: currentColor;
}

.small-bold-text {
    font-size: 0.875em; /* Adjust the size as needed */
    font-weight: bold;
}
@media (max-width: 1200px) {
    .small-bold-text {
        font-size: 0.8em; /* Adjust size for large screens */
    }
}

@media (max-width: 992px) {
    .small-bold-text {
        font-size: 0.7em; /* Adjust size for medium screens */
    }
}

@media (max-width: 768px) {
    .small-bold-text {
        font-size: 0.65em; /* Adjust size for small screens */
    }
}

@media (max-width: 576px) {
    .small-bold-text {
        font-size: 0.6em; /* Adjust size for extra small screens */
    }
}

.small-card {
    font-size: 0.8rem; /* Smaller text size */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

    .small-card .card-header h5 {
        font-size: 1rem; /* Smaller header text */
    }

    .small-card .small-text {
        font-size: 0.8rem; /* Smaller client name text */
    }

.order-row {
    margin-bottom: 0.5rem; /* Space between rows */
}

    .order-row div {
        margin-bottom: 0.2rem; /* Space between items in a row */
    }



/*------------Google Map Div on Supplier Details--------------*/
#googlemap {
    height: 480px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*-----------------------------------------------------------*/

/*-------------------------------------------------------------
# CUSTOM SELECT2 FORM-CONTROL (to match rest of form controls)
--------------------------------------------------------------*/
.select2-container .select2-selection--single {
    height: 100% !important;
    padding: 0.375rem 0.10rem !important; /* Adjust padding to match other form controls */
    border: 1px solid #ced4da !important; /* Match border style */
    border-radius: 0.25rem !important; /* Match border radius */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 1.1rem !important; /* Adjust padding-top to move the placeholder text lower */
    line-height: 1.5 !important; /* Adjust line height to match other form controls */
    color: black !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: black !important; /* Set the placeholder text color to black */
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left;
}

/*--------------------------------------------------------------*/


/*------------------ Export Details Styles ----------------------*/
.export-co-textarea {
    width: 100%;
    /* dynamic height: JS will size to content */
    min-height: 128px;
    max-height: 600px;
    border: none;
    resize: none;
    line-height: 1.1;
    padding: 0.25rem 0.25rem 0.25rem 0; /* remove left padding to align with dd text */
    box-sizing: border-box;
    overflow: hidden;
}

.export-client-details {
    line-height: 1.1;
    font-size: 0.95rem;
}

.export-client-details h6 {
    font-weight: 600; /* match label weight */
    font-size: 1rem; /* slightly larger to match Sent To */
    margin-bottom: 0.4rem;
}

.export-client-details > div { margin-bottom: 0.12rem; }

.admin-audit {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap; /* allow wrap to second row on small viewports */
    justify-content: flex-start;
    align-items: center;
    font-size: 0.85rem;
}

.admin-audit .item { white-space: nowrap; flex: 0 1 auto; }

/* Tighten the separator between exporter/sent-to and details block */
.export-header-separator { border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 0.15rem; margin-bottom: 0.25rem; }

/* Responsive table font scaling */
table.small-font-table { font-size: 0.95rem; }
@media (max-width: 1200px) {
    table.small-font-table { font-size: 0.9rem; }
}
@media (max-width: 992px) {
    table.small-font-table { font-size: 0.85rem; }
}
@media (max-width: 768px) {
    table.small-font-table { font-size: 0.8rem; }
}
@media (max-width: 576px) {
    table.small-font-table { font-size: 0.75rem; }
    .admin-audit .item { flex: 0 0 50%; white-space: normal; }
    .export-client-details h6 { font-size: 0.95rem; }
}

/* Audit field styling for Suppliers Details (privileged roles) */
.audit-dt { font-size: 0.85rem; line-height: 1; margin-bottom: 0; }
.audit-dd { font-size: 0.85rem; line-height: 1.05; margin-bottom: 0.25rem; }

/*--------------------------------------------------------------*/

/*------------------Table Loading Animation----------------------*/
.table-container {
    position: relative;
}

.table-container.table-loading {
    overflow: hidden;
}

.table-container.table-loading .table,
.table-container.table-loading .table-responsive,
.table-container.table-loading .d-none.d-md-block {
    visibility: hidden;
}

.loading-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/*--------------------------------------------------------------*/

.small-font-table {             /* Customize table font size when table_custom not used (proformas / packing lists etc) */
    font-size: 0.9em; 
}

.upper-right-corner {           /* Used in Model Details View to hold Model.Id in top right of the card */
    position: absolute;
    top: 2px;
    right: 8px;
    background-color: none;
    padding: 5px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #333;
    font-size: 9px;
}

.instock-text-box {
    display:inline-block;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border: none;
    border-radius: 5px;
    margin-left: 20px;
    margin-bottom:6px;
    font-size: 0.9em;
    font-weight:600;
    color: white;
}

.nowrap {                       /* Used in <th class="nowrap" to keep bi-chevron-expand in line with column headers */
    white-space: nowrap;
}

/* Editor drop target visual feedback (used by AES compose modal and PreAlert) */
.editor-wrapper { position: relative; display: block; width: 100%; min-height: 240px; box-sizing: border-box; }
.card-body .editor-wrapper { padding: .75rem; }
.editor-wrapper.dragging { outline: 3px dashed rgba(13,110,253,0.95); border-radius: .375rem; box-shadow: 0 6px 18px rgba(13,110,253,0.08); }
.editor-wrapper.dragging #emailEditor { opacity: .28; filter: blur(2px); transition: opacity .12s ease, filter .12s ease; }
.drop-hint { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.72); border: 3px dashed rgba(13,110,253,0.95); border-radius: .375rem; pointer-events: none; font-weight: 700; color: #0b3d91; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 0 rgba(255,255,255,.9); padding: 1rem; z-index: 2000; }
.drop-hint.show { display: flex; }

/* Ensure the editable area is behind the drop hint overlay */
#emailEditor, .form-control[contenteditable="true"] { position: relative; z-index: 1; }

/* Ensure compose modal body scrolls when content is tall so footer remains accessible */
#composeExportsModal .modal-body {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/* Make the card-body a positioning context so dropHint (now a child) can cover the whole card body */
#composeExportsModal .card-body {
    position: relative;
}

.reduced-footer {
    padding: 0;
    margin: 0;
    text-align: right;
    background-color: #e7ecef;
}

    .reduced-footer th {
        padding: 2px 30px 2px 0; /* Top, Right, Bottom, Left */
        margin: 0;
        line-height: 1.4;
    }

    .reduced-footer tr {
        border-bottom-style: none !important;
    }

    .reduced-footer td {
        border-bottom-style: none !important;
        padding: 2px;
    }

    .reduced-footer .inner-table {
        width: 100%;
        text-align: right;
    }

        .reduced-footer .inner-table tr {
            border-bottom-style: none !important;
        }


/* Hide the element by default */
.print-only {
    display: none;
}

/* Show the element only when printing */
@media print {
    .print-only {
        display: block;
    }
}

/* Hide the expand icon when printing */
@media print {
    .bi-chevron-expand {   
        display: none;
    }
}


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

.me-2 {
    margin-right: 0.5rem;
}

.me-3 {
    margin-left: 1rem;
    margin-top: -37px;
}

.ohnohoney {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.g-recaptcha {
    margin-bottom:8px;
}


.logo-img-container {
    width: 80px; /*width of your image*/
    height: 80px; /*height of your image*/
    background-image: url('../img/alma-stamp-vector.svg');
    background-size: contain;
    display: block;
    margin: auto;
    padding: 0;
}

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

.pagination-sm {
    margin-top: 30px;
}

.pagination-active-page {
    background-color: #304f7f;
    border-color: #304f7f;
    color: #fff;
}

    .pagination-active-page:hover {
        background-color: #106eea;
        color: #fff
    }

.link-alma {
    color:black;
}

    .link-alma:hover {
        color: #106eea;
    }

.btn-alma {
    background-color: #304f7f;
    border-color: #304f7f;
    color: #fff;
}

    .btn-alma:hover {
        background-color: #3E6DB5;
        color: #fff
    }

    .btn-alma:before {
        border-color: #3b8af2;
        background-color: #304f7f;
    }
    .btn-alma:active {
        background-color: #304f7f;
    }

.btn-alma-secondary {
    background-color: #8B9EB0;
    border-color: #8B9EB0;
    color: #fff;
}
    .btn.btn-alma-secondary:hover {
        background-color: #878D93;
        color: #fff;
    }
    .btn-alma-secondary:before {
        border-color: #3b8af2;
    }

.btn-outline-alma {
    background-color: transparent; /* Transparent background */
    color: #304f7f; /* Text color */
    border: 1px solid #304f7f; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 8px 16px; /* Adjust padding for a balanced look */
    font-size: 14px; /* Adjust font size */
    text-align: center; /* Center-align text */
    text-decoration: none; /* Remove underline for links */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

    .btn-outline-alma:hover {
        background-color: #304f7f; /* Add background color on hover */
        color: white; /* Change text color on hover */
        border-color: #304f7f; /* Keep the border consistent */
    }

.btn-light {
    border-color: #ced4da;
}

    .btn-light:hover {
        border-color: #ced4da;
        background-color: #ced4da;
    }

/* Compact attachment preview styling for compose modal */
.attachment-preview-grid {
    font-size: 0.85rem; /* smaller text */
    padding: 0;
    margin: 0;
}

.attachment-preview-grid .attachment-card {
    padding: 4px !important;
    margin-bottom: 4px !important;
    border-radius: 4px;
    font-size: 0.85rem;
}

.attachment-preview-grid .attachment-card .btn {
    padding: 0.18rem 0.35rem !important;
    font-size: 0.75rem !important;
}

.attachment-preview-grid .attachment-card div { margin-right: 6px; }

/*--------------------------------------------------------------
# Custom Bootstrap-like button variants (CSS-only, Bootstrap 5.2)
# Usage: class="btn btn-gold" or class="btn btn-outline-gold"
# Add new colors by defining:
#   .btn-mycolor { --btn-base: #xxxxxx; --btn-text: #fff; }
#   .btn-outline-mycolor { --btn-base: #xxxxxx; }
--------------------------------------------------------------*/

/* Filled variant base (uses --btn-base + optional overrides) */
.btn-gold,
.btn-cerulean,
.btn-serenity,
.btn-teal {
    --btn-base: #0d6efd;
    --btn-text: #fff;

    /* Derived colors (can be overridden per button) */
    --btn-hover: color-mix(in srgb, var(--btn-base) 90%, #000);
    --btn-active: color-mix(in srgb, var(--btn-base) 82%, #000);
    --btn-focus-shadow: 0 0 0 .25rem color-mix(in srgb, var(--btn-base) 35%, transparent);
    --btn-border: color-mix(in srgb, var(--btn-base) 85%, #000);

    color: var(--btn-text);
    background-color: var(--btn-base);
    border-color: var(--btn-border);
    box-shadow: none;
    background-image: none;
    transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.btn-gold:hover,
.btn-cerulean:hover,
.btn-serenity:hover,
.btn-teal:hover {
    color: var(--btn-text);
    background-color: var(--btn-hover);
    border-color: color-mix(in srgb, var(--btn-hover) 85%, #000);
    box-shadow: none;
}

.btn-gold:focus,
.btn-cerulean:focus,
.btn-serenity:focus,
.btn-teal:focus {
    box-shadow: var(--btn-focus-shadow);
}

.btn-gold:active,
.btn-cerulean:active,
.btn-serenity:active,
.btn-teal:active,
.btn-gold.active,
.btn-cerulean.active,
.btn-serenity.active,
.btn-teal.active,
.show > .btn-gold.dropdown-toggle,
.show > .btn-cerulean.dropdown-toggle,
.show > .btn-serenity.dropdown-toggle,
.show > .btn-teal.dropdown-toggle {
    color: var(--btn-text);
    background-color: var(--btn-active);
    border-color: color-mix(in srgb, var(--btn-active) 85%, #000);
    box-shadow: none;
}

.btn-gold:disabled,
.btn-cerulean:disabled,
.btn-serenity:disabled,
.btn-teal:disabled,
.btn-gold.disabled,
.btn-cerulean.disabled,
.btn-serenity.disabled,
.btn-teal.disabled {
    opacity: .65;
    box-shadow: none;
}

/* Outline variant base */
.btn-outline-gold,
.btn-outline-cerulean,
.btn-outline-serenity,
.btn-outline-teal {
    --btn-base: #0d6efd;
    --btn-text: var(--btn-base);

    --btn-hover: var(--btn-base);
    /* Default hover text: choose black or white based on base brightness */
    --btn-hover-text: color-contrast(var(--btn-base) vs #000, #fff);
    --btn-active: color-mix(in srgb, var(--btn-base) 75%, #000);
    --btn-focus-shadow: 0 0 0 .25rem color-mix(in srgb, var(--btn-base) 35%, transparent);

    color: var(--btn-text);
    background-color: transparent;
    border-color: var(--btn-base);
    box-shadow: none;
    transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.btn-outline-gold:hover,
.btn-outline-cerulean:hover,
.btn-outline-serenity:hover {
    color: var(--btn-hover-text);
    background-color: var(--btn-hover);
    border-color: color-mix(in srgb, var(--btn-hover) 85%, #000);
    box-shadow: none;
    background-image: none;
}

.btn-outline-teal:hover {
    color: var(--btn-hover-text);
    background-color: var(--btn-hover);
    border-color: color-mix(in srgb, var(--btn-hover) 85%, #000);
    box-shadow: none;
    background-image: none;
}

.btn-outline-gold:focus,
.btn-outline-cerulean:focus,
.btn-outline-serenity:focus {
    box-shadow: var(--btn-focus-shadow);
}

.btn-outline-gold:active,
.btn-outline-cerulean:active,
.btn-outline-serenity:active,
.btn-outline-teal:active,
.btn-outline-gold.active,
.btn-outline-cerulean.active,
.btn-outline-serenity.active,
.btn-outline-teal.active,
.show > .btn-outline-gold.dropdown-toggle,
.show > .btn-outline-cerulean.dropdown-toggle,
.show > .btn-outline-serenity.dropdown-toggle,
.show > .btn-outline-teal.dropdown-toggle {
    color: var(--btn-hover-text);
    background-color: var(--btn-active);
    border-color: color-mix(in srgb, var(--btn-active) 85%, #000);
    box-shadow: none;
}

.btn-outline-gold:disabled,
.btn-outline-cerulean:disabled,
.btn-outline-serenity:disabled,
.btn-outline-gold.disabled,
.btn-outline-cerulean.disabled,
.btn-outline-serenity.disabled {
    opacity: .65;
}

/* Theme assignments */
.btn-gold { --btn-base: #ba9645; --btn-text: #fff; }
.btn-outline-gold { --btn-base: #ba9645; }

.btn-cerulean { --btn-base: #98b4d4; --btn-text: #000; }
.btn-outline-cerulean { --btn-base: #98b4d4; --btn-hover-text: #000; }

.btn-ochre { 
    --btn-base: #D6D1C9; 
    --btn-text: #000; 
}
.btn-outline-ochre { 
    --btn-base: #D6D1C9; 
    --btn-hover-text: #000; 
}

.btn-teal { --btn-base: #9EBC9F; --btn-text: #000; }
.btn-outline-teal { --btn-base: #9EBC9F; --btn-hover-text: #000; }

.btn-serenity {
    --btn-base: #306AC0;
    --btn-text: #fff;
}

.btn-outline-serenity {
    --btn-base: #306AC0;
    --btn-hover-text: #fff;
}

/* ClientVessels dropdown */
.btn-clientvessels.dropdown-toggle {
    background-color: #304f7f; /* Secondary button color */
    color: white; /* White text */
    padding: 10px 20px; /* Padding */
    font-size: 16px; /* Font size */
    border: none; /* Remove borders */
    cursor: pointer; /* Pointer/hand icon */
    border-radius: 5px; /* Rounded corners */
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none; /* Remove default dropdown arrow in Safari */
    -moz-appearance: none; /* Remove default dropdown arrow in Firefox */
    text-align: left; /* Align text to the left */
}

    .btn-clientvessels.dropdown-toggle option {
        text-align: left; /* Align text to the left in options */
        background-color: white;
        color: black;
    }

    .btn-clientvessels.dropdown-toggle:focus {
        outline: none; /* Remove outline on focus */
    }

    .btn-clientvessels.dropdown-toggle::after {
        content: '▼'; /* Add custom arrow */
        padding-left: 10px;
        font-size: 12px;
        color: white;
    }


/* Login Button on Homepage*/
.btn-get-started-login {
    margin-left: 10px;
    background-color: #304f7f; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px;
    border-radius: 4px;
    transition: 0.5s;
    color: #fff;
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Pointer cursor */
}


/* The close button */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

    /* When moving the mouse over the close button */
    .closebtn:hover {
        color: black;
    }

/* Custom Login Button on HeaderPartial*/
.btn-login {
    background-color: #e9ecef; /* Match the menu button background */
    color: black; /* Text color */
    border: none; /* Remove border */
    border-radius: 20px; /* Make it rounder */
    height: 40px; /* Match the height of the menu button */
    padding: 0 20px; /* Add horizontal padding for text and icon */
    font-size: 14px; /* Adjust font size */
    display: inline-flex; /* Ensure proper alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    transition: all 0.2s ease, transform 0.2s ease; /* Smooth hover effect */
    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Pointer cursor */
}


    .btn-login:hover {
        background-color: #304f7f; /* Match hover color of the menu button */
        color: white; /* Change text color on hover */
    }

    .btn-login i {
        font-size: 16px; /* Adjust icon size */
        margin-right: 4px; /* Add spacing between icon and text */
    }

/* AES Notifications table tweaks */
.aes-table {
    font-size: 0.9rem;
}

.aes-table td, .aes-table th {
    white-space: nowrap;
}

@media (max-width: 992px) {
    .aes-table {
        font-size: 0.85rem;
    }
    .aes-table td, .aes-table th {
        padding: .35rem .4rem;
    }
}

@media (max-width: 576px) {
    .aes-table {
        font-size: 0.78rem;
    }
    .aes-table td, .aes-table th {
        padding: .25rem .3rem;
    }
}

@media (max-width: 768px) {
    .btn-login {
        height: 32px; /* Match the height of the menu button */
        padding: 0 10px; /* Add horizontal padding for text and icon */
        font-size: 12px; /* Adjust font size */
    }
}


.table_custom {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    outline: solid 1px rgb(186, 197, 215);
    border-radius: 5px;
    /* Fluid base size with sensible limits, then fine-tuned by media queries below */
    font-size: clamp(0.75rem, 0.8vw + 0.2rem, 13px); /* ~12-13px on large screens, scales down */
    line-height: 1.35;
    transition: font-size 0.18s ease, padding 0.18s ease;
}

    /* row cells inherit table font-size but you can target them specifically */
    .table_custom td,
    .table_custom th {
        /* vertical horizontal */
        padding: 6px 4px; /* default: comfortable vertical, 4px left/right for large screens */
        vertical-align: middle;
        font-size: inherit;
    }

        /* links / hover */
        .table_custom td a {
            color: black;
        }

            .table_custom td a:hover {
                color: #106eea;
            }

        /* action column alignment stays */
        .table_custom th[data-column-name="Actions"] {
            text-align: right;
        }

    /* Button sizes inside table (scale with media queries below) */
    .table_custom .btn-alma,
    .table_custom .btn-alma-secondary,
    .table_custom .btn-danger {
        font-size: 0.86rem; /* default for desktop/tablet */
    }

/* Gradual shrink steps before the mobile card breakpoint (d-md-none) */
/* Large desktop - keep near 13px */
@media (min-width: 1201px) {
    .table_custom {
        font-size: 13px;
    }
}

/* Wide laptop / desktop -> slight reduction */
@media (max-width: 1200px) {
    .table_custom {
        font-size: 12px;
    }

        .table_custom td, .table_custom th {
            padding: 5px 4px;
        }

        .table_custom .btn-alma,
        .table_custom .btn-alma-secondary,
        .table_custom .btn-danger {
            font-size: 0.82rem;
        }
}

/* Typical tablet widths */
@media (max-width: 1024px) {
    .table_custom {
        font-size: 11px;
    }

        .table_custom td, .table_custom th {
            padding: 5px 3px;
        }

        .table_custom .btn-alma,
        .table_custom .btn-alma-secondary,
        .table_custom .btn-danger {
            font-size: 0.78rem;
        }
}

/* Narrow tablet / small laptop */
@media (max-width: 992px) {
    .table_custom {
        font-size: 10px;
    }

        .table_custom td, .table_custom th {
            padding: 4px 3px;
        }

        .table_custom .btn-alma,
        .table_custom .btn-alma-secondary,
        .table_custom .btn-danger {
            font-size: 0.74rem;
        }
}

/* Approaching md breakpoint where you switch to cards; keep readable but small */
@media (max-width: 768px) {
    .table_custom {
        font-size: 9px;
    }

        .table_custom td, .table_custom th {
            padding: 3px 2px;
        }

        .table_custom .btn-alma,
        .table_custom .btn-alma-secondary,
        .table_custom .btn-danger {
            font-size: 0.70rem;
        }
}

/* Small phones */
@media (max-width: 576px) {
    .table_custom {
        font-size: 8px;
    }

        .table_custom td, .table_custom th {
            padding: 3px 2px;
        }

        .table_custom .btn-alma,
        .table_custom .btn-alma-secondary,
        .table_custom .btn-danger {
            font-size: 0.64rem;
        }
}

/* Extra small / very narrow */
@media (max-width: 440px) {
    .table_custom {
        font-size: 7px;
    }

        .table_custom td, .table_custom th {
            padding: 2px 2px;
        }

        .table_custom .btn-alma,
        .table_custom .btn-alma-secondary,
        .table_custom .btn-danger {
            font-size: 0.60rem;
        }
}

/* Optional: prevent icons/buttons from wrapping and keep rows compact */
.table_custom td .bi,
.table_custom td .btn,
.table_custom td a {
    white-space: nowrap;
}


.thead_custom {
    background-color: #e9ecef; /* yellow:#F7B801 , Medium Carmine(red):#B0413E, gold:#CCA43B */
    color: black;
    line-height: 2;
    border-bottom: solid 2px #304f7f;
}
.thead_custom a {
    color:black;
}

#ordersDesktopTable {
    min-width: 100%;
}

    .thead_custom a:hover {
        color: #106eea;
    }

.table tfoot tr {
    border-bottom: solid 2px #304f7f;
}


.badge {
    background-color: #304f7f;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    margin: 2px 2px 2px 2px;
    
}

.badge-light {
    background-color: #3b8af2;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    margin: 2px 2px 2px 2px;
}

.badge-green {
    background-color: green;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    margin: 2px 2px 2px 2px;
}

.badge-dark {
    background-color: #444444;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    margin: 2px 2px 2px 2px;
}

/* Custom badge with transparent background, solid border, and black text */
.badge-transparent {
    background-color: transparent; /* Transparent background */
    color: black; /* Black text */
    border: 1px solid #304f7f; 
    padding: 4px 4px; /* Same padding as original badges */
    text-align: center;
    border-radius: 5px; /* Same border radius as original badges */
    margin: 2px; /* Same margin as original badges */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

    .badge-transparent:hover {
        background-color: #304f7f; /* Black background on hover */
        color: white; /* White text on hover */
        border-color: #304f7f; /* Keep the border black */
    }

    /* Static badge with no hover effect */
.badge-static {
    background-color: #f6f6f6; /* Use your website's primary color */
    color: black; /* White text */
    border: 1px solid #999; /* Match the background color */
    padding: 4px 4px; /* Same padding as other badges */
    text-align: center;
    border-radius: 5px; /* Rounded corners */
    margin: 2px; /* Add some spacing */
    cursor: default; /* Prevent pointer cursor */
    transition: none; /* Disable hover transitions */
}

    .badge-static:hover {
        background-color: #eee; /* Keep the same background color */
        color: black; /* Keep the same text color */
        border-color: #999; /* Keep the same border color */
    }

.input-group .form-control {
    margin: 0px !important; 
}


/*Fixes wrong height of buttons in input group*/
.input-group .btn {
    margin: 0px !important;

}


.input-validation-error {
    border-color: red;
}

/* ---------- COOKIE CONSENT STYLES START ----------- */

/* Container */
.cookieconsent {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    z-index: 9;
}

/* Banner */
.alert-custom-cookieconsent {
    /* Positioning & box model */
    background-color: #fff;
    border-top: 3px solid #304f7f;
    border-radius: 0;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
    margin: 0;
    padding-left:60px;
    padding-right:60px;
    /* Typography */
    color: #304f7f;
    font-size: 1rem;
    line-height: 1.4;
    /* Transitions */
    transition: padding 0.3s ease-out, font-size 0.3s ease-out;
}

    /* Headings & button inside banner */
    .alert-custom-cookieconsent h4,
    .alert-custom-cookieconsent h6 {
        transition: font-size 0.3s ease-out;
    }

    .alert-custom-cookieconsent .btn {
        transition: font-size 0.3s ease-out, padding 0.3s ease-out;
    }

/* Accept button specifics */
.consentbtn {
    width: 200px;
    color: #304f7f;
    border:2px solid #304f7f;
}

/* Fade-down animation */
@keyframes slideDown {
    from {
        transform: translateY(0); /* Start at the current position */
    }

    to {
        transform: translateY(100vh); /* Move all the way to the bottom of the viewport */
    }
}

.slide-down-out {
    animation: slideDown 3s ease-out forwards;
}

/* Responsive adjustments under 768px */
@media (max-width: 767.98px) {
    .alert-custom-cookieconsent {
        padding-left:20px;
        padding-right:20px;
        font-size: 0.85rem;
    }

        .alert-custom-cookieconsent h4 {
            font-size: 1.1rem;
        }

        .alert-custom-cookieconsent h6 {
            font-size: 0.95rem;
        }

        .alert-custom-cookieconsent .btn {
            font-size: 0.9rem;
            padding: 0.35rem 0.75rem;
        }
}

/* ---------- COOKIE CONSENT STYLES END ----------- */


.boxshadow {
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    border: 3px solid #34568b;
}

.boxshadowdiv {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.centerdiv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftdiv {
    display: flex;
    align-items: flex-start;
    justify-content: left;
}

.containerwide {
    margin-top: -50px;
    margin-bottom: 40px;
    padding-right: 0;
    padding-left: 0;
    max-width: 100%
}

.form-floating {
    padding-bottom: 10px;
}

.padded {
    padding-bottom: 10px;
}

.btn {
    margin-bottom: 5px;
}

    .btn:focus {
        outline: none;
        box-shadow: none;
    }

.btn-logout {
    margin-left: 5px;
    margin-right: -1px;
    font-size: 14px;
    padding: 6px 12px 6px 12px;
}


.buttonlinklogout {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: #069;
    cursor: pointer;
}

    .buttonlinklogout:hover {
        text-decoration: underline;
    }

#map-container {
    position: relative;
    width: 100%;
    height: 85%;
    left: 0;
    bottom: 8px;
    z-index: 0;
    margin-top: 8px;
    min-height: 180px
}

#map {
    width: 100%;
    height: 100%
}

.weatherwidget {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    pointer-events: none;
    right: -30px;
    top: -80px;
    z-index: 6;
    transition: all 0.4s;
    width: 320px;
    height: 10px;
}

    .weatherwidget.active {
        visibility: visible;
        opacity: 1;
    }

    /* Do not display weather widget on smaller screens */
    @media (max-width: 768px) {
        .weatherwidget {
            display: none;
        }
    }

/*----------- Masonry Container - VesselOrdersOverview ---------*/
.masonry-container {
    column-count: 4; /* Adjust the number of columns */
    column-gap: 1rem; /* Adjust the gap between columns */
}

.masonry-item {
    background: white;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem; /* Adjust the margin */
    break-inside: avoid; /* Prevent items from breaking inside columns */
    transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
}

    .masonry-item:hover {
        transform: scale(1.15); /* Enlarge the card slightly on hover */
        z-index: 1; /* Ensure the hovered card appears above others */
    }

.card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure the card takes full height of the flex item */
}

.card-body {
    flex-grow: 1; /* Allow the body to grow and take available space */
}

@media (max-width: 992px) {
    .masonry-container {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .masonry-container {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .masonry-container {
        column-count: 1;
    }
}


/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Header and Topbar fixed to the top (wrap both partials in _LayoutPartial 
# RenderBody will need padding-top: 140px for homepage.
--------------------------------------------------------------*/
#header-container {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 998;
    transition: transform 0.5s ease-in-out;
}

.hidden {
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}


/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
    background: #34568B;
    height: 28px;
    font-size: 12px;
    transition: height 0.2s ease;
    color: #fff;
    padding: 0;
    overflow:hidden;
}

    #topbar .contact-info i {
        font-style: normal;
        color: #fff;
    }

        #topbar .contact-info i a,
        #topbar .contact-info i span {
            padding-left: 4px;
            color: #fff;
        }

        #topbar .contact-info i a {
            line-height: 0;
            transition: 0.3s;
            transition: 0.3s;
        }

            #topbar .contact-info i a:hover {
                color: #fff;
                text-decoration: underline;
            }

    #topbar .social-links a {
        color: rgba(255, 255, 255, 0.7);
        line-height: 0;
        transition: 0.3s;
        margin-left: 20px;
        font-size: 13px;
    }

        #topbar .social-links a:hover {
            color: white;
        }

@media (max-width: 768px) {
    #topbar {
        transition: height 0.3s ease;
        height: 0px;
    }
}

@media (min-width: 768px) {
    #topbar {
        transition: height 0.2s ease;
        overflow: visible;
    }
}



@media (min-width: 768px) {
    #topbar .social-links {
        position: static; /* Restore default positioning for larger viewports */
        transform: none;
    }
}

#topbar .contact-info {
    display: none; /* Hide for small viewports */
}

@media (min-width: 768px) {
    #topbar .contact-info {
        display: flex; /* Restore for larger viewports */
    }
}

    .hidden { /* Used to hide the top and header bar when scrolling */
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
    #header {
        position: sticky;
        top: 0;
        z-index: 997;
        background: #fff;
        height: 72px; /* Default height */
        box-shadow: 0px 2px 6px -2px #0c074a;
        transition: all 0.3s ease-in-out;
    }

        #header .logo {
            font-size: 32px;
            margin: 0;
            padding: 0;
            line-height: 1;
            font-weight: 900;
            letter-spacing: 0.1px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-style: italic;
            background-color: #061a4f;
            background-image: linear-gradient(0deg, rgba(6,26,79,1) 0%, rgba(53,105,171,1) 100%);
            background-size: 100%;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -webkit-text-fill-color: transparent;
            -moz-text-fill-color: transparent;
            white-space: nowrap;
            transition: all 0.3s ease-in-out; /* Smooth transition for logo size */
        }


    @media (max-width: 768px) {
        #header {
            height: 60px;
            transition: all 0.3s ease-in-out;
        }

            #header .logo {
                font-size: 26px;
                transition: all 0.3s ease-in-out;
            }
    }

/* Header logo sizes */
#header .logo-wrap .logo-img {
    height: 22px;
    width: auto;
    display: block;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
    #header .logo-wrap .logo-img {
        height: 18px;
        transition: all 0.3s ease-in-out;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Header Navigation Icons */
.nav-icons {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}    

@media screen and (max-width: 768px) {
    .nav-icons {
        display: flex;
        gap: 5px;
        align-items: flex-end;
    }
}

    .menu-toggle {
        background-color: #e9ecef; /* Ensure no background by default */
        border: none; /* Remove default button border */
        border-radius: 50%; /* Make it round */
        width: 40px;
        height: 40px;
        transition: background-color 0.2s ease, transform 0.2s ease; /* Smooth hover effect */
        font-size: 24px;
        margin-left: 10px;
        cursor: pointer;
        color: black;
    }

        .menu-toggle:hover {
            background-color: #304f7f;
            color: white;
        }

    @media screen and (max-width: 768px) {
        .menu-toggle {
            font-size: 22px;
            width: 36px;
            height: 36px;
            transition: all 0.3s ease;
        }
    }

    .icon-button {
        position: relative;
        margin-left: 10px;
    }

        .icon-button .icon-link {
            text-decoration: none;
            color: black;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #e9ecef;
            border-radius: 50%;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

            .icon-button .icon-link:hover {
                background-color: #304f7f;
                color: white;
            }

    @media screen and (max-width: 768px) {
        .icon-button .icon-link {
            font-size: 22px;
            width: 34px;
            height: 34px;
            transition: all 0.3s ease;
        }
    }

@media screen and (max-width: 440px) {
    .icon-button .icon-link {
        display:none;
        transition: all 0.3s ease;
    }
}


    /* Notifications Badge */
    #notifBadge {
        position: absolute;
        top: 5px;
        right: 5px;
        transform: translate(50%, -50%);
        width: 18px;
        height: 18px;
        background-color: red;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 18px;
        font-size: 0.7rem;
        font-weight: normal;
        display: none; /* Show when there are notifications */
    }

    /* User Dropdown Panel */
    .user-dropdown {
        display: none;
        position: fixed;
        top: 100px;
        right: 10px;
        background-color: #304f7f;
        min-width: 320px;
        padding: 15px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border-radius: 10px;
        z-index: 2000; /* Increased z-index */
    }

        .user-dropdown.show {
            display: block;
        }

        .user-dropdown p {
            margin: 0 0 10px 0;
            font-size: 14px;
            color: #fff;
        }

    /* Actions Container */
    .user-actions {
        display: flex;
        gap: 10px; /* Space between buttons */
        margin-top: 15px; /* Space above the buttons */
        flex-wrap: nowrap;
    }

        .user-actions .manage-profile-button {
            display: inline-block;
            background-color: #007bff;
            color: #fff;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            white-space: nowrap; /* Prevent text from wrapping */
            flex-shrink: 0; /* Prevent button from shrinking */
        }

            .user-actions .manage-profile-button:hover {
                background-color: #0069d9;
            }

    .sign-out-button {
        background-color: #dc3545;
        color: #fff;
        padding: 8px 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }

        .sign-out-button:hover {
            background-color: #c82333;
        }

    .user-actions .sign-out-form {
        margin: 0;
    }


/* Custom Sliding Panel */
.custom-panel {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 300px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out; /* Smooth slide-in/out */
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

    .custom-panel.show {
        right: 0; /* Slide into view */
    }

.custom-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:10px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

    .custom-panel-header h5 {
        margin: 0;
        font-size: 18px;
        color: #304f7f;
    }

    .custom-panel-header .close-panel {
        background: none;
        border: none;
        font-size: 30px;
        cursor: pointer;
        color: #304f7f;
    }

.custom-panel-body {
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure the panel takes the full height */
}

    .custom-panel-body ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .custom-panel-body ul li {
            /* This gives more space up and down between menu links */
            margin: 6px; 
        }

            .custom-panel-body ul li a {
                display: block; /* Ensure the link takes up the full width and height of the parent */
                padding-left: 10px; /* Add padding directly to the link */
                padding-top: 6px;
                padding-bottom: 6px;
                text-decoration: none; /* Remove underline */
                color: #304f7f; /* Default text color */
                font-size: 16px; /* Adjust font size */
                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
                border-radius: 10px;
                border-bottom: 1px solid #ddd;
                display: flex; /* Align items horizontally */
                align-items: center; /* Vertically center items */
                gap: 8px; /* Add spacing between the icon and text */
            }

                .custom-panel-body ul li a i {
                    margin-right: 10px;
                    line-height: 1.2; /* Ensure consistent line height */
                    vertical-align: middle; /* Align icons vertically with text */
                    font-size: 20px; /* Ensure icons have a proper size */
                    color: inherit; /* Inherit text color */
                    display: inline-block; /* Ensure icons are displayed */
                }

                    /* Optional: Add specific styles for bx icons if needed */
                    .custom-panel-body ul li a i.bx {
                        font-size: 20px; /* Match the size of bi icons */
                    }

                .custom-panel-body ul li a:hover {
                    background-color: #304f7f; /* Hover and active background */
                    border-radius: 10px;
                    color: white; /* Hover and active text color */
                }
            
                /* Ensure proper alignment for dropdown links */
                .custom-panel-body ul li.dropdown > a {
                    display: flex; /* Align items horizontally */
                    align-items: center; /* Vertically center items */
                    gap: 8px; /* Add spacing between icon, text, and arrow */
                    text-decoration: none; /* Remove underline */
                    color: #304f7f; /* Inherit text color */
                }

                .custom-panel-body ul li.dropdown > a i {
                    font-size: 20px; /* Adjust icon size */
                }

                .custom-panel-body ul li.dropdown > a span {
                    flex-grow: 1; /* Ensure the text takes up available space */
                }


/* Custom Dropdown Styles for custom-panel */
.custom-panel .dropdown > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #304f7f;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .custom-panel .dropdown > a:hover,
    .custom-panel .dropdown.open > a {
        background-color: #304f7f; /* Hover and active background */
        color: white; /* Hover and active text color */
    }

.custom-panel .dropdown > ul {
    list-style: none;
    padding: 0 0 0 20px; /* Indentation for dropdown items */
    margin: 0;
    display: none; /* Initially hidden */
    background-color: transparent; /* No background for dropdown list */
}

    .custom-panel .dropdown > ul > li {
        padding: 0; /* Space between dropdown items */
    }

        .custom-panel .dropdown > ul > li a {
            color: #304f7f;
            text-decoration: none;
            font-size: 14px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

            .custom-panel .dropdown > ul > li a:hover {
                background-color: #304f7f; /* Hover background for dropdown items */
                color: white; /* Hover text color for dropdown items */
            }


.custom-panel .dropdown.open > ul {
    display: block; /* Show dropdown when open */
}



/* --- Custom Menu Icon Row for Logged in Users with roles */
.icon-row {
    display: flex;
    padding: 10px 5px 10px 5px;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
}

    .icon-row a {
        font-size: 22px;
        color: #304f7f;
        height: 40px;
        width: 40px;
        display: flex; /* Ensure consistent flexbox layout */
        align-items: center; /* Center icon vertically */
        justify-content: center; /* Center icon horizontally */
        border-radius: 50%; /* Make it circular */
        transition: all 0.2s ease; /* Smooth transition */
    }

        .icon-row a:hover {
            background-color: #304f7f; /* Add background color on hover */
            color: white; /* Change icon color on hover */
        }

/* --- Custom Menu Footer * Pushes contained items to the bottom of the menu --- */
.menu-footer {
    margin-top: auto; /* Push the footer to the bottom */
    padding: 1rem; /* Add some padding for spacing */
    display: flex;
    justify-content: space-between; /* Space between Login and Register buttons */
    gap: 1rem; /* Add spacing between buttons */
    border-top:1px solid #ddd;
}

    .menu-footer a {
        flex: 1; /* Make buttons take equal width */
        text-align: center; /* Center-align the text */
    }

/* --- Logout button for Custom Menu footer --- */
.logout-button {
    width: auto; /* Allow the button to size dynamically based on content */
     /* Add padding for better spacing */
}

/* Notification Panel styles */
    #notifPanel {
        background: #ccc;
        font-size: 0.8rem;
        margin-top: 10px;
        border-radius: 12px;
        /* Custom Scrollbar Styles */
        /* Edge and IE */
        -ms-overflow-style: none; /* Hides scrollbar altogether in Edge and IE */
        /* For Firefox */
        scrollbar-width: thin;
        scrollbar-color: #999 transparent;
    }
        /* white card, dark text    */
        #notifPanel a {
            color: #304f7f;
            text-decoration: none;
        }
        /* links inherit text colour*/
        #notifPanel .bg-light {
            background: #e7f1ff !important;
        }


        /* unread highlight  */
        #notifPanel small {
            opacity: .75;
        }
        /* More specific selectors */
        #notifPanel .p-2 a {
            color: #304f7f !important;
            margin-left: 0 !important;
        }


        /* Notification Panel styles */
        #notifPanel .notification-item {
            display: flex;
            justify-content: space-between; /* Space between content and indicator */
            align-items: center; /* Vertically center items */
            position: relative;
            border-radius: 10px;
            border: 1px solid #e1e1e1
        }

        #notifPanel .notification-content {
            flex: 1; /* Take up remaining space */
        }

        #notifPanel .new-indicator {
            font-size: 1.5rem; /* Adjust size as needed */
            cursor: pointer;
            margin-right: -5px; /* Add spacing from the content */
        }

        /* Style for read notifications */
        #notifPanel .notification-item.read {
            background-color: #fff; /* Light gray background */
            opacity: 0.6; /* Slightly reduce opacity */
        }

            #notifPanel .notification-item.read a:hover {
                text-decoration: underline; /* Optional: Add underline on hover */
            }

        #notifPanel .notification-item:not(.read) a:hover {
            color: #304f7f; /* Slightly darker gray on hover */
            text-decoration: underline; /* Optional: Add underline on hover */
        }

    /* Add bottom border to each notification item */
    #notifList .notification-item {
        margin-bottom: 2px; /* Adjust color as needed */
        background-color: #fff;
    }

    /* Style for the new indicator */
    #notifList .new-indicator {
        cursor: pointer;
        font-size: 1.5rem; /* Adjust size as needed */
        right: 5px;
    }

        #notifList .new-indicator:hover {
            color: #007bff; /* Optional: Change color on hover */
        }

        #notifList .new-indicator[title]:hover::after {
            opacity: 1;
            visibility: visible;
        }



    #notifBell {
        border: none;
        text-decoration: none;
        color: black;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #e9ecef;
        border-radius: 50%;
        transition: background-color 0.2s ease, transform 0.2s ease; /* Smooth hover effect */
    }

    @media screen and (max-width: 768px) {
        #notifBell {
            font-size: 20px;
            width: 34px;
            height: 34px;
            transition: all 0.3s ease;
        }
    }


    #notifBell:hover {
        background-color: #304f7f;
        color: white;
    }

    /* Notification Badge */
    #notifBadge {
        position: absolute;
        top: 5px; /* Adjust to move the badge vertically */
        right: 5px; /* Adjust to move the badge horizontally */
        transform: translate(50%, -50%); /* Adjust the position relative to the corner */
        width: 18px;
        height: 18px;
        background-color: red;
        color: white;
        border-radius: 50%; /* Makes the badge a circle */
        text-align: center;
        line-height: 18px; /* Centers the text vertically */
        font-size: 0.70rem;
        font-weight: normal;
        display: none; /* Set to 'inline' or 'block' when there are notifications */
    }

.rotate-45 {
    display: inline-block; /* Ensure the icon behaves properly inline */
    transform: rotate(45deg); /* Rotate the icon by 45 degrees */
    transition: transform 0.3s ease; /* Optional: Add a smooth transition */
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
    #hero {
        width: 100%;
        height: 100vh;
        background: url("../img/hero-bg.jpg") top left;
        background-size: cover;
        position: relative;
    }

        #hero:before {
            content: "";
            background: rgba(255, 255, 255, 0.6);
            position: absolute;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0;
        }

        #hero .container {
            position: relative;
            height: 75vh;
        }

        #hero h1 {
            margin: 0;
            font-size: 48px;
            font-weight: 700;
            line-height: 58px;
            padding-top: 60px;
            color: #222222;
            font-family: "Poppins", sans-serif;
        }

            #hero h1 span {
                color: #106eea;
            }

        #hero h2 {
            color: #555555;
            margin: 5px 0 30px 0;
            font-size: 24px;
            font-weight: 400;
        }

        #hero .btn-get-started {
            font-family: "Roboto", sans-serif;
            text-transform: uppercase;
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 1px;
            display: inline-block;
            padding: 10px 28px;
            border-radius: 4px;
            transition: 0.5s;
            color: #fff;
            background: #106eea;
        }

            #hero .btn-get-started:hover {
                background: #247cf0;
            }


    @media (min-width: 1024px) {
        #hero {
            background-attachment: fixed;
        }
    }

    @media (max-width: 1024px) {
        #hero h1 {
            font-size: 42px;
            line-height: 16px;
        }
    }


    @media (max-width: 768px) {
        #hero {
            height: 100vh;
        }

            #hero h1 {
                font-size: 28px;
                line-height: 28px;
            }

            #hero h2 {
                font-size: 18px;
                line-height: 18px;
                margin-bottom: 30px;
            }

            #hero .btn-get-started,
            #hero .btn-watch-video {
                font-size: 13px;
            }
    }

    @media (max-height: 500px) {
        #hero {
            height: 100vh;
        }
    }

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
    section {
        padding: 60px 0;
        overflow: hidden;
    }

    .section-bg {
        background-color: #f6f9fe;
    }

    .icon-right {
        float: right;
        margin-left: 10px; /* Adjust the spacing as needed */
    }

    .list-item-container {
        overflow: hidden; /* Ensure the container clears the float */
    }

    .alma-logo-text {
        font-size: 54px;
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0.1px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-style: italic;
        color: #304f7f;
        text-shadow: 1px 1px 2px #34568b;
    }


    .about-section-text {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Adjust the shadow as needed */
    }

    .section-bg-with-image {
        position: relative;
        width: 100%;
        background: none; /* Remove the background image from here */
        padding: 60px 0; /* Adjust padding as needed */
        color: #fff; /* Ensure text is readable */
    }

        .section-bg-with-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../img/bg-about.jpg') center center;
            background-size: cover;
            background-attachment: fixed; /* This creates the parallax effect */
            background-repeat: no-repeat;
            opacity: 0.5; /* Set the desired opacity */
            z-index: -1; /* Ensure the image stays behind the content */
        }

    .section-title {
        text-align: center;
        padding-bottom: 30px;
    }

        .section-title h2 {
            font-size: 13px;
            letter-spacing: 1px;
            font-weight: 700;
            padding: 8px 20px;
            margin: 0;
            background: #e7f1fd;
            color: #304f7f;
            display: inline-block;
            text-transform: uppercase;
            border-radius: 50px;
        }

        .section-title h3 {
            margin: 15px 0 0 0;
            font-size: 32px;
            font-weight: 700;
        }

            .section-title h3 span {
                color: #106eea;
            }

        .section-title p {
            margin: 15px auto 0 auto;
            font-weight: 600;
        }

    .list-item-container {
        text-align: right; /* Align text to the right */
        margin-bottom: 20px; /* Add some space between list items */
    }

        .list-item-container div {
            display: inline-block; /* Ensure the div containing text is inline */
            text-align: right; /* Align text inside the div to the right */
            width: 100%; /* Ensure the div takes the full width */
        }

    @media (min-width: 1024px) {
        .section-title p {
            width: 50%;
        }
    }

/* Export section titles: center on small screens */
.export-section-title {
    text-align: left; /* default */
    width: 100%;
}

@media (max-width: 576px) {
    .export-section-title {
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
    .breadcrumbs {
        padding: 20px 0;
        background-color: #f1f6fe;
        min-height: 40px;
    }

        .breadcrumbs h2 {
            font-size: 24px;
            font-weight: 300;
            margin: 0;
        }

    @media (max-width: 992px) {
        .breadcrumbs h2 {
            margin: 0 0 10px 0;
        }
    }

    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

        .breadcrumbs ol li + li {
            padding-left: 10px;
        }

            .breadcrumbs ol li + li::before {
                display: inline-block;
                padding-right: 10px;
                color: #6c757d;
                content: "/";
            }

    @media (max-width: 768px) {
        .breadcrumbs .d-flex {
            display: block !important;
        }

        .breadcrumbs ol {
            display: block;
        }

            .breadcrumbs ol li {
                display: inline-block;
            }
    }

/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
    .featured-services .icon-box {
        padding: 30px;
        position: relative;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
        transition: all 0.3s ease-in-out;
        border-radius: 8px;
        z-index: 1;
    }

        .featured-services .icon-box::before {
            content: "";
            position: absolute;
            background: #304f7f;
            right: 0;
            left: 0;
            bottom: 0;
            top: 100%;
            transition: all 0.3s;
            z-index: -1;
        }

        .featured-services .icon-box:hover::before {
            background: #304f7f;
            top: 0;
            border-radius: 0px;
        }

    .featured-services .icon {
        margin-bottom: 15px;
    }

        .featured-services .icon i {
            font-size: 48px;
            line-height: 1;
            color: #304f7f;
            transition: all 0.3s ease-in-out;
        }

    .featured-services .title {
        font-weight: 700;
        margin-bottom: 15px;
        font-size: 18px;
    }

        .featured-services .title a {
            color: #111;
        }

    .featured-services .description {
        font-size: 15px;
        line-height: 28px;
        margin-bottom: 0;
    }

    .featured-services .icon-box:hover .title a,
    .featured-services .icon-box:hover .description {
        color: #fff;
    }

    .featured-services .icon-box:hover .icon i {
        color: #fff;
    }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
    .about .content h3 {
        font-weight: 600;
        font-size: 26px;
    }

    .about .content ul {
        list-style: none;
        padding: 0;
    }

        .about .content ul li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 35px;
        }

            .about .content ul li:first-child {
                margin-top: 35px;
            }

        .about .content ul i {
            background: #fff;
            box-shadow: 0px 6px 15px rgba(16, 110, 234, 0.12);
            font-size: 24px;
            padding: 20px;
            margin-right: 15px;
            color: #106eea;
            border-radius: 50px;
        }

        .about .content ul h5 {
            font-size: 18px;
            color: #555555;
        }

        .about .content ul p {
            font-size: 15px;
        }

    .about .content p:last-child {
        margin-bottom: 0;
    }

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
    .counts {
        padding: 70px 0 60px;
    }

        .counts .count-box {
            padding: 30px 30px 25px 30px;
            width: 100%;
            position: relative;
            text-align: center;
            background: #f1f6fe;
            border: 1px solid #304f7f;
            border-radius: 8px;
        }

            .counts .count-box i {
                position: absolute;
                top: -28px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 24px;
                background: #304f7f;
                color: #fff;
                width: 56px;
                height: 56px;
                line-height: 0;
                border-radius: 50px;
                border: 5px solid #fff;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .counts .count-box span {
                font-size: 36px;
                display: block;
                font-weight: 600;
                color: #062b5b;
            }

            .counts .count-box p {
                padding: 0;
                margin: 0;
                font-family: "Roboto", sans-serif;
                font-size: 14px;
            }

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
    .clients {
        padding: 15px 0;
        text-align: center;
        background-color: white;
    }

        .clients img {
            max-width: 100%;
            transition: all 0.4s ease-in-out;
            display: inline-block;
            padding: 35px 0;
        }

            .clients img:hover {
                transform: scale(1.15);
            }

    @media (max-width: 768px) {
        .clients img {
            max-width: 65%;
        }
    }

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
    .services {
        background-color: #f6f9fe;
        background-image: url('../img/bg-services.jpg'); /* Replace with your image path */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 60px 0; /* Adjust padding as needed */
    }

        .services .icon-box {
            text-align: center;
            border: 1px solid #e2eefd;
            padding: 80px 20px;
            transition: all ease-in-out 0.3s;
            background: #fff;
            border-radius: 8px;
        }

            .services .icon-box .icon {
                margin: 0 auto;
                width: 64px;
                height: 64px;
                background: #f1f6fe;
                border-radius: 4px;
                border: 1px solid #deebfd;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 20px;
                transition: ease-in-out 0.3s;
            }

                .services .icon-box .icon i {
                    color: #304f7f;
                    font-size: 28px;
                    transition: ease-in-out 0.3s;
                }

            .services .icon-box h4 {
                font-weight: 700;
                margin-bottom: 15px;
                font-size: 24px;
            }

                .services .icon-box h4 a {
                    color: #222222;
                    transition: ease-in-out 0.3s;
                }

            .services .icon-box p {
                line-height: 24px;
                font-size: 14px;
                margin-bottom: 0;
            }

            .services .icon-box:hover {
                border-color: #304f7f;
                box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
            }

                .services .icon-box:hover h4 a,
                .services .icon-box:hover .icon i {
                    color: #304f7f;
                }

                .services .icon-box:hover .icon {
                    border-color: #304f7f;
                }



/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
    .faq {
        padding: 60px 0;
    }

        .faq .faq-list {
            padding: 0;
            list-style: none;
        }

            .faq .faq-list li {
                border-bottom: 1px solid #d4e5fc;
                margin-bottom: 20px;
                padding-bottom: 20px;
            }

            .faq .faq-list .question {
                display: block;
                position: relative;
                font-family: #106eea;
                font-size: 18px;
                line-height: 24px;
                font-weight: 400;
                padding-left: 25px;
                cursor: pointer;
                color: #0d58ba;
                transition: 0.3s;
            }

            .faq .faq-list i {
                font-size: 16px;
                position: absolute;
                left: 0;
                top: -2px;
            }

            .faq .faq-list p {
                margin-bottom: 0;
                padding: 10px 0 0 25px;
            }

            .faq .faq-list .icon-show {
                display: none;
            }

            .faq .faq-list .collapsed {
                color: black;
            }

                .faq .faq-list .collapsed:hover {
                    color: #106eea;
                }

                .faq .faq-list .collapsed .icon-show {
                    display: inline-block;
                    transition: 0.6s;
                }

                .faq .faq-list .collapsed .icon-close {
                    display: none;
                    transition: 0.6s;
                }

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

    .contact {
        position: relative;
        padding: 60px 0; /* Adjust padding as needed */
        background-image: url('../img/bg-contact.jpg'); /* Replace with your image path */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

        .contact::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
            z-index: -1; /* Ensure the overlay is behind the content */
        }

    .info-box {
        background-color: #ffffff; /* Solid background color */
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        margin-bottom: 20px; /* Space between info boxes */
    }

    .contact .info-box {
        color: #444444;
        text-align: center;
        box-shadow: 0 0 30px rgba(214, 215, 216, 0.3);
        padding: 20px 0 30px 0;
    }

        .contact .info-box i {
            font-size: 32px;
            color: #304f7f;
            border-radius: 50%;
            padding: 8px;
            border: 2px dotted #304f7f;
        }

        .contact .info-box h3 {
            font-size: 20px;
            color: #304f7f;
            font-weight: 700;
            margin: 10px 0;
        }

        .contact .info-box p {
            padding: 0;
            line-height: 24px;
            font-size: 14px;
            margin-bottom: 0;
        }

    .contact .email-form {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 30px rgba(214, 215, 216, 0.4);
        padding: 30px;
    }



        .contact .email-form .form-group {
            margin-bottom: 10px;
        }

        .contact .email-form input,
        .contact .email-form textarea {
            border-radius: 0;
            box-shadow: none;
            font-size: 14px;
        }

            .contact .email-form input:focus,
            .contact .email-form textarea:focus {
                border-color: #304f7f;
            }

        .contact .email-form input {
            padding: 10px 15px;
        }

        .contact .email-form textarea {
            padding: 12px 15px;
        }

        .contact .email-form button[type=submit] {
            background: #304f7f;
            border: 0;
            padding: 10px 30px;
            color: #fff;
            transition: 0.4s;
            border-radius: 4px;
            margin-top: -10px;
        }

            .contact .email-form button[type=submit]:hover {
                background: #3b8af2;
            }

    @-webkit-keyframes animate-loading {
        0% {
            transform: rotate(0deg);
        }

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

    @keyframes animate-loading {
        0% {
            transform: rotate(0deg);
        }

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

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
    #footer {
        background: #304f7f;
        padding: 0 0 20px 0;
        color: #444444;
        font-size: 14px;
    }

        #footer .logo {
            /*  color: #34568B; */
            text-shadow: 2px 0px #bbbbbc;
            color: #304f7f;
            margin: 0;
            padding: 0;
            line-height: 1;
            font-weight: 900;
            letter-spacing: 0.1px;
            font-family: 'Roboto', sans-serif;
            font-style: italic;
        }

        #footer .footer-top {
            padding: 30px 0 0 0;
            background: #f1f6fe;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 80px;
        }

            #footer .footer-top .footer-contact {
                margin-bottom: 10px;
            }

                #footer .footer-top .footer-contact h3 {
                    font-size: 24px;
                    margin: 0 0 5px 0;
                    padding: 2px 0 2px 0;
                    line-height: 1;
                    font-weight: 700;
                }

                    #footer .footer-top .footer-contact h3 span {
                        color: #106eea;
                    }

                #footer .footer-top .footer-contact p {
                    font-size: 14px;
                    line-height: 22px;
                    margin-bottom: 10px;
                    font-family: "Roboto", sans-serif;
                    color: #777777;
                }

            #footer .footer-top h4 {
                font-size: 18px;
                font-weight: bold;
                color: #444444;
                position: relative;
                padding-bottom: 12px;
            }

            #footer .footer-top .footer-links {
                margin-bottom: 10px;
            }

                #footer .footer-top .footer-links ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }

                    #footer .footer-top .footer-links ul i {
                        padding-right: 2px;
                        color: #106eea;
                        font-size: 14px;
                        line-height: 1;
                    }

                    #footer .footer-top .footer-links ul li {
                        padding: 7px 0;
                        display: flex;
                        align-items: center;
                    }

                        #footer .footer-top .footer-links ul li:first-child {
                            padding-top: 0;
                        }

                    #footer .footer-top .footer-links ul a {
                        color: #777777;
                        transition: 0.3s;
                        display: inline-block;
                        line-height: 1;
                    }

                        #footer .footer-top .footer-links ul a:hover {
                            text-decoration: none;
                            color: #106eea;
                        }

        #footer .copyright {
            text-align: center;
            float: left;
            color: #fff;
        }

        #footer .credits {
            float: right;
            text-align: center;
            color: #fff;
        }

    @media (max-width: 768px) {

        #footer .copyright,
        #footer .credits {
            float: none;
            text-align: center;
            padding: 2px 0;
        }
    }

    .footerlogo-container {
        width: 80px; /*width of your image*/
        height: 80px; /*height of your image*/
        background-image: url('../img/alma-stamp-vector.svg');
        background-size: contain;
        position: absolute;
        right: 30px;
        margin-top: -130px;
    }


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
    .back-to-top {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        right: 15px;
        bottom: 15px;
        z-index: 996;
        background: #304f7f;
        width: 40px;
        height: 40px;
        border-radius: 4px;
        transition: all 0.4s;
    }

        .back-to-top i {
            font-size: 28px;
            color: #fff;
            line-height: 0;
        }

        .back-to-top:hover {
            background: #3284f1;
            color: #fff;
        }

        .back-to-top.active {
            visibility: visible;
            opacity: 1;
        }

    /****** Small on page loader *****/
    #loading {
        position: fixed;
        display: flex;
        top: 160px;
        right: 50px;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
    }

    #loading-image {
        z-index: 100;
    }

    .languageselect {
        margin-left: 10px;
        margin-right: -16px;
        font-size: 11px;
        background-color: #304f7f;
        color: white;
        border-color: white;
    }


/*********************** 
*          WMS         *
************************/

    #wms {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10px;
        margin-bottom: 40px;
    }


        #wms .logo {
            font-size: 38px;
            font-weight: 900;
            letter-spacing: 0.1px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-style: italic;
            background-color: #061a4f;
            background-image: linear-gradient(0deg, rgba(6,26,79,1) 0%, rgba(53,105,171,1) 100%);
            background-size: 100%;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -webkit-text-fill-color: transparent;
            -moz-text-fill-color: transparent;
        }

    .wms-form-shadow {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 5px;
        position: relative;
    }

    .wms-centerdiv {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 700px;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 10px;
    }

        /* --- Responsive fixes for .wms-centerdiv forms and Select2 --- */
        .wms-centerdiv form,
        .wms-centerdiv > form {
            width: 100%;
            box-sizing: border-box;
        }

        /* allow Bootstrap grid columns to shrink instead of forcing overflow */
        .wms-centerdiv .row > [class*="col-"] {
            min-width: 0;
        }

        /* prevent controls growing past their container */
        .wms-centerdiv .form-control,
        .wms-centerdiv .form-floating,
        .wms-centerdiv .form-floating .form-control {
            max-width: 100%;
            box-sizing: border-box;
        }

/* make Select2 respect the container width */
.select2-container,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* small-screen padding so controls don't touch edges */
@media (max-width: 576px) {
    .wms-centerdiv {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

        .wms-centerdiv .form-floating {
            padding-bottom: 0.5rem;
        }
}

/* prevent long tokens from forcing width */
.wms-centerdiv input,
.wms-centerdiv textarea,
.wms-centerdiv select {
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

    .wms-topbar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .wms-btn {
        display: block;
        text-align: center;
        text-decoration: none;
        font-weight: 800;
        font-size: 1em;
        color: $white;
        border-radius: $border-rounded;
        margin: 10px;
        padding: 1em 3em;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
        background-color: #304f7f;
        transition: 0.5s;
    }

        .wms-btn:hover {
            background-color: rgba(53,105,171,1);
            color: #fff;
        }

    .wms-orderscountdiv {
        position: fixed;
        top: 40px;
        right: 25px;
        font-size: 13px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }


    .img-container {
        background-image: url('../img/about.jpg');
    }

    /* -----  Make all scrollbars thin ----- */
    /* For WebKit-based browsers (Chrome, Edge, Safari) */
    ::-webkit-scrollbar {
        width: 6px; /* Width of the vertical scrollbar */
        height: 6px; /* Height of the horizontal scrollbar */
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888; /* Color of the scrollbar thumb */
        border-radius: 10px; /* Rounded corners for the thumb */
    }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Darker color on hover */
        }

    ::-webkit-scrollbar-track {
        background-color: transparent; /* Background color of the scrollbar track */
        border-radius: 10px; /* Rounded corners for the track */
    }

    /* For Firefox */
    * {
        scrollbar-width: thin; /* Makes the scrollbar thin */
        scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
    }

    /* Tooltip container for Hover over links / elements tooltip with title="" */
    .custom-tooltip {
        position: absolute;
        background-color: black; /* Tooltip background color */
        color: white; /* Tooltip text color */
        padding: 3px 6px;
        border-radius: 4px;
        margin-top:10px;
        font-size: 0.75rem;
        white-space: nowrap;
        z-index: 1400;
        opacity: 0; /* Initially hidden */
        transition: opacity 0.2s ease-in-out; /* Smooth fade-in/out */
        pointer-events: none; /* Prevent interaction with the tooltip */
        max-width: calc(90vw - 40px); /* Prevent tooltip from exceeding viewport width */
        
    }


/* used in exports Index to show flag instead of 2-Letter country ISO codes */
.flag img {
    width: 20px !important; /* Set the desired width */
    height: 20px !important; /* Set the desired height */
    display: inline-block; /* Ensure proper alignment */
    vertical-align: middle; /* Align with text */
    margin-bottom: 5px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1050; /* Ensure it appears above other elements */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0; 
    padding: 0; 
}

/* from https://cssloaders.github.io/ */
.loader {
    border: 2px solid #304f7f;
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 0.5s linear infinite;
}

    .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        border: 24px solid;
        border-color: transparent #304f7f;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

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

/* Notifications page: make tabs bar have a full-width bottom border */
.notifications-tabs-bar {
    border-bottom: 1px solid #dee2e6; /* match Bootstrap nav-tabs border */
}

    /* Avoid double border: remove default nav-tabs bottom border inside the bar */
    .notifications-tabs-bar .nav-tabs {
        border-bottom: 0;
    }

    /* Align the right-side form vertically with tabs */
    .notifications-tabs-bar form {
        padding-top: .25rem; /* tweak to taste */
        padding-bottom: .25rem;
    }

    /* Remove only the first list item's top border so it meets the bar cleanly */
    .notifications-list .list-group-item:first-child {
        border-top: 0 !important;
        
    }

    /* Toast status chip next to title */
    .notifications-container .status-chip {
        font-weight: 600;
        margin-left: 6px;
    }


.document-row {
    align-items: stretch !important;
}

    /* Make the delete button column fill and remove padding */
    .document-row .col-md-1.p-0 {
        display: flex;
        padding: 0 !important;
    }

        /* Ensure the button fills the column height and width */
        .document-row .col-md-1.p-0 .btn {
            height: 85% !important;
            border-radius: 0.25rem; /* keep consistent with btn-sm */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left:5px;
            
        }

.autocomplete-list {
    position: absolute;
    z-index: 1050;
    background: #fff;
    
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.8rem;
}

.autocomplete-item {
    padding: 2px 6px;
    cursor: pointer;
}

    .autocomplete-item:hover,
    .autocomplete-item.active {
        background-color: #007bff;
        color: #fff;
    }

.is-invalid-1804 {
    border-color: #dc3545 !important; /* Bootstrap danger red */
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

/* Invoice badges used in Declaration1804 index */
.invoice-badge {
    display: inline-block;
    padding: .2rem .35rem;
    font-size: .65rem;
    line-height: 1;
    border-radius: .375rem;
    margin-left: 2px; /* small spacing between badges */
    margin-right: 1px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

    .invoice-badge.outline {
        background: transparent;
        border: 1px solid rgba(0,0,0,.125);
        color: #6c757d; /* muted */
    }

.filters-container {
    margin-bottom: 1rem;
    text-align: right;
}

    /* Hide the export button on small screens */
    @media (max-width: 576px) {
        .filters-container .btn-export {
            display: none;
        }
    }

.table-smaller {
    font-size: 0.85rem; /* Smaller font size for tables */
}

    /* Specific adjustments for the invoice table for better spacing and alignment */
    .table-smaller th,
    .table-smaller td {
        padding: 0.4rem !important;
        line-height: 1.3 !important;
    }

    .table-smaller th {
        vertical-align: middle;
    }

    .table-smaller td {
        vertical-align: middle;
    }

    /* Compact rows for dense invoice tables */
    .compact-rows td, .compact-rows th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    line-height: 1.2 !important;
}

.compact-rows tbody tr {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure spinner-border used inside the icon-sized control matches the icon metrics exactly
   and does not push the row height when shown. Use !important to override Bootstrap defaults. */
.exemption-btn .spinner-border {
    width: 0.72rem !important;
    height: 0.72rem !important;
    border-width: 0.12rem !important; /* thinner border to better match icon visual weight */
    display: inline-block !important;
    vertical-align: middle !important;
    box-sizing: content-box !important;
}

/* Make sure the icon occupies the same inline box as the spinner */
.exemption-btn .exemption-icon {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    line-height: 1;
    vertical-align: middle;
}

/* Prevent the anchor from increasing height when spinner is inserted */
.exemption-btn {
    line-height: 1;
    height: auto;
    min-height: 0;
}

/* Compact cards used in Exports Details for small screens - keep them tight (two lines) */
.export-compact-card {
    display: block !important; /* override general .card flex behavior */
    height: auto !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 1.05;
    font-size: 0.88rem;
    width: 100%;
}

.export-compact-card .card-body {
    display: block !important;
    flex-grow: 0 !important;
    padding: 0.35rem 0.6rem !important;
}

.export-compact-card .text-truncate {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.export-compact-card .fw-semibold, .export-compact-card .fw-bold {
    line-height: 1; /* tighten lines */
}

.export-compact-card .small {
    line-height: 1;
}

/* Ensure second row (invoice/date/value) centers/date in middle */
.export-compact-card .d-flex.w-100.justify-content-between.mt-1 > .text-center {
    min-width: 90px;
}

@media (max-width: 375px) {
    .export-compact-card .card-body { padding: 0.25rem 0.45rem !important; }
}

/* Center lists on small screens */
.export-compact-list {
    max-width: 520px; /* keep cards narrow and centered */
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
}

/* OneDrive document list inside export DOCS modal */
#oneDriveDocsList .list-group-item {
    min-width: 0;
    overflow: hidden;
}

#oneDriveDocsList .list-group-item > .text-truncate {
    min-width: 0;
    flex: 1 1 0;
}

@media (max-width: 575.98px) {
    #oneDriveDocsList .list-group-item {
        font-size: 0.78rem;
        padding: 0.25rem 0.4rem !important;
    }
}

@media (max-width: 399.98px) {
    #oneDriveDocsList .list-group-item {
        font-size: 0.72rem;
    }
}