#vesselTypeChart {
    height: 300px;
    width: 100%;
}


h1.text {
    margin-bottom: 0px;
    padding-bottom: 0px
}

.btn.header, .btn-group.header {
    margin-bottom: 8px
}

.text {
    color: #051f42;
}


@keyframes slideDown {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(30px);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.invalid-tooltip {
    background-color: #dc3545; /* Red background */
    color: #fff; /* White text */
    top: auto;
    right: 0px;
    margin: -15px 11px 0px 0px;
    padding: 4px 8px 4px 8px
}

.btn-outline-secondary.custom-outline {
    color: #6c757d; /* Customize the text color on hover */
    background-color: #f7f7f7; /* Lighter background color on hover */
    border-color: #dee2e6; /* Adjust the border color on hover */
}

    .btn-outline-secondary.custom-outline:hover {
        color: #6c757d; /* Customize the text color on hover */
        background-color: #e9ecef; /* Lighter background color on hover */
        border-color: #adb5bd; /* Adjust the border color on hover */
    }


.cards-container {
    margin-bottom: 30px; /* Adds space between cards and pagination */
}

    /* Styling for Vessel Name */
    .cards-container .vessel-name {
        font-size: 2rem; /* Larger font size */
        font-weight: bold; /* Bold text */
        color: #051F42; /* Specific color */
        margin-bottom: 0.2rem; /* Minimal spacing below */
        text-transform: uppercase;
    }

    .cards-container .vessel-mini-title {
        font-weight: normal; /* Regular text */
        font-size: 0.8rem; /* Same font size */
        color: #555555; /* Dark grey color */
        margin: 0.00rem 0.00rem -0.35rem 0.00rem; /* Minimal spacing above */
        text-transform: uppercase; /* Make all letters uppercase */
    }

    /* Styling for Manufacturer */
    .cards-container .vessel-manufacturer {
        font-weight: bold; /* Bold text */
        font-size: 1.1rem; /* Slightly smaller font size */
        color: #555555; /* Dark grey color */
        margin: 0px; /* Minimal spacing above */
        display: inline
    }

    /* Styling for Model */
    .cards-container .vessel-model {
        font-weight: normal; /* Regular text */
        font-size: 1.5rem; /* Same font size as manufacturer */
        color: #555555; /* Dark grey color */
        text-transform: uppercase;
        margin: 0.00rem; /* Minimal spacing above */
        display: inline
    }

    /* Styling for Year Built */
    .cards-container .vessel-mini-data {
        font-weight: bold; /* Bold text */
        font-size: 0.85rem; /* Slightly smaller font size */
        color: #555555; /* Dark grey color */
        margin: 0.00rem; /* Minimal spacing above */
        display: inline
    }

    .cards-container .vessel-details {
        display: flex;
        flex-direction: column;
        height: 50%; /* Ensure it takes the full height of the card */
    }

        .cards-container .vessel-details .vessel-info-bottom {
            position: absolute;
            width: 100%;
            bottom: 0px;
            display: flex;
            justify-content: space-between; /* Evenly space the items */
            border-top: 1px solid #ddd; /* Optional: for visual separation */
            padding-top: 10px; /* Add some space above the bottom row */
            margin-left: -15px;
            margin-right: 0px;
            padding-bottom: 10px;
        }

            .cards-container .vessel-details .vessel-info-bottom .info-item {
                text-align: center;
                flex: 1; /* Distribute the space evenly */
                padding: 0px; /* Add some spacing between items */
            }


    /* Thumbnail Container */
    .cards-container .thumbnail-container {
        position: relative; /* Establishes a new positioning context */
        width: 240px;
        height: 180px; /* 4:3 aspect ratio */
        overflow: hidden; /* Hides any overflowing content */
        border: 1px solid #ddd; /* Optional: border around thumbnails */
        border-radius: 4px; /* Optional: rounded corners */
        background-color: #f8f9fa; /* Optional: background color for empty thumbnails */
    }

    /* Thumbnail Image */
    .cards-container .thumbnail-img {
        width: 100%; /* Make the image responsive */
        height: auto;
        aspect-ratio: 4 / 3; /* Maintain 4:3 aspect ratio */
        object-fit: cover; /* Ensure the image fills the container while maintaining aspect ratio */
    }

    .cards-container .policy-container {
        position: absolute; /* Absolute positioning within the relative container */
        height: 30px; /* Height of the flag container */
        top: 10px; /* Adjust as needed */
        left: 10px; /* Adjust right to position flag correctly */
        z-index: 10; /* Ensure it stays on top of the image */
        display: inline-block;
    }

    .cards-container .flag-container {
        position: absolute; /* Absolute positioning within the relative container */
        width: 40px; /* Width of the flag container */
        height: 30px; /* Height of the flag container */
        top: 10px; /* Adjust as needed */
        right: 10px; /* Adjust right to position flag correctly */
        z-index: 10; /* Ensure it stays on top of the image */
        display: flex;
        justify-content: center;
        align-items: center; /* Centers the flag inside the container */
        border-radius: 4px; /* Optional: rounded corners */
        overflow: hidden; /* Ensures the flag fits within the rounded container */
        box-shadow: 0 0 1px rgba(0,0,0,0.2); /* Optional shadow */
    }

        /* Flag Icon - Override .fi for Thumbnail Context */
        .cards-container .flag-container .fi {
            width: 100%; /* Ensures the flag fits within the container */
            height: 100%; /* Ensures the flag fits within the container */
        }

    .cards-container .vesseltype-container {
        position: absolute; /* Absolute positioning within the relative container */
        bottom: 10px; /* Adjust as needed */
        right: 10px; /* Adjust right to position flag correctly */
        z-index: 10; /* Ensure it stays on top of the image */
        display: flex;
        justify-content: center;
        align-items: center; /* Centers the flag inside the container */
        font-size: 12pt
    }

    .cards-container .card-link {
        text-decoration: none; /* Remove underline from the link */
        color: inherit; /* Inherit text color so the text isn't affected */
    }

        .cards-container .card-link:hover .card {
            background-color: #e1eefd;
        }

        .cards-container .card-link .card {
            z-index: 2;
            padding: 0px;
            border-radius: 4px;
            transition: background 0.0s ease;
        }

    .cards-container .card {
        cursor: pointer; /* Make it look like the card is clickable */
    }

.card-body {
    position: relative;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 200px; /* Set minimum height */
    height: 100%; /* Ensure all cards are the same height */
    border-top: 1px solid #ddd;
}

    .card-body .datasource-badge {
        position: absolute;
        top: -1px;
        right: 0px;
        max-height: 25px;
        padding: 8px;
        margin: 0;
        background-color: #ffffff; /* Optional background to stand out */
        z-index: 10; /* Ensures it floats above other content */
        border-radius: 0px 0px 0px 3px;
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.1), 1px 2px 3px rgba(0, 0, 0, 0.1); /* Only bottom and left */
        overflow: hidden;
        display: flex;
        align-items: center; /* Center SVG within */
    }

        .card-body .datasource-badge svg {
            height: 100%; /* SVG scales to fill container height */
            width: auto; /* Keeps SVG proportional */
            max-height: 12px; /* Ensures SVG doesn’t exceed the div’s max height */
        }

