﻿

/* FONT AWESOME OVERRIDE */
/* ------------------------------------------------------------------------ */

.fa {
    --fa-fw: auto;
}


/* ALERT ELEMENTS */
/* ------------------------------------------------------------------------ */

.alert {
    font-size: 0.90rem;
    padding: 10px 10px 10px 10px;
}

.alert .info-text-important {
    color: #051f42;
    font-weight: bold;
    text-transform: uppercase;
}

.alert .info-text {
    color: #051f42;
}

.alert i {

}

.alert p {
    margin-bottom: 8px;
}

.no-margin .alert {
    margin-bottom: 0px;
}


/* ERROR PAGE ELEMENTS */
/* ------------------------------------------------------------------------ */

.centered-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.error-content {
    text-align: center;
}

.error-icon {
    font-size: 10rem;
    color: #dc3545;
    margin-bottom: 0px;
}

.alert.error {
    width: 100%;
    padding: 20px;
}

.alert.error strong {
    font-size: 2rem;
}


/* MAIN LAYOUT ELEMENTS */
/* ------------------------------------------------------------------------ */

.main-body {
    margin-bottom: 120px;
    font-size: 1.00rem;
}

.right {
    text-align: right;
}


/* PAGE ELEMENTS */
/* ------------------------------------------------------------------------ */

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.title-and-badges {
    display: flex;
    align-items: flex-start; /* align top of badges with top of title */
    gap: 1rem; /* small spacing between title and badges */
}

    .page-title h1.text, .page-title-center h1.text {
        color: #051F42;
        margin-bottom: 0px;
        padding-bottom: 0px
    }

.page-sub-title {
    color: #051F42;
    font-size: 1.00rem;
    margin-top: -2px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

    .page-sub-title h2.text {
        margin-bottom: 0px;
        padding-bottom: 0px
    }

h3.text {
    font-size: 1.6em;
    margin-top: 10px;
}


/* GOOGLE MAPS ELEMENTS */
/* ------------------------------------------------------------------------ */

.pac-container {
    z-index: 7051 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    
}

    .pac-container .pac-item span {
        font-size: 0.85rem !important;
    }


/* MODAL ELEMENTS */
/* ------------------------------------------------------------------------ */

.modal {
    z-index: 3000;
}

.modal-backdrop {
    z-index: 2999
}

.modal-content {
    /*background: rgba(255, 255, 255, 0.60);*/
    background: rgba(255, 255, 255, 1.00);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
}

.modal-header {
    padding: 10px 25px 10px 20px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(5, 31, 66, 0.1) 100%);
    border-bottom: none 0px #ffffff;
}

.modal-footer {
    border-top: none 0px #ffffff;
}

.modal-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #051F42;
    margin-bottom: 0px;
    padding-bottom: 0px
}

.modal-body {
    font-size: 0.85rem;
    color: #051F42;
    padding: 0px 20px;
    display: block;
}

    .modal-body .form-label {
        color: #555555;
    }

    .modal-body .form-control, .modal-body .form-select {
    }

    .modal-body .row .form-field {
        position: relative;
    }

    .modal .subjectivity {
        font-size: 0.90rem;
        color: #051f42;
    }

.modal-body .section-divider {
    align-items: center;
    gap: 1rem;
    font-weight: lighter;
    font-size: 1.6rem;
    color: #051f42;
    margin: 10px 0px 10px 0px;
}

    .modal-body .section-divider hr {
        flex-grow: 1;
        border: none;
        border-top: 1px solid #ccc;
        margin: 0px;
    }

    .modal-body .field-list {
        margin-bottom: -15px;
        list-style-type: none;
        padding-left: 15px;
    }

        .modal-body .field-list li i {
            padding-right: 15px;
            font-size: 1.0rem;
        }

        .modal-body .field-list li {
            padding-bottom: 15px;
        }

        .modal-body .field-list .field-name {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: bold;
            border: solid 1px;
            border-radius: 5px;
            padding: 4px 10px;

        }


/* FORM ELEMENTS */
/* ------------------------------------------------------------------------ */

.row.standard-space-after {
    margin-bottom: 12px !important;
}

.form-container {
    /*background-color: #ffffff;*/
    border: 1px solid #ddd;
    border-radius: 5px;
    /*overflow: hidden;*/
    /*background: rgba(255, 255, 255, 0.35);*/
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    margin-bottom: 20px;
}

    .form-container.mandatory {
        border-color: rgba(5, 31, 66, 0.5);
    }

    .form-container.no-border {
        border: none;
    }

    .form-container.space-before {
        margin-top: 60px;
    }

    .form-container.no-space-after {
        margin-bottom: 20px;
    }

        .form-container .header {
            padding-top: 12px;
            padding-bottom: 15px;
            font-weight: bold;
            text-transform: uppercase;
            color: #051f42;
            font-size: 0.85rem;
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(5, 31, 66, 0.025) 100%);
        }

        .form-container .header.task-list {
            position: relative;
        }

            .form-container .header.task-list .tasklist-status {
                position: absolute;
                font-size: 1.25rem;
                right: 13px;
                top: 50%;
                transform: translateY(-50%);
            }

.referred-reason {
    color: #DC3545 !important;
}

    .form-container .sub-header.padded {
        margin-left: 39px;
    }

    .form-container.no-border .header {
        border-top: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: none;
        border-left: 1px solid #ddd;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .form-container.no-border .sub-header.standard {
        margin-top: -18px;
        padding-bottom: 12px;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }

    

    .form-container .header, .form-container .sub-header, .form-container .body {
        padding-left: 15px;
        padding-right: 15px;
    }

    .form-container .header, .form-container .sub-header, .form-container .body.summary {
        padding-top: 15px;
    }

        .form-container .header.large {
            position: relative;
            font-size: 2.25rem;
            line-height: 2.6rem;
            font-weight: lighter;
            text-transform: none;
        }

        .form-container .header.large i {
            font-size: 1.67rem;
            line-height: 2.6rem;
            margin-left: 2px;
            margin-right: 0px;
            vertical-align: text-bottom;
        }

        .form-container .header.large i.tight {
            margin-right: -5px;
        }

        .form-container .header.mandatory {
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(54, 169, 225, 0.05) 100%) !important;
        }

        .form-container .header button {
            position: absolute;
            top: 17px;
            right: 15px;
            z-index: 1;
        }

    .form-container .sub-header {
        margin-top: -15px;
        padding-top: 0px;
        padding-bottom: 15px;
        color: #051f42;
        font-size: 0.75rem;
    }

    .form-container .body {
        padding-top: 0px;
        padding-bottom: 15px;
        display: block;
    }

    .form-container .body.no-spacing {
        padding-left: 0px;
        padding-right: 0px;
        display: block;
    }

        .form-container .body.no-border {
            border: none;
        }

        .form-container .body.no-spacing.no-spacing-bottom {
            padding-bottom: 0px;
        }

        .form-container .body.no-spacing .row {
            padding: 0px;
            margin: 0px;
        }

        .form-container .body .form-control-container {
            position: relative;
            margin-bottom: 16px;
        }

        .form-container .body .form-control-container-end {
            position: relative;
        }

        .form-container .body .section-divider {
            align-items: center;
            gap: 1rem;
            font-weight: lighter;
            font-size: 1.6rem;
            color: #051f42;
            margin: 10px 0px 10px 0px;
        }

            .form-container .body .section-divider hr {
                flex-grow: 1;
                border: none;
                border-top: 1px solid #ccc;
                margin: 0px;
            }

.tab-container {
    background-color: #ffffff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
}

.form-body {
    position: relative;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.sidebar {
    position: sticky;
    top: 105px;
    align-self: start;
}

.tab-body {
    padding: 10px;
    display: block;
}

.form-field {
    position: relative;
    margin-bottom: 20px;
}

    .form-field.no-margin {
        position: relative;
        margin-bottom: 0px;
    }

    .form-field.read-only {
        position: relative;
        margin-bottom: 14px;
    }

    .form-field.editable-read-only input {
        background: none;
    }

.modal .form-field.editable-read-only input {
    background: #FAFAFA;
}

    .form-container .body .row .divider-left {
        border-left: solid 1px #ddd;
    }

    .form-container .body .row .divider-right {
        border-right: solid 1px #ddd;
    }

.form-container .body .row.space-before {
    margin-top: 12px;
}

.nav-tabs .nav-link {
    border-left: 1px solid #ddd !important;
    border-top: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-radius: 5px 5px 0 0 !important;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    color: #051f42 !important;
    font-size: 0.90rem;
    margin-right: 1px !important;
}

    .nav-tabs .nav-link.active {
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        font-weight: bold;
        text-transform: uppercase;
        color: #051f42 !important;
        font-size: 0.90rem;
    }

.side-bar.form-body {
    position: relative;
    padding-top: 10px;
}

.form-group-radio {
    margin-left: 3px;
    margin-bottom: 6px
}

.form-label {
    font-weight: normal;
    font-size: 0.70rem;
    color: #555555;
    margin: 0px 0px 0px 2px;
    text-transform: uppercase;
    display: block;
}

    .form-label.premium-total {
        font-size: 0.65rem;
        margin: -8px 0px 0px 0px;
        text-align: center;
    }

.form-container.referral-decline {
    padding: 0px;
}

    .form-container.referral-decline .body.summary {
        padding: 0px;
        background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 85%, rgb(220,53,69, 0.05) 100%);
    }

    .form-container.referral-decline .form-title {
        margin: 0px;
        padding: 8px 15px 0px 15px;
        font-size: 2.0rem;
        line-height: 2.6rem;
        font-weight: lighter;
        text-transform: none;
        color: #dc3545 !important;
        text-align: center;
    }

    .form-container.referral-decline .form-label {
        font-size: 0.75rem;
        margin: 8px 0px 0px 0px;
        padding: 0px 15px 15px 15px;
        text-align: center;
        font-weight: normal;
        color: #dc3545 !important;
        text-transform: none;
    }

    .form-label.declaration {
        color: #051f42;
    }

.form-check-label {
    font-weight: normal;
    font-size: 0.75rem;
    color: #555555;
    margin: 9px 0px 0px 0px;
    text-transform: uppercase;
    display: block;
}

.form-label-value {
    font-weight: normal;
    font-size: 0.90rem;
    color: #051f42;
    margin: 0px 0px 0px 2px;
    display: block;
}

.form-field.read-only .form-label-value {
    font-weight: normal;
    font-size: 0.95rem;
    color: #051f42;
    margin: 0px 0px 0px 2px;
    padding: 2px 0px 1px 0px;
    display: block;
    border-bottom: solid 1px #E8E8E8 !important;
    min-height: 28px;
}

