.dashboard-card-light {
    color: #3d5886;
    background-color: #ffffff9c;
    box-shadow: 0 0px 4px 1px #3d588691;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
}

.dashboard-card-title {
    font-size: 30px;
}

.dashboard-card-green-button {
    box-shadow: 0px 0px 5px 1px #24c063;
    background-color: #3d5886;
    color: #24c063;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}

.dashboard-card-green-button:hover {
    background-color: #24c063;
    color: #3d5886;
}

.dashboard-card-red-button {
    box-shadow: 0px 0px 5px 1px #ff4c4c;
    background-color: #3d5886;
    color: #ff4c4c;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}

.dashboard-card-red-button:hover {
    background-color: #ff4c4c;
    color: #3d5886;
}

.dashboard-card-grey-button {
    box-shadow: 0px 0px 5px 1px #dee0ff;
    background-color: #3d5886;
    color: #dee0ff;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}

.dashboard-card-grey-button:hover {
    background-color: #dee0ff;
    color: #3d5886;
}

.dashboard-card-gold-button {
    box-shadow: 0px 0px 2px 1px #f0c646;
    background-color: #3d5886;
    color: #f0c646;
    border-radius: 24px;
    font-weight: 500;
    border: 0;
}

.dashboard-card-gold-button:hover {
    background-color: #f0c646;
    color: #3d5886;
}

.dashboard-card-notification {
    background-color: #bdcde7;
    color: #3d5886;
    border-radius: 2rem;
    box-shadow: 0 0px 0px 1px #3a496d;
    overflow: hidden;
    position: relative;
    display: flex;
    font-size: 18px;
}

.dashboard-card-notification-positive {
    background-color: #24c063;
    color: #f5f5f5;
    border-radius: 2rem;
    box-shadow: 0 0px 2px 2px #f5f5f5;
    overflow: hidden;
    position: relative;
    display: flex;
    font-size: 18px;
}

.dashboard-card-notification-negative {
    background-color: #fa5555;
    color: #f5f5f5;
    border-radius: 2rem;
    box-shadow: 0 0px 2px 2px #f5f5f5;
    overflow: hidden;
    position: relative;
    display: flex;
    font-size: 18px;
}

.dashboard-card-notification-neutral {
    background-color: #f5f5f5;
    color: #3a496d;
    border-radius: 2rem;
    box-shadow: 0 0px 2px 2px #f5f5f5;
    overflow: hidden;
    position: relative;
    display: flex;
    font-size: 18px;
}

.dashboard-card-legend {
    font-size: 18px;
}

.dashboard-card-search-bar {
    display: block;
    width: 100%;
    color: #f5f5f5;
    position: relative;
    padding: .33em .75em;
    background: transparent;
    transition: all .2s linear;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

.safety-az-badge {
    color: #3d5886;
    box-shadow: 0 0 5px 1px #182b4c;
    white-space: wrap !important;
}


/* SFTZ search bar */

.sftz-search-bar {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 25px;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* SFTZ backlink */

.sftz-backlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 15px;
    font-weight: 600;
    color: #91a4d1;
}

.sftz-backlink:hover,
.sftz-backlink:focus-visible {
    font-size: 16px;
    color: #3d5886;
}

/* SFTZ perspective control & mode */

.perspective-control {
    display: flex;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #cccccc;
}

.perspective-control-toggle {
    flex: 1;
    padding: 10px 15px;
    background-color: #f5f5f5;
    color: #3d5886;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    text-align: center;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perspective-control-toggle:not(:last-child) {
    border-right: 1px solid #cccccc;
}

.perspective-control-toggle .icon {
    margin-right: 8px;
    font-size: 1.1em;
}

.perspective-control-toggle:hover {
    background-color: #e9ecef;
}

.perspective-control-toggle.active {
    background-color: #3d5886;
    color: #f5f5f5;
    font-weight: 500;
}

.perspective-control-toggle.active:hover {
    background-color: #2b4167;
}

.perspective-control-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
    z-index: 1;
}

.perspective-mode {
    display: none
}

.perspective-mode.active {
    display: block;
}


.mobile-greeting-organization {
    font-size: 15px;
    background-color: #d6d9e1;
    color: #3d5886;
    font-weight: 400;
    display: inline-block;
    padding: .35em .65em;
    text-align: center;
}

.mobile-greeting-text {
    font-size: 30px;
    font-weight: 400;
}

#header-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sftz-navigation {
    background-color: #3d5886;
    box-shadow: 0 4px 12px 0 rgb(31 43 74), 0 2px 4px rgb(245 245 245) !important;
}

.sftz-navigation-current-item {
    color: #f0c646 !important;
    font-size: 1.1rem !important;
}

.sftz-navigation-available-item {
    color: #F5f5f5 !important;
    font-size: 1.1rem !important;
}

.sftz-navigation-warning-item {
    color: #e99393 !important;
    font-size: 1.1rem !important;
}

.sftz-navigation-unreleased-item {
    color: #F5f5f5 !important;
    font-size: 1.1rem !important;
    pointer-events: none;
    opacity: 0.5;
}

.sftz-status-badge-onboarding {
    color: #3d5886;
}

.sftz-status-badge-active {
    color: #3d5886;
}

.badge-sftz-breadcrumbs-feature-flag {
    pointer-events: none;
    opacity: 0.5;
}

.filter-btn {
    position: relative;
    font-size: 1.2rem;
    color: #eeeeee;
    background-color: #3d5886 !important;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    text-decoration: none;
}

.filter-btn:hover::after,
.filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #FFC50D;
    transition: background-color 0.3s;
}

.filter-btn.active {
    color: #f5f5f5 !important;
    font-weight: bolder;
}

.filter-btn:hover::after {
    background-color: #FFC50D;
}

.sftz-instructions {
    color: #a6bae8;
    font-style: italic;
}

.sftz-link {
    font-size: 0.95rem !important;
    padding-left: 1.5rem !important;
}

body {
    background: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.sftz-container {
    display: flex;
    margin: 0;
    padding: 0;
}

.sftz-navigation-section {
    flex: 0 0 auto !important;
}

.safety-az-content-section {
    padding-left: 240px !important;
    margin-left: 20px;
    flex: 1 1 auto;
}

/* Desktop Navigation (Sidenav) */
.desktop-nav {
    display: block;
}

.mobile-greeting {
    display: none;
}

.dashboard-card-mobile-title {
    display: none;
}

.dashboard-card-desktop-title {
    display: block;
    font-size: 30px;
}

.mobile-navigation {
    display: none;
}

.dashboard-card-alerts {
    margin-left: 3rem;
    margin-right: 3rem;
}

.sftz-navigation {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#header-content {
    flex: 0 0 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sftz-navigation .mx-2 {
    flex: 0 0 15%;
}

#scrollContainer {
    flex: 1 0 65%;
    overflow-y: auto;
}

.sidenav-footer {
    flex: 0 0 10%;
}

@media (max-width: 500px) {
    .fs-5 {
        font-size: 1.1rem !important;
    }

    .safety-az-content-section {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }

    .safety-az-full-name {
        font-size: 45px !important;
        font-weight: 300;
        opacity: 80%;
    }

    .desktop-nav {
        display: none;
    }

    .desktop-greeting {
        display: none;
    }

    .mobile-greeting {
        display: block;
    }

    .dashboard-card-mobile-title {
        display: block;
    }

    .dashboard-card-desktop-title {
        display: none;
    }

    .dashboard-card-alerts {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .dashboard-card-notification-positive {
        font-size: 15px;
    }

    .dashboard-card-notification-negative {
        font-size: 15px;
    }

    .mobile-navigation {
        background: #3d5886;
        display: block;
        position: relative;
    }

    .sftz-navigation {
        height: auto;
    }

    #scrollContainer {
        flex: 1 1 auto;
        overflow-y: visible;
    }

    .sftz-container {
        flex-direction: column;
    }
}

/* Mobile nav toggle button */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #f5f5f5;
    font-size: 1.5rem;
    padding: 0.5rem;
    line-height: 0;
}

/* Collapsible mobile menu */
.mobile-menu {
    display: none;
    background: #3d5886;
    padding: 1rem;
    box-shadow: 0 2px 10px 4px #3d588691;
    justify-items: center;
}

.cta-status-icon {
    color: white;
    font-size: 30px;
}

.menu-toggle-button {
    color: white;
    font-size: 30px;
}

.mobile-menu.open {
    display: block;
}

#barsIcon {
    display: inline;
}

