/* :root {
    --site-color: #ec973c;
    --site-light-color: #ec973c1a;
    --site-font-family: "Montserrat", sans-serif;
} */

section {
    font-family: "Roboto", sans-serif;
}

p,
span {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

.product-custon-input,
.perishable-inputs,
.oversized-inputs,
.transportation-input,
.container-type-input,
.container-quantity-input,
.auto-inputs,
.delivery-port-input,
.associated-inputs,
.invoice-input,
.additional-service-input,
.modals-input {
    height: 45px;
    display: flex;
    border: 1px solid #ccc;
}

.product-custon-input .search-icon {
    width: 45px;
}

.product-custon-input .input-box {
    width: calc(100% - 45px);
    /* background-color: beige; */
}

.product-custon-input input,
.hazardous-inputs input,
.delivery-inputs input,
.perishable-inputs input,
.oversized-cargo input,
.transportation-input input,
.container-type-input input,
.container-quantity-input input,
.auto-inputs input,
.delivery-port-input input,
.invoice-input input,
.sea-lcl-transport input,
.sea-inputs input,
.sea-bulk-transportation input,
.sea-lcl-unit-size input,
.additional-service-input input,
.modals-input input {
    width: 100%;
    height: 43px;
    padding: 0 10px;
    border: none;
    outline: none;
    background: transparent;
    font-family: "Poppins", sans-serif;
    font-weight: lighter;
    color: #2a2a2a;
}

.product-custon-input .search-icon i {
    color: #bcbdbe;
}

.sea-lcl-unit-size .dimension ::placeholder {
    text-align: center;
}

h2 {
    font-size: 30px;
    font-weight: bold;
}

h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.8px;
    font-family: "Poppins", sans-serif;
}

.products-suggestion-box {
    max-height: 260px;
    overflow-y: scroll;
    display: none;
}

.products-suggestion-box li,
.imo_suggestion li,
.delivery_suggestion li,
.sea-suggestion li,
.container-type-suggestion li,
.sea_bulk_suggestion li,
.delivery-ports-suggestion li,
.additional-service-suggestion li .modals-suggestion li {
    background: transparent;
    border: none;
}

.products-suggestion-box li:hover,
.imo_suggestion li:hover,
.delivery_suggestion li:hover,
.perishable-inputs .temperature li:hover,
.sea-suggestion li:hover,
.delivery-ports-suggestion li:hover,
.container-type-suggestion li:hover,
.sea_bulk_suggestion li:hover,
.additional-service-suggestion li:hover,
.modals-suggestion li:hover {
    background-color: var(--site-light-color);
    border-radius: 0.25rem;
    cursor: pointer;
}

.sea-transport ::-webkit-scrollbar,
.sea-suggestion::-webkit-scrollbar,
.delivery_suggestion .inner-scroll::-webkit-scrollbar,
.manual-quote-container::-webkit-scrollbar {
    display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

@media only screen and (max-width: 475px) {
    p {
        font-size: 14px;
    }
    span {
        font-size: 14px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 18px;
    }
}

.header-section a {
    text-decoration: none;
    /* color: #0088ff; */
    color: var(--site-color);
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
}

.header-section a i {
    margin-left: 3px;
}

.products-cat-btns {
    display: none;
}

.products-cat-btns .btn-layer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.products-cat-btns .btn-layer .btn-content {
    width: 80%;
    min-width: 171px;
    height: 45px;
    border-radius: 25px;
    text-align: center;
    padding-top: 12.5px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    border: 1px solid transparent;
}

.products-cat-btns .btn-layer .btn-content img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.products-cat-btns .btn-layer .btn-content:hover {
    border-color: var(--site-color);
    background-color: var(--site-light-color);
    cursor: pointer;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05),
        0px 2px 20px rgba(0, 0, 0, 0.1);
}

.hazardous-inputs,
.sea-inputs,
.delivery-inputs {
    border: 1px solid #ccc;
    padding: 0.5px;
}

