@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@import url('https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css');

@import url('https://unpkg.com/tippy.js@6.3.1/animations/shift-away.css');
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  --kendo-color-primary: #4caf50;           /* Основной зелёный (Material Design Green 500) */
  --kendo-color-primary-hover: #43a047;     /* Чуть темнее при наведении */
  --kendo-color-primary-active: #388e3c;    /* Ещё темнее при клике */
  --kendo-color-primary-emphasis: #e1ffc9;  /* Светло-зелёный фон (10% прозрачности ~) */
  --kendo-color-primary-on-subtle: #1b361f; /* Тёмный текст на светло-зелёном фоне */
  --kendo-color-on-primary: #ffffff;        /* Белый текст на зелёном */
  --kendo-color-primary-on-surface: #20895F; /* Зелёный цвет для иконок/ссылок на поверхности */
  --red: #e53935;
  --red-bg: #fce7e7;
  --yellow: #ffa000;
  --yellow-bg: #fff7c8;
  --green: #00a539;
  --green-bg: #ecf9f3;
}

label:has(+ div select[data-required])::after,
label:has(+ div input[data-required])::after,
label:has(+ span select[data-required])::after,
label:has(+ span input[data-required])::after {
  content: " *";
  color: red;
}

.k-focus {
  outline: none !important;
  box-shadow: none !important;
}

.hidden {
  display: none;
}

.k-spinner-increase,
.k-spinner-decrease {
  width: 1rem !important;
  height: 1rem !important;
}

.k-input-spinner {
  width: 1rem !important;
}

.accomodation-inputs-container {
  display: flex !important;
  justify-content: space-between;
  flex-direction: row !important;
  padding: 0.5rem;
  width: 100%;
}

.k-form-fieldset {
  margin-bottom: 10px;
}

.k-panelbar-item a.k-link {
  background-color: var(--kendo-color-primary-emphasis) !important;
  color: var(--kendo-color-primary-on-surface) !important;
}

.k-link.k-selected {
  background-color: var(--kendo-color-surface-alt) !important;
  color: var(--kendo-color-primary) !important;
}

.k-window-title {
  color: var(--kendo-color-primary-on-surface);
}

.contentBlock {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

.k-grid-pager {
  position: sticky !important;
  bottom: 0;
  width: 100%;
}

#body-parent {
  @apply h-full;
}

#grid {
  flex: 1;
}

html {
  font-size: 14px;
}

body, html {
  height: 100%;
}

body {
  background-color: var(--kendo-color-base-subtle);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.k-card.sidebar-container {
  width: 170px;
  height: calc(100% - 100px);
  padding-top: 10px;
  padding-left: 10px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 2vh;
  border-radius: 0;
  overflow: visible;
}

.k-card.topbar-container {
  width: 100%;
  height: 100px;
  padding: 10px 30px;
  float: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  border-radius: 0;
}

.k-window-content label.k-label {
  /*color: #FF6600;
  color: #3B82F6;
  color: #007acc;*/
  color: #303030;
  font-weight: 600;
}

.k-avatar-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.k-avatar-icon, .k-avatar-icon svg {
  width: 32px;
  height: 32px;
}

.page-container {
  color: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  height: calc(100vh - 200px);
  width: 100%;
}

.k-grid-content.k-auto-scrollable {
  height: 100% !important;
}

.k-grid-toolbar {
  border-color: inherit;
  box-shadow: none;
  position: sticky !important;
  top: 0;
  z-index: 99;
  background-color: var(--kendo-color-surface-alt);
}

.data-wrapper {
  color: inherit;
  background-color: inherit;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
}

.form-container {
  padding: 20px;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 5%;
  background-color: #1e1e2f;
  color: #ffffff;
  border: 1px solid white;
}

.form-container form {
  height: 100%;
  width: 100%;
  display: flex; 
  flex-direction: column;
  justify-content: space-evenly; 
  align-items: center;
  color: #ffffff;
}

.form-container .k-input-inner, .form-container .k-input-inner::placeholder {
  color: #ffffff;
}

.form-container .k-input {
  border-bottom-color: #ffffff;

}

form .form-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

form button {
  color: #ffffff;
  background-color: #3a3a3a;
  border: 1px solid white;
  border-radius: 10px;
  width: 150px;
  height: 35px;
}

.user-actions-container {
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  flex-direction: column; 
  gap: 15px; 
  padding: 5px; 
  width: 100px; 
  height: 85px
}

.user-actions-container a {
  width: 90px;
  margin: auto;
}

.k-menu.k-menu-vertical {
  background-color: transparent;
}

.k-menu .k-item {
  background-color: transparent;
  color: var(--kendo-color-on-app-surface);
}

.k-menu .k-item a {
  text-decoration: none;
  display: block;
  padding: 10px 15px;
}

.k-menu .k-item:hover {
  background-color: #33334d;
}

.k-menu .k-item.k-state-selected {
  background-color: #44445c;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}