.form-field.read-only.editable-inline .form-label-value {
    font-weight: normal;
    font-size: 0.95rem;
    color: #051f42;
    margin: 8px 0px 0px 2px;
    padding: 2px 0px 1px 0px;
    display: block;
    border-bottom: solid 1px #E8E8E8 !important;
    min-height: 28px;
}

.form-field.read-only .form-label {
    font-weight: normal;
    font-size: 0.70rem;
    color: #555555;
    margin: 0px 0px 0px 2px;
    text-transform: uppercase;
    display: block;
}

    .form-label-value.premium-total-currency {
        font-weight: normal;
        font-size: 0.75rem;
        text-align: center;
        margin: 0px 0px -18px 0px;
    }

    .form-label-value.premium-total {
        font-weight: 500;
        font-size: 3.0rem;
        text-align: center;
    }

.larger-checkbox {
    transform: scale(1.5);
    margin-top: 10px;
}

.larger-radiobox {
    transform: scale(1.5);
    margin-top: 12px;
}

.form-check-input {
    margin-left: 5px
}

.form-control, .form-select, .form-input, .form-check-input, .form-label-value, .btn.dropdown-toggle {
    font-size: 0.90rem;
    color: #051f42;
}

.form-select.max-width {
    width: 100%
}

    .form-check-input:checked {
        background-color: rgb(54, 169, 225, 1.0);
        border-color: rgb(54, 169, 225, 1.0);
    }

.search-button {
    background-color: #051f42;
    border-style: solid solid solid none;
    border-color: #dee2e6;
    border-width: 1px;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0 0.4rem 0.4rem 0;
    cursor: pointer;
}

.search-button:hover {
    background-color: #0056b3;
    color: white !important;
}

.btn.btn-primary, .btn.btn-secondary, .btn.btn-danger, .btn.btn-success, .btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-danger {
    text-transform: uppercase;
    font-size: 0.70rem;
    line-height: 1.35rem;
}

.btn.icon {
    display: inline-flex;
    align-items: center;
}

    .btn.icon .icon {
        font-size: 11pt !important;
        line-height: 1.35rem !important;
        vertical-align: middle;
        margin: 0px 4px 0px 0px !important;
    }

    .btn.btn-primary:hover, .btn.btn-outline-primary:hover {
        background-color: #36A9E1;
        border-color: #36A9E1;
    }
/*
    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }
*/
.btn.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0px;
    margin: 0px;
}

.btn.btn-primary.bind {
    background: #eb5d71 !important;
    border-color: #eb5d71 !important;
    color: #ffffff !important;
}

    .btn.btn-primary.bind:hover {
        background: #36a9e1 !important;
        border-color: #36a9e1 !important;
        color: #ffffff !important;
    }

.button-right {
    position: relative;
    text-align: right
}

    .button-right button {
        margin-top: 15px;
        align-self: flex-end;
    }

.btn.dropdown-toggle.form-select {
    border: solid 1px #DEE2E6;
    font-size: 0.90rem;
    margin-bottom: 0px;
    color: rgb(0, 0, 0, 0);
}

    .btn.dropdown-toggle.form-select .filter-option {
        color: #051f42;
    }

.dropdown.bootstrap-select.form-control .dropdown-item {
    padding-top: 1px;
    padding-bottom: 2px;
}

.dropdown.bootstrap-select.form-control .dropdown-item:hover {
    background-color: #767676;
}

.dropdown.bootstrap-select.form-control .dropdown-item:hover .text {
    color: #ffffff;
}

    .dropdown.bootstrap-select.form-control .dropdown-item.active {
        background-color: #36A9E1;
    }

        .dropdown.bootstrap-select.form-control .dropdown-item.active .text {
            color: #ffffff;
        }

.form-control.option, .bootstrap-select .dropdown-menu li a span.text, .bootstrap-select .no-results {
    font-size: 0.90rem;
    color: #051f42;
}

.dropdown-menu.header.show {
    z-index: 2100;
}

.dropdown.bootstrap-select.form-control {
    margin-bottom: 16px;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: rgb(0, 0, 0, 0);
}


.input-group-text {
    color: #555555;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    font-size: 0.85rem;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.numeric-0dp, .numeric-0dp-mandatory, .numeric-2dp, .numeric-2dp-mandatory, .numeric-mast-count, .numeric-total-sum-insured, .numeric-vessel-length-speed {
    text-align: right
}


.drop-area {
    width: 100%;
    text-align: center;
    border: 1px dashed #ddd !important;
    border-radius: 5px !important;
    background: #f8f9fa;
    cursor: pointer;
    padding: 45px 15px;
    margin-bottom: 15px;
}

    .drop-area p.instruction {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 0.95rem;
        margin-bottom: 0px;
    }

    .drop-area p.sub-instruction {
        text-transform: uppercase;
        font-size: 0.75rem;
        margin-top: 0px;
        margin-bottom: 0px;
    }

.ai-processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 150px;
}

.processing-icon i {
    font-size: 6rem;
    color: #6c757d;
}

.ai-processing-container .alert {
    width: 100%;
    text-align: center;
}

