/* 
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Outfit", sans-serif;
    font-style: normal;
} */

body {
    padding-right: 0 !important;
}


.canvas-wrapper {
    border-radius: 16px;
    padding: 20px;
    background: #D4EEF0;
}

.canvas-wrapper img {
    text-align: center;
    display: block;
    border-radius: 16px;
    height: auto;
    width: 100%;
    min-width: 1000px;
    max-width: 100%;
}

.to-proceed {
    font-size: 12px;
    display: flex;
    line-height: 18px;
    gap: 6px;
}
.marina-allocation-signs-top {
    position: static;
}
.marina-allocation-signs-top ul,
.marina-allocation-signs ul {
    list-style: none;
    margin: 0;
    display: flex;
    gap: 12px;
    padding: 0;
}
.marina-allocation-signs-top ul li,
.marina-allocation-signs ul li {
    display: flex;
    gap: 6px;
    padding: 0;
    align-items: center;
}
.marina-allocation-signs-top ul {
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
}
.marina-allocation-signs .marina-types {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #161717;
}

.marina-square {
    width: 16px;
    height: 16px;
}
.marina-allocation-signs-top p { margin-bottom: 0;}
.marina-allocation-signs p {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #161717;
    margin: 0;
}

.dry-storage-allocation-colors {
    background: #84AFB1;
}

.berth-allocation-colors {
    background: #306583;
}

.mooring-allocation-colors {
    background: #727BCF;
}

.floating-pen-allocation-colors {
    background: #A1B528;
}

.booked-birth-allocation-colors {
    background: #DC6A60;
}

.available-berth-in-next-24-hours-allocation-colors {
    background: #F9D863;
}

.selected-colors {
    background: #2FB27E;
}

.front-side-map-view .offcanvas {
    padding-left: 0;
    padding-right: 0;
    width: 580px;
}

.front-side-map-view .btn-close {
    padding: 0;
    background: none;
    opacity: 1;
    width: 14px;
    height: 14px;
    padding-right: 8px;
}

.front-side-map-view .btn-close:focus {
    box-shadow: none;
    outline: none;
}
.front-side-map-view .offcanvas {
    z-index: 99999;
}
.front-side-map-view .offcanvas-header {
    padding: 10px 16px 10px 20px;
    background-color: rgba(217, 218, 220, 0.3);
}

.front-side-map-view .offcanvas-header p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    color: #416168;
}

.front-side-map-view .offcanvas-body {
    padding: 20px;
}

.front-side-map-view .list_detail_filter {
    padding: 0;
    border-radius: 0;
    border: none;
    border-top: 0;
    padding-top: 0;
}

.vessel-info-from-block {
    border-top: 1px solid #D9DADC;
    padding-top: 24px;
}

.this-vessel-info.black {
    display: flex;
    font-size: 12px;
    line-height: 16px;
    gap: 6px;
}

.vessel-ul-tab {
    width: 100%;
    display: flex;
    margin-bottom: 24px;
}

.vessel-ul-tab .nav-item {
    width: 50%;
}

.vessel-ul-tab.nav-tabs .nav-link {
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #D9DADC;
    border-radius: 0;
    width: 100%;
    color: #626F70;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
}

.vessel-ul-tab.nav-tabs .nav-link.active {
    color: #37C0C9;
    border-bottom: 1px solid #37C0C9;
}

.short-term-content-items,
.long-term-content-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 24px;
}

/* .short-term-content-item:nth-child(3) {
    grid-column: span 2;
} */

.vessel-information-block-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    column-gap: 12px;
}


.long-term-content-item:nth-child(3){
    grid-column: 1 / -1;
}

.long-term-content-item:nth-child(4),
.long-term-content-item:nth-child(5) {
    margin: 24px 0;
}

.long-term-content-items {
    row-gap: 0;
}
select {
    background-position: right 12px center !important;
    padding: 12px 12px 12px 16px !important;
}

.right-pad-box.marina-map-view-container,
.alert_massage.available-offers-marina-map-view {
    margin-left: 0;
}

.front-side-map-view .alert_massage {
    padding: 20px;
    border-radius: 16px;
    background: #EFF6F6;
    margin-top: 30px;
    border: none;
}

