/*$gradients: (
        "100": radial-gradient(50% 50% at 50% 50%, map-get($colors, "yellow-100") 0%, map-get($colors, "yellow-500") 100%),
        "110": radial-gradient(50% 50% at 50% 50%, map-get($colors, "white") 0%, map-get($colors, "yellow-100") 40%, map-get($colors, "yellow-500") 100%),
        "120": radial-gradient(50% 50% at 50% 50%, #f5e46b 0%, map-get($colors, "yellow-100") 70%, map-get($colors, "yellow-500") 100%),
        "200": linear-gradient(180deg, map-get($colors, "brand-600") 0%, map-get($colors, "brand-500") 100%),
        "300": linear-gradient(180deg, map-get($colors, "brand-800") 0%, map-get($colors, "brand-500") 100%),
        "400": linear-gradient(90deg, map-get($colors, "brand-500") 0%, map-get($colors, "brand-700") 100%),
        "410": linear-gradient(180deg, map-get($colors, "brand-400") 0%, map-get($colors, "brand-600") 100%),
        "420": linear-gradient(180deg, map-get($colors, "brand-500") 0%, map-get($colors, "brand-700") 100%),
        "500": linear-gradient(180deg, map-get($colors, "brand-400") 0%, map-get($colors, "brand-600") 100%),
        "600": linear-gradient(180deg, rgba(40, 111, 178, 0) 0%, rgba(40, 111, 178, 0) 4%, #286fb2 26%, #00427f 100%),
        "700": linear-gradient(180deg, map-get($colors, "blue-700") 0%, map-get($colors, "blue-500") 100%),
        "800": linear-gradient(180deg, map-get($colors, "neutral-50") 0%, map-get($colors, "neutral-500") 100%),
        "810": linear-gradient(180deg, #ffffff 0%, map-get($colors, "neutral-50") 40%, map-get($colors, "neutral-500") 100%),
        "820": linear-gradient(180deg, map-get($colors, "neutral-150") 0%, map-get($colors, "neutral-500") 70%, map-get($colors, "neutral-500") 100%),
        "900": linear-gradient(180deg, map-get($colors, "blue-400") 0%, map-get($colors, "blue-600") 100%),
        "1000": linear-gradient(180deg, map-get($colors, "blue-300") 0%, map-get($colors, "blue-700") 100%),
        "1010": linear-gradient(180deg, map-get($colors, "white") 0%, map-get($colors, "blue-400") 50%, map-get($colors, "blue-700") 100%),
        "1020": linear-gradient(0deg, map-get($colors, "brand-500") 0%, map-get($colors, "brand-400") 50%, map-get($colors, "brand-200") 100%),
        "1100": linear-gradient(0deg, map-get($colors, "brand-600") 0%, map-get($colors, "brand-500") 68.5%, map-get($colors, "brand-400") 100%),
        "1110": linear-gradient(0deg, map-get($colors, "brand-500") 0%, map-get($colors, "brand-400") 68.5%, map-get($colors, "brand-400") 100%),
        "1120": linear-gradient(0deg, map-get($colors, "brand-500") 0%, map-get($colors, "brand-400") 50%, map-get($colors, "brand-200") 100%),
        "1130": linear-gradient(0deg, map-get($colors, "brand-600") 0%, map-get($colors, "brand-500") 68.5%, map-get($colors, "brand-400") 100%),
        "1200": linear-gradient(180deg, map-get($colors, "yellow-100") 0%, map-get($colors, "yellow-500") 100%),
        "1210": linear-gradient(180deg, map-get($colors, "white") 0%, #f5e46b 40%, map-get($colors, "yellow-500") 100%),
        "1220": linear-gradient(180deg, #f5e46b 0%, map-get($colors, "yellow-500") 70%, map-get($colors, "yellow-500") 100%),
        "1300": linear-gradient(180deg, map-get($colors, "white") 0%, map-get($colors, "yellow-500") 40%, #6f5100 100%),
        "1400": linear-gradient(180deg, map-get($colors, "green-100") 0%, map-get($colors, "green-600") 100%),
        "1410": linear-gradient(180deg, map-get($colors, "green-300") 0%, map-get($colors, "green-500") 100%),
        "1420": linear-gradient(180deg, map-get($colors, "yellow-100") 0%, map-get($colors, "green-500") 100%),
        "1500": linear-gradient(180deg, map-get($colors, "blue-700") 0%, map-get($colors, "brand-500") 100%),
        "1510": linear-gradient(90deg, rgba(map-get($colors, "brand-400"), 0) 0%, map-get($colors, "brand-400") 100%),
        "1520": linear-gradient(90deg, map-get($colors, "brand-400") 0%, rgba(map-get($colors, "brand-400"), 0) 100%),
        "1600": linear-gradient(180deg, map-get($colors, "blue-50") 0%, map-get($colors, "blue-300") 100%),
        "1610": linear-gradient(180deg, map-get($colors, "brand-800") 4%, map-get($colors, "blue-400") 100%),
        "1615": linear-gradient(180deg, map-get($colors, "brand-800") 4%, map-get($colors, "blue-700") 100%),
        "1620": linear-gradient(180deg, map-get($colors, "light-blue-1000") 0%, map-get($colors, "brand-500") 100%),
        "1630": linear-gradient(180deg, map-get($colors, "white") 0%, map-get($colors, "light-blue-500") 100%),
        "1640": linear-gradient(180deg, rgba(map-get($colors, "brand-500"), 0) 0%, rgba(map-get($colors, "brand-500"), 0.5) 10%, rgba(map-get($colors, "brand-500"), 0.75) 20%, map-get($colors, "brand-500") 30%, map-get($colors, "brand-500") 100%),
        "1650": linear-gradient(90deg, map-get($colors, "violet-800") 0%, rgba(map-get($colors, "violet-800"), 0) 100%)
);

$text-styles: (
        "primary": map-get($colors, "white"),
        "secondary": map-get($colors, "blue-100"),
        "contrast-primary": map-get($colors, "brand-600"),
        "contrast-secondary": map-get($colors, "brand-400"),
        "contrast-tertiary": map-get($colors, "brand-150"),
        "footer": map-get($colors, "brand-200"),
        "accent": map-get($colors, "green-500")
);

$button-styles: (
        "primary": map-get($gradients, "1200"),
        "primary-hover": map-get($gradients, "1210"),
        "primary-active": map-get($gradients, "1220"),
        "secondary": map-get($gradients, "800"),
        "secondary-hover": map-get($gradients, "810"),
        "secondary-active": map-get($gradients, "820"),
        "tertiary": map-get($gradients, "1110"),
        "tertiary-hover": map-get($gradients, "1120"),
        "tertiary-active": map-get($gradients, "1130"),
        "disable": map-get($colors, "blue-950"),
        "bright": map-get($colors, "blue-100"),
        "middle": map-get($colors, "brand-500"),
        "dark": map-get($colors, "red-750")
);

$link-styles: (
        "primary": map-get($colors, "white"),
        "primary-hover": map-get($colors, "neutral-400"),
        "primary-active": map-get($colors, "blue-150"),
        "secondary": map-get($colors, "blue-500"),
        "secondary-hover": map-get($colors, "white"),
        "secondary-active": map-get($colors, "yellow-100"),
        "invert": map-get($colors, "brand-500"),
        "invert-hover": map-get($colors, "brand-400"),
        "invert-active": map-get($colors, "yellow-700"),
        "accent": map-get($colors, "neutral-400"),
        "accent-hover": map-get($colors, "yellow-400"),
        "accent-active": map-get($colors, "yellow-400"),
        "alert": map-get($colors, "red-500"),
        "alert-hover": map-get($colors, "red-400"),
        "alert-active": map-get($colors, "red-500")
);

$bg-styles: (
        "primary": map-get($colors, "brand-700"),
        "secondary": map-get($colors, "brand-600"),
        "tertiary": map-get($colors, "brand-800"),
        "fourth": map-get($colors, "brand-500")
);

$bg-contrast-styles: (
        "primary": map-get($colors, "blue-50"),
        "secondary": map-get($colors, "neutral-200"),
        "tertiary": map-get($colors, "brand-150")
);

$bg-popup-style: rgba(map-get($colors, "brand-800"), 0.8);

$input-fill-styles: (
        "default": map-get($gradients, "200"),
        "selected": map-get($gradients, "300")
);

$icon-styles: (
        "icon-100": map-get($colors, "blue-100"),
        "icon-300": map-get($colors, "neutral-200"),
        "icon-400": map-get($colors, "neutral-400"),
        "icon-800": map-get($colors, "brand-150"),
        "icon-1000": map-get($colors, "blue-500")
);

$functional-styles: (
        "done": map-get($colors, "green-500"),
        "warning": map-get($colors, "yellow-300"),
        "error": map-get($colors, "red-500"),
        "alert": map-get($colors, "red-400"),
        "info": map-get($colors, "violet-300"),
        "info-plus": map-get($colors, "blue-500")
);

$text-filters: (
        "primary": "brightness(0) invert(69%) sepia(10%) saturate(1163%) hue-rotate(174deg) brightness(95%) contrast(96%)",
        "secondary": "brightness(0) saturate(100%) invert(88%) sepia(11%) saturate(1028%) hue-rotate(189deg) brightness(103%) contrast(107%)",
        "accent": "brightness(0) invert(82%) sepia(39%) saturate(301%) hue-rotate(189deg) brightness(104%) contrast(105%)"
);

$link-accent-hover-filter: "brightness(0) invert(91%) sepia(93%) saturate(6812%) hue-rotate(325deg) brightness(101%) contrast(101%)";*/
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: #032858;
  background-image: url("../../images/bg-pattern.png");
  background-size: 20px auto;
  background-repeat: repeat;
  font-family: "NotoSans-Regular", sans-serif;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