.ai-processing-container .alert .title {
    font-size: 1.75rem;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.uploaded-document-container .alert .title {
    text-align: left;
    font-size: 2.25rem;
    font-weight: lighter;
    text-transform: none;
    margin-bottom: 0px;
}

.uploaded-document-container .alert .text {
    text-align: left;
    font-size: 0.75rem;
    text-transform: none;
    margin-bottom: 0px;
}


.accordion {
    background: none !important;
    padding: 0px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: none;
    --bs-accordion-bg: none;
    font-size: 0.85rem;
}

.accordion-item {
    background: none !important;
    border-left: none;
    border-right: none;
}

    .accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button {
        border-radius: 0px;
    }

    .accordion-item:last-of-type {
        border-bottom: none;
    }

    .accordion-item .accordion-button {
        background: none;
        padding: 12px 15px;
        font-size: 0.85rem;
        border-radius: 0px;
        color: #051F42;
    }

        .accordion-item .accordion-button:focus {
            box-shadow: none;
        }

        .accordion-item .accordion-button:not(.collapsed) {
        }

        .accordion-item .value {
            font-weight: bold;
            font-style: normal;
            text-transform: uppercase;
            font-size: 0.65rem;
            margin-right: 4px;
        }

.accordion-header {
    padding: 0px;
    margin: 0px;
}

.accordion-body {
    padding: 0px;
    margin: 0px;
}

    .accordion-body.text {
        padding: 12px 15px !important;
        margin: 0px;
        color: #051F42;
        font-style: italic
    }

    .accordion-body .list-group {
        border-radius: 0px;
    }

        .accordion-body .list-group .list-group-item {
            background: none;
            border-radius: 0px;
            border-left: none;
            border-right: none;
            font-size: 0.80rem;
            margin: 0px;
            padding: 6px 18px 6px 40px;
        }

            .accordion-body .list-group .list-group-item:first-child {
            }

            .accordion-body .list-group .list-group-item:last-child {
                margin-bottom: 15px
            }


.spinner-border {
    margin: 0px 0px -3px 0px;
    font-size: 0.65rem;
}

.btn.icon-only {
    padding: 2px 0px 0px 0px !important;
    height: 36px !important;
    width: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn.icon-only i {
        font-size: 1rem;
        line-height: 1rem;
    }

    .btn.icon-only .spinner-border {
        margin: 0px 0px 2px 0px;
        font-size: 0.65rem;
    }



/* VALIDATION ELEMENTS */
/* ------------------------------------------------------------------------ */

.invalid-tooltip {
    font-size: 0.80rem;
    background-color: #dc3545;
    color: #fff;
    top: auto;
    right: 0px;
    margin: 1px 12px 0px 0px;
    padding: 3px 10px 4px 10px;
    border-radius: 5px;
    z-index: 2000;
}

.input-group .invalid-tooltip {
    bottom: -28px;
    right: 0px;
    margin: 0px 0px 0px 0px;
}

.form-group-radio .invalid-tooltip {
    left: 0px;
    right: auto;
    margin: 0px 0px 0px 12px;
}

.alert.validation {
    padding: 5px 10px 5px 10px;
}

.validation-summary-errors {
    font-size: 0.90rem;
}

    .validation-summary-errors ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .validation-summary-errors li {
        margin-bottom: 0.25rem;
        margin: 2px 0px 2px 0px;
    }


/* TABLE ELEMENTS */
/* ------------------------------------------------------------------------ */
.table {
    border-collapse: collapse;
}

.table tbody, tfoot, th, thead, tr {
    border: none !important;
}

.table td {
    border-top: solid 1px #dee2e6 !important;
    border-bottom: solid 1px #dee2e6 !important;
}

    .table.transparent, .table.transparent tr {
        background: none;
    }

    .table.new {
        position: relative !important;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-collapse: separate !important;
        border-spacing: 0 !important;
        z-index: 50;
        background: none;
    }

    .table.new tr {
        background: none;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

        .table.new thead tr {
            border: none;
            background: rgb(54, 169, 225, 0.05) !important;
            height: 50px;
        }

        .table.new thead tr th:first-of-type {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
            border-left: solid 1px #DEE2E6 !important;
            border-top-left-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
        }

        .table.new thead tr th:last-of-type {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
            border-right: solid 1px #DEE2E6 !important;
            border-top-right-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
        }

        .table.new thead tr th {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
        }


    .table.new td {
        border: none !important;
        border-bottom: solid 1px #dee2e6 !important;
    }

    .table th {
        text-transform: uppercase;
        color: #051f42;
        font-size: 0.90rem;
        padding: 8px;
    }

        .table th.int-value, .table td.int-value {
            width: 11%;
            text-align: right;
        }

        .table th.numeric-value, .table td.numeric-value {
            text-align: right;
        }

    .table th a {
        text-decoration: none;
        color: #051f42
    }

        .table th a:hover {
            text-decoration: underline;
            color: #051f42
        }

.table tr {
    vertical-align: middle;
    background-color: #ffffff;
}

.table td {
    vertical-align: middle;
    font-size: 0.90rem;
    padding: 8px;
    color: #051f42
}

    .table th.min-width, .table td.min-width {
        width: 0.5%;
        white-space: nowrap;
    }

        .table td.min-width.action {
            text-align: right;
            justify-content: flex-end; /* push to right */
            gap: 0.25rem;
        }

    .table th.text-center, .table td.text-center {
        text-align: center;
    }

    .table th.text-right, .table td.text-right {
        text-align: right;
    }

    .table td.dual-data {
        margin-left: 0px;
        padding-left: 0px;
        padding-top: 10px;
        vertical-align: middle;
        font-size: 0.75rem;
    }

.none-specified {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.70rem !important;
}

    .none-specified span {
        height: 12px;
        width: 12px;
        margin-right: 4px;
    }

    .shortened-description {
        max-width: 35ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* GENERAL STYLING */
/* ------------------------------------------------------------------------ */

.currency-code {
    font-size: 0.65rem;
    margin-right: 2px;
    color: #555555;
}

.currency-code.no-color {
    color: inherit;
}

.percentage-equivelant {
    font-size: 0.65rem;
    margin-left: 4px;
    color: #555555;
}

.disclaimer {
    font-size: 0.85rem;
    color: #051f42;
}

    .disclaimer a {
        color: #051f42;
    }

    .disclaimer a:hover {
        color: #ffffff;
    }

.numeric-year {
    text-align: right;
}


/* CHECKLIST STYLING */
/* ------------------------------------------------------------------------ */

.checklist {
    padding: 15px 15px 15px 15px;
}

.checklist-status {
    margin-right: 8px
}

.list-with-icons {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 5px;
}

    .list-with-icons li {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }


/* QUOTE/POLICY STYLING */
/* ------------------------------------------------------------------------ */

.search-input-wrapper {
    position: relative;
}

    .search-input-wrapper .filter-badges-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1249;
        padding-inline-end: 0.5rem;
        overflow-x: auto;
        pointer-events: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

        .search-input-wrapper .filter-badges-overlay .badge {
            pointer-events: auto;
            margin-inline-end: 0.15rem;
            background-color: #36a9e1 !important;
            text-transform: uppercase;
        }

            .search-input-wrapper .filter-badges-overlay .badge .badge-clear-link {
                color: #ffffff;
            }

.polaroid-container {
    position: relative;
    width: 100%;
    background: white;
    padding: 15px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    transform: rotate(-3deg);
    transition: transform 0.3s ease;
}

    .polaroid-container .polaroid-ratio {
        position: relative;
        width: 100%;
        padding-top: 80%;
        background: #f0f0f0;
        overflow: hidden;
    }

        .polaroid-container .polaroid-ratio img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .polaroid-container .caption {
        text-align: center;
        color: #333;
        margin: 15px 0px 0px 0px;
        word-wrap: break-word;
    }


.yacht-photo-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.yacht-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop to fill container */
    border-radius: 5px;
}

.yacht-photo-container .btn-open-external {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    padding: 6px 10px;
    transition: all 0.2s ease-in-out;
}

    .yacht-photo-container .btn-open-external:hover {
        background-color: #eb5d71;
        color: #fff;
        border-color: #eb5d71;
    }



/* SUMMARY SEARCH STYLING */
/* ------------------------------------------------------------------------ */

.search {
    margin-bottom: 10px;
}

    .search input {
        margin-bottom: 0px;
    }

    .search .btn-group {
        margin-right: 4px;
    }

        .search .btn-group button {
            text-transform: uppercase;
            font-size: 0.70rem;
            line-height: 1.5rem;
            padding-top: 5px;
            padding-bottom: 5px;
        }

    .search .dropdown-menu.show, .dropdown-menu.header.show {
        background: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .search .dropdown-menu.show {
        z-index: 2000;
    }

        .search .dropdown-menu.show .dropdown-item, .dropdown-menu.header.show .dropdown-item {
            padding-top: 8px;
            padding-bottom: 8px;
        }

            .search .dropdown-menu.show .dropdown-item:hover, .dropdown-menu.header.show .dropdown-item:hover {
                background: rgba(54, 169, 225, 0.1);
            }

        .search .dropdown-menu.show .dropdown-divider, .dropdown-menu.header.show .dropdown-divider {
            margin: 0px;
        }

    .search .dropdown-menu .quick-filter, .search .dropdown-submenu .quick-filter {
        display: inline-block;
        width: 15px;
        font-size: 0.6rem;
        color: #4F5052;
        margin: 0px 4px 0px -4px
    }

    .search .dropdown-submenu {
        position: relative;
        text-transform: uppercase;
        font-size: 0.70rem;
        line-height: 1.5rem;
    }

        .search .dropdown-submenu .dropdown-menu.show {
            background: rgba(255, 255, 255, 0.90);
        }

        .search .dropdown-submenu > .dropdown-toggle::after {
            transform: rotate(-90deg);
            margin-left: 0.5em;
            transform-origin: center;
        }

        .search .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -0.6rem;
        }


/* SUMMARY TABLE STYLING */
/* ------------------------------------------------------------------------ */

.table.summary {
    position: relative !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-spacing: 0px 5px;
    border-collapse: separate !important;
    z-index: 50;
    margin-top: -5px;
}

    .table.summary tr {
        background: none;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .table.summary thead tr {
        border: none;
        background: rgb(54, 169, 225, 0.05) !important;
        height: 50px;
    }

        .table.summary thead tr th:first-of-type {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
            border-left: solid 1px #DEE2E6 !important;
            border-top-left-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
        }

        .table.summary thead tr th:last-of-type {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
            border-right: solid 1px #DEE2E6 !important;
            border-top-right-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
        }

        .table.summary thead tr th {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
        }





    .table.summary tr {
        background: none !important;
        cursor: pointer;
    }

    .table.summary thead th {
        border-bottom: solid 1px #DEE2E6 !important;
        cursor: default;
    }

        .table.summary tr.data:hover {
            background-color: rgb(235, 93, 113, 0.025) !important;
            /*
                background-color: #FBDFE3 !important;
                background: linear-gradient(315deg, rgba(255, 255, 255, 0.25) 25%, rgba(235, 93, 113, 0.115) 100%) !important;
            */
        }

        .table.summary tr.data:hover td,
        .table.summary tr.data:hover td:first-of-type,
        .table.summary tr.data:hover td:last-of-type {
            border-color: rgb(235, 93, 113, 1.0) !important;
        }

        .table.summary tr.data td:first-of-type {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
            border-left: solid 1px #DEE2E6 !important;
            border-top-left-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
        }

        .table.summary tr.data td:last-of-type {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
            border-right: solid 1px #DEE2E6 !important;
            border-top-right-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
        }

        .table.summary tr.data td {
            border-top: solid 1px #DEE2E6 !important;
            border-bottom: solid 1px #DEE2E6 !important;
        }
    
    .table.summary tr.data.referred {
        background-color: rgb(255, 163, 79, 0.025) !important;
    }

.table.summary td.thumbnail {
    width: 1%;
    position: relative;
    text-align: center;
}

    .table.summary td.thumbnail img.thumbnail {
        width: 120px;
        height: 90px;
        object-fit: cover;
        border-radius: 5px;
        vertical-align: middle;
        box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
    }

    .table.summary td.thumbnail span.flag-icon {
        position: absolute;
        top: 13px;
        right: 13px;
    }

.table.summary td.yacht-details {
    white-space: nowrap;
}

    .table.summary td.yacht-details .placeholder {
        display: block;
        background: #86878c;
        border-radius: 4px;
    }

    .table.summary td.yacht-details .vessel-name {
        font-size: 1.1rem;
        font-weight: bold;
        color: #051F42;
        text-transform: uppercase;
        margin: 0px;
        padding: 0px;
        max-width: 25ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .table.summary td.yacht-details .vessel-name.placeholder {
            font-size: 0.9rem;
            color: #86878c;
            width: 20ch;
            max-width: 20ch;
        }

    .table.summary td.yacht-details .vessel-model {
        margin-top: -3px;
        padding: 0px;
        font-size: 0.75rem;

    }

        .table.summary td.yacht-details .vessel-model.placeholder {
            width: 25ch;
            margin-top: 2px;
            color: #86878c;
            font-size: 0.65rem;
        }

    .table.summary td.yacht-details .vessel-manufacturer {
        margin-top: -3px;
        padding: 0px;
        font-size: 0.75rem;
    }

        .table.summary td.yacht-details .vessel-manufacturer.placeholder {
            width: 20ch;
            margin-top: 2px;
            color: #86878c;
            font-size: 0.65rem;
        }

    .table.summary td.yacht-details .insured-name {
        margin-top: 5px;
        text-transform: uppercase;
        max-width: 30ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table.summary td.yacht-details .title {
        display: inline-block;
        width: 25px;
        text-transform: uppercase;
        font-size: 0.5rem;
        color: #4F5052;
    }

    .table.summary td.reference {

    }

.table.summary .badge {
    padding: 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
}

    .table.summary .badge.status, tr.financial-transaction .badge.status, .help-topic .badge.status {
        background-color: #34519f;
    }

        .table.summary .badge.status.referred, .help-topic .badge.status.referred {
            background-color: #ffa34f;
        }

        .table.summary .badge.status.expired, .table.summary .badge.status.cancelled, .help-topic .badge.status.expired, .help-topic .badge.status.cancelled {
            background-color: #eb5d71;
        }

            .table.summary .badge.status.ntu, .help-topic .badge.status.ntu {
                background-color: #955ea3;
            }

    .table.summary .badge.type {
        background-color: #36a9e1;
    }

    .table.summary .badge.estimated-inception.red {
        background-color: #eb5d71;
    }

    .table.summary .badge.estimated-inception.amber {
        background-color: #ffa34f;
    }

    .table.summary .badge.estimated-inception.green {
        background-color: #36a9e1;
    }

.table.summary td.broker-details {
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .table.summary td.broker-details .title {
        display: inline-block;
        width: 28px;
        text-transform: uppercase;
        font-size: 0.5rem;
        color: #4F5052;
    }

.table.summary td.reference {
}

.table.summary td.broker-details span {
    display: inline-block;
    width: 10px;
    font-size: 0.6rem;
    color: #4F5052;
}

.table.summary td.last-column {
    padding-right: 10px;
}

.table.summary td.action {
    width: 25px;
    padding: 0;
    position: relative;
    vertical-align: middle;
}

    .table.summary td.action .dropdown {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
    }

        .table.summary td.action .dropdown .btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
            border: none;
        }

        .table.summary td.action .dropdown .btn {
            box-shadow: none !important;
        }

            .table.summary td.action .dropdown .btn:hover,
            .table.summary td.action .dropdown .btn:focus,
            .table.summary td.action .dropdown .btn:active,
            .table.summary td.action .dropdown.show > .btn {
                background-color: rgb(235, 93, 113) !important;
                border-left: solid 1px rgb(235, 93, 113) !important;
                color: #fff !important;
            }

                .table.summary td.action .dropdown .btn.btn-outline-secondary:focus,
                .table.summary td.action .dropdown .btn.btn-outline-secondary:active,
                .table.summary td.action .dropdown.show > .btn.btn-outline-secondary {
                    background-color: rgb(235, 93, 113) !important;
                    border-color: rgb(235, 93, 113) !important;
                    color: #fff !important;
                }

    .table.summary .dropdown .dropdown-menu {
        z-index: 1400;
        background: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        padding-top: 0px;
        padding-bottom: 0px;
        overflow: hidden;
        margin-top: 0px;
        margin-bottom: 0px;
    }

        .table.summary .dropdown .dropdown-menu .dropdown-item, .dropdown-menu.header .dropdown-item {
            color: #000000;
            font-size: 0.70rem;
            line-height: 1.50rem;
            font-weight: normal;
            text-transform: uppercase;
            padding-top: 8px;
            padding-bottom: 8px;
        }

            .table.summary .dropdown .dropdown-menu .dropdown-item:hover {
                background: rgba(54, 169, 225, 0.1);
            }

        .table.summary .dropdown .dropdown-menu .dropdown-divider {
            margin: 0px;
        }

        .table.summary .dropdown .dropdown-menu .dropdown-item .action, .dropdown-menu.header .dropdown-item .action {
            display: inline-block;
            width: 15px;
            font-size: 0.6rem;
            color: #4F5052;
            margin: 0px 4px 0px -4px;
        }

        .badge.outstanding-premium {
        }

            .badge.outstanding-premium.paid, .badge.payment-status.paid {
                background-color: #36a9e1;
            }

            .badge.outstanding-premium.due, .badge.payment-status.due {
                background-color: #ffa34f;
            }

            .badge.outstanding-premium.overdue, .badge.payment-status.overdue {
                background-color: #eb5d71;
            }

            .badge.outstanding-premium.scheduled, .badge.payment-status.scheduled {
                background-color: #36a9e1;
            }


/* SUBJECTIVITY STYLING */
/* ------------------------------------------------------------------------ */

.badge.subjectivity {
    padding: 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
}

    .badge.subjectivity i {
        font-style: normal;
        line-height: 1;
        text-align: center;
        text-rendering: auto;
    }

    .badge.subjectivity.warning {
        background-color: #ffa34f;
    }

    .badge.subjectivity.success {
        background-color: #36a9e1;
    }


/* KANBAN STYLING */
/* ------------------------------------------------------------------------ */
.kanban-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

    .kanban-container .col {
        width: 20%;
    }

    .kanban-container .column {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
    }

        .kanban-container .column .column-header {
            padding: 0px;
            margin: 0px;
            text-transform: uppercase;
            font-weight: bold;
            color: #051f42;
            font-size: 0.90rem;
            padding: 8px;
            border-bottom: solid 1px #dee2e6 !important;
        }

    .kanban-container .kanban-item {
        position: relative;
        display: block;
        margin: 0px;
        padding: 8px;
        color: #051f42;
        border: none;
        text-decoration: none;
    }

        .kanban-container .kanban-item.bind {
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(54, 169, 225, 0.02) 100%) !important;
        }

        .kanban-container .kanban-item.referred {
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(235, 93, 113, 0.10) 100%) !important;
        }

        .kanban-container .kanban-item.todo-15 {
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 163, 79, 0.10) 100%) !important;
        }

        .kanban-container .kanban-item.todo-14 {
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 163, 79, 0.20) 100%) !important;
        }

        .kanban-container .kanban-item.todo-07 {
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 163, 79, 0.30) 100%) !important;
        }

        .kanban-container .kanban-item.action {
            width: 100%;
            text-align: inherit;
            border: solid 1px #dee2e6;
            border-radius: 5px;
            padding: 0px;
            margin: 5px 0px 0px 0px;
        }

        .kanban-container .kanban-item.action:hover,
        .kanban-container .kanban-item.action:focus {
            z-index: 1;
            text-decoration: none;
            background-color: rgb(235, 93, 113, 0.025) !important;
            border-color: rgb(235, 93, 113, 1.0) !important;
        }

            .kanban-container .kanban-item.action:active {
                color: var(--bs-list-group-action-active-color, #212529);
                background-color: var(--bs-list-group-action-active-bg, #e9ecef);
            }

        .kanban-container .kanban-item .subjectivity {
            position: absolute;
            bottom: 8px;
            left: 8px;
        }

        .kanban-container .kanban-item .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .kanban-container .kanban-item .header .reference, .kanban-container .kanban-item .header .inception-date {
                font-size: 0.75rem;
                color: #051F42;
                text-transform: uppercase;
                margin: 0px;
                padding: 0px;
            }

            .kanban-container .kanban-item .header .reference {
                font-weight: 500;
            }

        .kanban-container .kanban-item .core-details {
            display: flex;
            align-items: center;
        }

            .kanban-container .kanban-item .core-details .thumbnail {
                flex-shrink: 0;
                margin-right: 3px;
            }

                .kanban-container .kanban-item .core-details .thumbnail img {
                    width: 53px;
                    height: 40px;
                    object-fit: cover;
                    border-radius: 5px;
                    border: solid 1px #dee2e6;
                }

            .kanban-container .kanban-item .core-details .text-block {
                display: flex;
                flex-direction: column;
            }

                .kanban-container .kanban-item .core-details .text-block .vessel-name {
                    font-size: 0.9rem;
                    font-weight: bold;
                    color: #051F42;
                    text-transform: uppercase;
                    margin: 0px;
                    padding: 0px;
                    max-width: 20ch;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .kanban-container .kanban-item .core-details .text-block .insured-name {
                    font-size: 0.65rem;
                    color: #051F42;
                    text-transform: uppercase;
                    margin: 0px;
                    padding: 0px;
                    max-width: 30ch;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

        .kanban-container .kanban-item .premium {
            text-align: right;
            font-size: 0.85rem;
            color: #051F42;
            margin-top: 5px;
        }

.kanban-container .kanban-item .title {
    display: inline-block;
    width: 28px;
    text-transform: uppercase;
    font-size: 0.5rem;
    color: #4F5052;
}

        .kanban-container .kanban-item .broker-details {
            font-size: 0.75rem;
            font-weight: normal;
            color: #051F42;
            margin: 0px;
            padding: 0px;
            max-width: 30ch;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        


/* PAGINATION STYLING */
/* ------------------------------------------------------------------------ */
.pagination .page-item .page-link {
    font-size: 0.85rem;
}

.pagination .page-item.active .page-link {
    border-color: #DEE2E6;
    background-color: #051f42;
    color: #ffffff;
}

.pagination .page-item .page-link {
    color: #051f42
}

    .pagination .page-item .page-link:hover {
        background-color: #36a9e1;
        color: #ffffff;
    }

p.pagination-summary {
    font-size: 0.75rem;
    color: #051f42;
}


/* FINANCIAL SUMMARY TABLE STYLING */
/* ------------------------------------------------------------------------ */

tr.financial-transaction.due {
}

tr.financial-transaction.overdue {
}

tr.financial-transaction.paid {
}


/* MOORING LOCATION STYLING */
/* ------------------------------------------------------------------------ */

.leaflet-container {
    border: solid 1px #C0C7D0;
    border-radius: 8px;
    margin-top: -16px;
    background: none !important;
}

.leaflet-popup-content-wrapper, .leaflet-popup-content {
    background: none !important;
}

.cards-container.location {
    width: 300px;
    margin-bottom: 0px;
    background: none;
}

    .cards-container.location .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: none;
    }

    .cards-container.location .card-body {
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-top: 1px solid #ddd;
        background: rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .cards-container.location .thumbnail-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f8f9fa;
    }

    .cards-container.location .thumbnail-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .cards-container.location .card-body .datasource-badge {
        position: absolute;
        top: 0px;
        right: 0px;
        max-height: 25px;
        padding: 3px 5px 2px 5px;
        margin: 0px;
        background-color: #ffffff;
        z-index: 10;
        border-radius: 0px 0px 0px 3px;
        box-shadow: -2px 0px 3px rgba(0, 0, 0, 0.1), 1px 2px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: flex;
        font-size: 0.75rem;
        align-items: center;
    }

    .cards-container.location .policy-container {
        position: absolute;
        height: 30px;
        top: 10px;
        left: 10px;
        z-index: 10;
        display: inline-block;
        font-size: 0.95rem;
    }

    .cards-container.location .flag-container {
        position: absolute;
        width: 40px;
        height: 30px;
        top: 10px;
        right: 10px;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 0 1px rgba(0,0,0,0.2);
    }

        .cards-container.location .flag-container .fi {
            width: 100%;
            height: 100%;
        }

    .cards-container.location .vesseltype-container {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.95rem;
    }

    .cards-container.location .vessel-name {
        font-size: 1rem;
        font-weight: bold;
        color: #051F42;
        margin: 0px 0px 0px 0px;
        text-transform: uppercase;
        max-width: 28ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cards-container.location .vessel-details {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

        .cards-container.location .vessel-details .vessel-mini-title-wrapper {
            display: flex;
            flex-direction: column;
            height: 50%;
            margin: 0px 0px 0px 0px;
        }

            .cards-container.location .vessel-details .vessel-mini-title-wrapper .vessel-model {
                font-weight: normal;
                font-size: 0.75rem;
                color: #555555;
                text-transform: uppercase;
                margin: 0px 0px 0px 0px;
                display: inline
            }

            .cards-container.location .vessel-details .vessel-mini-title-wrapper .vessel-mooring {
                font-weight: normal;
                font-size: 0.75rem;
                color: #051F42;
                margin: 0px 0px 0px 0px;
                display: inline;
            }

        .cards-container.location .vessel-details .vessellocation-info-middle,
        .cards-container.location .vessel-details .vessellocation-info-bottom {
            flex: 1;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #ddd;
            margin: 10px -15px 0px -15px;
            padding: 10px 0px 0px 0px;
            box-sizing: border-box;
        }

            .cards-container.location .vessel-details .vessellocation-info-middle .info-item,
            .cards-container.location .vessel-details .vessellocation-info-bottom .info-item {
                text-align: center;
                flex: 1;
                padding: 0px;
            }

                .cards-container.location .vessel-details .vessellocation-info-middle .info-item .vessel-mini-title,
                .cards-container.location .vessel-details .vessellocation-info-bottom .info-item .vessel-mini-title {
                    font-weight: normal !important;
                    font-size: 0.55rem;
                    color: #555555;
                    margin: 0px 0px 0px 0px;
                    text-transform: uppercase;
                }

                .cards-container.location .vessel-details .vessellocation-info-middle .info-item .vessel-mini-data,
                .cards-container.location .vessel-details .vessellocation-info-bottom .info-item .vessel-mini-data {
                    font-weight: bold;
                    font-size: 0.80rem;
                    color: #051F42;
                    margin: 0.00rem;
                    display: inline
                }

.leaflet-popup-content-wrapper, .leaflet-popup-content {
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    width: 300px;
}

.leaflet-popup.custom-polygon-summary-popup .leaflet-popup-content-wrapper .leaflet-popup-content {
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    width: 300px !important;
}

.cards-container.aggregation {
    margin: 0px;
}

    .cards-container.aggregation .card-body {
        position: relative;
        padding-left: 15px;
        padding-right: 15px;
        border: none;
    }

    .cards-container.aggregation .vessel-count {
        font-size: 1rem;
        font-weight: bold;
        color: #051F42;
        margin: 0px 0px 8px 0px;
        text-transform: uppercase;
        text-align: center;
    }

    .cards-container.aggregation .vessel-details .vessel-info-bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }

    .cards-container.aggregation .vessel-details .vessel-info-bottom .info-item {
        text-align: center;
        flex: 1;
        padding: 0px;
    }

        .cards-container.aggregation .vessel-details .vessel-info-bottom .info-item .vessel-mini-title {
            font-weight: normal !important;
            font-size: 0.55rem;
            color: #555555;
            margin: 0px 0px 0px 0px;
            text-transform: uppercase;
        }

        .cards-container.aggregation .vessel-details .vessel-info-bottom .info-item .vessel-mini-data {
            font-weight: bold;
            font-size: 0.85rem;
            color: #051F42;
            margin: 0.00rem;
            display: inline
        }

.geocode-results-list li.list-group-item-action.active:hover {
    color: #000000
}


/* CHART ELEMENTS */
/* ------------------------------------------------------------------------ */

.chart-container {
    --background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.35);
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgba(5, 31, 66, 0.015) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

    .chart-container .header {
        padding: 10px 10px 0px 10px;
        font-weight: bold;
        text-transform: uppercase;
        color: #051f42;
        font-size: 0.85rem;
    }

    .chart-container .body {
        padding: 0px;
        display: block;
    }


/* QUOTE CARD ELEMENTS */
/* ------------------------------------------------------------------------ */

.quote-card-container {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.quote-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.quote-card-badge {
    position: absolute;
    display: inline-block;
    padding: 3px 6px;
    text-transform: uppercase;
}

    .quote-card-badge.reference {
        color: #ffffff;
        font-size: 0.70rem;
        background-color: #36a9e1;
        z-index: 1000;
        margin: 1px 0px 0px 1px;
        border-top-left-radius: 4px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px
    }

    .quote-card-badge.inception {
        left: 0px;
        top: 25px;
        color: #ffffff;
        font-size: 0.65rem;
        background-color: #36a9e1;
        z-index: 1000;
        margin: 0px 0px 0px 1px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px
    }

        .quote-card-badge.inception.red {
            background-color: #eb5d71;
        }

        .quote-card-badge.inception.amber {
            background-color: #ffa34f;
        }

        .quote-card-badge.inception.green {
            background-color: #36a9e1;
        }

    .quote-card .image-wrapper {
        width: 100%;
        aspect-ratio: 4/3;
        background: #f0f0f0;
        position: relative;
    }

        .quote-card .image-wrapper img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.quote-card .card-banner {
    position: relative;
    height: 60px;
    width: 100%;
    margin: 0px;
    border-top: 1px solid #ddd;
    color: #051f42;
    transition: height .3s ease, margin-top .3s ease;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgba(5, 31, 66, 0.015) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

    .quote-card .banner-summary {
        padding: 6px 8px;
    }

        .quote-card .banner-summary .vessel-name {
            font-size: 1.1rem;
            font-weight: bold;
            color: #051F42;
            text-transform: uppercase;
            margin: 0px;
            padding: 0px;
            max-width: 28ch;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .quote-card .banner-summary .insured-name {
            display: inline-block;
            font-size: 0.75rem;
            color: #051F42;
            text-transform: uppercase;
            margin: -4px 0px 0px 0px;
            padding: 0px;
            max-width: 38ch;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .quote-card .banner-summary .title {
            display: inline-block;
            width: 15px;
            text-transform: uppercase;
            font-size: 0.5rem;
            color: #4F5052;
        }

        .quote-card .banner-details {
            position: relative;
            padding: 5px 8px;
            opacity: 0;
            border-top: 1px solid #ddd;
            transition: opacity .3s ease .15s;
        }

            .quote-card .banner-details .badge-overlay {
                position: absolute;
                z-index: 1009;
                color: #ffffff;
                font-size: 0.65rem;
                font-weight: bold;
                background-color: #051f42;
                border-radius: 5px;
                text-transform: uppercase;
                padding: 3px 6px;
            }

                .quote-card .banner-details .badge-overlay.referred {
                    background-color: #ffa34f;
                }

            .quote-card .banner-details .item.left {
                font-size: 0.75rem;
                text-transform: uppercase;
            }

            .quote-card .banner-details .item.left {
                font-size: 0.75rem;
                text-transform: uppercase;
                max-width: 30ch !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .quote-card .banner-details .item.right {
                font-size: 0.75rem;
                text-transform: uppercase;
                width: auto;
                text-align: right;
            }

            .quote-card .banner-details .item .title {
                display: inline-block;
                text-transform: uppercase;
                font-size: 0.5rem;
                color: #4F5052;
                margin-right: 2px;
            }

.quote-card:hover {
    /*border-color: rgb(235, 93, 113, 1.0);*/
}

    .quote-card:hover .card-banner {
        height: 160px;
        margin-top: -100px;
        background: rgba(255, 255, 255, 0.35);
        background: linear-gradient(360deg, rgba(255, 255, 255, 0.85) 50%, rgba(5, 31, 66, 0.015) 100%);
    }

        .quote-card:hover .banner-details {
            opacity: 1;
        }

.quote-card-container-more {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 22px;
    text-transform: uppercase;
    font-size: 0.70rem;
    color: #051f42;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.35);
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgba(5, 31, 66, 0.015) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .quote-card-container-more:hover {
        color: #ffffff;
        background-color: #36a9e1;
        cursor: pointer;
    }


/* VESSEL CARD ELEMENTS */
/* ------------------------------------------------------------------------ */

.vessel-card-container {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.vessel-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.vessel-card-badge {
    position: absolute;
    display: inline-block;
    padding: 3px 6px;
    text-transform: uppercase;
}

    .vessel-card-badge.type {
        color: #ffffff;
        font-size: 0.70rem;
        background-color: #36a9e1;
        z-index: 1000;
        margin: 1px 0px 0px 1px;
        border-top-left-radius: 4px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px
    }

.vessel-card .image-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f0f0f0;
    position: relative;
}

    .vessel-card .image-wrapper img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vessel-card .image-wrapper span.flag-icon {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 1.35rem;
        border-bottom-left-radius: 5px;
    }

.vessel-card .card-banner {
    position: relative;
    height: 76px;
    width: 100%;
    margin: 0px;
    border-top: 1px solid #ddd;
    color: #051f42;
    transition: height .3s ease, margin-top .3s ease;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgba(5, 31, 66, 0.015) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.vessel-card .banner-summary {
    padding: 6px 8px;
}

    .vessel-card .banner-summary .vessel-name {
        font-size: 1.1rem;
        font-weight: bold;
        color: #051F42;
        text-transform: uppercase;
        margin: 0px;
        padding: 0px;
        max-width: 28ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vessel-card .banner-summary .vessel-model {
        display: block;
        font-size: 0.75rem;
        color: #051F42;
        text-transform: uppercase;
        margin: -4px 0px 0px 0px;
        padding: 0px;
        max-width: 38ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vessel-card .banner-summary .vessel-manufacturer {
        display: block;
        font-size: 0.75rem;
        color: #051F42;
        text-transform: uppercase;
        margin: 2px 0px 0px 0px;
        padding: 0px;
        max-width: 38ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vessel-card .banner-summary .title {
        display: inline-block;
        width: 23px;
        text-transform: uppercase;
        font-size: 0.5rem;
        color: #4F5052;
    }

.vessel-card .banner-details {
    position: relative;
    padding: 5px 8px;
    opacity: 0;
    border-top: 1px solid #ddd;
    transition: opacity .3s ease .15s;
}

    .vessel-card .banner-details .badge-overlay {
        position: absolute;
        z-index: 1009;
        color: #ffffff;
        font-size: 0.65rem;
        font-weight: bold;
        background-color: #051f42;
        border-radius: 5px;
        text-transform: uppercase;
        padding: 3px 6px;
    }

        .vessel-card .banner-details .badge-overlay.referred {
            background-color: #ffa34f;
        }

    .vessel-card .banner-details .item.center {
        font-size: 0.75rem;
        text-transform: uppercase;
        width: auto;
        text-align: center;
    }

    .vessel-card .banner-details .item .title {
        display: block;
        text-transform: uppercase;
        font-size: 0.5rem;
        color: #4F5052;
        margin-bottom: -2px;
    }

    .vessel-card .banner-details .item .unit {
        font-size: 0.65rem;
        margin-left: 0px;
        color: #555555;
        text-transform: none;
    }


.vessel-card:hover {
    /*border-color: rgb(235, 93, 113, 1.0);*/
}

    .vessel-card:hover .card-banner {
        height: 150px;
        margin-top: -74px;
        background: rgba(255, 255, 255, 0.35);
        background: linear-gradient(360deg, rgba(255, 255, 255, 0.85) 50%, rgba(5, 31, 66, 0.015) 100%);
    }

    .vessel-card:hover .banner-details {
        opacity: 1;
    }


/* TOTAL SUMS INSURED ELEMENTS */
/* ------------------------------------------------------------------------ */

.numeric-total-sum-insured {
    font-size: 2.25rem;
    font-weight: lighter;
}


/* VESSEL-USE ELEMENTS */
/* ------------------------------------------------------------------------ */

.list-group.racing-event {
    margin-top: 6px;
}

.list-group.racing-event .list-group-item {
    font-size: 0.75rem !important;
    margin: 0px;
    padding: 6px 12px
}


/* ADDITIONAL ITEM / TENDER ELEMENTS */
/* ------------------------------------------------------------------------ */

.category-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
    text-align: center;
}

    .category-item:hover {
        outline: solid 1px rgb(235, 93, 113, 1.0);
        outline-offset: -1px;
        background: linear-gradient(315deg, rgba(255, 255, 255, 0.25) 50%, rgba(235, 93, 113, 0.115) 100%);
        cursor: pointer;
        box-shadow: 0rem 0.5rem 1rem rgba(0,0,0,0.1);
    }

    .category-item i {
        padding: 16px 6px 0px 6px;
        margin: 0px;
    }

    .category-item .category-label {
        vertical-align: top;
        text-transform: uppercase;
        font-size: 0.70rem;
        padding: 16px 4px;
        margin: 0px;
    }

#additionalItemSearchDropdown, #tenderSearchDropdown {
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    box-sizing: border-box;
    max-height: 300px;
    overflow-y: auto;
}

    #additionalItemSearchDropdown .dropdown-item {
        display: grid;
        grid-template-columns: auto 1fr auto 100px;
        grid-template-rows: auto auto;
        grid-template-areas:
            "icon model type battery "
            "icon manufacturer type removable";
        column-gap: 8px;
        align-items: center;
    }

    #tenderSearchDropdown .dropdown-item {
        display: grid;
        grid-template-columns: auto 1fr auto auto 100px;
        grid-template-rows: auto auto;
        grid-template-areas:
            "icon model length enginemodel battery "
            "icon manufacturer enginecount enginemanufacturer removable";
        column-gap: 8px;
        align-items: center;
    }

        #additionalItemSearchDropdown .dropdown-item .icon,
        #tenderSearchDropdown .dropdown-item .icon {
            grid-area: icon;
            width: 24px;
            height: 24px;
        }

    #additionalItemSearchDropdown .dropdown-item .model,
    #tenderSearchDropdown .dropdown-item .model {
        grid-area: model;
        font-size: 0.80rem;
        margin-bottom: 0px;
        padding: 0px;
    }

        #additionalItemSearchDropdown .dropdown-item .manufacturer,
        #tenderSearchDropdown .dropdown-item .manufacturer {
            grid-area: manufacturer;
            font-size: 0.80rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: -4px;
            padding: 0px;
        }

    #additionalItemSearchDropdown .dropdown-item .type {
        grid-area: type;
    }

    #tenderSearchDropdown .dropdown-item .length {
        grid-area: length;
        display: block;
        text-align: right;
        font-size: 0.8rem;
        color: #4F5052;
        justify-self: end;
        margin-right: 12px;
    }

    #tenderSearchDropdown .dropdown-item .enginecount {
        grid-area: enginecount;
        display: block;
        text-align: right;
        font-size: 0.8rem;
        color: #4F5052;
        justify-self: end;
        margin-right: 12px;
    }

    #tenderSearchDropdown .dropdown-item .enginemodel {
        grid-area: enginemodel;
        display: block;
        text-align: right;
        font-size: 0.8rem;
        color: #4F5052;
        justify-self: end;
    }

    #tenderSearchDropdown .dropdown-item .enginemanufacturer {
        grid-area: enginemanufacturer;
        display: block;
        text-align: right;
        font-size: 0.8rem;
        color: #4F5052;
        justify-self: end;
    }

        #additionalItemSearchDropdown .dropdown-item .type .badge {
            font-size: 0.65rem;
            text-transform: uppercase;
            background-color: #34519f;
            border-radius: 5px;
        }

    #additionalItemSearchDropdown .dropdown-item .battery,
    #tenderSearchDropdown .dropdown-item .battery {
        grid-area: battery;
    }

    #additionalItemSearchDropdown .dropdown-item .removable,
    #tenderSearchDropdown .dropdown-item .removable {
        grid-area: removable;
    }

    #additionalItemSearchDropdown .dropdown-item .battery,
    #additionalItemSearchDropdown .dropdown-item .removable,
    #tenderSearchDropdown .dropdown-item .battery,
    #tenderSearchDropdown .dropdown-item .removable {
        text-transform: uppercase;
        font-size: 0.5rem;
        color: #4F5052;
        align-items: center;
        justify-self: end;
        display: inline-flex;
        align-items: center;
    }

    #tenderSearchDropdown .itemtitle {
        text-transform: uppercase;
        font-size: 0.5rem;
        color: #4F5052;
        align-items: center;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        margin-right: 2px !important;
    }

        #additionalItemSearchDropdown .dropdown-item .battery i,
        #additionalItemSearchDropdown .dropdown-item .removable i,
        #tenderSearchDropdown .dropdown-item .battery i,
        #tenderSearchDropdown .dropdown-item .removable i {
            font-size: 1.0rem;
            margin-left: 3px;
        }