.pagination {
    margin-top: 20px; /* Adds some space above the pagination controls */
}

    .pagination .page-item.active .page-link {
        background-color: #051f42; /* Current page background color */
        color: white; /* Current page text color */
        border-color: #051f42; /* Optional: border to match background */
    }

    .pagination .page-link {
        color: #051f42; /* Text color for non-active pages */
    }

        .pagination .page-link:hover {
            background-color: #f0f8ff; /* Optional: lighter background on hover */
            color: #051f42; /* Text color on hover */
        }

    .pagination .page-item {
        border-radius: 4px; /* Optional: to round the page buttons */
    }

.collapsible-container {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.collapsible-container-carousel {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 14px;
}

.collapsible-header {
    background-color: #f7f7f7;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    color: #051f42;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
}

    .collapsible-header.action {
        display: flex;
        justify-content: space-between; /* Ensures spacing between title & button */
        align-items: center; /* Centers content vertically */
        position: relative; /* Ensure proper positioning */
    }

        .collapsible-header.action .btn {
            position: absolute;
            right: 0; /* Pushes the button to the far right */
            top: 50%;
            transform: translateY(-50%); /* Vertically center the button */
            margin-right: 4px; /* Adds spacing from the edge */
        }


.collapsible-body {
    padding: 10px;
    display: block; /* Expanded by default */
}

    .collapsible-body.chat {
        padding: 10px 0px 10px 10px;
        display: block; /* Expanded by default */
    }

        .collapsible-body.chat .vv.form-body {
            padding: 0px;
        }

    .collapsible-body.audit-log {
        background-color: #fafafa
    }

/* Ensure the container maintains a 4:3 aspect ratio */
.collapsible-body-tracker {
    position: relative;
    width: 100%;
}

    .collapsible-body-tracker .iframe-wrapper {
        position: relative;
        width: 100%;
        height: 380px; /* Adjust the height accordingly */
        overflow: hidden; /* Hide the overflow */
    }

        .collapsible-body-tracker .iframe-wrapper iframe {
            position: relative;
            top: -20px; /* Move the iframe up by 20px */
            width: 100%;
            height: 400px; /* Increase the iframe height to cover the space */
        }

/* Ensure the container maintains a 4:3 aspect ratio */
.collapsible-body-carousel {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
}

.carousel, .carousel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carousel-item {
    height: 100%;
}

    .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the container, cropping if necessary */
    }