#barsIcon.hidden {
    display: none !important;
}

#xmarkIcon {
    display: none;
}

#xmarkIcon.visible {
    display: inline !important;
}

.mobile-navigation .d-flex {
    position: relative;
    /* Ensures child absolute elements are positioned relative to this */
}


.mobile-navigation .d-flex {
    position: relative;
    /* Relative for absolute positioning of children */
    display: flex;
    /* Flexbox for alignment */
    align-items: center;
    /* Vertically center items */
    justify-content: space-between;
    /* Push logo and button to edges */
    height: 60px;
    /* Set a fixed height for the navbar (adjust as needed) */
}

.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Center logo horizontally */
    z-index: 1;
    /* Ensure logo stays on top of other elements */
}

.icon-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    /* Adjust as needed for spacing */
    transform: translateY(-50%);
    /* Center button vertically */
    z-index: 2;
    /* Ensure button is above other elements */
}

.dashboard-card-mobile-title .mobile-icon {
    font-size: 30px;
}

.dashboard-card-mobile-title .mobile-title {
    font-size: 26px;
    font-weight: 600;
}

.dashboard-card-last-update {
    display: flex;
    /* Enables Flexbox */
    justify-content: center;
    /* Centers items horizontally */
    align-items: center;
    /* Centers items vertically */
    text-align: center;
    /* Ensures text alignment inside elements */
    gap: 8px;
    /* Optional: Adds spacing between the elements */
}

