@import url("https://fonts.googleapis.com/css?family=Material+Icons|Open+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext");

/* ==========================================================================
   UNIFIED NGS STYLESHEET
   Source order preserved: NGSapp.css -> main.css -> NGS.css
   Duplicate declarations for identical selector/property pairs removed.
   Comments and dead repetition cleaned.
   ========================================================================== */

/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */
:root{
  --index: calc(1vw + 1vh);
  --gallery-gap: calc(var(--index) * 0);
  --White: rgb(240, 240, 245);
  --LightGray: rgb(165, 165, 165);
  --MidGray: rgb(90, 90, 95);
  --Mid2Gray: rgb(45, 45, 50);
  --DarkGray: rgb(35, 35, 40);
  --LightGreen: rgb(197, 230, 82);
  --Green: rgb(100, 200, 0);
  --Yellow: rgb(255, 150, 0);
  --Orange: rgb(255, 85, 0);
  --Red: rgb(255, 25, 0);
  --BlackTrans: rgba(25,25,30,.85);
  --BlackTrans50: rgba(25,25,30,.5);
  --WHours: rgba(75, 192, 192, .7);
  --FHours: rgba(153, 102, 255, .7);
  --NHours: rgba(255, 190, 0, .85);
}

::selection{
  background-color: var(--LightGreen);
  color: var(--DarkGray);
}

::-moz-selection{
  background-color: var(--LightGreen);
  color: var(--DarkGray);
}

a{
  cursor: pointer;
}

audio::-webkit-media-controls-more-button{
  display: none !important;
}

#audioPlayer{
  width: 180px;
  height: 20px;
}

#appHeader .select2-selection__clear{
  color: var(--MidGray);
  font-size: 15px;
  padding: 0 10px 0 0 !important;
  margin: 0 !important;
}

#appHeader .select2-selection__clear:hover{
  color: var(--LightGreen);
}

#appHeader .select2-selection__arrow{
  display: none;
}

#appHeader .select2-selection__rendered{
  padding: 0 5px !important;
  line-height: 25px;
  color: var(--MidGray);
}

#appHeader .select2-selection__placeholder{
  color: var(--MidGray);
}

#desktop{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#ngs-scene{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

#ngs-scene::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#ngs-scene::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#ngs-scene-content{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

#ngs-scene > canvas.ps-flow-bg-canvas{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
  z-index: 1 !important;
}

.equalizer{
  position: relative;
  display: flex;
  justify-content: center;
  height: 10px;
  align-items: flex-end;
  padding: 0 5px;
}

.bar{
  width: 2px;
  margin: 0 1px;
  background-color: var(--MidGray);
  transform-origin: bottom;
  height: 100%;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
  transform: scaleY(0);
}

.volume-slider{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  height: 100%;
  z-index: 9999;
}

select{
  text-align: center;
  width: 100%;
  height: 100%;
  appearance: none;
  background: none;
  border: none;
  font-size: 16px;
  outline: none;
  color: inherit;
  cursor: pointer;
}

select:hover{
  color: var(--LightGreen);
}

select option{
  appearance: none;
  background-color: var(--BlackTrans);
  color: var(--LightGray);
  border: none;
  outline: none;
}

select option:hover{
  background-color: var(--BlackTrans50);
  color: var(--LightGreen);
}

input[type="datetime-local"],
input[type="date"],
input[type="time"]{
  font-size: 15px;
  outline: none;
  border: none;
  color: var(--MidGray);
  background: none;
}

input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="time"]:focus{
  border-bottom: 0px solid rgb(75, 75, 75);
  outline: none;
  font-size: 15px;
  background-color: transparent;
  color: var(--MidGray);
}

input::-webkit-datetime-edit-hour-field,
input::-webkit-datetime-edit-minute-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-year-field{
  pointer-events: none;
}

input::-webkit-datetime-edit-hour-field:focus,
input::-webkit-datetime-edit-minute-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus{
  background-color: transparent;
  color: var(--LightGreen);
  outline: none;
  border-radius: 4px;
  cursor: pointer;
}

input::-webkit-datetime-edit-hour-field:hover,
input::-webkit-datetime-edit-minute-field:hover,
input::-webkit-datetime-edit-day-field:hover,
input::-webkit-datetime-edit-month-field:hover,
input::-webkit-datetime-edit-year-field:hover{
  background-color: transparent;
  color: var(--LightGreen);
  outline: none;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: none;
}

input::-webkit-calendar-picker-indicator{
  cursor: pointer;
}

input::-webkit-calendar-picker-indicator:hover{
  cursor: pointer;
  opacity: 1;
}

#app-Rwindow-content{
  height: 100%;
}

.app-block2, .notifications-block2, .hours-app-block2, .stats-app-block2{
  padding: 15px;
  overflow: auto;
  height: calc(100vh - 104px);
}

.app-block{
  border-top: 0px solid var(--MidGray);
  padding: 15px;
  overflow: auto;
  height: calc(100vh - 126px);
}

.app-block p{
  color: var(--LightGray);
}

.app-block-inputText input{
  padding: 0;
  margin-bottom: 0;
  font-variant: normal;
  color: #aaa;
  border: none;
  background-color: transparent;
  border-bottom: 2px solid rgb(75, 75, 75);
  font-weight: bold;
  font-size: 16px;
}

.app-text{
  color: var(--LightGray);
}

.app-menu{
  display: flex;
  flex-direction: column;
}

.app-menu li{
  flex-grow: 0;
  color: var(--MidGray);
}

.app-menu li:last-child{
  margin-top: auto;
}

.app-home-down-table{
  width: 100%;
  border-spacing: 0px;
  padding: 0;
}

.app-table{
  width: 100%;
  height: 100%;
}

.td-statusMs{
white-space: nowrap;
}