#main_content {
  padding-top: 50px;
  padding-bottom: 50px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inkston", sans-serif;
  color: #fff;
}

p {
  color: #fff;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 24px;
}

@media screen and (min-width: 1280px) {
  #page-content > .container {
    margin-inline-start: 232px;
  }
}

#page-content > .container {
  padding-left: 30px;
  padding-right: 30px;
}

#homepage {
  /* Form styles */
}
#homepage .container {
  margin-top: -7px;
}
@media screen and (min-width: 1280px) {
  #homepage .container {
    margin-inline-start: 232px;
  }
}
#homepage .homepage-content {
  max-width: 95%;
  margin: auto;
  padding-top: 30px;
}
#homepage #add-slot-form {
  background-color: #f7f7f9;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#homepage #add-slot-form input[type=text],
#homepage #add-slot-form input[type=file],
#homepage #add-slot-form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}
#homepage #add-slot-form button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#homepage #add-slot-form button:hover {
  background-color: #0056b3;
}
#homepage #add-slot-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 5'%3E%3Cpath fill='%23999' d='M2 0L0 2h4zm0 5l2-2H0z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-color: #fff;
}

@font-face {
  font-family: "Inkston";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/FontsFree-Net-Inkston3.woff2") format("woff2"), url("../../fonts/FontsFree-Net-Inkston3.ttf") format("truetype");
}
@font-face {
  font-family: "NotoSans-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/NotoSans-Regular.woff2") format("woff2"), url("../../fonts/NotoSans-Regular.ttf") format("truetype");
}
.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  /*background-color: map-get($colors, "red-750");*/
  font-family: "Inkston", sans-serif;
  color: #c2231a;
}
.button-secondary {
  background-image: url("../../images/secondary-button-bg.svg");
}
.button-primary {
  background-image: url("../../images/primary-button-bg.svg");
}

