.block-menu-explication {
  display: inline-block;
  position: relative;
}

.block-menu-explication .menu-datalist{
  top: 10px;
  font-size: 14px;
}

::-webkit-scrollbar { /* общий контейнер скрола */
  --size: 15px;
  width: var(--size);
  height: var(--size);
}

::-webkit-scrollbar-thumb { /* ползунок */
  background: var(--scrollbar-bg-color); 
  border-radius: 7.5px;
  border: 5px solid transparent; /* псевдо отступ */
  background-clip: padding-box;
}

::-webkit-scrollbar-corner { /* угол при двух скролах */
  background: transparent; 
}

::-webkit-scrollbar-track { /* контейнер ползунка */
  background: transparent;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement { /* стрелки */
  display: none; /* скрываем лишние промежуточные кнопки, если они есть */
}

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment { /* стрелки */
  display: block;
  height: 5px; /* отступ (сверху и снизу) */
  background: transparent;
  border: none;
}

table.scroll-y tbody::-webkit-scrollbar { /* общий контейнер скрола */
  --size: 5px;
  width: var(--size);
}

table.scroll-y tbody::-webkit-scrollbar-thumb { /* ползунок */
  background: var(--scrollbar-bg-color);
  border-radius: 2.5px;
}

.input-contenteditable {
  padding: 10px 15px;
  border: 1px solid var(--input-border-color);
  overflow: hidden;
  word-wrap: break-word;
  white-space: pre-wrap; /* поддержка переноса строк */
  font-size: 14px;
  text-align: left;
  min-height: 30px;
}

.input-contenteditable:focus {
  outline: 0;
  border-color: var(--input-border-foc-color);
  border-weight: 1px;
}

.table-content-line td.mark-back-td {
  padding: 1px 0px;
  font-size: 0;
  color: var(--color-black-400);
}

.table-content-line td.mark-back-td > div {
  display: inline-block;
  height: 100%;
  line-height: 22px;
  min-width: 45px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 14px;
}

.icon-password {
	position: absolute;
  top: 0px;
	right: 0px;
	display: inline-block;
  font-size: 15px;
  cursor: pointer;
  width: 30px;
	height: 30px;
  text-align: center;
  line-height: 30px;
}

.table-orientation-label td {
  text-align: center;
  width: 70px;
  color: var(--color-gray-700);
  font-size: 12px;
  user-select: none;
}

.table-orientation {
  display: inline-block;
  border: 1px solid var(--input-border-color);
  overflow: hidden;
  float: left;
}

.table-orientation td {
  line-height: 28px;
  text-align: center;
  width: 70px;
  user-select: none;
  font-size: 14px;
  border-left: 1px solid var(--input-border-color);
  border-right: 1px solid var(--input-border-color);
  vertical-align: middle;
}

.table-orientation td.table-orientation-btn-left,
.table-orientation td.table-orientation-btn-right {
  background-color: var(--btn-default-bg-color);
  width: 30px;
  color: var(--btn-default-text-color);
}

.table-orientation td.table-orientation-btn-left {
  border-right: 1px solid var(--input-border-color);
  padding-bottom: 1px;
  border-left: none;
}

.table-orientation td.table-orientation-btn-right {
  border-left: 1px solid var(--input-border-color);
  border-right: none;
}

.table-orientation td.table-orientation-btn-left:hover,
.table-orientation td.table-orientation-btn-right:hover {
  background-color: var(--btn-default-hov-bg-color);
  cursor: pointer;
}

button .icon-stats-bars {
  font-size: 16px;
  color: var(--color-black-400);
}

.footer a {
  display: inline-block;
  line-height: 24px;
}

/* .navbar-default-0 a:hover,
.navbar-default-0 .a:hover, */
.footer a:hover {
  color: var(--color-blue-400); /* --color-blue-400 --color-lilac-400 --color-orange-500 --color-red-400 */
  text-decoration: none;
}

.menu-orientation {
  padding: 6px;
  position: absolute;
  z-index: 2;
  background-color: var(--menu-datalist-bg-color);
  box-shadow: 0 2px 7px var(--menu-datalist-shadow-color);
  left: calc(332px - 57px);
}

.menu-orientation td div {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  user-select: none;
  background-color: var(--menu-datalist-bg-color);
  border-radius: 17px;
  cursor: pointer;
}

.menu-orientation td div.menu-orientation-more {
  color: var(--menu-datalist-bg-color);
  background-color: var(--menu-datalist-bg-color);
}

.menu-orientation td div:hover {
  color: var(--text-color);
  background-color: var(--menu-datalist-hov-color);
}

.menu-orientation td div.menu-orientation-selected {
  background-color: var(--menu-orientation-sel-bg-color);
  color: var(--menu-orientation-sel-text-color);
}

.menu-bivalence {
  padding: 6px;
  display: inline-block;
  position: absolute;
  top: 57px;
  right: 55px;
  z-index: 2;
  background-color: var(--color-white);
  border: solid var(--color-gray-600) 1px;
  border-radius: 56px;
}

.menu-bivalence td div {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  user-select: none;
  background-color: var(--color-gray-300);
  border-radius: 15px;
  cursor: pointer;
}

.menu-bivalence td div:hover {
  background-color: var(--color-gray-400);
}

.menu-bivalence td div span {
  font-size: 16px;
  line-height: 30px;
  display: inline-block;
  color: var(--color-black-400);
}

.menu-bivalence td div span.icon-undo,
.menu-bivalence td div span.icon-redo {
  font-size: 13px;
  position: relative;
}

.menu-bivalence td div span.icon-undo {
  transform: rotate(45deg);
}

.menu-bivalence td div span.icon-redo {
  transform: rotate(-45deg);
}

.menu-bivalence-square {
  position: relative;
  top: -25px;
  background-color: var(--btn-default-bg-color);
}

.menu-bivalence-square td {
  vertical-align: middle;
  text-align: center;
}

.menu-bivalence-square input[type="range"] {
  width: 100px;
  transform: rotate(-90deg);
}

.btn-td {
  cursor: pointer;
  background-color: var(--btn-input-td-bg-color);
  padding: 0 7px;
  user-select: none;
  line-height: 1;
}

.btn-td:hover {
  background-color: var(--btn-input-td-hov-bg-color);
}

.bar-pagination {
  display: inline-block;
  font-size: 0;
}

.btn-pagination {
  border: none;
  border-radius: 15px;
  display: inline-block;
  line-height: 30px;
  height: 30px;
  min-width: 30px;
  text-align: center;
  color: var(--color-black-400);
  font-size: 14px;
}

.btn-pagination:active, 
.btn-pagination:focus {
  outline: none;
}

.text-pagination {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  padding: 0 14px;
  border-radius: 15px;
  border: solid var(--input-border-color) 1px;
  user-select: none;
  font-size: 14px;
}

label.label-note {
  position: relative;
  top: -8px;
}

label.label-note br + span {
  color: var(--service-text-color);
  font-size: 11px;
  position: absolute;
  line-height: 1.25;
  white-space: nowrap;
}

.flashing { /*стиль с анимацией мигания*/
  animation-name: flashing;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 700ms;
}

@keyframes flashing {
  from {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  to {
    opacity: 0;  
  }
}

.datalist li:hover {
  background-color: #1E90FF;
  color: var(--color-white);
}

.datalist {
  border-radius: 0;
  box-shadow: 0 2px 7px rgba(140, 140, 140, 0.55);
  position: absolute;
  z-index: 2;
  background-color: var(--color-white);
  border: 1px solid #767676;
  padding: 0;
  list-style-type: none;
}

.datalist li {
  line-height: 17px;
  cursor: default;
  padding: 0 8px;
}

.datalist li.datalist-selected {
  background-color: #1E90FF;
  color: var(--color-white);
}

.menu-datalist {
  min-width: 100px;
  position: absolute;
  z-index: 2;
  background-color: var(--menu-datalist-bg-color);
  padding: 7px 0;
  list-style-type: none;
  box-shadow: 0 2px 7px var(--menu-datalist-shadow-color);
}

.menu-datalist li {
  line-height: 30px;
  cursor: pointer;
  padding: 0 15px;
  user-select: none;
}

.menu-datalist li:hover {
  background-color: var(--menu-datalist-hov-color);
}

.menu-datalist li.menu-datalist-selected {
  background-color: var(--menu-datalist-sel-bg-color);
  color: var(--menu-datalist-sel-text-color);
}

.menu-datalist li.menu-datalist-selected-light {
  background-color: var(--menu-datalist-sel-light-bg-color);
  color: var(--menu-datalist-sel-light-text-color);
}

[readonly].form-control,
[readonly].form-control-btn-double,
[readonly].calendar,
[readonly].timepicker {
  background-color: var(--content-bg-color);
  cursor: default;
}

[readonly].calendar {
  cursor: pointer;
}

input[disabled],
input[disabled] + .separator-double-input,
.form-control[disabled] {
  background-color: var(--input-disabled-bg-color);
}

input[disabled]:hover,
input[disabled] + .separator-double-input:hover,
.form-control[disabled]:hover,
input[disabled] + label > .btn-radio-image:hover {
  cursor: not-allowed;
}

input[type="radio"] + label.btn-header-table > span {
  display: none;
  color: var(--color-blue-400);
  font-size: 13px;
}

input[type="radio"] + label.btn-header-table {
  display: block;
  width: 100%;
}

input[type="radio"]:checked + label.btn-header-table > span {
  display: inline-block;
  margin-left: 2px;
}

.block-frame-text {
  display: table;
  font-size: 0;
}

.frame-text {
  border: 1px solid var(--input-border-color);
  padding: 4px 7px;
  line-height: 20px;
  box-sizing: border-box;
  cursor: not-allowed;
  display: inline-block;
  min-height: 30px;
  font-size: 14px;
}

.frame-text-label {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
  font-size: 14px;
}

.frame-text-100 {
  width: 100px;
}

.frame-text-150 {
  width: 150px;
}

.frame-text-200 {
  width: 200px;
}

.frame-text-250 {
  width: 250px;
}

.block-double-input {
  display: inline-block;
}

.block-double-input + span {
  line-height: 30px;
  margin-left: 10px;
  display: inline-block;
}

.separator-double-input {
  display: inline-block;
  text-align: center;
  width: 7px;
  height: 30px;
  line-height: 28px;
  border-top: 1px solid var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-600);
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
  user-select: none;
}

.input-box-left,
.input-box-right {
  border: 1px solid var(--color-gray-600);
  height: 30px;
  line-height: 28px;
  display: inline-block;
  width: 33px;
}

.input-box-left {
  border-right: none;
  text-align: center;
  padding-left: 5px;
}

.input-box-right {
  border-left: none;
  text-align: center;
  padding-right: 5px;
}

.input-box-left:focus,
.input-box-right:focus {  
  outline: 0;
  border-color: var(--color-blue-400);
}

.btn-input-td,
.btn-input {
  border: 1px solid var(--input-border-color);
  border-left: none;
  background-color: var(--btn-default-bg-color);
  height: 30px;
  line-height: 30px;
  text-align: center;
  min-width: 30px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  float: left;
  color: var(--btn-default-text-color);
}

.btn-input-td {
  border-radius: 0;
  border: none;
  background-color: var(--btn-input-td-bg-color);
  transition: none;
}

.btn-input-td:hover {
  background-color: var(--btn-input-td-hov-bg-color);
}

.btn-input-td > span,
.btn-input > span {
  position: relative;
}

.btn-input-td > .icon-minus-square-o {
  top: 2px;
}

.btn-input > .icon-dots-three-vertical,
.btn-input-td > .icon-dots-three-vertical {
  top: 1px;
}

.btn-input > span.icon-link {
  font-size: 18px;
  top: 1px;
}

.btn-input > span.icon-calendar {
  font-size: 16px;
}

.btn-input > span.icon-barcode1 {
  font-size: 17px;
  top: 1px;
}

.btn-input + label {
  line-height: 30px;
}

.btn-input + label.label-note {
  line-height: 1.25;
  height: 30px;
  top: 0;
}

.btn-input:hover {
  background-color: var(--btn-default-hov-bg-color);
}

.btn-input-td:active, 
.btn-input-td:focus,
.btn-input:active, 
.btn-input:focus {
  outline: none;
}

.input-td,
.input-td-right {
  outline: 0;
  display: inline-block;
  text-align: center;
  width: 100%;
  height: 30px;
  padding: 5px; /*5px 7px*/
  font-size: 14px;
  color: var(--text-color);
  background-color: var(--content-bg-color); 
  border: 1px solid var(--content-bg-color);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  float: left;
}

.input-td-2 {
  color: var(--color-gray-700);
}

.table-input-line td { 
  text-align: center;
}

td.input-line { 
  width: calc(70px - 1px);
}

.input-line .input-td, 
.input-line .input-td-right {
  border: 1px solid var(--input-border-color);
  border-right: none;
}

.input-line .input-td-right {
  border-right: 1px solid var(--input-border-color);
}

.input-td:focus,
.input-line .input-td:focus,
.input-line .input-td-right:focus {
  outline: 0;
  border-color: var(--input-border-foc-color);
  z-index: 1;
}

td.input-line:focus-within + td.input-line .input-td,
td.input-line:focus-within + td.input-line .input-td-right {
  outline: 0;
  border-left: 1px solid var(--color-blue-400);
}

.input-td-mark {
  color: var(--service-text-color);
}

.radio-table,
.radio-table:hover {
  background-color: var(--color-blue-400);
  color: var(--color-white);
}

.movement {
  -webkit-animation-delay: 2.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: movement;
  -webkit-animation-duration: 5000ms;
  animation-name: movement;
  animation-duration: 5000ms;
}

@-webkit-keyframes movement {
  from {
    left: 0;
  }
  4% {
    left: 6px;
  }
  8% {
    left: 0;
  }
  12% {
    left: 6px;
  } 
  16% {
    left: 0;
  }
  to {
    left: 0;
  }
}

@keyframes movement {
  from {
    left: 0;
  }
  4% {
    left: 6px;
  }
  8% {
    left: 0;
  }
  12% {
    left: 6px;
  } 
  16% {
    left: 0;
  }
  to {
    left: 0;
  }
}

.swing {
  -webkit-animation-delay: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: swing;
  -webkit-animation-duration: 5000ms;
  animation-name: swing;
  animation-duration: 5000ms;
  transform-origin: center center;
}

@-webkit-keyframes swing {
  from {
    -webkit-transform:rotate(0);
  }
  3% {
    -webkit-transform:rotate(-4deg);
  }
  6% {
    -webkit-transform:rotate(4deg);
  }
  9% {
    -webkit-transform:rotate(-4deg);
  } 
  12% {
    -webkit-transform:rotate(0);
  }
  to {
    -webkit-transform:rotate(0);
  }
}

@keyframes swing {
  from { 
    transform:rotate(0);
  }
  3% {
    transform:rotate(-4deg);
  }
  6% {
    transform:rotate(4deg);
  }
  9% {
    transform:rotate(-4deg);
  } 
  12% {
    transform:rotate(0);
  }
  to {
    transform:rotate(0);    
  }
}

.status-bar {   
  width: 200px;
  position: fixed;
  top: 50%;
  margin-top: -45px;
  margin-left: calc((var(--width-container-sh) - 15px - 15px - 200px) / 2);
  z-index: 998;  
  padding: 15px 10px 10px 10px;
  cursor: default; 
  -webkit-user-select: none;
  -moz-user-select: none;
  box-shadow: 0 2px 7px var(--modal-shadow-color);
  background-color: var(--modal-bg-color);
}

.status-bar-content {
  text-align: center;
}

.status-bar-block-mark {
  text-align: center;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-top: 2px;
}

.status-bar-mark-1,
.status-bar-mark-2,
.status-bar-mark-3 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 4.5px;
  border: 1px solid var(--color-blue-400);
  margin: 0 2px;
  position: relative;
  z-index: 1000;   
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1150ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1150ms;
}