.app-statusMs{
  color: var(--MidGray);
  padding-right: 10px;
  display: inline-block;
  max-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-main-table{
  width: 100vw;
  height: 100vh;
  border-spacing: 0px;
}

.app-main-table-pading-l{
  width: 0px;
}

.app-main-table-pading-r{
  width: 0px;
}

@keyframes expandAnimation{
  from{
    width: 10px;
  }

  to{
    width: 100px;
  }
}

*/

.app-main-table-content{
  vertical-align: top;
  height: 100%;
}

.app-main-table-statusbars{
  height: 25px;
  background-color: var(--BlackTrans);
  position: relative;
  z-index: 1050;
  /* backdrop-filter убран (PERF-003): блюр поверх анимируемого канваса заставлял
     пере-размывать обе полосы каждый кадр. Полупрозрачный фон остаётся. */
}

.app-main-table td{
  padding: 0;
}

.app-employee-table{
  border: 1px solid var(--MidGray);
  background-color: var(--BlackTrans);
  border-radius: 10px;
  padding: 10px;
  border-spacing: 0px;
}

.app-employee-table p{
  margin: 0;
  text-align: left;
}

.app-employee-table td{
  border-bottom: 1px solid var(--MidGray);
}

.app-employee-table-li{
  color: var(--LightGray);
}

.app-employee-table-sel{
  background-color: var(--DarkGray);
  border-color: var(--MidGray);
  color: var(--LightGray);
  border-radius: 5px;
}

.app-border{
  border: 1px solid var(--MidGray);
}

.app-UhideBlock{
  display: none;
}

.app-l-panel{
  height: 100%;
  vertical-align: top;
  border-right: 1px solid var(--MidGray);
  overflow: hidden;
}

.app-l-panel-table{
  width: 100%;
  height: 100%;
  border-spacing: 0px;
}

.app-l-panel-title{
  color: var(--LightGray);
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
}

.app-l-ScrollBox{
  white-space: nowrap;
  width: 230px;
  height: 100%;
  background-color: var(--BlackTrans50);
  overflow: auto;
  transition: width 0.5s ease;
}

.app-l-ScrollBox:hover{
  width: 230px !important;
  transition: width 0.5s ease;
}

.app-ScrollBox{
  height: 100%;
  overflow: auto;
}

.app-r-panel{
  height: 100%;
  border-left: 1px solid var(--MidGray);
  position: relative;
  z-index: 9999;
}

.app-home-down-menu{
  text-align: center;
  display: block;
}

@keyframes rSignalBorder-pulse{
  0%{
    border-left: 1px solid var(--MidGray);
  }

  50%{
    border-left: 1px solid var(--LightGreen);
  }

  100%{
    border-left: 1px solid var(--MidGray);
  }
}

@keyframes pulse{
  0%{
    color: var(--MidGray);
  }

  50%{
    color: var(--LightGreen);
  }

  100%{
    color: var(--MidGray);
  }
}

@keyframes pulseYellow{
  0%{
    color: var(--MidGray);
  }

  50%{
    color: var(--Yellow);
  }

  100%{
    color: var(--MidGray);
  }
}

@keyframes pulseRed{
  0%{
    color: var(--MidGray);
  }

  50%{
    color: var(--Red);
  }

  100%{
    color: var(--MidGray);
  }
}

/* lSignalBorder-pulse удалён (PERF-017): декларации с !important внутри @keyframes
   игнорируются спекой — анимация годами была невидимым no-op, жгущим таймлайн. */

.app-r-panel:hover{
  width: 100px;
  border-left: 1px solid var(--MidGray);
  animation: none;
  transition: width 0.5s ease;
}

.app-l-ScrollBox::-webkit-scrollbar{
  display: block;
}

.app-r-ScrollBox{
  width: 10px;
  height: 100%;
  background-color: var(--BlackTrans50);
  overflow-x: clip;
  overflow-y: auto;
  transition: width 0.5s ease;
}

.app-r-ScrollBox:hover{
  width: 80px;
  transition: width 0.5s ease;
}

.app-r-ScrollBox::-webkit-scrollbar{
  display: block;
}

.app-line-ScrollBox{
  border-bottom: 1px solid var(--MidGray);
  margin: 5px 0;
}

.app-r-employee-card{
  width: 80px;
  padding: 5px 10px 5px 10px;
  transition: transform 0.3s ease;
}

.app-r-employee-card img{
  border-radius: 40px;
  border: 1px solid var(--MidGray);
  transition: border 0.3s ease;
}

.app-r-employee-card:hover img{
  border: 1px solid var(--LightGreen);
  transition: border 0.3s ease;
}

.app-r-employee-card:hover{
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.kanban, .notifications-container{
  display: flex;
  flex-direction: row;
}

.kanban *{
  font-family: sans-serif;
}

.kanban__section, .notifications__section{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px;
  margin: 5px;
  background-color: var(--BlackTrans50);
  border-radius: 10px;
  max-width: 260px;
  min-width: 260px;
}

.kanban__section-items, .notifications-items{
  flex-grow: 1;
}

.kanban__section-title, .notifications-title{
  width: max-content;
  font-size: 20px;
  color: var(--LightGray);
  outline: 0px;
  border-radius: 10px;
  padding: 0px 5px;
}

.kanban__section-title:focus{
  box-shadow: inset 0 0 0 1px var(--LightGreen);
}

.kanban__section-tougle-td{
  width: 15px;
}

.kanban__section-tougle{
  color: var(--MidGray);
  cursor: pointer;
  width: 15px;
}

.kanban__section-tougle:hover{
  color: var(--LightGray);
}

.kanban__section-title-table, .notifications-title-table{
  width: 100%;
}

.kanban__section-title-table-btn{
  padding: 0px 0px;
  width: 35px !important;
  height: 35px !important;
  background: rgba(0, 0, 0, 0.1);
  color: var(--LightGray);
}

.kanban__section-title-table-btn:hover{
  color: var(--Mid2Gray);
  background: var(--MidGray);
}

.kanban__section-title-table-btn-td{
  width: 35px !important;
}

.kanban__item-table{
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  background: transparent;
  border-radius: 12px;
}

.kanban__item-table-td1,
.subTaskTableTd1{
  display: flex;
}

.kanban__item-table-td2:hover{
  background: var(--BlackTrans50);
}

.kanban__item-taskDetails,
.subTask-details-btn{
  width: 30px;
  border: 1px solid var(--Mid2Gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kanban__item-taskDetails a{
  font-size: 15px;
}

.kanban__item-table-details, .Hours-table-details{
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  border: 1px solid var(--Mid2Gray);
  border-radius: 0px 10px 10px 0px;
  table-layout: fixed;
}

.kanban__item-table-details td,.Hours-table-details td{
  width: 30%;
  color: var(--MidGray);
  overflow: hidden;
}

.kanban__item-table-details tr,.Hours-table-details tr{
  height: 100%;
}

.kanban__project-table-up-menu{
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  table-layout: fixed;
  border-radius: 0px;
  padding-right: 30px;
  text-align: center;
  border-bottom: 1px solid var(--Mid2Gray);
  white-space: nowrap;
}

.kanban__project-table-up-menu td{
  width: 30%;
  color: var(--MidGray);
  overflow: hidden;
}

.kanban__project-table-up-menu td:first-child{
  width: 450px;
  max-width: 450px;
  min-width: 150px;
  resize: horizontal;
}

.kanban__item-table-td{
  display: revert;
}

.kanban__item-table-td2{
  display: none;
}

.kanban__item-table-td2 td{
  border-left: 1px solid var(--Mid2Gray);
  padding: 0 5px;
}

.kanban__item-input-checkbox{
  width: 25px;
  white-space: nowrap;
}

.kanban__item-input-checkbox input[type=checkbox]{
  border: 2px solid var(--MidGray) !important;
  transform: translate(1px, -1px);
  border-radius: 10px;
  /* width: 20px !important;
  height: 20px !important; */
}

.kanban__item-input-checkbox input[type=checkbox]:checked:before{
  border-bottom-color: var(--LightGreen);
  border-right-color: var(--LightGreen);
  top: -1px !important;
  left: 4px !important;
}

.kanban__item-input,.subTask-item-input{
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--Mid2Gray);
  color: var(--LightGray);
  border-radius: 10px;
  cursor: pointer;
  outline: 0px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban__item-input:focus,
.subTask-item-input:focus{
  border: 1px solid var(--LightGreen);
}

.kanban__item-input:hover,
.subTask-item-input:hover{
  outline: 1px solid var(--MidGray);
}

.kanban__item-input p,
.subTask-item-input p{
  all: unset;
  display: block;
  white-space: normal;
}

.kanban__dropzone{
  height: 10px;
  border-radius: 10px;
  background: transparent;
  transition: background 0.2s, height 0.2s;
}

.kanban__dropzone--visible{
  height: 50px;
  margin: 5px 0px;
  border-radius: 10px;
  background: var(--LightGreen);
}

.kanban__dropzone--active{
  position: relative;
  height: 50px;
  margin: 0px 0px;
  border-radius: 10px;
  background: transparent;
}

.kanban__dropzone--active::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--LightGreen);
  z-index: -1;
}

.kanban__add-item{
  width: 90px !important;
  font-size: 16px;
  color: var(--LightGray);
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 5px;
}

.kanban__add-item:hover{
  color: var(--Mid2Gray);
  background: var(--MidGray);
}

.kanban__add-section{
  width: 100% !important;
  font-size: 16px;
  color: var(--LightGray);
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  margin: 5px;
  padding: 10px;
  max-width: 50px;
}

.kanban__add-section:hover{
  color: var(--Mid2Gray);
  background: var(--MidGray);
}

.app-project-head-table{
  height: 50px;
  width: 100%;
}

.app-project-head{
  border-bottom: 1px solid var(--MidGray);
  background: var(--BlackTrans50);
}

.app-project-head-title, .app-hours-title, .app-statistics-head-title{
  font-size: 20px;
  color: var(--LightGray);
  outline: 0px;
  border-radius: 10px;
  padding: 0px 10px;
}

/* .app-project-head-title:focus{
  box-shadow: inset 0 0 0 1px var(--LightGreen);
} */

.app-project-table-inside{
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
}

.app-project-l-table{
  vertical-align: top;
  height: 100%;
}

.app-project-table{
  vertical-align: top;
  width: 100%;
  transition: width 0.3s ease;
}

.app-task-table{
  transition: width 0.3s ease;
}

.app-task-table-btn{
  border-radius: 0 5px 5px 0;
  height: 60px;
  padding: 1px;
  color: var(--BlackTrans);
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}

.app-task-table{
  vertical-align: top;
  position: relative;
}

.app-task-details{
  border-left: 1px solid var(--MidGray);
  display: none;
  height: 100%;
  overflow: auto;
}

.taskDetails{
  width: 100%;
  height: 100%;
}

.padding-left{
  padding-left: 20px !important;
}

.padding-right{
  padding-right: 20px !important;
}

.app-mailDetailsText{
  color: var(--MidGray);
  text-align: left;
}

.app-mailDetailsTitle{
  padding: 0;
  border-bottom: 1px solid var(--MidGray);
  border-radius: 0;
  width: 100%;
}

#sendMailReplyButton{
  border-bottom: 1px solid var(--MidGray);
}

.mail-content{
  color: var(--MidGray);
  text-align: left;
  background: var(--BlackTrans50);
  border-radius: 10px;
  padding: 10px;
}

.app-settings-table{
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  padding: 10px;
}

.app-settings-table label{
  color: var(--LightGray);
}

.app-settings-table input[type=checkbox]{
  transform: translate(0px, -1px);
}

.app-settings-table-list{
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.setting-checkbox-container{
  display: flex;
  flex-direction: column;
  background: var(--Mid2Gray);
  padding: 0;
  margin: 0;
}

.priority-color-high{
  color: var(--Red);
}

.priority-color-middle{
  color: var(--Yellow);
}

.priority-color-low{
  color: var(--MidGray);
}

.app-home-table{
  height: 100%;
  width: 100%;
  border-spacing: 10px;
  padding: 10px;
  table-layout: fixed;
}

.app-text-block-H{
  width: 100%;
  margin: 0;
  position: relative;
  font-size: 18px;
  line-height: 2.4rem;
  color: var(--White);
  border-bottom: 1px solid var(--MidGray);
}

.app-text-block-H-shadow{
  position: absolute;
  font-size: 35px;
  filter: blur(0px);
  opacity: .3;
  top: -25px;
  left: -3px;
}

.app-home-cards{
  height: 100%;
  border: 1px solid var(--MidGray);
  overflow: hidden;
  border-radius: 10px;
  background: var(--BlackTrans50);
}

.app-home-card-table{
  height: 100%;
  width: 100%;
}

.app-wiki-table{
  width: 100%;
  border-spacing: 0px;
  padding: 15px;
}

.app-wiki-table td{
  vertical-align: top;
  width: 33%;
  display: table-cell;
}

.app-wiki-cards-container{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.app-wiki-cards{
  flex: 1 1 400px;
  max-width: 500px;
  box-sizing: border-box;
  margin-bottom: 15px;
  margin: 5px;
  border: 1px solid var(--MidGray);
  padding: 10px;
  border-radius: 10px;
  background: var(--BlackTrans50);
}

.app-wiki-cards img{
  max-width: 100%;
  height: auto;
}

.app-wiki-cards-text{
  color: var(--LightGray);
  line-height: 15px;
  font-size: 15px;
  font-variant: small-caps;
  padding: 10px 0 5px 0;
  margin: 0;
  border-top: 1px solid var(--MidGray);
}

.app-wiki-cards-text-select{
  color: var(--LightGreen);
}

.app-wiki-cards-text-height{
  border-top: 1px solid var(--MidGray);
}

.app-wiki-text{
  color: var(--LightGray);
  line-height: 16px;
  font-size: 16px;
  font-variant: small-caps;
  padding: 8px !important;
  margin: 0;
}

.protected-container{
  user-select: none;
}

.image-container{
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.image-container-static-image{
  display: block;
}

.image-container-gif-image{
  display: none;
}

.image-container:hover .image-container-static-image{
  display: none;
}

.image-container:hover .image-container-gif-image{
  display: block;
}

.app-home-logo-table{
  width: 100%;
  border-spacing: 0px;
  padding: 0;
}

.app-home-logo-icon{
  font-size: 20px;
  padding-right: 2px;
}

.app-img-modal{
  display: none;
  position: fixed;
  top: 25px;
  bottom: 25px;
  left: 0;
  width: 100vw;
  background-color: var(--BlackTrans);
  z-index: 100;
  justify-content: center;
  align-items: center;
  overflow: auto;
  backdrop-filter: blur(10px);
}

.app-img-modal-btn{
  display: none;
}

.app-img-modal-over{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.app-img-modal-content{
  max-width: 90%;
  max-height: 100%;
}

.app-img-modal-content img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.app-img-modal-content-show{
  opacity: 1 !important;
  transform: scale(1) !important;
}

.notification{
  pointer-events: none;
  position: fixed;
  top: 25px;
  right: 20px;
  width: 300px;
  color: var(--LightGray);
  padding: 10px;
  border: 1px solid var(--LightGreen);
  border-radius: 10px;
  background: var(--BlackTrans);
  opacity: 0;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  z-index: 9999;
}

.notification.show{
  animation-name: fadeIn;
}

.notification.hide{
  animation-name: fadeOut;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(-10px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut{
  from{
    opacity: 1;
    transform: translateY(0);
  }

  to{
    opacity: 0;
    transform: translateY(-10px);
  }
}

.kanban__section-dragged-zone{
  transition: height 0.3s ease;
  height: 10px;
  background: radial-gradient(circle, var(--Mid2Gray) 20%, transparent 20%) 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
}

.kanban__section-dragged-zone:hover{
  height: 20px;
  background: radial-gradient(circle, var(--Mid2Gray) 20%, transparent 20%) 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
}

.kanban__item-dragged-zone{
  transition: width 0.3s ease;
  width: 10px;
  height: 100%;
  background: radial-gradient(circle, var(--Mid2Gray) 20%, transparent 20%) 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
}

.kanban__item-dragged-zone:hover{
  width: 20px;
  background: radial-gradient(circle, var(--Mid2Gray) 20%, transparent 20%) 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
}

.disable-hover .kanban__item-dragged-zone:hover{
  width: 10px;
}

.dragging{
  opacity: 0.5;
  transition: opacity 0.2s ease;
  box-shadow: inset 0 0 0 2px var(--LightGreen);
}

.kanban__item.dragging{
  box-shadow: inset 0 0 0 0px var(--LightGreen);
}

.kanban__item{
  margin: 3px 0;
}

.priority-td{
  width: 15% !important;
}

.stages-td{
  width: 15% !important;
}

.tags-td{
  width: 15% !important;
}

.dependencies-td{
  width: 20% !important;
}

.stages{
  height: 20px;
  border-radius: 10px;
}

.tags{
  height: 20px;
  border-radius: 5px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

.loading-screen{
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--Mid2Gray);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-text{
  font-size: 16px;
  color: var(--LightGray);
  text-transform: uppercase;
  letter-spacing: 5px;
  position: absolute;
  overflow: hidden;
  opacity: 0;
  animation: loading-reveal 2s ease forwards, loading-fadeOut 1s ease 3s forwards;
  transform: translateY(70px);
}

@keyframes loading-reveal{
  0%{
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }

  100%{
    opacity: 1;
    clip-path: circle(150% at 50% 50%);
  }
}

@keyframes loading-fadeOut{
  0%{
    letter-spacing: 5px;
    opacity: 1;
  }

  100%{
    letter-spacing: 10px;
    opacity: 0;
  }
}

.fileLoadingMessages{
  font-size: 15px;
  color: var(--MidGray);
  text-transform: uppercase;
  letter-spacing: 5px;
  position: absolute;
  overflow: hidden;
}

.loading-message{
  font-size: 13px;
  color: var(--LightGray);
  text-transform: uppercase;
  position: absolute;
  opacity: 0;
  animation: loading-fadeIn 1s ease 4s forwards;
  transform: translateY(70px);
}

@keyframes loading-fadeIn{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

.mail-item-table{
  width: 100%;
  border-collapse: collapse;
  list-style-position: inside;
}

.mail-item-table td{
  padding: 8px;
  border-bottom: 1px solid var(--Mid2Gray);
}

.mail-subject{
  width: 70%;
  border-right: solid 1px var(--MidGray) !important;
}

.mail-from{
  width: 30%;
}

.mail-item{
  display: flex;
  align-items: center;
  line-height: 1.5;
}

.mail-item{
  position: relative;
  padding-left: 20px;
}

.mail-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--MidGray);
}

.mail-item{
  cursor: pointer;
}

.mail-item:hover{
  color: var(--LightGray) !important;
}

.mail-item.read{
  font-weight: normal;
  color: var(--MidGray);
}

.mail-item.unread{
  color: var(--LightGreen);
}

.numberInputBtn{
  padding: 5px;
}

.mailsMenu{
  display: flex;
  align-items: center;
  height: 100%;
  width: 100% !important;
  justify-content: flex-end;
}

.mailsMenuTest{
  font-size: 17px;
}

.assignee-td{
  position: relative;
}

.assignee{
  margin-left: 25px;
  text-align: left;
}

.assignee-icon{
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: cover;
  display: none;
  border-radius: 50%;
  border: solid 1px var(--MidGray);
}

.assignee-icon:hover{
  border: solid 1px var(--LightGreen);
}

.employee-info-popup{
  position: absolute;
  width: fit-content;
  min-width: max-content;
  border-radius: 8px;
  z-index: 100000; /* поверх соц-модалки (z-99000) — иначе карточка строится, но прячется ПОД модалкой */
  opacity: 0;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  overflow: hidden;
  user-select: none;
  transition: border 0.5s ease;
  box-shadow: 0px 0px 15px 5px var(--BlackTrans);
  border: solid 1px var(--MidGray);
}

.employee-info-popup:hover{
  border: solid 1px var(--LightGreen);
}

.employee-info-popup.show-left{
  animation-name: employee-card-fadeInLeft;
}

.employee-info-popup.show-right{
  animation-name: employee-card-fadeInRight;
}

.employee-info-popup.hide-left{
  animation-name: employee-card-fadeOutLeft;
}

.employee-info-popup.hide-right{
  animation-name: employee-card-fadeOutRight;
}

@keyframes employee-card-fadeInLeft{
  from{
    opacity: 0;
    transform: translateX(10px);
  }

  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes employee-card-fadeInRight{
  from{
    opacity: 0;
    transform: translateX(-10px);
  }

  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes employee-card-fadeOutLeft{
  from{
    opacity: 1;
    transform: translateX(0);
  }

  to{
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes employee-card-fadeOutRight{
  from{
    opacity: 1;
    transform: translateX(0);
  }

  to{
    opacity: 0;
    transform: translateX(10px);
  }
}

.right-card{
  position: fixed;
  right: 20px;
  top: 100px;
}

.employee-info-popup{
  z-index: 100000; /* поверх соц-модалки (z-99000). Это ВТОРОЕ правило — оно перебивало z-index из первого (стр.1501) */
}

.employee-info-popup-container{
  position: relative;
  height: 100px;
  display: flex;
  background: var(--MidGray);
  text-align: center;
  color: var(--LightGray);
}

.employee-info-popup-photo{
  height: 100px;
  width: 100px;
  max-width: 100px;
}

.employee-info-popup-years{
  height: 40px;
  position: absolute;
  bottom: 20px;
  right: 0;
  mix-blend-mode: screen;
}

.employee-info-popup-years::after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.employee-info-popup-awards{
  height: 20px;
  position: absolute;
  top: 5px;
  left: 0px;
  mix-blend-mode: screen;
}

.employee-info-popup-table-awards{
  border-right: solid 1px var(--MidGray);
  background-color: var(--BlackTrans);
}

.employee-info-popup-table-awards p{
  color: var(--LightGray);
  font-size: 14px;
  font-variant: small-caps;
  margin: 0;
  text-align: left;
}

.employee-info-popup-table-awards td{
  position: relative;
}

.employee-info-popup-table-info{
  flex-grow: 1;
  background: var(--BlackTrans50);
  width: 180px;
  border-spacing: 0px;
}

.employee-info-popup-table-info-title{
  color: var(--LightGray);
  font-weight: bold;
  border-bottom: solid 1px var(--MidGray);
  font-size: 15px;
  white-space: nowrap;
  padding: 0 4px 0 4px !important;
}

/* Мульти-орг 2в: бейдж «гость» у имени во всех карточках сотрудника (сигнал «внешний»). */
.ngs-guest-badge{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #e7c14a; background: rgba(231,193,74,.14); border: 1px solid rgba(231,193,74,.4);
  border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.ngs-guest-badge i{ font-size: 9px; }

/* Мульти-орг §5 (UX-008): центральное имя орг у гостя показывает бейдж-пилюлю «Вы гость в {Студия}».
   Гасим большой watermark-шрифт контейнера (font-size:0), сам бейдж — обычный МЕЛКИЙ шрифт. */
#org-name.ngs-org-guest{ font-size: 0 !important; letter-spacing: 0 !important; }
.ngs-org-guestbadge{
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font: 700 12px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  color: #e7c14a; background: rgba(231,193,74,.14); border: 1px solid rgba(231,193,74,.4);
  border-radius: 7px; padding: 3px 10px; white-space: nowrap;
}
.ngs-org-guestbadge i{ font-size: 11px; }
/* UX-010: маркер «в проекте есть внешний участник» в списке проектов сайдбара. */
.ngs-ext-mark{ font-size: 11px; color: #e7c14a; margin-left: 6px; opacity: .9; }
/* UX-010: единый механизм — ТОНКАЯ липкая строка-оповещение сверху контейнера (не скролится,
   одинаковая высота, МЕЛКИЙ шрифт). Переиспользуемо для любых оповещений в основных контейнерах. */
.ngs-notice-bar{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 12px; font: 600 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #1a1a10; background: #e7c14a; border-bottom: 1px solid rgba(0,0,0,.25);
}
.ngs-notice-bar i{ font-size: 12px; }

.employee-info-popup-table-info-progress-container{
  width: 100%;
  height: 10px;
  background-color: var(--BlackTrans);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.employee-info-popup-table-info-progress-container-table{
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  position: absolute;
  top: 0;
  left: 0;
}

.employee-info-popup-table-info-progress-container-table td{
  border-left: 1px solid var(--MidGray);
  height: 100%;
}

.employee-info-popup-table-info-progress-container-table td:first-child{
  border-left: none;
}

.employee-info-popup-table-info-progress-bar{
  height: 100%;
  background: var(--LightGreen);
  width: 0;
  transition: width 0.5s ease;
}

.employee-info-popup-table-about{
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.employee-info-popup-table-about p{
  color: var(--LightGray);
  line-height: 15px;
  font-size: 15px;
  font-variant: small-caps;
  padding: 0px !important;
  margin: 0;
  text-align: left;
}

.employee-info-popup-table-about span{
  font-size: 12px;
}

.employee-info-popup-photo-container{
  position: relative;
  display: inline-block;
}

.employee-info-popup-photo{
  display: block;
  object-fit: cover;   /* фото-аватар заполняет рамку без искажений/чёрных полей (любая пропорция исходника) */
}

.employee-info-popup-button-container{
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0px;
}

.employee-info-popup-link{
  color: var(--LightGray);
  font-size: 12px;
  padding: 0 4px;
  text-decoration: none;
  transition: color 0.3s;
}

.employee-info-popup-link:hover{
  color: var(--LightGreen);
}

.employee-info-popup-button-background-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--BlackTrans50);
  border-radius: 5px;
  z-index: -1;
}

.filter-popup{
  position: absolute;
  padding: 10px;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s;
  background: var(--Mid2Gray);
  text-align: center;
  color: var(--LightGray);
  box-shadow: 0px 0px 15px 5px var(--BlackTrans);
  border: solid 1px var(--MidGray);
  border-radius: 10px;
}

.filter-popup-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-popup-table{
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.filter-popup-table p{
  color: var(--LightGray);
  line-height: 15px;
  font-size: 15px;
  font-variant: small-caps;
  padding: 0px !important;
  margin: 0;
  text-align: center;
}

.filter-popup-table select{
  border: solid 1px var(--MidGray);
  background: var(--BlackTrans50);
  border-radius: 10px;
  padding: 5px;
}

.filter-btn{
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

.filter-btn:hover{
  background-color: #0056b3;
}

.filter-popup.show{
  opacity: 1;
  transform: scale(1);
}

.filter-popup.hide{
  opacity: 0;
  transform: scale(0.95);
}

#resize-handle{
  width: 10px;
  height: 10px;
  background-color: var(--MidGray);
  position: absolute;
  right: 2px;
  bottom: 2px;
  cursor: se-resize;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-radius: 6px 0;
  z-index: 9999;
  display: none;            /* web-first: уголок ресайза окна — только в десктоп-приложении (pywebview) */
}
/* Десктоп (pywebview): уголок ресайза окна. В вебе размер окна — браузер, уголок не нужен. */
html.ngs-desktop #resize-handle{ display: block; }

#resize-handle:hover{
  background-color: var(--LightGreen);
}

#no-cursor-events{
  pointer-events: all;
  width: 10px;
  height: 50px;
  background-color: transparent;
  position: absolute;
  right: 0px;
  top: 25px;
  z-index: 9999;
}

.r-up-icons{
  font-size: 15px;
  z-index: 9999;
}

#top-icons{
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 9999;
  display: none;            /* web-first: оконные кнопки — только в десктоп-приложении (pywebview) */
}
/* Десктоп (pywebview): показываем оконные кнопки и резервируем под них место (106px).
   В вебе (браузер) — скрыто, без резерва. Класс ngs-desktop ставит NGSapp.js. */
html.ngs-desktop #top-icons{ display: block; }
.ngs-app-spacer{ padding-right: 0; }
html.ngs-desktop .ngs-app-spacer{ padding-right: 106px; }

#loadingOverlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; /* выше соц-модалки (99000) — красивая шторка с логотипом/кольцом всегда поверх, а не под */
  background-color: var(--BlackTrans);
  backdrop-filter: blur(5px);
}

#loadingOverlay img{
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 30px;
  right: 20px;
}

.comment{
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  background: var(--BlackTrans50);
}

.comment-table{
  width: 100%;
  height: 100%;
}

.comment-table td{
  border-top: 1px solid var(--Mid2Gray);
}

.comment-table tr:first-child td{
  border-top: none;
}

.comment img{
  border-radius: 5px;
}

.comment-thumbnail{
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  margin-top: 5px;
  border: 1px solid var(--BlackTrans50);
}

.comment-thumbnail:hover{
  border: 1px solid var(--LightGreen);
  cursor: pointer;
}

.taskDetails-taskID{
  cursor: pointer;
}

.taskDetails-taskID:hover{
  color: var(--LightGray);
}

.drop-title{
  pointer-events: none;
}

.drag-active-events-0{
  pointer-events: none;
}

#fileList{
  color: var(--MidGray);
  font-size: 12px;
  padding-bottom: 6px;
}

.comment-thumbnail-container{
  position: relative;
  display: inline-block;
}

.comment-thumbnail-link{
  position: absolute;
  top: 5px;
  right: 12px;
  color: var(--LightGray) !important;
}

.comment-thumbnail-link:hover{
  color: var(--LightGreen) !important;
}

.comment p{
  font-variant: normal;
  margin: 0;
  text-align: left;
}

.comment ul{
  font-variant: normal;
  list-style: disc;
}

.comment ul,
.comment ol{
  margin: 10px;
  padding: 0;
}

.comment a{
  color: var(--LightGreen);
}

.comment a:hover{
  color: var(--LightGray);
}

.comment hr{
  background: var(--MidGray);
  margin: 0;
  padding: 0;
  height: 1px !important;
}

.trumbowyg-editor input[type=checkbox],
.trumbowyg-textarea input[type=checkbox],
.comment input[type=checkbox]{
  border: 2px solid var(--MidGray) !important;
  transform: translate(1px, -1px);
  border-radius: 10px;
  width: 15px !important;
  height: 15px !important;
}

.trumbowyg-editor input[type=checkbox]:checked:before,
.trumbowyg-textarea input[type=checkbox]:checked:before,
.comment input[type=checkbox]:checked:before{
  top: -1px !important;
  left: 3px !important;
  width: 2px !important;
  height: 6px !important;
}

.trumbowyg-editor input[type=checkbox]:checked:before,
.trumbowyg-textarea input[type=checkbox]:checked:before{
  width: 6px !important;
  height: 11px !important;
}

.comment-name{
  text-align: left;
  color: var(--LightGray);
  font-weight: bold;
  font-style: italic;
  padding-left: 25px;
}

.comment-employee{
  padding-left: 0;
  color: var(--LightGray) !important;
}

.comment-date{
  color: var(--MidGray);
  text-align: right !important;
}

.comment-text{
  text-align: left !important;
}

.comment-text-editable{
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  border: none;
  outline: none;
  color: var(--LightGray);
  resize: none;
  border-radius: 10px;
  padding: 10px;
}

.trumbowyg-editor, .trumbowyg-textarea{
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.comment-text-editable:focus{
  outline: none;
  border: 1px solid var(--LightGreen);
}

.comment-text-area{
  width: 100% !important;
}

.comment-drop-area{
  margin-top: 10px !important;
  width: 100% !important;
  gap: 10px !important;
}

.app-task-table{
  height: 100%;
  width: 100%;
}

.app-task-table-task{
  vertical-align: top;
}

.app-task-table-task table{
  width: 100%;
  border-spacing: 0px;
}

.app-task-table-task td{
  border-bottom: 1px solid var(--Mid2Gray);
  height: 25px;
  color: var(--MidGray);
  overflow: hidden;
}

.app-task-table-task #subTasksConteiner td{
  border-bottom: 0px solid var(--Mid2Gray);
  overflow: visible;
}

.app-task-table-task p{
  color: var(--LightGray);
  margin: 0;
  text-align: left;
}

.app-task-table-task select{
  text-align: left;
}

.app-task-table-comments{
  position: relative;
}

.comment-input-container{
  margin-bottom: 10px;
}

.emoji-menu{
  max-width: 150px;
  position: absolute;
  background: var(--DarkGray);
  border: 1px solid var(--MidGray);
  padding: 5px;
  border-radius: 5px;
}

.emoji-menu span{
  display: inline-block;
  font-size: 20px;
  margin: 5px;
  transition: transform 0.2s;
}

.emoji-menu span:hover{
  transform: scale(1.2);
}

pre{
  background: var(--BlackTrans50);
  padding: 10px;
  overflow: auto;
}

.description{
  outline: none;
  color: var(--LightGray);
  resize: none;
  border-radius: 10px;
  padding: 10px;
  background-color: var(--Mid2Gray);
  border: 1px solid var(--MidGray);
}

.description a{
  color: var(--LightGreen);
  cursor: pointer !important;
}

.description p{
  font-variant: normal;
}

.description hr{
  background: var(--MidGray);
  margin: 0;
  padding: 0;
  height: 1px !important;
}

.description:focus{
  outline: none;
  border-radius: 0 0 10px 10px;
  border: 1px solid var(--LightGreen);
}

/* #taskIdInput,#delTaskIdInput,#projectNameInput,#teamNameInput{
  outline: none;
  color: var(--LightGray);
  resize: none;
  border-radius: 10px;
  padding: 5px;
  background-color: var(--Mid2Gray);
  border: 1px solid var(--MidGray);
  font-size: 13px;
  width: 65%;
  margin: 0;
}

#taskIdInput:focus,#delTaskIdInput:focus,#projectNameInput:focus,#teamNameInput:focus{
  outline: none;
  border: 1px solid var(--LightGreen);
  font-size: 13px;
} */

.settingsInput{
  width: 100%;
  outline: none !important;
  color: var(--LightGray) !important;
  resize: none !important;
  border-radius: 10px !important;
  padding: 5px !important;
  background-color: var(--Mid2Gray) !important;
  border: 1px solid var(--MidGray) !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.settingsInput:focus{
  outline: none !important;
  border: 1px solid var(--LightGreen) !important;
  font-size: 13px !important;
}

.email_pass{
  background-color: transparent !important;
  border: 0px solid var(--MidGray) !important;
}

.email_pass:focus{
  border: 0px solid var(--LightGreen) !important;
}

.comment-buttons{
  text-align: right;
}

.comment-buttons a{
  color: var(--MidGray);
}

.comment-assignee{
  position: relative;
}

#settings-modal{
  position: absolute;
  display: none;
  min-width: 190px;
  padding: 15px;
  background-color: var(--Mid2Gray);
  border: 1px solid var(--MidGray);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 1051;
}

.edit-timestamp{
  text-align: right !important;
  color: var(--Mid2Gray);
}

.fab.fa-artstation{
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("/src/img/icons/ArtStation.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hidden-comment{
  display: none;
}

#taskLogsConteiner{
  color: var(--MidGray);
}

#taskLogsConteiner li{
  font-size: 12px;
}

.app-hours-table, .app-stats-table{
  width: 100%;
}

#HoursFormContainer{
  overflow: hidden;
  border-radius: 10px;
}

#HoursFormContainer tfoot td{
  border-top: 1px solid var(--Mid2Gray);
  background-color: var(--BlackTrans50);
}

#HoursFormContainer td{
  padding-left: 5px;
}

.HoursForm-item{
  color: var(--LightGray);
  text-align: left;
}

.HoursForm-item select{
  text-align: left;
}

.HoursForm-comment{
  outline: none;
  color: var(--LightGray) !important;
  resize: none;
  border-radius: 10px;
  padding: 5px !important;
  background-color: var(--Mid2Gray);
  border: 1px solid var(--MidGray) !important;
  font-size: 13px !important;
  width: calc(100% - 20px);
}

.searchTasks-textArea{
  outline: none;
  color: var(--LightGray) !important;
  resize: none;
  border-radius: 10px;
  padding: 5px !important;
  background-color: var(--Mid2Gray);
  border: 1px solid var(--MidGray) !important;
  font-size: 13px !important;
  width: 100%;
}

.HoursForm-time{
  outline: none;
  color: var(--MidGray) !important;
  resize: none;
  padding: 0px !important;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0px solid var(--MidGray) !important;
  font-size: 14px !important;
}

.HoursForm-time:focus{
  outline: none;
  font-size: 14px !important;
}

.HoursForm-time:hover{
  color: var(--LightGray) !important;
}

.HoursForm-comment:focus{
  outline: none;
  border: 1px solid var(--LightGreen) !important;
  font-size: 13px !important;
}

#HoursForm-date{
  outline: none;
  color: var(--LightGreen) !important;
  resize: none;
  padding: 0px !important;
  width: 170px;
  height: 100%;
  background-color: transparent;
  border: 0px solid var(--MidGray) !important;
  font-size: 14px !important;
  text-align: right;
}

#HoursForm-date:focus{
  outline: none;
  font-size: 14px !important;
}

#HoursForm-date:hover{
  color: var(--LightGray) !important;
}

.dateIn,.dateOut{
  outline: none;
  resize: none;
  padding: 0px !important;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0px solid var(--MidGray) !important;
  font-size: 14px !important;
  text-align: center;
  cursor: pointer;
}

.dateIn:focus,.dateOut:focus{
  outline: none;
  font-size: 14px !important;
}

.dateIn:hover,.dateOut:hover{
  color: var(--LightGreen) !important;
}

#notificationsContainer li{
  cursor: pointer;
}

