*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
@font-face {
   font-family: 'Pragmatica Book';
   src: local('Pragmatica Book'),
   url('/static/fonts/Pragmatica/Pragmatica-Book.ttf');
}
@font-face {
    font-family: 'Space Mono';
    src: local('Space Mono'),
    url('/static/fonts/Space Mono/SpaceMono-Regular.ttf');
}

@font-face {
    font-family: 'Times New Roman';
    src: local('Times New Roman'),
    url('/static/fonts/Times New Roman/timesnewromanpsmt.ttf');
}

@font-face {
    font-family: 'Pragmatica Medium';
    src: local('Pragmatica Medium'),
    url('/static/fonts/Pragmatica/PragmaticaCond-Medium.ttf');
}

@font-face {
    font-family: 'Roboto Regular';
    src: local('Roboto Regular'),
    url('/static/fonts/Roboto/static/Roboto-Light.ttf');
}
html, body {
   height: 100%;
   font-size: var(--main_font_size);
   font-family: Pragmatica Medium;
}

:root {
    --hero_font_size: 26px;
    --icon_image_w: 28px;
    --icon_image_h: 28px;
    --icon_mini_h: 21px;
    --icon_mini_w: 21px;
    --base_font_size: 14px;
    --btn_font_size: 16px;
    --btn_bord_rad: 6px;
    --nav_icon_w: 24px;
    --nav_icon_h: 24px;
    --color_1: #eae7dc;
    --color_2: #d8c3a5;
    --color_3: #8e8d8a;
    --color_4: #e98074;
    --color_5: #e85a4f;
    --color_6: #212624;
    --color_7: #fff;
    --color_8: #efeee7;
    --color_9: #dededea1;
    --color_10: #9a9a9a;
    --color_35: #53ED32;
   --session_card_border_radius: 6px;
   --session_card_image_w: 70px;
   --session_card_image_h: 70px;
   --upload_image_w: 200px;
   --upload_image_h: 200px;
   --inventory_card_fnt_size: 13px;
   --origin_image_card_w: 100%;
   --origin_image_card_h: 300px;
   --main_font_size: 14px;
   --main_font_size_16: 16px;
   --main_font_size_24: 24px;
   --main_font_size_20: 20px;
   --main_head_font_size_36: 36px;
   --main_head_font_size_42: 42px;
   --main_head_font_size_48: 48px;
   --main_head_font_size_68: 68px;
}

