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 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-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-items {
  row-gap: 10px;
}

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;
  margin-top: 23px;
}

.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 */
}

/* Scrollbar */

.z-9 {
  z-index: 9;
}
.main-marina-container {
  overflow: hidden;
}
.marina-body {
  /* display: flex;
    justify-content: center;
    align-items: center; */
  /* height: 100vh; */
  margin: auto;
  /* padding: 0 12px; */
  margin-left: 30px;
  position: relative;
  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.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;
  top: 0;
  left: 368px;
}

.common-position-boat-vertical {
  background-image: url(/assets/frontend/images/Boat-Vertical.svg);
}

.common-position-boat-horizontal {
  background-image: url(/assets/frontend/images/Boat.svg);
}

.this-boat {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  background-position: center;
  cursor: grab;
}

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

.jetty-box-horizontal-one {
  width: 351px;
  height: 14px;
  top: 270px;
  left: -30px;
  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: 44px;
  height: 234px;
  width: 14px;
  top: 152px;
}

.jetty-box-vertical-two {
  left: 220px;
  height: 234px;
  width: 14px;
  top: 152px;
}

.jetty-box-vertical-three {
  left: 307px;
  height: 121px;
  width: 14px;
  background: #d4eef0;
  top: 270px;
}

.jetty-box-vertical-four {
  height: 498px;
  top: 203px;
  left: 497px;
}

.jetty-box-horizontal-two {
  width: 178px;
  top: 377px;
  left: 320px;
}

.jetty-box-horizontal-three {
  width: 193px;
  top: 189px;
  left: 408px;
}

.jetty-box-horizontal-four {
  width: 90px;
  top: 480px;
  left: 407px;
}

.jetty-box-horizontal-five {
  width: 90px;
  top: 553px;
  left: 407px;
}

.jetty-box-horizontal-six {
  width: 84px;
  top: 494px;
  left: 511px;
}

.jetty-box-horizontal-six {
  width: 84px;
  top: 473px;
  left: 511px;
}

.jetty-box-vertical-five {
  left: 795px;
  top: 193px;
  height: 403px;
}

.jetty-box-horizontal-seven {
  width: 452px;
  top: 660px;
  left: 368px;
  transform: rotate(160deg);
}

.jetty-box-horizontal-eight {
  left: 693px;
  top: 179px;
  width: 116px;
}

.jetty-box-horizontal-nine {
  top: 265px;
  left: 705px;
  width: 90px;
}

.jetty-box-horizontal-ten {
  top: 320px;
  left: 612px;
  width: 90px;
}

.jetty-box-horizontal-ten {
  top: 339px;
  left: 705px;
  width: 90px;
}

.jetty-box-horizontal-eleven {
  top: 413px;
  left: 705px;
  width: 90px;
}

.jetty-box-horizontal-twelve {
  top: 487px;
  left: 705px;
  width: 90px;
}

.jetty-box-horizontal-thirteen {
  width: 90px;
  top: 627px;
  left: 407px;
}

.berth-A01 {
  left: 433px;
  top: 206px;
}

.berth-A02 {
  left: 434px;
  top: 303px;
}

.berth-A03 {
  left: 465px;
  top: 206px;
}

.berth-A04 {
  left: 466px;
  top: 303px;
}

.berth-A05 {
  left: 497px;
  top: 206px;
}

.berth-A06 {
  left: 498px;
  top: 303px;
}

.berth-A07 {
  left: 529px;
  top: 206px;
}

.berth-A08 {
  left: 530px;
  top: 303px;
}

.berth-A09 {
  left: 561px;
  top: 206px;
}

.berth-A10 {
  left: 562px;
  top: 303px;
}

.berth-A11 {
  left: 592px;
  top: 206px;
}

.berth-A12 {
  left: 594px;
  top: 303px;
}

.berth-A13 {
  left: 639px;
  top: 196px;
}

.berth-A14 {
  left: 611px;
  top: 302px;
}

.berth-A15 {
  left: 687px;
  top: 228px;
}

.berth-A16 {
  left: 649px;
  top: 302px;
}

.berth-B01 {
  left: 815px;
  top: 148px;
}

.berth-B02 {
  left: 909px;
  top: 145px;
}

.berth-B03 {
  left: 814px;
  top: 198px;
}

.berth-B04 {
  left: 912px;
  top: 197px;
}

.berth-B05 {
  left: 814px;
  top: 244px;
}

.berth-B06 {
  left: 912px;
  top: 231px;
}

.berth-B07 {
  left: 815px;
  top: 290px;
}

.berth-B08 {
  left: 912px;
  top: 263px;
}

.berth-B09 {
  left: 815px;
  top: 337px;
}

.berth-B10 {
  left: 912px;
  top: 296px;
}

.berth-B11 {
  left: 828px;
  top: 343px;
}

.berth-B12 {
  left: 912px;
  top: 329px;
}

.berth-B13 {
  left: 813px;
  top: 394px;
}

.berth-B14 {
  left: 912px;
  top: 362px;
}

.berth-B15 {
  left: 813px;
  top: 427px;
}

.berth-B16 {
  left: 912px;
  top: 395px;
}

.berth-B17 {
  left: 814px;
  top: 460px;
}

.berth-B18 {
  left: 912px;
  top: 428px;
}

.berth-B19 {
  left: 815px;
  top: 492px;
}

.berth-B20 {
  left: 912px;
  top: 460px;
}

.berth-B21 {
  left: 815px;
  top: 524px;
}

.berth-B22 {
  left: 912px;
  top: 493px;
}