/* ADDITIONAL ITEM / TENDER ELEMENTS */
/* ------------------------------------------------------------------------ */

.navigation {
    position: relative;
}

    .navigation .navigation-map {
        width: 100%;
        height: 450px;
        margin: 0px 0px 12px 0px
    }

    .navigation .navigation-areas {
        position: absolute;
        top: 12px;
        right: 24px;
        z-index: 2500;
        padding: 6px 0px 6px 0px;
        border-radius: 5px;
        background-color: rgb(255, 255, 255, 0.45);
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        width: 300px;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

        .navigation .navigation-areas .header,
        .navigation .navigation-areas .sub-header,
        .navigation .navigation-areas .body {
            background: none !important;
        }

        .navigation .navigation-areas .header {

        }

        .navigation .navigation-areas .sub-header {
        }

        .navigation .navigation-areas .selected-areas {
            font-size: 0.75rem;
            color: #051f42;
        }

            .navigation .navigation-areas .selected-areas .range-item {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgb(5, 31, 66, 1.0);
                border-radius: 5px;
                padding: 0px;
                margin-bottom: 6px;
                cursor: pointer;
                background-color: rgb(255, 255, 255, 0.55);
            }

                .navigation .navigation-areas .selected-areas .range-item .icon {
                    flex: 0 0 auto;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    margin: 4px;
                    padding: 4px;
                }

                .navigation .navigation-areas .selected-areas .range-item .description {
                    flex: 1;
                    display: flex;
                    align-items: flex-start;
                    padding-top: 4px;
                    margin: 0px;
                    padding: 4px 0px;
                }

                .navigation .navigation-areas .selected-areas .range-item .action {
                    flex: 0 0 auto;
                    align-items: center;
                    justify-content: center;
                    margin: 0px;
                    padding: 0px;
                }

                    .navigation .navigation-areas .selected-areas .range-item .action button {
                        display: flex;
                        align-items: center;
                        border-radius: 0px;
                        padding: 6px;
                    }

.mooring-location-popup {
    width: 160px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

    .mooring-location-popup .leaflet-popup-content,
    .mooring-location-popup .leaflet-popup-content-wrapper {
        width: auto !important;
        border-radius: 5px;
        text-align: center;
    }

    .mooring-location-popup .leaflet-popup-content {
        padding: 6px !important;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 0.70rem;
        color: rgb(5, 31, 66, 1.0);
    }

        .mooring-location-popup .leaflet-popup-content small {
            font-size: 0.55rem;
            font-weight: normal;
            margin-top: -2px;
        }


/* NAVIGATION CARD ELEMENTS */
/* ------------------------------------------------------------------------ */

.navigation-card-container {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    margin-bottom: 24px;
}

    .navigation-card-container .na-checkbox {
        position: absolute;
        display: inline-block;
        padding: 3px 6px;
        text-transform: uppercase;
        z-index: 2501;
        margin: 1px 0px 0px 1px;
    }

.navigation-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
}

    .navigation-card.selected {
        
    }

    .navigation-card .map-wrapper {
        width: 100%;
        aspect-ratio: 4/3;
        background: #f0f0f0;
        position: relative;
    }

    .navigation-card .map-wrapper .na-map {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
        border-radius: 0px;
        margin-top: 0px;
    }

.navigation-card .card-banner {
    position: relative;
    height: 60px;
    width: 100%;
    margin: 0px;
    border-top: 1px solid #ddd;
    color: #051f42;
    transition: height .3s ease, margin-top .3s ease;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgba(5, 31, 66, 0.015) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 2500;
}

.navigation-card .banner-summary {
    padding: 6px 8px;
}

    .navigation-card .banner-summary .na-group {
        display: inline-block;
        font-size: 0.75rem;
        color: #051F42;
        text-transform: uppercase;
        margin: 4px 0px 0px 0px;
        padding: 0px;
        max-width: 38ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navigation-card .banner-summary .na-name {
        font-size: 1.1rem;
        font-weight: bold;
        color: #051F42;
        text-transform: uppercase;
        margin: -8px 0px 0px 0px;
        padding: 0px;
        max-width: 28ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.navigation-card .banner-details {
    position: relative;
    padding: 5px 8px;
    opacity: 0;
    border-top: 1px solid #ddd;
    transition: opacity .3s ease .15s;
    font-size: 0.85rem;
}

.navigation-card:hover {
    /*border-color: rgb(235, 93, 113, 1.0);*/
}

    .navigation-card:hover .card-banner {
        height: 160px;
        margin-top: -100px;
        background: rgba(255, 255, 255, 0.35);
        background: linear-gradient(360deg, rgba(255, 255, 255, 0.85) 50%, rgba(5, 31, 66, 0.015) 100%);
    }

    .navigation-card:hover .banner-details {
        opacity: 1;
    }

.group-badge.bg-primary {
    background-color: #36a9e1 !important;
}

.group-badge.bg-secondary {
    background-color: #ddd !important;
}


/* QUOTE DETAILS ELEMENTS */
/* ------------------------------------------------------------------------ */

.checklist-status {
    display: relative;
    right: 0px;
}

.flash {
    animation: flash-bg 1s ease-in-out 2;
}

@keyframes flash-bg {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(255,0,0,0.2);
    }

    100% {
        background-color: transparent;
    }
}

.flash-field {
    animation: flash-field-bg 1s ease-in-out 2 !important;
    outline: 1px solid rgba(255,0,0,0.8) !important;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

@keyframes flash-field-bg {
    0% {
        box-shadow: 0 0 0px 0 rgba(255,0,0,0.8);
    }

    50% {
        box-shadow: 0 0 8px 3px rgba(255,0,0,0.8);
    }

    100% {
        box-shadow: 0 0 0px 0 rgba(255,0,0,0.8);
    }
}

.form-control.search, .vessel-search input {
    background-color: rgb(54, 169, 255, 0.1);
    border-color: rgb(5, 31, 66, 0.25);
}

.vessel-search {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .vessel-search input {
        padding-right: 0px;

    }

    .vessel-search .keycap {
        position: absolute;
        right: 3px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.0rem;
        font-family: sans-serif;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 9px;
        background-color: #f8f9fa;
        color: #333;
        cursor: pointer;
    }

.input-group.sums-insured {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .input-group.sums-insured .form-select.currency {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 65px;
        padding: 0px 0px 0px 7px;
        font-size: 0.875rem;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .input-group.sums-insured .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }


/* QUOTE CONFIGURATION ELEMENTS */
/* ------------------------------------------------------------------------ */

.quote-configuration-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 14px;
}

    .quote-configuration-badges .badge {
        width: auto;
        display: inline-block;
        white-space: nowrap;
    }

    .quote-configuration-badges .badge.created {
        background-color: #36a9e1;
    }

    .quote-configuration-badges .badge.estimated-inception {
    }

        .quote-configuration-badges .badge.estimated-inception.red {
            background-color: #eb5d71;
        }

        .quote-configuration-badges .badge.estimated-inception.amber {
            background-color: #ffa34f;
        }

        .quote-configuration-badges .badge.estimated-inception.green {
            background-color: #36a9e1;
        }

.form-field.read-only.action {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .form-field.read-only.action input {
        padding-right: 0px;
    }

.form-field.read-only.action .btn {
    position: absolute;
    right: 12px;
    bottom: 4px;
}

.summary-row {
    margin-top: 2px;
    margin-bottom: 2px;
}

.summary-financial.title {
    font-weight: normal;
    font-size: 0.7rem;
    color: #555555;
    text-transform: uppercase;
    margin-bottom: 1px
}

.summary-financial.value {
    font-weight: normal;
    font-size: 1.0rem;
    color: #051f42;
    text-transform: uppercase;
}

.summary-financial.setting {
    font-weight: normal;
    font-size: 0.85rem;
    color: #051f42;
    margin-bottom: 1px
}

hr.summary-financial {
    margin: 2px 0px 2px 0px;
}

.row.summary-financial {
    padding: 0px;
    margin: 0px 0px 8px 0px;
}

.btn.configuration-generate {
    width: 100%;
    margin-bottom: 8px;
}

.btn.configuration-bind {
    width: 100%;
    margin-top: -12px;
    margin-bottom: 8px;
    background: #eb5d71;
    border-color: #eb5d71;
    color: #ffffff;
}

.btn.configuration-refer {
    width: 100%;
    margin-bottom: 8px;
}

.btn.configuration-details {
    width: 100%;
    margin-bottom: 20px;
}

.btn.configuration-ntu {
    width: 100%;
    margin-bottom: 20px;
}

.btn.configuration-save {
    width: 100%;
}

.btn.configuration-mta {
    width: 100%;
    margin-bottom: 8px;
}

.btn.configuration-aiunderwriter {
    margin-top: 10px;
    width: 100%;
    background-color: rgb(97, 196, 163, 0.5);
    border-color: rgb(97, 196, 163, 1);
}


.summary-vessel-flag {
    position: absolute;
    top: 20px;
    right: 15px;
    text-align: center;
    padding: 0px;
}

    .summary-vessel-flag .flag-icon {
        display: inline-block;
        width: 60px;
        height: 44px;
        background-size: cover;
        border-radius: 5px;
        border: solid 1px #ddd;
    }

.quote-configuration.yacht-photo-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #ddd;
}

    .quote-configuration.yacht-photo-container .yacht-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        display: block;
    }

.specification-bar {
    background: rgba(5, 31, 66, 0.015);
    backdrop-filter: blur(5px);
    font-size: 0.75rem;
    height: 38px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    color: white;
}

    .specification-bar .specification-column {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 12px;
        padding-right: 12px;
        flex: 1;
        white-space: nowrap;
    }


.btn.cover-details {
    margin-top: 12px;
}


.product-indent {
    display: inline-block;
    min-width: 10px;
    margin: 0px;
    text-align: center;
}

.product-name {
    display: inline-flex;
    max-width: 25ch;
    white-space: nowrap;
    /*overflow: hidden;
    text-overflow: ellipsis;*/
}

tr.document-required td {
    background: rgb(220,53,69, 0.05) !important;
}

span.filename {
    display: inline-block;
    max-width: 50ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle; /* optional: keeps it aligned nicely */
}

span.filename-longer {
    display: inline-block;
    max-width: 70ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle; /* optional: keeps it aligned nicely */
}


.summary-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgb(54, 169, 225, 0.05) 100%);
}

    .summary-item .count {
        font-size: 3rem;
        font-weight: lighter;
        text-align: center;
        color: #051f42;
        padding: 0px;
        margin: 0px;
    }

    .summary-item i {
        padding: 0px 0px 0px 0px;
        margin: 0px;
        color: #051f42;
    }

    .summary-item .category-label {
        vertical-align: top;
        text-transform: uppercase;
        font-size: 0.70rem;
        color: #051f42;
        padding: 0px 0px 10px 0px;
        margin: 0px;
    }


/* EXTENSION ELEMENTS */
/* ------------------------------------------------------------------------ */

.extension-container {
    display: flex;
    gap: 15px;
}

    .extension-container .extension {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 15px 25px;
        min-height: 100px;
        color: #051f42;
    }

    .extension-container .extension-spacer {
        width: 75px;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-transform: uppercase;
        font-size: 0.75rem;
    }

    .extension-container .extension.selected {
        border-color: #051f42;
        /*background-color: rgb(5, 31, 66, 0.02);*/
        /*background-color: rgb(54, 169, 225, 0.15);*/
        background: linear-gradient(360deg, rgba(255, 255, 255, 0) 25%, rgb(54, 169, 225, 0.15) 100%);
    }

    .extension-container .extension.not-available,
    .extension-container .extension.not-available .table td,
    .extension-container .extension.not-available .table th {
            color: #8C8C8C !important;
        }

    .extension-container .extension-header {
    }

        .extension-container .extension .extension-toggle-button {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .extension-container .extension .icon,
        .extension-container .extension .title,
        .extension-container .extension .sub-title {
            text-align: center;
            margin: 0px;
            padding: 0px;
        }

        .extension-container .extension .icon {
            font-size: 5rem;
        }

        .extension-container .extension .title {
            text-transform: uppercase;
            font-size: 1.5rem;
            margin-top: -12px;
        }

        .extension-container .extension .sub-title {
            font-size: 0.75rem;
            margin-top: -4px;
        }


        .extension-container .extension .options-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 235px;
        }


            .extension-container .extension .options-container.addon {
                min-height: 175px !important;
            }

        .extension-container .extension .options-container .options {
            width: 100%
        }

td.action-start {
    width: 1%;
    white-space: nowrap;
    padding-left: 0.5rem; /* optional for spacing */
    padding-right: 0.5rem;
    text-align: center; /* optional: center the radio in the cell */
}

.extension-container .extension input {
    accent-color: #051f42;
    cursor: pointer;
}


/* QUESTIONNAIRE ELEMENTS */
/* ------------------------------------------------------------------------ */

.questionnaire-container {
    display: flex;
    gap: 15px;
}

    .questionnaire-container .questionnaire {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 15px 25px;
        min-height: 100px;
        color: #051f42;
    }

    .questionnaire-container .questionnaire-spacer {
        width: 75px;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-transform: uppercase;
        font-size: 0.75rem;
    }

        .questionnaire-container .questionnaire.received {
            border-color: #051f42;
            /*background-color: rgb(5, 31, 66, 0.02);*/
            /*background-color: rgb(54, 169, 225, 0.15);*/
            background: linear-gradient(360deg, rgba(255, 255, 255, 0) 25%, rgb(54, 169, 225, 0.15) 100%);
        }

    .questionnaire-container .questionnaire-header {
    }

    .questionnaire-container .questionnaire .icon,
    .questionnaire-container .questionnaire .title,
    .questionnaire-container .questionnaire .sub-title {
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    .questionnaire-container .questionnaire .icon {
        font-size: 5rem;
        position: relative;
        display: inline-block;
    }

        .questionnaire-container .questionnaire .icon .received {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0%);
            font-size: 7rem;
            color: #61c4a3;
            font-weight: bold;
        }

    .questionnaire-container .questionnaire .title {
        text-transform: uppercase;
        font-size: 1.5rem;
        margin-top: -12px;
    }

    .questionnaire-container .questionnaire .sub-title {
        font-size: 0.75rem;
        margin-top: -4px;
    }


    .questionnaire-container .questionnaire .options-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .questionnaire-container .questionnaire .options-container .options {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 12px 0px;
        }


        .questionnaire-container .questionnaire .options-container.addon {
            min-height: 175px !important;
        }

        .questionnaire-container .questionnaire .options-container .options {
            width: 100%
        }


table.questionnaire .form-field {
    margin-bottom: 0px;
}

table .form-field .invalid-tooltip {
    margin-right: 0px !important;
}


/* POLICY INDEX ELEMENTS */
/* ------------------------------------------------------------------------ */

.policy-index-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-bottom: 11px;
    text-transform: uppercase
}

    .policy-index-badges .badge {
        width: auto;
        display: inline-block;
        white-space: nowrap;
    }

        .policy-index-badges .badge.status.red {
            background-color: #eb5d71;
        }

        .policy-index-badges .badge.status.amber {
            background-color: #ffa34f;
        }

        .policy-index-badges .badge.status.green {
            background-color: #36a9e1;
        }