.user-account {
    display: none;
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    html {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      overflow-x: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
}

@media (min-width: 300px) and (max-width: 767px)  {
    
}
/* index */
.m-index-section {
    height: calc(100svh - calc(var(--nav_icon_h) + 24px));
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    background-color: var(--color_6);
}
.header__m-index {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px;
    background-color: var(--color_6);
}
.header__m-inner-title-numeric {
  color: var(--color_7);
  padding: 12px 0;
  font-size: var(--main_font_size);
  font-family: Space Mono;
}
.numeric-objects {
  margin-right: 12px;
}
.header__m-index-inner-title {
    
}
.header__m-index-inner-login {
}
.header__m-index-logo {
    text-decoration: none;
    color: var(--color_7);
}
.header__m-index-logo-text {
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    color: var(--color_35);
}
.header__m-index-logo-beta {
    font-size: var(--main_font_size);
    font-family: Space Mono;
}
.header__m-index-logo-description {
    font-size: var(--main_head_font_size_36);
    font-family: Times New Roman;
    line-height: 1;
    color: var(--color_7);
    padding: 12px 0;
}
.main__m-index-button {
    text-decoration: none;
    color: var(--color_7);
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Medium;
    /* padding: 16px; */
    background-color: var(--color_6);
    text-align: center;
}
.main__m-index {
    padding: 12px;
    background-color: var(--color_7);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.main__m-index-links {
    display: flex;
    align-items: center;
    width: 50%;
    justify-content: space-between;
}
.m-index-button-search-wrapper {
    padding: 12px 0;
}
.image-hero {
    height: 40svh;
    position: absolute;
    right: 0;
    top: 20svh;
}
article {
    padding: 40px 0;    
    height: auto;
}
.article-result-ii {
    width: 100%;
}
.article-result-ii-title {
    width: 100%;
}
article:not(:last-child) {
    border-bottom: var(--color_6) solid 1px;
}
.article-title {
    width: 70%;
}
.article-title-text {
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    padding: 12px 0;
}
.article-title-subtext {
    font-size: var(--main_font_size);
    font-family: Space Mono;
    padding-bottom: 12px;
}
.m-index-button {
    text-decoration: none;
    color: var(--color_7);
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--color_6);    
    margin-right: 20px;
}
.footer__m-index {
  background-color: var(--color_6);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.footer__m-index-header {
  color: var(--color_7);
  font-size: var(--main_font_size_24);
  text-align: center;
  padding: 36px;
  line-height: 1.2;
  font-family: Times New Roman;
}
.footer__m-index-contacts {
  padding: 12px;
}
.footer__m-index-contacts-wrapper {
  display: flex;
  flex-direction: column;
  font-family: Pragmatica Medium;
  border-top: var(--color_7) solid 1px;
  padding-top: 12px;
}
.footer__m-index-icon {
  width: 35px;
  height: 28px;
  margin-right: 12px;
}
.font_color_ {
  color: var(--color_35);
}
.footer__m-index-contacts-year {
    color: var(--color_7);
    font-size: var(--main_font_size);
    text-align: center;
}
.footer__m-index-li {
  color: var(--color_7);
  font-size: var(--main_font_size);
  text-decoration: none;
  list-style: none;
  padding: 6px 0;
}
.footer__m-index-li a {
  text-decoration: none;
  color: var(--color_7);
}
.footer__ul-send-message {
    display: flex;
    align-items: center;
}
.footer__ul-send-message li {
    margin-right: 12px;
}


.base-nav-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main {
  box-sizing: border-box;
  position: relative;
  height: calc(100svh - calc(var(--nav_icon_h) + 24px));
}
.m-button {
    /* border: var(--color_3) solid 1px; */
    border-radius: var(--btn_bord_rad);
    padding: 6px;
    background-color: var(--color_7);
}
.m-button-new {
    color: var(--color_7);
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--color_6);    
}
.m-button-new img {
    width: var(--nav_icon_w);
    height: var(--nav_icon_h);
}
.m-button img {
    width: var(--nav_icon_w);
    height: var(--nav_icon_h);
}
.m-footer-wrapper {
}
.m-footer-nav {
} 
.m-footer-nav-ul {
   display: flex;
   align-items: center;
   list-style: none;
   justify-content: space-around;
   padding: 12px 0;
}
.m-footer-nav-ul-li div button {
    background-color: var(--color_7);
}
.m-footer-nav-ul-li img {
   width: var(--nav_icon_w);
   height: var(--nav_icon_h);
}
.m-btn-icon {
    width: var(--icon_mini_w);
    height: var(--icon_mini_h);
}

/* user account (history) */
.m-section {
    padding: 12px;
    height: calc(100svh - calc(var(--nav_icon_h) + 24px));
    overflow-y: hidden;
    position: relative;
    /* background-color: var(--color_1); */
}
.m-section header {
    font-size: var(--main_font_size_24);
    font-family: Pragmatica Medium;
    color: var(--color_6);    
}
.m-user-account-main-list {
    height: calc(100svh - calc(var(--nav_icon_h) + 24px) - 60px);
    overflow-y: scroll;
}
.m-section-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.m-user-account-button-edit {
    background-color: var(--color_7);
    outline: none;
}
.m-user-account-button-edit-icon {
    width: var(--icon_image_w);
    height: var(--icon_image_h);
}
.m-user-account-label {
    font-size: var(--btn_font_size);
    display: flex;
    align-items: center;
}
.m-user-account-personal {
    padding: 0 6px;
}
.m-user-account-username {
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
}
.m-user-account-email {
    font-size: var(--main_font_size);
    font-family: Pragmatica Book;
}
.m-user-account-button-charts {
    background-color: var(--color_7);
    outline: none;
}
.m-user-account-button-charts-icon {
    width: var(--icon_image_w);
    height: var(--icon_image_h);
}
.m-session-card {
    padding: 6px;
    border-radius: var(--session_card_border_radius);
    border: var(--color_3) solid 1px;
    margin-top: 12px;
    background-color: var(--color_7);
    width: 99%;
}
.m-session-card-image-wrapper {
}
.m-session-card-image {
    width: var(--session_card_image_w);
    height: var(--session_card_image_h);
    object-fit: contain;
}
.m-session-card-body {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.m-session-card-body-item-up {
    padding: 6px 0;
}
.m-session-card-body-item-bottom {
    padding: 6px 0;
}
.m-session-card-body-item {
    box-sizing: border-box;
    /* flex: 1; */
    text-align: start;
    /* padding: 0 12px; */
}
.m-user-account-main-load-button {
    color: var(--color_7);
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--color_6);
    position: absolute;
    right: 12px;
    bottom: 12px;
}

/* search */
.m-section-search-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;

}
.m-section-search-header {
    padding: 10px 6px;
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
    width: 100%;
    margin-right: 6px;
}
.m-section-button-filters {
    padding: 12px 6px;
    background-color: var(--color_7);
}
.button-upload-image {
    background-color: var(--color_6);
    color: var(--color_7);
    padding: 12px 6px;
    font-size: var(--btn_font_size);
}
.m-section-button-filters img {
    width: var(--nav_icon_w);
    height: var(--nav_icon_h);
}
.m-search-filters {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 0;
}
.m-search-filters-total {
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
    display: flex;
}
.m-search-filters-total span:not(:last-child) {
    margin-right: 6px;
}
.m-search-filters-total button {
    margin-right: 12px;
}
.m-search-filters-newsession {
    display: flex;
    align-items: baseline;

}
.modal-body {
}
.upload-image-icon {
    width: var(--nav_icon_w);
    height: var(--nav_icon_h);
}
.search-params-image-wrapper {
    /* width: var(--upload_image_w);
    height: var(--upload_image_h); */
    border-radius: var(--btn_bord_rad);
    background-color: var(--color_7);
    padding: 12px;
}
.input-image {
    width: var(--upload_image_w);
    height: var(--upload_image_h);
    object-fit: contain;
}
.input-image-sm {
    width: var(--icon_image_w);
    height: var(--icon_image_w);
    object-fit: contain;
}
.search-params-image-info {
    font-size: var(--main_font_size);
    font-family: Pragmatica Book;
    text-align: center;
}
.m-search-button-upload-image {
    color: var(--color_7);
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--color_6); 
    text-align: center;
    width: 100%;
    margin: 6px 0;
}
.m-search-button-submit {
    width: 100%;
    color: var(--color_7);
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--color_6);  
    display: flex;
    align-items: center;
    justify-content: center;
}
.m-search-button-loader {
    background-color: var(--color_9);
    color: var(--color_6);
    font-size: var(--btn_font_size);
    padding: 12px 6px;
    border-radius: var(--btn_bord_rad);
    display: none;
    width: 100%;
    text-align: center;
}
.m-search-button-submit span {
    margin-left: 6px;
}
.m-search-button-submit img {
    width: var(--nav_icon_w);
    height: var(--nav_icon_h);
}
.m-search-result-scroll {
    overflow-y: scroll;
    height: 82svh;
    width: 100%;
}
.m-search-result-datam-search-result-data {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.m-button-new-search {
    /* background-color: var(--color_4); */
    margin-right: 12px;
    border-color: var(--color_4);
}
.m-button-main {
    background-color: var(--color_6);
    color: var(--color_7);
    font-size: var(--btn_font_size);
    border-radius: var(--btn_bord_rad);
    padding: 12px 6px;
}

.modal-body-inner {
    width: 100%;
}
.favorites-panel-cards {
    width: 100%;
    height: 82svh;
    overflow-y: scroll;
}

/* inventory card */
.m-inventory-card {
    width: 98%;
    height: 245px; 
    display: flex;
    background-color: var(--color_7);
    border: var(--color_10) solid 1px;
    border-radius: var(--btn_bord_rad);
    margin: 0 0 10px 0;
    padding: 0 6px;
    font-size: var(--inventory_card_fnt_size);
    box-sizing: border-box; /*  Важно, чтобы padding и border не увеличивали общую высоту */
    overflow: hidden; /*  Скрываем контент, выходящий за границы карточки */
    display: flex;          /*  Flexbox для вертикального распределения */
    flex-direction: column; /*  Элементы располагаются вертикально */
  }
  
  .m-inventory-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-shrink: 0; /*  Заголовок не сжимается */
  }
  