.tablerow {
    padding-bottom: 10px
}

    .tablerow .tablelabel {
        padding-right: 10px;
        text-align: left;
    }

    .tablerow .tablevalue {
        padding-right: 10px;
        text-align: left;
    }

.table th {
    text-transform: uppercase;
    color: #051f42
}

    .table th.int-value {
        text-align: right;
    }

    .table th a {
        text-decoration: none;
        color: #051f42
    }

        .table th a:hover {
            text-decoration: underline;
            color: #051f42
        }

.header-center {
    text-align: center;
}

.table td {
    vertical-align: middle;
}

    .table td.text-center {
        text-align: center;
    }

    .table td.int-value {
        text-align: right; /* Right-align integer values */
    }

table td.overdue {
    color: red;
}


.filter-spacing {
    margin-bottom: 16px;
}

    .filter-spacing .form-label {
        font-weight: normal; /* Regular text */
        font-size: 0.8rem; /* Same font size */
        color: #555555; /* Dark grey color */
        margin: 0px 0px 0px 2px; /* Minimal spacing above */
        text-transform: uppercase; /* Make all letters uppercase */
        display: block; /* Ensure the label stays above the input/checkbox */
    }



.vv.form-body {
    position: relative;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}



    .vv.form-body .form-label, .modal-body .form-label {
        font-weight: normal; /* Regular text */
        font-size: 0.8rem; /* Same font size */
        color: #555555; /* Dark grey color */
        margin: 0px 0px 0px 2px; /* Minimal spacing above */
        text-transform: uppercase; /* Make all letters uppercase */
        display: block; /* Ensure the label stays above the input/checkbox */
    }

    .vv.form-body .form-label-value {
        font-weight: normal; /* Regular text */
        font-size: 1.1rem; /* Same font size */
        color: #051f42; /* Dark grey color */
        margin: 0px 0px 0px 2px; /* Minimal spacing above */
        display: block; /* Ensure the label stays above the input/checkbox */
    }

.right {
    text-align: right;
}

.collapsible-body.audit-log .form-label-value {
    font-weight: normal; /* Regular text */
    font-size: 0.9rem; /* Same font size */
    color: #555555; /* Dark grey color */
    margin: 0px 0px 0px 2px; /* Minimal spacing above */
    display: block; /* Ensure the label stays above the input/checkbox */
    text-transform: uppercase;
}