#slots-container .slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#slots-container .slot-types-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #slots-container .slot-types-container {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media screen and (min-width: 1280px) {
  #slots-container .slot-types-container {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media screen and (min-width: 1920px) {
  #slots-container .slot-types-container {
    grid-template-columns: repeat(8, 1fr);
  }
}
#slots-container .slot-thumbnail {
  position: relative;
}
#slots-container .slot-thumbnail img {
  aspect-ratio: 2/3;
  object-fit: cover;
  height: 100%;
  border-radius: 20px;
  position: relative;
}
#slots-container .slot-thumbnail-frame {
  border: 2px solid #5ee2f1;
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% + 5px);
  top: 0;
  border-radius: 24px 24px 18px 18px;
}
#slots-container .slot-thumbnail:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  inset-block-end: 8px;
  border: 2px solid #4f698a;
  border-radius: 24px;
  height: 100%;
}
#slots-container .slot-thumbnail:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: calc(100% + 2px);
  width: calc(100% - 4px);
  background-color: #4ca8ff;
  border-radius: 24px 24px 20px 20px;
  border: 2px solid #4ca8ff;
  z-index: -1;
}
#slots-container .slot-remove {
  margin-top: 30px;
}

.header {
  background-image: url("../../images/header-desk.svg");
  position: fixed;
  width: 100%;
  z-index: 999;
}
.header-container {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.header-nav {
  display: flex;
}
.header-nav-mob {
  display: block;
  background-image: url("../../images/header-mob.png");
  width: 45px;
  border: none;
  background-color: transparent;
}
@media screen and (min-width: 1280px) {
  .header-nav-mob {
    display: none;
  }
}
.header-nav-mob.active {
  background-image: url("../../images/header-mob-close.png");
}
.header-nav .main-logo img {
  max-width: 97px;
  height: auto;
}
.header-actions {
  display: flex;
}
.header-actions-buttons {
  display: flex;
}

#sidebar {
  background: linear-gradient(90deg, #054392 0%, #032858 100%);
  position: fixed;
  top: 40px;
  flex-direction: column;
  width: 232px;
  display: block;
  z-index: 4;
  transition: all 0.3s ease-in-out;
  height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(-100%);
}
#sidebar.active {
  transform: translateX(0);
}
@media screen and (min-width: 1280px) {
  #sidebar {
    display: flex;
    transform: translateX(0);
  }
}
#sidebar .custom-menu {
  display: grid;
  padding: 0 12px 12px 0;
}
@media screen and (min-width: 1280px) {
  #sidebar .custom-menu {
    padding: 0 12px 12px;
  }
}
#sidebar .custom-menu li {
  font-family: "Inkston", sans-serif;
  display: flex;
  align-items: center;
  column-gap: 12px;
  justify-content: start;
  min-height: 44px;
  padding-inline: 20px;
  padding-block: 2px;
}
#sidebar .custom-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}
#sidebar .custom-menu li a img {
  display: block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#sidebar .custom-menu .menu-divider {
  position: relative;
}
#sidebar .custom-menu .menu-divider:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(43, 98, 167, 0), #2b62a7), linear-gradient(90deg, #2b62a7, rgba(43, 98, 167, 0)), url("../../images/ice-menu-element.svg");
  background-size: calc(50% - 12px) 1px, calc(50% - 12px) 1px, 11.7px 8px;
  background-position: left, right, center 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
  width: 100%;
}