.m-inventory-card-header span {
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Medium;
}
  .m-inventory-card-button-fav {
    background-color: var(--color_7);
    padding: 6px;
    }
.m-inventory-card-button-fav img {
    width: var(--icon_image_w);
    height: var(--icon_image_w);
    }
  
  .m-inventory-card-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    padding: 6px;
  }
  
  .m-inventory-card-image-container {
    padding: 6px;
    flex-shrink: 0;
  }
  
  .m-inventory-card-image {
    object-fit: contain;
    height: 100%;       /*  Высота изображения */
    width: 120px;
    flex-shrink: 0; /*  Изображение не сжимается */
  }
  
  .m-inventory-card-info {
    flex: 1; /* Занимает все оставшееся место в main */
    background-color: var(--color_7);
    border: var(--btn_border_rad) 1px solid;
    border-radius: var(--btn_bord_rad);
    padding: 0 6px;
  }
  .m-inventory-card-info-text {
    padding: 6px 0;
    font-size: var(--main_font_size);
    font-family: Pragmatica Book;
}
  .m-inventory-card-footer {
    flex-shrink: 0; /* Подвал не сжимается */
    padding: 6px 0;
    border-top: var(--color_3) solid 1px;
  }

/* view inventory */
.image__view-origin {
    width: var(--origin_image_card_w);
    height: var(--origin_image_card_h);
    object-fit: contain;
}
.modal-body-inner {
}
.information_block p {
   font-size: var(--main_font_size_20);
   color: var(--color_14);
   font-family: Pragmatica Book;
}
.modal-body-inner-carusel {
    width: 100%;
    margin-top: 24px;
}
.carousel {
    object-fit: contain;
    margin: 0 auto;
}
.carousel-image {
    margin-left: 25%;
    height: 260px;    
    object-fit: contain;
}