#notificationsContainer li:hover{
  color: var(--LightGray) !important;
}

.notificationsContainer-a{
  border: 1px solid var(--MidGray);
  padding: 0 10px;
  border-radius: 10px;
  background: var(--Mid2Gray);
  color: var(--LightGray);
  transition: background 0.2s;
}

.notificationsContainer-a:hover{
  background: var(--LightGreen);
  color: var(--DarkGray);
}

.HoursForm-holiday-btn{
  color: var(--Mid2Gray);
}

.HoursForm-date-td{
  background-color: var(--BlackTrans50);
  padding: 5px !important;
  text-align: right;
}

.HoursForm-sendBtn{
  color: var(--Mid2Gray);
  background: var(--MidGray);
  padding: 0 25px;
}

.HoursForm-sendBtn:hover{
  background: var(--LightGreen);
}

#hoursRecordsContainer, #statsRecordsContainer{
  color: var(--LightGray);
  width: 100%;
  box-sizing: border-box;
}

#hoursRecordsContainer h2,#statsRecordsContainer h2{
  padding: 0;
  margin: 0;
}

#hoursRecordsContainer h3,#statsRecordsContainer h3{
  padding: 0;
  margin: 0;
  font-size: 18px;
}

.hours-year-container, .hours-month-container, .hours-project-container, .hours-task-container{
  width: 100%;
  margin-bottom: 5px;
  border: 1px solid var(--Mid2Gray);
  padding: 0 5px;
  border-radius: 10px;
  background: var(--BlackTrans50);
}

.hours-month{
  width: 100%;
  height: 100%;
}

.hours-item{
  width: 100%;
  margin-bottom: 5px;
  font-size: 14px;
  border: 1px solid var(--Mid2Gray);
  border-radius: 10px;
  background: var(--DarkGray);
  color: var(--MidGray);
  cursor: pointer;
  overflow: hidden;
}

.HoursForm-task-cb{
  transform: translate(0px, -1px) !important;
  border-radius: 50% !important;
  border-color: var(--MidGray) !important;
}

.hours-item hr{
  background: var(--Mid2Gray);
  height: 1px;
  padding: 0;
  margin: 0;
}

.hours-comment{
  white-space: normal;
  overflow-wrap: break-word;
}

.hours-month-container.collapsed .month-content{
  display: none;
}

.hours-text-light{
  color: var(--LightGray);
  padding: 0 5px;
}

.hours-item:hover .hours-text-light{
  color: var(--LightGreen);
}

.month-toggle,
.year-toggle,
.project-toggle,
.section-toggle,
.task-toggle{
  cursor: pointer;
  color: var(--LightGray);
}

.month-toggle:hover,
.year-toggle:hover,
.project-toggle:hover,
.section-toggle:hover,
.task-toggle:hover{
  color: var(--LightGreen);
}

.section-toggle{
  padding-left: 7px !important;
}

.hours-section-container{
  border: 1px var(--Mid2Gray) solid;
  border-radius: 10px;
  margin-bottom: 4px;
}

.differenceHours{
  display: inline-block;
  width: 62px;
}

.differenceHours-negative{
  color: var(--Red);
}

.differenceHours-positive{
  color: var(--Green);
}

.record-entry{
  display: flex;
  justify-content: space-between;
}

.record-entry:hover{
  background-color: var(--BlackTrans50);
}

.record-section{
  flex: 1;
  padding: 0 5px;
}

.record-section.time{
  width: 120px;
  flex: 0 0 120px;
}

.record-section.project{
  width: 150px;
  flex: 0 0 150px;
}

.record-section.task{
  width: 270px;
  flex: 0 0 270px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-section.employee{
  width: 150px;
  flex: 0 0 150px;
}

.record-section.date{
  width: 100px;
  flex: 0 0 100px;
}

.record-section:not(:last-child){
  border-right: 1px solid var(--Mid2Gray);
}

.kanban__item-subTaskBtn{
  width: 15px;
}

.subTasksContainer{
  background: var(--BlackTrans50);
  border-radius: 5px 10px 10px 5px;
}

.subTasksContainer .kanban__item-input{
  padding: 0px 15px !important;
  height: 26px !important;
}

.sendMail-modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.sendMail-modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--DarkGray);
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  border: 1px solid var(--MidGray);
}

.sendMail-modal-content p{
  color: var(--MidGray);
}

.sendMail-modal-content h2{
  color: var(--LightGray);
  margin: 0;
}

.sendMail-modal-content hr{
  background: var(--MidGray);
  height: 1px;
}

.sendMail-close{
  float: right;
  font-size: 1.5em;
  cursor: pointer;
  color: var(--MidGray);
}

.sendMail-close:hover{
  color: var(--LightGray);
}

#createSubTasksConteiner{
  border-bottom: 1px solid var(--Mid2Gray) !important;
}

#createSubTasksConteiner > div{
  display: flex;
  align-items: center;
  justify-content: right;
}

#createSubTasksConteiner p{
  text-align: left;
  color: var(--MidGray);
  font-variant: normal;
}

#createSubTasksConteiner input{
  transform: translate(0px, 0px);
  border: 2px solid var(--MidGray) !important;
}

/* 
#ratings-container{
  padding: 20px;
}

#ratings-container table{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#ratings-container th{
  padding: 5px;
  font-weight: bold;
  text-align: center;
  color: var(--MidGray);
  border-bottom: 1px solid var(--MidGray);
}

#ratings-container td.name-cell{
  text-align: left;
  color: var(--LightGray);
}

.rating-assignee{
  position: relative;
}

#ratings-container td.name-cell .rating-name{
  text-align: left;
  color: var(--LightGray);
  font-weight: bold;
  font-style: italic;
  padding: 3px 25px;
  margin: 0;
}

#ratings-container td select{
  width: 98%;
  margin: 1px;
  font-size: 14px;
  border: 1px solid var(--MidGray);
  border-radius: 10px;
  background-color: var(--MidGray);
}

#ratings-container tr:hover td.name-cell .rating-name{
  color: var(--LightGreen) !important;
} */

.kanban__item-row-number{
  font-size: 10px;
  color: var(--MidGray);
  width: 20px;
  text-align: center;
}

.HoursForm-comment-presets{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
}

.HoursForm-comment-presets option:first-child{
  display: none;
}

@font-face {
  font-family: "Bangers";
  src: url("/src/font/Bangers.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* было DimboItalic (несвободная лицензия) → Comic Neue (OFL, свободно для коммерции) */
@font-face {
  font-family: "DimboItalic";
  src: url("/src/font/ComicNeue-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

button{
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

#ratingModal *{
  pointer-events: none;
}

.rating-modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--BlackTrans);
  backdrop-filter: blur(5px);
  z-index: 1000;
  color: #fff;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.rating-modal-content{
  position: relative;
  width: 65%;
  height: 75%;
  max-width: 65%;
  margin: 5% auto;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.rating-profile-header h1{
  margin: 0;
  font-size: 24px;
  color: #ffd700;
}

.rating-profile{
  height: 100%;
}

.rating-profile-body{
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

#ratingBackgroundImage{
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: auto;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  mask-image: url("/src/img/employees/mask.webp");
  -webkit-mask-image: url("/src/img/employees/mask.webp");
  mask-size: cover;
  -webkit-mask-size: cover;
}

#ratingDust{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: 100vw;
  height: 100vh;
  max-width: none;
  pointer-events: none;
}

.rating-username{
  position: absolute;
  top: 15px;
  left: 10px;
  font-size: 60px;
  font-weight: bold;
  transform: rotate(-20deg);
  font-family: "Bangers", sans-serif;
  letter-spacing: 2px;
  color: gold;
  text-shadow: -4px 4px 0px rgba(0, 0, 0, 0.6);
}

.rating-motivation{
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  font-family: "DimboItalic", sans-serif;
  letter-spacing: 2px;
}

.rating-awards-table{
  position: absolute;
  bottom: 10px;
  left: 10px;
  transform: scale(1.5);
  transform-origin: bottom center;
  border-radius: 10px;
  overflow: hidden;
}

.rating-ratings-table{
  font-size: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 10px;
  border-radius: 8px;
  color: white;
  letter-spacing: 2px;
  font-family: "DimboItalic", sans-serif;
}

.rating-ratings-table-stars{
  font-family: auto;
}

.rating-ratings-table table{
  width: 100%;
  border-collapse: collapse;
}

.rating-ratings-table table td{
  text-align: left;
  line-height: 1.3;
}

.rating-ratings-table table td:first-child{
  text-align: right;
}

.rating-ratings-table table td span{
  font-size: 25px;
  color: gold;
}

.custom-dropdown{
  position: absolute !important;
  left: 100px !important;
  transform: translateX(-100%) !important;
  border: 1px solid var(--MidGray) !important;
  border-top-left-radius: 10px !important;
  max-width: 200px;
}

.custom-dropdown2{
  max-width: 300px;
}

#commentForm .select2-selection__rendered{
  color: var(--LightGray) !important;
}

.commentTaskLink{
  white-space: nowrap;
  display: inline;
}

#appHomeEmployeesTaskCount{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  overflow-x: auto;
  clip-path: inset(0 round 10px);
  background-repeat: repeat;
  background-size: 400px 400px;
}

#video-container{
  background-repeat: repeat;
  background-size: 400px 400px;
}

#appHomeEmployeesTaskCount .task-column{
  position: relative;
  width: 55px;
  margin: 5px;
  text-align: center;
  border-radius: 5px;
  flex-shrink: 0;
}

#appHomeEmployeesTaskCount .rating-assignee{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
}

#appHomeEmployeesTaskCount .assignee-icon{
  left: 0;
  top: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
}

#appHomeEmployeesTaskCount .task-count{
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}

#appHomeEmployeesTaskCount .photo-container{
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.news-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-image{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.news-title{
  font-size: 25px;
  font-weight: bold;
  margin: 0;
  padding: 5px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 1.6rem;
}

.news-description{
  font-size: 16px;
  opacity: 0.8;
  line-height: 1.5;
}

.news-link{
  align-self: flex-end;
  font-size: 16px;
  color: white;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0px 10px;
  border-radius: 5px;
}

.news-link:hover{
  color: var(--LightGreen);
}

#video-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#video-container video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#videoDescription{
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 0px 10px;
  border-radius: 5px;
}

.app-settings-table-list h2{
  margin: 0;
}

.app-settings-table-list input{
  margin-bottom: 0 !important;
}

.team-container{
  color: var(--MidGray);
  border-radius: 5px;
  border: 1px solid transparent;
}

.team-header{
  color: var(--MidGray);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.team-header:hover{
  color: var(--LightGray);
}

.team-toggle-button{
  font-size: 8px;
  width: 10px;
}

.team-title{
  font-weight: bold;
  flex-grow: 1;
}

.team-content{
  padding-left: 10px;
  color: var(--MidGray);
  display: none;
}

.team-content.hidden{
  display: none;
}

.team-content:not(.hidden){
  display: block;
}

.settings-acsess-containers{
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background: var(--BlackTrans50);
  border: 1px solid var(--MidGray);
  padding: 5px;
  width: 60%;
  gap: 5px;
}

.settings-acsess-containers .select2-selection--multiple{
  background: var(--DarkGray);
}

.settings-acsess-containers .select2-selection--single{
  border-radius: 10px 10px 0 0 !important;
}

#teamContaiter{
  cursor: pointer;
}

.stopping-animation{
  animation: none !important;
  transition: all 2s ease-out;
}

.modal-rating-name{
  color: white !important;
  cursor: pointer;
}

.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--BlackTrans);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content, .modal-positionDescription{
  background-color: var(--Mid2Gray);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--MidGray);
  max-height: 80%;
  overflow-y: auto;
  width: 60%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-content ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-content li{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid var(--MidGray);
  color: var(--LightGray);
  font-size: 14px;
}

.modal-positionDescription p{
  color: var(--LightGray);
  text-align: left;
}

.modal-positionDescription h2{
  color: var(--LightGray);
  margin: 0;
}

.modal-positionDescription ul{
  list-style: inside;
  color: var(--LightGray);
}

/* Пользовательское соглашение в модалке Help — заголовки разделов и списки */
.user-agreement{ text-align: left; }
.user-agreement h3,
.user-agreement h4{
  color: var(--LightGray);
  text-align: left;
  margin: 16px 0 4px;
  font-size: 15px;
}
.user-agreement li{ color: var(--LightGray); margin: 0 0 4px; }
.user-agreement a{ color: var(--LightGreen); }

.hotkey-key{
  width: 160px;
  font-weight: bold;
  flex-shrink: 0;
}

/* Заголовок группы в модалке хоткеев */
.modal-content li.hotkey-section{
  color: var(--LightGray);
  font-weight: bold;
  border-bottom: none;
  padding-top: 14px;
}

.hotkey-description{
  margin-left: 10px;
  flex-grow: 1;
  text-align: left;
}

.statistic-selectors{
  text-align: right;
  padding-right: 10px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.statistic-selectors select{
  margin: 2px;
  width: fit-content;
  color: var(--MidGray);
}

.statistic-selectors select:hover{
  color: var(--LightGray);
}

.statistic-selectors select:disabled{
  background-color: transparent;
  color: var(--Mid2Gray);
  cursor: auto;
}

.HoursForm-comment-presets{
  width: 20px;
  color: var(--LightGray);
  vertical-align: middle;
  font-size: 12px;
}

.tooltip{
  position: absolute;
  font-size: 13px;
  line-height: 16px;
  background-color: var(--Mid2Gray);
  color: var(--LightGray);
  border: 1px solid var(--MidGray);
  box-shadow: 0px 0px 15px 5px var(--BlackTrans);
  padding: 5px;
  border-radius: 5px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  max-width: 250px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.tooltip b{
  color: var(--MidGray);
  font-style: italic;
}

.tooltip hr{
  color: var(--MidGray);
  border-top: 1px solid var(--MidGray);
  margin: 2px 0;
}

.tooltip p{
  all: unset;
  white-space: normal;
}

.notificationsContainer-a p{
  all: unset;
  white-space: normal;
}

#photoUploadContainer{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#photoUploadArea{
  position: relative;
  width: 125px;
  max-width: 300px;
  height: 125px;
  border: 2px dashed var(--MidGray);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: var(--DarkGray);
  border-radius: 8px;
  text-align: center;
  transition: border 0.3s ease;
}

#photoUploadArea:hover{
  border: 2px dashed var(--LightGreen);
}

