html,
body {
   height: 100%;
   font-family: sans-serif;
   margin: 0;
}

@font-face {
   font-family: "handelsonsix";
   src: url("/fonts/handelsonsix_cyr_six.otf") format("opentype");
}

body {
   font-family: "MyFont", sans-serif;
}

/* Прокрутка */

.scroll::-webkit-scrollbar {
   width: 3px;
}

.scroll::-webkit-scrollbar-track {
   width: 3px;
   background-color: #4f494b;
}

.scroll::-webkit-scrollbar-thumb {
   width: 5px;
   background-color: #fec000;
}

.scroll-block::-webkit-scrollbar {
   width: 5px;
}

.scroll-block::-webkit-scrollbar-track {
   width: 3px;
   background-color: #0f0;
}

.scroll-block::-webkit-scrollbar-thumb {
   width: 5px;
   background-color: #fec000;
}

.main {
   display: flex;
   flex-direction: column;
   gap: 0px;
   height: 100%;
   width: 1300px;
}

.page-header {
   display: flex;
   flex-direction: column;
   gap: 0px;
   justify-content: flex-start;
   text-align: center;
   position: sticky;
   top: 0px;

   /* box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5); */

   .menu_link {
      display: flex;
      align-items: center;
      height: 24px;
      padding: 0px 10px;
      border-bottom: 2px solid #77a;
      border-radius: 5px;
      font-size: 10pt;
      text-decoration: none;
      user-select: none;
      cursor: pointer;
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
      transition: background-color 0.2s ease-out 0.2s, box-shadow 0.2s ease-out 0.2s;
      background-color: #ccf;
      white-space: nowrap;

      .active {
         background-color: #ccf;
      }

      .passive {
         background-color: #fff;
      }

   }

   a:hover.menu_link {
      color: #007;
      background-color: #7d7;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
   }

}