.front-side-map-view .alert_massage .offer-container {
    margin-bottom: 12px;
}

.front-side-map-view .offer-box-wrapper {
    padding: 24px 0 0;
}

.occupied-berth {
    background-color: #EFF6F6;
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}

.dockin-time-block ul {
    display: flex;
    gap: 107px;
    margin-bottom: 0;
}

.vessel-specification-block ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.vessel-specification-block ul li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    line-height: 18px;
}

.vessel-specification-block ul li:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    background: #000;
    left: 8px;
    top: 8px;
    border-radius: 100%;
}

.selected-birth ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4px;
    padding-left: 20px;
    width: 69%;
    box-sizing: border-box;
    row-gap: 5px;
}

.selected-birth ul li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    line-height: 18px;
}

.selected-birth ul li:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    background: #000;
    left: 10px;
    top: 8px;
    border-radius: 100%;
}
.selected-birth-wrapper-main {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    margin: 0 -10px;
}
.selected-birth-wrapper {
    margin-bottom: 14px;
    width: 50%;
    padding: 0 10px;
    flex-shrink: 0;
}
.selected-birth {
    padding: 10px;
    background: #EFF6F6;
    border-radius: 16px;
    margin-bottom: 10px;
    height: 100%;
}

.selected-birth p {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
    align-items: center;
}

.selected-birth-wrapper>p {
    color: #C93737;
    font-size: 12px;
    line-height: 18px;
    margin-top: 0;
    margin-bottom: 0;
}



/* Horizontal scrollbar track */
.offcanvas-body::-webkit-scrollbar {
    width: 8px;
    /* height: 8px; */
    cursor: pointer;

}

/* Track */
.offcanvas-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

/* Handle */
.offcanvas-body::-webkit-scrollbar-thumb {
    background: #83A7B2;
    border-radius: 10px;
    /* height: 5px; */
    border: 2px solid #fff;
    cursor: pointer;
}

/* Handle on hover */
.offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: #83A7B2;
    cursor: pointer;
}

/* Ensure the element has horizontal scrolling */
.element-with-scroll {
    overflow-y: auto;

    /* if you want to hide vertical scrolling */
}


.z-9 {
    z-index: 9;
}

.marina-body {
    /* display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: auto; */
    position: relative;
    padding: 0 12px;
    z-index: 0;
}

.vector-image-wrapper {
    width: 100%;
    height: 792px;
    position: relative;
    max-width: 1140px;
}

.vector-image-wrapper:before {
    background-image: url(/assets/frontend/images/land-area_individual.svg);
    content: "";
    height: 100%;
    width: 368px;
    background-size: contain;
    position: absolute;
    background-color: #37c0c9;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    z-index: 1;
}

.jetty-box-wrapper {
    position: absolute;
    width: calc(100% - 296px);
    height: 100%;
    background-color: #37c0c9 !important;
    top: 0;
    left: 368px;
}

.small-boat {
    width: 29px;
    height: 66px;
    z-index: 9;
    background-image: url(/assets/frontend/images/Small-Boat-Vertical.svg);
    background-repeat: no-repeat;
  }
  .small-boat-horizontal {
    width: 66px;
    height: 30px;
    background-image: url(/assets/frontend/images/Small-Boat-Horizontal.svg);
    background-repeat: no-repeat;
  }
  .medium-boat {
    width: 29px;
    height: 103px;
    z-index: 9;
    background-image: url(/assets/frontend/images/Boat-Vertical.svg);
    background-repeat: no-repeat;
  }
  .medium-boat-horizontal {
    width: 103px;
    height: 29px;
    background-image: url(/assets/frontend/images/Boat.svg);
    background-repeat: no-repeat;
  }
  .large-boat {
    width: 42px;
    height: 111px;
    background-image: url(/assets/frontend/images/Large-Boat-Vertical.svg);
    background-repeat: no-repeat;
  }
  .large-boat-horizontal {
    width: 111px;
    height: 42px;
    background-image: url(/assets/frontend/images/Large-Boat-Horizontal.svg);
    background-repeat: no-repeat;
  }
  .boat-mooring {
    width: 103px;
    height: 133px;
    background-image: url(/assets/frontend/images/Boat-Mooring.svg);
    background-repeat: no-repeat;
  }
