#breadcrumb-section .breadcrumb-item {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.01em;
    text-align: left;
}

.title-page {
    font-family: Sofia Pro;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.016em;
    color: #020408;
    margin-bottom: 24px;
}

.bg-skylight {
    background-color: #ecf5ff;
    padding: 28px 24px;
    border-radius: 8px;
}

.filter-data-card {
    padding: 12px 24px;
    border: 1px solid #dcdae2;
    margin-bottom: 18px;
}

.filter-data-card:hover {
    background-color: #ecf5ff;
    cursor: pointer;
}

.title-filterdata {
    font-family: Lato;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #858a94;
    display: block;
}

.data-filter {
    display: block;
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #000000;
}

.data-filter img {
    transition: all 0.3s ease-in-out;
}

.data-filter[aria-label="false"] img {
    transform: rotateX(0deg);
}

.data-filter[aria-label="true"] i {
    transform: rotateX(-180deg);
}

.data-filter.expand {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.list-data-table {
    margin-top: 1.5rem;
    max-height: 380px;
    overflow-y: auto;
}

.list-data-table table {
    width: 100%;
    border-collapse: collapse;
    max-width: 1200px;
    margin: 0 auto;
}

.list-data-table table thead {
    position: sticky;
    top: 0px;
}

.list-data-table table tr td {
    padding: 10px;
}

.list-data-table table td {
    border-right: 4px solid white;
    border-bottom: 12px solid white;
}

.list-data-table table td:last-of-type {
    border-right: none;
}

.list-data-table .head-list-table {
    background-color: #ededf1;
    font-family: Lato;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #08202e;
}

.list-data-table .data-list-table {
    color: #08202e;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.16px;
    background-color: #f6f6f8;
}

.list-data-table {
    transition: all 0.35s ease;
}

.list-data-table[aria-label="false"] {
    margin-top: 0px;
    height: 0;
    overflow: hidden;
}

.bg-skylight label {
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #344054;
    margin-bottom: 4px;
}

/* filters select 2 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    content: "";
    border: 0px !important;
    width: 9px !important;
    height: 6px !important;
    margin-left: -17px !important;
    margin-top: 2px !important;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="9" height="6" viewBox="0 0 9 6"%3E%3Cpath d="M4.50048 3.78175L7.80048 0.48175L8.74315 1.42442L4.50048 5.66708L0.257812 1.42442L1.20048 0.48175L4.50048 3.78175Z" fill="%23868A94"%3E%3C/path%3E%3C/svg%3E');
}

.select2-container--default .select2-results__option--selected {
    background-color: white !important;
    font-family: Lato !important;
    color: #667085 !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #ededf1 !important;
    color: #667085 !important;
}

.select2-search--dropdown .select2-search__field {
    position: relative;
    outline: 0px;
    border: 1px solid #d0d5dd;
    background-color: #f6f6f8;
    min-height: 34px;
    padding: 9px 10px;
    border-radius: 4px;
    background-color: #f6f6f8;
    height: 100%;
    font-family: Lato !important;
    color: #667085 !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.select2-search.select2-search--dropdown::after {
    content: "";
    background-image: url("/assets/images/common/icons/new-search-filter.svg");
    position: absolute;
    background-repeat: no-repeat;
    top: 12px;
    right: 16px;
    z-index: 2;
    background-color: transparent;
    width: 18px;
    height: 24px;
    cursor: pointer;
}

.select2-search.select2-search--inline {
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px !important;
    margin-top: 6px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 12px !important;
    width: 0px !important;
}

.select2-container .select2-selection--single {
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: Lato;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: #667085 !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    font-family: Lato;
    color: #667085;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
}

.select2-results__option--selectable {
    font-family: Lato;
    color: #667085;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 37px !important;
}

.select2-results__option {
    padding: 12px !important;
}

span.select2.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #d0d5dd !important;
}

.flex-btns {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.flex-btns div {
    margin-inline: 36px;
    border: 1px solid #ced0d4;
}

.btn-search-filter:hover {
    opacity: 0.8;
}

.btn-search-filter {
    opacity: 1;
    width: 100%;
    max-width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.14px;
    background-color: #2a9fe8;
    border-radius: 4px;
    border: 1px solid #2a9fe8;
}

.btn-reset-filter:hover {
    opacity: 0.9;
}

.btn-reset-filter {
    opacity: 1;
    width: 100%;
    max-width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #353c4d;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    border-radius: 4px;
    background-color: transparent;
    color: #353c4d;
}

.datepicker-style {
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #667085;
    border: 1px solid #d0d5dd;
    min-height: 40px;
    border-radius: 4px;
}

strong.month-item-name {
    font-weight: 500 !important;
}

.card-items:last-of-type {
    margin-bottom: 0px;
}

.card-items {
    padding: 6px 12px;
    background-color: #f5f5f5;
    border-radius: 3px;
    margin-bottom: 16px;
}

.value-list-item {
    font-family: Lato;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #5d6370;
}

.title-list-item {
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #0c1529;
}

.offcanvasshow_detaillist {
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    height: max-content !important;
    max-height: 89vh !important;
}

.port-shiplisting {
    width: 100%;
    border-collapse: collapse;
}

.port-shiplisting thead tr th {
    background-color: #ededf1;
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #08202e;
    padding-block: 6px;
    text-align: center;
}

.port-shiplisting tbody tr td {
    background-color: #f5f5f5;
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #08202e;
    padding-block: 6px;
    text-align: center;
}

.port-shiplisting th {
    border-right: 4px solid white;
    border-bottom: 16px solid white;
}

.port-shiplisting td {
    border-right: 4px solid white;
    border-bottom: 12px solid white;
}

.port-shiplisting td:last-of-type {
    border-right: none;
}

.not-found-text {
    font-family: Lato;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 32px;
    color: #0c1529;
    margin-bottom: 12px;
}

.not-found-para {
    font-family: Lato;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 28px;
    color: #5d6370;
    margin-bottom: 12px;
}

.not-found-list {
    font-family: Lato;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 28px;
    color: #353c4d;
}

.see-first-para {
    font-family: Lato;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #020408;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: normal;
}

.see-first-para a {
    color: #2384c1;
}

.shipping_note {
    padding: 12px;
    background-color: #f6f6f8;
}

.note-text {
    font-family: Lato;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #020408;
    margin-bottom: 12px;
}

.note-list {
    font-family: Lato;
    font-weight: 400;
    font-size: 20px;
    line-height: 40px;
    color: #353c4d;
}

.py-cs {
    padding-block: 32px;
}

@media screen and (max-width: 61.9375rem) {
    .title-filterdata {
        font-size: 14px;
    }

    .data-filter {
        font-size: 14px;
    }

    .list-data-table .head-list-table {
        font-size: 14px;
    }

    .list-data-table .data-list-table {
        font-size: 14px;
    }
}

@media screen and (max-width: 47.9375rem) {
    .title-page {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 0px;
    }

    .not-found-text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 12px;
    }

    .not-found-para {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 12px;
    }

    .not-found-list {
        font-size: 14px;
        line-height: 22px;
    }

    .py-cs {
        padding-block: 16px;
    }

    .note-text {
        font-size: 16px;
        margin-bottom: 12px;
        line-height: 24px;
    }

    .note-list {
        font-size: 16px;
        line-height: 24px;
    }

    .see-first-para {
        font-size: 16px;
    }
}