/* General Postcard Styles */
.postcard-dark {
    background-color: #3d5886;
    border-radius: 2rem;
    box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
    color: #f5f5f5;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
}

.postcard-light {
    background-color: #f5f5f5;
    border-radius: 2rem;
    box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
    color: #3d5886;
    flex-wrap: wrap;
    margin: 0 0 2rem 0;
    overflow: hidden;
    position: relative;
}

.postcard-platform-presentation {
    background-color: #eee;
    border-radius: 2rem;
    box-shadow: 5px 0px 0px 1px rgb(77 90 127);
    color: #3d5886;
    flex-wrap: wrap;
    margin: 0 0 2rem 0;
    overflow: hidden;
    position: relative;
}

.postcard-platform-add-on {
    background-color: #fff;
    border-radius: 2rem;
    box-shadow: 0px 0px 5px 1px rgb(77 90 127);
    color: #3d5886;
    flex-wrap: wrap;
    margin: 0 0 2rem 0;
    overflow: hidden;
    position: relative;
}

/* Form Control Styles */
.postcard-dark .form-control {
    color: #f5f5f5 !important;
}

.postcard-light .form-control {
    color: #3d5886 !important;
}

.postcard-platform-presentation .form-control {
    color: #3d5886 !important;
}

.postcard-platform-add-on .form-control {
    color: #3d5886 !important;
}

.postcard-dark .form-outline .form-control.disabled,
.form-outline .form-control:disabled,
.form-outline .form-control[readonly] {
    background-color: #3d5886 !important;
}

.postcard-platform-presentation .form-outline .form-control.disabled,
.postcard-platform-add-on .form-outline .form-control.disabled,
.form-outline .form-control:disabled,
.form-outline .form-control[readonly] {
    background-color: #f5f5f5 !important;
}

.postcard-platform-presentation 
.dashboard-card-alerts 
.form-outline .form-control.disabled,
.postcard-platform-add-on .form-outline .form-control.disabled,
.form-outline .form-control:disabled,
.form-outline .form-control[readonly] {
    background-color: #a6bae836 !important;
    color: #f5f5f5 !important;
}