.status-bar-mark-1 {
  -webkit-animation-name: color-mark-1;  
  animation-name: color-mark-1;
}

.status-bar-mark-2 {
  -webkit-animation-name: color-mark-2;  
  animation-name: color-mark-2;
}

.status-bar-mark-3 {
  -webkit-animation-name: color-mark-3;  
  animation-name: color-mark-3;
}

@-webkit-keyframes color-mark-1 {
  from {
    background-color: var(--content-bg-color);
  } 
  16% {
    background-color: var(--color-blue-400);
  }
  33% {
    background-color: var(--color-blue-400);
  }
  50% {
    background-color: var(--color-blue-400);
  } 
  66% {
    background-color: var(--content-bg-color);
  }
  83% {
    background-color: var(--content-bg-color);
  }
  to {
    background-color: var(--content-bg-color);
  }
}

@keyframes color-mark-1 {
  from {
    background-color: var(--content-bg-color);
  } 
  16% {
    background-color: var(--color-blue-400);
  }
  33% {
    background-color: var(--color-blue-400);
  }
  50% {
    background-color: var(--color-blue-400);
  } 
  66% {
    background-color: var(--content-bg-color);
  }
  83% {
    background-color: var(--content-bg-color);
  }
  to {
    background-color: var(--content-bg-color);
  }
}