label {
    font-size: 12px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
}

.hazardous-inputs input,
.sea-inputs input,
.delivery-inputs input {
    width: calc(100% - 30px);
    padding: 0 15px;
}

input:focus::placeholder {
    color: #ebebeb;
}

.rotate_animate_up {
    transition: all 0.2s;
    transform: rotate(-180deg);
}

.rotate_animate_down {
    transition: all 0.2s;
    transform: rotate(0deg);
}

.imo_suggestion,
.sea-suggestion,
.container-type-suggestion,
.sea_bulk_suggestion,
.delivery-ports-suggestion,
.additional-service-suggestion,
.modals-suggestion {
    width: 100%;
    max-height: 300px;
    overflow-y: scroll;
}

.imo_suggestion,
.sea_bulk_suggestion,
.delivery_suggestion {
    display: none;
}

.imo_search_input:hover,
.perishable-inputs .temp-type .icon-box i,
.transportation-input:hover,
.transportation-input input:hover,
.content-remove-btn i:hover,
.additional-service-input i:hover,
.modals-input i:hover {
    cursor: pointer;
}

.perishable-inputs {
    padding: 0.7px;
    position: relative;
}

.perishable-inputs input {
    width: calc(100% - 130px);
}

.perishable-inputs .temp-type {
    width: 130px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.perishable-inputs .temp-type input,
.perishable-inputs .temp-type .icon-box {
    height: 35px;
    width: 80px;
    border: none;
    outline: none;
}

.perishable-inputs .temp-type input {
    border-left: 1px solid #ebebeb;
}

.perishable-inputs .temp-type input:hover {
    cursor: default;
}

.perishable-inputs .temp-type .icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.perishable-inputs .temperature {
    position: absolute;
    top: 110%;
    right: 0;
    background-color: #fff;
    width: 130px;
    display: none;
}

.perishable-inputs .temperature li {
    background: transparent;
    border: none;
    padding: 8px 20px !important;
}

.oversized-inputs input {
    width: calc(100% - 80px);
}
.oversized-inputs,
.auto-inputs {
    display: flex;
    align-items: center;
}

.oversized-inputs div,
.auto-inputs div {
    width: 80px;
    height: 30px;
    border-left: 1px solid #ebebeb;
    padding: 5px 10px;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

.btn-bar .btn-content {
    width: 83px;
    height: 35px;
    background-color: #f7f5f5;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.7px;
    transition: all 0.2s;
}

.btn-bar .btn-content:hover {
    cursor: pointer;
    background-color: var(--site-color);
    color: #fff;
}

.transportation-input .icon-box {
    width: 50px;
}

.container-type-input .icon-box,
.additional-service-input .icon-box,
.modals-input .icon-box {
    width: 50px;
}

.container-type-input input:hover,
.container-type-input:hover,
.additional-service-input input:hover,
.additional-service-input:hover,
.modals-input:hover,
.modals-input input:hover ,
.addons-services .badge{
    cursor: pointer;
}

input[name="customClearancePrice"]:hover {
    cursor: auto !important;
}

.cc-price-input:hover , .common-services-details #commonAddons:hover{
    cursor: default;
}

.cc-price-input input:hover {
    cursor: text;
}

.additional-info {
    height: 80px;
    padding: 5px;
}

.additional-info textarea {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    padding: 5px;
    resize: none;
    font-family: "Poppins", sans-serif;
}

input[type="checkbox"]:hover {
    cursor: pointer;
}

.associated-inputs .btn-bg-layer {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: var(--site-light-color);
    transition: 0.5s;
}

.associated-inputs:hover {
    cursor: pointer;
}

.associated-inputs:hover .btn-bg-layer {
    width: 100%;
}

.checked_true {
    background-color: var(--site-light-color);
    border-color: var(--site-color);
}

/* Detailed Quotation Page */
.shipment-icon i {
    font-size: 3.5em;
    color: #ccc;
    z-index: -1;
}

.shipment-ports > div {
    width: 50%;
    height: 100%;
}

.mid-port-icon {
    top: 50%;
    left: 100%;
    transform: translate(0%, -50%);
    transition: all 0.2s;
}

html,
body {
    min-width: 597px !important;
}

.shipment-container h3,
.quotation-info h3 {
    color: var(--site-color);
    font-family: "Poppins", sans-serif;
    font-size: 17px;
}

@media only screen and (max-width: 991px) {
    .shipment-container {
        min-width: 100%;
    }

    .booked_quote_container {
        min-width: 90%;
    }
}

@media only screen and (max-width: 773px) {
    .shipment-ports {
        display: block !important;
    }
    .mid-port-icon {
        display: none;
    }
    .shipment-ports > div {
        width: 100%;
        height: 50%;
    }
}

.price-filter > div {
    height: 35px;
    width: 85px;
    margin-top: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    background: rgba(255, 255, 255, 0.3);
}

.price-filter > div:hover {
    cursor: pointer;
}

.included-services input {
    pointer-events: none;
}

.included-services #origin_port,
.included-services #discharge_port {
    pointer-events: all;
}