.berth-box-medium-boat {
    width: 18px;
    height: 45px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    position: absolute;
}
.jetty-box-horizontal-one {
    width: 220px;
    height: 14px;
    top: 320px;
    left: -51px;
    position: absolute;
    z-index: 1;
}

.jetty-box-horizontal-two {
    width: 275px;
    height: 14px;
    top: 320px;
    left: -50px;
    position: absolute;
    z-index: 1;
}

.jetty-box-horizontal-one:before {
    content: "";
    background: #DECABF;
    width: 20px;
    height: 40px;
    position: absolute;
    transform: rotate(12deg);
    top: -21px;
    left: -17px;
}

.jetty-box-vertical-one {
    left: 155px;
    height: 145px;
    width: 14px;
    top: 322px;
}
.jetty-box-vertical-three {
    left: 211px;
    height: 145px;
    width: 14px;
    top: 253px;
    z-index: 1;
  }
  .jetty-box-horizontal-five {
    width: 321px;
    height: 14px;
    top: 319px;
    left: -51px;
    position: absolute;
    z-index: 1;
  }
  .jetty-box-vertical-five {
    width: 14px;
    height: 234px;
    top: 201px;
    left: 6px;
    position: absolute;
    z-index: 1;
  }
  .jetty-box-vertical-six {
    width: 14px;
    height: 234px;
    top: 201px;
    left: 185px;
    position: absolute;
    z-index: 1;
  }
  .jetty-box-vertical-seven {
    width: 14px;
    height: 156px;
    top: 319px;
    left: 257px;
    position: absolute;
    z-index: 1;
  }
  .jetty-box-horizontal-seven {
    width: 166px;
    height: 14px;
    top: 461px;
    left: 257px;
    position: absolute;
    z-index: 1;
  }
  .jetty-box-vertical-eight {
    width: 14px;
    height: 262px;
    top: 282px;
    left: 410px;
    position: absolute;
    z-index: 1;
  }
  .jetty-box-horizontal-six {
    width: 193px;
    height: 14px;
    top: 277px;
    left: 321px;
    position: absolute;
    z-index: 1;
  }
  .vector-image-home-text-two {
    top: 413px;
    left: 186px;
  }
  .vector-image-home-text-three {
    top: 261px;
    left: 141px;
  }
  .vector-image-home-text-four {
    top: 374px;
    left: 141px;
  }

.jetty-box-vertical-three-second-pipe {
    left: 150px;
    height: 93px;
    width: 14px;
    top: 227px;
}
.vector-image-home-text-jetty-two {
    top: 203px;
    left: 130px;
}