.hero-banner picture {
  position: relative;
}
.hero-banner .swiper-button-prev, .hero-banner .swiper-button-next {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.hero-banner:hover .swiper-button-prev, .hero-banner:hover .swiper-button-next {
  opacity: 1;
}
.hero-banner-slide-content {
  position: absolute;
  display: flex;
  height: 100%;
  padding: 0;
  align-items: flex-end;
  bottom: 25px;
  top: auto;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}
@media screen and (min-width: 1280px) {
  .hero-banner-slide-content {
    margin-left: 140px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-banner-slide-content {
    margin-left: 50px;
  }
}
@media screen and (min-width: 768px) {
  .hero-banner-slide-content {
    align-items: center;
    max-width: 540px;
    top: 0;
    bottom: auto;
  }
}
.hero-banner-slide-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 20px;
}
.hero-banner-slide-content-title {
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 2px 0 #00315f;
}
.hero-banner-slide-content-details {
  font-size: 36px;
  line-height: 1.23;
  font-family: "Inkston", sans-serif;
  color: #fff;
  text-shadow: 0 4px 0 #00315f;
  margin-top: 10px;
}
.hero-banner-slide-content-button {
  margin-top: 20px;
}
.hero-banner-slide-content-button button {
  background-image: url("../../images/main-banner-button.svg");
  min-width: 230px;
  min-height: 80px;
  position: relative;
  border: none;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  background-position: center;
  padding-bottom: 8px;
  background-color: transparent;
}
@media screen and (max-width: 767px) {
  .hero-banner .swiper-wrapper {
    height: 400px;
  }
  .hero-banner .swiper-wrapper picture img {
    height: 400px;
    object-fit: cover;
  }
  .hero-banner .swiper-wrapper .hero-banner-slide-content-button {
    transform: scale(0.75);
    margin-top: 0;
  }
  .hero-banner .swiper-wrapper .hero-banner-slide-content {
    bottom: 5px;
  }
}