/* map */
.m-ya-map {
   min-height: 500px;
}
.section-map-sites-list {
    height: 30svh;
    overflow-y: scroll;
    padding: 12px 0;        
}
.button-map-site-wrapper {
    border-bottom: var(--color_3) solid 1px;
}
.button-map-site {
    padding: 12px 6px;
    font-size: var(--btn_font_size);
    color: var(--color_6);
    background-color: var(--color_7);
}

/* fts */

.toast-fts {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 10;
}
.m-section-fts-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.m-fts-search-line {
    display: flex;
    align-items: center;
    width: 100%;
    border: var(--color_6) solid 1px;
    border-radius: var(--btn_bord_rad);
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
    color: var(--color_6);
    padding: 12px;
    margin-right: 12px;
}
.m-fts-search-line button {
    background-color: var(--color_7);
}
.dropdown-item {
   font-size: var(--main_font_size_16);
   font-family: Pragmatica Book;
}
.search-line-input {
    width: 100%;
    margin: 0 12px;
    outline: none;
    /* background-color: var(--color_1); */
}
.m-section-fts-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
}
.offcanvas-title {
    font-size: var(--main_font_size_24);
    font-family: Pragmatica Book;
    
}
.offcanvas-body-sites-list-wrapper {
}
.offcanvas-body-list {
    width: 100%;
    height: 35svh;
    overflow-y: scroll;
    padding: 12px 0;
}
.offcanvas-body-list-header {
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Book;
    padding: 12px 0;
}
.checkbox-element-lbl {
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
    padding: 0 6px;
    
}