.page-content {
   display: flex;
   justify-content: center;
   flex: 1;
   gap: 10px;
   height: 100vh;
   border: 0px solid #000;
   background: url('images/runway.svg'), linear-gradient(to bottom, #696969, #aeaeae);
}

.menu_button {
   display: flex;
   align-items: center;
   height: 24px;
   background: #ccf;
   padding: 0px 10px;
   border-bottom: 2px solid #77a;
   border-radius: 5px;
   font-size: 10pt;
   cursor: pointer;
}

.input-search {
   border: none;
   /* убираем стандартную рамку */
   border-bottom: 1px solid #aaa;
   /* только нижняя граница */
   background: transparent;
   /* прозрачный фон */
   padding: 4px 6px;
   /* отступы внутри */
   outline: none;
   /* убрать подсветку при фокусе */
   color: #fff;
   /* цвет текста */
   font-size: 14px;
   /* размер шрифта */
}

/* при фокусе можно сделать полоску темнее */
.input-search:focus {
   border-bottom-color: #ff7;
   background: transparent;
}

.input-search::placeholder {
   color: #eee;
   /* серый текст */
   opacity: 1;
   /* убираем прозрачность по умолчанию в некоторых браузерах */
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 18px 20px;
   background: #FEC000;
   color: #000;
   font-size: 16px;
   font-weight: 600;
   border: none;
   border-radius: 10px;
   cursor: pointer;

   box-shadow:
      2px 5px 11px rgba(0, 0, 0, 0.1),
      7px 18px 19px rgba(0, 0, 0, 0.09);

   transition: background .2s ease, transform .1s ease;
}

.btn-auth:hover {
   background: #ffce33;
   /* чуть светлее при наведении */
}

.btn-auth:active {
   transform: translateY(1px);
   /* эффект нажатия */
}

/*
.photo {
   z-index: 10;
   position: fixed;
   background: #fff;
}
*/

.photo-upload-form-wrapper input,
.photo-upload-form-wrapper textarea {
   background-color: transparent !important;
   border: none;
   border-bottom: 1px solid #aaa;
   color: #ddd;
   outline: none;
}

.photo-upload-form-wrapper input::placeholder,
.photo-upload-form-wrapper textarea::placeholder {
   color: #aaa;
}

.photo-upload-form-wrapper select {
   background-color: transparent !important;
   border: none;
   border-bottom: 1px solid #aaa;
   color: #ddd;
   outline: none;
   font: inherit;
}

/* стили для выпадающего списка */
.photo-upload-form-wrapper select option {
   background-color: #444;
   /* фон элементов */
   color: #eee;
   /* текст */
}

/* активный пункт */
.photo-upload-form-wrapper select option:checked {
   background-color: #666;
   color: #fff;
}


/* Полосатая таблица */

.table_stripe {
   font-size: 10pt;
   font-family: monospace;
   border-collapse: separate;
   /* Don't collapse */
   border-spacing: 0;

   th {
      position: relative;
      font-family: consolas;
      border-top: 1px solid #aaa;
      border-bottom: 1px solid #aaa;
      border-right: 1px solid #aaa;
      background: #ddd;
      padding: 5px 10px;
      font-family: consolas;
      text-transform: uppercase;
      font-weight: normal;

      quote {
         font-family: consolas;
         color: #007;
         cursor: pointer;
         border-bottom: 1px dashed #007;
      }

      nav {
         position: absolute;
         font-size: 15pt;
         font-weight: normal;
         top: 0;
         right: 0;
      }

   }

   thead {
      position: sticky;
      z-index: 3;
      top: 0px;
   }

   tr {
      border: 1px solid #aaa;
   }

   td {
      border-bottom: 1px solid #aaa;
      border-right: 1px solid #aaa;
      padding: 1px 5px;
   }

   td:first-child {
      border-left: 1px solid #ccc;
   }

   tbody {

      tr:nth-child(odd) {
         background: #fff
      }

      tr:nth-child(even) {
         background: #eee;
      }

   }

   .cell-right {
      text-align: right;
   }

   .cell-center {
      text-align: center;
   }

}

.table-line-selected {
   background: #ccf;
}

.window {
   .header {
      background: #ddf;
      margin-top: 10px;
      text-align: center;
      font-size: 18pt;
   }
}

.w-header {
   font-family: 'handelsonsix', sans-serif;
   margin: 20px;
   font-size: 48pt;
   color: #fec000;
}

.w-input-wrapper {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%;
}

.w-input-label {
   color: #fff;
   font-size: 10pt;
}

.w-input {
   height: 32px;
   border-radius: 5px;
   width: 100%;
   box-sizing: border-box;
}

.w-label {
   font-family: "handelsonsix", sans-serif;
   color: #fff;
}

.search_button {
   color: #000;
   background: #aaf;
   min-height: 32;
   padding-left: 10px;
   padding-right: 10px;
   margin-left: 10px;
   margin-right: 10px;
   border: 0px solid #aaa;
   border-radius: 5px;
   text-decoration: none;
   cursor: pointer;
   outline: none;

   .passive {
      color: var(--form-button-passive-color);
      background: var(--form-button-passive-background);
   }

}

.search-area-selector {
   color: #aaa;
   size: 8pt;
   font-family: 'handelsonsix', sans-serif;
}

.form_button {
   color: #000;
   background: #99f;
   min-height: 32px;
   padding-left: 10px;
   padding-right: 10px;
   margin-left: 10px;
   margin-right: 10px;
   min-width: 100px;
   border: 0px solid #aaa;
   border-radius: 5px;
   text-decoration: none;
   cursor: pointer;
   outline: none;

   .passive {
      color: #fff;
      background: #eee;
   }

}

.form_button hover {
   box-shadow: 1px 1px 5px 0px #FFFFFF inset, 1px 1px 5px 0px #0000AA inset, 1px 1px 5px 0px #555555;
}

.form_button_passive {
   color: #fff;
   background: #eee;
   height: 24;
   padding-left: 10px;
   padding-right: 10px;
   margin-left: 10px;
   margin-right: 10px;
   min-width: 100px;
   color: #aaa;
   border: 0px solid #aaa;
   border-radius: 5px;
   text-decoration: none;
   cursor: auto;
   outline: none;
}

/* Ввод данных */

input {
   background: #fff;
   border: 1px solid #ccc;
   padding: 3px;
   padding-left: 5px;
   padding-right: 5px;
   outline: none;
   cursor: default;
}

input:focus {
   background-color: #eee;
}

input:disabled {
   color: #aaa;
   background-color: #ddd;
   border: 1px solid #ccc;
   padding: 3px;
   padding-left: 5px;
   padding-right: 5px;
   outline: none;
}

input_update {
   background: #dda;
}

input_selected {
   background: #7f7;
}

.text_link {
   color: #007;
   cursor: pointer;
   text-decoration: none;
   font-weight: normal;
   border-bottom: 1px dashed #777;
   user-select: none;
}

.window_buttons_container {
   /* background: #ddf; */
   position: relative;
   padding: 10px;
   border-radius: 0px 0px 5px 5px;
   bottom: 0px;
   left: 0px;
   width: calc(100% - 20px);
   text-align: center;
}

.login_window {
   position: fixed;
   display: none;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 200px;
   background: #fff;
   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .4);
}

.preview-wrapper {
   position: relative;
   background: #565253;
   padding: 1px;
   font-family: 'handelsonsix', sans-serif;
   border-radius: 5px;
   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .4);
}

.preview-model {
   display: flex;
   justify-content: space-between;
   gap: 5px;
   color: #fff;
}

.preview-label-left {
   position: absolute;
   padding: 0px 5px;
   left: 4px;
   background: #555;
   color: #fff;
   opacity: 0.7;
   border-radius: 0px 3px 3px 0px;
   font-size: 12pt;
}

.preview-label-right {
   position: absolute;
   padding: 0px 5px;
   right: 0px;
   background: #fff;
   opacity: 0.7;
   border-radius: 0px 3px 3px 0px;
   font-size: 8pt;
}

#dropzone {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: center;
   width: 300px;
   height: 200px;
   border: 1px dashed #aaa;
   border-radius: 5px;
}

.photo-drop-over {
   display: flex;
   text-align: center;
   align-items: center;
   background: rgb(124, 180, 126);
   width: 300px;
   height: 200px;
}

.progress_bar {
   border-radius: 5px;
   background: rgb(88, 88, 88);
}

.btn_upl {
   background: #E0A900;
   cursor: pointer
}

.btn_upl.active {
   background: #FEC000;
}

/* Прочее */

.pointer {
   cursor: pointer;
}

.label {
   margin: 2px;
   border-radius: 3px;
   padding: 0px 5px;
   background: #fff;
}

.label-active {
   background: #0d0;
}