.berth-B23 {
  left: 815px;
  top: 558px;
}

.berth-B24 {
  left: 912px;
  top: 526px;
}

.berth-B25 {
  left: 815px;
  top: 588px;
}

.berth-B26 {
  left: 912px;
  top: 560px;
}

.berth-B27 {
  left: 815px;
  top: 622px;
}

.berth-B28 {
  left: 894px;
  top: 612px;
}

.berth-C01 {
  left: 1086px;
  top: 124px;
}

.berth-C02 {
  left: 1092px;
  top: 187px;
}

.berth-C03 {
  left: 1092px;
  top: 550px;
}
.single-small-boat {
  left: 2px;
  position: absolute;
  bottom: 34px;
}
.berth-C04 {
  left: 1092px;
  top: 221px;
}

.berth-C05 {
  left: 1092px;
  top: 264px;
}

.berth-C06 {
  left: 1092px;
  top: 297px;
}

.berth-C07 {
  left: 1092px;
  top: 335px;
}

.berth-C08 {
  left: 1092px;
  top: 368px;
}

.berth-C09 {
  left: 1092px;
  top: 409px;
}

.berth-C10 {
  left: 1092px;
  top: 442px;
}

.berth-C11 {
  left: 1092px;
  top: 484px;
}

.berth-C12 {
  left: 1092px;
  top: 517px;
}

.boat-group-one {
  top: 167px;
  left: 428px;
}

.boat-group-two {
  top: 285px;
  left: 428px;
}

.boat-group-three {
  top: 159px;
  left: 638px;
  width: 76px;
}

.boat-group-four {
  top: 284px;
  left: 605px;
  width: 66px;
}

.boat-group-five {
  left: 762px;
  top: 154px;
}

.boat-group-six {
  left: 877px;
  top: 154px;
}

.boat-group-seven {
  left: 762px;
  top: 205px;
  height: 168px;
  gap: 4px;
}

.boat-group-eight {
  left: 760px;
  top: 400px;
  gap: 4px;
}

.boat-group-nine {
  left: 762px;
  top: 465px;
  gap: 4px;
}

.boat-group-ten {
  left: 762px;
  top: 531px;
  gap: 4px;
}

.boat-group-eleven {
  left: 762px;
  top: 595px;
  gap: 4px;
}

.boat-group-twelve {
  left: 880px;
  top: 207px;
  gap: 4px;
}

.boat-group-thirteen {
  left: 880px;
  top: 470px;
  gap: 4px;
}

.boat-group-fourteen {
  left: 1060px;
  top: 197px;
  gap: 4px;
}

.boat-group-fifteen {
  left: 1060px;
  top: 273px;
  gap: 4px;
}

.boat-group-sixteen {
  left: 1060px;
  top: 345px;
  gap: 4px;
}

.boat-group-seventeen {
  left: 1060px;
  top: 419px;
  gap: 4px;
}

.boat-group-eighteen {
  left: 1060px;
  top: 494px;
  gap: 4px;
}

.boat-group-nineteen {
  left: 1060px;
  top: 134px;
}

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

.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);
}

.absolute {
  position: absolute;
}

.bg-D4EEF0 {
  background: #d4eef0;
}

.h-3 {
  height: 2px;
}

.h-14 {
  height: 14px;
}

.h-30 {
  height: 30px;
}

.h-64 {
  height: 64px;
}

.h-104 {
  height: 103px;
}

.h-136 {
  height: 136px;
}

.h-168 {
  height: 168px;
}

.w-14 {
  width: 14px;
}

.w-103 {
  width: 103px;
}

.w-188 {
  width: 188px;
}

.gap-03 {
  gap: 3px;
}

.f-12 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  position: absolute;
}

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

.marina-vesel-info-popup .modal-header .btn-close {
  margin-top: -94px;
  margin-right: -28px;
  background-size: 10px 10px;
}

.btn-primary {
  background-color: #37c0c9;
  color: #fff;
  padding: 12px 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  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.1em;
  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_down_arrow.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,
.dockoutdatelong .floating_input:not([value=""]):valid ~ .floating_label,
.dockoutdate .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: 65px;
  z-index: 1;
  width: auto;
  text-align: right;
  margin-left: auto;
  display: flex;
  gap: 16px;
  white-space: nowrap;
}

.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-top p {
  margin-bottom: 0;
}
.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;
}

.marina-allocation-signs-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marina-allocation-signs-inner > * {
  flex-shrink: 0;
}
.marina-allocation-signs-inner button {
  width: auto;
}
@media (max-width: 1366px) {
  .marina-body {
    margin: auto;
    margin-left: 0;
  }
}

@media only screen and (max-width: 1260px) {
  .marina-allocation-signs-inner {
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .marina-body {
    overflow: auto;
    background: #37c0c9;
  }
}
@media only screen and (max-width: 860px) {
  .marina-allocation-signs {
    left: 100%;
    top: 0;
    white-space: nowrap;
    right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .marina-allocation-signs-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media only screen and (max-width: 575px) {
  .front-side-map-view .offcanvas-body {
    padding: 16px;
  }
  .date-picker-with-icon {
    padding-left: 8px !important;
  }
  .floating_input {
    padding: 8px;
  }
}
.text-truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 40px;
}
@media (min-width: 576px) {
  .marina-vesel-info-popup {
    max-width: 525px;
  }
}

.swingmooring-boat {
  width: 70px;
  height: 164px;
  z-index: 9;
  background-image: url(/assets/frontend/images/Boat-Mooring.svg);
  background-repeat: no-repeat;
}