@-webkit-keyframes color-mark-2 {
  from {
    background-color: var(--content-bg-color);
  } 
  16% {
    background-color: var(--content-bg-color);
  }
  33% {
    background-color: var(--color-blue-400);
  }
  50% {
    background-color: var(--color-blue-400);
  } 
  66% {
    background-color: var(--color-blue-400);
  }
  83% {
    background-color: var(--content-bg-color);
  }
  to {
    background-color: var(--content-bg-color);
  }
}

@keyframes color-mark-2 {
  from {
    background-color: var(--content-bg-color);
  } 
  16% {
    background-color: var(--content-bg-color);
  }
  33% {
    background-color: var(--color-blue-400);
  }
  50% {
    background-color: var(--color-blue-400);
  } 
  66% {
    background-color: var(--color-blue-400);
  }
  83% {
    background-color: var(--content-bg-color);
  }
  to {
    background-color: var(--content-bg-color);
  }
}

@-webkit-keyframes color-mark-3 {
  from {
    background-color: var(--content-bg-color);
  } 
  16% {
    background-color: var(--content-bg-color);
  }
  33% {
    background-color: var(--content-bg-color);
  }
  50% {
    background-color: var(--color-blue-400);
  } 
  66% {
    background-color: var(--color-blue-400);
  }
  83% {
    background-color: var(--color-blue-400);
  }
  to {
    background-color: var(--content-bg-color);
  }
}

@keyframes color-mark-3 {
  from {
    background-color: var(--content-bg-color);
  } 
  16% {
    background-color: var(--content-bg-color);
  }
  33% {
    background-color: var(--content-bg-color);
  }
  50% {
    background-color: var(--color-blue-400);
  } 
  66% {
    background-color: var(--color-blue-400);
  }
  83% {
    background-color: var(--color-blue-400);
  }
  to {
    background-color: var(--content-bg-color);
  }
}

.block-btn-rotate {
  display: inline-block;
  position: relative;
  width: 250px;
  height: 32px;
  -webkit-transition: -webkit-transform 0.4s linear;
  transition: transform 0.4s linear; /* трансформации будут происходить анимированно продолжительностью*/
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; /* указываем, что дочерние элементы находятся в 3D пространстве */
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */  
}

.btn-rotate-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */ 
}

.btn-rotate-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF8D6;
  border: 1px solid #fbeed5;
  line-height: 30px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.flip {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(180deg);
}

.icon-btn {
  margin-right: 8px;
}

.icon-shop,
.icon-appleinc {
  font-size: 15px;
}

.icon-play2,
.icon-shop,
.icon-appleinc { 
  position: relative;
  left: 0;
  padding: 3px;
  -webkit-transition: linear .15s;
  transition: linear .15s;
}

.icon-play2 { 
  top: 2px;
  font-size: 16px;
}

.table-menu-container {
  position: absolute;
  display: inline-block;
  z-index: 3;
  /* filter: drop-shadow(0px 2px 3px rgb(100 100 100 / 55%)); */
}

.table-menu,
.table-menu-1,
.table-menu-2 {
  display: inline-block;  
  padding: 0 calc(4px + 10px) 0 6px;
  clip-path: polygon(0% 0%, 0% 100%, calc(100% - 10px) 100%, 100% 50%, calc(100% - 10px) 0%);
  border: none;
  background-color: var(--menu-table-bg-color);
  cursor: pointer;
}

.svg-menu-btn-edit,
.table-menu-btn,
.table-menu-btn-сompound,
.table-menu-btn-edit,
.table-menu-btn-add,
.table-menu-btn-add-up,
.table-menu-btn-copy,
.table-menu-btn-paste, 
.table-menu-btn-delete,
.table-menu-btn-up,
.table-menu-btn-down,
.table-menu-btn-calendar,
.table-menu-btn-warning,
.table-menu-btn-check {    
  cursor: pointer;
  font-size: 15px;
  display: inline-block;
  width: 32px; 
  line-height: 31px;
  text-align: center;
  color: var(--menu-table-color);
}

.table-menu-btn-calendar {
  font-size: 16px;
}

.table-menu-btn-check {
  font-size: 16px;
}

.table-menu-btn-add {
  font-size: 16px;
}

.table-menu-btn-add-up {
  position: relative;
  transform: rotate(-180deg);
  font-size: 16px;
}

.svg-menu-btn-edit:hover,
.table-menu-btn:hover,
.table-menu-btn-сompound:hover,
.table-menu-btn-edit:hover,
.table-menu-btn-add:hover,
.table-menu-btn-copy:hover,
.table-menu-btn-paste:hover, 
.table-menu-btn-delete:hover,
.table-menu-btn-up:hover,
.table-menu-btn-down:hover,
.table-menu-btn-calendar:hover,    
.table-menu-btn-warning:hover,   
.table-menu-btn-check:hover {    
  color: var(--menu-table-hov-color);
}

.table-menu-btn-add-up:hover {
  transform: scale(1.15) rotate(-180deg);
}

.block-accordion {
	width: 480px;
	font-size: 0;
  cursor: pointer;
}

.menu-item {
	position: relative;
	opacity: 0;
}

select.select-box > option,
select.select-list > option,
select.accordion-list > option,
.option { 
	padding: 5px 7px;  
}

.accordion-list {
	border: 1px solid var(--color-gray-600);
	width: 100%;
	font-size: 14px;
  border-radius: 0;
}

.scroll-y-off {
	overflow-y: hidden;
}

/* .icon-btn:hover, */
.close:hover,
/* .btn-close:hover,
.btn-close-window-modal:hover,
.btn-close-window-modal-img:hover, */
.animation-rot:hover {  
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;	
  -webkit-animation-name: object-rot;
  -webkit-animation-duration: 2000ms;
  animation-name: object-rot;
  animation-duration: 2000ms;
}