.postcard-platform-presentation 
.dashboard-card-alerts 
.form-outline .form-control:disabled~.timepicker-toggle-button, 
.form-outline .form-control:disabled~.datepicker-toggle-button, 
.form-outline .form-control:disabled~.datetimepicker-toggle-button, 
.form-outline .form-control:disabled~.select-arrow, .form-outline 
.form-control:disabled~.trailing, .form-outline .form-control.disabled~.timepicker-toggle-button, 
.form-outline .form-control.disabled~.datepicker-toggle-button, .form-outline 
.form-control.disabled~.datetimepicker-toggle-button, .form-outline .form-control.disabled~.select-arrow, 
.form-outline .form-control.disabled~.trailing, .form-outline .form-control[readonly]~.timepicker-toggle-button, 
.form-outline .form-control[readonly]~.datepicker-toggle-button, .form-outline .form-control[readonly]~.datetimepicker-toggle-button, 
.form-outline .form-control[readonly]~.select-arrow, .form-outline .form-control[readonly]~.trailing {
    color: #f5f5f5 !important;
}

.postcard-platform-presentation 
.dashboard-card-alerts 
.select-clear-btn {
    color: #f5f5f5 !important;
}

/* Form Label Styles */
.postcard-dark .form-outline .form-control~.form-label {
    color: #f5f5f5 !important;
}

.postcard-light .form-outline .form-control~.form-label {
    color: #3d5886 !important;
}

.postcard-platform-presentation .form-outline .form-control~.form-label {
    color: #3d5886 !important;
}

.postcard-platform-add-on .form-outline .form-control~.form-label {
    color: #3d5886 !important;
}

.postcard-dark .modal-body .form-outline .form-control~.form-label {
    background-color: #f5f5f5 !important;
    color: #3d5886 !important;
}

.postcard-platform-presentation .modal-body .form-outline .form-control~.form-label,
.postcard-platform-add-on .modal-body .form-outline .form-control~.form-label {
    background-color: #3d5886 !important;
    color: #f5f5f5 !important;
}

/* Select Arrow Styles */
.postcard-dark .select-arrow {
    color: #f5f5f5 !important;
}

.postcard-light .select-arrow {
    color: #3d5886 !important;
}

.postcard-platform-presentation .select-arrow,
.postcard-platform-add-on .select-arrow {
    color: #3d5886 !important;
}

.postcard-dark .modal-body .select-arrow {
    background-color: #f5f5f5 !important;
    color: #3d5886 !important;
}

.postcard-platform-presentation .modal-body .select-arrow,
.postcard-platform-add-on .modal-body .select-arrow {
    background-color: #3d5886 !important;
    color: #f5f5f5 !important;
}

/* Datatable Styles */
.postcard-dark .datatable {
    --datatable-accent-bg: rgba(0, 0, 0, 0.02);
    --datatable-active-color: rgba(19, 19, 19, 0.05);
    --datatable-border-color: #e0e0e0;
    --datatable-color: #fff !important;
    --datatable-hover-bg: rgba(0, 0, 0, 0.048);
    --datatable-hover-color: #131313;
    --datatable-muted-color: grey;
    --datatable-striped-color: #212529;
    background-color: #3d5886 !important;
    color: #f5f5f5 !important;
}

.postcard-platform-presentation .datatable,
.postcard-platform-add-on .datatable {
    --datatable-accent-bg: rgba(61, 88, 134, 0.02);
    --datatable-active-color: rgba(61, 88, 134, 0.05);
    --datatable-border-color: #e0e0e0;
    --datatable-color: #3d5886 !important;
    --datatable-hover-bg: rgba(61, 88, 134, 0.048);
    --datatable-hover-color: #131313;
    --datatable-muted-color: grey;
    --datatable-striped-color: #f5f5f5;
    background-color: #f5f5f5 !important;
    color: #3d5886 !important;
}

.postcard-dark .datatable thead .fixed-cell {
    background-color: #3d5886 !important;
    box-shadow: var(--datatable-border-color) 0 1px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;
}

.postcard-platform-presentation .datatable thead .fixed-cell,
.postcard-platform-add-on .datatable thead .fixed-cell {
    background-color: #f5f5f5 !important;
    box-shadow: var(--datatable-border-color) 0 1px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Nav Tab Styles */
.postcard-dark .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-color: #FFC50D !important;
    color: #FFC50D !important;
}

