@import "./mixins";

@import "primevue/resources/themes/lara-light-indigo/theme.css";
// @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
//@layer vendor, custom;

:root {
  --main-color: #ED4B00;
  --reservation-color: #f2b720;
  --available-color: #4caf50;
}

.main-bg {
  background-color: var(--main-color);
}

@include font-face("Lato", "Lato-Black", 900, "normal");
@include font-face("Lato", "Lato-ExtraBold", 800, "normal");
@include font-face("Lato", "Lato-Bold", 700, "normal");
@include font-face("Lato", "Lato-SemiBold", 600, "normal");
@include font-face("Lato", "Lato-Medium", 500, "normal");
@include font-face("Lato", "Lato-Regular", 400, "normal");
@include font-face("Lato", "Lato-Light", 300, "normal");
@include font-face("Lato", "Lato-ExtraLight", 200, "normal");
@include font-face("Lato", "Lato-Thin", 100, "normal");

html , body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow-x: hidden;
}

.modelWindow {
  z-index: 1000 !important;
}


img, video {
  display: unset;
  vertical-align: unset;
}

.p-menuitem-link {
  border: none !important;
}
.p-link:focus {
  box-shadow: unset !important;
}

.p-autocomplete input {
  width: 100% !important;
}

.p-autocomplete input:focus, .p-autocomplete input:hover {
  box-shadow: unset !important;
  border-color: rgb(76 175 80 / 1) !important;;
}

.p-dropdown:not(.p-disabled):hover {
  border-color:  rgb(76 175 80 / 1);
}

.p-dropdown:not(.p-disabled):focus {
  border-color:  rgb(76 175 80 / 1) !important;
}
.p-dropdown{
  padding: 2px;
}

.p-dropdown:not(.p-disabled).p-focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem #C7D2FE;
    border-color:  rgb(76 175 80 / 1) !important;
}

.loader-div{
  position: fixed;
  width: 105vw  ;
  height: 100vh;
  z-index: 2000000;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  svg{
    fill: #07a860 !important;
  }
}
  @media screen and (max-width :768px) {

    .loader-div{
      position: fixed;
      width: 100vw  ;
      height: 100vh;
      z-index: 2000000;
      background-color: rgb(255, 255, 255);
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      transform: translateX(150px);
    }
  }

.custom-header {
  display: flex !important;

  .p-checkbox-box, input {
    box-shadow: unset !important;
  }

  input {
    padding: 5px !important;
  }
}

.loadingScreen {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  &__content {
    width: 100%;
    height: auto;
    border-radius: 3px;
    border: 1px solid #dedede;
    background: var(--linear,
        linear-gradient(180deg, #fefefe 0%, #f6f6f6 100%));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    margin-bottom: 30px;
  }

  &__title {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 14px;
  }

  &__text {
    font-size: 12px;
    text-align: center;
    @apply text-grey-900;
  }
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  color: #FFFFFF!important;
  background: var(--main-color)!important;
}

.p-dropdown-panel {
  max-width: 435px;
}
.p-dropdown-panel .p-dropdown-items {
  padding: 0!important;
}

.p-dropdown-items-wrapper {
  overflow: hidden;
}

.primary-btn {
  background-color: var(--main-color);
  width: 207px;
  height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid #DDDDDD;
}

/* Уменьшаем ширину скроллбара */
::-webkit-scrollbar {
  width: 4px; /* Тонкий скроллбар */
  height: 4px;
}

/* Делаем трек (фон под скроллом) */
::-webkit-scrollbar-track {
  background: #f0f0f0; /* Цвет фона скроллбара */
  // border-radius: 10px;
}

/* Сама "ручка" (ползунок) */
::-webkit-scrollbar-thumb {
  background: var(--main-color); /* Цвет ползунка */
  // border-radius: 10px; /* Закругляем края */
}

/* При наведении делаем ползунок темнее */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}
// html {
//   overflow-y: scroll; /* Всегда оставляет место для скролла */
// }