@-webkit-keyframes object-rot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes object-rot {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

.close:hover,
.btn-close:hover,
.btn-close-window-modal:hover,
.btn-close-window-modal-img:hover {
  color: var(--icon-close-alert-hov-color);
}

.btn-round-store {
  height: 30px;
  border-radius: 15px;
  line-height: 1;
  display: inline-block;
  padding-right: 15px;
  color: var(--color-white);
  background-color: var(--color-green-400);
  text-decoration: none;
}

.btn-round-store:hover {
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-green-500);
}

.number-btn {
  background-color: var(--color-orange-400);
	position: relative;	
}

.number-btn-1 {
  position: absolute;
	left: 0;
	top: 0;
  width: 100%;
	height: 100%;
	border-radius: 12px;
	border: solid var(--color-white);
  border-width: 0;
  -webkit-transition: border-width .15s linear, border-color .15s linear;
  transition: border-width .15s linear, border-color .15s linear;
}

.number-btn-2 {
  position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 24px;
	color: var(--color-white); 	
  -webkit-transition: color .15s linear;
  transition: color .15s linear;	
}

.btn-round-store:hover > .number-btn > .number-btn-1 {
	border-width: 12px; 
}

.btn-round-store:hover > .number-btn > .number-btn-2 {
  color: var(--color-orange-500);	
}

.block-registration > .number-btn > .number-btn-1 {
  border-color: var(--color-green-400);
}

.block-registration:hover > .number-btn > .number-btn-1 {
	border-width: 12px; 
}

.img-window-modal {
  height: 100%;
  width: 100%;   
}

.window-modal-img { 
  padding: 40px 5px 5px 5px;  
  background-color: var(--color-white);
	position: fixed;
  z-index: 998; 
  box-shadow: 0 2px 7px var(--modal-shadow-color);
  margin-bottom: 15px;  
}

.btn-close,
.btn-close-window-modal,
.btn-close-window-modal-img {
  cursor: pointer;  
  float: right;  
  position: relative;  
  --size: 34px;
  width: var(--size);
  height: var(--size);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px; /* 27px  */
  color: var(--icon-close-window-modal);
  top: -8px;
  right: -8px; 
  /* -webkit-transition: color ease-in-out .15s;
  transition: color ease-in-out .15s; */
}

.btn-close-window-modal {
  top: 6px;   
}

.btn-close-window-modal-img {
  float: none;    
  position: absolute; 
  top: 5px;
  right: 5px;
  color: var(--icon-close-window-modal-img);
}

.btn-close:hover,
.btn-close-window-modal:hover,
.btn-close-window-modal-img:hover {
  text-decoration: none;
}

.close {
  cursor: pointer; 
  text-decoration: none;  
  float: right;  
  opacity: 0.99;  
  position: relative; 
  width: 20px;
  height: 20px;
  border: 1px solid;  
  border-radius: 10px;  
  text-align: center;
  font-weight: normal;  
  font-size: 20px;
  padding-left:1px; 
  line-height: 1;  
  color: var(--color-white);
  background-color: var(--color-gray-600);
  top: -9px;
  right: -9px;
  border-color: #C8C8C8;   
}

.close:hover,
.close:focus {
  opacity: 0.99;
  color: var(--color-white);  
  background-color: var(--color-blue-500);
  border-color: #2C8EC7;  
}

.btn-payment { 
  background-color: var(--color-green-400);
  border: 1px solid #A0BDA0;
  border-top: 1px solid #B6D5B6;
  border-bottom: 1px solid #88A188; 
}

.btn-payment:hover {
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-green-500);
}

.btn-payment:focus {
  color: var(--color-white);
  text-decoration: none;
}

.box-btn-info-1 {
	position: relative; 
  margin-left: 10px;
  padding: 0 9px;
  margin-right: -3px;
  line-height: 20px;
  display: inline-block;	
}

.box-btn-info-1 > span {
	position: relative;
  z-index: 10;
}

.box-btn-info-2 {
	position: absolute;
  left: 0;
	top: 0;
  height: 100%;
	width: 100%;
  border-radius: 10px; 	
  border: solid rgba(255, 255, 255, 0.5);
  border-width: 1px;
}

.btn-success:hover > .box-btn-info-1 > .box-btn-info-2,
.btn-primary:hover > .box-btn-info-1 > .box-btn-info-2 {
  border-width: 10px;  
  border-color: var(--color-green-400); 
}

.btn-info-slider-text {
	line-height: 20px;
	display: inline-block;
	float: left;
}

.btn-info-hidden-1 {
  display: inline-block;
	float: left;	
	margin-right: -5px;
	overflow: hidden;
	width: 0;
	-webkit-transition: width .15s linear;
  transition: width .15s linear;
}

.btn-info-hidden-2 {
	line-height: 18px;
	text-align: center;
  margin-left: 10px;
	width: 60px;
}

.btn-success:hover > .btn-info-hidden-1,
.btn-primary:hover > .btn-info-hidden-1 {
	width: 70px;	
}

.btn-info-hidden-2 {
  display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-round {
  height: 30px;
  border-radius: 15px;
  line-height:1;
  display: inline-block;
  padding: 7px 13px; 
  color: var(--color-white);  
}

.btn-cost-calculator {
  background-color: var(--color-orange-400);  
  border: 1px solid #D5C0A3;
  border-top: 1px solid #EAD3B3;
  border-bottom: 1px solid #BAA78E;  
}

.btn-cost-calculator:hover {
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-orange-500);
}

.btn-cost-calculator:focus {
  color: var(--color-white);
  text-decoration: none;
}

.calculator {
  width: 220px;
  display: inline-block;
  padding: 15px;  
  background-color: var(--content-bg-color);
  position: fixed; 
  top: calc(15px + 104px);
  z-index: 1;
  opacity: 0; 
}

.message-input-container-calculator {
  position: absolute;
  right:18px;
  margin-top:-35px;
  width: 158px;
  text-align:center;  
}

.message-input-arrow-calculator {
  display: inline-block;  
  height: 10px;
  width: 10px;
  background-color: #FFF8D6;
  border: 1px solid #fbeed5; 
  border-right: 1px solid #FFF8D6;  
  border-bottom: 1px solid #FFF8D6;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  border-radius: 0px 0px 10px 0px;
  position: absolute;
  top: 22px;  
  left: 130px;
}

.btn-calculator {  
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  background-image: none;  
  width: 100%;
  height: 23px;  
  line-height: 23px;
  font-size: 12px;
  background-color: var(--btn-default-bg-color);
  border: none;
  user-select: none;  
  color: var(--btn-default-text-color);
}

.btn-calculator:focus,
.btn-view-left:focus,
.btn-view-right:focus {
  outline:none !important;
}

.btn-calculator:hover,
.btn-view-left:hover,
.btn-view-right:hover {  
  background-color: var(--btn-default-hov-bg-color); 
}

table.keyboard-calculator tr td {
  width: 20%;
  padding: 2px;
}

.message-input-container {
  position: absolute;
  left:92px;  
  display: table;
  z-index: 10;  
}

.message-input-arrow {
  display: table-cell;
  vertical-align: middle;  
  height: 28px;
  line-height:1;  
}

.message-input-arrow:before {
  content:"";  
  display: inline-block;  
  height: 10px;
  width: 10px;
  background-color: #FFF8D6;  
  border: 1px solid #fbeed5; 
  border-right: 1px solid #FFF8D6;  
  border-bottom: 1px solid #FFF8D6; 
  margin-right: -6px;  
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-radius: 0px 0px 10px 0px;  
}

.message-input,
.message-input-calculator {
  display: table-cell;
  vertical-align: middle;  
  color: var(--color-black-400);  
  padding: 0px 10px 0px 8px; 
  height: 28px;
  background-color: #FFF8D6;  
  border: 1px solid #fbeed5;
  line-height:1; 
}