.postcard-platform-presentation .nav-tabs .nav-item.show .nav-link,
.postcard-platform-add-on .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-color: #3d5886 !important;
    color: #3d5886 !important;
}

.postcard-dark .nav-tabs .nav-link {
    border: solid transparent;
    border-radius: 0;
    border-width: 0 0 2px;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 17px 29px 16px;
    text-transform: uppercase;
}

.postcard-platform-presentation .nav-tabs .nav-link,
.postcard-platform-add-on .nav-tabs .nav-link {
    border: solid transparent;
    border-radius: 0;
    border-width: 0 0 2px;
    color: rgba(61, 88, 134, 0.6) !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 17px 29px 16px;
    text-transform: uppercase;
}

.postcard-dark .nav-tabs .nav-link:hover {
    background-color: #3d5886cc !important;
    border-color: transparent;
}

.postcard-platform-presentation .nav-tabs .nav-link:hover,
.postcard-platform-add-on .nav-tabs .nav-link:hover {
    background-color: #f5f5f5cc !important;
    border-color: transparent;
}

.postcard-dark .nav-tabs .nav-link:focus {
    border-color: transparent;
}

.postcard-platform-presentation .nav-tabs .nav-link:focus,
.postcard-platform-add-on .nav-tabs .nav-link:focus {
    border-color: transparent;
}

/* List Group Styles */
.postcard-dark .list-group-item {
    background-color: #3d5886 !important;
    color: #f5f5f5 !important;
}

.postcard-platform-presentation .list-group-item,
.postcard-platform-add-on .list-group-item {
    background-color: #f5f5f5 !important;
    color: #3d5886 !important;
}

/* Card Styles */
.postcard-dark .card {
    background: #f5f5f5;
    border-radius: 24px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    color: #3d5886;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
}

.postcard-light .card {
    background: #3d5886;
    border-radius: 24px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    color: #f5f5f5;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
}

.postcard-platform-presentation .card,
.postcard-platform-add-on .card {
    background: #3d5886;
    border-radius: 24px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    color: #f5f5f5;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
}