.shipping-cards {
    min-height: 230px !important;
}

.card-inner-left {
    width: 70%;
}
.services-table th{
    font-size: 14px;
}
.services-table td{
    font-size:12px
}
.card-inner-right {
    width: 30%;
}
.card-inner-bottom {
    width : 100% ; 
    border : 1px solid black ; 
    min-height : 10vh ; 
}

.card-inner-left .card-left-top {
    height: 35%;
    max-height: 65px;
}

.card-inner-left .card-left-bottom {
    height: 65%;
}

.shipping_line {
    height: 100%;
    display: flex;
}

.shipping_line .shipping-logo {
    width: 60%;
    height: 100%;
}

.shipping_line .shipping-logo .logo-img {
    width: 40px;
    height: 40px;
}

.shipping_line .buy_btn {
    width: 40%;
    height: 100%;
}

.buy_btn .purchase-btn {
    width: 130px;
    height: 100%;
    background: var(--site-color);
    transition: all 0.2s;
}

.buy_btn .purchase-btn:hover {
    cursor: pointer;
    box-shadow: 0 0 10px var(--site-color), 0 0 20px var(--site-color), 0 0 40px var(--site-color),
        0 0 80px var(--site-color) !important;
    color: #fff;
    transition-delay: 0.3s;
}

.buy_btn .purchase-btn div {
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tracking-line .dot {
    width: 22px;
    height: 22px;
    border: 3px solid transparent;
}

.tracking-line .dot > .rounded-circle {
    height: 100%;
    width: 100%;
    border: 3px solid #ccc;
}

.tracking-line .line {
    width: 100%;
    height: 2px;
    background: #ccc;
}

.tracking-line .line-title {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.fa-circle-arrow-down:hover {
    cursor: pointer;
}

/* .delivery-buttons-bar .land:hover,
.delivery-buttons-bar .auto:hover {
    cursor: no-drop;
} */

.btn-outline-warning {
    color: var(--site-color);
    border-color: var(--site-color);
}

.btn-outline-warning:hover {
    background: var(--site-color);
    font-weight: bold;
}

.content-remove-btn i {
    transition: all 0.2s;
}
.content-remove-btn i:hover {
    transform: scale(1.3);
}

.country_dynamic_ports {
    background-color: #f5f5f5 !important;
}

.country_dynamic_ports span {
    font-weight: bold;
    margin: 3px 0;
    transition: all 0.2s;
    padding-left: 15px;
}

.country_dynamic_ports span:hover {
    margin-left: 10px;
    color: var(--site-color);
}

.shipping-cards .more-details {
    width: 100%;
    min-height: 60px;
    margin-top: 40px;
    background-color: var(--site-light-color);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none;
}

.shipping-cards .more-detail-shipment {
    background: #dedede;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    margin-right: 3px;
}

.back-btn .btn-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #28a74644;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    white-space: nowrap;
    letter-spacing: 0.8px;
}

.back-btn .btn-circle i {
    transform: translateX(100%);
    transition: all 0.3s;
}

.back-btn .btn-circle:hover i {
    transform: translateX(0);
}

.back-btn .btn-circle:hover {
    width: 160px;
    border-radius: 25px;
    cursor: pointer;
    padding: 5px;
}

.back-btn label:hover {
    cursor: pointer;
}

.back-btn .home-btn {
    width: 100px;
    height: 35px;
    background-color: var(--site-color);
    border-radius: 25px;
    color: #fff;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.back-btn .home-btn label {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.back-btn .home-btn:hover {
    cursor: pointer;
}

.air-fa-plane-disable {
    color: #c4c4c4 !important;
}

.modal label {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-transform: capitalize;
}

.modal .save-modal-btn,
.modal .close-modal-btn:hover {
    background-color: var(--site-color);
    color: #fff;
}

.modal .close-modal-btn {
    border: 1px solid var(--site-color);
    color: var(--site-color);
}

#warehouse_weight_input:hover,
#warehouse_volume_input:hover,
#warehouse_total_days_input:hover {
    cursor: text !important;
}

