/*
 * Общие классы
 */

* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; }
body { font-size: .875rem; }
textarea { resize: none; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-help { cursor: help !important; }
.hovered:hover { background-color: var(--bs-border-color); }
.focused { border-radius: var(--bs-border-radius-lg); border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.border-bottom-stacked { border-bottom: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.border-right-rounded { border-radius: 0 .375em .375em 0 !important; }
.transition-off { transition: 0s !important; }
.foucused-outline-off:focus { outline: 0 !important; box-shadow: none !important; }
.position-relative { position: relative !important; }
.hide-all { opacity: 0; }
.mw-30px { max-width: 30px !important; }
.mw-50px { max-width: 50px !important; }
.mw-80px { max-width: 80px !important; }
.mw-200px { max-width: 200px !important; }
.mw-300px { max-width: 300px !important; }
.mw-400px { max-width: 400px !important; }
.mw-500px { max-width: 500px !important; }
.mh-30px { max-height: 30px !important; }
.mh-40px { max-height: 40px !important; }
.mh-50px { max-height: 50px !important; }
.mh-60px { max-height: 60px !important; }
.mh-70px { max-height: 70px !important; }
.mh-80px { max-height: 80px !important; }
.mh-100px { max-height: 100px !important; }
.mh-200px { max-height: 200px !important; }
.mh-300px { max-height: 300px !important; }
.mh-400px { max-height: 400px !important; }
.mh-500px { max-height: 500px !important; }
.mnh-100px { min-height: 100px !important; }

.w-16px { width: 16px !important; }
.w-24px { width: 24px !important; }
.w-32px { width: 32px !important; }
.w-40px { width: 40px !important; }
.w-50px { width: 50px !important; }
.w-60px { width: 60px !important; }
.w-70px { width: 70px !important; }
.w-80px { width: 80px !important; }
.w-90px { width: 80px !important; }
.w-100px { width: 100px !important; }
.w-110px { width: 110px !important; }
.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-150px { width: 150px !important; }
.w-160px { width: 160px !important; }
.w-170px { width: 170px !important; }
.w-180px { width: 180px !important; }
.w-190px { width: 190px !important; }
.w-200px { width: 200px !important; }
.w-250px { width: 250px !important; }
.w-300px { width: 300px !important; }
.w-400px { width: 400px !important; }

.mnw-16px { min-width: 16px !important; }
.mnw-40px { min-width: 40px !important; }
.mnw-50px { min-width: 50px !important; }
.mnw-60px { min-width: 60px !important; }
.mnw-70px { min-width: 70px !important; }
.mnw-80px { min-width: 80px !important; }
.mnw-90px { min-width: 80px !important; }
.mnw-100px { min-width: 100px !important; }
.mnw-110px { min-width: 110px !important; }
.mnw-120px { min-width: 120px !important; }
.mnw-130px { min-width: 130px !important; }
.mnw-140px { min-width: 140px !important; }
.mnw-150px { min-width: 150px !important; }
.mnw-160px { min-width: 160px !important; }
.mnw-170px { min-width: 170px !important; }
.mnw-180px { min-width: 180px !important; }
.mnw-190px { min-width: 190px !important; }
.mnw-200px { min-width: 200px !important; }
.mnw-250px { min-width: 250px !important; }
.mnw-300px { min-width: 300px !important; }
.mnw-400px { min-width: 400px !important; }

.h-16px { height: 16px !important; }
.h-24px { height: 24px !important; }
.h-32px { height: 32px !important; }
.h-100px { height: 100px !important; }
.h-150px { height: 150px !important; }
.h-200px { height: 200px !important; }
.h-250px { height: 250px !important; }
.h-300px { height: 300px !important; }
.h-400px { height: 400px !important; }
.h-500px { height: 500px !important; }

.text-small { font-size: 12px !important; }
.text-normal { font-size: 16px !important; }
.text-wrap { overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis; }
.text-crln { white-space: pre-line }
.text-outline { color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000; }

.required label { font-weight: bold; }
.required label:after { content: " *"; color: red; }

.red-highlight {
  background-color: #ff8b8b;
  color: white;
}

/*
 * Подсветка синтаксиса JSON
 */
.json.string { color: green; }
.json.number { color: darkorange; }
.json.boolean { color: blue; }
.json.null { color: magenta; }
.json.key { color: red; }

/*
 * Анимация для появления/попадания модальных окон
 */
.fade-enter-active,
.fade-leave-active { transition: 0.1s ease-in; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/*
 * Бесконечный прогресс-индикатор
 */
.app-spinner-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.app-spinner-container .frame { text-align: center; position: relative; background-color: white; border: 1px solid silver; border-radius: 10px; padding: 10px 20px 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }

/*
 * Боковое меню
 */
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1001; padding: 48px 0 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); font-size: larger; }
.sidebar .sticky { height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto; }
.sidebar .nav-link { font-weight: 500; color: #333; cursor: pointer; user-select: none; }
.sidebar .nav-item.active { background-color: var(--bs-gray-dark); }
.sidebar .nav-item.active .nav-link { color: var(--bs-light); pointer-events: none; }
.sidebar .nav-link:hover { color: var(--bs-blue); }


/*
 * Верхняя панель
 */
.navbar-brand { padding-top: .75rem; padding-bottom: .75rem; background-color: var(--bs-dark); box-shadow: inset -1px 0 0 var(--bs-dark); }
.navbar .navbar-toggler { top: .25rem; right: 1rem; }
.navbar-nav { background-color: var(--bs-dark) }


/*
 * Компонент Login
 */
.form-signin { max-width: 400px; padding: 15px; text-align: center; }
.form-signin .form-floating:focus-within { z-index: 2; }
.form-signin .logo { font-size: 5rem; }
.form-signin .rounded-top { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.form-signin .rounded-bottom { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
.form-signin .not-rounded { border-radius: 0; margin-top: -1px; }


/*
 * Модальные диалоги
 */
.modal-background { background-color: rgba(3,3,3, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9000; display: flex; justify-content: center; align-items: center; }
.modal-transparent-background { background-color: transparent; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9000; display: flex; justify-content: center; align-items: center; }
.modal-dialog { background: var(--bs-light); margin: 0 10px; max-width: 95%; min-width: 400px; }
.modal-footer button { min-width: 100px; }
.modal-body-form { max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; }
.modal-footer:focus { outline: none; }


/*
 * Стили для редактора ACE
 */
.editor-layout { position: relative; height: 200px; padding: 1px; border: 1px solid silver; margin-top: 5px; }
.editor-layout .editor { position: relative; height: 100%; width: 100%; }
.editor-layout .fullScreen-hint { position: absolute; right: 20px; top: 0px; z-index: 10001; opacity: 0.5; font-size: 0.7rem; }
body.fullScreen { overflow: hidden; }
body.fullScreen .fullScreen-editor { height: auto!important; width: auto!important; border: 0; margin: 0; position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000 }

/*
 * Раздел и блоки
 */
.section-header {
  padding-bottom: 10px;
  border-bottom: 1px solid silver;
}
.info-box {
  box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
  border-radius: .25rem;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  min-height: 80px;
  padding: .5rem;
  position: relative;
  width: 100%;
}
.info-box .info-box-icon {
  border-radius: .25rem;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 3rem;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  width: 70px;
}
.info-box .info-box-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1.8;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
  overflow: hidden;
}
.info-box .info-box-text, .info-box .progress-description {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-box .info-box-number {
  display: block;
  margin-top: .25rem;
  font-weight: 700;
}
.large-switcher {
  display: flex;
  justify-content: center;
}
.large-switcher .form-check-input {
  width: 70px;
  height: 25px;
  cursor: pointer;
}
.large-switcher .form-check-input:checked {
  background-color: #37c480;
  border-color: #209966;
}

/*
 * Список List
 */
.list-tight tr td {
  padding: 0 4px !important;
}
.list-tight tr td .btn {
  --bs-btn-padding-y: 0px !important;
}


/*
 * Таблица Grid
 */
.table { font-size: 14px; }
.table th a { text-decoration: none }
.table .form-control:focus { box-shadow: inherit; }
.table .img-normal { max-height: 50px; max-width: 150px; }
.table .form-control-xs {
  min-height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem;
  font-size: .6rem;
  border-radius: .25rem;
}
.table td .action { font-size: 24px; padding: 0 5px; }
.table td .boolean { font-size: 26px; padding: 0; color: green; }
.table td.flag { font-size: 26px; padding: 0; }

/*
 * Элементы форм
 */
.form-datetime-picker { position: relative; }
.form-datetime-picker input { width: 200px; }
.form-datetime-picker::after {
  content: "\f214";
  display: inline-block;
  font-family: bootstrap-icons !important;
  position: absolute;
  right: 5px;
  bottom: 0;
  font-size: 20px;
}
.form-links-selector {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: end;
  padding-bottom: 8px;
}


/*
 * Параметры конфигурации
 */
.options { font-size: 16px; }
.options label { font-weight: bold; }
.options .thin-divider { height: 3px; background-color: var(--bs-gray); }

/*
 * Пейджер
 */
.pager {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
}

.pager > * {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.pager .dropdown-menu {
  margin-top: 3px;
}

/*
 * Фильтры таблиц
 */
.clear-btn {
  position: absolute;
  cursor: pointer;
  right: 3px;
  top: calc(50% - 10px);
  height: 20px;
  background-color: white;
}

/*
 * Подтверждение с сайта
 */
.confirmation-container { max-height: 500px; overflow-y: auto; }
.confirmation-container p { margin-bottom: 5px !important; }

/*
 * Просмотр картинки
 */
.image-viewer {
  position: fixed;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(3,3,3, 0.5);
  cursor: pointer;
  transition: all 0.15s ease-in;
  z-index: 9999;
}

/*
 * Селектор цветов
 */
.huebee__cursor { width: 32px; height: 32px; }
.huebee__close-button { display: none; }
.huebee__container {
  border-radius: 0 0 10px 10px;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
.huebee__container:before {
  content: "Выберите цвет из палитры";
  position: absolute;
  left: 100px;
  bottom: 30px;
  font-size: 16px;
  font-weight: bold;
}

/*
 * Карта
 */
.map-container {
  width: 100%;
  height: calc(100vh - 150px);
}
.map-ctrl {
  width: 100%;
  height: 100%;
}

/*
 * Стили для малых размеров экрана
 */
@media (max-width: 767.98px) {
  .navbar .navbar-nav {
    display: none;
  }
  .editor-layout .fullScreen-hint {
    display: none;
  }

  .pager {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .pager > * {
    text-align: center;
    justify-content: center;
  }
}