.message-input-masking {
  display: table-cell;
  vertical-align: middle;    
  width: 150px;
  height: 28px;  
  background: -webkit-linear-gradient(to left, rgba(256,256,256, 0), var(--color-white) 95%);
  background: linear-gradient(to left, rgba(256,256,256, 0), var(--color-white) 95%);
  line-height:1;   
}

.alert-window-h2 {
  border-bottom: 1px solid #e8e8e8;
  padding: 13px 0px 10px 0px;
  margin: 0px;  
}

.window-modal { 
  padding: 0px 15px 15px;  
  width: 670px;  
  background-color: var(--color-white);
  position: absolute; 
  left: 50%; 
  margin-left: -335px;
  z-index: 980; 
  box-shadow: 0 2px 7px var(--modal-shadow-color);
  margin-bottom: 15px;
}

.name-upload-file {
  display:inline-block;
  line-height: 32px;
}
 
#files {
  margin-top: -10px;  
  height: 10px;
  position: relative;
  z-index: -1;
}

.alert-warning,
.alert-danger,
.alert-success,
.alert-info,
.alert-message,
.alert-error,
.alert-notice,
.confirm { 
  padding: 15px;  
  --width: 570px;
  width: var(--width);
  border-radius: 0;
  background-color: var(--modal-bg-color);  
  position: fixed; /* чтобы окно было в видимой зоне в любом месте */
  top: 50%;
  left: 50%;
  z-index: 998; 
  box-shadow: 0 2px 7px var(--modal-shadow-color);
  color: var(--text-color); 
  min-height: 100px; 
  transform: translate(-50%, -50%);
}

.alert-warning.max,
.alert-danger.max,
.alert-success.max,
.alert-info.max,
.alert-message.max,
.alert-error.max,
.alert-notice.max,
.confirm.max {   
  /* width: auto;
  min-width: 570px;
  max-width: calc(var(--width-container-sh) * 0.9); */
  width: calc(var(--width-container-sh) * 0.75);
}

.alert-header,
.confirm-header,
.alert-heading {
  border-bottom: 1px solid var(--hr-modal-color);  
  padding: 0px 0px 12px 0px; 
  margin: 0 0 15px 0;
}

#alert-content,
#confirm-content {
  max-height: calc(100dvh - (15px * 4) - 48px);
  overflow-y: auto;
  padding-right: 5px; 
}

.alert-warning.max #alert-content,
.alert-danger.max #alert-content,
.alert-success.max #alert-content,
.alert-info.max #alert-content,
.alert-message.max #alert-content,
.alert-error.max #alert-content,
.alert-notice.max #alert-content,
.confirm.max #alert-content {   
  padding-right: 10px;
}

.background-message,
.background-form {  
  position: fixed;
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
  cursor: default;
  z-index: 990; 
  background-color: rgba(0, 0, 0, var(--modal-opacity));
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);  
}

.background-form {
  z-index: 979;  
}

.block-radio {
  display: inline-block;
}

.table-btn-radio {
  text-align: center;
} 

input[type="radio"] { /*Стиль для всех radio*/
  display: none; 
} 

input[type="radio"] + label {
  font-size: 14px;  
  display: inline-block;  
  cursor: pointer;
  text-align: center;  
  -moz-user-select: none;
  -webkit-user-select: none;
}

input[type="radio"] + label.opt-hvac-cal {
  text-align: left;  
}

input[type="radio"] + label > span { 
  display: inline-block;
}
    
input[type="radio"] + label > div { 
  margin-top: 4px;
  height: 3px;
  background-color: var(--radio-line-color);
}

input[type="radio"]:checked + label > div {
  background-color: var(--radio-line-sel-color);
}

.btn-section {
  height: 30px;
  line-height: 28px;
  padding: 0 15px 0 20px;
  border-radius: 15px;
  border: solid #e8e8e8 1px;
  user-select: none;
  font-size: 14px;
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
}

.btn-section:active, 
.btn-section:focus {
  outline: none;
}

.btn-section:hover {
  background-color: var(--color-gray-300);
}

.separator-btn-section {
  height: 1px;
  border-top: 1px solid #e8e8e8;
  position: relative;
  top: -15px;
}

.btn-tile {
  background-color: transparent;
  border: none;
  padding: 0;
}

.btn-tile:active, 
.btn-tile:focus {
  outline: none;
}

.btn-tile-image,
input[type="radio"] + label.btn-radio > .btn-radio-image {
  margin: 0;
  background-color: var(--radio-tile-bg-color);
  background-clip: border-box;
  height: 80px;
  width: 80px;
  background-size: 70px;
  background-position: center center; 
  background-repeat: no-repeat;
  color: var(--color-blue-400);
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  padding: 3px;
  font-size: 70px;
}

.btn-tile-image > span,
.btn-radio-image > span {
  float: left;
  height: 100%;
  width: 100%;
}

input[type="radio"]:checked + label.btn-radio > .btn-radio-image {
  /* background-color: var(--radio-tile-sel-bg-color); */
  border-bottom: 3px solid var(--radio-tile-sel-border-color);
}

.btn-tile-image + div,
input[type="radio"] + label.btn-radio > .btn-radio-image + div {
  color: var(--service-text-color);
  background: none;
  font-size: 12px;
  margin: 5px 0;
  height: auto;
  line-height: 1.25;
}

.btn-tile-image:hover,
input[type="radio"] + label.btn-radio > .btn-radio-image:hover {
  background-color: var(--radio-tile-hov-bg-color);
}

input[type="radio"]:checked + label.btn-radio > .btn-radio-image:hover {
  /* background-color: var(--radio-tile-hov-sel-bg-color); */
}

.btn-tile-image {
  position: relative;
}

.btn-tile-image > span.icon-btn-tile-on,
.btn-tile-image > span.icon-btn-tile-off {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background-color: #ffbe62;
  position: absolute;
  top: 5px;
  right: 5px;
}

.btn-tile-image > span.icon-btn-tile-off {
  background-color: var(--color-gray-600);
}

.separator {
  height: 1px;
  background-color: var(--color-gray-300);
  border-style: solid;
	border-width: 0 1px 0 1px;
  border-color: var(--color-gray-300);
}

.separator > div {
  margin: 0 11px;
  height: 2px;
  background-color: var(--color-gray-500)ddd;
}

.bootstrap-timepicker-widget table td.separator {
  background-color: var(--color-white);
  border: none;
  user-select: none;
}

.hvac-cal-icon-menu {
  margin-left: 5px;
  margin-right: 10px;
  position: relative;
  color: var(--color-blue-400);
  font-size: 18px;
  top: 2px;
}

.opt-hvac-cal {  
  height: 34px;
  width: 100%;
  line-height: 34px;  
  padding: 0px 13px;
  background-color: var(--color-gray-300);
	position: relative;
  border-style: solid;
	border-width: 1px;
  border: none;
}

#radio-menu-1 + label.opt-hvac-cal:hover,
#radio-menu-7 + label.opt-hvac-cal:hover,
#radio-menu-1:checked + label.opt-hvac-cal,
#radio-menu-7:checked + label.opt-hvac-cal {
  border-color: var(--color-blue-400);	
}

#radio-menu-7:checked + label.opt-hvac-cal {
	border-radius: 0;
}

.opt-hvac-cal:hover {
  background: var(--color-blue-400);
  color: var(--color-white); 
	border-color: var(--color-blue-400);
}

.opt-hvac-cal:hover > .hvac-cal-icon-menu {
  color: var(--color-white);    
}

input[type="radio"]:checked + label.opt-hvac-cal {
	transition: color ease-in .4s;
  background:  var(--color-blue-400);
  color: var(--color-white); 
	border-color: var(--color-blue-400) var(--color-blue-400) #4BA0D0 var(--color-blue-400);
} 