.vv.form-body .larger-checkbox {
    transform: scale(1.5); /* Make checkboxes larger */
    margin-top: 10px; /* Add space between the label and the checkbox */
}

.vv.form-body .form-check-input {
    margin-left: 5px
}

.vv.form-body .form-control, .vv.form-body .form-select, .vv.form-body .form-input, .vv.form-body .form-label-value, .vv.form-body .input-group-text {
    margin-bottom: 16px; /* Spacing between inputs and checkboxes */
}

.vv.form-body .input-group-text, .alert .input-group-text {
    color: #555555;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
}

.numeric-0dp, .numeric-2dp {
    text-align: right
}



.vv.form-body .form-check-input {
    margin-bottom: 24px; /* Spacing between inputs and checkboxes */
}

.vv.form-body .form-control.text-right {
    text-align: right;
}

.vv.form-body .form-sub-divider {
    margin-top: 0;
    padding-top: 0;
}

.select-transition {
    transition: opacity 0.3s ease, height 0.3s ease;
    overflow: hidden;
}

.d-none.select-transition {
    opacity: 0;
    height: 0;
}



.insureditem-filter {
    position: relative;
    text-align: right
}

    .insureditem-filter button {
        margin-top: 15px; /* Push the button to the bottom of the container */
        align-self: flex-end; /* Optional: aligns the button horizontally within the container */
    }


/* For ID Selector */
.modal-body #loadingSection {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontal centering */
    justify-content: center; /* Vertical centering */
    height: 100%; /* Ensure the div takes full height of the modal body */
    text-align: center;
    font-size: 1em;
}

.form-select.insly-instance {
    width: auto;
    margin-left: 20px;
    background-color: transparent;
    color: #ffffff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


    .form-select.insly-instance option {
        color: #051f42
    }


#vesselPrimaryPhoto.collapsible-body {
    padding: 0px
}

#vesselPhotos.collapsible-body {
    padding: 0px 10px 0px 0px
}

.thumbnail-form-primary .row, .thumbnail-form .row {
    padding: 0px;
    margin: 0px
}

.thumbnail-form-primary {
    padding: 0px;
    margin: 0px
}

.thumbnail-container-primary {
    padding: 0px;
    margin: 0px;
    position: relative;
    overflow: hidden; /* Ensures no unexpected overflow */
}

    .thumbnail-container-primary img {
        width: 100%;
        height: auto;
        padding: 0px;
        margin: 0px;
        border: solid 1px #dee2e6
    }

    .thumbnail-container-primary .delete-button {
        position: absolute;
        bottom: 15px;
        right: 15px; /* Adjust as needed */
        z-index: 10;
    }

.thumbnail-form {
    padding: 0px;
    margin: 0px
}

.thumbnail-container {
    padding: 0px;
    margin: 10px 0px 0px 10px;
    position: relative;
    overflow: hidden; /* Ensures no unexpected overflow */
    padding-bottom: 75%; /* 4:3 aspect ratio */
}

    .thumbnail-container img {
        padding: 0px;
        margin: 0px;
        border: solid 1px #dee2e6;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .thumbnail-container .delete-button {
        position: absolute;
        bottom: 10px;
        right: 10px; /* Adjust as needed */
        z-index: 10;
    }

    .thumbnail-container .make-primary-button {
        position: absolute;
        top: 10px;
        right: 10px; /* Adjust as needed */
        z-index: 10;
    }


#trackingLogTable tfoot select {
    width: 100%;
    height: 30px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.dataTables_search_wrapper {
    flex-grow: 1;
    text-align: right;
}

.dataTables_filter input {
    width: 500px; /* Customize the width of the search input */
    margin-left: 0;
}

.dataTables_filter {
    float: right;
}


.btn-badge {
    position: relative;
    display: inline-block;
}

    .btn-badge .status-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
    }

    .btn-badge .provisional {
        background-color: red;
    }

    .btn-badge .draft {
        background-color: orange;
    }

    .btn-badge .status-badge[data-bs-toggle="tooltip"] {
        cursor: pointer;
    }