#photoUploadArea p{
  font-size: 16px;
  color: var(--LightGray);
  margin: 0;
}

#photoUploadArea a{
  text-align: right;
  position: absolute;
  top: 0;
  right: -20px;
}

#photoUploadArea.dragover{
  border-color: var(--LightGreen);
}

#photoUploadArea img{
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
}

.labelSettingsInput{
  display: flex;
  align-items: center;
  color: var(--MidGray);
  white-space: nowrap;
}

.labelSettingsInput p{
  margin: 5px 0;
  width: 80px;
  text-align: left;
}

.photoFileText{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  color: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  pointer-events: none;
}

#company-structure{
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.leadEmployee{
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  min-width: 100px;
}

.subordinates{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.connection-line{
  position: absolute;
  background-color: black;
  height: 2px;
}

.PositionsContainer{
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.PositionsContainer div{
  display: flex;
  justify-content: start;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.PositionsContainer input{
  width: 150px;
}

#cropModal{
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.employeeAbout{
  text-align: left;
  font-size: 12px;
  width: 130px;
  line-height: 1.3;
  /* ФИКСИРОВАННАЯ высота = ровно 2 строки. Карточка НЕ реагирует на длину about ни при
     показе, ни при редактировании → прогресс-бар и остальная вёрстка не смещаются.
     Длинный текст обрезается многоточием; полностью виден на соц-странице. */
  height: calc(1.3em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* Редактирование (своя карточка): высота ТА ЖЕ фикс — не растём, скролл строго внутри бокса. */
.employeeAbout:focus{
  outline: 0;
  display: block;
  -webkit-line-clamp: initial;
  overflow: auto;
}

.changePhoto{
  width: 15px;
  height: 15px;
  background-color: var(--BlackTrans50);
  position: absolute;
  left: 2px;
  top: 2px;
  cursor: pointer;
  clip-path: polygon(0 100%, 0 0, 100% 0);
  border-radius: 6px 0;
  z-index: 9999;
  transition: background-color 0.3s ease;
}

.changePhoto:hover{
  background-color: var(--LightGreen);
}

.changeCover{
  width: 15px;
  height: 15px;
  background-color: var(--BlackTrans50);
  position: absolute;
  right: 2px;
  top: 2px;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-radius: 0 6px;
  z-index: 9999;
  transition: background-color 0.3s ease;
}

.changeCover:hover{
  background-color: var(--LightGreen);
}

#cropModal.app-img-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  /* выше соц-модалки (#ngsSocialModal z-index:99000) и кросс-орг карточки (100050) —
     кроп вызывается и со страницы соцсети, должен быть поверх всего. */
  z-index: 100100;
  padding: 16px;
}

#cropModal.app-img-modal > div:first-child{
  max-height: min(80vh);
  width: min(90vw);
}

.selectText{
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2px;
  border-radius: 5px;
}


.appTopLeftMenu{
  display: flex;
  align-items: center;
  height: 25px;
}

.appTopLeftMenu .dropdownMenu{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 25px;
}

.appTopLeftMenu .dropdownMenu > a{
  display: inline-flex;
  align-items: center;
  height: 25px;
}

.appTopLeftMenu .app-statusMs{
  display: inline-flex;
  align-items: center;
  height: 25px;
  margin: 0;
}


.dropdownMenu{
  position: relative;
  display: inline-block;
  padding-right: 10px;
}

.dropdownMenu-content{
  padding: 5px;
  display: none;
  position: absolute;
  left: -10px;
  top: 25px;                /* вплотную к пункту (25px): при 26px была 1px-щель, hover рвался */
  background-color: var(--Mid2Gray);
  border-radius: 0 0 10px 10px;
  min-width: 120px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.35);
  z-index: 1;
}
/* Невидимый «мостик» над выпадашкой: страхует :hover-цепочку от субпиксельной щели при зуме.
   РОВНО 3px: выше нельзя — мостик открытого меню ложился на текст соседнего пункта, и
   «Помощь» не выпадала, пока открыты «Инструменты» (фидбэк 27.08). */
.dropdownMenu-content::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 3px;
}

.dropdownMenu-content a{
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  white-space: nowrap;      /* каждый пункт — в одну строку, без переносов */
  border-radius: 6px;
  line-height: 1.25;
  cursor: pointer;
}
.dropdownMenu-content a:hover{
  background: rgba(255,255,255,0.06);
}

/* Аккуратный разделитель групп пунктов в дропдауне (поиск | импорт/экспорт | …). */
.dropdownMenu-sep{
  height: 1px;
  margin: 5px 2px;
  background: rgba(255,255,255,0.12);
}

.dropdownMenu:hover .dropdownMenu-content{
  display: block;
}

/* Клик/тач-фолбэк hover-меню: класс ставит делегированный обработчик в NGSapp.js
   (ngsInitDropdownTapToggle). На таче :hover недостижим — без этого правила верхние меню
   («Инструменты», «Помощь», организации) на мобильном не открываются вовсе. */
.dropdownMenu.ngs-dd-open .dropdownMenu-content{
  display: block;
}

#HoursForm-date.ToDo-date{
  color: var(--MidGray) !important;
}

#HoursForm-date.ToDo-date:hover{
  color: var(--LightGray) !important;
}

.doodlesBack{
  background-repeat: repeat;
  background-size: 400px 400px;
}

#scaleSlider{
  opacity: 0;
  height: 10px;
  width: 100px;
  display: block;
  cursor: ew-resize;
}

.slider-progress{
  position: absolute;
  height: 10px;
  border-radius: 5px;
  width: 100%;
  pointer-events: none;
  background: var(--LightGray);
}

.sliderContainer{
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  background: var(--MidGray);
}

#scaleValue{
  width: 40px;
  font-size: 14px;
  font-weight: bold;
  text-align: end;
}

.app-img-modal-btns,
.app-img-modal-slider{
  color: var(--MidGray);
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background-color: var(--BlackTrans);
  padding: 5px 10px;
  border-radius: 10px 10px 0 0;
  display: flex;
  gap: 10px;
  align-items: center;
  backdrop-filter: blur(10px);
}

.progress{
  position: relative;
  height: 20px;
  background-color: var(--BlackTrans);
  border: 1px solid var(--BlackTrans);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
  color: var(--BlackTrans);
}

.progress-text{
  margin-left: 6px;
  display: inline-block;
}

.progress-inner{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

.progress-estimate{
  background: #ffa344;
  z-index: 1;
  white-space: nowrap;
  color: #995004;
  border-radius: 5px;
}

.progress-actual{
  background: var(--LightGreen);
  z-index: 2;
  white-space: nowrap;
}

.progress-overrun{
  background: #ff4345;
  z-index: 3;
  white-space: nowrap;
  color: #fff8fe;
  margin-left: 2px;
  border-radius: 5px;
}

#OverdueTasksTable{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 5px;
}

.overdue-task-row{
  display: flex;
  align-items: flex-start;
  padding: 0 5px;
  background: var(--BlackTrans50);
  border-radius: 20px 10px 10px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  height: 40px;
}

.overdue-task-row .assignee-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: block;
  position: relative;
  left: -5px;
}

.overdue-task-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.overdue-task-title{
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  font-style: italic;
  font-weight: bold;
}

#OverdueTasksTableContainer{
  clip-path: inset(0 round 10px);
  background-repeat: repeat;
  background-size: 400px 400px;
}

.notifications-section-title{
  margin: 24px 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--MidGray, #8a919a);
  font-weight: 700;
  padding-left: 4px;
  position: relative;
}

.notifications-section-title:first-child{
  margin-top: 8px;
}

.notification-item{
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  margin: 4px 0;
  border-radius: 10px;
  background: var(--BlackTrans50, rgba(0,0,0,0.2));
  border: 1px solid #23272c;
  transition: all 0.18s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  align-items: stretch;
}

.notification-item:hover{
  background: rgba(30, 35, 42, 0.9);
  border-color: #3a424d;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.notification-item.unread::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #5e6ad2;
}

.notification-item.unread.type-assigned::before{
  background: #22c55e;
}

.notification-item.unread.type-mention::before{
  background: #3b82f6;
}

.notification-item.unread.type-comment::before{
  background: #a855f7;
}

.notification-item.unread.type-other::before{
  background: #6b7280;
}

.notification-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row-top{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
}

.type-badge{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
  background: #151c26;
  border: 1px solid #2a3036;
  white-space: nowrap;
}

.type-assigned .type-badge{
  color: #4ade80;
  border-color: #4ade8040;
  background: #14532d22;
}

.type-mention  .type-badge{
  color: #60a5fa;
  border-color: #60a5fa40;
  background: #1e40af22;
}

.type-comment  .type-badge{
  color: #c084fc;
  border-color: #c084fc40;
  background: #6b21a822;
}

.actor{
  font-weight: 700;
  color: #e0e7ff;
  white-space: nowrap;
}

.phrase{
  color: #cbd5e1;
  opacity: 0.92;
}

.spacer{
  flex: 1 1 auto;
}

.pill-task,
.task-button{
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  background: #2b2a16;
  border: 1px solid #544f1e;
  color: #ffe9a6;
  text-decoration: none;
  max-width: 100%;
  transition: all 0.16s ease;
}

.pill-task:hover,
.task-button:hover{
  background: #3a381f;
  border-color: #756c2a;
  color: #fff3b8;
}

.task-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38ch;
}

.right-col{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: 70px;
  justify-content: space-between;
}

.badge-time{
  font-size: 12px;
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: 6px;
  background: #1e242c;
  border: 1px solid #2f3744;
  white-space: nowrap;
}

.unread-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5e6ad2;
  box-shadow: 0 0 0 3px rgba(94,106,210,0.18);
  flex-shrink: 0;
}

.notification-item{
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(8px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.mark-read-btn{
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid #4a5568;
  color: #94a3b8;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  opacity: 0.7;
}

.notification-item:hover .mark-read-btn{
  opacity: 1;
  border-color: #718096;
  color: #cbd5e1;
  background: rgba(45, 55, 72, 0.3);
}

.mark-read-btn:hover{
  transform: scale(1.08);
}

.mark-read-btn:active{
  transform: scale(0.96);
}

.notification-item:not(.unread) .mark-read-btn,
.notification-item:not(.unread) .unread-dot{
  display: none;
}

.notification-item:not(.unread) .right-col::after{
  content: "✓";
  font-size: 11px;
  color: #6b7280;
  opacity: 0.4;
  margin-top: 2px;
}

.overlay-ngs{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 2px;
  user-select: none;
  pointer-events: none;
}

#org-plan,
#org-until{
  white-space: nowrap;
}

#org-plan{
  padding-right: 3px;
}

#newEmployeePassHint{
  font-size: 11px;
  padding: 0px !important;
  text-align: start;
  color: var(--MidGray);
  font-variant: normal;
}

.settings-lines{
  margin: 20px 0;
}

.settings-pill{
  color: var(--MidGray);
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}

.settings-pill-muted{
  color: var(--MidGray);
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}

.settings-pill,
.settings-pill-muted{
  color: var(--MidGray);
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}

.settings-pill--accent{
  color: #c6db4e;
  border-color: rgba(198,219,78,.7);
}

.settings-pill--ok{
  color: var(--MidGray);
  border-color: rgba(255,255,255,0.18);
}

.settings-pill--warn{
  color: #e67e22;
  border-color: rgba(230,126,34,.6);
}

/* ИНВАРИАНТ виджета настроек: full-width в column-контейнере — ТОЛЬКО элементы ввода
   (input/select/textarea). Метки-пилюли НЕ наследуют ширину инпутов (align-items:stretch
   колонки растягивал их в «большие пустые поля»): рамка на всю ширину = редактируемое поле,
   рамка по контенту = статус/метка. */
.settings-acsess-containers > .settings-pill,
.settings-acsess-containers > .settings-pill-muted{ align-self: flex-start; }

/* Строка-набор пилюль (статусы рядом): подписка, пользователи, история заявок биллинга.
   Новые группы меток в настройках — всегда через этот класс, не голыми детьми колонки. */
.settings-pill-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

.settings-pill--danger{
  color: #e74c3c;
  border-color: rgba(231,76,60,.6);
}

.ng-seg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  user-select: none;
  transform: translateY(-1px);
  max-width: 100%;          /* панель вкладок не выходит за ячейку статусбара */
  min-width: 0;
  flex-wrap: nowrap;        /* вкладки не переносятся на 2-ю строку */
}

/* Статусбар на flex: слоган ужимается, вкладки забирают всё свободное место, версия компактна. */
.ngStatusFlex{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.ngStatusSlogan{
  flex: 0 1 auto;          /* ужимается, отдавая место вкладкам */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  padding-left: 10px;
}
.ngStatusVer{
  flex: 0 0 auto;          /* версия компактна, не сжимается */
  white-space: nowrap;
  opacity: .6;
  padding-right: 10px;
}
/* Статус-сообщение — оверлей над баром справа (fixed → не клипается, не резервирует ширину). */
.ngStatusMsg{
  position: fixed;
  right: 16px;
  bottom: 30px;
  z-index: 60;
  max-width: 42vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(20,22,31,.94);
  border: 1px solid rgba(255,255,255,.10);
  padding: 3px 10px;
  border-radius: 10px;
  pointer-events: none;
}
.ngStatusMsg:empty{ display: none; }

/* Панель вкладок — flex-элемент, забирает доступную ширину; вкладки центрируются. */
#app-Rwindow-tabs{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  /* clip держит вкладки в пределах, но overflow-clip-margin даёт пульс-глоу вкладки (напр. Streams)
     проступить за край, не обрезаясь. Деградирует до обычного clip в старых браузерах. */
  overflow: clip;
  overflow-clip-margin: 14px;
}

