/* 2026-05-14: Shared classes used to replace inline styles for CSP compliance. */
.csp-message {
    padding: 10px;
    border-radius: 6px;
}

.csp-message-success {
    background: #e6ffed;
}

.csp-message-error {
    background: #ffe6e6;
}

.csp-message-warning {
    background: #fff4e6;
}

.csp-message-icon {
    font-weight: bold;
    margin-right: 5px;
}

.csp-message-icon-success {
    color: green;
}

.csp-message-icon-error {
    color: red;
}

.csp-message-icon-warning {
    color: orange;
}

/* 2026-05-20: Appointment success popup action link for Empty Inspection payment. */
.csp-message-note {
    color: #46505f;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
}

.csp-message-actions {
    margin-top: 10px;
}

.csp-message-link {
    background: #f16522;
    border: 1px solid #f16522;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    text-decoration: none;
}

.csp-message-link:hover,
.csp-message-link:focus {
    background: #d95416;
    border-color: #d95416;
    color: #fff;
    text-decoration: none;
}

.csp-container-row {
    margin: auto;
}

.csp-container-row-active {
    background-color: #13ff3036;
}

.csp-container-row-customs-active {
    background-color: #e6ffed;
}

.csp-container-icon {
    height: 66px;
    float: left;
    margin-right: 5px;
}

.csp-container-result-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(26, 44, 71, 0.08);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    padding: 14px 16px;
}

.csp-container-result-active {
    border-left: 4px solid #22c55e;
}