/* Text and Title Styles */
.postcard-dark h1,
.postcard-dark .h1,
.postcard-light h1,
.postcard-light .h1,
.postcard-platform-presentation h1,
.postcard-platform-presentation .h1,
.postcard-platform-add-on h1,
.postcard-platform-add-on .h1 {
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.postcard-dark .small,
.postcard-light .small,
.postcard-platform-presentation .small,
.postcard-platform-add-on .small {
    font-size: 80%;
}

.postcard-dark .postcard__title,
.postcard-light .postcard__title,
.postcard-platform-presentation .postcard__title,
.postcard-platform-add-on .postcard__title {
    font-size: 1.75rem;
}

.postcard-dark .postcard__bar,
.postcard-light .postcard__bar,
.postcard-platform-presentation .postcard__bar,
.postcard-platform-add-on .postcard__bar {
    background-color: #FFC50D;
    border-radius: 5px;
    height: 10px;
    margin: 10px 0;
    transition: width 0.2s ease;
    width: 50px;
}

.postcard-dark:hover .postcard__bar,
.postcard-light:hover .postcard__bar,
.postcard-platform-presentation:hover .postcard__bar,
.postcard-platform-add-on:hover .postcard__bar {
    width: 100px;
}

.postcard-dark .postcard__text,
.postcard-light .postcard__text,
.postcard-platform-presentation .postcard__text,
.postcard-platform-add-on .postcard__text {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
}

.postcard-dark .postcard__preview-txt,
.postcard-light .postcard__preview-txt,
.postcard-platform-presentation .postcard__preview-txt,
.postcard-platform-add-on .postcard__preview-txt {
    height: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
}

.postcard-dark .postcard__tagbox,
.postcard-light .postcard__tagbox,
.postcard-platform-presentation .postcard__tagbox,
.postcard-platform-add-on .postcard__tagbox {
    display: flex;
    flex-flow: row wrap;
    font-size: 14px;
    justify-content: center;
    margin: 20px 0 0 0;
    padding: 0;
}

.postcard-dark .postcard__tagbox .tag__item,
.postcard-light .postcard__tagbox .tag__item,
.postcard-platform-presentation .postcard__tagbox .tag__item,
.postcard-platform-add-on .postcard__tagbox .tag__item {
    background: rgba(83, 83, 83, 0.4);
    border-radius: 3px;
    cursor: default;
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 2.5px 10px;
    transition: background-color 0.3s;
    user-select: none;
}

.postcard-dark .postcard__tagbox .tag__item:hover,
.postcard-light .postcard__tagbox .tag__item:hover,
.postcard-platform-presentation .postcard__tagbox .tag__item:hover,
.postcard-platform-add-on .postcard__tagbox .tag__item:hover {
    background: rgba(83, 83, 83, 0.8);
}

.postcard-dark .postcard__tagbox .play:hover,
.postcard-platform-presentation .postcard__tagbox .play:hover,
.postcard-platform-add-on .postcard__tagbox .play:hover {
    background: #3d5886;
}

/* Link Styles */
.postcard-dark a,
.postcard-light a,
.postcard-platform-presentation a,
.postcard-platform-add-on a {
    color: inherit;
}

/* Media Query Styles */
@media screen and (min-width: 769px) {
    .postcard-dark {
        flex-wrap: inherit;
    }

    .postcard-dark .postcard__title {
        font-size: 2rem;
    }

    .postcard-dark .postcard__tagbox {
        justify-content: start;
    }

    .postcard-dark .postcard__img {
        max-height: 100%;
        max-width: 300px;
        transition: transform 0.3s ease;
    }

    .postcard-dark .postcard__text {
        padding: 3rem;
        width: 100%;
    }

    .postcard-light {
        flex-wrap: inherit;
    }

    .postcard-light .postcard__title {
        font-size: 2rem;
    }

    .postcard-light .postcard__tagbox {
        justify-content: start;
    }

    .postcard-light .postcard__img {
        max-height: 100%;
        max-width: 300px;
        transition: transform 0.3s ease;
    }

    .postcard-light .postcard__text {
        padding: 3rem;
        width: 100%;
    }

    .postcard-platform-presentation {
        flex-wrap: inherit;
    }

    .postcard-platform-presentation .postcard__title {
        font-size: 2rem;
    }

    .postcard-platform-presentation .postcard__tagbox {
        justify-content: start;
    }

    .postcard-platform-presentation .postcard__img {
        max-height: 100%;
        max-width: 300px;
        transition: transform 0.3s ease;
    }

    .postcard-platform-presentation .postcard__text {
        padding: 3rem;
        width: 100%;
    }

    .postcard-platform-add-on {
        flex-wrap: inherit;
    }

    .postcard-platform-add-on .postcard__title {
        font-size: 2rem;
    }

    .postcard-platform-add-on .postcard__tagbox {
        justify-content: start;
    }

    .postcard-platform-add-on .postcard__img {
        max-height: 100%;
        max-width: 300px;
        transition: transform 0.3s ease;
    }

    .postcard-platform-add-on .postcard__text {
        padding: 3rem;
        width: 100%;
    }

    .postcard:hover .postcard__img {
        transform: scale(1.1);
    }

    .postcard:nth-child(2n+1) {
        flex-direction: row;
    }

    .postcard:nth-child(2n+0) {
        flex-direction: row-reverse;
    }

    .postcard:nth-child(2n+1) .postcard__text::before {
        left: -12px !important;
        transform: rotate(4deg);
    }

    .postcard:nth-child(2n+0) .postcard__text::before {
        right: -12px !important;
        transform: rotate(-4deg);
    }
}

@media screen and (min-width: 1024px) {
    .postcard__text {
        padding: 2rem 3.5rem;
    }

    .postcard__text:before {
        content: "";
        display: block;
        height: 130%;
        position: absolute;
        top: -20%;
        width: 55px;
    }

    .postcard.light .postcard__text:before {
        background: #e1e5ea;
    }
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }

  .tab button {
    color: #f5f5f5;
    background-color: #1f2b4a !important;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  .tab button:hover {
    text-decoration: underline;
    text-decoration-color: #FFC50D;
    text-decoration-thickness: 2px;
  }
  
  .tab button.active {
    color: #FFC50D !important;
    text-decoration: underline;
    text-decoration-color: #FFC50D;
    text-decoration-thickness: 2px;
  }
  
  .notification-tile {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-tile {
    height: 650px;
}

.navbar-custom {
    background: #182B4C;
}

.card {
    border-radius: 24px;
    background: #D0D0D0;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
    padding: 5px 5px 5px 5px;
    cursor: pointer;
}

.card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

.bg-glass {
    background-color: hsla(0, 0%, 100%, 0.85) !important;
}

.btn-grad {
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,209,67,1) 0%, rgba(255,145,83,1) 90% );
}