.ng-seg-btn{
  border: 0;
  outline: 0;
  cursor: pointer;
  padding: 1px 10px;
  min-width: 45px;
  flex-shrink: 0;          /* обычные вкладки НЕ сжимаются (× не наезжает на текст) */
  white-space: nowrap;     /* обычные вкладки не переносятся, но и не сокращаются (короткие) */
  text-align: center;
  font-size: 13px;
  background: transparent;
  color: rgba(255,255,255,0.65);
  /* док-эффект (фидбэк 16.07): рост из НИЗА вкладки чистым transform — layout-размер
     панели не меняется ни на пиксель, контейнеры виджетов не тянутся */
  position: relative;
  transform-origin: 50% 100%;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
/* невидимое расширение зоны попадания — целиться проще ещё до роста
   (у проектных вкладок обрезается их overflow:hidden — там работает сам рост).
   z-index:-1 ОБЯЗАТЕЛЕН: иначе псевдослой рисуется поверх детей кнопки и
   перехватывает клики по крестику закрытия вкладки. */
.ng-seg-btn::after{
  content: "";
  position: absolute;
  inset: -6px -3px;
  z-index: -1;
}

/* === Вкладки ПРОЕКТОВ (окна пула 03/09/10): лёгкий фиолетовый оттенок + сокращение имени === */
.ng-seg-btn.ngTab--project{
  min-width: 0;            /* можно сжимать → ellipsis вместо клипа/переноса */
  max-width: 170px;
  flex-shrink: 1;          /* сжимаются именно проектные вкладки (а не системные) */
  overflow: hidden;
  background: rgba(150,120,255,0.12);
}
.ng-seg-btn.ngTab--project:hover{
  background: #3d3659;   /* непрозрачный аналог rgba(150,120,255,.18): вкладка ложится поверх соседей */
}
.ng-seg-btn.ngTab--project.active{
  background: rgba(150,120,255,0.26);
  color: rgba(255,255,255,0.95);
}
.ng-seg-btn.ngTab--project.active:hover{
  background: #4a4170;   /* непрозрачный аналог rgba(150,120,255,.26) */
}
.ng-seg-btn.ngTab--project .ng-tab-label{
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Рост СТРОГО из нижней кромки (origin bottom, без translateY — вкладка не отрывается
   от панели). Фон на ховере НЕПРОЗРАЧНЫЙ: увеличенная вкладка ложится поверх соседей,
   полупрозрачный фон просвечивал их сквозь себя. */
.ng-seg-btn:hover{
  transform: scale(1.22);
  z-index: 6;                       /* поверх соседних вкладок, как иконка в доке */
  background: #3b3f47;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.ng-seg-btn.active{
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}
/* активная и так выделена — растёт скромнее, без прыжка */
.ng-seg-btn.active:hover{
  transform: scale(1.12);
  background: #474b53;
}

.ng-seg-btn.first{
  border-radius: 25px 10px 10px 25px;
}

.ng-seg-btn.last{
  border-radius: 10px 25px 25px 10px;
}

.ng-seg-btn.middle{
  border-radius: 3px;
}

.ng-seg-btn.call-live{
  color: var(--LightGreen);
  border-color: var(--LightGreen, #9ae66e) !important;
  box-shadow: 0 0 0 1px var(--LightGreen, #9ae66e) inset;
}

@keyframes ngCallPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(154,230,110,.9);
    border-color: var(--LightGreen, #9ae66e);
  }

  60%{
    box-shadow: 0 0 0 10px rgba(154,230,110,0);
  }

  100%{
    box-shadow: 0 0 0 0 rgba(154,230,110,0);
  }
}

.ng-seg-btn.call-pulse{
  border-color: var(--LightGreen, #9ae66e) !important;
  animation: ngCallPulse 1.4s ease-out infinite;
}

.ng-seg-btn{
  position: relative;
}

.ng-seg-btn .ng-tab-close{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 14px;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  user-select: none;
}

.ng-seg-btn[data-dirty="1"]:hover .ng-tab-close{
  display: flex;
}

.ng-seg-btn[data-dirty="1"] .ng-tab-close{
  display: flex;
}

.ng-seg-btn .ng-tab-close:hover{
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.22);
}

.ng-seg-btn[data-dirty="1"]{
  padding-right: 26px;
}

.ng-seg-btn[data-dirty="0"]{
  padding-right: 10px;
}

.ng-seg-btn[data-window-id="app-Rwindow-01"]{
  padding-right: 10px !important;
}

.ng-seg-btn.solo{
  border-radius: 25px;
  /* единственная вкладка: закрыть нельзя, крестика нет → не резервируем под него место справа */
  padding-right: 10px;
}
.ng-seg-btn.solo .ng-tab-close{
  display: none !important;
}

.owl-carousel{
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
}

.owl-carousel .owl-stage{
  position: relative;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
}

.owl-carousel .owl-stage:after{
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer{
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
}

.owl-carousel-visHiden div{
  overflow: visible !important;
}

.owl-carousel .owl-item,.owl-carousel .owl-wrapper{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
}

.owl-carousel .owl-item{
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item img{
  display: block;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{
  display: none;
}

.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-loaded{
  display: block;
  margin-top: 25px;
}

.owl-carousel.owl-loading{
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden{
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item{
  visibility: hidden;
}

.owl-carousel.owl-drag .owl-item{
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab{
  cursor: grab;
}

.owl-carousel.owl-rtl{
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item{
  float: right;
}

.no-js .owl-carousel{
  display: block;
}

.owl-carousel .animated{
  animation-duration: 1s;
  animation-fill-mode: both;
}

.owl-carousel .owl-animated-in{
  z-index: 0;
}

.owl-carousel .owl-animated-out{
  z-index: 1;
}

.owl-carousel .fadeOut{
  animation-name: a;
}

@keyframes a{
  0%{
    opacity: 1;
  }

  to{
    opacity: 0;
  }
}

.owl-height{
  transition: height .5s ease-in-out;
}

.owl-carousel .owl-item{
  position: relative;
}

article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{
  display: block;
}

audio,canvas,video{
  display: inline-block;
}

audio:not([controls]){
  display: none;
  height: 0;
}

.loader img.im-edge{
  display: none;
}

@supports (-ms-ime-align:auto){
  .loader img.im-edge{
    display: block;
  }

  .loader img.im-normal{
    display: none;
  }
}

.loaderArea{
  background-color: #f2f2f2;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

[hidden]{
  display: none;
}

*{
  box-sizing: border-box;
}

#casing .forum-box select,body,figure{
  margin: 0;
}

audio,iframe,img,object,table,video{
  max-width: 100%;
}

/* Все виджеты лежат над общей анимированной сценой и намеренно прозрачны. Новый iframe
   скрыт до load (класс ставит общий lifecycle в NGSapp.js): так UA-canvas about:blank
   не успевает мелькнуть белым, а вместо него всё время видна подложка приложения. */
iframe{
  background-color: transparent;
  transition: opacity .18s ease;
}
iframe:not(.ngs-frame-ready){
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  iframe{ transition: none; }
}

a:active,a:hover,textarea:focus{
  outline: 0;
}

h1{
  margin: .67em 0;
  font-weight: 900;
  font-size: 2em;
}

img{
  border: 0;
}

svg:not(:root){
  overflow: hidden;
}

fieldset{
  margin: 0;
}

button,input,select{
  margin: 0;
  font-family: inherit;
}

textarea{
  font-family: inherit;
}

input{
  line-height: normal;
  vertical-align: middle;
}

button,select{
  text-transform: none;
}

button,html input[type=button],input[type=reset],input[type=submit]{
  -webkit-appearance: button;
}

html input[type=button]{
  cursor: pointer;
}

button[disabled],html input[disabled]{
  cursor: default;
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
  -webkit-appearance: none;
}

button::-moz-focus-inner,input::-moz-focus-inner{
  padding: 0;
  border: 0;
}

textarea{
  overflow: auto;
  vertical-align: top;
}

table{
  font-size: 100%;
}

#uNetRegF td{
  text-align: left;
}

a,body{
  font-family: Open Sans,sans-serif;
}

body{
  font-size: 14px;
  line-height: 1.5;
  color: #000;
}

hr{
  display: block;
  margin: 10px 0;
  padding: 0;
  height: 0;
  border: 0;
}

#mchatIfm2{
  border-top: 2px solid #dedede;
  border-bottom: 2px solid #dedede;
}

form#MCaddFrm{
  padding: 5px;
}

a.mcm-user-profile:before{
  content: "person";
  font-size: 14px;
  vertical-align: -2px;
  color: var(--White);
  padding: 0;
}

select#mchatRSel{
  font-size: 14px !important;
}

a.mcm-user-profile img{
  display: none;
}

.ulightbox>img{
  max-width: 100%;
}

a{
  color: var(--MidGray);
  text-decoration: none;
  transition: color .2s;
}

.card-title a:hover,.cat-blocks a:hover,.footer-links li a:hover,.sliders-title a:hover,a:hover{
  color: var(--LightGray);
  transition: color .2s;
}

a:active{
  color: var(--White);
  transition: color .2s;
}

.clr:after{
  display: table;
  clear: both;
  content: "";
}

.cont-wrap{
  margin: 0 auto;
}

.eBlock{
  padding: 15px 0;
}

main.promo-landing{
  margin: 0 auto;
  width: 100%;
  padding-bottom: 36px;
}

.info-slide{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 2% 5%;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
}

.info-slide h2{
  color: var(--Orange);
  font-size: 50px;
  line-height: 85px;
  font-variant: all-small-caps;
  margin: 0;
}

.info-slide p{
  color: #fff;
  font-size: 15px;
  line-height: 25px;
  font-variant: small-caps;
  text-align: left;
}

.info-slide .info-bnt{
  display: inline-block;
  background-color: var(--Orange);
  padding: 0px 20px;
  transition: all .3s;
  margin-top: 10px;
  margin-right: 23px;
  color: #fff;
  font-weight: 700;
  line-height: 25px;
  text-transform: uppercase;
  border-radius: 3px;
}

.info-bnt.btn-dark{
  background-color: #000;
}

.img-slide img{
  height: 100%;
  max-height: 640px;
}

.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{
  width: 35px !important;
  height: 26px;
  border: 1px solid #fff;
  background-image: linear-gradient(0deg,rgba(0,0,0,.1) 0,rgba(0,0,0,.1));
  display: block;
  background-color: transparent;
  z-index: 9;
  position: absolute;
  color: #fff;
  padding: 0;
  transition: all .5s;
  right: 20px;
  bottom: 20px;
  border-radius: 10px;
}

.owl-carousel.card-slider .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{
  right: 0;
}

.owl-carousel.card-slider .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-prev{
  right: 65px;
}

.owl-carousel .owl-nav button.owl-next:hover,.owl-carousel .owl-nav button.owl-prev:hover{
  transition: all .5s;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

.owl-carousel.card-slider .owl-nav button.owl-next:hover,.owl-carousel.card-slider .owl-nav button.owl-prev:hover{
  background-color: #fd7f0c;
  color: #fff;
}

.owl-carousel .owl-dots{
  text-align: left;
  padding-left: 20px;
  position: absolute;
  bottom: 20px;
  left: 0;
}

.owl-carousel button.owl-dot{
  background: none;
  color: inherit;
  padding: 0 !important;
  font: inherit;
  width: 25px !important;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 5px;
  margin: 6px;
}

.owl-carousel button.owl-dot.active{
  background-color: #fff;
  border-color: #fff;
}

.text-info{
  width: 40%;
  text-align: left;
}

.holders-block{
  border-top: 1px solid var(--LightGray);
  scroll-margin-top: 50px;
}

.film-block,.holders-block,.mult-block,.premieres-block,.serial-block,.tv-block{
  padding-bottom: 36px;
}

.holders-block h3{
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
  font-variant: small-caps;
}

.holders-block p{
  font-size: 14px;
  line-height: 22px;
  font-variant: small-caps;
}

.sliders-title a{
  color: var(--DarkGray);
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
}

.sliders-title:after{
  content: "";
  width: 60px;
  height: 3px;
  background-color: #fd7f0c;
  display: inline-block;
  margin-bottom: 6px;
}

.quality{
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--LightGray);
}

.top-card-text{
  border-bottom: none;
}

.card-rating,.top-card-text{
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.card-rating{
  height: 35px;
  width: 100%;
  -ms-flex-pack: center;
  justify-content: center;
}

.card-poster{
  height: 241px;
  position: relative;
}

.card-poster img{
  height: 100%;
}

.card-title{
  font-size: 19px;
  font-weight: 700;
  line-height: 20px;
  margin: 0;
  margin-top: 10px;
}

.card-title a{
  color: #000;
}

.circle{
  stroke: #fff;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  -webkit-transition: all .5s ease-in-out;
  opacity: .3;
}

.playBut{
  -webkit-transition: all .5s ease;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  top: 0;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: 0;
}

.playBut .triangle{
  -webkit-transition: all .7s ease-in-out;
  stroke-dasharray: 240;
  stroke-dashoffset: 480;
  stroke: #fff;
  transform: translateY(0);
}

.playBut svg{
  width: 60px;
  height: 60px;
  display: block;
  opacity: 0;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
}

.playBut:hover svg{
  opacity: 1;
}

.playBut:hover .triangle{
  stroke-dashoffset: 0;
  opacity: 1;
  stroke: #fff;
  animation: a .7s ease-in-out;
}

@keyframes a{
  0%{
    transform: translateX(0);
  }

  30%{
    transform: translateX(-5px);
  }

  50%{
    transform: translateX(5px);
  }

  70%{
    transform: translateX(-2px);
  }

  to{
    transform: translateX(0);
  }
}

.playBut:hover .circle{
  stroke-dashoffset: 0;
  opacity: 1;
}

.owl-carousel.card-slider .owl-nav button.owl-next,.owl-carousel.card-slider .owl-nav button.owl-prev{
  top: -57px;
  border: 1px solid #000;
  color: #000;
  background: #fff;
}

.card-chess{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(212px,auto);
  grid-row-gap: 20px;
}

.card-chess li{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(212px,1fr));
}

.img-block img{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.info-block{
  background-color: #dcdee1;
  padding: 15px 5%;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.info-block-top{
  width: 100%;
}

.time-info{
  width: 100%;
  display: flex;
  font-variant: small-caps;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.time-info:before{
  content: "access_time";
  display: inline-block;
  font-variant: normal;
}

.info-block-bottom{
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.grade{
  font-size: 19px;
  font-weight: 700;
  display: block;
  padding: 13px 10px;
  border: 3px solid #fff;
  background-color: #fd7f0c;
}

.genre,.grade{
  font-variant: small-caps;
}

.rating i{
  width: 23px;
  color: #979797;
  cursor: pointer;
  overflow: hidden;
}

.card-rating i{
  width: 16px;
  font-size: 17px;
  color: #fd7f0c;
}

.rating i:hover{
  color: #fd7f0c;
}

#content.promo{
  padding: 0 20px 20px 20px;
}

#casing{
  margin: 0 auto;
  max-width: 1268px;
  position: relative;
}

.wrapper{
  display: flex;
  width: 100%;
}

#content{
  width: 70%;
  padding: 0 0 20px;
}

#content,aside{
  -ms-flex-positive: 1;
  flex-grow: 1;
}

aside{
  width: 30%;
  max-width: 315px;
  background-color: #f5f5f5;
}

.sidebar{
  position: relative;
  float: right;
  padding: 40px 0 70px;
}

.module-shop .methods-list input.checkbox,.module-shop .methods-list input.radio,input[type=checkbox],input[type=radio],label{
  vertical-align: middle;
  font-variant: small-caps;
}

input[type=checkbox],input[type=radio]{
  margin-right: 3px;
}

@supports ((-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none)){
  input[type=checkbox]{
    /* width: 16px !important;
    height: 16px !important; */
    background-color: transparent;
    border: 2px solid var(--LightGray) !important;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    margin: 0 3px 4px 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    min-width: 16px;
    min-height: 16px;
    box-sizing: border-box !important;
  }

  input[type=checkbox]:checked:hover{
    border: 2px solid var(--LightGreen) !important;
  }

  input[type=checkbox]:not([name=act]):checked:before{
    content: "";
    display: block;
    width: 3px;
    height: 9px;
    border: 2px solid transparent;
    border-bottom-color: var(--LightGray);
    border-right-color: var(--LightGray);
    position: absolute;
    top: -3px;
    left: 3px;
    transform: rotate(43deg);
  }

  input[type=radio]:not([name=act]){
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 3px;
    border: 2px solid var(--LightGray);
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    margin: 3px 3px 4px 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    position: relative;
    box-sizing: border-box !important;
  }

  input[type=checkbox]:hover{
    border: 2px solid var(--LightGreen) !important;
  }

  input[type=radio]:hover{
    border: 2px solid var(--LightGreen);
  }

  input[type=radio]:checked{
    border-color: var(--White);
    background: transparent;
  }

  input[type=radio]:not([name=act]):checked:before{
    content: "";
    display: block;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--White);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

  input[type=checkbox]:disabled,input[type=radio]:disabled{
    cursor: default;
    opacity: .4;
    background-color: #ddd;
  }
}

@supports (-ms-ime-align:auto){
  input[type=radio]{
    -webkit-appearance: radio;
    width: auto;
    height: auto;
  }

  input[type=checkbox]{
    -webkit-appearance: checkbox;
    width: auto;
    height: auto;
    min-width: unset;
    min-height: unset;
  }
}

.eVariant input,.eVariant label,input[type=checkbox]{
  vertical-align: middle;
}

button,input[type=button],input[type=reset],input[type=submit]{
  padding: 10px 24px;
  width: auto !important;
  border: 0;
  background-color: var(--MidGray);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease;
}

.info-bnt:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{
  background-color: var(--LightGray);
}

#filter_word+input[type=submit],input.fastNav,input[type=submit].fastSearch{
  padding: 10px !important;
  vertical-align: middle;
}

input[type=button]:active,input[type=reset]:active,input[type=submit]:active{
  background-color: #ff2400;
}

input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled,select:disabled{
  background-color: #9e9e9e;
}

input[type=text].iCode_main_inp{
  padding: 11px 0;
  font-size: 11px !important;
}

.allUsersBtn,.commTd2 input[type=button],.manTd2 input[type=button],.manTdBrief input[type=button],.manTdText input[type=button],input[type=button]#newPhtBt,input[type=button].codeButtons,select.codeButtons{
  width: auto !important;
}

input.button[value="+"],input.button[value=" + "]{
  padding: 10px !important;
}

input[type=button][id^=bid-]{
  margin: 2px 0 2px 3px;
  vertical-align: middle;
}

form[name=fuser] input,form[name=memform] input,form[name=memform] select,table#usch input{
  margin: 4px !important;
  vertical-align: middle;
}

/* input[type=password],input[type=text],textarea{
  padding: 9px;
  margin: 2px 0;
  font-family: Open Sans,sans-serif;
  color: #000;
  border: 1px solid #dedede;
  font-size: 14px;
} */

button:focus,input:focus,select:focus{
  outline: 0;
}

input[id^=qid-]{
  text-align: center;
  vertical-align: middle;
}

textarea{
  width: 100%;
  resize: none;
}

input[type=button]#order-button{
  height: auto;
}

.bx-wrapper,.main-menu li,.main-menu li ul>li{
  position: relative;
}

.bx-controls-direction{
  position: absolute;
  top: calc(50% - 24px);
  width: 100%;
}

.bx-controls-direction a{
  position: absolute;
  font-family: Material Icons;
  font-size: 30px;
  padding: 0 7px;
  border-radius: 50%;
  color: #000;
  z-index: 1;
  transition: all .3s;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

.bx-controls-direction a:hover{
  background: rgba(0,0,0,.5);
  text-decoration: none;
}

#sFltLst{
  background-color: #212121;
  border: 2px solid #969696;
}

.header{
  color: #fff;
  margin: 0 auto;
  position: fixed;
  background-color: var(--BlackTrans);
  z-index: 100;
  width: 100%;
}

.logo-wrap{
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 30%;
}

.logo-lnk{
  transition: color .3s;
  vertical-align: middle;
  text-decoration: none;
  color: var(--LightGray);
  font-weight: 100;
  line-height: 36px;
}

.logo-lnk,.sidetitle{
  font-size: 23px;
  font-style: italic;
  font-variant: small-caps;
}

.sidetitle{
  font-family: Open Sans;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding-bottom: 15px;
}

#content.wide-page{
  float: none;
  width: auto;
  max-width: 100%;
  padding: 30px 0;
}

#sFltLst{
  box-shadow: 0 0 1px rgba(0,0,0,.4);
}

#catmenu{
  width: 70%;
  height: 50px;
  float: left;
}

.main-menu{
  padding: 0;
  width: 100%;
  position: relative;
  display: flow-root;
}

.main-menu ul{
  padding: 0;
  list-style: none;
  width: fit-content;
  margin: auto;
}

.main-menu li{
  display: block;
  float: left;
}

.main-menu .uMenuRoot>li{
  vertical-align: top;
}

.main-menu a.uMenuItemA span,.main-menu a:hover span{
  color: var(--White);
}

.navItemMore:hover .nav_menu_toggler span{
  background-color: var(--White);
}

.main-menu .overflow a.uMenuItemA span{
  border-bottom: none;
}

.main-menu a,.main-menu span{
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
  font-size: 11px;
  color: var(--LightGray);
  transition: all .2s;
}

.main-menu a:hover,.main-menu a:hover span,.soc-block a{
  text-decoration: none;
}

.main-menu .uMenuRoot>li>a,.main-menu .uMenuRoot>li>span{
  padding: 16px 10px;
  vertical-align: middle;
}

.main-menu .fa{
  font-family: FontAwesome;
}

.uMenuItemA{
  cursor: default;
}

.main-menu .overflow li.uWithSubmenu .menu_tog,.main-menu li.uWithSubmenu li.uWithSubmenu .menu_tog{
  right: auto;
  left: 5px;
  transform: rotate(90deg) !important;
  -ms-transform: rotate(90deg) !important;
}

.main-menu .uWithSubmenu li a span,.overflow li a span{
  padding: 0 10px;
}

li:hover>.uWithSubmenu:after{
  border-right-color: #58b0be !important;
}

.main-menu li ul{
  display: none;
  min-width: 110px;
}

.main-menu li ul a,.main-menu li ul li>span{
  padding: 14px 20px;
}

#catmenu ul.uMenuRoot{
  overflow: hidden;
  height: 56px;
  position: relative;
}

ul.overflow li.uWithSubmenu ul{
  left: auto;
  right: 100%;
}

.main-menu #catmenu ul ul ul{
  top: 0;
  left: -220px;
}

#catmenu li.uWithSubmenu a,li.uWithSubmenu a{
  padding-right: 25px;
  position: relative;
}

#catmenu ul li a{
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
}

.main-menu li li{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  min-width: 80px;
  text-transform: none;
}

.main-menu li li>span,.main-menu li li a,.sidebox li.item-parent.over>ul,.sidebox li.parent-li.over>ul{
  display: block;
}

.main-menu li ul li:hover>ul{
  position: absolute;
  top: -10px;
  right: 100%;
  left: inherit;
  z-index: 5;
  display: block;
}

.sidebar .uMenuV ul{
  padding-left: 15px;
}

.nav_menu_toggler{
  padding: 17px;
  cursor: pointer;
  transition: all .5s;
}

.nav_menu_toggler span{
  display: block;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
  margin: 1px 5px;
}