.berth-C09 {
    left: 601px;
    top: 313px;
  }
  .berth-C08 {
    left: 580px;
    top: 369px;
  }
  .berth-C10 {
    top: 276px;
    left: 523px;
  }
  .berth-C11 {
    top: 327px;
    left: 523px;
  }
  .berth-C12 {
    top: 256px;
    left: 397px;
  }
  .berth-C13 {
    top: 256px;
    left: 434px;
  }
  .berth-C14 {
    top: 256px;
    left: 486px;
  }
  .berth-C15 {
    top: 256px;
    left: 523px;
  }
  .berth-C16 {
    top: 256px;
    left: 575px;
  }
  .berth-C17 {
    top: 353px;
    left: 398px;
  }
  .berth-C18 {
    top: 353px;
    left: 435px;
  }
  .berth-C19 {
    top: 353px;
    left: 487px;
  }
  .berth-C20 {
    top: 353px;
    left: 524px;
  }
  .berth-C21 {
    top: 373px;
    left: 597px;
  }
  .berth-C22 {
    top: 237px;
    left: 725px;
  }
  .berth-C23 {
    top: 289px;
    left: 725px;
  }
  .berth-C24 {
    top: 326px;
    left: 725px;
  }
  .berth-C25 {
    top: 402px;
    left: 725px;
  }
  .berth-C26 {
    top: 476px;
    left: 725px;
  }
  .berth-C27 {
    top: 383px;
    left: 501px;
  }
  .berth-C28 {
    top: 248px;
    left: 578px;
  }
  .boat-group-one {
    top: 274px;
    left: 597px;
  }
  .boat-group-two {
    top: 286px;
    left: 490px;
  }
  .boat-group-three {
    top: 337px;
    left: 490px;
  }
  .boat-group-four {
    top: 217px;
    left: 392px;
  }
  .boat-group-five {
    top: 217px;
    left: 481px;
  }
  .boat-group-six {
    top: 217px;
    left: 570px;
  }
  .boat-group-seven {
    top: 334px;
    left: 392px;
  }
  .boat-group-eight {
    top: 334px;
    left: 481px;
  }
  .boat-group-nine {
    top: 334px;
    left: 592px;
  }
  .boat-group-ten {
    top: 243px;
    left: 672px;
  }
  .boat-group-eleven {
    top: 295px;
    left: 672px;
  }
  .boat-group-twelve {
    top: 408px;
    left: 672px;
  }
  .boat-group-thirteen {
    top: 482px;
    left: 672px;
  }
  .boat-group-fourteen {
    top: 314px;
    left: 444px;
  }
  .boat-group-fifteen {
    top: 199px;
    left: 507px;
  }

.berth-bg {
    background: #46A44A;
    z-index: 99;
    cursor: pointer;
}

.berth-box-small-boat {
    width: 24px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: absolute;
    color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: 700;
}