.services-breakdown {
    background-color: #ffff !important;
}

.more-details table {
    font-size: 13px !important;
    font-family: "Roboto Mono", monospace;
}

.more-details table tr td,
.more-details table tr th {
    padding: 5px;
}

.more-details table th {
    border: none !important;
}

.search-organisation-bar {
    width: 230px;
    height: 35px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.saved-addresses {
    width: 500px;
    display: none;
}

.search-organisation-bar input {
    width: 100%;
    height: 33px;
    border: none;
    outline: none;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    font-weight: 500;
}

.search-organisation-bar ::placeholder,
.search-organisation-bar ::-moz-placeholder,
.search-organisation-bar ::-webkit-input-placeholder {
    font-family: "IBM Plex Mono", monospace;
}

.search-organisation-bar .organisation-suggestion,
.organisation-address-suggestion {
    width: 100%;
    left: 0;
    z-index: 10 !important;
    border-radius: 10px;
    background-color: #fff;
    max-height: 230px;
    overflow-y: scroll;
    display: none;
}

.search-organisation-bar .organisation-suggestion li {
    background: none;
    border: none;
    transition: all 0.2s;
}

.search-organisation-bar .organisation-suggestion li:hover {
    color: var(--site-color);
    padding-left: 30px;
    cursor: pointer;
    font-weight: bold;
}

.save-address-input:hover,
.saved-addresses:hover {
    cursor: pointer;
}

.organisation-address-suggestion {
    font-size: 12px;
    font-weight: 500;
}

.organisation-address-suggestion li:hover {
    background-color: var(--site-light-color);
}

.org-address-search-disable {
    display: none;
}

.delivery_suggestion .world-map {
    min-height: 260px;
    height: 100%;
    width: 80%;
    min-width: 400px;
    top: 0;
    display: none;
}

.remove-addon:hover {
    color: var(--site-color);
    transition: all 0.2s;
    cursor: pointer;
}

.additional-service-suggestion .disabled_additional_service {
    background-color: #e8e8e8;
}

.additional-service-suggestion .disabled_additional_service:hover{
    background-color: #e8e8e8;
    cursor: no-drop;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
    position: relative;
}

div:where(.swal2-container) img:where(.swal2-image) {
    background: var(--site-color);
    border-radius: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: -50%;
    left: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

div:where(.swal2-container) .swal2-html-container {
    margin-top: 60px;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    margin-bottom: -50px;
}

/* 
font-family: 'IBM Plex Mono', monospace;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Ubuntu', sans-serif; 
*/