.btn-grad {
    text-transform: none;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #182B4C;
    display: block;
    border-color: #e7e7e7;
    border-radius: 24px;
}

.btn-grad:hover {
    background-position: right center;
    color: #182B4C;
    text-decoration: none;
}

.sticky-wrapper {
  position: sticky;
  z-index: 100;
  top: 0;
}

.sticky-wrapper.stuck {
  padding-top: 0;
  top: 0;
}

.breadcrumbs {
    background: #ffffff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.navbar-brand {
    padding: 0.7rem;
}

.custom-active-color {
    color: #17de3f;
}

.custom-inactive-color {
    color: #ec3c3c;
}

.custom-unknown-color {
    color: #f0c45f;
}

.information-details {
    color: #FFC50D;
  }

  /* CTA buttons */


.gold-cta-button {
    box-shadow: 0px 0px 5px 1px #3d5886;
    background-color: #FFC50D;
    color: #3d5886;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}
.gold-cta-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.green-cta-button {
    box-shadow: 0px 0px 5px 1px #24c063;
    background-color: #3d5886;
    color: #24c063;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}
.green-cta-button:hover {
    background-color: #24c063;
    color: #3d5886;
}
.red-cta-button {
    box-shadow: 0px 0px 5px 1px #fa5555;
    background-color: #3d5886;
    color: #fa5555;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}
.red-cta-button:hover {
    background-color: #fa5555;
    color: #3d5886;
}
.grey-cta-button {
    box-shadow: 0px 0px 2px 1px #3d5886;
    background-color: #b0c4de;
    color: #3d5886;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}
.white-cta-button {
    box-shadow: 0px 0px 5px 1px #3d5886;
    background-color: #f5f5f5;
    color: #3d5886;
    border-radius: 24px;
    font-weight: 500;
    font-size: 20px;
    border: 0;
}
.white-cta-button:hover {
    background-color: #3d5886;
    color: #f5f5f5;
}

/* Typography */

.presentation-icon {
    font-size: 30px;
}
.presentation-subtitle {
    font-size: 35px;
    font-weight: 200;
}
.presentation-subtitle-badge {
    background-color: #24c063;
    color: #f5f5f5;
    font-size: 35px;
    font-weight: 400;
    display: inline-block;
    padding: .35em .65em;
    text-align: center;
}
.presentation-title {
    color: #3d5886;
    font-size: 80px;
    font-weight: 500;
    line-height: 1.2;
}

.pricing-text { font-size: 25px; }
.pricing-text-highlight { font-size: 40px; }

@media (max-width: 850px) {
    .presentation-subtitle-badge { font-size: 30px; }
    .presentation-title { font-size: 70px; }
    .pricing-text { font-size: 22px; }
    .pricing-text-highlight { font-size: 37px; }
}
@media (max-width: 750px) {
    .presentation-subtitle-badge { font-size: 25px; }
    .presentation-title { font-size: 60px; }
    .pricing-text { font-size: 19px; }
    .pricing-text-highlight { font-size: 34px; }
}
@media (max-width: 650px) {
    .presentation-subtitle-badge { font-size: 20px; }
    .presentation-title { font-size: 50px; }
    .pricing-text { font-size: 16px; }
    .pricing-text-highlight { font-size: 31px; }
}
@media (max-width: 550px) {
    .presentation-subtitle-badge { font-size: 15px; }
    .presentation-title { font-size: 40px; }
    .pricing-text { font-size: 13px; }
    .pricing-text-highlight { font-size: 28px; }
}
@media (max-width: 450px) {
    .presentation-subtitle-badge { font-size: 10px; }
    .presentation-title { font-size: 30px; }
    .pricing-text { font-size: 10px; }
    .pricing-text-highlight { font-size: 25px; }
}

/* Navbars */

.presentation-lower-navbar {
    box-shadow: 0px -8px 20px 1px #182b4c;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3d5886;
}
.presentation-upper-navbar {
    box-shadow: 0px -8px 20px 1px #182b4c;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3d5886;
    position: sticky;
    z-index: 1000;
    top: 0;
}
.presentation-upper-navbar-icons {
    align-items: center;
    color: #f5f5f5;
}
.presentation-upper-navbar-icons:hover {
    color: #24c0627d;
}

.loading-icon {
    font-size: 60px;
    justify-content: center;
    display: flex;
    color: #f5f5f5;
    opacity: 60%;
}

.modal-confirm-button {
    font-size: 16px;
    color: #f5f5f5;
    background: #24c063;
    border-color: #3d5886;
    cursor: pointer;
}

.modal-confirm-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-cancel-button{
    font-size: 16px;
    color: #3d5886;
    background: #f5f5f5;
    border-color: #3d5886;
}


.calendar-today-color {
    color: #ffffff;
  }
  
  .calendar-birthday-color {
      color: #8cb8e8;
    }
  
  .calendar-holiday-color {
    color: #6adaff;
  }
  
  .calendar-illness-or-injury-color {
    color: #e88f9a;
  }
  
  .calendar-public-holiday-color {
    color: #3dc2c1;
  }
  
  .calendar-loan-color {
    color: #b38fe3;
  }
  
  .calendar-suspension-color {
    color: #f27e6c;
  }
  
  .calendar-training-color {
    color: #7dc77d;
  }

  .calendar-psychological-examination-color {
    color: #f1c867;
  }

  .calendar-medical-examination-color {
    color: #f5a623;
  }

  .calendar-first-day-color {
    color: #9bdb8c;
  }

  .calendar-last-day-color {
    color: #f78fb3;
  }

  .modal-content {
    text-wrap-mode: wrap;
    font-size: 17px !important;
    color: #3d5886 !important;
    background-color: #f5f5f5 !important;
    box-shadow: 0 0 10px 2px #3d5886;
    border-radius: 20px;
  }

  .modal-content b {
    font-weight: 600;
  }

  .modal-content .form-label {
    color: #3d5886 !important;
  }

  .modal-content .form-control {
    color: #3d5886 !important;
  }

  .modal-title {
    font-size: 25px;
  }

  .error-message {
    color: #fa5555 !important;
    font-weight: 600 !important;
  }

  .datatable tbody tr {
    vertical-align: middle !important;
  }

  .datatable.datatable-sm td {
    text-wrap-mode: wrap !important;
  }

  .safety-az-cell-inner-section-title {
    margin-bottom: 0px;
    font-weight: 700;
    color: #F5f5f5;
  }

  .safety-az-cell-inner-section-content {
    color: #a6bae8;
    font-style: italic;
  }

  .select-option {
    height: 70px !important;
    text-wrap-mode: wrap !important;
  }

  .stepper-mobile-head {
    color: #a6bae8 !important;
    background-color: #3d5886 !important;
    font-weight: 600 !important;
  }

  .stepper-mobile-footer {
    color: #a6bae8 !important;
    background-color: #3d5886 !important;
  }

  .stepper-mobile-progress-bar {
    background-color: #a6bae8 !important;
  }

  .calendar {
    --mdb-calendar-btn-tools-color: #f5f5f5 !important;
    --mdb-calendar-hover-btn-tools-color: #4f6b9c !important;
    --mdb-calendar-disabled-day-number-color: #9fa6b2 !important;
    --mdb-calendar-hover-table-cell-bg: #3d5886 !important;
    font-size: 20px !important;
  }

  .calendar table td {
    background: #4f6b9c !important;
  }