/* forms */
.form-scroll-wrapper {
    height: 87svh;
    overflow-y: scroll;
    padding-bottom: 20px;
}
.form__input-wrapper.error input {
    border-color: var(--color_5);
    border: var(--color_5) solid 1px;
    border-radius: var(--btn_bord_rad);
}     
.form__input-wrapper.success input {
    border-color: var(--color_11);
    /* background-color: var(--color_1); */
}
.form__input-wrapper {
   padding: 12px 6px;
   width: 100%;
   /* background-color: var(--color_1); */
}
.form__input-label {
   font-size: var(--main_font_size_16);
   font-family: Pragmatica Book;
   color: var(--color_6);
   margin: 0 6px 12px 0;
}
.form__input {
   width: 100%;
   border: var(--color_6) solid 1px;
   border-radius: var(--btn_bord_rad);
   font-size: var(--main_font_size_16);
   font-family: Pragmatica Book;
   padding: 10px;
   outline: none;
}
.form__button-wrapper {
   width: auto;
   padding: 12px 6px;
}
.form__button {
   border-radius: var(--btn_bord_rad);
    background-color: var(--color_6);
    color: var(--color_7);
   font-size: var(--main_font_size_20);
   font-family: Pragmatica Medium;
   padding: 16px;
   width: 100%;
   text-align: center;
}
.a-redirect {
   font-size: var(--main_font_size_16);
   font-family: Pragmatica Book;
   color: var(--color_6);
}
.links-redirect {
    padding: 24px 6px 0 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.error-message {
   color: var(--color_5);
   font-size: var(--base_font_size);
   margin-top: 0.2em;
   /* background-color: var(--color_1); */
}
.form-error-message {
   font-size: var(--base_font_size);
   background-color: var(--color_1);
   color: var(--color_6);
   padding: 6px 12px;
   border-radius: var(--btn_bord_rad);
   visibility: hidden;
}
.button__loader {
   background-color: var(--color_9);
   border-radius: var(--btn_bord_rad);
   font-size: var(--btn_fnt_size);
   padding: var(--btn_padding);
   color: var(--color_6);
   display: none;
}

/* demo */
.m-demo-main-search-image {
    padding: 12px 0;
    text-align: center;
}
.m-demo-images-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.m-demo-main-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.m-demo-image {
    width: var(--session_card_image_w);
    height: var(--session_card_image_h);
    object-fit: contain;
    cursor: pointer;
    opacity: 0.5;
}
.m-demo-image-active {
    width: var(--session_card_image_w);
    height: var(--session_card_image_h);
    object-fit: contain;
    cursor: pointer;
    opacity: 1;
}
.m-demo-content-scroll {
    height: calc(100svh - calc(var(--nav_icon_h) + 24px) - 60px);
    overflow-y: scroll;        
}
.m-demo-info-point {
    padding: 12px 6px;
    /* background-color: var(--color_8); */
    border-radius: var(--btn_bord_rad);
    display: flex;
    align-items: center;
    margin: 6px 0;
}
.m-demo-info-point span {
    margin-left: 12px;
    font-size: var(--main_font_size_16);
    font-family: Pragmatica Book;
}
.form__base-input-lbl {
   font-size: var(--main_font_size_16);
   font-family: Pragmatica Book;
}
.open-modal-hidden-button {
    visibility: hidden;
}

/* warning cookie */
.warning {
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    justify-content: center;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: var(--color_6);
    z-index: 50;
}
.warning--active {
    display: block;
}

.warning__text {
  font-size: var(--main_font_size);
  font-family: Pragmatica Book;
  color: var(--color_7);
  padding: 10px 0;
}
.warning__apply {
  background-color: var(--color_7);
  border-radius: 10px;
  padding: 12px;
  color: var(--color_6);
  font-size: var(--main_font_size);
  font-family: Pragmatica Book;
  border: none;
}
.warning__read {
    display: block;
    margin-left: 15px;
}