nav ul li.navItemMore{
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  margin-bottom: -1px !important;
  padding-bottom: 1px !important;
}

li.navItemMore{
  width: 40px;
}

form ul>li.notcolumn hr,td.manTdSep{
  display: none;
}

.menu_tog{
  color: #fff;
  position: absolute;
  top: calc(50% - 6px);
  font-size: 16px;
  right: 8px;
  cursor: pointer;
  line-height: .8;
  font-weight: 700;
}

.container{
  max-width: 1268px;
  margin: 0 auto;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
}

.registration-links,.soc-block{
  text-align: right;
}

.registration-links,header .soc-block{
  white-space: nowrap;
}

.registration-links{
  padding-left: 20px;
}

.registration-links a{
  font-size: 12px;
  padding-left: 15px;
}

.soc-block span{
  letter-spacing: normal;
}

.soc-block{
  letter-spacing: 12px;
}

.soc-block span,input#filter_word,input#sfSbm{
  vertical-align: middle;
}

.soc-block a:hover{
  color: var(--White);
}

.soc-block a{
  color: var(--LightGray);
  width: 25px;
  height: 25px;
  display: inline-flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--LightGray);
  border-radius: 7px;
}

.switchActive{
  min-width: 25px;
  display: inline-block;
  background-color: transparent;
  line-height: 25px;
  height: 25px;
  padding: 0 5px;
}

.switchBack,.switchDigit,.switchNext{
  color: var(--White);
  text-align: center;
}

.pgSwchA,.swchItemA,.switchBack,.switchDigit,.switchNext{
  min-width: 25px;
  display: inline-block;
  background-color: transparent;
  line-height: 25px;
  height: 25px;
  padding: 0 5px;
}

.pgSwchA,.swchItem,.switchActive1,.switchBack1,.switchDigit1,.switchNext1{
  text-align: center;
}

.pgSwch,.swchItem,.swchItem1,.swchItemA1,.switchActive1,.switchBack1,.switchDigit1,.switchNext1{
  min-width: 25px;
  color: #000;
  display: inline-block;
  line-height: 25px;
  height: 25px;
  padding: 0 5px;
}

.swchItem:hover{
  color: #000;
}

.pgNext span,.pgPrev span,a.swchItem:first-child span,a.swchItem:last-child span{
  font-family: Material Icons;
  position: relative;
  font-weight: 400;
  height: 36px;
  color: #fff;
  font-size: 0 !important;
  font-feature-settings: "liga" 1;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.pgNext span:after,a.swchItem:last-child span:after{
  content: "keyboard_arrow_right";
}

.pgPrev span:after,a.swchItem:first-child span:after{
  content: "keyboard_arrow_left";
}

.pgNext span:after,.pgPrev span:after,a.swchItem:first-child span:after,a.swchItem:last-child span:after{
  display: inline-block;
  font-size: 20px;
  position: absolute;
  right: -11px;
  top: -14px;
  line-height: normal;
  font-family: Material Icons;
  color: #000;
  font-feature-settings: "liga" 1;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.swchItem1{
  color: var(--White);
  margin-left: -5px;
  transition: all .3s;
}

.pgSwchA,.swchItem:hover,.swchItemA,.swchItemA1,.switchActive{
  transition: all .3s;
  text-align: center;
  border-bottom: 3px solid var(--White);
}

div#pagesBlock1 b{
  border: 1px solid var(--White);
}

.content .catPages1{
  padding: 10px 0;
}

section[class^=module-]{
  padding: 0 20px 20px 20px;
}

.gTable{
  padding: 0 0 15px;
}

.eTitle,.eTitle a{
  font-size: 28px;
  font-weight: 900;
}

.eTitle{
  color: #000;
  line-height: 1.15;
  word-break: break-word;
}

.eTitle a,.module-shop a.shop-item-title{
  color: #000;
  transition: color .3s;
}

.calMdayIsA .calMdayLink:hover,.eTitle a:hover{
  text-decoration: none;
  color: var(--White);
}

.eAttach{
  padding: 10px 0;
}

.module-stuff .eDetails{
  border: none;
}

.eMessage,.eText{
  font-size: 15px;
  line-height: 1.7;
  word-break: break-word;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.eDetails{
  border-bottom: 1px solid #dedede;
  padding: 10px 0 20px;
}

.eMessage img,.eText img{
  max-width: 100%;
}

.e-add,.e-author,.e-author-phone,.e-category,.e-comments,.e-date,.e-loads,.e-placed,.e-rating,.e-reads,.e-redirects,.e-tags{
  position: relative;
  padding: 0 20px 0 0;
  display: inline-block;
}

.e-add:before,.e-author-phone:before,.e-author:before,.e-category:before,.e-comments:before,.e-date:before,.e-loads:before,.e-placed:before,.e-reads:before,.e-redirects:before,.e-tags:before,.mcm-user-profile:before,.time-info:before{
  color: #000;
  font-family: Material Icons;
  font-size: 16px;
  font-weight: 400;
  padding-right: 3px;
  vertical-align: middle;
  display: inline-block;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

.e-redirects:before{
  content: "";
}

.e-reads:before{
  content: "";
}

.e-category:before{
  content: "";
}

.e-author-phone:before{
  content: "";
}

.e-tags:before{
  content: "";
}

.e-author:before{
  content: "";
  top: -2px;
  left: -3px;
}

.e-add:before{
  content: "";
}

.e-date:before,.e-placed:before{
  content: "";
}

.e-loads:before{
  content: "";
}

.e-comments:before{
  content: "";
}

.ed-value u{
  text-decoration: none;
}

.ed-value a[title=E-mail],.ed-value a[title=Web-site]{
  margin-left: 7px;
}

.ed-sep,.ed-title{
  display: none;
}

.eVariant label{
  padding-left: 5px;
}

#cntContaineroEditdscr,#cntContaineroEditmessage{
  padding-top: 10px !important;
}

.content .cMessage{
  font-size: 1em;
  line-height: 1.5;
}

#allSmiles{
  font-size: .86667em;
}

#addEntForm,#goodsform{
  padding-bottom: 70px;
}

.cMessage ul{
  overflow: hidden;
  margin: 0;
  list-style-position: inside;
}

.cMessage .user_avatar{
  display: block;
  float: left;
  overflow: hidden;
  margin: 0 6px 6px 0;
  padding: 4px;
  border: 1px solid #e3e3e3;
}

.cat-blocks.gTable:before,.wysibb-body{
  border: 0;
}

ul.uz{
  margin: 4px 0;
}

#sidebar{
  padding: 20px;
}

.sidebox{
  padding: 15px;
  box-shadow: 3px 4px 10px rgba(0,0,0,.15);
  border: 1px solid #ededed;
  background-color: #fff;
  margin-bottom: 20px;
}

.sidebox ul{
  list-style: none;
  text-align: center;
  padding: 0;
}

.sidebox-ttl{
  padding-bottom: 15px;
  text-align: center;
  font-size: 1.5385em;
  line-height: 1.2;
}

.sidebox .uMenuRoot,ul.uz{
  list-style: none;
}

.ulb-mid{
  color: #000;
}

.calMonth{
  padding-bottom: 15px;
}

.calWday,.calWdaySe,.calWdaySu{
  font-weight: 700;
}

.calMday{
  padding: 5px 7px;
}

.calMdayIsA{
  cursor: pointer;
}

.calMdayA,.calMdayIsA{
  padding: 5px 7px;
  color: #fff;
  background-color: var(--White);
  transition: background-color .15s ease;
}

.calMdayIsA:hover a{
  color: var(--White);
}

.module-news td.archiveDateTitle{
  padding: 35px 0 10px;
}

.module-news>table tr:last-of-type td.archiveEntryTitle{
  padding-bottom: 70px;
}

td.archiveDateTitle hr{
  display: none;
}

.calMdayIsA .calMdayLink{
  font-style: normal;
  color: #fff;
}

.archUl{
  margin: 0;
  padding: 0;
  list-style: none;
}

#mchatBtn{
  width: auto !important;
  margin: 5px 0;
}

#allSmiles a,.cat-blocks.gTable div{
  font-size: 14px !important;
}

.cat-blocks a{
  color: #000;
}

.pollButton{
  padding: 10px 0;
}

.pollLnk a{
  white-space: nowrap;
}

.cat-blocks.gTable{
  margin-top: 0;
  border-top: none;
}

.sidebar .gTableTop,.sidebar .gTableTop a{
  color: #61b3a3;
}

.cat-blocks.gTable .forumNameTd{
  border-top: none;
  border-bottom: none;
}

.sidebar.forumNameTd,.sidebar .gTableSubTop,.sidebar .gTableTop{
  border: 0;
  background-color: transparent;
}

.sidebar li,.sidebar ul{
  list-style-position: inside;
}

header input.queryField{
  padding: 8px 48px 9px 9px;
  margin: 0;
  font-size: 14px;
}

header input.searchSbmFl{
  display: none;
  overflow: hidden;
  margin: 0 !important;
  padding: 7px 24px;
  font-size: 18px;
  border: 0 !important;
  background: 0 0;
  text-indent: -10000px;
}

header input.searchSbmFl:hover{
  background: 0 0;
}

.search-m-bd{
  display: none;
}

.header-srch{
  float: right;
  width: 30%;
  position: relative;
  padding: 5px 0 10px;
  overflow: hidden;
}

.header-srch .searchForm{
  position: absolute;
  width: 90%;
  right: -100%;
  transition: all .5s;
}

.header-srch.open-search .searchForm{
  right: 10%;
  transition: all .5s;
}

#show-main-search{
  display: block;
  float: right;
  padding-top: 10px;
  width: 18px;
  height: 30px;
  cursor: pointer;
  transition: opacity .5s ease;
  opacity: 1;
  visibility: visible;
  color: #fff;
  font-size: 20px;
}

#show-main-search:hover{
  color: var(--LightGray);
}

.open-search #show-main-search{
  opacity: 0;
  visibility: hidden;
}

#close-main-search{
  font-size: 28px;
  color: #fff;
  display: block;
  position: absolute;
  right: -100%;
  transition: all .5s;
  cursor: pointer;
}

#close-main-search:hover{
  opacity: .8;
}

.open-search #close-main-search{
  transform: scale(1) rotate(0deg);
  padding-top: 5px;
  right: -5;
}

.schBtn{
  position: absolute;
  right: 0;
  top: 2px;
  width: 48px;
}

.schQuery .queryField{
  width: 100%;
  max-width: 300px;
  box-shadow: 3px 4px 10px rgba(0,0,0,.15);
  border: 0px solid #ededed;
  border-radius: 10px;
  height: 25px;
  margin-top: 7px;
  margin-right: -58px;
  background-color: var(--LightGray);
}

.searchForm form{
  position: relative;
}

.header .schBtn{
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  margin-right: -30px;
  display: none;
}

.schBtn:after{
  content: "search";
  font-family: Material Icons;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: calc(50% - 17px);
  font-size: 24px;
  line-height: 35px;
  cursor: pointer;
  color: #a8a8a8;
  pointer-events: none;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

.schBtn:hover:after{
  color: #fff;
}

.top-header .schBtn{
  right: 0;
  top: 0;
  width: 45px;
  height: 45px;
}

#content form[action$="search/"] table,.footer{
  width: 100%;
  background-color: var(--BlackTrans);
}

.footer-info{
  color: #979797;
  line-height: 16px;
  font-variant: small-caps;
  padding: 25px 0 17px;
  margin: 0;
  border-bottom: 1px solid #fff;
}

.footer-links{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: start;
  color: #fff;
}

.cont-wrap.clr.ft-top{
  padding-bottom: 0;
}

.footer-links li:not(:last-child){
  padding-right: 20px;
}

.footer-links li a{
  color: #fff;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
}

.footer .cont-wrap{
  max-width: 1268px;
  margin: 0 auto;
  padding: 30px 20px;
  color: #fff;
}

.user-box{
  -ms-flex-align: center;
  align-items: center;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-gap: 10px;
}

.user-ttl{
  padding-bottom: 5px;
  border-bottom: 1px solid #dedede;
}

.sidebox .card-title{
  font-size: medium;
}

.sidebox .img-block{
  width: 100%;
  height: 170px;
  position: relative;
}

.svg-button{
  display: none;
}

.soon-sidebar{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(115px,1fr));
  grid-auto-rows: minmax(190px,auto);
  gap: 12px;
}

.footer-left{
  float: left;
}

.login-b,select#user-filter{
  float: right;
}

.login-b{
  clear: right;
  padding-top: 5px;
}

.forumContent{
  padding: 30px;
  margin: 30px 0;
  background: #fff;
}

.forumContent .pageinvoices a.fNavLink{
  font-weight: 900;
}

.forumContent .swchItem,.forumContent .switchBack,.forumContent .switchDigit,.forumContent .switchNext,.module-shop a.shop-item-title:hover{
  color: var(--White);
}

.forumContent.swchItemA,.forumContent .switchActive{
  border-bottom: 3px solid var(--Orange);
}

.forumDescr{
  font-size: 80%;
}

.fFastSearchTd{
  position: relative;
}

input[type=text].fastSearch{
  padding-right: 10px !important;
  color: #6c6c6c;
  font-style: normal;
  vertical-align: middle;
}

.uPM{
  margin-right: 15px;
}

#frM60{
  padding-top: 10px;
}

.gTable{
  border-spacing: 0;
  border-collapse: collapse;
}

#content .gTableTop{
  font-size: 1.5em;
  font-weight: 900;
}

.forum-box .gTableTop a{
  font-weight: 900;
}

.forum-box .gTableTop{
  height: 40px;
  color: #000;
  font-weight: 900;
  font-size: 22px;
  border-bottom: 2px solid #dedede;
}

#subscribe{
  padding-right: 10px;
}

.forumContent .gTableRight{
  padding: 3px 0;
}

#content .gTableSubTop{
  height: 38px;
  border-top: 2px solid #dedede;
}

.gTableSubTop:first-child{
  border-left: 0;
}

.forumIcoTd,.forumLastPostTd,.forumNameTd,.forumPostTd,.forumThreadTd,.threadAuthTd,.threadIcoTd,.threadLastPostTd,.threadNametd,.threadPostTd,.threadViewTd{
  padding: 10px 12px;
  border-top: 1px solid #dedede;
}

.forumIcoTd,.threadIcoTd:first-child{
  border-left: none;
}

.threadsDetails{
  border-top: 2px solid #969696;
}

.funcBlock{
  color: #000;
}

#filter_by{
  margin-right: 5px;
}

.gTableSubTop{
  padding-right: 12px;
}

.forum-box .postBottom,.forum-box .postTdInfo,.forum-box .postTdTop,.posttdMessage{
  padding: 10px 0;
}

.forumOnlineBar,.threadsDetails{
  padding: 5px;
}

#addform input[type=checkbox]{
  margin-right: 3px;
}

.switches{
  margin-bottom: 3px;
}

.middle .postTable{
  border-spacing: 0;
}

.middle .postTable,.postTdTop{
  border-bottom: 1px solid #96969652;
}

.postBottom{
  border-top: 1px solid #96969652;
}

.uplFileFl{
  margin-top: 5px;
  margin-left: 12px !important;
}

.forum-box table.postTable{
  border-collapse: collapse;
}

table.postTable{
  border-bottom: 3px solid gray;
}

.forum-page .postBottom>table>tbody>tr>td:last-child{
  width: 4% !important;
}

.gTableLeft,.postTdInfo{
  padding-left: 5px;
  text-align: center;
}

.forumMemNum,.forumMemSwch{
  padding: 5px;
}

#frM57,#frM58{
  padding-top: 5px;
}

#frM60,.searchSubmitFl,.userSchFrm{
  padding-bottom: 5px;
}

.searchQueryFl{
  margin-bottom: 5px;
}

#thread_search_button{
  margin-top: 0 !important;
}

.popup{
  padding: 0 45px 30px;
  background: #fff;
}

.popup-ttl{
  font-size: 22px;
  padding: 10px 0;
  line-height: 2;
}

.popup-bd{
  position: relative;
  padding: 30px 20px;
}

.statusOffline{
  color: #dd6e47;
}

#block22,.popup-bd #usch{
  padding: 15px 0;
}

#block25 hr{
  margin-top: 15px;
}

.popup-bd .user_avatar{
  display: block;
  margin-right: 30px;
  padding: 16px;
  border: 2px solid #d7d7d7;
}

#uNMenuDiv1{
  padding-right: 0px;
}

.x-scroll{
  overflow-x: auto;
}

#transactions_cont::-webkit-scrollbar,.x-scroll::-webkit-scrollbar{
  height: 7px;
}

#transactions_cont::-webkit-scrollbar-track,.x-scroll::-webkit-scrollbar-track{
  background-color: rgba(0,0,0,.25);
}

#transactions_cont::-webkit-scrollbar-thumb,.x-scroll::-webkit-scrollbar-thumb{
  background-color: var(--White);
}

.x-unselectable{
  position: relative;
}

#sFltLst,#uCatsMenu7{
  left: 0 !important;
  top: 100% !important;
}

.loginformMobile,.mcBBcodesBtn img,.mcManageBtn img,.mcReloadBtn img,.mcSmilesBtn img,li.uWithSubmenu.item-parent ul li.uWithSubmenu.item-parent i{
  display: none;
}

.forum-box{
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
}

#cont-shop-invoices{
  margin: 10px 0;
}

.fil_togg_holder{
  background: var(--White);
  color: #fff;
  display: inline-block;
  padding: 8px 8px 5px 12px;
  cursor: pointer;
  transition: all .3s;
}

.fil_togg_holder:hover{
  background: #fd7f0c;
}

#content input#invoice-form-export,#content input#invoice-form-print,#content input#invoice-form-send-el-goods{
  font-family: Material Icons;
  font-size: 20px;
  padding: 8px 30px;
  vertical-align: middle;
  text-transform: none;
  margin-right: 7px;
  width: 48px;
  overflow: hidden;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

.fil_togg_wrapper+hr+table tr{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.fil_togg_wrapper+hr+table td{
  display: inline-block;
  width: 50% !important;
  text-align: left !important;
}

input[name=user-name]{
  max-width: 192px;
}

table.filter_table td,table.status_table td{
  padding: 0 4px;
}

#cont-shop-invoices h1{
  margin: 15px 0;
}

#casing table.status_table td select:first-child{
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 0 !important;
}

#casing table.filter_table td input:first-child,#casing table.filter_table td select:first-child,#casing table.status_table td input:first-child{
  margin-left: 0 !important;
}

.fil_togg_wrapper+hr+table td:nth-child(2n){
  text-align: right !important;
}

div#cont-shop-invoices .status_table select,div#cont-shop-invoices>div:first-child form,table.filter_table td input:not(:first-child),table.filter_table td select:not(:first-child){
  margin-left: 4px !important;
}

#invoice-table{
  margin-bottom: 40px;
}

div#cont-shop-invoices .fil_togg_wrapper{
  margin-left: 4px;
  margin-bottom: 10px;
}