.row.overdue div,
.row.overdue .currency-code {
    color: rgb(235, 93, 113, 1.0) !important;
}

.row .summary-row-product {
    margin: 6px 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
    .row .summary-row-product .icon {
        font-size: 0.85rem;
    }

    .row .summary-row-product .name {
        text-transform: uppercase;
        font-size: 0.80rem;
        color: #051f42;
    }

tr.overdue td {
}

.modal-body .form-group-radio .form-check.form-check-inline:first-of-type {
    margin-left: 4px;
}


/* SAVING MODAL ELEMENTS */
/* ------------------------------------------------------------------------ */

.modal-content.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

    .modal-content.loading .spinner-border {
        width: 3rem;
        height: 3rem;
        margin-bottom: 10px
    }

    .modal-content.loading h5.status-message {
        font-size: 1.75rem;
        font-weight: 300;
        color: #051F42;
        margin-bottom: 0px;
        padding-bottom: 0px
    }

    .modal-content.loading .status-submessage {
        font-weight: normal;
        font-size: 0.75rem;
        color: #555555;
        margin: 5px 0px 0px 0px;
        text-transform: uppercase;
    }


/* CURRENCY SELECTOR ELEMENTS */
/* ------------------------------------------------------------------------ */

form {
    position: relative;
}

.quote-currency {
    position: absolute;
    top: -35px;
    right: 0px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(54, 169, 225, 0.05) 100%) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    margin: 0px;
    padding: 12px 12px 6px 12px;
    display: flex;
    align-items: center;
}

    .quote-currency .title {
        flex-shrink: 0;
        margin-right: 15px;
        text-transform: uppercase;
        color: #051f42;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .quote-currency select {
        font-size: 0.75rem;
    }