input[type="radio"]:checked + label.opt-hvac-cal > .hvac-cal-icon-menu {
	transition: color ease-in .4s;
  color: var(--color-white); 
} 

.container-opt{
  display: inline-block;
  float:left;
  border: 1px solid var(--color-gray-600);  
}

.a {
  border: none;
  background: none; 
  display: inline-block;
  padding:0px;
  cursor: pointer;  
  user-select: none;
}

.a:focus {
  outline:none !important;
}

.star {
  display:none;
}

input[type="checkbox"] { /*Стиль для всех checkbox*/
  display:none; 
}

input[type="checkbox"] + label { /*Стиль для всех label которые присоединены к checkbox*/ 
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
}

input[type="checkbox"] + label > div {
  display: inline-block;
  box-sizing: border-box;
  width: 30px;
  height: 16px;
  border-radius: 8px;  
  padding: 2px;
  margin-right: 10px;       
  background-color: var(--checkbox-oval-bg-color);
  -webkit-transition: background-color ease-in .1s, padding-left ease-in .1s;  
  transition: background-color ease-in .1s, padding-left ease-in .1s;
  float: left;
  font-size: 0;
}

input[type="checkbox"] + label > div > div {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;  
  background-color: var(--checkbox-oval-round-color);
  text-align: center;
} 

input[type="checkbox"]:checked + label > div {
  background-color: var(--checkbox-oval-sel-bg-color);
  padding-left: 16px;
}

input[type="checkbox"] + label {
  line-height: 16px;
  font-size: 14px;
}

input[type="checkbox"] + label.btn-checkbox > img {
  padding: 5px;
  opacity: 1;
}

input[type="checkbox"] + label.btn-checkbox > div {
  color: var(--color-gray-700);
  background: none;
  font-size: 12px;
  margin-top: 5px;
  height: 2.5em;
  width: 100%;
  box-shadow: none;
  display: block;
  padding: 0;
  border-radius: 0;
  line-height: 1.25;
  text-align: center;
}

input[type="checkbox"]:checked + label.btn-checkbox > img { 
  transform: scale(.9, .9);
  background-color: var(--color-gray-400);  
  border-color: #D7D7D7;
  border-width: 1px;
}

input[type="checkbox"] + label.btn-checkbox.one-line > div {
  height: 1em;
}

input[type="checkbox"] + label.btn-checkbox:hover > img { 
  opacity: 1;
  margin: 0;
}

input[type="checkbox"]:checked.btn-checkbox + label:hover > img { 
  opacity: 1;
  margin: 0;
}

.checkbox-table,
.checkbox-table-icon,
input[type="checkbox"] + label.checkmark > div {
  display: inline-block;
  width: 17.5px;
  height: 17.5px;
  border: 2px solid var(--checkbox-table-border-color);
  border-radius: 2px;
  text-align: center;
  line-height: 16px;
  font-size: 14px;
  color: var(--checkbox-table-sel-color);
  float: left;
}

.checkbox-table-icon {
  border: 2px solid var(--checkbox-table-sel-bg-color);
}

input[type="checkbox"] + label.checkmark > div {
  transition: none;
  padding: 0;
  background-color: var(--content-bg-color);
}

input[type="checkbox"][disabled]:checked + label.checkmark > div { 
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}

input[type="checkbox"][disabled] + label.checkmark > div { 
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
  color: var(--color-gray-300);
}

input[type="checkbox"][disabled] + label.checkmark:hover {
  cursor: not-allowed;
}

.checkbox-table-icon {
  background-color: var(--checkbox-table-sel-bg-color);
}

.checkbox-table-icon > span.icon-checkmark {
  color: var(--checkbox-table-sel-color);
}

input[type="checkbox"]:checked + label.checkbox-table,
input[type="checkbox"]:checked + label.checkmark > div { 
  background-color: var(--checkbox-table-sel-bg-color);
  border-color: var(--checkbox-table-sel-bg-color);
}

input[type="checkbox"]:checked + label.checkmark > div { 
  padding-left: 0;
}

input[type="checkbox"]:checked + label.checkbox-table > span,
input[type="checkbox"]:checked + label.checkmark > div > span { 
  display: inline;
}

input[type="checkbox"]:checked + label.checkmark > div > span { 
  display: inline;
}

input[type="checkbox"] + label.checkbox-table > span,
input[type="checkbox"] + label.checkmark > div > span { 
  display: none;
}

input[type="checkbox"] + label.checkmark {
  margin: 2px 0;
}

input[type="checkbox"] + label.checkmark > div + span {
  line-height: 18px;
}

.block-btn-radio-line {
  display: inline-block;
  font-size: 0;
}

input[type="radio"] + label.btn-radio-line {
  background-color: none;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 28px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  color: var(--btn-radio-line-color);
  font-size: 14px;
  float: left;
}

label.btn-radio-line > .icon-grid1,
label.btn-radio-line > .icon-list {
  font-size: 29px;
  line-height: 30px;
}

.btn-icon > .icon-grid1,
.btn-icon > .icon-list {
  font-size: 29px;
}

label.btn-radio-line > .icon-sitemap,
label.btn-radio-line > .icon-file-text {
  font-size: 16px;
  line-height: 30px;
  bottom: 1px;
  position: relative;
}

label.btn-radio-line > .icon-border_color {
  line-height: 29px;
  font-size: 15px;
}

input[type="radio"] + label.btn-radio-line-left {
  border-right: none;
}

input[type="radio"] + label.btn-radio-line-right {
  border-left: none;
}

input[type="radio"]:checked + label.btn-radio-line {
  color: var(--btn-radio-line-sel-color);
}

input[type="radio"] + label.btn-radio-line:hover {
  color: var(--icon-hov-color);
}

input[type="radio"] + label.radio-table {
  padding: 0 15px;
  line-height: 30px;
  width: 100%;
  text-align: left;
  background-color: var(--block-radio-table-bg-color);
  color: var(--radio-table-color);
}

input[type="radio"] + label.radio-table:hover {
  background-color: var(--radio-table-hov-bg-color);
}

input[type="radio"]:checked + label.radio-table {
  background-color: var(--radio-table-sel-bg-color);
  color: var(--radio-table-sel-color);
}

.block-radio-table {
  min-width: 175px;
  padding: 10px 0;
  border-right: 1px solid var(--table-border-color);
  background-color: var(--block-radio-table-bg-color);
}

.btn-slider {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 20px;  
  text-align: center;
  cursor: pointer;
  padding: 10px;  
  font-size: 19px;  
  color: var(--color-black-400);
  background-color: var(--color-gray-300);
}

.btn-slider:hover {
  background-color: #e6e6e6;
}

.form-control,
.form-control-btn,
.form-control-btn-double,
#jform_name,
#jform_username,
#jform_password1,
#jform_password2,
#jform_email1,
#jform_email2,
#jform_email,
#username,
#password,
#jform_token {
  display: inline-block;
  width: 100%;
  height: 30px;
  padding: 5px 7px; 
  box-sizing: border-box;  
  font-size: 14px;
  color: var(--text-color);
  background-color: var(--content-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: 0;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
}

.form-control-btn {
  float: left;
  position: relative;
  z-index: 1;
}

.form-control:focus,
.form-control-btn:focus,
.form-control-btn-double:focus,
#jform_name:focus,
#jform_username:focus,
#jform_password1:focus,
#jform_password2:focus,
#jform_email1:focus,
#jform_email2:focus,
#jform_email:focus,
#username:focus,
#password:focus,
.list-hvac-cal:focus,
.accordion-list {
  outline: 0;
  border-color: var(--input-border-foc-color);
}

.input-box,
.select-box {  
  width: 70px;
  text-align: center; 
}