ul[id^=uStarRating]{
  max-width: 100%;
  overflow: hidden;
}

#content .queryField{
  margin: 0;
  vertical-align: middle;
}

div#cont-shop-invoices>.filter_table{
  display: none;
}

#shop-basket{
  text-align: center;
}

#cont-shop-stock input{
  margin-bottom: 5px;
}

.eDetails ul[id^=uStarRating]{
  margin: 2px 0;
}

#forum_filter{
  padding: 5px 0 15px;
}

.forum-box .gTableSubTop{
  padding: 10px 0 !important;
}

a.forum,a.threadLink{
  font-size: 18px;
  font-weight: 900;
}

.sidebox .gTable:not(#invoice-table):not(#shop-price-list) .gTableTop,.sidebox .gTableSubTop{
  padding: 5px 0 !important;
}

.gTableTop #subscribe,.gTableTop #subscribe a,.gTableTop a.subscribe_forum{
  font-size: 13px;
}

#thread_search_field{
  width: calc(100% - 55px) !important;
  max-width: 223px !important;
  margin: 0 4px 6px !important;
}

.forumModerFuncsT{
  padding-top: 5px;
}

#casing .module-shop table.filter_table .pageinvoices input,#casing .module-shop table.filter_table .pageinvoices select{
  margin: 5px 0;
}

form#shop-price-form{
  overflow-x: auto;
  padding-bottom: 30px;
}

#casing form#addEntForm span[id*=iCode]:empty{
  display: none;
}

.module-video .btn-title{
  white-space: normal;
}

#casing #videocontent_comm a{
  color: #6277d9 !important;
}

#casing #videocontent_comm a:hover{
  color: var(--White) !important;
}

.cont-wrap .category_row,.module-video .vep-descr-block,.module-video .vep-details span,.module-video .vep-tags-block{
  font-size: 14px;
}

.pagesBlockuz,.pagesBlockuz1{
  display: inline-block;
}

.pagesBlockuz2{
  margin-left: 10px;
}

.swchItemDots{
  margin-right: 5px;
}

.module-photo .ph-details{
  margin: 10px 0 5px;
}

.wysibb *,a.login-with i,form#uf-register :not(#fCode),ul.shop-tabs.with-clear,ul.shop-tabs.with-clear li{
  box-sizing: content-box;
}

.opt_vals .gTableSubTop{
  padding-left: 0;
  background: 0;
  height: 48px;
}

#goods-options-list .gTableSubTop,.module-stuff .eTitle+hr{
  border-bottom: none;
}

.module-shop #goods-options-list label{
  word-break: break-word;
}

.module-stuff .eDetails{
  padding: 5px 0 0 !important;
}

.calTable td,.module-shop #cont-shop-invoices td.col_payment_id{
  text-align: center !important;
}

.sidebox #mchatMsgF{
  min-height: 80px;
}

.entTd .eDetails{
  margin: 0 0 40px !important;
}

.gTable select{
  margin: 0 0 2px;
}

#invoice_cont,#order-table,.ucf-table{
  overflow-y: auto;
}

#invoice_cont,#order-table,.gDivRight,.ucf-table{
  width: 100%;
  margin: 0 0 1em;
}

#casing .module-stuff input[name=szh],#casing .module-stuff input[name=szw]{
  width: 60px !important;
  margin-right: 3px;
}

#casing .module-stuff input[name=szh]{
  margin-left: 3px;
}

.uForm{
  padding: 22px 0;
}

.uComForm-inner li.ucf-options{
  margin-right: 40px !important;
}

#casing .sidebox .recaptcha-wrapper{
  float: left;
  margin: 5px 0 5px -3px;
  -webkit-box-shadow: -1px -1px 4px 0 rgba(0,0,0,.08);
}

form[name=mform] table td:first-child:not([align=center]){
  text-align: right;
  padding-top: 3px;
  padding-right: 8px;
}

input.button[value="+"]{
  padding: 10px 13px !important;
}

.module-photo #files:hover+.fakefile input{
  background: #fd7f0c;
}

#addPhtFrm #uCatsMenu7,td.u-comboeditcell input[id^=catSelector].x-selectable{
  max-width: 360px;
}

[id^=catSelector]{
  padding-right: 40px !important;
  margin-bottom: 0 !important;
}

#casing .forum-box .gTableBody1 select[name=o1],#casing .forum-box .gTableBody1 select[name=o2],#casing .forum-box .gTableBody1 select[name=o3],#casing .forum-box input[name=user]{
  min-width: 200px;
}

#casing .forum-box .gTableBody1 select[name=o1],#casing .forum-box .gTableBody1 select[name=o3]{
  margin: 3px 2px 3px 0;
}

#casing form#addEntForm span+input[type=file]{
  margin-left: 10px;
  margin-bottom: 0;
}

.module-video .size2-parent{
  padding-right: 0;
}

.module-gb input[type=text],.module-video #f_aname{
  width: 100%;
}

#MCaddFrm table{
  border-spacing: 0;
}

.cMessage{
  word-wrap: break-word;
  word-break: break-word;
}

.mcBBcodesBtn:before,.mcManageBtn:before,.mcReloadBtn:before,.mcSmilesBtn:before{
  font-family: Material Icons;
  font-size: 21px;
  font-weight: 400;
  display: inline-block;
  transition: all .3s;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

.mcReloadBtn:before{
  content: "";
}

.mcSmilesBtn:before{
  content: "";
}

.mcBBcodesBtn:before{
  content: "";
}

.mcManageBtn:before{
  content: "";
}

#content .queryField{
  width: 70% !important;
}

#content form[action$="search/"] table td{
  white-space: normal !important;
}

.module-tests .eTitle{
  border-bottom: none;
  padding-bottom: 15px;
  margin-bottom: 0 !important;
}

.module-tests fieldset{
  border: 2px solid #969696;
}

.module-tests .eMessage{
  padding-bottom: 20px;
  border-bottom: 2px solid #969696;
}

.module-shop hr,.module-tests #testBlockD .eMessage,.popupbody hr{
  border-bottom: none;
}

#casing select:not([multiple]){
  max-height: 39px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff calc(100% - 10px) 50% no-repeat;
}

select::-ms-expand{
  display: none;
}

#casing select{
  max-width: 300px;
  color: #000;
  cursor: pointer;
  margin: 3px 2px 3px 0;
  padding: 11px 35px 10px 10px;
  border: 1px solid #dedede;
  vertical-align: middle;
}

#casing #sidebar select{
  max-width: 243px;
}

#casing .cat-tree u,#casing .sidebox .cat-tree i{
  position: relative;
  background: none;
  padding-left: 20px;
}

#sidebar .cat-tree i:after{
  content: "play_circle_filled";
  font-style: normal;
}

#sidebar u.plus:after{
  content: "add_circle";
}

#sidebar u.minus:after{
  content: "remove_circle";
}

#casing .sidebox .cat-tree li{
  padding: 7px 0 !important;
}

#sidebar i:after,#sidebar u:after{
  font-family: Material Icons;
  position: absolute;
  height: 100%;
  width: 100%;
  color: var(--Orange);
  left: 0;
  top: calc(50% - 17px);
  font-size: 15px;
  line-height: 35px;
  cursor: pointer;
  pointer-events: none;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

#casing select[multiple]{
  padding: 0 0 0 10px;
}

#casing #uf-birthday-d,#casing #uf-birthday-m,#casing #uf-birthday-y,#casing input#cdate1,#casing input#date1,#casing input#date2,#casing input#invoice_sum1,#casing select#sdate,#casing select[name=bd],#casing select[name=bm],#casing select[name=by],#casing select[name=da],#casing select[name=ha],#casing select[name=ma],#casing select[name=mia],#casing select[name=pda],#casing select[name=period],#casing select[name=pha],#casing select[name=pma],#casing select[name=pmia],#casing select[name=pya],#casing select[name=time]{
  margin: 7px 4px;
}

#casing form#uf-register .uf-field select:first-of-type,#casing select[name=by],form#addEntForm li select:first-child{
  margin-left: 0;
}

.calMday,.calMonth,.calWday,.calWdaySe,.calWdaySu{
  width: auto !important;
  text-align: center !important;
}

.sidebox td.calMonth>a:first-child+a+a,.sidebox td.calMonth a:first-child{
  display: block;
  text-align: center;
  width: 15px;
  height: 20px;
  line-height: 20px;
  top: 9px;
  right: 10px;
  font-size: 15px;
}

.sidebox td.calMonth a:first-child+a{
  font-size: 14px;
  left: 10px;
  top: 0;
  display: inline-block;
  height: 40px;
  line-height: 40px;
}

.sidebox td.calMonth a:first-child{
  right: 30px;
}

.sidebox td.calMonth a{
  position: absolute;
}

.sidebox td.calMonth{
  position: relative;
}

.calendarsTable td{
  padding: 9px !important;
}

.recaptcha-wrapper{
  margin: 10px 0;
}

label.captcha-block{
  display: block;
  padding: 10px 0;
}

form#uf-register .uf-text[type=password]{
  width: 85%;
  padding-left: 5px;
  padding-right: 5px;
}

#order-table>table{
  border-spacing: 0;
  margin-bottom: 20px;
}

#casing #order-table .order-item td{
  border-bottom: 2px solid #969696;
  min-height: 50px;
  height: 55px;
  border-spacing: 0;
}

#order-table table td{
  padding: 10px 3px;
  white-space: nowrap;
}

#casing #order-table .order-head th{
  border-bottom: 2px solid #424242;
  font-size: 13px;
  padding: 0 8px;
  font-weight: 700;
  line-height: 25px;
}

#cont-shop-checkout .order-item-sum{
  padding: 0 4px;
}

#shop-price-list .gTableSubTop:first-child{
  font-size: 1.3em !important;
}

.module-shop #cont-shop-checkout h2{
  font-size: 22px;
  font-weight: 900;
  padding: 15px 0 5px;
}

.module-shop #total-sum td{
  padding: 5px 20px 10px 10px;
  border: 2px solid #969696;
  border-left: 4px solid #424242;
}

.module-board .catsTd,.module-dir .catsTd,.module-faq .fastLink{
  padding: 3px 0;
}

.module-faq div[id^=entryID]:not(:last-of-type) .eBlock{
  border-bottom: 2px solid #969696;
  padding: 15px 0;
}

.inner.custom-mchat{
  margin: 0 -15px;
}

#MCaddFrm select#mchatRSel{
  padding: 9px 30px 9px 10px;
}

#casing #forum_filter #filter_by{
  margin: 10px 6px 13px 0;
}

#casing select.fastNav,#casing select:not([multiple]).moderOptions,.forum-box input.fastSearch[type=text]{
  margin-right: 4px;
}

.module-gb .cDetails{
  border-bottom: 2px solid #969696;
  padding-bottom: 15px;
  font-weight: 700;
}

.archiveCalendars .calendarsTable .calTable td{
  display: table-cell !important;
  width: auto !important;
}

.uTable{
  border-spacing: 0;
}

.uTable .myWinSuccess,.uTable .uPM{
  padding: 0 20px 0 0;
}

.module-index div[align=center],.popupbody div[align=center]{
  overflow: auto;
}

.arrow-menu-icon{
  font-size: 16px;
  position: absolute;
  top: 2px;
}

.sidebox #uidLogForm .loginButton{
  margin: 5px 0;
}

.sidebox .ut-menu.ut-vmenu li a:before{
  content: none;
}

.sidebox .ut-menu.ut-vmenu li.item-parent em{
  left: -20px;
  top: 2px;
}

.module-shop .goods-list td[width="150"]+td,.module-shop td.shop-itempage-images+td{
  padding: 0 0 0 10px;
}

a.shop-item-titleб .shop-item-price span{
  font-size: 24px !important;
}

.product-card .product-tail{
  background-color: #ffffff;
}

.uTable td{
  padding: 10px 20px;
  border-bottom: 2px solid #969696;
  white-space: nowrap;
}

.calMday,.calMonth,.calWday,.calWdaySe,.calWdaySu{
  display: table-cell !important;
}

.eVariant{
  padding: 5px;
}

#shop-basket li{
  padding-left: 50px !important;
}

#casing table.catalog h3{
  margin: 10px 0 0 60px;
}

.module-shop a.shop-item-title{
  font-size: 24px;
  font-weight: 900;
  transition: all .3s;
}

.module-shop .shop-itempage-price{
  display: block;
  line-height: 40px;
}

.module-shop .shop-tabs li.postRest1{
  border-bottom: 1px solid #fff;
  font-weight: 600;
}

.module-shop .shop-item-price{
  font-size: 24px;
  font-weight: 900;
}

.module-shop .newprice{
  color: var(--White);
}

.module-shop .shop-tabs a:hover{
  text-decoration: none !important;
}

#content .shop-itempage-price{
  font-size: 32px;
}

.module-shop .goods-list{
  padding: 10px 0 40px;
}

#order-table input[type=text]{
  margin: 0 2px;
}

.module-shop h2{
  margin: 10px 0;
}

.module-shop .shop-itempage-viewed-title,.module-shop h2{
  border-bottom: 1px solid #dedede;
  font-weight: 900;
}

#casing .module-shop table.catalog h3 a{
  font-size: 18px;
  font-weight: 900;
  transition: all .3s;
  word-break: break-word;
}

#image-list .inner{
  box-sizing: content-box;
}

.parent-li em,.sidebox .gTableTop[onclick*=shopCatBlocks]:before{
  content: "+";
  background-color: var(--White);
  color: #fff;
}

.parent-li em,.sidebox .gTableSubTop:before,.sidebox .gTableTop[onclick*=shopCatBlocks]:before{
  width: 20px;
  height: 20px;
  border: 1px solid var(--White);
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  line-height: 20px;
  transition: all .2s ease;
  cursor: pointer;
}

.sidebox .gTableSubTop:before{
  content: "-";
  background-color: transparent;
}

.sidebox .cat-blocks .gTableSubTop,.sidebox .cat-blocks .gTableTop{
  transition: all .3s;
}

.sidebox .cat-blocks .gTableTop:hover{
  color: #fd7f0c;
}

.sidebox .cat-blocks li{
  padding: 5px 0 5px 32px;
}

.gDivRight{
  padding: 15px 0;
}

.forumIcoTd,.forumLastPostTd,.forumNameTd,.forumPostTd,.forumThreadTd{
  border-bottom: 1px solid #dedede;
}

div#shop-basket ul li{
  padding-left: 45px;
  background-size: 40px !important;
  background-position: 0 50% !important;
  margin-bottom: 15px;
}

.codeButtons,.ucf-bb .codeButtons{
  margin: 0 3px 3px 0 !important;
}

label#uf-terms-label{
  white-space: pre-wrap;
}

.forumContent .ucoz-forum-post-image-interface{
  margin-left: 20px;
}

.entryAttachSize{
  padding-left: 10px;
}

#files{
  height: 42px;
  margin-bottom: 10px;
}

#files:hover{
  cursor: pointer;
}

form ul.xPhtBlock .xPhtAction>span button{
  margin-left: 4px;
}

.module-photo li.notcolumn.xPhtAction>span>button{
  display: inline-flex;
  min-width: 30px;
  min-height: 30px;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

.module-photo form ul.xPhtBlock .xPhtAction>span,.module-photo li.notcolumn.xPhtAction [data-toggle]:before{
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.module-photo li.notcolumn.xPhtAction [data-toggle]:before{
  font-family: Material Icons;
  font-size: 24px;
  content: "keyboard_arrow_down";
  color: #fff;
  background: unset;
  -ms-flex-pack: center;
  justify-content: center;
}

.module-photo li.notcolumn.xPhtAction [data-clear]:before,.module-photo li.notcolumn.xPhtAction [data-close]:before{
  font: unset;
  color: #fff;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

#forumPollF .pollQuestion{
  font-weight: 900;
  padding: 5px 0;
}

#forumPollF .pollAnswer{
  padding: 3px 0;
}

#forumPollF{
  padding: 15px 0 !important;
}

span[class^=sortBlock]{
  line-height: 47px;
}

.shop-spec-filter-wrapper{
  overflow: hidden;
}

.module-shop td[style="white-space:nowrap; "]{
  white-space: normal !important;
}

.gphoto,.smiles img{
  max-width: inherit;
}

#casing .spec-value{
  white-space: normal;
}

#baseLogForm tr td:first-child{
  padding-right: 10px;
}

#baseLogForm tr td:first-child img{
  padding-left: 3px;
}

#casing form#addEntForm .added .iCode_block>span[id*=gbut]{
  margin: 8px 0 0 5px;
}

.forum-box span#edtL1{
  margin-left: 11px;
}

#casing #order-but-recalc{
  float: none;
}

.methods-list input.checkbox{
  margin: 0;
}

a.profile-label:focus,a.profile-label:hover{
  background: var(--White);
  color: #fff;
  text-decoration: none;
}

a.profile-label{
  background: var(--White);
  color: #fff;
  border-radius: 0;
}

::-webkit-scrollbar-thumb{
  border-width: 1px 1px 1px 2px;
  border-color: var(--White);
  background-color: var(--LightGray);
}

::-webkit-scrollbar{
  height: 5px;
}

.close-menu,.show-menu,.show-registration,.show-search{
  display: none;
  color: #fff;
  transition: all .3s;
}

.close-menu:hover,.show-menu:hover,.show-registration:hover,.show-search:hover{
  color: var(--White);
}

.module-gb{
  padding-bottom: 50px;
}

.module-gb .cTop a{
  font-size: 16px;
  font-weight: 900;
}

#scrollup{
  padding: 0 13px;
  display: none;
  height: 50px;
  box-shadow: 0 0 9px 2px rgba(0,0,0,.09);
  border: none;
  background-size: 25px;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  position: fixed;
  z-index: 4;
}

#fancybox-overlay{
  background: rgba(0,0,0,.6) !important;
}

.forum-box tr[id^=post] img{
  max-width: 100%;
}

#setsList{
  white-space: nowrap;
}

#transactions_cont{
  overflow: auto;
}

.mobile-menu-list{
  display: none;
}

#invoice-table input.selAll{
  margin-left: 10px;
}

.fixed{
  width: 100%;
  left: 0;
  top: 0;
}

.FirstL::first-letter{
  font-size: 25px;
  color: var(--White);
  font-weight: 700;
  text-shadow: -2px 0px 0px #ffffff45, -4px 0px 0px #ffffff30, -6px 0px 0px #ffffff15;
}

.Products-list{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: start;
  color: var(--DarkGray);
  width: fit-content;
  margin: auto;
}

.Products-list li{
  padding: 10px;
  min-width: 100px;
}

.Products-list li{
  color: var(--LightGray);
  text-transform: uppercase;
  font-size: 14px;
  font-style: italic;
}

.Products-list-onlyText{
  min-width: auto !important;
}

.Products-list li a{
  color: var(--MidGray);
  text-transform: uppercase;
  font-size: 14px;
  font-style: italic;
}

.Products-list li a:hover{
  color: var(--LightGray);
  transition: color .2s;
}