.berth-box-large-boat {
    width: 36px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    position: absolute;
    color: #fff;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: 700;
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.rotate-minus-37 {
    rotate: -37deg;
  }
  .rotate-minus-270 {
  
    transform: rotate(-270deg);
  }
  
  .rotate-310 {
  
    transform: rotate(310deg);
  }

.absolute {
    position: absolute;
}

.bg-D4EEF0 {
    background: #D4EEF0;
}
.bg-C37A4C {
    background: #c37a4c;
}
.bg-red {
    background: #C93737;
}
.bg-jetty-yellow {
    background: #F9D863;
}
.bg-CCCCCC {
    background: #CCCCCC;
}
.bg-848E8E {
    background: #848e8e;
  }
.gap-03 {
    gap: 3px;
}
.gap-08 {
    gap: 8px;
  }
.f-14 {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #161717;
}
i {
    display: flex;
}
i::before {
    content: "";
    display: block;
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    background-size: cover !important;
}
.green-home::before {
    background-image: url(/assets/frontend/images/green-home.svg);
    width: 103px;
    height: 69px;
}
.red-home::before {
    background-image: url(/assets/frontend/images/red-home.svg);
    width: 103px;
    height: 69px;
}
.mooring {
    background-image: url(/assets/frontend/images/mooring.svg);
    width: 30px;
    height: 30px;
}
.mooring_red{
    background-image: url(/assets/frontend/images/mooring_red.svg);
    width: 30px;
    height: 30px;
}
.mooring_yellow{
    background-image: url(/assets/frontend/images/mooring_yellow.svg);
    width: 30px;
    height: 30px;
}
.green-home-img {
    top: 280px;
    left: -177px;
}
.red-home-img {
    top: 280px;
    left: -177px;
}
.vector-image-home-text-three {
    margin-top: 2px;
}
.mooring-img {
    top: 478px;
    left: 282px;
}
.mooring-text-one { margin-top: 2px;}
.mooring-img2 {
    top: 482px;
    left: 218px;
}
.mooring-img3 {
    top: 284px;
    left: 290px;
}

/* Modal CSS */
.btn-close:focus {
    box-shadow: none;
    opacity: 0.5;
}

.btn-primary {
    background-color: #37C0C9;
    color: #fff;
    padding: 12px 14px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 18px;
    font-size: 14px;
    border-color: #37C0C9;
    border-radius: 10px;
    margin: 0;
    width: 52%;
}

.btn-secondary {
    color: #37C0C9;
    background-color: #fff;
    padding: 12px 14px;
    border-color: #37C0C9;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 18px;
    font-size: 14px;
    margin: 0;
    width: 44%;
}

.floating_group {
    position: relative;
    margin-bottom: 24px;
}

.floating_select {
    display: block;
    position: relative;
    padding: 8px 16px;
    width: 100%;
    box-sizing: border-box;
    color: #161717;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    outline: 0;
    border: 1px solid #D9DADC;
    border-radius: 8px;
    height: 42px;
    line-height: 26px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(/assets/frontend/images/select.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-color: transparent;
    line-height: 1.2;
    text-indent: 0.01px;
    cursor: pointer;
    padding: 6px 20px 6px 16px !important;
    width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.floating_label {
    position: absolute;
    pointer-events: none;
    left: 16px;
    top: 7px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    color: #626F70;
    font-size: 16px;
    font-weight: 400;
}

.floating_select:not([value=""]):valid~.floating_label,
.dockindatelong .floating_input:not([value=""]):valid~.floating_label,
.dockindate .floating_input:not([value=""]):valid~.floating_label {
    font-size: 12px;
    line-height: 10px;
    color: #626F70;
    top: -5px;
    left: 22px;
    background: #fff;
    padding: 0 5px;
}


.marina-vesel-info-popup .modal-content {
    padding: 30px;
    border-radius: 16px;
}

.marina-vesel-info-popup .modal-header {
    border-bottom: none;
}

.marina-vesel-info-popup h1 {
    font-size: 24px;
    font-weight: 500;
    color: #272A2E;
    margin-bottom: 30px;
}

.vessel-list-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    row-gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vessel-list-items li span,
.vessel-list-items li h6 {
    font-size: 14px;
    line-height: 24px;
    color: #626F70;
}

.vessel-list-items li h6 {
    color: #161717;
    margin: 0;
}

.vessel-info-box p {
    font-size: 16px;
    line-height: 26px;
    color: #626F70;
    margin: 20px 0;
}

.marina-vesel-info-popup .modal-footer {
    border-top: none;
    display: flex;
    justify-content: space-between;
    column-gap: 16px;
}

.marina-allocation-signs {
    margin-top: 30px;
    margin-bottom: 30PX;
    position: absolute;
    right: -42px;
    z-index: 1;
    width: auto;
    text-align: right;
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.moving-your-boat {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    padding: 8px 12px;
    border: 1px dashed #fff;
    border-radius: 6px;
    background-color: transparent;
}

.marina-allocation-signs ul {
    list-style: none;
    margin: 0;
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 8px 16px;
    border-radius: 8px;
}

.marina-allocation-signs ul li {
    display: flex;
    gap: 6px;
    padding: 0;
    align-items: center;
}

.available-birth-allocation-colors {
    background: #2FB27E;
}

.booked-birth-allocation-colors {
    background: #DC6A60;
}

.available-berth-in-next-24-hours-allocation-colors {
    background: #F9D863;
}


.marina-square {
    width: 16px;
    height: 16px;
}

.marina-allocation-signs p {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #161717;
    margin: 0;
}

/* Move Boat Modal CSS */
.vessel-info-box h2 {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 16px;
    font-weight: 400;
}

.vessel-info-box .floating_group {
    position: relative;
    margin-bottom: 20px;
}

.text-truncate {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 40px;
}
@media only screen and (max-width: 1260px){
    .marina-body {
        overflow: auto;
        background: #37c0c9;
    }
    .marina-allocation-signs {
        margin-top: 20px;
        margin-bottom: 20PX;
        right: 0;
    }
}
@media only screen and (max-width: 575px){ 
    .marina-allocation-signs {
        left: 20px;
        right: auto;
        white-space: nowrap;
    }
}
@media only screen and (max-width: 400px) { 
    .long-term-content-items {
        grid-template-columns: repeat(1, 1fr);
    }
    .long-term-content-items .dockindatelong {
        margin-bottom: 20px !important;
    }
    .long-term-content-item:nth-child(5) {
        margin-top: 0;
        margin-bottom: 24px !important;
    }
}

@media (min-width: 576px) {
    .marina-vesel-info-popup {
        max-width: 525px;
    }
}

/* Modal CSS End */