.btn-input-left,
.btn-input-right {
  border: 1px solid var(--input-border-color);
  background-color: var(--btn-default-bg-color);
  height: 30px;
  line-height: 30px;
  text-align: center;
  min-width: 30px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  float: left;
  line-height: 28px;
  color: var(--btn-default-text-color);
}

.btn-input-left {
  border-right: none;
}

.btn-input-right {
  border-left: none;
}

.btn-input-right + label {
  line-height: 30px;
}

.form-control-btn-double {
  border-radius: 0;
  float: left;
  width: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.btn-input-left:hover,
.btn-input-right:hover {
  background-color: var(--btn-default-hov-bg-color);
}

.btn-input-left:active, 
.btn-input-left:focus,
.btn-input-right:active, 
.btn-input-right:focus {  
  outline: none;
}

.form-control-min {  
  width: auto;
  min-width: 70px;
}

.input-round { /*стиль input поля ввода поиска*/
  display: inline-block;
  line-height: 30px;
  background-color: #565656;
  border: none;
  border-radius: 15px;
  padding: 0 15px;
  color: var(--color-gray-700);
}

.input-round:focus {
  outline: 0;
}

::placeholder { /*стиль текстовой подстказки в input text*/
  color: var(--color-gray-700);
}

.select-box {  
  padding: 0px 17px 0px 3px;
  cursor: pointer; 
  text-align: left;  
}

.select-list {
  width: auto;
  padding: 0px 0px; 
}

.input-box-locked {
  font-weight: bold;
  /* color: var(--text-color); */
  user-select: none; 
}

.input-box-100 {  
  width: 100px;
}

.input-box-150 {  
  width: 150px;
  text-align: left; 
}

.input-box-200 {  
  width: 200px;
  text-align: left; 
}

.input-box-250 {  
  width: 250px;
  text-align: left; 
}

.input-box-300 {  
  width: 300px;
  text-align: left; 
}

.input-box-350 {  
  width: 350px;
  text-align: left; 
}

.input-box-400 {  
  width: 400px;
  text-align: left; 
}

.input-box-btn-100 {  
  width: calc(100px - 30px);
}

.input-box-btn-150 {  
  width: calc(150px - 30px);
  text-align: left; 
}

.input-box-btn-200 {  
  width: calc(200px - 30px);
  text-align: left; 
}

.input-box-btn-250 {  
  width: calc(250px - 30px);
  text-align: left; 
}

.input-box-btn-300 {  
  width: calc(300px - 30px);
  text-align: left; 
}

.input-box-btn-350 {  
  width: calc(350px - 30px);
  text-align: left; 
}

.input-box-btn-400 {  
  width: calc(400px - 30px);
  text-align: left; 
}

.sub-btn,
.btn,
.btn-icon {  
  display: inline-block;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  font-size: 14px;
  user-select: none; 
  border: none;
  box-sizing: border-box;
}

.sub-btn,
.btn {  
  min-width: 80px;
  padding: 7px 13px;
  height: 34px;
  margin-bottom: 0;
}

.sub-btn {
  min-width: 34px;
  width: 34px;
  padding: 7px 0;
  vertical-align: middle;
}

.sub-btn.btn-primary {
  border-left: 1px solid var(--color-blue-500);
}

.sub-btn.btn-default {
  border-left: 1px solid var(--btn-default-hov-bg-color);
}

.sub-btn .icon-dots-three-vertical {
  position: relative;
  top: 1px;
}
  
.btn-icon {
  display: flex;
  height: 30px;
  min-width: 30px;
  padding: 0;
  align-items: center; /* вертикальное центрирование */
  justify-content: center; /* горизонтальное центрирование */
  /* background-color: var(--color-gray-300);  */
  background-color: transparent;
  color: var(--text-color);
}

.btn-icon:hover {
  color: var(--icon-hov-color) !important; 
}

.btn:focus,
.btn-icon:focus {
  outline:none !important;
} 

.btn-default {  
  background-color: var(--btn-default-bg-color);   
}

.btn-default:hover {
  background-color: var(--btn-default-hov-bg-color);
}

.btn-default,
.btn-default:hover {  
  color: var(--btn-default-text-color);  
}

.btn-primary {
  background-color: var(--btn-primary-bg-color);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hov-bg-color);
}

.btn-primary,
.btn-primary:hover {  
  color: var(--btn-primary-text-color);  
}

.btn-success {
  background-color: var(--btn-success-bg-color); 
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--btn-success-hov-bg-color); 
}

.btn-success,
.btn-success:hover {
  color: var(--btn-success-text-color);; 
}

.btn-warning {
  background-color:var(--color-orange-400);     
}

.btn-warning:hover {
  background-color: var(--color-orange-500);
}

.btn-warning,
.btn-warning:hover {
  color: var(--btn-warning-text-color);
}

.btn-parall { /* параллелограмм */
  clip-path: polygon(6px 0, 0 100%, calc(100% - 6px) 100%, 100% 0);
  padding-left: 17px;
  padding-right: 17px;
}

.btn-parall-left { /* параллелограмм срез по левой грани */
  clip-path: polygon(6px 0, 0 100%, 100% 100%, 100% 0);
  padding-left: 17px;
}

.btn-parall-right { /* параллелограмм срез по правой грани */
  clip-path: polygon(0 0, 0 100%, calc(100% - 6px) 100%, 100% 0);
  padding-right: 17px;
}

.button-round { /*стиль кнопки поиска*/
  height: 28px; 
  line-height: 0.9;
  margin: 0px 0px 0px -4px;
  border: 1px solid #839BAB;
  padding: 5px 10px;  
}

#modal_form0 {
  padding: 0px 15px 15px 15px;  
  width: 420px;  
  border: 1px solid #999797;
  background-color: var(--color-white);  
  position: fixed; /* чтобы окно было в видимой зоне в любом месте */
  top: 50%; /* отступаем сверху 50% */
  left: 50%; /* половина экрана слева */
  margin-top: -80px; /* вверх минус половину высоты */
  margin-left: -362px; /* отступаем влево минус половину ширины плюс 1/2 ширины боковых модулей */
  display: none; /* в обычном состоянии окна не должно быть */
  z-index: 998; /* окно должно быть наиболее большем слое */  
  box-shadow: 0 2px 6px #525252;   
}

#overlay { /* подложка */
  z-index: 996; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
  position: fixed; /* всегда перекрывает весь сайт */
  background-color: #000; /* черная */
  opacity: 0.45; /* но немного прозрачна */
  width: 100%; 
  height: 100%; /* размером во весь экран */
  top: 0; 
  left: 0; /* сверху и слева 0, обязательные свойства! */
  cursor: default;
  display: none; /* в обычном состоянии её нет) */
  opacity: 0.4;  
}

.header-alert0 {
  border-bottom: 1px solid #e8e8e8;
  font-size:19px;
  padding: 10px 0px 5px 0px; 
  margin-bottom:10px;
  color: var(--h-color);
}

#content-alert0 {
  min-height: 3.75em;
}

.sym-close-rect0 {
  position: absolute;
  right:2px;
  top:2px; 
  cursor:pointer;  
  display:inline-block;  
  color: var(--color-blue-400);
}

.sym-close-rect:hover {
  color:var(--color-blue-500);
}

.sym-close-round {
  position: absolute;
  right:-7px;
  top:-7px; 
  cursor:pointer;  
  display:inline-block;
  background: var(--color-white);
  width: 20px;  
  padding:1px;  
  font-size: 19px;
  border-radius:10px;  
  color: var(--color-blue-400);
  box-shadow: 0 2px 6px #525252;   
}

.sym-close-round:hover {
  color:var(--color-blue-500);
} 

.select-list-calculator {
  width: 100%;
  font-size: 12px;
  overflow: auto;
  text-align: right;
  border-radius: 0;
  background-color: var(--content-bg-color);  
}