.Products-list-img, .Products-list li a{
  display: flex;
  justify-content: center;
}

.Products-list-txt::first-letter{
  color: var(--DarkGray);
  font-weight: 700;
  text-transform: uppercase;
  font-style: italic;
}

.nav-link{
  cursor: pointer;
}

.Logo{
  display: flex;
  align-items: center;
  filter: brightness(130%);
}

.card-logo{
  height: 50px;
  margin-top: 10px;
  object-fit: contain !important;
}

.owl-nav{
  display: none;
}

.fa-art{
  width: 100px !important;
  border: 0px !important;
  filter: saturate(0.0);
}

.fa-art:hover{
  filter: saturate(1);
}

.video-promo{
  text-align: center;
  background: #242e39;
  line-height: 0;
}

@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  src: url("/src/font/fontawesome-webfont.eot") format("embedded-opentype"), url("/src/font/fontawesome-webfont.woff2@v=4.3.0") format("woff2"), url("/src/font/fontawesome-webfont.woff") format("woff"), url("/src/font/fontawesome-webfont.ttf") format("truetype"), url("/src/font/fontawesome-webfont.svg") format("svg");
}

@media screen and (max-width:960px){
  #mobile{
    display: block !important;
  }

  #desktop{
    display: none !important;
  }
}

#mobile{
  display: none;
}

#desktop{
  display: block;
}

.fa{
  display: inline-block;
  font-family: FontAwesome;
  font-feature-settings: normal;
  font-kerning: auto;
  font-language-override: normal;
  font-size: inherit;
  font-size-adjust: none;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-rendering: auto;
}

.fa-vk:before{
  content: "";
}

.fa-facebook-f:before, .fa-facebook:before{
  content: "";
}

.fa-instagram:before{
  content: "";
}

::-webkit-calendar-picker-indicator{
  filter: contrast(0.5);
}

body::-webkit-scrollbar{
  display: none;
}

.admin-block{
  border-top: 1px solid var(--MidGray);
}

.admin-block p{
  color: var(--LightGray);
}

.admin-block-inputText input{
  padding: 0;
  margin-bottom: 0;
  font-variant: normal;
  color: #aaa;
  border: none;
  background-color: transparent;
  border-bottom: 2px solid rgb(75, 75, 75);
  font-weight: bold;
  font-size: 16px;
}

.admin-text{
  color: var(--LightGray);
}

.admin-menu{
  display: flex;
  flex-direction: column;
}

.admin-table{
  width: 100%;
  height: 100%;
}

.admin-statusMs{
  color: var(--MidGray);
  padding-right: 5px;
}

.admin-main-table{
  width: 100vw;
  height: 100vh;
  border-spacing: 0px;
}

.admin-main-table-pading{
  width: 10%;
}

.admin-main-table-content{
  vertical-align: top;
  padding: 20px 0;
}

.admin-main-table-statusbars{
  height: 25px;
  background-color: var(--BlackTrans);
}

.admin-main-table td{
  border: 0px solid var(--MidGray);
}

.admin-employee-table{
  border: 1px solid var(--MidGray);
  background-color: var(--BlackTrans);
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  border-spacing: 0px;
}

.admin-employee-table p{
  margin: 0;
  text-align: left;
}

.admin-employee-table td{
  border-bottom: 1px solid var(--MidGray);
}

.admin-employee-table-li{
  color: var(--LightGray);
}

.admin-employee-table-sel{
  background-color: var(--DarkGray);
  border-color: var(--MidGray);
  color: var(--LightGray);
  border-radius: 5px;
}

.admin-border{
  border: 1px solid var(--MidGray);
}

.UhideBlock{
  display: none;
}

.ScrollBox{
  width: 10vw;
  overflow: auto;
}

.ScrollBox::-webkit-scrollbar{
  display: block;
}

.back-color-gray{
  background-color: rgb(35, 35, 40) !important;
}

.borderR{
  border-radius: 20px;
}

.titleLight h2,.titleLight h3{
  color: var(--White);
}

.titleDark h2, .titleDark h3{
  color: var(--DarkGray);
}

.textLight p{
  color: var(--LightGray);
}

.textDark p{
  color: var(--DarkGray);
}

.agreetment-text p{
  text-align: justify !important;
}

.agreetment-text h2{
  font-variant: all-small-caps;
}

.form-table{
  width: 100%;
  padding: 0 7%;
}

.form-input-radio{
  color: rgb(68, 68, 68);
  padding-right: 10px;
  font-weight: bold;
}

.form-input-check{
  color: rgb(68, 68, 68);
  width: 5% !important;
}

.form-container{
  display: flex;
  justify-content: center;
  margin-top: 10vh;
}

.form{
  width: 65vw;
}

.form-heading h2{
  text-align: center;
  color: #a8a19f;
}

.form-formGroup{
  display: flex;
  justify-content: center;
}

.form-formGroup input{
  color: #aaa;
  border: none;
  width: 90%;
  padding: 7px;
  margin-bottom: 15px;
  background-color: transparent;
  border-bottom: 2px solid rgb(75, 75, 75);
  font-weight: bold;
  font-size: 16px;
  font-variant: small-caps;
}

input[type=checkbox]{
  margin-bottom: 0 !important;
  /* transform: translate(0px, 3px); */
}

/* Легаси-баг (глобально на ВСЕ инпуты): при фокусе текст прыгал до 17px и появлялся серый
   border-bottom + смена фона. Это и есть «увеличение масштаба + лишние бордеры» во всех формах
   приложения, которые годами переопределяли инлайном. Оставляем только outline:none; размер/бордер/фон
   инпута задаёт его собственный класс. НИЧЕГО не увеличиваем и не подрисовываем на фокусе. */
input:focus{
  outline: none;
}

input[type=text]:focus{
  outline: none;
}

input[type=number]:focus{
  outline: none;
}

input[type=email]{
  transition: all .2s ease-in-out;
}

.form-text{
  color: rgb(42, 41, 41);
  font-size: 13px;
}

.form-btn2{
  padding: 10px;
  outline: none;
  width: 150px;
  border-style: none;
  color: var(--LightGray);
  font-weight: 600;
  margin-top: 10px;
}

.form-btn2:hover{
  color: #35373c;
  background-color: #c5e652;
}

.form-status{
  color: #c5e652;
  text-align: center;
  margin: 5px;
  font-weight: 600;
}

textarea:focus{
  outline: none;
}

.form-textarea{
  color: #aaa;
  height: 15vh;
  width: 80%;
  resize: none;
  border-radius: 10px;
  padding: 10px;
  background-color: #35373c;
  border: 1px solid rgb(68, 68, 68);
}

.drop-container{
  margin-top: 10px;
  width: 80%;
  position: relative;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  border-radius: 10px;
  border: 2px dashed #555;
  color: #444;
  cursor: pointer;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover,
.drop-container.drag-active{
  border-color: var(--LightGreen);
}

.drop-container:hover .drop-title,
.drop-container.drag-active .drop-title{
  color: var(--LightGreen);
}

.drop-title{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: color .2s ease-in-out;
}

input[type=file]{
  width: 100%;
  padding: 5px;
  border-radius: 15px;
  border: 1px solid #555;
}

input[type=file]::file-selector-button{
  margin-right: 20px;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  color: #969696 !important;
  background: #35373c;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover{
  color: #35373c !important;
  background: #969696;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
  background-color: transparent !important;
  transition: background-color 0s 600000s, color 0s 600000s !important;
  -webkit-text-fill-color: var(--LightGreen) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--DarkGray) inset;
  box-shadow: 0 0 0px 1000px var(--DarkGray) inset;
}

::-webkit-scrollbar{
  width: 5px;
}

::-webkit-scrollbar-thumb{
  background: var(--LightGray);
  border-radius: 5px;
}

p{
  text-align: center;
}

.title{
  text-align: center;
  text-transform: uppercase;
}

.video{
  width: 100%;
  height: 200%;
  margin: auto;
  display: block;
  border: none;
  transform: translateY(-25%);
}

.popup-btn, .close-btn{
  width: 100% !important;
  height: 100%;
  display: block;
  cursor: pointer;
  background-color: transparent;
  border-radius: 20px;
}

.popup-btn:hover{
  color: white;
  border-radius: 20px;
  background-color: #0000007d;
}

.video-popup{
  display: none;
  width: 100%;
  height: 100vh;
  margin: auto;
  position: fixed;
  top: 0;
  z-index: 101;
}

.popup-bg{
  background: rgba(0,0,0,0.9);
  width: 100%;
  height: 100vh;
  position: absolute;
}

.popup-content{
  background: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 40vw;
  overflow: hidden;
}

.popup-title{
  padding: 30px;
  margin: 0 auto;
  color: red;
  text-transform: uppercase;
}

h1,h2,h3,p{
  font-family: Open Sans,sans-serif;
  font-variant: small-caps;
}

.Products-container{
  margin-top: 0px;
}

.sl01{
  height: -webkit-fill-available;
  background-color: var(--DarkGray);
}

.sl01-content, .sl01-main-image, .sl01-main-header, .sl01-gallery > *{
  will-change: transform;
}

.sl01-main-back{
  overflow-x: hidden;
}

.sl01-main-header{
  height: 70vh;
}

.NGS-main-header{
  height: 70vh;
}

.sl01-line{
  background-color: var(--LightGreen);
  height: 1px;
  position: absolute;
}

.clr-green{
  background-color: var(--LightGreen);
}

.clr-white{
  background-color: var(--White);
}

.sl01-select-text{
  color: var(--LightGreen);
}

.sl01-main-image{
  position: absolute;
  left: 0vw;
  margin-top: 90px;
  z-index: -1;
  transform: translate(20vw, 0);
  object-fit: cover;
  height: 75%;
}

.NGS-main-image-00{
  position: absolute;
  left: 0vw;
  z-index: -1;
  transform: translate(0, 0);
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

.sl01-main-title{
  font-size: 40px;
  position: absolute;
  margin-top: 150px;
  color: var(--White);
  border-bottom: 0px solid var(--LightGreen);
}

.NGS-main-text{
  padding-top: 210px;
  width: 30vw;
}

.NGS-main-text p{
  text-align: left;
  color: var(--White);
  text-shadow: 0 0px 5px black;
  border-radius: 10px;
}

.sl01-main-title-down1{
  margin-top: 210px;
  font-size: 35px;
  border-bottom: 0px;
}

.sl01-main-title-down2{
  margin-top: 330px;
  font-size: 20px;
  border-bottom: 0px;
  line-height: 1.2;
}

.sl01-main-title-down3{
  margin-top: 450px;
  font-size: 20px;
  border-bottom: 0px;
  line-height: 1.2;
  background-color: var(--LightGreen);
  color: var(--DarkGray);
  width: 35vw;
  padding: 10px 10px 10px 15vw;
  transform: translate(-15vw, 0);
}

.sl01-img{
  border-radius: 20px;
}

.sl01-gallery_table-back{
  border-radius: 30px;
  background-size: cover;
  background-clip: content-box;
  width: 70vw;
  height: 35vh;
  max-width: 35vw;
  vertical-align: bottom;
}

.sl01-materials{
  margin: 5px 20px;
  background-color: var(--White);
  width: max-content;
  padding: 0 20px;
  border-radius: 10px;
  max-width: 30.5vw;
  color: var(--DarkGray);
}

.sl01-container{
  padding: 0 15vw;
}

.sl01-gallery{
  display: flex;
}

.sl01-gallery > *{
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.sl01-gallery__item{
  max-width: 70vw;
  max-height: 180vh;
  border-radius: 8px;
  padding-top: 10vh;
}

.sl01-gallery_block{
  margin-top: var(--gallery-gap);
}

.sl01-gallery_table tr td{
  border: 0px solid var(--White);
  padding: 10px;
}

.sl01-gallery_main-title{
  font-size: 20px;
  line-height: 1.2;
  background-color: var(--LightGreen);
  color: var(--DarkGray);
  width: 100vw;
  padding: 10px 10px 10px 15vw;
  transform: translate(-15vw, 0);
}

.sl01-text-block{
  color: var(--LightGray);
  position: relative;
}

.sl01-text-block__h{
  font-size: 2rem;
  line-height: 2.4rem;
  color: var(--White);
  margin-bottom: 1.5rem;
}

.sl01-text-block__p{
  line-height: 1.5;
  text-align: left;
  font-size: 16px;
}

.sl01-Title-thin{
  color: var(--LightGray);
  font-size: 19px !important;
  font-weight: normal !important;
  line-height: 1 !important;
  margin-top: 20px !important;
}

.sl01-table01 tr td{
  width: 210px;
  height: 210px;
  padding: 10px;
}

.sl01-table01-div{
  border-radius: 20px;
  height: 100%;
  width: 100%;
  text-align: center;
}

.sl01-table02 td{
  height: 100%;
  padding: 0 10px !important;
  color: var(--DarkGray);
}

.sl01-table02 p{
  font-size: 15px;
  line-height: .9;
  margin: 0;
  color: var(--DarkGray);
}

.sl01-table02 h3{
  font-size: 25px;
  line-height: .9;
  margin: 0;
}

.sl01-table02 img{
  height: 50px;
  margin-top: 10px;
}

.sl01-table-small tr td{
  padding: 5px !important;
}

.contacts-page-text{
  text-align: center !important;
  margin: -15px 20px;
  background-color: var(--DarkGray);
  padding: 0 20px;
  border-radius: 10px;
  padding-bottom: 15px;
}

.TextShadowH{
  position: absolute;
  font-size: 60pt;
  filter: blur(0px);
  opacity: .3;
  top: -45px;
  left: -4px;
  padding: 0 15vw;
}

.Photo-wrapper{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  max-width: 1440px;
  font-size: 0;
  margin-top: 2vw;
}

.Photo-standard-item{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Photo-news-item{
  display: inline-block;
  min-height: 400px;
  width: 50%;
}

.Photo-standard-item:nth-child(1){
  background-image: url("/src/img/photos/photo_07.webp");
}

.Photo-standard-item:nth-child(2){
  background-image: url("/src/img/photos/photo_08.webp");
}

.Photo-standard-item:nth-child(3){
  background-image: url("/src/img/photos/photo_03.webp");
}

.Photo-standard-item:nth-child(4){
  background-image: url("/src/img/photos/photo_00.webp");
}

.Photo-standard-item:nth-child(5){
  background-image: url("/src/img/photos/photo_06.webp");
}

.Photo-standard-item:nth-child(6){
  background-image: url("/src/img/photos/photo_05.webp");
}

.Photo-standard-item:nth-child(7){
  background-image: url("/src/img/photos/photo_01.webp");
}

@supports (display: grid){
  .Photo-news-item{
    width: auto;
    min-height: 0;
  }

  .Photo-standard-item:nth-child(1){
    grid-column: 1 / span 2;
    grid-row: 1 / 35;
    clip-path: polygon(0 0, 88% 0, 98% calc(100% - 70px), 0 95%);
    width: 117%;
  }

  .Photo-standard-item:nth-child(2){
    grid-column: 3 / span 1;
    grid-row: 1 / 35;
    clip-path: polygon(5% 1%, 29% 78%, 100% 90%, 100% 0%);
    margin-top: 0px;
    width: 100%;
  }

  .Photo-standard-item:nth-child(3){
    grid-column: 1 / span 1;
    grid-row: 35 / 70;
    clip-path: polygon(2% 14%, 0% 85%, 91% 81%, 99% 7%);
    margin-top: -73px;
  }

  .Photo-standard-item:nth-child(4){
    grid-column: 2 / span 1;
    grid-row: 35 / 70;
    clip-path: polygon(16% 14%, 10% 82%, 81% 94%, 92% 9%);
    margin-top: -105px;
    margin-left: -23%;
    margin-right: -15%;
  }

  .Photo-standard-item:nth-child(5){
    grid-column: 3 / span 1;
    grid-row: 37 / 75;
    clip-path: polygon(42% 2%, 100% 11%, 98% 97%, 7% 84%, 19% 4%);
    margin-left: -20%;
    margin-top: -104px;
  }

  .Photo-standard-item:nth-child(6){
    grid-column: 1 / span 1;
    grid-row: 69 / 100;
    clip-path: polygon(75% 0%, 0% 6%, 0% 100%, 100% 100%, 93% 3%);
    margin-top: -72px;
    margin-right: -21%;
    margin-bottom: 0px;
  }

  .Photo-standard-item:nth-child(7){
    grid-column: 2 / span 2;
    grid-row: 73 / 100;
    clip-path: polygon(100% 30%, 99% 100%, 10% 100%, 6% 2%);
    margin-top: -107px;
  }
}

.clients-logos{
  height: 150px;
  opacity: .5;
}

.clients-logos img{
  object-fit: contain !important;
  filter: invert(1);
  padding: 10px;
}

.project-back div{
  background-color: var(--BlackTrans);
}

.footer-doit{
  color: #fff;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
}

.table100{
  width: 100%;
  display: flex;
  justify-content: center;
}

.testTable{
  margin: 20px 0;
}

.testTable td{
  border: 1px solid var(--MidGray);
  width: 25px;
  height: 25px;
}

.testTable p{
  color: var(--LightGray);
  margin: 0;
}

.testTableSymbols{
  font-size: 18px !important;
  line-height: 20px !important;
}

.tableNumbers{
  background-color: transparent;
  border: 0px;
  text-align: center;
  font-size: 16px;
  vertical-align: initial;
  color: var(--LightGreen);
}

.tableNumbers:hover,.tableNumbers:focus{
  outline: none;
  border: 0px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  display: none;
}

.tableTestWork{
  width: 100%;
  margin: 20px 0;
}

.tableTestWork p{
  margin: 0;
}

.reC_table{
  width: 80%;
}


#taskCommentsConteiner{
    height: auto !important;
    overflow: visible !important;
}

#taskCommentsConteiner iframe{
    display: block;
    width: 100%;
    height: 0;
    border: 0;
}



html.ngs-window-interacting,
html.ngs-window-interacting *,
body.ngs-window-interacting,
body.ngs-window-interacting *{
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

#ngs-window-interaction-shield{
  position: fixed;
  inset: 0;
  display: none;
  background: transparent;
  z-index: 2147483647;
}

html.ngs-window-interacting ::selection,
html.ngs-window-interacting *::selection,
body.ngs-window-interacting ::selection,
body.ngs-window-interacting *::selection,
#ngsGalleryRoot.ngs-window-interacting ::selection,
#ngsGalleryRoot.ngs-window-interacting *::selection{
  background: transparent !important;
  color: inherit !important;
}

html.ngs-window-interacting ::-moz-selection,
html.ngs-window-interacting *::-moz-selection,
body.ngs-window-interacting ::-moz-selection,
body.ngs-window-interacting *::-moz-selection,
#ngsGalleryRoot.ngs-window-interacting ::-moz-selection,
#ngsGalleryRoot.ngs-window-interacting *::-moz-selection{
  background: transparent !important;
  color: inherit !important;
}

#ngsGalleryRoot,
#ngsGalleryRoot *{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}