/* HELP */
/* ------------------------------------------------------------------------ */

ul.help-menu {
    background: none !important;
    padding: 0;
    margin: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    font-size: 0.85rem;
}

    /* top-level items */
    ul.help-menu li {
        border-top: solid 1px #DEE2E6;
        list-style: none;
        padding: 0;
    }

        ul.help-menu li a,
        ul.help-menu li .button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 12px 15px;
            font-size: 0.85rem;
            color: #051F42;
            text-decoration: none;
            border: none;
            background: none;
            border-radius: 0;
            transition: background-color 0.2s, color 0.2s;
        }

            ul.help-menu li a:hover,
            ul.help-menu li .button:hover,
            ul.help-menu li.help-sub-menu ul.submenu li a:hover {
                background: rgba(235, 93, 113, 0.1);
                cursor: pointer;
            }

        ul.help-menu li i {
            font-size: 0.75rem;
            color: #6c757d;
        }

        ul.help-menu li.help-sub-menu .submenu-collapse {
            background: #f9fafb;
            border-top: solid 1px #dee2e6;
        }

        ul.help-menu li.help-sub-menu ul.submenu {
            margin: 0;
            padding: 0;
        }

        ul.help-menu li.help-sub-menu ul.submenu li {
            list-style: none;
            border-top: solid 1px #f0f0f0;
        }

            ul.help-menu li.help-sub-menu ul.submenu li a {
                display: block;
                padding-left: 35px;
                color: #051F42;
                text-decoration: none;
                font-size: 0.85rem;
                background: none;
                transition: background 0.2s, color 0.2s;
            }

        ul.help-menu li.help-sub-menu .button[aria-expanded="true"] i {
            transform: rotate(180deg);
            transition: transform 0.25s ease;
        }

        ul.help-menu li.help-sub-menu .button[aria-expanded="false"] i {
            transition: transform 0.25s ease;
        }