.input-box-calculator {
  text-align: Right;
  width: 100%;
  margin-bottom: 9px; 
}

.btn-view-calculator {
  width: 40px;
  min-height: 40px;
  position: fixed;
  top: 15px;
  background-color: var(--menu-datalist-bg-color);
  font-size: 16px;
  color: var(--btn-default-text-color); /* --text-color */
  display: inline-block;
  z-index: 1;
  margin-left: -71px;
  border-radius: 21px;
  box-sizing: content-box;
  cursor: pointer;
  text-align: center;
  /* border: 1px solid var(--body-color);
  box-sizing: border-box; */
}

#btn-view-calculator:before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 5px;
  background-color: var(--menu-datalist-bg-color);
  position: absolute;
  top: 4px;
  z-index: 2;
}

.btn-view-calculator > div {
  height: 37px;
  display: inline-block;
  line-height: 35px;
  text-align: center;
  width: 100%;
  position: relative;
}

.btn-view-calculator .icon-arrow-left2 {
  top: 4px;
}

.btn-view-calculator .icon-calculate {
  font-size: 22px;
  left: 0.5px;
  top: 2px;
}

.btn-view-calculator > div > span {
  position: relative;
}

.btn-view-calculator > div > span.icon-home {
  left: 0.5px;
  top: 4px;
}

.btn-view-calculator > div > span.icon-calculator1 {
  left: 1px;
  top: -1px;
}

.btn-view-calculator > div:hover {
  color: var(--icon-hov-color);
}

input[type=range] {
  -webkit-appearance: none; /* Скрывает слайдер, чтобы можно было создать свой */
  width: 100%;
  cursor: pointer;
  outline: none !important;
}

input[type=range]:focus {
  outline: none; /* Убирает голубую границу у элемента*/
}

input[type=range]::-webkit-slider-thumb { /*стиль шайбы ползунка*/
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  margin-top: -7px;
  background-color: var(--color-blue-400);
  border: none;
}

input[type="range"]::-moz-range-thumb {  /*стиль шайбы ползунка*/
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  margin-top: -7px;
  background-color: var(--color-blue-400);
  border: none;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--color-blue-500);
}

input[type="range"]::-webkit-slider-runnable-track { /*стиль линии ползунка*/
  height: 2px;
  background-color: var(--input-border-color);
}

input[type="range"]::-moz-range-track { /*стиль линии ползунка*/
  height: 2px;
  background-color: var(--input-border-color);
}

.range-round,
.range-square {
  display: inline-block;
  width: 150px;
}

.box-range-square {
  height: 30px;
  display: block;
  float: none;
}

.range-square {
  width: 70px;
  height: 30px;
  float: left;
  background-color: var(--color-gray-300);
}

.range-square + div {
  height: 30px;
  display: inline-block;
  float: left;
}

.range-square input[type=range]::-webkit-slider-thumb { /*стиль шайбы ползунка*/
  -webkit-appearance: none;
  height: 30px;
  width: 11px;
  border-radius: 0;
  margin: 0;
  background-color: var(--color-blue-400);
  position: relative;
  z-index: 1;
}

.range-square input[type=range]::-moz-range-thumb { /*стиль шайбы ползунка*/
  -webkit-appearance: none;
  height: 30px;
  width: 11px;
  border-radius: 0;
  margin: 0;
  background-color: var(--color-blue-400);
  position: relative;
  z-index: 1;
}

.range-square input[type=range]::-webkit-slider-thumb:hover {
  background-color: var(--color-blue-500);
}

.range-square input[type=range]::-webkit-slider-runnable-track { /*стиль линии ползунка*/
  height: 0px;
}

.range-square input[type=range]::-moz-range-track { /*стиль линии ползунка*/
  height: 0px;
}

.range-square .background-left,
.range-square .background-right {
  width: 50%;
  height: 28px;
  display: inline-block;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

.range-square .background-right {
  background-color: var(--color-gray-300);
}

.range-caption-left,
.range-caption-right {
  display: inline-block;
  display: table-cell;
  float: left;
  padding-top: 15px;
  width: 50%;
  color: var(--service-text-color);
  font-size: 12px;
}

.range-caption-left {
  text-align: left;
}

.range-caption-right {
  text-align: right;  
}

.bar-menu-app {
  width: 100%;
  background-color: var(--bar-menu-app-bg-color);
}

.menu-app {
  width: var(--width-container-sh);
  margin-left: auto;
  margin-right: auto;
  display: table;
  position: relative;
  padding: 0 1px;
  text-align: left;
}

div.btn-radio-menu-app,
input[type="radio"] + label.btn-radio-menu-app {
  cursor: pointer;
  display: inline-block;
  float: left;
  position: relative;
  background-color: var(--bar-menu-app-bg-color);
  user-select: none;
  width: 84px;
  text-align: center;
}

input[type="radio"] + label.btn-radio-menu-app > div {
  height: auto;
  background: none;
  margin: 0;
}

.btn-radio-menu-app > .icon-menu-app,
input[type="radio"] + label.btn-radio-menu-app > .icon-menu-app {
  font-size: 24px;
  color: var(--btn-radio-menu-app-icon-color);
  height: 57px;
  line-height: 57px;
}

input[type="radio"] + label.btn-radio-menu-app > .icon-menu-app {
  margin-top: 3px;
}

.btn-radio-menu-app > .text-menu-app,
input[type="radio"] + label.btn-radio-menu-app > .text-menu-app {
  color: var(--btn-radio-menu-app-text-color);
  font-size: 12px;
  padding-bottom: 10px;
  height: auto;
  background: none;
}

.icon-menu-app > span {
  position: relative;
  display: inline-block;
}

/* input[type="radio"]:checked + .btn-radio-menu-app > .icon-menu-app {
  color: var(--color-blue-400);
} */

input[type="radio"]:checked + .btn-radio-menu-app,
div.btn-radio-menu-app:hover,
input[type="radio"] + label.btn-radio-menu-app:hover {
  background-color: var(--btn-radio-menu-app-sel-bg-color);
}

.submenu {
  display: inline-block;
  background-color: var(--color-white);
  cursor: default;
  padding: 7px 0;
  box-shadow: 0 2px 7px rgba(140, 140, 140, 0.55);
  position: absolute;
  font-size: 14px;
  z-index: 3;
  top: 97px;
  float: left;
  left: 0;
}

.submenu > label,
.submenu > li {
  padding-left: 20px;
  padding-right: 20px;
  color: var(--color-black-400);
  width: 100%;
  text-align: left;
  list-style-type: none;
  cursor: pointer;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  user-select: none;
}

.submenu > li.service-text {
  color: var(--color-gray-700);
}

.submenu span {
  font-size: 16px;
  margin-right: 15px;
  position: relative;
  display: inline-block;
}

.submenu > label:hover,
.submenu > li:hover {
  background-color: var(--color-gray-300);
  text-decoration: none;
}

button.btn > span.icon-add_box,
div.btn > span.icon-add_box {
  font-size: 15px;
  position: relative;
  top: 1px;
}

.on-basket {
  color: var(--color-green-300);
}

.td-grey,
.input-td-grey {
  background-color: var(--input-td-grey-bg-color);
}

.input-td-grey {
  border-color: var(--input-td-grey-bg-color);
}

.input-error {
  background-color: var(--color-red-300);
}

.icon-btn.icon-info_outline {
  font-size: 17px;
  position: relative;
  float: left;
}

button > span.icon-switch {
  font-size: 13px;
}

select[size] option:checked { /* уже развернутый select */
  background-color: var(--option-size-sel-bg-color);
  color: var(--option-size-sel-text-color);
}

select:not([size]) option:checked { /* разворачиваемый select */

}

.form-control.bold-text {
  color: var(--bold-text-color);
}