.leaflet-popup-content-wrapper, .leaflet-popup-content {
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    width: 300px;
}

.cards-container.location {
    width: 300px;
    margin-bottom: 0px;
}

    .cards-container.location .card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .cards-container.location .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-top: 1px solid #ddd;
    }

    .cards-container.location .vessel-name {
        font-size: 2rem;
        font-weight: bold;
        color: #051F42;
        margin: 0px 0px 4px 0px;
        text-transform: uppercase;
    }

    .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%; /* Ensure it takes the full height of the card */
            margin-bottom: 4px;
        }

            .cards-container.location .vessel-details .vessel-mini-title-wrapper .vessel-mini-title {
                font-weight: normal; /* Regular text */
                font-size: 0.8rem; /* Same font size */
                color: #555555; /* Dark grey color */
                margin: 0px 0px 0px 0px;
                text-transform: uppercase; /* Make all letters uppercase */
            }

            .cards-container.location .vessel-details .vessel-mini-title-wrapper .vessel-model {
                font-weight: normal; /* Regular text */
                font-size: 1.5rem; /* Same font size as manufacturer */
                color: #555555; /* Dark grey color */
                text-transform: uppercase;
                margin: 0px 0px 0px 0px;
                display: inline
            }

            .cards-container.location .vessel-details .vessel-mini-title-wrapper .vessel-manufacturer {
                font-weight: bold; /* Bold text */
                font-size: 1.1rem; /* Slightly smaller font size */
                color: #555555; /* Dark grey color */
                margin: 0px; /* Minimal spacing above */
                display: inline;
                text-transform: uppercase;
            }

            .cards-container.location .vessel-details .vessel-mini-title-wrapper .vessel-mooring {
                font-weight: normal; /* Bold text */
                font-size: 0.9rem; /* Slightly smaller font size */
                color: #051F42; /* Dark grey color */
                margin: 0px; /* Minimal spacing above */
                display: inline;
            }

        .cards-container.location .vessel-details .vessellocation-info-middle,
        .cards-container.location .vessel-details .vessellocation-info-bottom {
            flex: 1; /* Split space equally */
            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; /* Distribute the space evenly */
                padding: 0px; /* Add some spacing between items */
            }

                .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; /* Regular text */
                    font-size: 0.75rem; /* Same font size */
                    color: #555555; /* Dark grey color */
                    margin: 0px 0px 0px 0px;
                    text-transform: uppercase; /* Make all letters 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; /* Bold text */
                    font-size: 0.80rem; /* Slightly smaller font size */
                    color: #051F42;
                    margin: 0.00rem; /* Minimal spacing above */
                    display: inline
                }

.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;
        min-height: 110px;
    }

    .cards-container.aggregation .vessel-details .vessel-info-bottom .info-item {
        text-align: center;
        flex: 1; /* Distribute the space evenly */
        padding: 0px; /* Add some spacing between items */
    }

        .cards-container.aggregation .vessel-details .vessel-info-bottom .info-item .vessel-mini-title {
            font-weight: normal !important; /* Regular text */
            font-size: 0.75rem; /* Same font size */
            color: #555555; /* Dark grey color */
            margin: 0px 0px 0px 0px;
            text-transform: uppercase; /* Make all letters uppercase */
        }

        .cards-container.aggregation .vessel-details .vessel-info-bottom .info-item .vessel-mini-data {
            font-weight: bold; /* Bold text */
            font-size: 0.85rem; /* Slightly smaller font size */
            color: #051F42;
            margin: 0.00rem; /* Minimal spacing above */
            display: inline
        }

.geocode-results-list li.list-group-item-action.active:hover {
    color: #000000
}




/* 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-header .btn-close {
        color: #051f42 !important;
    }

.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: 1.0rem;
    color: #051F42;
    padding: 0px 20px;
    display: block;
}



.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: 1rem;
    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: 1rem;
    }

.tab-content .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;
}

    .tab-content .tab-container .tab-body {
        padding: 10px;
        display: block; /* Expanded by default */
    }