.nav-tabs.help {
    border-bottom: 1px solid #ddd;
    margin-right: 3px;
}

    .nav-tabs.help .nav-item .nav-link {
        font-size: 0.75rem;
        font-size: 0.75rem;
        color: #6c757d;
        font-weight: normal;
        border: none;
        border-bottom: 2px solid transparent;
        background: none;
        transition: color 0.2s, border-color 0.2s;
    }

.nav-tabs.help .nav-item .nav-link:hover {
    color: #eb5d71;
    border-bottom-color: rgba(235, 93, 113, 0.4);
}

.nav.nav-tabs.help .nav-item .nav-link.active {
    background: none;
    font-weight: bold;
    border-bottom: 2px solid #ffffff;
}

.tab-content.help {
    margin-top: -1px;
    padding: 15px;
    border-top: none;
    border-left: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.help-topic h2.page-title {
    color: #051F42;
    font-size: 2.75rem;
    font-weight: lighter;
    margin-bottom: 15px;
    padding-bottom: 0px
}

.help-topic h3.sub-title {
    color: #051F42;
    font-size: 1.75rem;
    font-weight: lighter;
    margin-top: 1.5rem;
    margin-bottom: 0rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.help-topic h4.sub-title {
    color: #051F42;
    font-size: 1.5rem;
    font-weight: lighter;
    margin-top: 1.5rem;
    margin-bottom: 0rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.help-topic p, .help-topic li, .help-topic div.buttons, .help-topic .label, .help-topic .description, .help-topic .buttons .text {
    color: #051F42;
    font-size: 0.9rem;
}

.help-topic p {
    margin-bottom: 10px;
}

.help-topic p span.info-icon {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

.help-topic div.screenshot {
    display: flex;
    justify-content: center;
    margin: 10px 0px 0px 0px;
}

    .help-topic div.screenshot img {
        max-width: 85%;
        height: auto;
        border-radius: 0.375rem;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
        margin: 0px 0px 10px 0px;
    }

    .help-topic div.screenshot.no-shadow img {
        box-shadow: none !important;
    }

.help-topic p.screenshot {
    text-align: center;
    color: #555555;
    font-size: 0.70rem;
    margin: 0px 7% 0px 7%;
}

    .help-topic p.screenshot span {
        font-style: italic;
    }

    .help-topic .field-descriptions {
        list-style: none;
        padding: 0px;
        margin: 0px 2rem 0px 2rem;
    }

        .help-topic .field-descriptions li {
            display: grid;
            grid-template-columns: 25% 1fr;
            align-items: start;
            gap: 0px;
            padding: 0px;
        }

            .help-topic .field-descriptions li:last-child {
                border-bottom: none;
            }

        .help-topic .field-descriptions .label {
            font-weight: bold;
            padding: 0.35rem 0.5rem 0.35rem 0rem;
        }

        .help-topic .field-descriptions .description {
            border-left: 1px solid #e0e0e0;
            padding: 0.35rem 0rem 0.35rem 0.5rem;
        }

.help-topic .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

    .help-topic .buttons.two {
        grid-template-columns: repeat(2, 1fr);
    }

    .help-topic .buttons.three {
        grid-template-columns: repeat(3, 1fr);
    }

    .help-topic .buttons.four {
        grid-template-columns: repeat(4, 1fr);
    }

    .help-topic .buttons .column {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 1rem;
        border-right: 1px solid #e0e0e0;
    }

        .help-topic .buttons .column:last-child {
            border-right: none;
        }

    .help-topic .buttons .button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin-bottom: 0.5rem;
    }

    .help-topic .buttons .text {
        line-height: 1rem;
    }

.help-article-indent {
    display: inline-block;
    min-width: 10px;
    margin: 0px 4px 0px 0px;
    text-align: center;
}

.help-button {
    position: absolute;
    top: -22px;
    right: 10px;
    border: none;
    background: none;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    z-index: 1000;
    color: #051f42;
    height: 10px;
}

.form-container .help-button {
    top: -22px;
    right: 10px;
}

.page-help {
    position: relative;
}

    .page-help .help-button {
        top: -41px;
        right: 20px;
    }

.help-button span.fa-stack {
    padding: 0px;
    margin: 0px;
    width: 0px;
    height: 0px;
    line-height: 0.6rem;
}

.help-button span i.fa-stack-2x {
    font-size: 1.25rem;
    color: #051f42;
}

.help-button span i.fa-stack-1x {
    font-size: 0.5rem;
    color: #ffffff;
    margin: 6px 0px 0px 7px;
    font-weight: 600;
}



/* AI QUOTE PROCESSING */
/* ------------------------------------------------------------------------ */

hr.filter-below {
    margin-bottom: 0px;
}

div.form-container.filters {
    position: relative;
    z-index: 1250;
    border-top: none;
    border-start-start-radius: 0px;
    border-start-end-radius: 0px;
}

div.form-container.filters .body {
    padding: 12px;
}

div.form-container.filters form {
    margin: 0px;
}



/* TOOLTIPS */
/* ------------------------------------------------------------------------ */

div.popover {
    border-radius: 5px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(54, 169, 225, 0.05) 100%) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

    div.popover h3.popover-header {
        text-transform: uppercase;
        color: #051f42;
        font-size: 0.75rem;
        padding: 7px 7px 7px 7px;
        margin: 0px;
        background: none;
        border-bottom: none;
    }

        div.popover h3.popover-header button {
            font-size: 1.25rem;
            line-height: 1;
            background: none;
            border: none;
            color: #666;
            font-weight: bold;
            cursor: pointer;
            padding: 0px;
            margin-top: -4px
        }

    div.popover div.popover-body {
        text-transform: uppercase;
        color: #051f42;
        font-size: 0.65rem;
        padding: 0px 7px 7px 7px;
        margin: 0px;
        background: none;
    }



/* CONFIGURATION BIND */
/* ------------------------------------------------------------------------ */

ul.bind-checlist-short {
    background: none !important;
    padding: 0px;
    margin: 0px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    font-size: 0.85rem;
}

    ul.bind-checlist-short li {
        border-top: solid 1px #DEE2E6;
        list-style: none;
        padding: 0px;
    }

        ul.bind-checlist-short li a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            font-size: 0.85rem;
            color: #051F42;
            text-decoration: none;
            border-radius: 0px;
            transition: background-color 0.2s, color 0.2s;
        }

            ul.bind-checlist-short li a:hover {
                background: rgb(235, 93, 113, 0.1);
                cursor: pointer;
            }

            ul.bind-checlist-short li a i {
                font-size: 0.75rem;
                color: #6c757d;
            }


/* AI UNDERWRITER */
/* ------------------------------------------------------------------------ */

#chatWindow {
    border: none;
    border-radius: 12px;
    background-color: #f7f7f7;
    font-family: system-ui, sans-serif;
    white-space: normal;
    overflow-y: auto;
    max-height: 75%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    min-height: 250px;
    overflow-y: auto;
    background-color: #f7f7f7;
}

.user-message {
    text-align: right;
    margin-bottom: 10px;
}

    .user-message .bubble {
        display: inline-block;
        max-width: 85%;
        padding: 10px 15px;
        border-radius: 15px 15px 0px 15px;
        background-color: #007bff;
        color: white;
        word-wrap: break-word;
        font-weight: 500;
    }

.ai-message {
    text-align: left;
    margin-bottom: 10px;
}

    .ai-message .bubble {
        display: inline-block;
        max-width: 85%;
        padding: 10px 15px;
        border-radius: 15px 15px 15px 0;
        background-color: rgb(235, 93, 113, 0.1);
        color: #333;
        word-wrap: break-word;
    }

        .ai-message .bubble ol, .ai-message .bubble ul {
            margin-top: 10px;
            padding-left: 20px;
        }

        .ai-message .bubble p:last-child {
            margin-bottom: 0;
        }

        .ai-message .bubble h1, .ai-message .bubble h2, .ai-message .bubble h3 {
            font-size: 1.1rem;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

    .ai-message.streaming-container {
        text-align: left;
        margin-bottom: 10px;
    }

        .ai-message.streaming-container .bubble-content {
            display: inline-block;
            max-width: 85%;
            padding: 10px 15px;
            border-radius: 18px 18px 18px 0;
            background-color: rgb(235, 93, 113, 0.1);
            color: #051f42;
            word-wrap: break-word;
        }

            .ai-message.streaming-container .bubble-content h3 {
                font-weight: lighter;
                margin-bottom: 5px;
            }

            .ai-message.streaming-container .bubble-content li p:first-of-type {
                margin-bottom: 5px;
            }

            .ai-message.streaming-container .bubble-content li p:first-of-type strong {
                font-weight: lighter;
                font-size: 1.3rem;
                line-height: 1.3rem;
            }

            .ai-message.streaming-container .bubble-content p, .ai-message.streaming-container .bubble-content li:last-of-type {
                margin-bottom: 15px;
            }

.typing-indicator .bubble-content {
    background-color: #e2e6ea !important;
}

.typing-indicator .bubble {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 15px 15px 15px 0;
    background-color: #e2e6ea;
}

.typing-indicator span {
    animation: blink 1s infinite;
    opacity: 0;
    margin: 0 1px;
    font-weight: bold;
}

    .typing-indicator span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-indicator span:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}



/* REPORT CARD ELEMENTS */
/* ------------------------------------------------------------------------ */

.report-card-container {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.report-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.35);
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 50%, rgba(5, 31, 66, 0.015) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

    .report-card .image-wrapper {
        width: 100%;
        aspect-ratio: 4/3;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
    }

        .report-card .image-wrapper i {
            font-size: 10rem;
            font-weight: lighter;
            color: #051f42;
        }

    .report-card .banner-summary {
        padding: 6px 8px;
    }

    .report-card .banner-summary .report-name {
        font-size: 1.1rem;
        font-weight: bold;
        color: #051F42;
        text-transform: uppercase;
        margin: 0px;
        padding: 0px;
        max-width: 28ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .report-card .banner-summary .report-description {
        display: inline-block;
        font-size: 0.75rem;
        color: #555555;
        text-transform: uppercase;
        margin: -4px 0px 0px 0px;
        padding: 0px;
    }

    .report-card:hover {
        border-color: rgb(235, 93, 113, 1.0);
        background: rgb(235, 93, 113, 0.05);
    }