.csp-container-result-main {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.csp-container-result-icon {
    height: 46px;
    width: 46px;
    flex: 0 0 auto;
}

.csp-container-result-number {
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.csp-container-result-meta {
    color: #647084;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}

.csp-container-result-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.csp-container-badge {
    background: #eef2f7;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    white-space: nowrap;
}

.csp-container-expand-icon {
    color: #f16522;
}

.csp-container-details-panel {
    background: #f8fafc;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    margin: -4px 0 12px;
    padding: 14px;
}

.csp-container-detail-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.csp-container-detail-item {
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    padding: 10px 12px;
}

.csp-container-detail-item span {
    color: #7a8598;
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
}

.csp-container-detail-item strong {
    color: #253044;
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .csp-container-result-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .csp-container-result-status {
        justify-content: flex-start;
    }

    .csp-container-detail-grid {
        grid-template-columns: 1fr;
    }
}

.csp-float-left {
    float: left;
}

.csp-float-right {
    float: right;
}

.csp-clickable {
    cursor: pointer;
}

.csp-appointment-chip {
    background: #ffffff;
    color: #ff6a00;
    border: 2px solid #ff6a00;
}

.csp-appointment-container-card {
    border-radius: 14px;
    transition: all .25s ease;
}

.csp-appointment-container-card-available {
    border: 2px solid #22c55e;
    cursor: pointer;
    opacity: 1;
}

.csp-appointment-container-card-unavailable {
    border: 2px solid #ef4444;
    cursor: not-allowed;
    opacity: 0.6;
}

.csp-appointment-container-card-available:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.csp-appointment-line-badge {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #0d6efd;
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: 500;
}

.csp-appointment-select-checkbox {
    transform: scale(1.3);
    cursor: pointer;
    opacity: 0;
}

.csp-appointment-checkbox-wrap {
    top: 14px;
    left: 14px;
}

.csp-appointment-title {
    font-size: 20px;
    letter-spacing: 1px;
}

.csp-appointment-validation-badge {
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 9px;
    white-space: normal;
    word-break: break-word;
    max-width: 200px;
    display: inline-block;
}

.csp-data-background[data-background="/img/bg/Bg2.jpg"] {
    background-image: url("/img/bg/Bg2.jpg");
}

.csp-data-background[data-background="/img/slider/cslider1.jpg"] {
    background-image: url("/img/slider/cslider1.jpg");
}

.csp-data-background[data-background="/img/slider/cslider2.jpg"] {
    background-image: url("/img/slider/cslider2.jpg");
}

.csp-data-background[data-background="/img/slider/MarineShip.jpg"] {
    background-image: url("/img/slider/MarineShip.jpg");
}

.csp-data-background[data-background="img/slider/new/slider.jpg"] {
    background-image: url("/img/slider/new/slider.jpg");
}

.csp-data-background[data-background="img/slider/new/slider2.jpg"] {
    background-image: url("/img/slider/new/slider2.jpg");
}

.csp-data-background[data-background="img/slider/new/slider3.jpg"] {
    background-image: url("/img/slider/new/slider3.jpg");
}

.csp-data-background[data-background="img/bg/IMG_9417-ED.jpg"] {
    background-image: url("/img/bg/IMG_9417-ED.jpg");
}

.csp-home-slider {
    min-height: 478px;
}

.csp-home-counter {
    min-height: 350px;
}

.csp-link-inherit {
    text-decoration: none;
    color: inherit;
}

.csp-home-service-icon {
    width: 110px !important;
}

.csp-home-portal-icon {
    width: 210px !important;
}

.csp-connection-status {
    color: red;
    font-weight: 800;
}

.csp-header-icon {
    width: 30px;
}

.csp-hidden {
    display: none;
}

.preloader.csp-hidden {
    display: none;
}

.csp-text-capitalize {
    text-transform: capitalize;
}

.csp-login-dialog {
    place-content: center;
}

.csp-login-content {
    width: fit-content;
    height: initial;
    padding: 25px;
}

.csp-login-body {
    align-self: center;
}

.csp-login-forgot {
    width: 63%;
}

.csp-login-register {
    width: 35%;
}

.csp-modal-header {
    background-color: #4282a2;
    color: #fff;
}

.csp-close-white {
    color: #fff;
}

.csp-modal-body-text {
    color: #000;
    font-size: initial;
}

.csp-mt-27 {
    margin-top: 27px;
}

.csp-logout-link {
    padding: 10px 15px !important;
    margin-top: 10px;
}

.csp-animation-delay-2 {
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
}

.csp-animation-delay-4 {
    animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

.range-slider .slider-container.csp-range-percent-0 .bar-btn { left: 0%; }
.range-slider .slider-container.csp-range-percent-0 .bar > span { width: 0%; }
.range-slider .slider-container.csp-range-percent-1 .bar-btn { left: 1%; }
.range-slider .slider-container.csp-range-percent-1 .bar > span { width: 1%; }
.range-slider .slider-container.csp-range-percent-2 .bar-btn { left: 2%; }
.range-slider .slider-container.csp-range-percent-2 .bar > span { width: 2%; }
.range-slider .slider-container.csp-range-percent-3 .bar-btn { left: 3%; }
.range-slider .slider-container.csp-range-percent-3 .bar > span { width: 3%; }
.range-slider .slider-container.csp-range-percent-4 .bar-btn { left: 4%; }
.range-slider .slider-container.csp-range-percent-4 .bar > span { width: 4%; }
.range-slider .slider-container.csp-range-percent-5 .bar-btn { left: 5%; }
.range-slider .slider-container.csp-range-percent-5 .bar > span { width: 5%; }
.range-slider .slider-container.csp-range-percent-6 .bar-btn { left: 6%; }
.range-slider .slider-container.csp-range-percent-6 .bar > span { width: 6%; }
.range-slider .slider-container.csp-range-percent-7 .bar-btn { left: 7%; }
.range-slider .slider-container.csp-range-percent-7 .bar > span { width: 7%; }
.range-slider .slider-container.csp-range-percent-8 .bar-btn { left: 8%; }
.range-slider .slider-container.csp-range-percent-8 .bar > span { width: 8%; }
.range-slider .slider-container.csp-range-percent-9 .bar-btn { left: 9%; }
.range-slider .slider-container.csp-range-percent-9 .bar > span { width: 9%; }
.range-slider .slider-container.csp-range-percent-10 .bar-btn { left: 10%; }
.range-slider .slider-container.csp-range-percent-10 .bar > span { width: 10%; }
.range-slider .slider-container.csp-range-percent-11 .bar-btn { left: 11%; }
.range-slider .slider-container.csp-range-percent-11 .bar > span { width: 11%; }
.range-slider .slider-container.csp-range-percent-12 .bar-btn { left: 12%; }
.range-slider .slider-container.csp-range-percent-12 .bar > span { width: 12%; }
.range-slider .slider-container.csp-range-percent-13 .bar-btn { left: 13%; }
.range-slider .slider-container.csp-range-percent-13 .bar > span { width: 13%; }
.range-slider .slider-container.csp-range-percent-14 .bar-btn { left: 14%; }
.range-slider .slider-container.csp-range-percent-14 .bar > span { width: 14%; }
.range-slider .slider-container.csp-range-percent-15 .bar-btn { left: 15%; }
.range-slider .slider-container.csp-range-percent-15 .bar > span { width: 15%; }
.range-slider .slider-container.csp-range-percent-16 .bar-btn { left: 16%; }
.range-slider .slider-container.csp-range-percent-16 .bar > span { width: 16%; }
.range-slider .slider-container.csp-range-percent-17 .bar-btn { left: 17%; }
.range-slider .slider-container.csp-range-percent-17 .bar > span { width: 17%; }
.range-slider .slider-container.csp-range-percent-18 .bar-btn { left: 18%; }
.range-slider .slider-container.csp-range-percent-18 .bar > span { width: 18%; }
.range-slider .slider-container.csp-range-percent-19 .bar-btn { left: 19%; }
.range-slider .slider-container.csp-range-percent-19 .bar > span { width: 19%; }
.range-slider .slider-container.csp-range-percent-20 .bar-btn { left: 20%; }
.range-slider .slider-container.csp-range-percent-20 .bar > span { width: 20%; }
.range-slider .slider-container.csp-range-percent-21 .bar-btn { left: 21%; }
.range-slider .slider-container.csp-range-percent-21 .bar > span { width: 21%; }
.range-slider .slider-container.csp-range-percent-22 .bar-btn { left: 22%; }
.range-slider .slider-container.csp-range-percent-22 .bar > span { width: 22%; }
.range-slider .slider-container.csp-range-percent-23 .bar-btn { left: 23%; }
.range-slider .slider-container.csp-range-percent-23 .bar > span { width: 23%; }
.range-slider .slider-container.csp-range-percent-24 .bar-btn { left: 24%; }
.range-slider .slider-container.csp-range-percent-24 .bar > span { width: 24%; }
.range-slider .slider-container.csp-range-percent-25 .bar-btn { left: 25%; }
.range-slider .slider-container.csp-range-percent-25 .bar > span { width: 25%; }
.range-slider .slider-container.csp-range-percent-26 .bar-btn { left: 26%; }
.range-slider .slider-container.csp-range-percent-26 .bar > span { width: 26%; }
.range-slider .slider-container.csp-range-percent-27 .bar-btn { left: 27%; }
.range-slider .slider-container.csp-range-percent-27 .bar > span { width: 27%; }
.range-slider .slider-container.csp-range-percent-28 .bar-btn { left: 28%; }
.range-slider .slider-container.csp-range-percent-28 .bar > span { width: 28%; }
.range-slider .slider-container.csp-range-percent-29 .bar-btn { left: 29%; }
.range-slider .slider-container.csp-range-percent-29 .bar > span { width: 29%; }
.range-slider .slider-container.csp-range-percent-30 .bar-btn { left: 30%; }
.range-slider .slider-container.csp-range-percent-30 .bar > span { width: 30%; }
.range-slider .slider-container.csp-range-percent-31 .bar-btn { left: 31%; }
.range-slider .slider-container.csp-range-percent-31 .bar > span { width: 31%; }
.range-slider .slider-container.csp-range-percent-32 .bar-btn { left: 32%; }
.range-slider .slider-container.csp-range-percent-32 .bar > span { width: 32%; }
.range-slider .slider-container.csp-range-percent-33 .bar-btn { left: 33%; }
.range-slider .slider-container.csp-range-percent-33 .bar > span { width: 33%; }
.range-slider .slider-container.csp-range-percent-34 .bar-btn { left: 34%; }
.range-slider .slider-container.csp-range-percent-34 .bar > span { width: 34%; }
.range-slider .slider-container.csp-range-percent-35 .bar-btn { left: 35%; }
.range-slider .slider-container.csp-range-percent-35 .bar > span { width: 35%; }
.range-slider .slider-container.csp-range-percent-36 .bar-btn { left: 36%; }
.range-slider .slider-container.csp-range-percent-36 .bar > span { width: 36%; }
.range-slider .slider-container.csp-range-percent-37 .bar-btn { left: 37%; }
.range-slider .slider-container.csp-range-percent-37 .bar > span { width: 37%; }
.range-slider .slider-container.csp-range-percent-38 .bar-btn { left: 38%; }
.range-slider .slider-container.csp-range-percent-38 .bar > span { width: 38%; }
.range-slider .slider-container.csp-range-percent-39 .bar-btn { left: 39%; }
.range-slider .slider-container.csp-range-percent-39 .bar > span { width: 39%; }
.range-slider .slider-container.csp-range-percent-40 .bar-btn { left: 40%; }
.range-slider .slider-container.csp-range-percent-40 .bar > span { width: 40%; }
.range-slider .slider-container.csp-range-percent-41 .bar-btn { left: 41%; }
.range-slider .slider-container.csp-range-percent-41 .bar > span { width: 41%; }
.range-slider .slider-container.csp-range-percent-42 .bar-btn { left: 42%; }
.range-slider .slider-container.csp-range-percent-42 .bar > span { width: 42%; }
.range-slider .slider-container.csp-range-percent-43 .bar-btn { left: 43%; }
.range-slider .slider-container.csp-range-percent-43 .bar > span { width: 43%; }
.range-slider .slider-container.csp-range-percent-44 .bar-btn { left: 44%; }
.range-slider .slider-container.csp-range-percent-44 .bar > span { width: 44%; }
.range-slider .slider-container.csp-range-percent-45 .bar-btn { left: 45%; }
.range-slider .slider-container.csp-range-percent-45 .bar > span { width: 45%; }
.range-slider .slider-container.csp-range-percent-46 .bar-btn { left: 46%; }
.range-slider .slider-container.csp-range-percent-46 .bar > span { width: 46%; }
.range-slider .slider-container.csp-range-percent-47 .bar-btn { left: 47%; }
.range-slider .slider-container.csp-range-percent-47 .bar > span { width: 47%; }
.range-slider .slider-container.csp-range-percent-48 .bar-btn { left: 48%; }
.range-slider .slider-container.csp-range-percent-48 .bar > span { width: 48%; }
.range-slider .slider-container.csp-range-percent-49 .bar-btn { left: 49%; }
.range-slider .slider-container.csp-range-percent-49 .bar > span { width: 49%; }
.range-slider .slider-container.csp-range-percent-50 .bar-btn { left: 50%; }
.range-slider .slider-container.csp-range-percent-50 .bar > span { width: 50%; }
.range-slider .slider-container.csp-range-percent-51 .bar-btn { left: 51%; }
.range-slider .slider-container.csp-range-percent-51 .bar > span { width: 51%; }
.range-slider .slider-container.csp-range-percent-52 .bar-btn { left: 52%; }
.range-slider .slider-container.csp-range-percent-52 .bar > span { width: 52%; }
.range-slider .slider-container.csp-range-percent-53 .bar-btn { left: 53%; }
.range-slider .slider-container.csp-range-percent-53 .bar > span { width: 53%; }
.range-slider .slider-container.csp-range-percent-54 .bar-btn { left: 54%; }
.range-slider .slider-container.csp-range-percent-54 .bar > span { width: 54%; }
.range-slider .slider-container.csp-range-percent-55 .bar-btn { left: 55%; }
.range-slider .slider-container.csp-range-percent-55 .bar > span { width: 55%; }
.range-slider .slider-container.csp-range-percent-56 .bar-btn { left: 56%; }
.range-slider .slider-container.csp-range-percent-56 .bar > span { width: 56%; }
.range-slider .slider-container.csp-range-percent-57 .bar-btn { left: 57%; }
.range-slider .slider-container.csp-range-percent-57 .bar > span { width: 57%; }
.range-slider .slider-container.csp-range-percent-58 .bar-btn { left: 58%; }
.range-slider .slider-container.csp-range-percent-58 .bar > span { width: 58%; }
.range-slider .slider-container.csp-range-percent-59 .bar-btn { left: 59%; }
.range-slider .slider-container.csp-range-percent-59 .bar > span { width: 59%; }
.range-slider .slider-container.csp-range-percent-60 .bar-btn { left: 60%; }
.range-slider .slider-container.csp-range-percent-60 .bar > span { width: 60%; }
.range-slider .slider-container.csp-range-percent-61 .bar-btn { left: 61%; }
.range-slider .slider-container.csp-range-percent-61 .bar > span { width: 61%; }
.range-slider .slider-container.csp-range-percent-62 .bar-btn { left: 62%; }
.range-slider .slider-container.csp-range-percent-62 .bar > span { width: 62%; }
.range-slider .slider-container.csp-range-percent-63 .bar-btn { left: 63%; }
.range-slider .slider-container.csp-range-percent-63 .bar > span { width: 63%; }
.range-slider .slider-container.csp-range-percent-64 .bar-btn { left: 64%; }
.range-slider .slider-container.csp-range-percent-64 .bar > span { width: 64%; }
.range-slider .slider-container.csp-range-percent-65 .bar-btn { left: 65%; }
.range-slider .slider-container.csp-range-percent-65 .bar > span { width: 65%; }
.range-slider .slider-container.csp-range-percent-66 .bar-btn { left: 66%; }
.range-slider .slider-container.csp-range-percent-66 .bar > span { width: 66%; }
.range-slider .slider-container.csp-range-percent-67 .bar-btn { left: 67%; }
.range-slider .slider-container.csp-range-percent-67 .bar > span { width: 67%; }
.range-slider .slider-container.csp-range-percent-68 .bar-btn { left: 68%; }
.range-slider .slider-container.csp-range-percent-68 .bar > span { width: 68%; }
.range-slider .slider-container.csp-range-percent-69 .bar-btn { left: 69%; }
.range-slider .slider-container.csp-range-percent-69 .bar > span { width: 69%; }
.range-slider .slider-container.csp-range-percent-70 .bar-btn { left: 70%; }
.range-slider .slider-container.csp-range-percent-70 .bar > span { width: 70%; }
.range-slider .slider-container.csp-range-percent-71 .bar-btn { left: 71%; }
.range-slider .slider-container.csp-range-percent-71 .bar > span { width: 71%; }
.range-slider .slider-container.csp-range-percent-72 .bar-btn { left: 72%; }
.range-slider .slider-container.csp-range-percent-72 .bar > span { width: 72%; }
.range-slider .slider-container.csp-range-percent-73 .bar-btn { left: 73%; }
.range-slider .slider-container.csp-range-percent-73 .bar > span { width: 73%; }
.range-slider .slider-container.csp-range-percent-74 .bar-btn { left: 74%; }
.range-slider .slider-container.csp-range-percent-74 .bar > span { width: 74%; }
.range-slider .slider-container.csp-range-percent-75 .bar-btn { left: 75%; }
.range-slider .slider-container.csp-range-percent-75 .bar > span { width: 75%; }
.range-slider .slider-container.csp-range-percent-76 .bar-btn { left: 76%; }
.range-slider .slider-container.csp-range-percent-76 .bar > span { width: 76%; }
.range-slider .slider-container.csp-range-percent-77 .bar-btn { left: 77%; }
.range-slider .slider-container.csp-range-percent-77 .bar > span { width: 77%; }
.range-slider .slider-container.csp-range-percent-78 .bar-btn { left: 78%; }
.range-slider .slider-container.csp-range-percent-78 .bar > span { width: 78%; }
.range-slider .slider-container.csp-range-percent-79 .bar-btn { left: 79%; }
.range-slider .slider-container.csp-range-percent-79 .bar > span { width: 79%; }
.range-slider .slider-container.csp-range-percent-80 .bar-btn { left: 80%; }
.range-slider .slider-container.csp-range-percent-80 .bar > span { width: 80%; }
.range-slider .slider-container.csp-range-percent-81 .bar-btn { left: 81%; }
.range-slider .slider-container.csp-range-percent-81 .bar > span { width: 81%; }
.range-slider .slider-container.csp-range-percent-82 .bar-btn { left: 82%; }
.range-slider .slider-container.csp-range-percent-82 .bar > span { width: 82%; }
.range-slider .slider-container.csp-range-percent-83 .bar-btn { left: 83%; }
.range-slider .slider-container.csp-range-percent-83 .bar > span { width: 83%; }
.range-slider .slider-container.csp-range-percent-84 .bar-btn { left: 84%; }
.range-slider .slider-container.csp-range-percent-84 .bar > span { width: 84%; }
.range-slider .slider-container.csp-range-percent-85 .bar-btn { left: 85%; }
.range-slider .slider-container.csp-range-percent-85 .bar > span { width: 85%; }
.range-slider .slider-container.csp-range-percent-86 .bar-btn { left: 86%; }
.range-slider .slider-container.csp-range-percent-86 .bar > span { width: 86%; }
.range-slider .slider-container.csp-range-percent-87 .bar-btn { left: 87%; }
.range-slider .slider-container.csp-range-percent-87 .bar > span { width: 87%; }
.range-slider .slider-container.csp-range-percent-88 .bar-btn { left: 88%; }
.range-slider .slider-container.csp-range-percent-88 .bar > span { width: 88%; }
.range-slider .slider-container.csp-range-percent-89 .bar-btn { left: 89%; }
.range-slider .slider-container.csp-range-percent-89 .bar > span { width: 89%; }
.range-slider .slider-container.csp-range-percent-90 .bar-btn { left: 90%; }
.range-slider .slider-container.csp-range-percent-90 .bar > span { width: 90%; }
.range-slider .slider-container.csp-range-percent-91 .bar-btn { left: 91%; }
.range-slider .slider-container.csp-range-percent-91 .bar > span { width: 91%; }
.range-slider .slider-container.csp-range-percent-92 .bar-btn { left: 92%; }
.range-slider .slider-container.csp-range-percent-92 .bar > span { width: 92%; }
.range-slider .slider-container.csp-range-percent-93 .bar-btn { left: 93%; }
.range-slider .slider-container.csp-range-percent-93 .bar > span { width: 93%; }
.range-slider .slider-container.csp-range-percent-94 .bar-btn { left: 94%; }
.range-slider .slider-container.csp-range-percent-94 .bar > span { width: 94%; }
.range-slider .slider-container.csp-range-percent-95 .bar-btn { left: 95%; }
.range-slider .slider-container.csp-range-percent-95 .bar > span { width: 95%; }
.range-slider .slider-container.csp-range-percent-96 .bar-btn { left: 96%; }
.range-slider .slider-container.csp-range-percent-96 .bar > span { width: 96%; }
.range-slider .slider-container.csp-range-percent-97 .bar-btn { left: 97%; }
.range-slider .slider-container.csp-range-percent-97 .bar > span { width: 97%; }
.range-slider .slider-container.csp-range-percent-98 .bar-btn { left: 98%; }
.range-slider .slider-container.csp-range-percent-98 .bar > span { width: 98%; }
.range-slider .slider-container.csp-range-percent-99 .bar-btn { left: 99%; }
.range-slider .slider-container.csp-range-percent-99 .bar > span { width: 99%; }
.range-slider .slider-container.csp-range-percent-100 .bar-btn { left: 100%; }
.range-slider .slider-container.csp-range-percent-100 .bar > span { width: 100%; }

.csp-vessel-filter-active {
    background-color: lightgrey;
    color: #fff;
}

.csp-vessel-no-data-card {
    align-items: center;
    padding: 3%;
}

.csp-vessel-card-row {
    float: left;
    width: 100%;
}

.csp-vessel-brand-img {
    width: 50px;
    height: 50px;
}

.csp-vessel-ship-icon {
    color: #0b7193;
    font-size: 24px;
    line-height: .3;
    min-width: 46px;
    text-align: center;
}

.csp-progress-button-primary {
    background-color: #fff;
}

.myBar {
    transition: width 1s linear;
}

.csp-progress-width-0 {
    width: 0%;
}

.csp-progress-width-25 {
    width: 25%;
}

.csp-progress-width-50 {
    width: 50%;
}

.csp-progress-width-75 {
    width: 75%;
}

.csp-progress-width-100 {
    width: 100%;
}