@charset "UTF-8";
.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

.collapse {
  display: none;
}

.collapse.in {
  display: block;
}

tr.collapse.in {
  display: table-row;
}

tbody.collapse.in {
  display: table-row-group;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition-property: height, visibility;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9 ;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropup, .dropdown {
  position: relative;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  color: #777;
}

.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.open > .dropdown-menu {
  display: block;
}

.open > a {
  outline: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}

.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid \9 ;
}

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}

/* ----------------Nav------------------------- */
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav > li {
  position: relative;
  display: block;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav > li > a:hover, .nav > li > a:focus {
  /*text-decoration: none;
  background-color: #eee*/
}

.nav > li.disabled > a {
  color: #777;
}

.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  /*background-color: #eee;*/
  /*border-color: #337ab7*/
}

.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.nav > li > a > img {
  max-width: none;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  /*border-color: #eee #eee #ddd*/
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}

.nav-tabs.nav-justified > li {
  float: none;
}

.nav-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}

.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}

.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.nav-pills > li {
  float: left;
}

.nav-pills > li > a {
  border-radius: 4px;
}

.nav-pills > li + li {
  margin-left: 2px;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}

.nav-stacked > li {
  float: none;
}

.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

.nav-justified {
  width: 100%;
}

.nav-justified > li {
  float: none;
}

.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}

.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}

.nav-tabs-justified {
  border-bottom: 0;
}

.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}

.nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus {
  border: 1px solid #ddd;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Modal */
.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.fade .modal-dialog {
  transform: translate(0, -25%);
  transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}

.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.42857143;
}

.modal-body {
  position: relative;
  padding: 15px;
}

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.clearfix:before, .clearfix:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after {
  display: table;
  content: " ";
}

.clearfix:after, .form-horizontal .form-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .modal-header:after, .modal-footer:after {
  clear: both;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.hidden {
  display: none !important;
}

.affix {
  position: fixed;
}

/* ui toggle checkbox  semantic.min */
/* ------------ tooltips --------------- */
::-moz-selection {
  background-color: #cce2ff;
  color: rgba(0, 0, 0, 0.87);
}
::selection {
  background-color: #cce2ff;
  color: rgba(0, 0, 0, 0.87);
}

body ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

body ::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

body ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

/* : before */
*, :after, :before {
  box-sizing: inherit;
}

/* ------------------- dropdown ----------------------*/
.ui.dropdown {
  cursor: pointer;
  position: relative;
  display: inline-block;
  outline: 0;
  text-align: left;
  transition: box-shadow 0.1s ease, width 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

select.ui.dropdown {
  height: 38px;
  padding: 0.5em;
  border: 1px solid rgba(34, 36, 38, 0.15);
  visibility: visible;
}

/* input */
button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

.ui.checkbox input[type=checkbox], .ui.checkbox input[type=radio] {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0 !important;
  outline: 0;
  z-index: 3;
  width: 17px;
  height: 17px;
}

.ui.toggle.checkbox input {
  width: 3.5rem;
  height: 1.5rem;
}

/* label */
.ui.checkbox label:hover, .ui.checkbox + label:hover {
  color: rgba(0, 0, 0, 0.8);
}

.ui.checkbox .box, .ui.checkbox label {
  cursor: auto;
  position: relative;
  display: block;
  padding-left: 1.85714em;
  outline: 0;
  font-size: 1em;
}

.ui.checkbox label, .ui.checkbox + label {
  color: rgba(0, 0, 0, 0.87);
  transition: color 0.1s ease;
}

.ui.toggle.checkbox .box, .ui.toggle.checkbox label {
  min-height: 1.5rem;
  padding-left: 4.5rem;
  color: rgba(0, 0, 0, 0.87);
}

.ui.toggle.checkbox label {
  padding-top: 0.15em;
}

/* before*/
.ui.checkbox .box:before, .ui.checkbox label:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  content: "";
  background: #fff;
  border-radius: 0.21428571rem;
  transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
  border: 1px solid #d4d4d5;
}

.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
  display: block;
  position: absolute;
  content: "";
  z-index: 1;
  transform: none;
  border: none;
  top: 0;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: none;
  width: 3.5rem;
  height: 1.5rem;
  border-radius: 500rem;
}

/* after */
.ui.checkbox .box:after, .ui.checkbox label:after {
  position: absolute;
  font-size: 14px;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  text-align: center;
  opacity: 0;
  color: rgba(0, 0, 0, 0.87);
  transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.ui.checkbox .box:after, .ui.checkbox label:after {
  font-family: Checkbox;
}

.ui.checkbox .box:active::after, .ui.checkbox label:active::after {
  color: rgba(0, 0, 0, 0.95);
}

.ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after {
  background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  position: absolute;
  content: "" !important;
  opacity: 1;
  z-index: 2;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  width: 1.5rem;
  height: 1.5rem;
  top: 0;
  left: 0;
  border-radius: 500rem;
  transition: background 0.3s ease, left 0.3s ease;
}

.ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
  opacity: 1;
  color: rgba(0, 0, 0, 0.95);
}

.ui.toggle.checkbox input ~ .box:after, .ui.toggle.checkbox input ~ label:after {
  left: -0.05rem;
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
}

.ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
  content: "\e800";
  /*content: '\fa-check';*/
}

.ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after {
  left: 2.15rem;
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
}

/* custom -semantic */
.ui.input > input {
  margin: 0;
  max-width: 100%;
  flex: 1 0 auto;
  outline: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  text-align: left;
  line-height: 1.21428571em;
  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
  padding: 0.67857143em 1em;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  transition: box-shadow 0.1s ease, border-color 0.1s ease;
  box-shadow: none;
}

.ui.input.down input, .ui.input > input:active {
  border-color: rgba(0, 0, 0, 0.3);
  background: #fafafa;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: none;
}

.ui.input {
  position: relative;
  font-weight: 400;
  font-style: normal;
  /*display: -webkit-inline-box;
  display: -ms-inline-flexbox;*/
  display: inline-flex;
  color: rgba(0, 0, 0, 0.87);
  width: 100%;
}

/*.ui.input::-webkit-input-placeholder { !* Chrome/Opera/Safari *!
    color: pink;
}*/
/* BUTTON */
.ui.button {
  padding: 0.7em 1.5em;
  cursor: pointer;
  border-radius: 0.28571429rem;
  padding: 0.78571429em 1.5em 0.78571429em;
  line-height: 1em;
  font-style: normal;
  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
  border: unset;
}

.ui.button:hover {
  background-color: #cacbcd;
  background-image: none;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  color: rgba(0, 0, 0, 0.8);
}

/* RADIO */
.ui.radio.checkbox {
  min-height: 15px;
  margin-left: 30px;
}

.ui.checkbox {
  position: relative;
  display: inline-block;
  backface-visibility: hidden;
  outline: 0;
  vertical-align: baseline;
  font-style: normal;
  min-height: 17px;
  font-size: 1rem;
  line-height: 17px;
  min-width: 17px;
}

/*
.ui.checkbox input[type=checkbox], .ui.checkbox input[type=radio] {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0!important;
    outline: 0;
    z-index: 3;
    width: 17px;
    height: 17px;
}*/
.ui.radio.checkbox .box:after, .ui.radio.checkbox label:after {
  top: 1px;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 500rem;
  /*-webkit-transform: scale(.46666667);*/
  transform: scale(0.46666667);
  background-color: rgba(0, 0, 0, 0.87);
}

.ui.radio.checkbox .box:before, .ui.radio.checkbox label:before {
  content: "";
  transform: none;
  width: 15px;
  height: 15px;
  border-radius: 500rem;
  top: 1px;
  left: 0;
}

/* TABLE */
.ui.table {
  font-size: 1em;
}

.ui.table {
  width: 100%;
  background: #fff;
  margin: 1em 0;
  border: 1px solid rgba(34, 36, 38, 0.15);
  box-shadow: none;
  border-radius: 0.28571429rem;
  text-align: left;
  color: rgba(0, 0, 0, 0.87);
  border-collapse: separate;
  border-spacing: 0;
}

/* ------ thead ------- */
.ui.table thead {
  box-shadow: none;
}

.ui.table thead tr:first-child > th:first-child {
  border-radius: 0.28571429rem 0 0 0;
}

/*------- tr --------*/
.ui.celled.table tr td:first-child, .ui.celled.table tr th:first-child {
  border-left: none;
}

/*----- th ------*/
.ui.table thead th {
  cursor: auto;
  background: #f9fafb;
  text-align: inherit;
  color: rgba(0, 0, 0, 0.87);
  padding: 0.92857143em 0.78571429em;
  vertical-align: inherit;
  font-style: unset;
  font-weight: 700;
  text-transform: none;
  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  border-left: none;
}

.ui.table td, .ui.table th {
  transition: background 0.1s ease, color 0.1s ease;
}

/*--- td --------*/
.ui.table td, .ui.table th {
  transition: background 0.1s ease, color 0.1s ease;
}

.ui.table td {
  padding: 0.78571429em 0.78571429em;
  text-align: inherit;
}

.ui.table tr td {
  border-top: 1px solid rgba(34, 36, 38, 0.1);
}

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

.ui.celled.table tr td, .ui.celled.table tr th {
  border-left: 1px solid rgba(34, 36, 38, 0.1);
}

.ui.celled.table tr td:first-child, .ui.celled.table tr th:first-child {
  border-left: none;
}

/* 26840 - 27190 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:before {
  pointer-events: none;
  position: absolute;
  content: "";
  font-size: 1rem;
  width: 0.71428571em;
  height: 0.71428571em;
  background: #fff;
  transform: rotate(45deg);
  z-index: 2;
  box-shadow: 1px 1px 0 0 #bababc;
}

[data-tooltip]:after {
  pointer-events: none;
  content: attr(data-tooltip);
  position: absolute;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  font-size: 1rem;
  border: 1px solid #d4d4d5;
  line-height: 1.4285em;
  max-width: none;
  background: #fff;
  padding: 0.833em 1em;
  font-weight: 400;
  font-style: normal;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  z-index: 2;
}

[data-tooltip]:not([data-position]):before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 50%;
  background: #fff;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}

[data-tooltip]:not([data-position]):after {
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.5em;
}

[data-tooltip]:after, [data-tooltip]:before {
  pointer-events: none;
  visibility: hidden;
}

[data-tooltip]:before {
  opacity: 0;
  transform: rotate(45deg) scale(0) !important;
  transform-origin: center top;
  transition: all 0.1s ease;
}

[data-tooltip]:after {
  opacity: 1;
  transform-origin: center bottom;
  transition: all 0.1s ease;
}

[data-tooltip]:hover:after, [data-tooltip]:hover:before {
  visibility: visible;
  pointer-events: auto;
}

[data-tooltip]:hover:before {
  transform: rotate(45deg) scale(1) !important;
  opacity: 1;
}

[data-tooltip]:after, [data-tooltip][data-position="bottom center"]:after, [data-tooltip][data-position="top center"]:after {
  transform: translateX(-50%) scale(0) !important;
}

[data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after {
  transform: translateX(-50%) scale(1) !important;
}

[data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after {
  transform: translateY(-50%) scale(0) !important;
}

[data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after {
  transform: translateY(-50%) scale(1) !important;
}

[data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after, [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after {
  transform: scale(0) !important;
}

[data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after, [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after {
  transform: scale(1) !important;
}

[data-tooltip][data-inverted]:before {
  box-shadow: none !important;
}

[data-tooltip][data-inverted]:before {
  background: #1b1c1d;
}

[data-tooltip][data-inverted]:after {
  background: #1b1c1d;
  color: #fff;
  border: none;
  box-shadow: none;
}

[data-tooltip][data-inverted]:after .header {
  background-color: none;
  color: #fff;
}

[data-position="top center"][data-tooltip]:after {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.5em;
}

[data-position="top center"][data-tooltip]:before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 50%;
  background: #fff;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}

[data-position="top left"][data-tooltip]:after {
  top: auto;
  right: auto;
  left: 0;
  bottom: 100%;
  margin-bottom: 0.5em;
}

[data-position="top left"][data-tooltip]:before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 1em;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}

[data-position="top right"][data-tooltip]:after {
  top: auto;
  left: auto;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.5em;
}

[data-position="top right"][data-tooltip]:before {
  top: auto;
  left: auto;
  bottom: 100%;
  right: 1em;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}

[data-position="bottom center"][data-tooltip]:after {
  bottom: auto;
  right: auto;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}

[data-position="bottom center"][data-tooltip]:before {
  bottom: auto;
  right: auto;
  top: 100%;
  left: 50%;
  margin-left: -0.07142857rem;
  margin-top: 0.14285714rem;
}

[data-position="bottom left"][data-tooltip]:after {
  left: 0;
  top: 100%;
  margin-top: 0.5em;
}

[data-position="bottom left"][data-tooltip]:before {
  bottom: auto;
  right: auto;
  top: 100%;
  left: 1em;
  margin-left: -0.07142857rem;
  margin-top: 0.14285714rem;
}

[data-position="bottom right"][data-tooltip]:after {
  right: 0;
  top: 100%;
  margin-top: 0.5em;
}

[data-position="bottom right"][data-tooltip]:before {
  bottom: auto;
  left: auto;
  top: 100%;
  right: 1em;
  margin-left: -0.14285714rem;
  margin-top: 0.07142857rem;
}

[data-position="left center"][data-tooltip]:after {
  right: 100%;
  top: 50%;
  margin-right: 0.5em;
  transform: translateY(-50%);
}

[data-position="left center"][data-tooltip]:before {
  right: 100%;
  top: 50%;
  margin-top: -0.14285714rem;
  margin-right: -0.07142857rem;
}

[data-position="right center"][data-tooltip]:after {
  left: 100%;
  top: 50%;
  margin-left: 0.5em;
  transform: translateY(-50%);
}

[data-position="right center"][data-tooltip]:before {
  left: 100%;
  top: 50%;
  margin-top: -0.07142857rem;
  margin-left: 0.14285714rem;
}

[data-position~=bottom][data-tooltip]:before {
  background: #fff;
  box-shadow: -1px -1px 0 0 #bababc;
}

[data-position="left center"][data-tooltip]:before {
  background: #fff;
  box-shadow: 1px -1px 0 0 #bababc;
}

[data-position="right center"][data-tooltip]:before {
  background: #fff;
  box-shadow: -1px 1px 0 0 #bababc;
}

[data-position~=top][data-tooltip]:before {
  background: #fff;
}

/*[data-position~=left][data-tooltip]:before {
    background: #fff
}*/
[data-inverted][data-position~=bottom][data-tooltip]:before {
  background: #1b1c1d;
  box-shadow: -1px -1px 0 0 #bababc;
}

[data-inverted][data-position="left center"][data-tooltip]:before {
  background: #1b1c1d;
  box-shadow: 1px -1px 0 0 #bababc;
}

[data-inverted][data-position="right center"][data-tooltip]:before {
  background: #1b1c1d;
  box-shadow: -1px 1px 0 0 #bababc;
}

[data-inverted][data-position~=top][data-tooltip]:before {
  background: #1b1c1d;
}

[data-position~=bottom][data-tooltip]:before {
  transform-origin: center bottom;
}

[data-position~=bottom][data-tooltip]:after {
  transform-origin: center top;
}

[data-position="left center"][data-tooltip]:before {
  transform-origin: top center;
}

[data-position="left center"][data-tooltip]:after {
  transform-origin: right center;
}

[data-position="right center"][data-tooltip]:before {
  transform-origin: right center;
}

[data-position="right center"][data-tooltip]:after {
  transform-origin: left center;
}

.fountainG {
  display: inline-block;
  position: static;
  background-color: #5977b3;
  width: 10px;
  height: 10px;
  animation-name: bounce_fountainG;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  transform: scale(0.3);
  -webkit-transform: scale(0.3);
  border-radius: 9px;
}

/*#fountainG_1{ animation-delay:0.6s;}
#fountainG_2{  animation-delay:0.75s;}
#fountainG_3{  animation-delay:0.9s;}
#fountainG_4{ animation-delay:1.05s;}
#fountainG_5{  animation-delay:1.20s;}*/
/*#fountainG_1{ animation-delay:1.2s;}
#fountainG_2{  animation-delay:1.5s;}
#fountainG_3{  animation-delay:1.8s;}
#fountainG_4{ animation-delay:2.10s;}
#fountainG_5{  animation-delay:2.40s;}*/
#fountainG_5 {
  animation-delay: 0.4s;
}

#fountainG_1 {
  animation-delay: 0.8s;
}

#fountainG_2 {
  animation-delay: 1.2s;
}

#fountainG_3 {
  animation-delay: 1.6s;
}

#fountainG_4 {
  animation-delay: 2s;
}

@keyframes bounce_fountainG {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    background-color: #333b66;
  }
  100% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    background-color: #5977b3;
  }
}
body, html {
  height: unset;
}

body {
  background-color: #f7f7f7;
}

body.BlackMode {
  background-color: #333;
}
body.BlackMode #buildMenu {
  background-color: #171717;
}
body.BlackMode #buildMenu .awesome a::before {
  background: #444;
}
body.BlackMode #buildMenu .center-box {
  border-left: 1px solid #000;
}
body.BlackMode #intext0.blur,
body.BlackMode #intext1.blur,
body.BlackMode #intext.blur {
  background-color: rgba(237, 237, 237, 0.4) !important;
}
body.BlackMode #Klava, body.BlackMode #Calendar, body.BlackMode #Builder, body.BlackMode #Klava2 {
  color: #eee !important;
}
body.BlackMode #Klava .cover-box .over-bg, body.BlackMode #Calendar .cover-box .over-bg, body.BlackMode #Builder .cover-box .over-bg, body.BlackMode #Klava2 .cover-box .over-bg {
  background-color: #333;
}
body.BlackMode #Klava .left-nav > .nav-tabs, body.BlackMode #Calendar .left-nav > .nav-tabs, body.BlackMode #Builder .left-nav > .nav-tabs, body.BlackMode #Klava2 .left-nav > .nav-tabs {
  background: #111;
}
body.BlackMode #Klava .tab-content, body.BlackMode #Calendar .tab-content, body.BlackMode #Builder .tab-content, body.BlackMode #Klava2 .tab-content {
  border: solid 1px #000;
}
body.BlackMode #Klava .bar-box, body.BlackMode #Calendar .bar-box, body.BlackMode #Builder .bar-box, body.BlackMode #Klava2 .bar-box {
  background: linear-gradient(180deg, #222, #333);
}
body.BlackMode #Klava .menuPanel .left-nav li.active a,
body.BlackMode #Klava .menuPanel .left-nav li:hover a, body.BlackMode #Calendar .menuPanel .left-nav li.active a,
body.BlackMode #Calendar .menuPanel .left-nav li:hover a, body.BlackMode #Builder .menuPanel .left-nav li.active a,
body.BlackMode #Builder .menuPanel .left-nav li:hover a, body.BlackMode #Klava2 .menuPanel .left-nav li.active a,
body.BlackMode #Klava2 .menuPanel .left-nav li:hover a {
  background: #444;
}
body.BlackMode #Klava .menuPanel .colorPanel, body.BlackMode #Calendar .menuPanel .colorPanel, body.BlackMode #Builder .menuPanel .colorPanel, body.BlackMode #Klava2 .menuPanel .colorPanel {
  border: 1px solid #111;
}
body.BlackMode .menuPanel .tab-pane {
  background-color: rgba(0, 0, 0, 0.5843137255);
  border-radius: 0 10px 10px 0;
  color: #eee !important;
}
body.BlackMode .menuPanel .tab-pane #intext0, body.BlackMode .menuPanel .tab-pane #intext1,
body.BlackMode .menuPanel .tab-pane #intext, body.BlackMode .menuPanel .tab-pane #trans {
  color: #eee !important;
}
body.BlackMode #panelPanels .tasks-box,
body.BlackMode #panelTables .tasks-box,
body.BlackMode #panelKeyboard .tasks-box {
  background-color: rgba(0, 0, 0, 0.4392156863);
}
body.BlueMode {
  background-color: rgba(89, 104, 179, 0.7);
}
body.BlueMode .buildMenu {
  background-color: rgba(89, 104, 179, 0.7);
}
body.BlueMode #intext0.blur,
body.BlueMode #intext1.blur,
body.BlueMode #intext.blur {
  background-color: rgba(237, 237, 237, 0.4);
}
body.BlueMode #Klava, body.BlueMode #Calendar, body.BlueMode #Builder, body.BlueMode #Klava2 {
  color: #eee !important;
}
body.BlueMode #Klava .cover-box .over-bg, body.BlueMode #Calendar .cover-box .over-bg, body.BlueMode #Builder .cover-box .over-bg, body.BlueMode #Klava2 .cover-box .over-bg {
  background-color: rgba(89, 104, 179, 0.7098039216);
}
body.BlueMode .menuPanel .tab-pane {
  background-color: rgba(89, 104, 179, 0.95);
  border-radius: 0 10px 10px 0;
  color: #eee !important;
}
body.BlueMode .menuPanel .tab-pane #intext0, body.BlueMode .menuPanel .tab-pane #intext1,
body.BlueMode .menuPanel .tab-pane #intext, body.BlueMode .menuPanel .tab-pane #trans {
  color: #eee !important;
}
body.BlueMode #panelPanels .tasks-box,
body.BlueMode #panelTables .tasks-box,
body.BlueMode #panelKeyboard .tasks-box {
  background-color: rgba(89, 104, 179, 0.7);
}
/* ================================== */
/*----------------------------*/
/*-----------------------*/
p, li, address, dd, blockquote, td, th, a, body, h1, h2, h3, h4, h5, h6, p, dl, ul, ol {
  color: #1c1c1c;
}

a, a:hover {
  text-decoration: none;
  outline-offset: unset;
  outline: unset;
}

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
}

* {
  box-sizing: border-box;
}

ol, ul {
  margin-top: 0;
}

input, textarea {
  border-color: unset;
}

input:focus, textarea:focus {
  outline-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
}

.menu-select {
  display: none;
  overflow: hidden;
  position: relative;
  width: 75%;
  margin: 20px auto;
}

.inner {
  margin: 0 auto;
}

/*@media screen and (min-width: 2000px) {
  .inner {
    width: 1920px; } }*/
@media screen and (min-width: 2500px) {
  .inner {
    width: 2400px;
  }
}
.red {
  color: #fc046b;
}

.rotate180 {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.relative {
  position: relative;
}

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

.flex {
  display: flex;
}

.displayNone {
  display: none;
}

/* Hight relative */
.rel-12 {
  height: 12px;
  height: calc(6px + 0.3vw);
}

.rel-18 {
  height: 18px;
  height: calc(9px + 0.4vw);
}

.rel-24 {
  height: 24px;
  height: calc(12px + 0.6vw);
}

.rel-32 {
  height: 32px;
  height: calc(16px + 0.8vw);
}

.rel-36 {
  height: 36px;
  height: calc(18px + 0.9vw);
}

.rel-48 {
  height: 48px;
  height: calc(24px + 1.2vw);
}

/* Size relative */
.size-18 {
  font-size: 18px;
  font-size: calc(9px + 0.4vw);
}

.size-22 {
  font-size: 22px;
  font-size: calc(11px + 0.5vw);
}

.size-24 {
  font-size: 24px;
  font-size: calc(12px + 0.6vw);
}

.size-28 {
  font-size: 28px;
  font-size: calc(14px + 0.7vw);
}

.size-36 {
  font-size: 36px;
  font-size: calc(18px + 0.9vw);
}

body.modal-open {
  padding: unset !important;
}

input[type=number]::-webkit-inner-spin-button {
  height: 50px;
}

/*.wrapper{
  margin: 0 40px;
}*/
.bg-shadow .fixed {
  position: fixed;
  top: 0;
  z-index: 1;
  background-color: #f7f7f7;
  width: 100%;
  left: 0;
}

.custom-checkbox {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 1px solid #4d4b4b; /* Рамка вокруг птички */
}

/* Отображение птички с рамкой при отметке чекбокса */
.custom-checkbox input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 7px; /* Размер птички */
  height: 14px;
  border: 3px solid black; /* Рамка вокруг птички */
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.moving-image {
  position: absolute;
  left: 10px;
  bottom: 5px;
  animation: moveUpDown 1s infinite linear;
  /* Замените 2s на время анимации, infinite - бесконечное повторение */
  display: block;
  margin: 0 auto;
  /* Другие стили изображения по вашему выбору */
}

.moving-image:hover {
  opacity: 0.6;
  cursor: pointer;
}

.q {
  display: inline-block;
  margin-left: 10px;
  text-align: center;
  width: 30px;
  height: 30px;
  border: 1px solid gray;
  border-radius: 50%;
  background: #e8ee5b;
  color: #000;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  top: -2px;
}

/* double-tooltip */
.double-tooltip:hover:before,
.double-tooltip:hover:after {
  visibility: hidden;
}

.double-tooltip.visible:before,
.double-tooltip.visible:after {
  visibility: visible;
  z-index: 2;
}

/* right-box place delete */
.kl-left-box {
  width: calc(18px + 0.9vw);
  height: 100%;
  border-radius: 50px 0 0 50px;
  overflow: hidden;
}

.kl-cover-delete {
  width: calc(35px + 1.7vw);
  height: 100%;
  position: relative;
  border-radius: 0px 50px 50px 0;
}
.kl-cover-delete .delete-box {
  width: 100%;
  height: 100%;
  padding-right: 0px;
}
.kl-cover-delete .delete-box img {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.kl-cover-delete .type-box {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kl-cover-delete .type-box .circle {
  height: calc(7px + 0.35vw);
  width: calc(7px + 0.35vw);
  background: green;
  border-radius: 50%;
  background: linear-gradient(160deg, #a4dfa4, green);
}
.kl-cover-delete .type-box .title-2 {
  font-weight: bold;
}
.kl-cover-delete .type-box .title-2.red {
  color: #fc046b;
  font-weight: normal;
}

.kl-cover-delete:hover {
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.kl-cover-delete:hover .delete-box img {
  opacity: 1;
}
.kl-cover-delete:hover .type-box {
  opacity: 0;
}

.kl-right-button .length-box {
  height: 100%;
  min-width: 20px;
  float: left;
  display: flex;
  align-items: center;
  margin-right: 3px;
}
.kl-right-button .open-box {
  display: inline-block;
  height: 100%;
  width: calc(14px + 0.7vw);
  z-index: 1;
  float: left;
}
.kl-right-button .open-box img {
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.kl-right-button .open-box:hover {
  background: rgba(0, 0, 0, 0.05);
}
.kl-right-button .open-box:hover img {
  opacity: 1;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

/* editPlace */
.kl-editPlace {
  padding: calc(12px + 0.6vw);
  flex: 1;
  max-width: 93%;
}
.kl-editPlace .title-edit {
  padding-left: 8px;
  display: flex;
  justify-content: space-between;
}
.kl-editPlace .title-edit .title-book {
  flex: 1;
  margin-bottom: calc(9px + 0.4vw);
}
.kl-editPlace .title-edit span {
  position: relative;
  top: -2px;
}
.kl-editPlace .title-edit span.today {
  color: #1e1e8c;
  font-weight: bold;
  top: -6px;
}
.kl-editPlace .add-set-place {
  margin-top: calc(10px + 0.5vw);
}
.kl-editPlace .arrow-cont {
  height: calc(14px + 0.7vw);
  width: calc(14px + 0.7vw);
  display: inline-block;
  margin-left: calc(8px + 0.4vw);
  z-index: 2;
}
.kl-editPlace .arrow-cont > div {
  z-index: 1;
}
.kl-editPlace .arrow-cont img {
  width: 100%;
  height: 100%;
}
.kl-editPlace .arrow-cont:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.kl-editPlace .add-set {
  height: calc(12px + 0.6vw) !important;
  width: calc(12px + 0.6vw) !important;
  position: relative !important;
  bottom: 2px !important;
}
.kl-editPlace .title-place {
  display: flex;
  justify-content: space-between;
}
.kl-editPlace .title-place .input-box {
  /*input{
    background: rgba(100,100,100, 0.05);
    padding: 0 10px;
    outline:none;
    width: 100%;

  }*/
  border: solid 2px #b8b3b3;
  border-right-color: rgb(238, 238, 238);
  border-bottom-color: rgb(238, 238, 238);
  background: rgba(100, 100, 100, 0.05);
  flex: 1;
  margin-right: 5px;
}
.kl-editPlace .title-place .input-box textarea {
  background: unset;
  padding: 0 10px;
  outline: none;
  width: 100%;
  resize: none;
  border: none;
  line-height: 1.2;
  overflow: hidden;
}
.kl-editPlace .title-place .delete-box {
  width: calc(14px + 0.7vw);
  height: calc(14px + 0.7vw);
  margin-left: 15px;
  z-index: 1;
  display: inline-block;
}
.kl-editPlace .title-place .delete-box img {
  width: 100%;
  height: 100%;
}
.kl-editPlace .title-place .delete-box:hover {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
}
.kl-editPlace .items-place {
  margin-top: 20px;
  width: 100%;
}
.kl-editPlace .items-place .item-block {
  font-size: calc(12px + 0.6vw);
  margin: calc(6px + 0.3vw) 0;
  position: relative;
}
.kl-editPlace .add-place {
  padding-left: 15px;
}

.ui.radio.checkbox label,
.ui.checkbox label {
  font-size: calc(11px + 0.5vw);
}

.ui.checkbox label:before,
.ui.checkbox label:after {
  width: calc(10px + 0.5vw);
  height: calc(10px + 0.5vw);
  top: 0;
}

.ui.radio.checkbox label:before,
.ui.radio.checkbox label:after {
  width: calc(10px + 0.5vw);
  height: calc(10px + 0.5vw);
  top: 0;
}

body .ui.toggle.checkbox input:checked ~ .box:before,
body .ui.toggle.checkbox input:checked ~ label:before {
  background-color: #333b66 !important;
}

body .red > .ui.toggle.checkbox input:checked ~ .box:before,
body .red > .ui.toggle.checkbox input:checked ~ label:before {
  background-color: #e41717 !important;
}

body .ui.toggle.checkbox .box:before,
body .ui.toggle.checkbox label:before {
  background-color: #dce0ef !important;
}

body .ui.toggle.checkbox input:checked ~ .box:after,
body .ui.toggle.checkbox input:checked ~ label:after {
  background-color: #dce0ef !important;
}

body .ui.toggle.checkbox .box:after,
body .ui.toggle.checkbox label:after {
  background-color: #333b66 !important;
}

.ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: #0e0441 !important;
}

.ui.checkbox input[disabled] ~ .box:after, .ui.checkbox input[disabled] ~ label, .ui.disabled.checkbox .box:after, .ui.disabled.checkbox label {
  cursor: pointer !important;
  opacity: 1;
}

.ui.radio.checkbox input,
body .ui.checkbox input[type=checkbox] {
  z-index: unset;
}

.ui.input > input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 50px #fff !important; /* Цвет фона */
  -webkit-text-fill-color: rgba(70, 70, 71, 0.7) !important; /* цвет текста */
  color: rgba(70, 70, 71, 0.7) !important; /* цвет текста */
}

[data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after, [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after {
  z-index: 200;
  /* Обычный перенос по пробелам */
}

.bookmarkmove.active {
  border: solid 2px #9b9999;
  opacity: 1;
  background: #eee;
}

.bookmarkmove.active:hover {
  box-shadow: unset;
}

.bookmarkmove {
  border-radius: 50px;
}

.dragging-element,
.bookmarkmove {
  height: calc(35px + 1.7vw);
  display: flex;
  margin: calc(6px + 0.3vw) auto;
  font-size: calc(12px + 0.6vw);
  position: relative;
  background: linear-gradient(180deg, #eee, rgba(89, 104, 179, 0.37));
  overflow: hidden;
}
.dragging-element .data-element,
.bookmarkmove .data-element {
  display: none;
}
.dragging-element .title-box, .dragging-element .title-box-2,
.bookmarkmove .title-box,
.bookmarkmove .title-box-2 {
  height: 100%;
  flex: 1;
  padding: 0 calc(10px + 0.5vw) 0 calc(16px + 0.8vw);
  align-items: center;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
.dragging-element .title-box .title, .dragging-element .title-box-2 .title,
.bookmarkmove .title-box .title,
.bookmarkmove .title-box-2 .title {
  align-items: center;
  line-height: 1.3;
  display: inline-block;
  max-height: 100%;
  padding: 2px;
}
.dragging-element .kl-cover-delete img,
.bookmarkmove .kl-cover-delete img {
  transform: scale(0.7);
}
.dragging-element .kl-right-button,
.bookmarkmove .kl-right-button {
  background: linear-gradient(180deg, #eee, rgba(89, 104, 179, 0.37));
}
.dragging-element .progress-box,
.bookmarkmove .progress-box {
  position: absolute;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  border-radius: 50px 0 0 50px;
}
.dragging-element .progress-box .progress-shadow,
.bookmarkmove .progress-box .progress-shadow {
  height: 100%;
  opacity: 0.2;
  background-color: #5977b3;
}

.dragging-element,
.bookmarkmove {
  height: calc(28px + 1.4vw);
  font-size: calc(10px + 0.5vw);
  margin: calc(4px + 0.2vw) auto;
}

.dragging-element:hover,
.bookmarkmove:hover {
  cursor: pointer;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.4);
}

.LeftPanel .q-place.hoverDrop:hover,
.CenterPanel .row-dragging.hoverDrop:hover,
.RightPanel .q-place-2 .row-dragging.hoverDrop:hover,
.CenterPanel .q-place.hoverDrop:hover,
.RightPanel .row-dragging.date-place.hoverDrop:hover {
  border: solid;
  opacity: 0.3;
}
/*-------------------------------------------*/
.gm-drag-element.bookmarkmove {
  color: white;
  border-bottom: solid 2px #ccc;
}

.gm-dragging.bookmarkmove {
  border: solid 2px #ccc;
  background: white;
}

.gm-dragging.viewPlace {
  background: #eee;
  height: 65px;
  color: rgba(0, 0, 0, 0);
  width: 400px;
  border: solid 2px #ccc;
}
.gm-dragging.viewPlace .preBlock {
  display: none;
}

.gm-drag-element {
  opacity: 0;
}

drop-down .select-block {
  width: 100%;
  height: 100%;
  position: relative;
}
drop-down .select-block label {
  font-weight: normal;
  overflow: hidden;
  line-height: 1em;
  vertical-align: middle;
  margin-bottom: 0;
  color: #69686a;
}
drop-down .select-block .option-container {
  border: 2px solid #d5d5d5;
  margin-top: 2px;
  width: 100%;
  position: absolute;
  height: 150px;
  overflow-y: auto;
  padding: 10px 15px;
  background: #fff;
  z-index: 1;
  top: 50px;
}
drop-down .select-block .option-container label {
  width: 95%;
}
drop-down .select-block .option-container li {
  list-style: none;
  line-height: 1.5em;
  font-size: 22px;
}
drop-down .select-block .select-container {
  width: 100%;
  height: 100%;
  border: 2px solid #d5d5d5;
  cursor: pointer;
  position: relative;
  font-size: 22px;
  display: flex;
  align-items: center;
}
drop-down .select-block .select-container label {
  width: 70%;
}
drop-down .select-block .select-container .arrow {
  font-weight: bolder;
  font-size: 28px;
  color: #d5d5d5;
  margin: auto 0 auto auto;
  width: 40px;
  height: 40px;
  opacity: 0.3;
}
drop-down .select-block .select-container .arrow img {
  width: 100%;
  height: 100%;
}
drop-down .select-block ::-webkit-scrollbar {
  width: 8px;
}

.homeHeader .navbar-nav, .homeHeader .navbar-nav > li {
  float: unset;
}
.homeHeader .navbar-nav .open .dropdown-menu {
  position: absolute;
  border: solid 1px #ccc;
}
.homeHeader .menu > ul > li {
  padding: 0 14px;
}
.homeHeader .menu > ul > li:first-child {
  padding-left: 24px;
}
.homeHeader .relative {
  position: relative;
}
.homeHeader .menuPlace {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px #eee;
}
.homeHeader .menuPlace .rightSide {
  display: flex;
}
.homeHeader .menu-content {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 800px) {
  .homeHeader #bs-navbar-collapse {
    display: none !important;
  }
}
.homeHeader li {
  display: inline-block;
  margin: 5px 20px;
}
.homeHeader .menu-support {
  align-self: center;
}
.homeHeader .menu-support .auth-menu .signUp {
  background: #eee;
}
.homeHeader .menu-support .auth-menu .login {
  text-decoration: underline;
}
.homeHeader .menu-support .auth-menu a {
  display: inline-block;
  color: #000;
  padding: 7px 25px;
  font-size: 12px;
  text-decoration: none;
}
.homeHeader .menu-support .name-place {
  display: inline-block;
  position: relative;
  top: 4px;
}
.homeHeader .menu-support .name-place .navbar-collapse.collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}
.homeHeader .menu-support a:hover {
  color: #939191;
}
.homeHeader .menu-support li a {
  font-size: 13px;
  color: #222;
  margin-top: 10px;
}
.homeHeader .menu-support .dropdown-menu {
  padding: 14px;
  margin-top: 12px;
  min-width: 114px;
}
.homeHeader .menu-support .ml-auto li {
  margin-left: 20px;
}
.homeHeader .navbar-toggle {
  background-color: #808080;
  margin: 10px 30px 0 30px;
  width: 60px;
  height: 90%;
}
.homeHeader .navbar-toggle .icon-bar {
  background-color: white;
  width: 80%;
}
.homeHeader .navbar-toggle:hover {
  background-color: #e96656;
  filter: alpha(opacity=100);
  opacity: 1;
}
.btn-pay {
  background: #ffc439;
  padding: 5px 25px;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  border-radius: 5px;
  color: #2d2d87;
  font-size: 24px;
  position: relative;
  z-index: 1;
}

.btn-pay:hover {
  cursor: pointer;
  opacity: 0.7;
  background: #f2cd74;
}

#medal_right {
  position: absolute;
  right: -20px;
  top: calc(12px + 0.6vw);
  z-index: 1;
  display: none;
  /*.abs-medal{
      opacity:1 !important;
    }
    .abs-medal.first{
      .img-box{

        opacity: 0.5 !important;
      }
      .num-box{
        opacity: 0.5 !important;
      }
    }
  .speed-box:hover:after{
    z-index: 10 !important;
  }*/
}

#medal_right .abs-medal,
#slide_info .abs-medal {
  height: calc(45px + 2.2vw);
  width: calc(50px + 2.5vw);
  position: absolute;
  top: -20px;
  right: calc(21px + 1vw);
}
#medal_right .abs-medal .img-box,
#slide_info .abs-medal .img-box {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50px;
}
#medal_right .abs-medal .img-box img,
#slide_info .abs-medal .img-box img {
  width: 100%;
}
#medal_right .abs-medal .speed-box,
#slide_info .abs-medal .speed-box {
  height: 30px;
  bottom: calc(-30px - 1.5vw);
  left: calc(14px + 0.7vw);
  position: absolute;
  font-size: calc(14px + 0.7vw);
  font-weight: bold;
}
#medal_right .abs-medal .num-box,
#slide_info .abs-medal .num-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: calc(3px + 0.15vw);
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #654b17;
  font-size: calc(18px + 0.9vw);
  font-weight: bold;
}
#medal_right .abs-medal .num-box .num-text,
#slide_info .abs-medal .num-box .num-text {
  /*border: solid;
  width: 20px;
  height: 20px;*/
}
#medal_right .abs-medal.old,
#slide_info .abs-medal.old {
  right: calc(50px + 2.5vw);
  transform: scale(0.8);
}
#medal_right .abs-medal.old .num-box,
#slide_info .abs-medal.old .num-box {
  color: #48402f;
}
#medal_right .abs-medal.old2,
#slide_info .abs-medal.old2 {
  right: calc(70px + 3.5vw);
  transform: scale(0.6);
}
#medal_right .abs-medal.first .img-box,
#slide_info .abs-medal.first .img-box {
  opacity: 0.5;
}
#medal_right .abs-medal.first .num-box,
#slide_info .abs-medal.first .num-box {
  opacity: 0.5;
}
#medal_right .abs-medal.first .speed-box span,
#slide_info .abs-medal.first .speed-box span {
  opacity: 0.5;
}

/* slide panel*/
#slideout {
  position: fixed;
  bottom: 0px;
  right: 0;
  width: 70px;
  padding: 12px 0;
  text-align: center;
  background: #6DAD53;
  transition-duration: 0.3s;
  border-radius: 5px 0 0 0;
  z-index: 1;
  height: 150px;
  display: block;
}

/*==========================*/
#slideout_inner textarea {
  width: 190px;
  height: 100px;
  margin-bottom: 6px;
}

#slideout:hover {
  right: 250px;
}

#slideout:hover #slideout_inner {
  right: 0;
}

/*==========================*/
#slideout_inner:hover {
  right: 0;
}

#slide_info.active {
  right: 0;
}

@media (max-width: 1300px) {
  #slide_info {
    width: 75% !important;
  }
}
@media (max-width: 900px) {
  #slide_info {
    width: 100% !important;
  }
}
.slide_info {
  z-index: 1100;
  position: fixed;
  bottom: 0;
  right: -100%;
  width: 60%;
  transition-duration: 0.7s;
  max-height: 110%;
  overflow-y: auto;
}
.slide_info .slideCont {
  display: flex;
  flex-direction: column;
  border: 25px;
  border-color: #5977b3;
  border-style: solid;
  border-radius: 5px 0 0 0;
  padding: calc(12px + 0.6vw) calc(12px + 0.6vw) calc(12px + 0.6vw);
  min-height: calc(125px + 6vw);
  text-align: left;
  background-color: #f7f7f7;
  background: #e4f1f7;
}
.slide_info .slideCont .message-place {
  width: 100%;
  flex: 1;
  font-size: calc(11px + 0.5vw);
  font-weight: bold;
  color: #333b66;
}
.slide_info .slideCont .message-place .welcome-slider p,
.slide_info .slideCont .message-place .welcome-slider {
  font-size: 1.2rem;
  color: #255878;
}
.slide_info .slideCont .message-place .allow-notify .img-services {
  width: 70%;
  display: inline-block;
  position: relative;
  top: calc(3px + 0.15vw);
}
.slide_info .slideCont .message-place .allow-notify .img-services img {
  width: 100%;
}
.slide_info .slideCont .message-place .click-pwa .img-pwa-place {
  text-align: center;
  margin: 40px 0 0 20px;
}
.slide_info .slideCont .message-place .click-pwa .img-pwa-place .img-services {
  height: calc(16px + 0.8vw);
  width: calc(16px + 0.8vw);
  display: inline-block;
  position: relative;
  top: calc(3px + 0.15vw);
}
.slide_info .slideCont .message-place .click-pwa .img-pwa-place .img-services img {
  height: 100%;
}
.slide_info .slideCont .message-place .click-pwa span {
  font-weight: normal;
}
.slide_info .slideCont .message-place .click-pwa.end-moment.green {
  color: #0b1757;
  /*.abs-medal.first:hover{

    opacity: 1;
    transform: scale(1.1);
    cursor: pointer;
  }*/
  /*.abs-medal.old:hover{
    cursor:unset;
    opacity:1;
    transform: scale(0.8);
  }*/
}
.slide_info .slideCont .message-place .click-pwa.end-moment.green .title-end-moment .btn-start {
  display: inline-block;
  border: solid 1px;
  border-radius: 10px;
  padding: calc(2px + 0.1vw) calc(12px + 0.6vw);
  background: #e1e4f2;
  opacity: 0.5;
}
.slide_info .slideCont .message-place .click-pwa.end-moment.green .abs-level:hover,
.slide_info .slideCont .message-place .click-pwa.end-moment.green .title-end-moment:hover {
  cursor: pointer;
  opacity: 1;
  transform: scale(1.1);
}
.slide_info .slideCont .message-place .click-pwa.end-moment.green .abs-level:hover .btn-start,
.slide_info .slideCont .message-place .click-pwa.end-moment.green .title-end-moment:hover .btn-start {
  opacity: 1;
}
.slide_info .slideCont .message-place .click-pwa.end-moment.green .abs-medal.first .img-box {
  opacity: 0.5;
}
.slide_info .slideCont .message-place .click-pwa.end-moment {
  position: relative;
  color: #333b66;
  /*row{
    padding-left: $size-55;
  }*/
  /* .text-end.long-end{
     width: $size-350;
   }*/
  /* .num-end.in-seven{
     position: relative;
     bottom: $size-10;
   }*/
}
.slide_info .slideCont .message-place .click-pwa.end-moment .alert-minutes {
  position: absolute;
  top: -10px;
  right: 0;
  width: 30%;
  color: red;
  font-size: calc(10px + 0.5vw);
  font-weight: normal;
  display: none;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .abs-level {
  position: absolute;
  top: -10px;
  left: 10px;
  padding: calc(3px + 0.15vw) calc(7px + 0.35vw);
  font-size: calc(10px + 0.5vw);
  font-weight: normal;
  border-radius: 50px;
  font-style: italic;
  text-decoration: underline;
}
.slide_info .slideCont .message-place .click-pwa.end-moment table {
  width: 100%;
}
.slide_info .slideCont .message-place .click-pwa.end-moment td {
  padding-left: calc(28px + 1.4vw);
  color: #333b66;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .intro-text {
  height: 200px;
  width: 100%;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .title-end-moment {
  text-align: center;
  font-size: calc(16px + 0.8vw);
  margin-bottom: calc(16px + 0.8vw);
}
.slide_info .slideCont .message-place .click-pwa.end-moment .row-end {
  margin-bottom: calc(6px + 0.3vw);
  margin-left: 20%;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .text-end {
  display: inline-block;
  width: 50%;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .in-seven {
  margin-bottom: calc(6px + 0.3vw);
}
.slide_info .slideCont .message-place .click-pwa.end-moment .num-end.red {
  border: 1px red solid;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .num-end.future {
  opacity: 0.8;
  font-weight: normal;
  transform: scale(1.4);
}
.slide_info .slideCont .message-place .click-pwa.end-moment .num-end {
  display: inline-block;
  width: calc(50px + 2.5vw);
  text-align: center;
  border: 1px transparent solid;
}
.slide_info .slideCont .message-place .click-pwa.end-moment .num-end input {
  width: 100%;
  padding-left: calc(6px + 0.3vw);
  position: relative;
  left: calc(4px + 0.2vw);
}
.slide_info .slideCont .message-place .click-pwa.end-moment .num-end input[type=number]::-webkit-inner-spin-button,
.slide_info .slideCont .message-place .click-pwa.end-moment .num-end input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.slide_info .slideCont .message-place .json-errors .if-no-letter {
  margin-top: calc(8px + 0.4vw);
}
.slide_info .slideCont .message-place .json-errors .if-no-letter a {
  margin-left: calc(10px + 0.5vw);
  color: #515ef0;
  color: #0c7ebd;
}
.slide_info .slideCont .message-place .json-errors .if-no-letter a:hover {
  cursor: pointer;
  text-decoration: none;
  opacity: 0.8;
}
.slide_info .slideCont .message-place .plus-place {
  display: flex;
  margin-bottom: calc(12px + 0.6vw);
}
.slide_info .slideCont .message-place .plus-place > span {
  display: inline-block;
  width: 30%;
  text-align: center;
  color: #333b66;
}
.slide_info .slideCont .message-place .plus-place .text-plus {
  display: inline-block;
  width: 69%;
}
.slide_info .slideCont .message-place .plus-place .text-plus i {
  width: 100%;
  text-align: center;
  display: inline-block;
}
.slide_info .slideCont .message-place .plus-place .text-plus i span {
  color: red;
  margin-left: 0;
}
.slide_info .slideCont .message-place .text-bonus {
  text-align: center;
  margin-bottom: calc(7px + 0.35vw);
}
.slide_info .slideCont .message-place .row-bonus.blue {
  color: #333b66;
}
.slide_info .slideCont .message-place .row-bonus {
  display: flex;
}
.slide_info .slideCont .message-place .row-bonus .img-bonus {
  height: calc(28px + 1.4vw);
}
.slide_info .slideCont .message-place .row-bonus .img-bonus img {
  height: 100%;
}
.slide_info .slideCont .message-place .row-bonus .btn-make {
  display: inline-block;
  flex: 3;
}
.slide_info .slideCont .message-place .row-bonus .btn-make .row-bonus {
  margin-bottom: calc(3px + 0.15vw);
  text-decoration: underline;
}
.slide_info .slideCont .message-place .row-bonus .btn-make .row-bonus:hover {
  text-decoration: unset;
  opacity: 0.8;
  cursor: pointer;
}
.slide_info .slideCont .message-place .row-bonus .btn-make .new-titul {
  font-size: calc(14px + 0.7vw);
  position: relative;
  margin-bottom: calc(5px + 0.25vw);
  color: black;
}
.slide_info .slideCont .message-place .row-bonus .btn-make .new-titul .img-titul {
  top: 0;
  position: absolute;
  left: calc(-60px - 3vw);
  height: calc(40px + 2vw);
  width: calc(40px + 2vw);
}
.slide_info .slideCont .message-place .row-bonus .btn-make .new-titul .img-titul img {
  height: 100%;
}
.slide_info .slideCont .message-place .row-bonus .imgBonusCont {
  height: 100%;
  flex: 2;
  display: flex;
  align-items: center;
}
.slide_info .slideCont .message-place .row-bonus .imgBonusCont .img-bonus {
  height: calc(35px + 1.7vw);
  width: calc(28px + 1.4vw);
  margin: 0 calc(12px + 0.6vw);
  display: inline-block;
}
.slide_info .slideCont .message-place .row-bonus .imgBonusCont .img-bonus img {
  height: 100%;
}
.slide_info .slideCont .message-place .row-bonus .imgBonusCont span i {
  font-style: normal;
}
.slide_info .slideCont .message-place .letters-rate {
  color: #333b66;
  margin-bottom: calc(12px + 0.6vw);
}
.slide_info .slideCont .action-place {
  width: 100%;
  flex: 1;
  display: flex;
  margin-top: calc(6px + 0.3vw);
  align-items: flex-end;
  justify-content: flex-end;
}
.slide_info .slideCont .action-place .auth-menu {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.slide_info .slideCont .action-place .auth-menu .btn__GoNext {
  margin-right: 20px;
  background: #f4b643;
  opacity: 0;
}
.slide_info .slideCont .action-place .auth-menu .btn__SaveResults {
  background: linear-gradient(#ffa346, #f3761b);
}
.slide_info .slideCont .action-place .auth-menu .btn-close-slider {
  background: linear-gradient(135deg, #bbe2fc, #80c7f7);
}
.slide_info .slideCont .action-place .auth-menu .btn__GoNext:hover,
.slide_info .slideCont .action-place .auth-menu .btn__SaveResults:hover,
.slide_info .slideCont .action-place .auth-menu .btn-close-slider:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.slide_info .slideCont .action-place .paypal-box {
  margin-left: 20px;
}
.slide_info .slideCont .action-place .paypal-box:hover {
  opacity: 0.8;
  cursor: pointer;
}
.slide_info .slideCont .action-place .sum {
  font-size: 24px;
  font-size: calc(12px + 0.6vw);
  margin-right: 20px;
}
.slide_info .slideCont .action-place .sum .cena {
  position: relative;
}
.slide_info .slideCont .action-place .sum .cena:before {
  border-bottom: 2px solid red;
  position: absolute;
  content: "";
  width: 170%;
  height: 60%;
  left: -50%;
  transform: rotate(-20deg);
}
.slide_info .slideCont .action-place .auth-menu {
  /*position: relative;
  bottom: $size-32;*/
}
.slide_info .slideCont .action-place .premium-box {
  display: flex;
}
.slide_info .slideCont .action-place .premium-box .info-box {
  display: flex;
  align-items: center;
  font-size: calc(12px + 0.6vw);
  margin-left: 25px;
}
.slide_info .slideCont .close-box {
  height: 25px;
  width: 25px;
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 0;
}
.slide_info .slideCont .close-box img {
  height: 100%;
  width: 100%;
}

#slide_info.active .close-box:hover {
  opacity: 1;
  cursor: pointer;
}
#slide_info.active .close-box {
  opacity: 0.7;
}

.btn-premium {
  display: flex;
  align-items: center;
}
.btn-premium a, .btn-premium > div {
  display: inline-block;
  padding: 7px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-size: calc(10px + 0.5vw);
  background: linear-gradient(90deg, #5977b3, #5959b3);
  color: #fff;
  margin-left: 15px;
  font-weight: normal;
  line-height: 1.5em;
}
.btn-premium a:hover, .btn-premium > div:hover {
  cursor: pointer;
  opacity: 0.8;
}

.btn-premium.yellow {
  position: relative;
  bottom: 6px;
}
.btn-premium.yellow a, .btn-premium.yellow > div {
  color: #0e509e;
  border-top: 1px solid #fff696;
  border-bottom: 1px solid #ffce06;
  background-color: #ffde0e;
  background-image: linear-gradient(to bottom, #ffed2d, #ffde0e);
}
.btn-premium.yellow a:hover, .btn-premium.yellow > div:hover {
  border-top-color: #fdf488;
  border-bottom-color: #f0c002;
  background-color: #f5d604;
  background-image: linear-gradient(to bottom, #fae811, #f5d604);
  opacity: 1;
}

.btn-premium.blue {
  position: relative;
  bottom: 6px;
}
.btn-premium.blue a {
  color: #fff;
  /*border-top: 1px solid #fff696;
  border-bottom: 1px solid #ffce06;
  background-color: #ffde0e;
  background-image: linear-gradient(to bottom,#ffed2d,#ffde0e);*/
  border-top: 1px solid #9ed3f7;
  border-bottom: 1px solid #1472a7;
  background-color: #0c7ebd;
  background-image: linear-gradient(to bottom, #63bcfb, #0c7ebd);
}
.btn-premium.blue a:hover {
  border-top: 1px solid #9ed3f7;
  border-bottom: 1px solid #1472a7;
  background-color: #0c7ebd;
  background-image: linear-gradient(to bottom, #63bcfb, #2c87bd);
  opacity: 1;
}

.account-box {
  padding: 0px 22px 2px;
  position: relative;
  display: inline-block;
  top: 8px;
  font-size: calc(10px + 0.5vw);
}
.account-box #showRightBtn {
  min-width: 50px;
}
.account-box #showRightBtn .name-text.block {
  display: inline-block;
  visibility: visible;
  max-width: calc(125px + 6vw);
  overflow: hidden;
  margin-right: 10px;
}
.account-box #showRightBtn .name-text {
  visibility: hidden;
}
.account-box #showRightBtn:hover {
  cursor: pointer;
}

.KlavaBody .buildMenu .right-box .menu-support {
  align-self: center;
  margin-left: 10px;
}
.KlavaBody .buildMenu .img-for-menu {
  position: absolute;
  height: calc(16px + 0.8vw);
  width: calc(16px + 0.8vw);
  top: calc(2px + 0.1vw);
  left: calc(-18px - 0.9vw);
}
.KlavaBody .buildMenu .img-for-menu img {
  height: 100%;
}
.KlavaBody .buildMenu .img-for-menu.bonus_img {
  left: calc(-30px - 1.5vw);
  top: 0;
}
.KlavaBody .buildMenu .img-for-menu.bonus_img img {
  height: 150%;
}
.KlavaBody .buildMenu .navContainer {
  display: flex;
  justify-content: space-between;
  height: calc(45px + 2.2vw);
}
.KlavaBody .buildMenu .navContainer .logo-box {
  width: calc(60px + 3vw);
  height: calc(45px + 2.2vw);
  position: relative;
  top: 10px;
  left: 70px;
  display: flex;
  flex-direction: column;
}
.KlavaBody .buildMenu .navContainer .logo-box .title-box {
  flex: 1;
  text-align: center;
  font-size: calc(10px + 0.5vw);
  color: #1c1c1c;
}
.KlavaBody .buildMenu .navContainer .logo-box .title-box:hover {
  cursor: pointer;
  opacity: 0.5;
}
.KlavaBody .buildMenu .navContainer .logo-box .img-box {
  background-size: 100% 100%;
  height: calc(24px + 1.2vw);
  border-radius: 50px;
  overflow: hidden;
}
.KlavaBody .buildMenu .navContainer .logo-box .img-box img {
  height: 100%;
  width: 100%;
}
.KlavaBody .buildMenu .navContainer .main-box {
  position: relative;
  bottom: calc(-8px - 0.4vw);
}
.KlavaBody .buildMenu .navContainer .main-box .main-header {
  font-size: calc(6px + 0.6vw);
  height: 50px;
  left: calc(28px + 1.4vw);
  position: relative;
}
.KlavaBody .buildMenu .navContainer .main-box .main-header .img-for-menu {
  top: 0px;
  left: calc(-24px - 1.2vw);
}
.KlavaBody .buildMenu .navContainer .main-box .main-header img.arrow-menu {
  height: calc(7px + 0.35vw);
  position: relative;
}
.KlavaBody .buildMenu .navContainer .main-box .main-header span {
  font-style: italic;
  position: relative;
}
.KlavaBody .buildMenu .navContainer .main-box .main-header span.active {
  font-size: calc(10px + 0.5vw);
  font-weight: bold;
  color: #333b66;
  font-style: normal;
}
.KlavaBody .buildMenu .navContainer .main-box .nav-container {
  position: relative;
  top: calc(5px + 0.25vw);
}
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs {
  border-bottom: none;
}
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs > li {
  margin-left: 15px;
  display: table;
}
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs > li > a,
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs > li a {
  font-size: calc(12px + 0.6vw);
  color: #919090;
  border: unset;
}
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs > li.active > a,
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs > li > a:hover {
  background: unset;
  color: #000;
}
.KlavaBody .buildMenu .navContainer .main-box .nav-container .nav-tabs > li.active > a {
  border-bottom: solid #ddd;
}
.KlavaBody .buildMenu .navContainer .right-box {
  display: flex;
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support {
  position: relative;
  bottom: calc(4px + 0.2vw);
  display: inline-block;
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support .auth-menu {
  display: inline-block;
  margin-left: 15px;
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support .lang-user {
  display: inline-block;
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support .lang-user form select.dropdown {
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 4px;
  background-color: transparent;
  height: 100%;
  padding: 7px 20px 7px 10px;
  font-size: calc(10px + 0.5vw);
  max-width: calc(50px + 2.5vw);
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support .lang-user form select.dropdown option {
  margin: 20px 0;
  padding: 20px 0;
  line-height: 2;
  width: 300px;
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support .lang-user form select * {
  font-weight: bold;
  line-height: 50px;
  padding: 20px 0;
}
.KlavaBody .buildMenu .navContainer .right-box .menu-support .lang-user form select:hover {
  border-color: #919090;
  cursor: pointer;
}

@media screen and (max-width: 1200px) {
  .speedPanel,
  .errorsPanel {
    max-width: calc(175px + 8.7vw) !important;
  }
  .speedBlock .target-block .text-improve {
    font-size: calc(10px + 0.5vw) !important;
  }
}
.slide-home.active {
  opacity: 0;
}

.slide-home {
  position: relative;
  transition-duration: 1s;
  display: none;
}

.HomePage {
  margin-top: calc(50px + 2.5vw);
  height: calc(100vh - 50px - 2.5vw);
  position: relative;
}
.HomePage .cover-box {
  width: 550px;
  height: 100%;
  position: absolute;
  left: -560px;
  bottom: 0;
  z-index: 12;
  background-color: #f7f7f7;
}
.HomePage .cover-box .over-bg {
  width: 100%;
  height: 100%;
}
.HomePage #right-menu {
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  top: -25px;
  padding: 14px;
  margin-top: calc(5px + 0.25vw);
  min-width: 114px;
  width: 100px;
  z-index: 4;
  right: 15px;
  background: white;
  border-radius: 4px;
}
.HomePage #right-menu a {
  font-size: calc(10px + 0.5vw);
  line-height: 1.7em;
  cursor: pointer;
}
.HomePage .group.inner {
  height: 100%;
  position: relative;
}
.HomePage .group.inner > .tab-pane {
  height: 100%;
  position: relative;
}
.HomePage .group.inner > .tab-pane > .mainContainer {
  height: 100%;
  width: 100%;
  position: absolute;
}
.HomePage ::-webkit-scrollbar {
  width: 18px;
}
.HomePage ::-webkit-scrollbar-track {
  background: #dbdeef;
}
.HomePage ::-webkit-scrollbar-thumb {
  background: #b9b9b9;
}
.HomePage ::-webkit-scrollbar-thumb:hover {
  background: #9c9c9c;
  cursor: pointer !important;
}

/* MENU TYPES */
.menuPanel .menuTypes {
  width: calc(150px + 7.5vw);
  border: 1px solid #6b7ed9;
  position: absolute;
  bottom: 20%;
  left: -3px;
  background-color: #f7f7f7;
  z-index: 10;
  border-left: none;
  border-radius: 0 20px 20px 0;
  padding: calc(12px + 0.6vw) 0 calc(16px + 0.8vw) calc(30px + 1.5vw);
}
.menuPanel .menuTypes .close-btn {
  position: absolute;
  bottom: 2px;
  right: calc(24px + 1.2vw);
  font-size: calc(12px + 0.6vw);
}
.menuPanel .menuTypes .close-btn:hover {
  font-weight: bold;
  cursor: pointer;
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
}
.menuPanel .menuTypes .row-types.chosen .menu-title {
  font-weight: bold;
}
.menuPanel .menuTypes .row-types.chosen .img-type {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
}
.menuPanel .menuTypes .row-types.chosen .type-checkbox {
  display: block;
}
.menuPanel .menuTypes .row-types.active .sub-menu {
  transition-duration: 500ms;
  display: block;
}
.menuPanel .menuTypes .row-types {
  font-size: calc(10px + 0.5vw);
  margin-bottom: calc(5px + 0.25vw);
  position: relative;
}
.menuPanel .menuTypes .row-types .type-checkbox {
  position: absolute;
  left: calc(-18px - 0.9vw);
  height: calc(12px + 0.6vw);
  width: calc(10px + 0.5vw);
  top: calc(10px + 0.5vw);
  display: none;
}
.menuPanel .menuTypes .row-types .type-checkbox img {
  height: 100%;
}
.menuPanel .menuTypes .row-types .menu-title {
  display: inline-block;
  transition-duration: 500ms;
}
.menuPanel .menuTypes .row-types .menu-title:hover {
  cursor: pointer;
  text-transform: uppercase;
}
.menuPanel .menuTypes .row-types .sub-menu {
  transition-duration: 500ms;
  position: absolute;
  min-height: 200px;
  border: solid;
  top: calc(8px + 0.4vw);
  border-radius: 0 20px 20px 20px;
  padding: calc(18px + 0.9vw) calc(6px + 0.3vw) calc(18px + 0.9vw) calc(24px + 1.2vw);
  background-color: #f7f7f7;
  border: 1px solid #6b7ed9;
  border-left: 1px solid #bfc2ce;
  font-size: calc(9px + 0.4vw);
  width: calc(175px + 8.7vw);
  display: none;
  right: calc(-160px - 8vw);
}
.menuPanel .menuTypes .row-types .sub-menu .flap {
  position: absolute;
  height: calc(28px + 1.4vw);
  width: 6px;
  background-color: #f7f7f7;
  top: 0;
  left: -3px;
}
.menuPanel .menuTypes .row-types .sub-menu .edit-zero {
  left: calc(-18px - 0.9vw);
  height: calc(12px + 0.6vw);
  width: calc(16px + 0.8vw);
  bottom: 0;
}
.menuPanel .menuTypes .row-types .sub-menu .edit-zero img {
  height: 100%;
}
.menuPanel .menuTypes .row-types .sub-menu .edit-zero:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.menuPanel .menuTypes .row-types .sub-menu .row-name {
  margin-bottom: calc(7px + 0.35vw);
  display: flex;
  position: relative;
}
.menuPanel .menuTypes .row-types .sub-menu .row-name .sub-checkbox {
  position: absolute;
  left: calc(-18px - 0.9vw);
  height: calc(12px + 0.6vw);
  width: calc(16px + 0.8vw);
  bottom: 0;
  display: none;
  z-index: 1;
}
.menuPanel .menuTypes .row-types .sub-menu .row-name .sub-checkbox img {
  height: 100%;
}
.menuPanel .menuTypes .row-types .sub-menu .row-name .sub-checkbox:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.menuPanel .menuTypes .row-types .sub-menu .row-name i {
  font-style: normal;
  margin-right: calc(5px + 0.25vw);
}
.menuPanel .menuTypes .row-types .sub-menu .row-name .text-name {
  flex: 1;
}
.menuPanel .menuTypes .row-types .sub-menu .row-name.chosen {
  font-weight: bold;
}
.menuPanel .menuTypes .row-types .sub-menu .row-name.chosen .sub-checkbox {
  display: block;
}
.menuPanel .menuTypes .row-types .sub-menu .row-name:hover {
  cursor: pointer;
  font-weight: bold;
}
.menuPanel .menuTypes .row-types .img-type {
  display: inline-block;
  height: calc(21px + 1vw);
  width: calc(21px + 1vw);
  margin-right: calc(9px + 0.4vw);
  position: relative;
  top: calc(7px + 0.35vw);
  opacity: 0.9;
  transform: scale(1);
  -webkit-transform: scale(1);
}
.menuPanel .menuTypes .row-types .img-type img {
  height: 100%;
}
.menuPanel .menuTypes .row-types .img-type.cursor_pointer:hover {
  cursor: pointer;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  opacity: 0.8;
}
.menuPanel .menuTypes.active {
  transition-duration: 500ms;
  left: -3px;
}
.menuPanel .menuTypes.notActive {
  transition-duration: 500ms;
  left: calc(-108px - 5.4vw);
}

.progress-place-ks {
  text-align: center;
  display: flex;
  align-items: center;
  position: relative;
  width: calc(70px + 3.5vw);
}
.progress-place-ks .percent {
  font-weight: normal;
  position: absolute;
  right: calc(-28px - 1.4vw);
  top: 0;
  font-size: calc(9px + 0.4vw);
  height: 100%;
  display: flex;
  align-items: center;
}
.progress-place-ks .speed-fingers {
  font-weight: bold;
  position: absolute;
  top: calc(-16px - 0.8vw);
  left: 0;
}
.progress-place-ks .progress {
  min-width: 65px;
  position: relative;
  left: calc(8px + 0.4vw);
  background: #E6E6E6;
  height: calc(4px + 0.2vw);
  width: 100%;
}
.progress-place-ks .progress .bar {
  width: 50%;
  background-color: #797ec1;
  height: 6px;
  border-radius: 3px;
}

.menuPanel.key0 .nav-tabs {
  background: linear-gradient(90deg, #5977b3, #5959b3);
}
.menuPanel.key0 .left-nav li.active a {
  background: #333b66;
  border-color: #333b66;
}
.menuPanel.key0 .left-nav li:hover {
  /* a{
     transform: scale(1.3);
   }*/
}
.menuPanel.key0 .left-nav .nav-bonus-box {
  height: 100%;
}
.menuPanel.key0 > .tab-content {
  border: 1px solid #6b7ed9;
  position: relative;
  /*.abs-medal-right{
        position: absolute;
        right: $size-14;
        top: $size-10;
        //display: flex;
        //height: 50px;
        height: $size-90;
        width: $size-100;
        //border: solid;


        .img-box{
          width: 100%;
          height: 100%;
          position: absolute;
          border-radius: 50px;

          img{
            width: 100%;
          }
        }


        .num-box{
          width: 100%;
          height:100%;
          position: absolute;
          left: $size-6;
          top: 2px;
          //border: solid;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #654b17;

          font-size: $size-36;
          font-weight: bold;



          .num-text{
            !*border: solid;
            width: 20px;
            height: 20px;*!

          }

        }
      }
  */
}
.menuPanel.key0 > .tab-content .abs-top-left {
  left: 0;
  top: calc(-30px - 1.5vw);
}
.menuPanel.key0 > .tab-content .abs-top-right {
  right: 0;
  top: calc(-28px - 1.4vw);
}
.menuPanel.key0 > .tab-content .abs-top-left,
.menuPanel.key0 > .tab-content .abs-top-right {
  position: absolute;
  display: flex;
  height: 50px;
  font-size: calc(11px + 0.5vw);
}
.menuPanel.key0 > .tab-content .abs-top-left .lang-box,
.menuPanel.key0 > .tab-content .abs-top-right .lang-box {
  height: 100%;
  display: inline-block;
}
.menuPanel.key0 > .tab-content .abs-top-left .lang-box .lang-select,
.menuPanel.key0 > .tab-content .abs-top-right .lang-box .lang-select {
  height: 100%;
  display: inline-block;
  margin-bottom: calc(4px + 0.2vw);
}
.menuPanel.key0 > .tab-content .abs-top-left .lang-box .lang-select select,
.menuPanel.key0 > .tab-content .abs-top-right .lang-box .lang-select select {
  height: unset;
  padding: calc(3px + 0.15vw) calc(12px + 0.6vw);
}

.menuPanel {
  font-size: 14px;
  color: #030303;
  display: flex;
  height: 100%;
  position: relative;
}
.menuPanel > .tab-content {
  flex-basis: 100%;
  border-radius: 15px 15px 15px 15px;
  margin: 30px 0;
  position: relative;
  z-index: 1;
}
.menuPanel > .tab-content > .tab-pane,
.menuPanel > .tab-content > .calendar-pane,
.menuPanel > .tab-content > .builder-pane {
  height: calc(100% - 1px);
  background-color: #fff;
  border-radius: 15px 15px 15px 15px;
}
.menuPanel > .tab-content > .tab-pane .mainContent,
.menuPanel > .tab-content > .calendar-pane .mainContent,
.menuPanel > .tab-content > .builder-pane .mainContent {
  height: 100%;
  position: relative;
  display: flex;
  border-radius: 10px 10px 10px 10px;
  background-size: 40px 40px, 20px 20px;
  background-image: linear-gradient(rgba(150, 150, 150, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 150, 150, 0.1) 1px, transparent 1px);
  background-color: rgba(89, 104, 179, 0.216);
}
.menuPanel > .tab-content .abs-top-center {
  position: absolute;
  width: 100%;
  height: 2px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  top: calc(-3px - 0.15vw);
}
.menuPanel > .tab-content .abs-top-center .speedBlock.second-top-menu {
  justify-content: flex-end;
  margin-right: 0;
}
.menuPanel > .tab-content .abs-top-center .speedBlock {
  width: 100%;
  height: calc(35px + 1.7vw);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  /*.circle-box:hover{
    opacity: 1;
    cursor: pointer;
    //background: #ff6761;
    background: $rowMySpeed;
  }*/
}
.menuPanel > .tab-content .abs-top-center .speedBlock .switch-box {
  margin-right: calc(10px + 0.5vw);
  position: relative;
  top: 4px;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .switch-box .ui.toggle.checkbox input:checked ~ label:before {
  background: linear-gradient(90deg, #5977b3, #5959b3) !important;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .switch-box .ui.toggle.checkbox input:not(:checked) ~ label:after {
  background-color: #5969b3 !important;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .circle-box.active {
  background: #613E67;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .circle-box {
  background: linear-gradient(90deg, #5977b3, #5959b3);
  color: white;
  opacity: 0.8;
  margin-left: calc(16px + 0.8vw);
  font-size: calc(11px + 0.5vw);
  width: calc(35px + 1.7vw);
  height: calc(21px + 1vw);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block.target-progress {
  position: relative;
  top: calc(4px + 0.2vw);
  padding-right: calc(21px + 1vw);
  margin: 0 calc(16px + 0.8vw) 0 calc(8px + 0.4vw);
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block {
  font-size: calc(11px + 0.5vw);
  display: flex;
  align-items: center;
  color: #5977B3;
  font-weight: bold;
  position: relative;
  /*.progress-place {

    text-align: center;
    display: flex;
    align-items: center;

    position: relative;

    width: $size-140;


    .percent{
      font-weight: normal;
      position: absolute;
      right: calc(-28px - 1.4vw);

      top: 0;

      font-size: $size-18;
      height: 100%;

      display: flex;
      align-items: center;
    }

    .speed-fingers{

      font-weight: bold;

      position: absolute;
      top: calc(-16px - 0.8vw) ;
      left: 0;
    }



    .progress {
      min-width: 65px;
      position: relative;
      left: $size-16;
      background: #E6E6E6;
      height: $size-8;
      width: 100%;

      .bar {
        //background-color: #fb7381;
        width: 50%;
        background-color: #797ec1;
        //width: 100%;
        height: 6px;
        border-radius: 3px;
      }
    }
  }*/
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block .text-improve {
  border-radius: 5px;
  padding: calc(3px + 0.15vw) calc(7px + 0.35vw);
  min-width: calc(50px + 2.5vw);
  text-align: center;
  border: 1px solid transparent;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block .text-improve.active {
  opacity: 1;
  border: 1px solid #b1b4c3;
  background-color: #dbdeef;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block .text-improve:hover {
  opacity: 0.8;
  cursor: pointer;
  border: 1px solid #b1b4c3;
  background-color: #dbdeef;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block .text-improve.my-speed.active {
  color: #613E67;
  border-color: #c7a4ce;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block span {
  margin-left: calc(12px + 0.6vw);
  font-size: calc(11px + 0.5vw);
  font-weight: bold;
  width: calc(28px + 1.4vw);
  height: calc(21px + 1vw);
  border-radius: 50px;
  display: flex;
  align-items: center;
  color: #2a77b1;
  line-height: 1;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .target-block span i {
  font-size: calc(9px + 0.4vw);
  margin-left: calc(12px + 0.6vw);
  font-style: normal;
  color: black;
  font-weight: normal;
}
.menuPanel > .tab-content .abs-top-center .speedBlock .my-circle-box span:hover,
.menuPanel > .tab-content .abs-top-center .speedBlock .circle-box span:hover {
  cursor: pointer;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

.menuPanel .left-nav {
  display: inline-block;
  width: calc(40px + 2vw);
  min-width: 60px;
  position: relative;
  left: calc(7px + 0.35vw);
  z-index: 3;
}
.menuPanel .left-nav ul.nav-tabs {
  border-bottom: unset;
  border-radius: 50px;
  padding: 15px 0;
  height: 100%;
}
.menuPanel .left-nav li {
  width: 80%;
  margin-left: 10%;
  position: relative;
}
.menuPanel .left-nav li a:focus {
  background: unset;
}
.menuPanel .left-nav li a {
  text-align: center;
  margin-right: 0;
  line-height: 0.428571;
  padding: unset;
  border-radius: 50px;
}
.menuPanel .left-nav li a .flex {
  align-items: center;
  height: calc(60px + 3vw);
  justify-content: center;
}
.menuPanel .left-nav li a .flex span.menu {
  width: calc(16px + 0.8vw);
  height: calc(16px + 0.8vw);
  background: unset;
  position: relative;
  top: 1px;
  cursor: pointer;
  display: inline-block;
  text-transform: none;
}
.menuPanel .left-nav li a .flex span.menu .letter-box {
  color: white;
  font-size: calc(18px + 0.9vw);
  width: 100%;
  height: 100%;
}
.menuPanel .left-nav li.line-place {
  width: 100%;
  height: 30px;
  text-align: center;
}
.menuPanel .left-nav li.line-place a {
  display: none;
}
.menuPanel .left-nav li.line-place .horizont {
  border: solid 1px #342672;
  width: 65%;
  display: inline-block;
}
.menuPanel .left-nav li:hover img {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
}
.menuPanel .left-nav li.active:hover img {
  transform: none;
  -webkit-transform: none;
}
.menuPanel .left-nav .menuTypes {
  top: 20px;
  width: calc(50px + 2.5vw);
  height: 60px;
  border: 1px solid #5968B3;
  position: absolute;
  left: -3px;
  background-color: #fff;
  z-index: 2;
  border-left: none;
  border-radius: 0 50px 50px 0;
}
.menuPanel .left-nav .set-block {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: calc(10px + 0.5vw) 0 calc(28px + 1.4vw);
}
.menuPanel .left-nav .set-block .set-box {
  height: calc(21px + 1vw);
  width: calc(21px + 1vw);
  margin: auto;
  margin-bottom: calc(12px + 0.6vw);
}
.menuPanel .left-nav .set-block .set-box img {
  width: 100%;
}
.menuPanel .left-nav .set-block .set-box:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

.caps-lock-box,
.err-lang-box {
  position: absolute;
  top: 0px;
  left: 300px;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  font-size: 1rem;
  border: 1px solid #d4d4d5;
  line-height: 1.4285em;
  max-width: none;
  background: #fff;
  padding: 0.833em 1em;
  font-weight: 400;
  font-style: normal;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  z-index: 200;
  visibility: hidden;
}

.card-place {
  width: 800px;
  margin: 0 auto;
  position: relative;
  bottom: 33px;
  /*.errors-cont{
      position: absolute;
      left: 100px;
      width: 180px !important;
      //border:solid;
      min-height:10px;
      top: -21px;
      line-height: 1.5em;
      max-height: calc(1.5em * 2);
      overflow: hidden;
  }*/
}
.card-place .press-space {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-layout {
  position: absolute;
  left: 330px;
  top: -9px;
  height: 90px;
  padding: 22px 22px 0 22px;
  border-radius: 10px;
  border: solid 1px #6dc0fe;
  transition: transform 0.1s linear;
  background-color: #d4f0fe;
  color: #6674ff;
  font-size: 54px;
  text-align: center;
}

#card1.rotate3 {
  left: 310px;
}

#card1.rotate4 {
  left: 280px;
}

.card-layout.next-lett {
  left: 480px;
  top: 0;
  height: 80px;
  font-size: 44px;
  padding-top: 18px;
  opacity: 0.7;
  /*top: 43px;
  height: 45px;
  width: 35px;
  font-size: 24px;
  padding-top: 4px;
  border-radius: 6px;*/
}

.card-layout.visible {
  visibility: visible;
  display: inline-block;
}

#card2.rotate3 {
  left: 510px;
}

#card2.rotate4 {
  left: 530px;
}

.panelKeyboard .typePanel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: calc(8px + 0.8vw);
  padding-top: calc(5px + 0.25vw);
}
.panelKeyboard .typePanel i {
  color: red;
  font-style: normal;
}
.panelKeyboard .typePanel .table-row {
  display: table-row;
  width: 80%;
  margin-left: 10%;
}
.panelKeyboard .typePanel .trans-block {
  height: calc(14px + 0.7vw);
  margin-top: calc(4px + 0.2vw);
  width: 100%;
  color: #946c9b;
  position: relative;
  display: flex;
}
.panelKeyboard .typePanel .trans-block .trans-box {
  width: calc(400px + 40vw);
  position: relative;
}
.panelKeyboard .typePanel .trans-block .trans-box .size20 {
  font-size: calc(7px + 0.7vw);
}
.panelKeyboard .typePanel .trans-block .trans-box .size18 {
  font-size: calc(6px + 0.6vw);
}
.panelKeyboard .typePanel .trans-block .trans-box .size15 {
  font-size: calc(5px + 0.5vw);
}
.panelKeyboard .typePanel .trans-block .trans-box .trans-line {
  height: 100%;
}
.panelKeyboard .typePanel .trans-block .trans-box .select-lang {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
}
.panelKeyboard .typePanel .trans-block .trans-box .select-lang select {
  height: 200%;
  padding: 0 20px;
}
.panelKeyboard .typePanel .type-block {
  width: 100%;
  position: relative;
  margin-top: calc(12px + 0.6vw);
  display: flex;
  /*.caps-lock-box{
    position: absolute;
    top: -50px;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    font-size: 1rem;
    border: 1px solid #d4d4d5;
    line-height: 1.4285em;
    max-width: none;
    background: #fff;
    padding: .833em 1em;
    font-weight: 400;
    font-style: normal;
    color: rgba(0,0,0,.87);
    border-radius: .28571429rem;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
    z-index: 1;
    visibility:hidden;
  }*/
}
.panelKeyboard .typePanel .type-block .input-box {
  height: calc(35px + 1.7vw);
  width: 100%;
}
.panelKeyboard .typePanel .type-block .input-box #intext0, .panelKeyboard .typePanel .type-block .input-box #intext1,
.panelKeyboard .typePanel .type-block .input-box #intext, .panelKeyboard .typePanel .type-block .input-box #text {
  outline: none;
}
.panelKeyboard .typePanel .type-block .input-box #intext.blur {
  background-color: white;
}
.panelKeyboard .typePanel .type-block .input-box #intext0, .panelKeyboard .typePanel .type-block .input-box #intext1,
.panelKeyboard .typePanel .type-block .input-box #intext {
  display: block;
  padding-bottom: 3px;
  padding-left: 10px;
  border: none;
  width: 100%;
  border-bottom: 1px dotted rgba(51, 51, 51, 0.3);
  background: #f7f7f7;
  color: #777;
  position: relative;
  left: -8px;
}
.panelKeyboard .typePanel .type-block .input-box #text div {
  height: 1.2em;
  margin-bottom: 1px;
}
.panelKeyboard .typePanel .option-tr {
  position: absolute;
  left: -70px;
  top: 0;
  width: 20px;
  height: 20px;
  border: solid;
  display: none;
}
.panelKeyboard .typePanel .option-tr .err-lett-box {
  color: #333b66;
}
.panelKeyboard .typePanel .option-tr .switch-place {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.panelKeyboard .typePanel .option-tr .switch-place .switch-box {
  width: calc(60px + 3vw);
  height: calc(24px + 1.2vw);
  margin: calc(8px + 0.4vw) calc(8px + 0.4vw) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #5977b3, #5959b3);
  border-radius: 50px;
}
.panelKeyboard .typePanel .option-tr .switch-place .switch-box .checkbox {
  position: relative;
  left: calc(3px + 0.15vw);
}
.panelKeyboard .typePanel .option-tr .switch-place .switch-box .checkbox label:hover {
  cursor: pointer;
}
.panelKeyboard .typePanel .option-tr .switch-place .switch-box .checkbox:hover {
  cursor: pointer;
}
.panelKeyboard .typePanel .option-tr .switch-place .switch-box:hover {
  cursor: pointer;
}
.panelKeyboard .typePanel .abs-right {
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}
.panelKeyboard .typePanel .lines-block {
  margin-top: 20px;
  min-height: 200px;
  width: 100%;
}
.panelKeyboard .typePanel .lines-block span {
  line-height: 3;
  display: block;
}
.panelKeyboard .typePanel .switch-block {
  border: solid;
  width: 50px;
  height: 50px;
}

.panelDescription .mainContent .infoContainer,
.panelHelp .mainContent .infoContainer {
  font-size: calc(12px + 0.6vw);
}
.panelDescription .mainContent .infoContainer h2,
.panelHelp .mainContent .infoContainer h2 {
  margin-top: calc(21px + 1vw);
}
.panelDescription .mainContent .infoContainer .myTableContainer table th, .panelDescription .mainContent .infoContainer .myTableContainer table td,
.panelHelp .mainContent .infoContainer .myTableContainer table th,
.panelHelp .mainContent .infoContainer .myTableContainer table td {
  font-size: calc(12px + 0.6vw);
  text-align: center;
}
.panelDescription .mainContent .infoContainer .nameContainer,
.panelHelp .mainContent .infoContainer .nameContainer {
  max-width: 1200px;
  margin-bottom: calc(5px + 0.25vw);
  display: flex;
}
.panelDescription .mainContent .infoContainer .nameContainer .your-name-block,
.panelHelp .mainContent .infoContainer .nameContainer .your-name-block {
  display: flex;
  flex: 1;
  height: 40px;
  font-size: calc(14px + 0.7vw);
}
.panelDescription .mainContent .infoContainer .nameContainer .your-name-block .input-name,
.panelHelp .mainContent .infoContainer .nameContainer .your-name-block .input-name {
  flex: 1;
}
.panelDescription .mainContent .infoContainer .nameContainer .your-name-block .input-name input,
.panelHelp .mainContent .infoContainer .nameContainer .your-name-block .input-name input {
  padding-left: calc(5px + 0.25vw);
}
.panelDescription .mainContent .infoContainer .setLangContainer,
.panelHelp .mainContent .infoContainer .setLangContainer {
  margin: calc(18px + 0.9vw) auto 0;
  max-width: 1200px;
}
.panelDescription .mainContent .infoContainer .setLangContainer .set-block,
.panelHelp .mainContent .infoContainer .setLangContainer .set-block {
  display: flex;
  margin: calc(4px + 0.2vw) 0 calc(10px + 0.5vw);
}
.panelDescription .mainContent .infoContainer .setLangContainer .set-block .lang-block,
.panelHelp .mainContent .infoContainer .setLangContainer .set-block .lang-block {
  height: 100%;
  flex: 1;
  display: flex;
}
.panelDescription .mainContent .infoContainer .setLangContainer .set-block .lang-block .lang-select,
.panelHelp .mainContent .infoContainer .setLangContainer .set-block .lang-block .lang-select {
  flex: 1;
  margin-left: calc(16px + 0.8vw);
}
.panelDescription .mainContent .infoContainer .setLangContainer .set-block .lang-block .lang-select select,
.panelHelp .mainContent .infoContainer .setLangContainer .set-block .lang-block .lang-select select {
  padding: 0 calc(4px + 0.2vw);
  height: calc(28px + 1.4vw);
}
.panelDescription .mainContent .infoContainer .scrollContainer,
.panelHelp .mainContent .infoContainer .scrollContainer {
  padding: 0 calc(28px + 1.4vw) calc(28px + 1.4vw) 0;
  height: calc(100% - 60px - 3vw);
  overflow: auto;
  max-width: 1200px;
  margin: 0 auto;
  /* Review Table container */
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewContainer,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewContainer {
  margin-top: calc(35px + 1.7vw);
  display: flex;
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewContainer .Please-text .send-btn,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewContainer .Please-text .send-btn {
  margin-top: calc(12px + 0.6vw);
  text-align: center;
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewContainer .Please-text .my-question-title,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewContainer .Please-text .my-question-title {
  text-align: center;
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewContainer .review-textarea,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewContainer .review-textarea {
  overflow: hidden;
  flex: 1;
  font-size: calc(12px + 0.6vw);
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewContainer .review-textarea textarea,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewContainer .review-textarea textarea {
  padding: 15px;
  width: 100%;
  min-height: 50px;
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewTableContainer,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewTableContainer {
  margin-top: calc(24px + 1.2vw);
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewTableContainer table th,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewTableContainer table th {
  text-align: center;
  font-size: calc(10px + 0.5vw);
  width: calc(90px + 4.5vw);
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewTableContainer table th.date-col,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewTableContainer table th.date-col {
  width: calc(90px + 4.5vw);
}
.panelDescription .mainContent .infoContainer .scrollContainer .reviewTableContainer table td,
.panelHelp .mainContent .infoContainer .scrollContainer .reviewTableContainer table td {
  font-size: calc(10px + 0.5vw);
}

.panelDescription,
.panelHelp {
  font-size: calc(9px + 0.4vw);
}
.panelDescription .infoContainer,
.panelHelp .infoContainer {
  padding-right: calc(28px + 1.4vw);
  padding-left: calc(50px + 2.5vw);
  height: 100%;
  padding-top: 2%;
  width: 100%;
  overflow: hidden;
}
.panelDescription .infoContainer button.facebook,
.panelHelp .infoContainer button.facebook {
  font-size: calc(10px + 0.5vw);
}
.panelDescription .infoContainer .Please-text,
.panelHelp .infoContainer .Please-text {
  margin-right: calc(35px + 1.7vw);
  font-size: calc(12px + 0.6vw);
  min-width: calc(100px + 5vw);
}
.panelDescription .infoContainer .age,
.panelHelp .infoContainer .age {
  padding-left: calc(50px + 2.5vw);
}
.panelDescription .infoContainer .age .Please-text,
.panelHelp .infoContainer .age .Please-text {
  margin-right: calc(35px + 1.7vw);
  font-size: calc(14px + 0.7vw);
  min-width: unset;
}
.panelDescription .infoContainer .age input,
.panelHelp .infoContainer .age input {
  width: calc(50px + 2.5vw);
}

.panelTexts .infoContainer {
  width: 100%;
  height: 100%;
}
.panelTexts .infoContainer .scrollContainer {
  margin-top: 20px;
  margin-left: 5px;
  height: 74%;
  padding: 20px;
  overflow-y: auto;
  width: 80%;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel {
  direction: ltr;
  margin-top: 10px;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .titlePanel {
  display: none;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont {
  padding-bottom: 10px;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont .flag {
  border-left: 12px solid #6ca3c1;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont.active .course-title span {
  font-weight: bold;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont.active .flag {
  border-left: 12px solid #0c7ebd;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont.active .course-row .passed-box {
  visibility: hidden;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont.open.active .flag {
  border-top: 12px solid #0c7ebd;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont.open .flag {
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 12px solid #6ca3c1;
  top: 20px;
  left: 10px;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .courseCont.open .progress-place {
  display: block;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .addCont .text-add {
  height: 150px;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .addCont .text-add textarea {
  overflow-y: auto;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .addCont .flag {
  border-left: 12px solid #6ca3c1;
}
.panelTexts .infoContainer .scrollContainer .thirdPanel .addCont .add-button {
  left: 10px;
}

@media (max-width: 899px) {
  .panelKeyboard .tablesPanel {
    display: none !important;
  }
}
/*@media (min-width: 900px) {
  #container_mobile {
    display: none !important;
  }
}*/
.panelKeyboard .tablesPanel {
  flex: 1;
  display: flex;
  overflow: visible;
}
.panelKeyboard .tablesPanel .info-x {
  top: calc(4px + 0.2vw);
}
.panelKeyboard .tablesPanel .dash-title {
  height: 1px;
  width: 100%;
  text-align: center;
}
.panelKeyboard .tablesPanel .dash-title span {
  position: relative;
  top: calc(-14px - 0.7vw);
  opacity: 0.7;
}
.panelKeyboard .tablesPanel .dash-title span .btnDwmPlace {
  text-align: center;
  color: rgba(66, 66, 66, 0.99);
  position: relative;
  bottom: calc(4px + 0.2vw);
  display: flex;
  justify-content: space-between;
  margin-left: calc(28px + 1.4vw);
  align-items: center;
}
.panelKeyboard .tablesPanel .dash-title span .btnDwmPlace .graph-img {
  height: calc(16px + 0.8vw);
  width: calc(16px + 0.8vw);
  text-align: center;
  margin: 0 auto;
}
.panelKeyboard .tablesPanel .dash-title span .btnDwmPlace .graph-img img {
  height: 100%;
}
.panelKeyboard .tablesPanel .dash-title span .btnDwmPlace .btn-dwm {
  display: inline-block;
  padding: calc(2px + 0.1vw) calc(7px + 0.35vw);
  border: solid 1px transparent;
  border-radius: 5px;
  flex: 1;
  min-width: calc(30px + 1.5vw);
}
.panelKeyboard .tablesPanel .dash-title span .btnDwmPlace .btnDwm {
  display: inline-block;
  padding: calc(2px + 0.1vw) calc(7px + 0.35vw);
  font-weight: bold;
  flex: 1;
  border-color: rgba(66, 66, 66, 0.99);
}
.panelKeyboard .tablesPanel .dash-title span .btnDwmPlace .btn-dwm:hover {
  cursor: pointer;
  border-color: rgba(66, 66, 66, 0.99);
  font-weight: bold;
}
.panelKeyboard .tablesPanel .dash-title span i {
  font-weight: bold;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.panelKeyboard .tablesPanel .dash-title span img {
  height: calc(7px + 0.35vw);
  position: relative;
}
.panelKeyboard .tablesPanel .skip {
  opacity: 0;
}
.panelKeyboard .tablesPanel .abs-x.closed {
  display: flex;
  align-items: center;
  justify-content: center;
}
.panelKeyboard .tablesPanel .abs-x.closed .circle {
  width: 15px;
  height: 15px;
  background-color: #333b66;
  border-radius: 500rem;
}
.panelKeyboard .tablesPanel .abs-x {
  position: absolute;
  right: -32px;
  top: -20px;
  line-height: 40px;
  visibility: hidden;
  font-size: calc(16px + 0.8vw);
  width: 40px;
  height: 40px;
  text-align: center;
}
.panelKeyboard .tablesPanel #abs-x4 {
  right: -10px;
}
.panelKeyboard .tablesPanel #abs-x5 {
  right: -28px;
}
.panelKeyboard .tablesPanel #abs-x1 {
  right: calc(-12px - 0.6vw);
  z-index: 1;
}
.panelKeyboard .tablesPanel .abs-x:hover {
  visibility: visible;
  opacity: 1;
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  cursor: pointer;
  border-radius: 50px;
}
.panelKeyboard .tablesPanel .abs-x.x-btn {
  right: -19px;
}
.panelKeyboard .tablesPanel .abs-x.width-btn {
  right: -20px;
  top: 10px;
}
.panelKeyboard .tablesPanel .abs-x.width-btn:hover {
  border: none;
}
.panelKeyboard .tablesPanel .abs-x.num-btn:hover {
  transform: unset;
  -webkit-transform: unset;
}
.panelKeyboard .tablesPanel .abs-x.num-btn {
  right: calc(-14px - 0.7vw);
  top: 50px;
}
.panelKeyboard .tablesPanel .abs-x.num-btn .num-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.panelKeyboard .tablesPanel .abs-x.num-btn .num-box input {
  width: 100%;
  font-size: calc(12px + 0.6vw);
  background-color: unset;
  border: unset;
  font-weight: 700;
  color: #1e1e1e;
  text-align: center;
}
.panelKeyboard .tablesPanel .abs-box {
  position: absolute;
  right: -25px;
  top: -10px;
  line-height: 20px;
  opacity: 0.4;
  font-size: calc(16px + 0.8vw);
}
.panelKeyboard .tablesPanel .abs-box .x-btn {
  border: solid;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.panelKeyboard .tablesPanel .abs-box .width-btn {
  margin-top: 10px;
  font-weight: bold;
  border: solid;
}
.panelKeyboard .tablesPanel .abs-box .width-btn:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.panelKeyboard .tablesPanel .firstVertical {
  margin-right: calc(21px + 1vw);
  height: 100%;
  width: 100%;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal {
  height: 50%;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.box-res {
  border: solid;
  width: 300px;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
  margin-bottom: calc(16px + 0.8vw);
  width: 300px;
  height: 100%;
  padding: 20px 10px;
  position: relative;
}
@media (max-width: 1390px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 250px;
  }
}
@media (max-width: 1380px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 220px;
  }
}
@media (max-width: 1290px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 190px;
  }
}
@media (max-width: 1240px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 160px;
  }
}
@media (max-width: 1190px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 130px;
  }
}
@media (max-width: 1140px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 100px;
  }
}
@media (max-width: 1090px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 70px;
  }
}
@media (max-width: 1040px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 40px;
  }
}
@media (max-width: 990px) {
  .panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.words-err .wordsPanel {
    width: 0px;
  }
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal td.keyb-panel {
  width: 100%;
}
.panelKeyboard .tablesPanel .secondHorizontal {
  position: relative;
  top: calc(8px + 0.4vw);
  height: 50%;
  width: 100%;
}
.panelKeyboard .tablesPanel .secondHorizontal td.width-col {
  width: 10%;
  /* div{
     display: inline-block;
     width: $size-55;
   };*/
}
.panelKeyboard .tablesPanel .secondHorizontal td {
  width: 45%;
}
.panelKeyboard .tablesPanel .errorsPanel {
  margin-left: calc(16px + 0.8vw);
}
.panelKeyboard .tablesPanel .speedPanel,
.panelKeyboard .tablesPanel .errorsPanel {
  flex: 1;
  height: 100%;
  position: relative;
  max-width: calc(150px + 15vw);
}
.panelKeyboard .tablesPanel .speedPanel .speedometer,
.panelKeyboard .tablesPanel .errorsPanel .speedometer {
  position: absolute;
  top: 0;
  width: 100%;
  height: calc(100px + 5vw);
  justify-content: space-between;
  display: flex;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont {
  margin-top: calc(10px + 0.5vw);
  width: 40%;
  height: calc(60px + 3vw);
  position: relative;
  left: calc(12px + 0.6vw);
  text-align: center;
  font-size: calc(18px + 0.9vw);
  color: #3322cd;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont span.red,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont span.red {
  color: red;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont span.blue,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont span.blue {
  color: #3322cd;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont span.blue-light,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont span.blue-light {
  color: #547aff;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont img,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont img {
  width: 100%;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont.current-speed,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont.current-speed {
  margin-top: calc(14px + 0.7vw);
  color: #5d1c67;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont.last-speed,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont.last-speed {
  color: #5d1c67;
  margin-top: calc(5px + 0.25vw);
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont.last-speed span.day-speed,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont.last-speed span.day-speed {
  color: #3322cd;
}
.panelKeyboard .tablesPanel .speedPanel .speedometer .speed-cont.last-speed span.day-speed.red,
.panelKeyboard .tablesPanel .errorsPanel .speedometer .speed-cont.last-speed span.day-speed.red {
  color: red;
}
.panelKeyboard .tablesPanel .speedPanel .opacity-box,
.panelKeyboard .tablesPanel .errorsPanel .opacity-box {
  padding: 0 0 0 0;
}
.panelKeyboard .tablesPanel .speedPanel .bar-box,
.panelKeyboard .tablesPanel .errorsPanel .bar-box {
  height: calc(24px + 1.2vw);
}
.panelKeyboard .tablesPanel .speedPanel .words-box,
.panelKeyboard .tablesPanel .errorsPanel .words-box {
  position: relative;
}
.panelKeyboard .tablesPanel .speedPanel .words-box .abs-month,
.panelKeyboard .tablesPanel .errorsPanel .words-box .abs-month {
  position: absolute;
  height: calc(18px + 0.9vw);
  width: 100%;
  bottom: calc(-20px - 1vw);
  text-align: center;
}
.panelKeyboard .tablesPanel .speedPanel .words-box .abs-month span,
.panelKeyboard .tablesPanel .errorsPanel .words-box .abs-month span {
  color: rgba(66, 66, 66, 0.99);
  text-transform: lowercase;
}
.panelKeyboard .tablesPanel .speedPanel .opacity-box.active,
.panelKeyboard .tablesPanel .errorsPanel .opacity-box.active {
  display: block;
}
.panelKeyboard .tablesPanel .speedPanel .opacity-box,
.panelKeyboard .tablesPanel .errorsPanel .opacity-box {
  min-height: 30px;
  padding: calc(4px + 0.2vw) calc(28px + 1.4vw) 0 calc(6px + 0.3vw);
  border-radius: 0 0 10px 10px;
  display: none;
  background-size: 40px 40px, 20px 20px;
  /*background-image:
          linear-gradient(rgba(120,120,120,.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(120,120,120,.1) 1px, transparent 1px);*/
}
.panelKeyboard .tablesPanel .speedPanel .opacity-box span.span-words,
.panelKeyboard .tablesPanel .errorsPanel .opacity-box span.span-words {
  display: block;
  font-family: DejaVu Sans Mono, Menlo, Lucida Console, monospace;
  font-size: 19px;
}
.panelKeyboard .tablesPanel .speedPanel .opacity-box.targetsPanel,
.panelKeyboard .tablesPanel .errorsPanel .opacity-box.targetsPanel {
  padding-right: 0;
}

.words-box:hover #info-right-5,
.words-box:hover #info-right-4,
.words-box:hover #info-left-4 {
  visibility: visible;
}

.wordsPanel:hover #abs-x1,
.wordsPanel:hover #num-box,
.keyboardPanel:hover #abs-x2,
.keyboardPanel:hover #abs-x3,
.keyboardPanel:hover #abs-x6,
.errorsPanel:hover #abs-x4,
.errorsPanel:hover #info-left-4,
.errorsPanel:hover #info-right-4,
.speedPanel:hover #info-right-5,
.speedPanel:hover #abs-x5 {
  visibility: visible;
}

#info-center-5,
#info-center-4 {
  visibility: visible;
}

.errorsPanel #show4.skip:hover,
.speedPanel #show5.skip:hover {
  opacity: 0.4;
}

#show2.skip:hover {
  opacity: 0.2;
}

.wordsPanel:hover #show1.skip {
  opacity: 0.5;
}

.panelKeyboard .tablesPanel #info-left-4 {
  left: calc(24px + 1.2vw);
  color: #fc046b;
}
.panelKeyboard .tablesPanel #info-center-4 {
  left: calc(80px + 4vw);
  color: #fc046b;
  font-weight: bold;
}
.panelKeyboard .tablesPanel #info-right-4 {
  right: calc(24px + 1.2vw);
  color: #3322cd;
}
.panelKeyboard .tablesPanel #info-right-5 {
  color: #3322cd;
  left: 0;
  top: calc(-32px - 1.6vw);
}
.panelKeyboard .tablesPanel #info-center-5 {
  color: #3322cd;
  top: calc(12px + 0.6vw);
  left: 0;
  width: 100%;
  text-align: center;
  padding-left: calc(28px + 1.4vw);
  font-size: calc(18px + 0.9vw);
}
.panelKeyboard .tablesPanel .info-x {
  position: absolute;
  top: calc(12px + 0.6vw);
  opacity: 0;
  font-size: calc(10px + 0.5vw);
  visibility: hidden;
}
.panelKeyboard .tablesPanel .info-x.show {
  opacity: 0.9;
}

/* checkHands */
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel {
  padding-top: calc(6px + 0.3vw);
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bar-cont {
  height: calc(24px + 1.2vw);
  display: flex;
  justify-content: center;
  text-align: center;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bar-cont .num-box {
  position: relative;
  text-align: center;
  visibility: hidden;
  bottom: calc(28px + 1.4vw);
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bar-cont .num-box .input-box {
  width: 100%;
  position: relative;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bar-cont .num-box .input-box input {
  width: 100%;
  background: rgba(100, 100, 100, 0.05);
  padding: 5px 10px;
  flex: 1;
  text-align: center;
  height: calc(100px + 5vw);
  overflow-wrap: break-word;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bar-cont .num-box .input-box .switch-text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  text-align: center;
  justify-content: center;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place {
  height: 80%;
  position: absolute;
  top: 10%;
  left: 0px;
  min-width: 200px;
  width: 100%;
  overflow-y: scroll;
  text-align: center;
  direction: rtl;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak {
  width: 120px;
  margin-top: 10%;
  margin-left: 10%;
  display: inline-block;
  margin-bottom: 50px;
  position: relative;
  height: 110px;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main {
  width: 100%;
  height: 100%;
  font-size: 18px;
  display: inline-block;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .letter-cont {
  text-align: center;
  min-height: 20px;
  font-weight: bold;
  color: #1818b9;
  text-transform: uppercase;
  position: relative;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .letter-cont span {
  position: absolute;
  right: 30px;
  top: 5px;
  font-size: 25px;
  color: green;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .letter-cont span.left {
  right: unset;
  left: 35px;
  font-weight: normal;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .basket-cont {
  height: 80%;
  text-align: center;
  position: relative;
  direction: ltr;
  /*.basket-num{
    position: absolute;
    left: 10px;
    //transform: translateX(-50%);
    bottom: 110px;
    border: solid;
    //transform: translateY(-50%);
    font-size: 150px;
    font-weight: bold;
    opacity: 0.4;
    color: #5db6f0;
  }*/
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .basket-cont .basket-box {
  position: absolute;
  width: 100px;
  height: 115px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  border: solid 15px rgba(89, 104, 179, 0.5882352941);
  border-radius: 0 0 20px 20px;
  border-top: 1px;
  box-sizing: content-box;
  border-top: solid 6px #6b79b3;
  box-shadow: 1px 1px 3px 2px #5968b3;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .basket-cont .basket-box img {
  height: 100%;
  width: 100%;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .basket-cont .basket-box .basket-num {
  font-size: 80px;
  font-weight: bold;
  opacity: 0.5;
  color: rgba(130, 139, 179, 0.59);
  height: 100%;
  position: relative;
  top: 0;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .basket-cont table {
  position: relative;
  margin: 10px auto;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .basket-main .basket-cont table td {
  width: 20px;
  height: 25px;
  line-height: 1;
  text-align: center;
  color: #6674ff;
  font-weight: bold;
  text-transform: uppercase;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .main-bak .err-letter {
  position: absolute;
  width: 10px;
  height: 30px;
  text-align: center;
  top: 40%;
  left: -60%;
  text-transform: uppercase;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .level-block {
  float: left;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .level-block .level-box {
  width: 50px;
  display: inline-block;
  margin-left: 12px;
  margin-top: 20px;
  font-size: 20px;
  color: #6674ff;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .level-block .level-box .num-box {
  height: 55px;
  border: solid 8px rgba(89, 104, 179, 0.5882352941);
  text-align: center;
  border-radius: 0 0 15px 15px;
  font-size: 25px;
  border-top: solid 4px #6b79b3;
  padding-top: 3px;
  box-shadow: 1px 1px 3px 2px #6497e0;
  font-weight: bold;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .level-block .level-box .speed-box {
  height: 20px;
  text-align: center;
  padding-top: 4px;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .bak-place .small-box {
  float: left;
  height: 40px;
  width: 50px;
  border: solid;
  margin-left: 20px;
  margin-top: 20px;
  direction: ltr;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .words-box {
  padding: 10px 0 0 10px;
}
.panelKeyboard .tablesPanel .firstVertical .firstHorizontal .wordsPanel .words-box .scroll-cont {
  overflow: auto;
  text-align: center;
  height: 80px;
  height: calc(40px + 2vw);
}

.keyboardPanel {
  flex: 2;
  position: relative;
  bottom: calc(5px + 0.25vw);
}

.speedPanel,
.errorsPanel,
.keyboardPanel {
  /* @media(max-width: 1290px){
     .keys-place{ width: 500px;
     .keys{ transform: scale(0.9)}
   }}
   @media(max-width: 1190px){.keys-place{width: 400px;}}
   @media(max-width: 1090px){.keys-place{width: 300px;}}*/
}
.speedPanel .keys-place,
.errorsPanel .keys-place,
.keyboardPanel .keys-place {
  position: relative;
}
.speedPanel .keys-place .keys,
.errorsPanel .keys-place .keys,
.keyboardPanel .keys-place .keys {
  padding: 5px;
  height: 170px;
  position: relative;
  margin: 0 auto;
}
.speedPanel .keys-place .keys .keys-box,
.errorsPanel .keys-place .keys .keys-box,
.keyboardPanel .keys-place .keys .keys-box {
  width: 100%;
  height: 100%;
}
.speedPanel .keys-place .keys div.clear,
.errorsPanel .keys-place .keys div.clear,
.keyboardPanel .keys-place .keys div.clear {
  clear: both;
}
.speedPanel .keys-place .keys .last-row,
.errorsPanel .keys-place .keys .last-row,
.keyboardPanel .keys-place .keys .last-row {
  height: 20px;
  border: solid;
}
.speedPanel .keys-place .keys div.key-btn,
.errorsPanel .keys-place .keys div.key-btn,
.keyboardPanel .keys-place .keys div.key-btn {
  float: left;
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 15px;
  border: 1px solid #c7d0d4;
  background: #fff;
  margin: 1px;
  text-align: center;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.speedPanel .keys-place .keys div.key-btn .finger-box,
.errorsPanel .keys-place .keys div.key-btn .finger-box,
.keyboardPanel .keys-place .keys div.key-btn .finger-box {
  position: absolute;
  height: 25px;
  width: 40px;
  top: 33px;
  left: -10px;
  z-index: 1;
}
.speedPanel .keys-place .keys div.key-btn .finger-box img,
.errorsPanel .keys-place .keys div.key-btn .finger-box img,
.keyboardPanel .keys-place .keys div.key-btn .finger-box img {
  height: 100%;
}
.speedPanel .keys-place .keys div.key-btn input,
.errorsPanel .keys-place .keys div.key-btn input,
.keyboardPanel .keys-place .keys div.key-btn input {
  width: 100%;
  height: 100%;
  border: unset;
  font-size: 20px;
  text-align: center;
  cursor: default;
}
.speedPanel .keys-place .keys div.key-btn input:focus,
.errorsPanel .keys-place .keys div.key-btn input:focus,
.keyboardPanel .keys-place .keys div.key-btn input:focus {
  font-weight: bold;
  border: solid 1px black;
}
.speedPanel .keys-place .keys div.caps,
.errorsPanel .keys-place .keys div.caps,
.keyboardPanel .keys-place .keys div.caps {
  width: 75px;
}
.speedPanel .keys-place .keys div.tab,
.errorsPanel .keys-place .keys div.tab,
.keyboardPanel .keys-place .keys div.tab {
  width: 63px;
}
.speedPanel .keys-place .keys div.enter,
.errorsPanel .keys-place .keys div.enter,
.keyboardPanel .keys-place .keys div.enter {
  width: 76px;
}
.speedPanel .keys-place .keys div.hand input,
.errorsPanel .keys-place .keys div.hand input,
.keyboardPanel .keys-place .keys div.hand input {
  border: 1px solid #86a1ff;
  color: #6674ff;
  font-weight: bold;
  background-color: #f3eff6;
}
.speedPanel .keys-place .keys div.sel,
.errorsPanel .keys-place .keys div.sel,
.keyboardPanel .keys-place .keys div.sel {
  background: #a8ccff;
}
.speedPanel .keys-place .keys div.sel input,
.errorsPanel .keys-place .keys div.sel input,
.keyboardPanel .keys-place .keys div.sel input {
  font-size: 28px;
  font-weight: bold;
  color: blue;
  background: inherit;
}
.speedPanel .keys-place .keys div.sys,
.errorsPanel .keys-place .keys div.sys,
.keyboardPanel .keys-place .keys div.sys {
  background: unset;
  border: unset;
}
.speedPanel .keys-place .keys div.sys input,
.errorsPanel .keys-place .keys div.sys input,
.keyboardPanel .keys-place .keys div.sys input {
  background: unset;
}
.speedPanel .keys-place .keys div.rshift,
.speedPanel .keys-place .keys div.lshift,
.errorsPanel .keys-place .keys div.rshift,
.errorsPanel .keys-place .keys div.lshift,
.keyboardPanel .keys-place .keys div.rshift,
.keyboardPanel .keys-place .keys div.lshift {
  width: 101px;
}
@media (max-width: 1380px) {
  .speedPanel .keys-place .keys,
  .errorsPanel .keys-place .keys,
  .keyboardPanel .keys-place .keys {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
}
@media (max-width: 1290px) {
  .speedPanel .keys-place .keys,
  .errorsPanel .keys-place .keys,
  .keyboardPanel .keys-place .keys {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
}
@media (max-width: 1240px) {
  .speedPanel .keys-place .keys,
  .errorsPanel .keys-place .keys,
  .keyboardPanel .keys-place .keys {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
  }
}
@media (max-width: 1190px) {
  .speedPanel .keys-place .keys,
  .errorsPanel .keys-place .keys,
  .keyboardPanel .keys-place .keys {
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    margin-left: -70px;
    left: 130px;
  }
}
.speedPanel .keys-place .width600,
.errorsPanel .keys-place .width600,
.keyboardPanel .keys-place .width600 {
  width: 604px;
  min-width: 604px;
}
.speedPanel .keys-place .width400,
.errorsPanel .keys-place .width400,
.keyboardPanel .keys-place .width400 {
  width: 406px;
}

.navPanel .targetsMenuPlace {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-right: calc(12px + 0.6vw);
}
.navPanel .targetsMenuPlace .targets-row {
  margin-top: calc(5px + 0.25vw);
  height: calc(18px + 0.9vw);
  flex: 1;
  display: flex;
  justify-content: center;
}
.navPanel .targetsMenuPlace .targets-row .imgRowPlace {
  height: calc(14px + 0.7vw);
}
.navPanel .targetsMenuPlace .targets-row .imgRowPlace img {
  height: 100%;
  margin-right: -6px;
}
.navPanel .targetsMenuPlace .targets-row .imgRowPlace img:hover {
  cursor: pointer;
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
}
.navPanel .targetsMenuPlace .targets-row .imgAutoPlace {
  position: relative;
  bottom: calc(4px + 0.2vw);
}
.navPanel .targetsMenuPlace .targets-row .imgAutoPlace img {
  height: calc(18px + 0.9vw);
}
.navPanel .targetsMenuPlace .targets-menu {
  height: 100%;
}
.navPanel .targetsMenuPlace .targets-menu .typeImgCont {
  display: inline-block;
  height: calc(21px + 1vw);
  width: calc(21px + 1vw);
  opacity: 1;
  margin-right: calc(2px + 0.1vw);
}
.navPanel .targetsMenuPlace .targets-menu .typeImgCont img {
  height: 100%;
}
.navPanel .targetsMenuPlace .targets-menu .typeImgCont:hover {
  cursor: pointer;
  transform: scale(1.1);
  z-index: 2;
}

.navPanel {
  position: relative;
  height: 100%;
  margin: 0 auto;
  width: 300px;
  max-width: calc(250px + 12.5vw);
}
.navPanel table {
  height: 100%;
  padding-top: calc(12px + 0.6vw);
  width: 100%;
}
.navPanel .close-nav {
  height: calc(12px + 0.6vw);
  width: calc(12px + 0.6vw);
  position: absolute;
  left: calc(-24px - 1.2vw);
  bottom: calc(5px + 0.25vw);
  opacity: 0.7;
}
.navPanel .close-nav img {
  height: 100%;
  width: 100%;
}
.navPanel .close-nav:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  cursor: pointer;
  margin-bottom: calc(5px + 0.25vw);
  opacity: 1;
}
.navPanel td.td-bar {
  height: calc(12px + 0.6vw);
}
.navPanel td.td-menu {
  height: calc(30px + 1.5vw);
  padding-top: calc(5px + 0.25vw);
}
.navPanel td.td-pwa {
  height: calc(50px + 2.5vw);
}
.navPanel .bar-box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: calc(10px + 0.5vw);
  padding: 0 calc(12px + 0.6vw);
  position: relative;
}
.navPanel .bar-box .nav-cont {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  position: relative;
}
.navPanel .bar-box .nav-cont .nav-target {
  color: #5969b3;
  font-weight: 700;
  width: 115%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 calc(16px + 0.8vw) 0 calc(24px + 1.2vw);
}
.navPanel .bar-box .nav-cont .nav-target h3 {
  margin: calc(5px + 0.25vw) calc(5px + 0.25vw) calc(5px + 0.25vw) 0;
  padding: calc(8px + 0.4vw) calc(4px + 0.2vw);
  margin: unset;
  padding: unset;
  border-radius: 5px;
  background-color: #dbdeef;
  color: #5977B3;
  font-weight: 700;
  box-sizing: border-box;
  border: 1px solid transparent;
  display: inline-block;
  font-size: calc(10px + 0.5vw);
  text-align: center;
}
.navPanel .bar-box .nav-cont .nav-target h3.active {
  opacity: 1;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level {
  flex: 1;
  margin-right: calc(12px + 0.6vw);
  min-width: calc(75px + 3.7vw);
  background: #E6E6E6;
  position: relative;
  border-radius: 3px;
  height: calc(5px + 0.25vw);
  padding-top: 2px;
  overflow: hidden;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level .bar {
  background-color: #797ec1;
  height: 60%;
  border-radius: 3px;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level .num-targets {
  position: absolute;
  height: 20px;
  top: calc(-16px - 0.8vw);
  left: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level .num-targets span {
  font-size: calc(10px + 0.5vw);
  font-weight: normal;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level .num-targets span:hover {
  cursor: unset;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level .num-targets span.passed {
  font-weight: bold;
  color: #5977B3;
}
.navPanel .bar-box .nav-cont .nav-target .progress-level .num-targets span.active {
  font-size: calc(12px + 0.6vw);
}
.navPanel .targets-box {
  min-height: 30px;
  border-radius: 0 0 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background-size: 40px 40px, 20px 20px;
  flex: 1;
  height: 100%;
  scroll-behavior: smooth;
  padding-right: 20px;
}
.navPanel .targets-box .resPlace {
  margin-top: calc(8px + 0.4vw);
}
.navPanel .targets-box .resPlace .row-today {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: calc(2px + 0.1vw);
  padding-right: calc(10px + 0.5vw);
  font-size: calc(9px + 0.4vw);
  align-items: center;
}
.navPanel .targets-box .resPlace .row-today span {
  min-width: 15%;
  text-align: center;
}
.navPanel .words-box {
  height: calc(100% - 26px - 1.3vw);
  position: relative;
  border: solid;
}
.navPanel .opacity-box.active {
  display: block;
}
.navPanel .opacity-box {
  min-height: 30px;
  padding: calc(4px + 0.2vw) calc(28px + 1.4vw) 0 calc(6px + 0.3vw);
  border-radius: 0 0 10px 10px;
  display: none;
  background-size: 40px 40px, 20px 20px;
}
.navPanel .opacity-box span.span-words {
  display: block;
  font-family: DejaVu Sans Mono, Menlo, Lucida Console, monospace;
  font-size: 19px;
}
.navPanel .opacity-box.targetsPanel {
  padding-right: 0;
}

@media (max-width: 1190px) {
  .navPanel {
    width: 250px;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
}
@media (max-width: 1090px) {
  .navPanel {
    width: 200px;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
}
.navPanel .pwa-table .words-errors {
  text-align: center;
  font-weight: normal;
}
.navPanel .pwa-table .scroll-cont {
  border: solid 1px;
  overflow-y: auto;
  border-radius: 5px;
  background: white;
  padding: 3px 10px;
  min-height: 40px;
  max-height: 80px;
}

.navPanel .pwa-table {
  color: #5977B3;
  font-weight: bold;
  display: table;
  margin: 0 auto;
  margin-bottom: calc(12px + 0.6vw);
  position: relative;
  width: 100%;
  font-size: 14px;
  font-size: calc(8px + 0.4vw);
  margin-top: 15px;
}
.navPanel .pwa-table .abs-eva {
  position: absolute;
  top: calc(-10px - 0.5vw);
  left: calc(-16px - 0.8vw);
  width: calc(35px + 1.7vw);
  height: 30px;
}
.navPanel .pwa-table .abs-eva img {
  width: 100%;
}
.navPanel .pwa-table .pwa-row.app-box {
  height: calc(35px + 1.7vw);
}
.navPanel .pwa-table .pwa-row {
  font-size: 16px;
  font-size: calc(9px + 0.4vw);
  position: relative;
  display: table-row;
  height: calc(21px + 1vw);
}
.navPanel .pwa-table .pwa-row p {
  margin: calc(3px + 0.15vw);
  font-size: calc(10px + 0.5vw);
  font-weight: normal;
  color: #333b66;
}
.navPanel .pwa-table .pwa-row h4 {
  margin: calc(6px + 0.3vw);
  color: #333b66;
}
.navPanel .pwa-table .pwa-row .help-scroll {
  overflow-y: auto;
  font-weight: normal;
  text-indent: 1em;
  font-weight: bold;
  max-height: 150px;
  max-height: calc(75px + 3.7vw);
  position: relative;
  top: 15px;
}
.navPanel .pwa-table .pwa-row .pwa-icon {
  text-align: center;
}
.navPanel .pwa-table .pwa-row .pwa-text {
  display: table-cell;
  vertical-align: middle;
  width: calc(75px + 3.7vw);
  overflow: visible;
  white-space: nowrap;
  position: relative;
  padding-right: calc(35px + 1.7vw);
}
.navPanel .pwa-table .pwa-row .pwa-text span.icon-k {
  display: inline-block;
  width: calc(30px + 1.5vw);
  height: calc(24px + 1.2vw);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}
.navPanel .pwa-table .pwa-row .pwa-text span.icon-k img {
  height: 100%;
}
.navPanel .pwa-table .pwa-row .pwa-text span.icon-k:hover {
  cursor: pointer;
  opacity: 0.8;
}
.navPanel .pwa-table .pwa-row .pwa-text span.text-k {
  display: inline-block;
  border: 1px solid;
  height: 100%;
}
.navPanel .pwa-table .pwa-row .pwa-btn {
  text-align: center;
  min-width: calc(50px + 2.5vw);
  height: calc(18px + 0.9vw);
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.navPanel .pwa-table .pwa-row .pwa-btn .week-day {
  position: absolute;
  left: calc(-20px - 1vw);
  top: 0px;
  height: 100%;
  width: 30px;
  display: table;
  /*display: table-cell;
  vertical-align: middle;
  text-align: center;*/
}
.navPanel .pwa-table .pwa-row .pwa-btn .week-day span {
  display: table-cell;
  vertical-align: middle;
}
.navPanel .pwa-table .pwa-row .pwa-btn .input-cont {
  display: inline-block;
}
.navPanel .pwa-table .pwa-row .pwa-btn .input-cont input {
  width: calc(35px + 1.7vw);
  padding-left: calc(5px + 0.25vw);
  border: none;
  position: relative;
  left: calc(5px + 0.25vw);
}
.navPanel .pwa-table .pwa-row .pwa-btn .input-cont input.input-speed {
  width: calc(40px + 2vw);
}
.navPanel .pwa-table .pwa-row .pwa-btn .input-cont .push-time {
  position: relative;
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn {
  position: absolute;
  display: inline-block;
  right: calc(-60px - 0.3vw);
  top: 0;
  width: calc(12px + 0.6vw);
  height: 100%;
  z-index: 2;
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn .push-switch.green .circle {
  background: linear-gradient(160deg, #a4dfa4, green);
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn .push-switch {
  position: relative;
  width: 100%;
  height: 100%;
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn .push-switch .circle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  height: calc(7px + 0.35vw);
  width: calc(7px + 0.35vw);
  border-radius: 50%;
  background: linear-gradient(160deg, #FF8F83, #ff2a26);
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn .push-switch .circle.green {
  background: linear-gradient(160deg, #a4dfa4, green);
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn .push-switch .circle.Main {
  height: calc(9px + 0.4vw);
  width: calc(9px + 0.4vw);
}
.navPanel .pwa-table .pwa-row .pwa-btn .red-btn:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  cursor: pointer;
}
.navPanel .pwa-table .pwa-row .pwa-btn .open-btn {
  text-decoration: underline;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.navPanel .pwa-table .pwa-row .pwa-btn .open-btn:hover {
  cursor: pointer;
  color: #333b66;
}
.navPanel .pwa-table .pwa-row .pwa-btn .remind-btn {
  width: calc(90px + 4.5vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.navPanel .pwa-table .pwa-row .pwa-btn .remind-btn input {
  width: calc(35px + 1.7vw);
}
.navPanel .pwa-table .pwa-row .pwa-switch .ui.toggle.checkbox {
  position: relative;
  left: calc(5px + 0.25vw);
  top: 3px;
}
.navPanel .pwa-table .pwa-row .pwa-switch .ui.toggle.checkbox label:before {
  border: 1px solid #333b66;
  box-sizing: border-box;
}
.navPanel .pwa-table .pwa-row .pwa-switch .ui.toggle.checkbox label:hover {
  cursor: pointer;
  opacity: 0.8;
}
.navPanel .pwa-table .pwa-row .table-cell {
  width: calc(35px + 1.7vw);
  display: table-cell;
}

.navPanel .pwa-table .pwa-row.week-row .pwa-text {
  width: calc(40px + 2vw);
  position: relative;
}
.navPanel .pwa-table .pwa-row.week-row .pwa-text .pwa-switch {
  position: absolute;
  top: 5px;
  left: calc(-6px - 0.3vw);
}
.navPanel .pwa-table .pwa-row.week-row .pwa-btn {
  text-align: right;
  min-width: calc(40px + 2vw);
}

.levelsPlace.testPlace .row-day {
  justify-content: space-around;
}
.levelsPlace.testPlace .row-day.row-level h2:hover {
  border-color: transparent;
  cursor: unset;
}
.levelsPlace.testPlace .row-day.notActive h2, .levelsPlace.testPlace .row-day.notActive span {
  color: #613E67;
}
.levelsPlace.testPlace span {
  color: #333b66;
}

.levelsPlace {
  width: 100%;
}
.levelsPlace .level-repeat,
.levelsPlace .row-day {
  display: none;
  color: #333b66;
}
.levelsPlace .level-repeat h2,
.levelsPlace .row-day h2 {
  color: #333b66;
}
.levelsPlace .level-repeat.visible {
  display: block;
}
.levelsPlace .row-day.visible {
  display: flex;
}
.levelsPlace .row-level.row-day {
  background: #d0d6e6;
}
.levelsPlace .row-level.row-day h2 {
  font-size: calc(10px + 0.5vw);
  color: #5977B3;
}
.levelsPlace .row-level.row-day span {
  font-weight: normal;
}
.levelsPlace .row-level.row-day:hover {
  cursor: unset;
  background: unset;
}
.levelsPlace .row-day {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(2px + 0.1vw);
  padding-right: calc(10px + 0.5vw);
  font-size: calc(9px + 0.4vw);
  align-items: center;
}
.levelsPlace .row-day h2 {
  font-size: calc(12px + 0.6vw);
  margin: unset;
  border: solid 1px transparent;
  padding: calc(4px + 0.2vw) calc(6px + 0.3vw);
  display: inline-block;
  border-radius: 5px;
  width: 45%;
  text-align: center;
}
.levelsPlace .row-day span {
  min-width: 15%;
  text-align: center;
  font-size: calc(12px + 0.6vw);
  font-weight: bold;
}
.levelsPlace .row-day span.green {
  color: green;
}
.levelsPlace .row-day.visible,
.levelsPlace .row-day:hover {
  background: #c7d1e6;
  cursor: pointer;
}
.levelsPlace .row-target.row-day:hover {
  border: none;
  cursor: unset;
  background: unset;
}
.levelsPlace .row-target {
  display: none;
}
.levelsPlace .row-target span {
  font-size: calc(11px + 0.5vw);
  font-weight: normal;
}
.levelsPlace .row-target h2 {
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.levelsPlace .row-target h2 .tarImgCont {
  height: calc(16px + 0.8vw);
  width: calc(16px + 0.8vw);
}
.levelsPlace .row-target h2 .tarImgCont img {
  height: 100%;
  width: 100%;
}
.levelsPlace .level-repeat.visible,
.levelsPlace .row-target.row-day.visible {
  background: #d0d6e6;
  margin: 0;
  padding-top: calc(4px + 0.2vw);
}
.levelsPlace .row-day.notActive h2, .levelsPlace .row-day.notActive span {
  color: #5977B3;
}
.levelsPlace .row-day.notActive h2 {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}
.levelsPlace .row-day.notActive h2:hover {
  cursor: unset;
  border-color: transparent;
}
.levelsPlace .row-day.notActive:hover {
  cursor: unset;
  background: unset;
  border-color: transparent;
}
.levelsPlace .row-day.notActive:hover h2 {
  border-color: transparent;
}
.levelsPlace .row-day.activeDay {
  /*h2{
    color: black;
  }*/
}
.levelsPlace .row-day.activeDay span {
  font-weight: normal;
  font-style: italic;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

.PlaceSocial {
  display: flex;
  position: relative;
  justify-content: center;
  margin-top: 10px;
}
.PlaceSocial .A {
  margin-right: 40px;
}
.PlaceSocial .A .btn_social {
  width: 55px;
  height: 55px;
  position: relative;
  top: 7px;
  left: 16px;
  border-radius: 12px;
  overflow: hidden;
}
.PlaceSocial .A .btn_social img {
  height: 100%;
  width: 100%;
}
.PlaceSocial .A .btn_social:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.login.container {
  margin-top: 80px;
}

/*@media( min-width: 1300px){
  .login.container{
    width: 1300px;
  }
}*/
.loginPlace {
  position: relative;
}
.loginPlace .ui.input {
  border: 4px solid #f7c35d;
  position: relative;
}
.loginPlace .ui.input input {
  height: 100%;
  border: unset;
  border: 0;
  background: unset;
  padding: 8px 12px;
}
.loginPlace .ui.input .field-icon {
  margin-right: calc(5px + 0.25vw);
  margin-top: 9px;
  position: relative;
  z-index: 2;
  height: 25px;
  width: 25px;
  position: absolute;
  top: 0px;
  right: 0px;
}
.loginPlace .ui.input .field-icon img {
  height: 100%;
  width: 100%;
}
.loginPlace .ui.input .field-icon:hover {
  cursor: pointer;
}
.loginPlace .chancel-box {
  position: absolute;
  top: 20px;
  right: 18px;
  top: calc(10px + 0.5vw);
  right: calc(9px + 0.4vw);
  width: 24px;
  height: 24px;
}
.loginPlace .chancel-box img {
  width: 100%;
  height: 100%;
}
.loginPlace .chancel-box:hover {
  cursor: pointer;
  opacity: 0.7;
}
.loginPlace .panel-body.inter .title-text {
  font-size: calc(12px + 0.6vw);
  display: inline-block;
  margin-right: 30px;
}
.loginPlace .panel-body.inter .heading {
  background: #1e1449;
  color: #fff;
  margin-left: 5px;
  display: inline-block;
  padding: 7px 20px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #180e44;
  font-size: calc(10px + 0.5vw);
}
.loginPlace .panel-body.inter .heading:hover {
  background: #38335c;
  cursor: pointer;
}

#modalLogin.shadow {
  opacity: 0.5;
}

#modalLogin.not_visible {
  opacity: 0;
}

#modalLogin, #modalSignUp {
  transition: opacity 2s ease;
}
#modalLogin .modal.fade .modal-dialog, #modalSignUp .modal.fade .modal-dialog {
  transform: translate3d(25%, 0, 0);
}
#modalLogin .modal-dialog, #modalSignUp .modal-dialog {
  position: fixed;
  right: 80px;
  top: 30px;
  width: calc(250px + 12.5vw);
}

.loginPlace, .registerPlace, .forgotPlace {
  box-shadow: unset;
}
.loginPlace .help-block, .registerPlace .help-block, .forgotPlace .help-block {
  color: #db2828;
}
.loginPlace .has-error .input, .registerPlace .has-error .input, .forgotPlace .has-error .input {
  border-color: #db2828 !important;
}
.loginPlace .form-group, .registerPlace .form-group, .forgotPlace .form-group {
  width: 100%;
  position: relative;
  margin: 0;
}
.loginPlace .panel-default, .registerPlace .panel-default, .forgotPlace .panel-default {
  border: solid 1px #ccc;
  width: calc(380px + 19vw);
  margin: 0 auto;
  background: #bcc1d6;
}
.loginPlace a, .registerPlace a, .forgotPlace a {
  color: #4c3a9d;
}
.loginPlace a:hover, .registerPlace a:hover, .forgotPlace a:hover {
  color: #160c43;
  text-decoration: none;
}
.loginPlace .panel-body.inter, .registerPlace .panel-body.inter, .forgotPlace .panel-body.inter {
  margin: 48px;
  margin: calc(24px + 1.2vw);
  padding: 0;
}
.loginPlace .panel-body.inter label, .loginPlace .panel-body.inter input, .loginPlace .panel-body.inter a, .loginPlace .panel-body.inter button, .loginPlace .panel-body.inter div, .registerPlace .panel-body.inter label, .registerPlace .panel-body.inter input, .registerPlace .panel-body.inter a, .registerPlace .panel-body.inter button, .registerPlace .panel-body.inter div, .forgotPlace .panel-body.inter label, .forgotPlace .panel-body.inter input, .forgotPlace .panel-body.inter a, .forgotPlace .panel-body.inter button, .forgotPlace .panel-body.inter div {
  font-family: "Segoe UI", "MuseoSans300", Tahoma, serif;
  font-size: 20px;
}
.loginPlace .panel-body.inter button.login, .registerPlace .panel-body.inter button.login, .forgotPlace .panel-body.inter button.login {
  font-size: 20px;
  font-weight: unset;
  /*background-color: #2ca0f7;
  background-image: linear-gradient(to bottom, #3bb9fa, #2ca0f7);
  box-shadow: #2c93d4 0 1px 2px;*/
  background-color: #5967b3;
  box-shadow: #5967b3 0 1px 2px;
  color: white;
  text-transform: uppercase;
}
.loginPlace .panel-body.inter button.login:hover, .registerPlace .panel-body.inter button.login:hover, .forgotPlace .panel-body.inter button.login:hover {
  opacity: 0.9;
  cursor: pointer;
  background-color: #5961b3;
}
.loginPlace .form-box, .registerPlace .form-box, .forgotPlace .form-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loginPlace .form-box .ui.input, .registerPlace .form-box .ui.input, .forgotPlace .form-box .ui.input {
  width: 100%;
}
.loginPlace .form-box .agree input, .registerPlace .form-box .agree input, .forgotPlace .form-box .agree input {
  position: absolute;
  font-size: 11px;
  margin: 0;
  left: 7px;
  top: 7px;
}
.loginPlace .form-box .agree label, .registerPlace .form-box .agree label, .forgotPlace .form-box .agree label {
  max-width: 100%;
  margin-bottom: 5px;
  display: inline-block;
  position: relative;
  width: 280px;
  font-weight: 400;
  padding-left: 45px;
  vertical-align: middle;
  font-size: 18px;
}
.loginPlace .form-box .agree label a, .registerPlace .form-box .agree label a, .forgotPlace .form-box .agree label a {
  font-size: 18px;
}
.loginPlace .form-box .agree .checkbox-agree, .registerPlace .form-box .agree .checkbox-agree, .forgotPlace .form-box .agree .checkbox-agree {
  display: inline-block;
  border: solid 1px;
}
.loginPlace .form-box .remember, .registerPlace .form-box .remember, .forgotPlace .form-box .remember {
  margin-top: 10px;
  /*input{
     width: 24px;
     height: 24px;
     margin-left: 0;
     position: relative;
     top: 7px;
   }
  input:hover{
    border: solid;
  }*/
}
.loginPlace .form-box .remember .checkbox-box, .registerPlace .form-box .remember .checkbox-box, .forgotPlace .form-box .remember .checkbox-box {
  height: calc(12px + 0.6vw);
  width: calc(12px + 0.6vw);
  position: relative;
  top: 5px;
  left: 5px;
  opacity: 0.8;
}
.loginPlace .form-box .remember label, .registerPlace .form-box .remember label, .forgotPlace .form-box .remember label {
  padding: 0 0 0 10px;
  font-weight: normal;
}
.loginPlace .form-box .forgot, .registerPlace .form-box .forgot, .forgotPlace .form-box .forgot {
  align-self: start;
  padding-left: 0;
}
.loginPlace .form-box .login, .registerPlace .form-box .login, .forgotPlace .form-box .login {
  width: 100%;
  background-color: #ddd;
  border: none;
}
.loginPlace .loginWith, .registerPlace .loginWith, .forgotPlace .loginWith {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.loginPlace .loginWith .line, .registerPlace .loginWith .line, .forgotPlace .loginWith .line {
  border: solid 1px #ddd;
  width: 100px;
  height: 1px;
  float: left;
  position: relative;
  top: 12px;
}
.loginPlace .loginWith .text, .registerPlace .loginWith .text, .forgotPlace .loginWith .text {
  white-space: nowrap;
  margin: -4px 10px 0 10px;
  float: left;
}
.loginPlace .social-group, .registerPlace .social-group, .forgotPlace .social-group {
  display: flex;
  position: relative;
  justify-content: center;
  margin-top: 10px;
}
.loginPlace .social-group a.socials, .registerPlace .social-group a.socials, .forgotPlace .social-group a.socials {
  margin-right: 32px;
  margin-right: calc(21px + 1vw);
  float: left;
}
.loginPlace .social-group .social-btn, .registerPlace .social-group .social-btn, .forgotPlace .social-group .social-btn {
  width: 60px;
  height: 60px;
  width: calc(30px + 1.5vw);
  height: calc(30px + 1.5vw);
  position: relative;
  top: 7px;
  left: 5px;
  display: flex;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  overflow: hidden;
}
.loginPlace .social-group .social-btn img, .registerPlace .social-group .social-btn img, .forgotPlace .social-group .social-btn img {
  height: 100%;
  width: 100%;
}
.loginPlace .dontHave, .registerPlace .dontHave, .forgotPlace .dontHave {
  margin-top: 36px;
  font-size: 14px;
}
.loginPlace .dontHave a, .registerPlace .dontHave a, .forgotPlace .dontHave a {
  font-weight: bold;
  font-size: 14px;
}
.loginPlace .name input, .registerPlace .name input, .forgotPlace .name input {
  flex-basis: 47%;
}
.loginPlace #surname, .registerPlace #surname, .forgotPlace #surname {
  margin-right: 0;
  margin-left: auto;
}
.ui.input .space {
  width: 14px;
}

.SupperBody .panel-body.inter button.login {
  background-color: #46a1da;
  box-shadow: #46a1da 0 1px 2px;
  padding: 0.6em 0;
}
.SupperBody .panel-body.inter button.login:hover {
  background-color: #56a9da;
}

#registerPlace .form-group.name .ui.input, #registerCompany .form-group.name .ui.input {
  display: flex;
  justify-content: space-between;
}
#registerPlace .form-group.name .ui.input .space, #registerCompany .form-group.name .ui.input .space {
  width: 18px;
}
#registerPlace .form-group.name .ui.input input, #registerCompany .form-group.name .ui.input input {
  width: 40%;
}

.forgotPlace .title-text h2 {
  font-weight: unset;
  font-size: 30px;
}
.forgotPlace .alert-success {
  color: rgb(30, 56, 179);
  background-color: rgba(89, 104, 179, 0.3);
  border-color: rgba(89, 104, 179, 0.3);
}
.forgotPlace .form-group {
  margin-top: 18px;
}
.forgotPlace .form-box button {
  margin-top: 27px;
  white-space: normal;
}
.forgotPlace .text {
  margin: 40px 0 20px;
}
.forgotPlace .text a:hover {
  color: #9387cb;
}
.forgotPlace .back-text {
  margin-top: 10px;
}
.forgotPlace .back-text a:hover {
  color: #9387cb;
}

.registerPlace .title-place, .registerCompany .title-place, .billingPlace .title-place {
  padding: 12px 0;
  text-align: center;
}
.registerPlace .title-place .sign-place, .registerCompany .title-place .sign-place, .billingPlace .title-place .sign-place {
  justify-content: center;
  display: flex;
}
.registerPlace .title-place .sign-place .sign-box, .registerCompany .title-place .sign-place .sign-box, .billingPlace .title-place .sign-place .sign-box {
  display: inline-block;
}
/* ACCOUNT */
.AccountPlace {
  padding: 30px 20px 10px;
  margin-top: 80px;
}
.AccountPlace .title {
  text-align: center;
  font-size: calc(12px + 0.6vw);
}

#modalLogin.block {
  display: block;
  opacity: 1;
}
#modalLogin.block .modal-dialog {
  top: 250px;
}

.auth-menu a {
  display: inline-block;
  padding: 7px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-size: calc(10px + 0.5vw);
}
.auth-menu a.signUp {
  box-shadow: #5967b3 0 1px 2px;
  font-weight: bold;
  /*background-color: #2ca0f7;
  background-image: linear-gradient(to bottom, #3bb9fa, #2ca0f7);
  box-shadow: #2c93d4 0 1px 2px;*/
}
.auth-menu .login:hover {
  color: #919090;
  border-color: #919090;
  cursor: pointer;
}
.auth-menu .signUp:hover {
  /*opacity: 0.9;
  cursor: pointer;
  background-color: #5961b3;*/
}

.modal-dialog .auth-menu a.signUp {
  margin-left: unset;
  margin-right: 15px;
}
.modal-dialog .auth-menu a.login {
  margin-right: 15px;
}

.HelpTitle.HelpBox {
  top: 92px;
  left: 275px;
}
.HelpTitle.HelpBox .helpOk {
  background: #237dbd;
}

.HelpBox.HelpBasic {
  margin-left: 178px;
  width: calc(100% - 178px);
  white-space: normal;
  top: -7px;
}
.HelpBox.HelpBasic::before {
  display: none;
}
.HelpBox.HelpBasic::after {
  display: none;
}

.HelpEnterSlide.HelpBox {
  display: none;
  font-size: 17px;
  padding: 6px;
  opacity: 0.7;
  top: -52px;
  left: 63px;
}
.HelpEnterSlide.HelpBox::before {
  top: auto;
  bottom: -12px;
  border-bottom: none;
  border-top: 11px solid #88a9b4;
  left: 24px;
}
.HelpEnterSlide.HelpBox::after {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top: 10px solid #ffedbd;
  left: 25px;
}

.HelpEnter2.HelpBox {
  font-size: 17px;
  padding: 6px;
  opacity: 0.7;
  top: -110px;
  left: 63px;
  font-size: 14px;
  line-height: 1.2;
}
.HelpEnter2.HelpBox::before {
  top: auto;
  bottom: -12px;
  border-bottom: none;
  border-top: 11px solid #88a9b4;
  left: 24px;
}
.HelpEnter2.HelpBox::after {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top: 10px solid #ffedbd;
  left: 25px;
}

.HelpEnter.HelpBox {
  top: unset;
  bottom: -63px;
  left: 40px;
  padding: 6px;
  opacity: 0.7;
  font-size: 14px;
  line-height: 1.2;
}

.HelpRepeat.HelpBox {
  top: -53px;
}
.HelpRepeat.HelpBox::before {
  top: auto;
  bottom: -12px;
  border-bottom: none;
  border-top: 11px solid #88a9b4;
  left: 34px;
}
.HelpRepeat.HelpBox::after {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top: 10px solid #ffedbd;
  left: 35px;
}

.HelpSupport.HelpBox {
  top: unset;
  bottom: 50px;
  left: unset;
  right: -90px;
}
.HelpSupport.HelpBox::before {
  top: auto;
  bottom: -12px;
  border-bottom: none;
  border-top: 11px solid #88a9b4;
  right: 20px;
  left: unset;
}
.HelpSupport.HelpBox::after {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top: 10px solid #ffedbd;
  right: 21px;
  left: unset;
}

.HelpRecord.HelpBox {
  top: unset;
  bottom: 50px;
  left: unset;
  right: 90px;
}
.HelpRecord.HelpBox::before {
  top: auto;
  bottom: -12px;
  border-bottom: none;
  border-top: 11px solid #88a9b4;
  left: 94px;
}
.HelpRecord.HelpBox::after {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top: 10px solid #ffedbd;
  left: 95px;
}

.HelpTimer.HelpBox {
  left: unset;
  right: -315px;
  top: 124px;
}
.HelpTimer.HelpBox::before {
  left: 149px;
}
.HelpTimer.HelpBox::after {
  left: 150px;
}

.HelpStart.HelpBox {
  display: none;
  left: unset;
  right: -60px;
  top: 58px;
}
.HelpStart.HelpBox::before {
  left: unset;
  right: 105px;
}
.HelpStart.HelpBox::after {
  left: unset;
  right: 106px;
}

.HelpBox {
  position: absolute;
  top: 42px;
  left: 0px;
  border: solid 1px;
  background: #ffedbd;
  border-radius: 10px;
  z-index: 2;
  padding: 15px 20px;
  text-align: left;
  white-space: nowrap;
  border-color: #88a9b4;
  font-size: 18px;
  font-size: calc(9px + 0.4vw);
  color: #095dbd;
  font-weight: normal;
  cursor: pointer;
}
.HelpBox::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 10px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #88a9b4;
  z-index: 0;
}
.HelpBox::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 11px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffedbd;
  z-index: 1;
}
.HelpBox .helpOk {
  margin-top: 10px;
  background-color: #3295db;
  color: white;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
}
.HelpBox .helpOk:hover {
  background-color: #1691e8;
}

.help-start.abs-sound {
  left: unset;
  right: -263px;
  top: 411px;
}

.help-start::before {
  left: 148px;
}

.HelpTimer.HelpBox {
  left: unset;
  right: -315px;
  top: 124px;
}

.HelpTimer::before {
  left: 148px; /* подгони под расположение кнопки */
}

@media (max-width: 1298px) {
  /*.adsense-vertical{
      display:none !important;
  }*/
  .results_panel_0,
  .main_panel_2 {
    transform: scale(0.9);
    top: 10px;
  }
  .adsense-vertical.left {
    left: -60px;
    z-index: 1;
  }
}
@media (max-width: 1200px) {
  .results_panel_0,
  .main_panel_2 {
    transform: scale(0.8);
    top: 10px;
  }
  .adsense-vertical.right {
    display: none !important;
  }
  .adsense-vertical.left {
    left: -80px;
  }
}
@media (max-width: 1100px) {
  .adsense-vertical.left {
    left: -40px;
  }
  .results_panel_0,
  .main_panel_2 {
    transform: scale(0.7);
  }
  #scrollUpId {
    display: none !important;
  }
}
@media (max-height: 750px) {
  .adsense-vertical.left {
    left: -40px;
  }
  .PlaceResultsFirst,
  .results_panel_0,
  .slide_info,
  .nav-block,
  .main_panel_2,
  .modal_panel_1 {
    transform: scale(0.95);
  }
}
@media (max-height: 700px) {
  .adsense-vertical.left {
    left: -70px;
  }
  .PlaceResultsFirst,
  .results_panel_0,
  .slide_info,
  .nav-block,
  .main_panel_2,
  .modal_panel_1 {
    transform: scale(0.9);
  }
}
@media (max-height: 650px) {
  .adsense-vertical.left {
    left: -120px;
  }
  .PlaceResultsFirst,
  .results_panel_0,
  .slide_info,
  .nav-block,
  .main_panel_2,
  .modal_panel_1 {
    transform: scale(0.8);
  }
}
@media (max-height: 600px) {
  .adsense-vertical.left {
    left: -170px;
  }
  .PlaceResultsFirst,
  .results_panel_0,
  .slide_info,
  .nav-block,
  .main_panel_2,
  .modal_panel_1 {
    transform: scale(0.7);
  }
}
@media (max-height: 500px) {
  .adsense-vertical.left {
    left: -200px;
  }
  .PlaceResultsFirst,
  .results_panel_0,
  .slide_info,
  .nav-block,
  .main_panel_2,
  .modal_panel_1 {
    transform: scale(0.6);
  }
}
.PlaceResultsFirst,
.modal_panel_1,
.main_panel_2,
.results_panel_0 {
  transform-origin: top center;
  position: relative;
}

.game-option {
  display: inline-block;
  position: relative;
  font-size: calc(12px + 0.6vw);
  color: #0c7ebd;
  position: relative;
  /* img.img-repeat,
   img.img-sound{*/
}
.game-option .color-title {
  display: none;
  min-width: 80px;
  min-height: 30px;
  left: -10px;
  position: absolute;
  top: 14px;
}
.game-option .color-title .color-level-box img {
  width: 20px;
  position: relative;
  right: 30px;
  bottom: 10px;
}
.game-option .abs-help {
  position: absolute;
  top: -56px;
  left: -5px;
  border: solid 1px;
  background: #ffedbd;
  background: #ffedbd;
  border-radius: 10px;
  z-index: 2;
  padding: 15px 20px;
  text-align: left;
  white-space: nowrap;
  border-color: #88a9b4;
  font-size: 18px;
  font-size: calc(9px + 0.4vw);
  color: #095dbd;
}
.game-option img {
  width: calc(12px + 0.6vw);
  position: relative;
  top: 3px;
  cursor: pointer;
}

.lang-trans {
  display: inline-block;
}
.lang-trans .box-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  top: 3px;
}
.lang-trans .box-arrow img {
  height: 100%;
}

.abs-goal {
  height: 120px;
  min-width: 120px;
  cursor: pointer;
}
.abs-goal .blockGoal {
  width: 100%;
  height: 100%;
  position: relative;
}
.abs-goal .blockGoal .goal-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: quicksand, sans-serif;
  left: 0;
  letter-spacing: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  color: black;
}
.abs-goal .blockGoal .goal-content .goal-title {
  letter-spacing: 0.5px;
  color: rgba(243, 118, 27, 0.9);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  margin-bottom: 3px;
}
.abs-goal .blockGoal .goal-content .goal-title > div {
  margin-bottom: 3px;
}
.abs-goal .blockGoal .goal-content .goal-time {
  color: #4a4a4a;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.abs-goal .blockGoal .goal-content .goal-info {
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  color: #a9a9a9;
  cursor: default;
  font-size: 14px;
  line-height: 1;
  align-items: center;
  display: flex;
}
.abs-goal .blockGoal .goal-content .goal-info select {
  appearance: none; /* Убирает стандартный стиль */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none;
  outline: unset;
  padding-bottom: 2px;
  opacity: 0.7;
}
.abs-goal .blockGoal .goal-content .goal-info select:hover {
  border-bottom: 1px solid #000;
  cursor: pointer;
  opacity: 1;
}
.abs-goal .goal-radial-progress {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px;
  fill: transparent;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  border-radius: 9999px;
  overflow: visible;
  transition: 0.25s ease-in-out;
}
.abs-goal .goal-highlight-overlay {
  fill: #fff;
  opacity: 0;
  mix-blend-mode: overlay;
  transition: all 0.25s ease-in-out;
}
.abs-goal .goal-progress-stroke {
  stroke: #ffcf46;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke 0.05s ease-in;
}
.abs-goal .goal-default-stroke {
  stroke: #eaeaea;
  fill: #fff;
}

.PlaceMenu {
  background: #3295db;
  width: 100%;
  min-height: 70px;
  padding-bottom: 1px;
  display: flex;
  position: relative;
  min-width: 480px;
}
.PlaceMenu .abs-goal {
  right: -150px;
  top: -15px;
  position: absolute;
  transform: scale(0.8);
}
.PlaceMenu .leftVerticalMenu {
  min-width: 50px;
  align-items: center;
  display: flex;
  margin: 10px;
}
.PlaceMenu .rightVerticalMenu {
  flex: 1;
}
.PlaceMenu .rightVerticalMenu .blockProgress {
  margin: 10px 20px;
}
.PlaceMenu .rightVerticalMenu .blockMenu {
  display: flex;
}
.PlaceMenu .rightVerticalMenu .blockMenu .spell-time {
  font-size: 16px;
  font-weight: normal;
  margin-left: 30px;
  align-items: flex-end;
  display: flex;
}
.PlaceMenu .rightVerticalMenu .blockMenu .spell-list {
  display: flex;
  justify-content: center;
  flex: 1;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul {
  display: flex;
  list-style-type: none;
  margin-bottom: unset;
  margin-top: 5px;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul li {
  margin-right: 20px;
  position: relative;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul li a {
  color: white;
  font-size: 16px;
  font-weight: 500;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul li a:hover {
  cursor: pointer;
  opacity: 0.7;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul li a.is_active {
  color: #fff;
  font-family: quicksand, sans-serif;
  font-weight: 700;
  text-shadow: none;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul li a.is_active:before {
  background-color: #ffcf46;
  height: 2px;
}
.PlaceMenu .rightVerticalMenu .blockMenu ul li a:before {
  background-color: transparent;
  bottom: -1px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  right: 0;
  transition: background-color 0.25s ease-in-out;
}

@font-face {
  font-family: proxima;
  src: url(/static/fonts/proxima_nova/regular/proxima_nova_regular.eot);
  src: url(/static/fonts/proxima_nova/regular/proxima_nova_regular.eot?#iefix) format("embedded-opentype"), url(/static/fonts/proxima_nova/regular/proxima_nova_regular.woff) format("woff"), url(/static/fonts/proxima_nova/regular/proxima_nova_regular.svg) format("svg"), url(/static/fonts/proxima_nova/regular/proxima_nova_regular.ttf) format("truetype"), url(/static/fonts/proxima_nova/regular/proxima_nova_regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: proxima;
  src: url(/static/fonts/proxima_nova/semibold/proxima_nova_semibold.eot);
  src: url(/static/fonts/proxima_nova/semibold/proxima_nova_semibold.eot?#iefix) format("embedded-opentype"), url(/static/fonts/proxima_nova/semibold/proxima_nova_semibold.svg) format("svg"), url(/static/fonts/proxima_nova/semibold/proxima_nova_semibold.woff) format("woff"), url(/static/fonts/proxima_nova/semibold/proxima_nova_semibold.ttf) format("truetype"), url(/static/fonts/proxima_nova/semibold/proxima_nova_semibold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: proxima;
  src: url(/static/fonts/proxima_nova/light/proxima_nova_light.eot);
  src: url(/static/fonts/proxima_nova/light/proxima_nova_light.eot?#iefix) format("embedded-opentype"), url(/static/fonts/proxima_nova/light/proxima_nova_light.svg) format("svg"), url(/static/fonts/proxima_nova/light/proxima_nova_light.woff) format("woff"), url(/static/fonts/proxima_nova/light/proxima_nova_light.ttf) format("truetype"), url(/static/fonts/proxima_nova/light/proxima_nova_light.otf) format("opentype");
  font-weight: 300;
  font-style: normal;
}
/*.SupperBody::before {
  content: "";
  background-image: url('/img/supertype/bg-2.png');
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.2;
}*/
.SupperBody {
  font-family: quicksand, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #92d7fa;
  background-size: 40px 40px, 20px 20px;
  background-image: linear-gradient(rgba(130, 130, 130, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 130, 130, 0.1) 1px, transparent 1px);
  overflow-y: unset;
  overflow-x: unset;
  margin: 0;
  position: relative;
  /*@media (max-width: 970px){

    #logo_super2{
      display: none;
    }

  }*/
}
.SupperBody #footer_place,
.SupperBody #tab_content,
.SupperBody #abs_logo,
.SupperBody #progress_all,
.SupperBody #user_place {
  display: none;
}
.SupperBody #user_place {
  width: 10%;
}
.SupperBody #progress_all {
  width: 50%;
  position: relative;
  right: 42px;
  max-width: 700px;
  transform-origin: top center;
}
.SupperBody .abs-logo {
  width: 20%;
}
@media (max-width: 900px) {
  .SupperBody #footer_place,
  .SupperBody #progress_all {
    display: none;
  }
}
@media (max-width: 700px) {
  .SupperBody #text-desktop {
    display: none !important;
  }
}
.SupperBody #logo_super2,
.SupperBody #logo_super1 {
  padding-top: 3px;
  margin-right: 30px;
  margin-left: 15px;
}
.SupperBody #logo_super2 img,
.SupperBody #logo_super1 img {
  height: 23px;
  height: calc(10px + 1vw);
}
.SupperBody #logo_super2 {
  transform: scale(1.7);
  -webkit-transform: scale(1.7);
  margin-right: 50px;
  display: none;
}
.SupperBody .wrapper {
  margin: 0 2%;
}
@media (min-width: 1800px) {
  .SupperBody .wrapper {
    margin: 0 5%;
  }
}
@media (min-width: 2000px) {
  .SupperBody .wrapper {
    margin: 0 10%;
  }
}
.SupperBody .logo-cont {
  display: none;
}
.SupperBody #inputNext {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.SupperBody .buildMenu {
  margin-bottom: 100px;
  display: none;
  position: relative;
}
.SupperBody .buildMenu #menuPanel {
  z-index: 3;
  position: relative;
}
.SupperBody .buildMenu.active {
  display: block;
}
.SupperBody .mainMenu {
  background: #6cc8fc;
  margin-top: 8px;
  padding: 14px;
  font-size: 16px;
  /*@media(max-width: 1390px){.arrow-menu{width: 150px !important; }}
  @media(max-width: 1290px){.arrow-menu{width: 130px !important; }}
  @media(max-width: 1190px){.arrow-menu{width: 110px !important; }}
  @media(max-width: 1090px){.arrow-menu{width: 90px !important; }}*/
}
.SupperBody .mainMenu .logo-box,
.SupperBody .mainMenu .reg-box,
.SupperBody .mainMenu .center-box {
  display: inline-block;
}
.SupperBody .mainMenu .reg-box {
  right: 20px;
}
.SupperBody .mainMenu .logo-box {
  left: 32px;
  padding-top: 18px;
}
.SupperBody .mainMenu .li-0 .arrow-menu, .SupperBody .mainMenu .li-2 .arrow-menu, .SupperBody .mainMenu .li-4 .arrow-menu {
  background: #67c1fb;
}
.SupperBody .mainMenu .li-0 .arrow-menu .abs-flag-top, .SupperBody .mainMenu .li-2 .arrow-menu .abs-flag-top, .SupperBody .mainMenu .li-4 .arrow-menu .abs-flag-top {
  border-left: 20px solid #67c1fb;
}
.SupperBody .mainMenu .li-1 .arrow-menu, .SupperBody .mainMenu .li-3 .arrow-menu, .SupperBody .mainMenu .li-5 .arrow-menu {
  background: #5cb7f1;
}
.SupperBody .mainMenu .li-1 .arrow-menu .abs-flag-top, .SupperBody .mainMenu .li-3 .arrow-menu .abs-flag-top, .SupperBody .mainMenu .li-5 .arrow-menu .abs-flag-top {
  border-left: 20px solid #5cb7f1;
}
.SupperBody .mainMenu .arrow-menu {
  text-transform: uppercase;
  color: white;
  text-align: center;
  height: 40px;
  position: relative;
  background: grey;
  width: 100%;
  /* background-image: linear-gradient(
                   to top right,
                   white 48%,
                   black,
                   white 52%
   );*/
  /*span.not_active:hover{
      cursor: pointer;
      opacity: 1;
  }*/
}
.SupperBody .mainMenu .arrow-menu .progress-bar {
  width: 3%;
  width: 0%;
  height: 100%;
  background: #46a1da;
}
.SupperBody .mainMenu .arrow-menu span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 60%;
  z-index: 2;
}
.SupperBody .mainMenu .arrow-menu span.not_active {
  opacity: 0.7;
}
.SupperBody .mainMenu .arrow-menu .abs-flag-top {
  position: absolute;
  right: -19px;
  top: 0;
  border-left: 20px solid grey;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  z-index: 1;
}
.SupperBody .mainMenu {
  display: flex;
  justify-content: space-between;
  background-image: linear-gradient(to bottom, #6cc8fc, #61b9fa);
  position: relative;
  padding: calc(7px + 0.35vw) 0;
  font-size: calc(8px + 0.4vw);
  font-size: calc(7.5px + 0.75vw);
  font-weight: bold;
  color: white;
  border-radius: 6px;
  background: transparent;
  margin-top: 10px;
}
.SupperBody .mainMenu .menu-titles {
  font-size: 26px;
  color: #0c7ebd;
  font-style: italic;
}
.SupperBody .mainMenu .menu-titles span.not_active {
  opacity: 0.7;
}
.SupperBody .mainMenu .menu-titles span.not_active:hover {
  cursor: pointer;
  opacity: 1;
}
.SupperBody .mainMenu .menu-titles .sign-more {
  display: inline;
  opacity: 0.7;
}
.SupperBody .mainMenu .menu-titles .sign-more img {
  height: 20px;
  top: 5px;
  position: relative;
}
.SupperBody .mainMenu .logo-box {
  width: 15%;
  height: 100%;
  position: absolute;
  left: calc(16px + 0.8vw);
  top: 0;
  align-items: center;
  padding-top: calc(9px + 0.4vw);
  /* img{
     height: 100%;
   }*/
}
.SupperBody .mainMenu .logo-box .logo-cont {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.SupperBody .mainMenu .logo-box .logo-cont img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.SupperBody .mainMenu .logo-box img {
  /*.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }*/
}
.SupperBody .mainMenu .reg-abs {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.SupperBody .mainMenu .reg-abs a {
  margin-left: 10px;
  color: white;
}
.SupperBody .mainMenu .reg-box {
  height: 100%;
  right: calc(10px + 0.5vw);
  top: 0;
  min-width: 50px;
  float: right;
}
.SupperBody .mainMenu .reg-box .reg-cont {
  height: 100%;
  width: 100%;
  display: inline-block;
  border: solid;
  direction: rtl;
}
.SupperBody .mainMenu .reg-box .reg-cont a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
}
.SupperBody .mainMenu .reg-box .reg-cont a:hover {
  cursor: pointer;
}
.SupperBody .mainMenu .centerMenu {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  /*.speed-title{
    position: relative;
    bottom: $size-10;
    font-size: $size-60;
    height: $size-48;
  }*/
}
.SupperBody .mainMenu .centerMenu .nav-block {
  display: flex;
}
.SupperBody .mainMenu .centerMenu .nav-block .nav-box {
  position: relative;
  width: 100%;
}
.SupperBody .mainMenu .centerMenu .nav-block .nav-box .progress-all {
  position: absolute;
  bottom: calc(3px + 0.3vw);
  border: white 1px solid;
  height: 26px;
  width: 96%;
  left: 2%;
}
.SupperBody .mainMenu .centerMenu .nav-block .nav-box .progress-all .progress-bar {
  background: white;
  height: calc(100% - 2px);
  margin: 1px 0 1px 1px;
}
.SupperBody .mainMenu .centerMenu .nav-block .nav-box .progress-all .progress-box {
  width: 100%;
  position: relative;
  height: 100%;
}
.SupperBody .mainMenu .centerMenu .nav-block .rate-box {
  font-size: calc(12px + 0.6vw);
  margin-left: calc(14px + 0.7vw);
  height: 100%;
  display: flex;
  justify-content: center;
  color: #0c7ebd;
  white-space: nowrap;
  flex-direction: column;
}
.SupperBody .mainMenu .centerMenu .nav-block .rate-box .menu-speed,
.SupperBody .mainMenu .centerMenu .nav-block .rate-box .menu-rate {
  width: 70px;
  overflow: visible;
}
.SupperBody .mainMenu .centerMenu .nav-block .rate-box .menu-speed i {
  font-size: 14px;
}
.SupperBody .mainMenu .centerMenu .nav-block .rate-box .menu-rate {
  font-weight: normal;
}
.SupperBody .mainMenu .centerMenu .space-block {
  height: 1px;
  flex: 1;
  display: none;
}
.SupperBody .mainMenu .centerMenu .space-block .runner-res {
  display: inline-block;
  position: relative;
  width: 0;
}
.SupperBody .mainMenu .centerMenu .space-block .runner-res .abs-man {
  position: absolute;
  top: -15px;
  left: -15px;
  white-space: nowrap;
  z-index: 1;
}
.SupperBody .mainMenu .centerMenu .space-block .runner-res .abs-man .man-box {
  height: 64px;
  display: inline-block;
  position: relative;
}
.SupperBody .mainMenu .centerMenu .space-block .runner-res .abs-man .man-box .color-level-box {
  position: absolute;
  left: 25px;
  top: -5px;
}
.SupperBody .mainMenu .centerMenu .space-block .runner-res .abs-man .man-box img {
  height: 100%;
}
.SupperBody .mainMenu .centerMenu .speed-block {
  height: 100%;
  width: 260px;
  position: relative;
}
.SupperBody .mainMenu .centerMenu .speed-block .man-del {
  position: absolute;
  height: 65px;
  right: 0px;
  top: -9px;
}
.SupperBody .mainMenu .centerMenu .speed-block .man-del img {
  height: 100%;
}
.SupperBody .mainMenu .centerMenu .speed-block .man-left {
  right: unset;
  left: 0;
}
.SupperBody .mainMenu .centerMenu .speed-block .abs-speed {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(30px + 1.5vw);
}
.SupperBody .mainMenu .centerMenu .LogoSuper {
  color: #286a90;
  font-weight: bold;
  text-align: left;
  position: absolute;
  left: 0;
  width: 21%;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-logo img {
  width: 70%;
  cursor: pointer;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-2 .option-3 {
  white-space: nowrap;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-1,
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-2 {
  display: flex;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-1 > div,
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-2 > div {
  margin-top: 15px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-1 .option-2,
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-2 .option-2 {
  flex: 1;
  text-align: center;
  min-width: 100px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-1 .option-1,
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-2 .option-1 {
  min-width: 37px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-1 .option-3,
.SupperBody .mainMenu .centerMenu .LogoSuper .row-options-2 .option-3 {
  width: 78px;
  text-align: center;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo {
  display: inline-block;
  display: none;
  position: relative;
  z-index: 2;
  /*@media(max-width: 1090px){
      .options-for-lang{
          white-space:normal;
      }
  }*/
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo img.logo-supertype {
  width: 5em;
  cursor: pointer;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang {
  display: inline-block;
  position: absolute;
  top: 10px;
  color: #0c7ebd;
  font-size: calc(10px + 0.5vw);
  left: 120%;
  white-space: nowrap;
  z-index: 1;
  /* @media(max-width: 1090px){
       .lang-trans{
           display: none !important;
       }
   }*/
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang span.text-title {
  position: relative;
  top: -20px;
  left: -30px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang span.text-title:hover {
  cursor: pointer;
  text-decoration: underline;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang img.img-book {
  position: relative;
  top: 11px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang .switch-lang {
  display: inline-block;
  margin-left: 10px;
  height: 20px;
  width: 50px;
  position: relative;
  top: 9px;
  /*.ui.toggle.checkbox{
    height: 100%;
  }*/
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang .switch-lang .ui.toggle.checkbox input:checked ~ label:before {
  background-color: #0c7ebd !important;
  height: 15px;
  width: 40px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang .switch-lang .ui.toggle.checkbox label:after {
  background-color: #0c7ebd !important;
  height: 15px;
  width: 15px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang .switch-lang .ui.toggle.checkbox input:checked ~ label:after {
  background-color: #dce0ef !important;
  height: 15px;
  left: 25px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .options-for-lang .switch-lang .ui.toggle.checkbox label:before {
  height: 15px;
  width: 40px;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .btn-settings {
  position: absolute;
  top: 37px;
  left: 140%;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .settings-panel {
  position: absolute;
  left: -12px;
  padding: 5px;
  white-space: nowrap;
  font-weight: normal;
  display: flex;
  top: 35px;
}
@media (max-width: 1200px) {
  .SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .settings-panel .repeat-box-layout {
    display: none !important;
  }
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .settings-panel .repeat-box-layout {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-left: 40px;
  margin-left: calc(14px + 1.4vw);
  margin-right: calc(10px + 1vw);
  position: relative;
  top: 4px;
  opacity: 0.6;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .settings-panel .repeat-box-layout img {
  width: 100%;
  color: #0c7ebd;
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .settings-panel .repeat-box-layout:hover {
  opacity: 1;
  cursor: pointer;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
.SupperBody .mainMenu .centerMenu .LogoSuper .title-logo .settings-panel .repeat-box-layout.next {
  margin-left: 10px;
  margin-right: calc(12px + 0.6vw);
}
.SupperBody .mainMenu .centerMenu .LogoSuper li {
  list-style-type: none;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .nav-login {
  float: right;
  margin-right: 20px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .li-user {
  width: 100%;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .abs-name {
  display: none;
  position: absolute;
  top: 0px;
  left: -230px;
  border: solid 1px;
  background: #ffedbd;
  border-radius: 10px;
  z-index: 2;
  padding: 15px 20px;
  text-align: left;
  white-space: nowrap;
  border-color: #88a9b4;
  font-size: 18px;
  font-size: calc(9px + 0.4vw);
  color: #095dbd;
  font-weight: normal;
  cursor: pointer;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .abs-maestro {
  margin-right: calc(6px + 0.3vw);
  z-index: 1;
  position: absolute;
  top: 41px;
  right: -21px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .abs-maestro:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .btn-login {
  margin-right: 15px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .img-bonus {
  margin-top: 0px;
  margin-right: 45px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: relative;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .img-bonus img {
  height: 100%;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .img-bonus .bonus-days {
  position: absolute;
  width: 20px;
  height: 20px;
  line-height: 20px;
  top: -5px;
  right: -14px;
  color: #3b5998;
  text-align: center;
  background: white;
  border-radius: 50px;
  visibility: hidden;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .img-bonus:hover .bonus-days {
  visibility: visible;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user > div:nth-child(1) {
  /* margin-top: 10px;
   margin-right: 31px;
     margin-left:5px;*/
  text-align: right;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user > div:nth-child(1) a {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user div.line {
  width: 1px;
  height: 29px;
  position: absolute;
  top: 0;
  background: #37aded;
  margin: 5px 0 0 0;
  right: 16px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user .arNav:hover .darr {
  border-top: 5px solid #fff;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user .arNav {
  margin: 0;
  width: 35px;
  height: 50px;
  position: absolute;
  top: 5px;
  right: -13px;
  cursor: pointer;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user .arNav .darrUp {
  height: 0;
  width: 0;
  position: absolute;
  top: 11px;
  right: 9px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #6bbeee;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right li.li-user .arNav .darr {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #bde1fc;
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  top: 11px;
  right: 9px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column {
  visibility: hidden;
  display: block;
  font-style: normal;
  height: 130%;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  right: 0;
  list-style: none outside none;
  padding: 15px 30px;
  position: absolute;
  top: 100%;
  z-index: 1000;
  min-width: 100%;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li {
  color: white;
  position: relative;
  list-style: none;
  font-size: 14px;
  text-transform: none;
  background: 0 0;
  text-shadow: none;
  float: none;
  margin: 0;
  border-radius: 0;
  line-height: 13px;
  padding: 0;
  cursor: pointer;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li a {
  color: #18135a;
  text-shadow: none;
  display: block;
  padding: 7px 15px;
  padding-left: 16px;
  border-radius: 0;
  font-weight: normal;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li:hover {
  opacity: 0.8;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li.tarr {
  width: 12px;
  float: left;
  overflow: hidden;
  position: absolute;
  top: -6px;
  font-size: 1px;
  line-height: 0;
  right: 19px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li.divider {
  height: 1px;
  background: #ddd;
  padding: 0;
  margin: 7px 0 4px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li.top a {
  overflow: hidden;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li.top a b {
  white-space: nowrap;
  font-weight: 400;
  font-family: proximaSB, Arial, Tahoma, Verdana, sans-serif;
  display: block;
  width: 164px;
  text-overflow: ellipsis;
  color: #333;
  font-size: 15px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column ul li.top a span {
  color: #666;
  display: block;
  margin-top: 6px;
}
.SupperBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .menu-column.open {
  visibility: visible !important;
}
.SupperBody .mainMenu .centerMenu .nav-tabs {
  border-bottom: none;
  display: inline-block;
  width: 100%;
  position: absolute;
  right: 10px;
  /*@media (min-width: 1020px){
    >li{
      float: left;
      //margin-right: 40px;
    }
  }*/
}
.SupperBody .mainMenu .centerMenu .nav-tabs li {
  float: left;
  cursor: pointer;
  width: 19%;
}
.SupperBody .mainMenu .centerMenu .nav-tabs li a {
  color: white;
}
.SupperBody .mainMenu .centerMenu .nav-tabs li.active {
  width: 24%;
}
.SupperBody .mainMenu .centerMenu .nav-tabs li.active .arrow-menu span {
  color: #0c7ebd;
}
.SupperBody .mainMenu .centerMenu .nav-tabs .nav-item {
  color: #fff;
  padding-bottom: 0;
  list-style: none;
  margin: 0 4px 0;
  text-transform: uppercase;
}
.SupperBody .mainMenu .centerMenu .nav-tabs .nav-item a {
  line-height: normal;
  padding: 7px 15px;
  text-decoration: none;
  text-shadow: 0 -1px 1px #a9abad;
  color: white;
  background: none;
  border: none;
}
.SupperBody .mainMenu .centerMenu .nav-tabs .nav-item.active,
.SupperBody .mainMenu .centerMenu .nav-tabs .nav-item:hover {
  background-color: #27a2e8;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#29a5e8), to(#27a2e8));
  border-radius: 15px;
  cursor: pointer;
}

.SupperBody .reviewSuper {
  text-align: center;
  margin-top: calc(15px + 3vw);
  padding-bottom: 200px;
}
.SupperBody .reviewSuper .m25 {
  font-size: calc(15px + 1.5vw);
  font-weight: bold;
  margin-bottom: calc(4px + 0.8vw);
  margin-top: calc(8px + 1.6vw);
  padding: 0 calc(4px + 0.8vw);
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.SupperBody .reviewSuper .m20 {
  font-size: calc(12px + 1.2vw);
}
.SupperBody .reviewSuper .m20 p {
  text-align: justify;
}
.SupperBody .reviewSuper .card-super {
  padding: calc(4px + 0.8vw);
  margin-top: calc(4px + 0.8vw);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  max-width: 506px;
  margin: calc(4px + 0.8vw) auto;
}
.SupperBody .reviewSuper .temporary-block {
  margin: calc(4px + 0.8vw);
}
.SupperBody .reviewSuper .temporary-block p {
  color: #980d0d;
  text-decoration: underline;
  font-size: calc(15px + 1.5vw);
  font-weight: bold;
  margin-top: calc(12px + 2.4vw);
}
.SupperBody .reviewSuper .temporary-block p:hover {
  opacity: 0.8;
  -webkit-text-decoration: auto;
  text-decoration: auto;
  cursor: pointer;
}

.SupperBody.first .buttons-info {
  text-align: center;
  margin-top: 80px;
}
.SupperBody.first .buttons-info .info-btn {
  margin-right: 100px;
  display: inline-block;
}
@media (max-width: 1000px) {
  .SupperBody.first .buttons-info {
    margin-top: 20px;
  }
  .SupperBody.first .buttons-info .info-btn {
    margin-right: 10px;
    display: inline-block;
  }
}

.end_float, .end-float {
  clear: both;
}

.infoPanel .info-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}
@media (min-width: 1400px) {
  .infoPanel .info-container {
    width: 1200px;
  }
}
.infoPanel .info-container h1 {
  color: #0c7ebd;
}
.infoPanel .info-container .plan-learning {
  text-align: center;
}
.infoPanel .info-container .top-row {
  width: 100%;
  padding: 20px 20px 20px 20%;
  color: #0c7ebd;
  border-bottom: 1px solid #5e94b3;
}
.infoPanel .info-container .top-row p {
  font-size: 22px;
  color: #0d6494;
}
@media (max-width: 700px) {
  .infoPanel .info-container .top-row {
    padding: 0;
  }
}
.infoPanel .info-container .tip-row {
  padding: 30px 0 20px;
  border-bottom: 1px solid #5e94b3;
  color: #0c7ebd;
}
.infoPanel .info-container .tip-row h2 {
  font-size: 24px;
  color: #0c7ebd;
  margin-top: 4px;
}
.infoPanel .info-container .tip-row p {
  font-size: 20px;
  color: #0d6494;
  margin-top: 24px;
}
.infoPanel .info-container .tip-row .tip-left {
  width: 270px;
  float: left;
  padding-right: 25px;
}
.infoPanel .info-container .tip-row .tip-right {
  width: calc(100% - 270px);
  float: right;
}
.infoPanel .info-container .tip-row .tip-right img {
  max-width: 100%;
  float: none;
  clear: both;
  display: block;
}
@media (max-width: 1000px) {
  .infoPanel .info-container .tip-row .tip-left {
    float: none; /* Отменить float для .tip-left */
    width: 100%; /* Занимать всю ширину */
  }
  .infoPanel .info-container .tip-row .tip-right {
    float: none; /* Отменить float для .tip-right */
    width: 100%; /* Занимать всю ширину */
  }
}

/*@media(max-width: 1380px){

    .panelMarket,
  .panelAccount,
  .panelPayment{
    transform: scale(0.9);
    margin-top: -40px !important;
  }
}*/
/*@media(max-width: 1040px){

    .panelMarket,
  .panelAccount,
  .panelPayment{
    transform: scale(0.8);
    margin-top: -70px !important;
  }
}*/
.panelAccount.mobileAccount {
  width: unset;
  padding: unset;
}
.panelAccount.mobileAccount .content-account {
  padding: unset;
  margin-top: unset;
}
.panelAccount.mobileAccount .content-account .password-block {
  display: block;
}
.panelAccount.mobileAccount .content-account .password-block .no-password {
  margin-top: 20px;
  text-align: left;
}
.panelAccount.mobileAccount .content-account .name-place {
  text-align: left;
  display: block;
}
.panelAccount.mobileAccount .content-account .name-place .title-name {
  width: unset;
}
.panelAccount.mobileAccount .content-account .name-place .edit-name {
  width: unset;
  text-align: left;
}

.panelAccount .content-account {
  margin-top: 40px;
  padding: 0 100px;
  position: relative;
}
.panelAccount .content-account .abs-saving {
  position: absolute;
  top: -50px;
  left: 20%;
  color: red;
}
.panelAccount .password-block {
  min-height: calc(35px + 7vw);
  display: flex;
}
.panelAccount .password-block > div {
  align-items: center;
}
.panelAccount .name-place {
  margin-top: 20px;
  width: 100%;
  display: flex;
}
.panelAccount .name-place .pass-enable {
  color: #006caf;
  cursor: pointer;
}
.panelAccount .name-place .title-name {
  width: 30%;
  display: inline-block;
}
.panelAccount .name-place .title-name span {
  font-style: italic;
}
.panelAccount .name-place .edit-name {
  width: 65%;
  display: inline-block;
}
.panelAccount .name-place .edit-name textarea {
  width: 100%;
  padding: calc(4px + 0.8vw);
}
.panelAccount .name-place .edit-name input {
  padding: 5px 15px;
  width: 100%;
}
.panelAccount .name-place .edit-name.date-row span {
  margin-right: 15px;
}
.panelAccount .name-place .date-row > div > span:hover {
  cursor: pointer;
  text-decoration: underline;
}
.panelAccount .name-place .save-box {
  text-align: right;
  position: relative;
  width: 100%;
  margin-top: calc(4px + 0.8vw);
}
.panelAccount .name-place .save-box button {
  background: #0c7ebd;
  color: white;
  padding: 7px 24px;
  border-radius: 5px;
}
.panelAccount .delete-place {
  margin: 40px 0px;
  color: #bd69af;
}
.panelAccount .delete-place span:hover {
  opacity: 0.8;
  cursor: pointer;
}
.panelAccount .delete-place button {
  background: #bd69af;
  color: white;
  padding: 7px 24px;
  border-radius: 5px;
}
.panelAccount .to-play-place {
  margin: 50px 20px;
  text-align: center;
}
.panelAccount .to-play-place button {
  background: #0c7ebd;
  color: white;
  padding: 7px 24px;
  border-radius: 5px;
}
.panelAccount button:hover {
  cursor: pointer;
  opacity: 0.8;
}

.flex-3col {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.flex-3col .center-col {
  width: 60%;
}
.flex-3col .left-col,
.flex-3col .right-col {
  flex: 1;
  display: none;
}
.flex-3col .title-col-left,
.flex-3col .title-col-right {
  font-size: calc(16px + 0.8vw);
  font-weight: bold;
  padding: 0 calc(8px + 0.4vw);
  text-decoration: underline;
  margin-top: calc(21px + 1vw);
  color: #9a1313;
  /*background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}
.flex-3col .title-col-left {
  margin-right: -50px;
}
.flex-3col .title-col-right {
  margin-left: -40px;
}
.flex-3col .title-col-left:hover,
.flex-3col .title-col-right:hover {
  cursor: pointer;
  text-decoration: unset;
  opacity: 0.6;
}

#paypal-button-container {
  text-align: center;
}

/*#paypal-button-container.visible{
  visibility:visible;
}*/
.center-col .panelMarket {
  width: unset;
}

.panelMarket,
.panelPayment, .panelAccount {
  width: 875px;
  min-height: 500px;
  margin: 16px auto;
  padding: 0 50px;
  font-size: 20px;
  overflow: visible;
}
.panelMarket .btn-goto-game,
.panelPayment .btn-goto-game, .panelAccount .btn-goto-game {
  background: #0c7ebd;
  color: white;
  padding: 7px 24px;
  border-radius: 5px;
  margin: auto;
}
.panelMarket .btn-goto-game:hover,
.panelPayment .btn-goto-game:hover, .panelAccount .btn-goto-game:hover {
  cursor: pointer;
  opacity: 0.8;
}
.panelMarket .button-exit,
.panelPayment .button-exit, .panelAccount .button-exit {
  position: absolute;
  right: 80px;
  top: -4px;
  background: #0c7ebd;
  color: white;
  padding: 7px 24px;
  border-radius: 5px;
  z-index: 2;
}
.panelMarket .button-exit:hover,
.panelPayment .button-exit:hover, .panelAccount .button-exit:hover {
  cursor: pointer;
  opacity: 0.8;
}
.panelMarket .after-market,
.panelPayment .after-market, .panelAccount .after-market {
  text-align: center;
  margin: 50px 0;
  height: 100px;
}
.panelMarket .close-place,
.panelPayment .close-place, .panelAccount .close-place {
  position: relative;
  text-align: center;
  font-size: calc(14px + 0.7vw);
  margin-bottom: 10px;
  min-height: 30px;
}
.panelMarket .close-place .box-sum,
.panelPayment .close-place .box-sum, .panelAccount .close-place .box-sum {
  text-align: center;
  background: #ffc439;
  padding: 5px 25px;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  border-radius: 5px;
  color: #2C2E2F;
  cursor: pointer;
  z-index: 1000;
  pointer-events: none;
  background: rgba(76, 175, 80, 0);
  position: absolute;
  top: 45px;
  right: 200px;
}
.panelMarket .close-place .box-sum span,
.panelPayment .close-place .box-sum span, .panelAccount .close-place .box-sum span {
  font-size: 14px;
  font-weight: normal;
}
.panelMarket .close-place .box-sum.white,
.panelPayment .close-place .box-sum.white, .panelAccount .close-place .box-sum.white {
  color: white;
  top: 115px;
  right: 200px;
}

.panelPayment .payment-btn-pay {
  text-align: right;
}
.panelPayment .payment-btn-pay .btn-pay {
  background: #ffc439;
  padding: 5px 25px;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  border-radius: 5px;
  color: #2d2d87;
  cursor: pointer;
}
.panelPayment .payment-btn-pay .btn-pay span {
  font-size: 14px;
  font-weight: normal;
}
.panelPayment .payment-btn-pay .btn-pay:hover,
.panelPayment .payment-btn-pay .btn-pay.chosen {
  opacity: 0.7;
  background: #f2cd74;
}
.panelPayment .buttons-payment {
  margin: calc(28px + 1.4vw) calc(40px + 2vw);
}
.panelPayment .buttons-payment .list-payment {
  margin-top: 30px;
  color: #0b1757;
  font-style: italic;
}
.panelPayment .buttons-payment .list-payment img {
  position: relative;
  top: 7px;
  margin-right: 10px;
}
.panelPayment .buttons-payment .plan-learning:hover {
  cursor: pointer;
  text-decoration: underline;
}
.panelPayment .time-left {
  margin-left: 25px;
}
.panelPayment table thead {
  display: none;
}
.panelPayment table th, .panelPayment table td {
  font-size: calc(12px + 0.6vw);
  text-align: center !important;
  color: #2d2d87;
}
.panelPayment .end_date {
  background: #ffc439;
  font-weight: bold;
}
.panelPayment .sum .cena {
  position: relative;
}
.panelPayment .sum .cena:before {
  border-bottom: 2px solid red;
  position: absolute;
  content: "";
  width: 170%;
  height: 60%;
  left: -50%;
  transform: rotate(-20deg);
}
.panelPayment .days-cont {
  padding-left: 20px;
  text-align: center;
  position: relative;
}
.panelPayment .days-cont .plus-block {
  display: inline-block;
}
.panelPayment .days-cont .box-days {
  padding: 0 12px;
  border: solid 1px #b9adad;
  background: #fbf8f8;
  display: inline-block;
  text-align: center;
}
.panelPayment .days-cont .img-plus {
  position: absolute;
  top: 0;
  left: 0;
}
.panelPayment .days-cont .img-plus img {
  width: 30px;
  margin-right: 30px;
}
.panelPayment .days-cont .img-plus:hover {
  cursor: pointer;
  opacity: 0.8;
}
.panelPayment .btn-plus {
  display: inline-block;
}
.panelPayment .btn-plus:hover {
  cursor: pointer;
  opacity: 0.8;
}

.radio-btn-place {
  display: flex;
  justify-content: space-evenly;
}
.radio-btn-place .answer-col:hover {
  opacity: 0.7;
}
.radio-btn-place .answer-col {
  text-align: center;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin: 10px;
}
.radio-btn-place .answer-col .radio-fake {
  pointer-events: none; /* Отключаем клики */
  opacity: 1; /* Делаем внешний вид обычным */
}
.radio-btn-place .answer-col .yes-no {
  font-size: calc(11px + 0.5vw);
  font-weight: bold;
  margin-top: calc(2px + 0.4vw);
  padding: calc(2px + 0.4vw) calc(4px + 0.8vw);
  border-radius: calc(2px + 0.4vw);
  cursor: pointer;
  min-height: 84px;
  display: flex;
  align-items: center;
  background: #EAEAEA; /* Светло-серый с легким теплым оттенком */
  color: #2C4A52;
  /*background: #F6F1EE;  !* Молочно-бежевый *!
  color: #30475E; */ /* Глубокий сине-серый */
  color: #185a88;
}
.radio-btn-place .answer-col .rate-radio {
  font-size: calc(12px + 1.2vw);
}
.radio-btn-place .answer-col input {
  height: calc(6px + 1.2vw);
  width: calc(6px + 1.2vw);
  margin: calc(2px + 0.4vw) auto;
  cursor: pointer;
}

.PlacePlan {
  width: 100%;
  position: relative;
  text-align: center;
  /* img{
          top:0;
          left:0;
          position: absolute;
          width: 100%;
          height: 100%; 99680542
  96685972
      }*/
}
.PlacePlan .blockRoll {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.PlacePlan .blockRoll .box1-roll img, .PlacePlan .blockRoll .box2-roll img {
  height: 100%;
  width: 100%;
}
.PlacePlan .blockRoll .box1-roll {
  flex-shrink: 0; /* Отключаем уменьшение размера */
  display: flex;
  justify-content: center; /* Центрируем изображение */
  align-items: center;
}
.PlacePlan .blockRoll .box1-roll img {
  width: 100%;
  max-height: 100%;
}
.PlacePlan .blockRoll .box2-roll {
  flex-grow: 1; /* Элемент растягивается, занимая оставшееся пространство */
  display: flex;
  justify-content: center; /* Центрируем изображение */
  align-items: center;
  overflow: hidden; /* Для наглядности */
}
.PlacePlan .blockRoll .box2-roll img {
  width: 100%;
  height: 100%;
}
.PlacePlan .blockPlan {
  margin: auto;
  padding: calc(75px + 3.7vw) 0;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  display: inline-block;
}
.PlacePlan .blockPlan .title-plan {
  font-size: 2em;
}
.PlacePlan .blockPlan span {
  font-size: 14px;
}
.PlacePlan .blockPlan .item-plan {
  position: relative;
  margin-top: 10px;
}
.PlacePlan .blockPlan .item-plan .checkbox-plan {
  display: inline-block;
  margin-right: 10px;
}
.PlacePlan .blockPlan .item-plan .checkbox-plan img {
  width: 20px;
  top: 4px;
  position: relative;
}
.PlacePlan .blockPlan .item-plan .row-plan {
  position: relative;
  text-align: left;
  margin-bottom: 15px;
  margin-top: 15px;
}
.PlacePlan .blockPlan .item-plan .row-plan-day { /*display:none;*/
  position: relative;
  margin-left: 70px;
  text-align: left;
}

.panelMarket {
  display: none;
  width: 875px;
  min-height: 500px;
  margin: 80px auto;
  padding: 0 50px;
  font-size: 20px;
  overflow: visible;
  /* .card-maestro{
       background: white;
   }*/
  /*.content-market{
    margin-top: 40px;
    padding: 0 100px;
      border:solid;

    .place-maestro{
        text-align: center;
    }
  }*/
}
.panelMarket .after-market {
  text-align: center;
  margin: 50px 0;
  height: 100px;
}
.panelMarket .PlaceBtnReturn {
  margin-top: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.panelMarket .PlaceBtnReturn .btn-premium a {
  background: #0c7ebd;
}
.panelMarket .learn-game {
  cursor: pointer;
  text-align: center;
}
.panelMarket .learn-game img {
  width: 70%;
}
.panelMarket .img-modal {
  margin-top: calc(3px + 0.6vw);
  position: relative;
  text-align: center;
  cursor: pointer;
}
.panelMarket .img-modal .left {
  left: 40px;
}
.panelMarket .img-modal .right {
  right: 40px;
}
.panelMarket .img-modal .abs-hand {
  position: absolute;
  height: calc(75px + 3.7vw);
  top: calc(15px + 3vw);
  z-index: 1;
}
.panelMarket .img-modal .abs-hand img {
  height: 100%;
}
.panelMarket .how-works {
  cursor: pointer;
}
.panelMarket .how-works p {
  display: inline-block;
  color: #164c72;
  text-decoration: underline;
  font-size: calc(21px + 1vw);
  font-weight: bold;
  margin: calc(12px + 0.6vw) 0;
  width: 100%;
  text-align: center;
}
.panelMarket a.arrow-read {
  font-size: calc(16px + 0.8vw);
  text-indent: calc(8px + 0.4vw);
  text-align: justify;
}
.panelMarket .underline-to-maestro {
  text-decoration: underline;
}
.panelMarket .underline-to-maestro:hover {
  cursor: pointer;
  text-decoration: none;
  opacity: 0.8;
  transform: scale(0.95);
}
.panelMarket .deadline-place {
  text-align: right;
  margin-bottom: 40px;
}
.panelMarket .deadline-place .deadline-box {
  font-size: calc(12px + 0.6vw);
  color: #9b0311;
}
.panelMarket .card-maestro .deadline-rate {
  position: absolute;
  width: 70%;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.panelMarket .card-maestro .deadline-rate .dead-top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: calc(9px + 1.8vw);
  font-weight: bold;
}
.panelMarket .card-maestro .deadline-rate .dead-top > div {
  display: flex;
  align-items: center;
  font-size: calc(12px + 0.6vw);
  color: #9b0311;
}
.panelMarket .card-maestro .deadline-rate .dead-bottom {
  position: relative;
  bottom: calc(4px + 0.8vw);
  font-size: calc(14px + 1.4vw);
  padding-left: calc(6px + 1.2vw);
  font-weight: bold;
  color: #9b0311;
}
.panelMarket .card-offer {
  display: flex;
  justify-content: space-between;
}
.panelMarket .card-offer .box-img-super,
.panelMarket .card-offer .box-img-maestro {
  /* position: absolute;
   top: 25%;
   left: 8%;*/
  width: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.panelMarket .card-offer .box-img-super .box-img img,
.panelMarket .card-offer .box-img-maestro .box-img img {
  height: 80px;
}
.panelMarket .card-offer .box-img-super .box-title,
.panelMarket .card-offer .box-img-maestro .box-title {
  font-weight: bold;
}
.panelMarket .card-offer .box-img-maestro {
  left: unset;
  right: 8%;
}
.panelMarket .card-maestro.duplex .box-avatar {
  max-width: 500px;
  width: 50%;
}
.panelMarket .card-maestro {
  padding: 1.5em 2em;
  margin-top: 1em;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  position: relative;
  background: #f7eecc;
  /* .bold_speed{
       font-weight: bold;
   }*/
  /* .bold_market{
       font-weight: bold;
   }*/
}
.panelMarket .card-maestro .box-avatar {
  float: right;
  max-width: 250px;
  width: 30%;
}
.panelMarket .card-maestro .box-avatar img {
  width: 100%;
}
.panelMarket .card-maestro .zaberi {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
.panelMarket .card-maestro .podrobnee {
  text-align: right;
  font-weight: bold;
  text-decoration: underline;
  color: #255878;
}
.panelMarket .card-maestro .podrobnee:hover {
  cursor: pointer;
  text-decoration: unset;
  opacity: 0.9;
}
.panelMarket .card-maestro > p {
  font-size: calc(14px + 0.7vw);
  color: #255878;
  margin: 0.5em 0 0 1em;
}
.panelMarket .card-maestro .space30 {
  height: 30px;
}
.panelMarket .card-maestro .underline-free-maestro {
  text-decoration: underline;
}
.panelMarket .card-maestro .underline-free-maestro:hover {
  text-decoration: unset;
  opacity: 0.8;
  cursor: pointer;
}
.panelMarket .card-maestro .title-center {
  text-align: center;
}
.panelMarket .card-maestro .bold-market {
  font-weight: bold;
}
.panelMarket .card-maestro .why-our {
  transform: scale(0.9);
  text-decoration: underline;
  cursor: pointer;
}
.panelMarket .card-maestro .PlaceQuiz {
  border: solid 1px #5e8caa;
  background: #80ccf2;
  padding-bottom: 20px;
  color: #255878;
  /*.text-question:hover{

  }*/
}
.panelMarket .card-maestro .PlaceQuiz .text-question {
  font-size: calc(12px + 0.6vw);
  margin-left: 30px;
  padding: 20px;
  display: flex;
}
.panelMarket .card-maestro .PlaceQuiz .text-question .question-here {
  font-weight: bold;
}
.panelMarket .card-maestro .PlaceQuiz .text-question .click-here {
  margin-left: 70px;
}
.panelMarket .card-maestro .PlaceQuiz .text-question .question-here,
.panelMarket .card-maestro .PlaceQuiz .text-question .click-here {
  text-decoration: underline;
}
.panelMarket .card-maestro .PlaceQuiz .text-question span:hover {
  cursor: pointer;
  text-decoration: unset;
}
.panelMarket .card-maestro .PlaceQuiz .progress-quiz {
  position: relative;
  height: 10px;
  background: white;
  margin: 10px;
  overflow: hidden;
}
.panelMarket .card-maestro .PlaceQuiz .progress-quiz .bar-quiz {
  position: absolute;
  height: 100%;
  width: 2%;
  background: #1472a7;
}
.panelMarket .card-maestro .PlaceQuiz .title-quiz:hover {
  background: #a1daf7;
}
.panelMarket .card-maestro .PlaceQuiz .title-quiz {
  position: relative;
  padding: 4px 20px;
  font-style: italic;
  font-weight: bold;
}
.panelMarket .card-maestro .PlaceQuiz .title-quiz img {
  position: absolute;
  right: 10px;
  top: 0;
  width: 40px;
}
.panelMarket .card-maestro .PlaceQuiz .title-question {
  padding: 20px 20px 0;
  width: 74%;
  margin: 0 auto;
  font-size: calc(14px + 0.7vw);
}
.panelMarket .card-maestro .PlaceQuiz .place-star-kazdev {
  margin: 20px;
  display: flex;
  justify-content: space-evenly;
}
.panelMarket .card-maestro .PlaceQuiz .place-star-kazdev img {
  width: 7%;
  cursor: pointer;
}
.panelMarket .card-maestro .buy-container {
  display: flex;
  justify-content: space-around;
}
.panelMarket .card-maestro .buy-container .cost-box {
  text-align: center;
}
.panelMarket .card-maestro .buy-container .cost-box .buy-block {
  font-weight: bold;
}
.panelMarket .card-maestro .layout-box {
  border-radius: 10px;
  text-align: center;
  padding-top: 4px;
  padding-bottom: -2px;
  background: #8cd78c;
  box-shadow: #95c1dd 0 1px 2px;
  min-height: 60px;
  position: relative;
  margin-top: 5px;
  width: 200px;
  border: solid 1px #67c1fb;
}
.panelMarket .card-maestro .layout-box .abs-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.panelMarket .card-maestro .layout-box .abs-title span {
  font-size: 18px;
  color: rgb(12, 126, 189);
  font-weight: bold;
}
.panelMarket .card-maestro .layout-box img {
  height: 50px;
  max-width: 100%;
}
.panelMarket .card-maestro .place-top-up table {
  width: 100%;
  /* button{
       width: 100px;
   }*/
  margin-bottom: 20px;
}
.panelMarket .card-maestro .place-top-up table th {
  text-align: center;
}
.panelMarket .card-maestro .place-top-up table tr:hover {
  cursor: pointer;
  /*   td{
         font-weight: bold;
     }*/
  border: solid 1px;
}
.panelMarket .card-maestro .place-top-up table tr.selected {
  cursor: pointer;
}
.panelMarket .card-maestro .place-top-up table tr.selected .cost-box {
  background: #f6e3b3;
}
.panelMarket .card-maestro .place-top-up table tr.selected .amount-box {
  font-weight: bold;
}
.panelMarket .card-maestro .place-top-up table td {
  color: #2c2c96;
  text-align: center;
}
.panelMarket .card-maestro .place-top-up table td .sum-top-up {
  width: 70%;
  padding: 10px;
  box-shadow: #95c1dd 0 1px 2px;
  border: solid #90ceee 1px;
  background: rgba(99, 188, 251, 0.314);
  text-align: center;
  margin: 5px auto;
  border-radius: 10%;
}
.panelMarket .card-maestro .place-top-up table td .cost-box {
  display: inline-block;
  background: white;
  min-width: 110px;
  text-align: center;
}
.panelMarket .card-maestro .place-top-up table .td-radio {
  width: 20%;
}
.panelMarket .card-maestro .place-top-up table .td-radio input {
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
}
.panelMarket .card-maestro .place-top-up > div {
  font-size: calc(12px + 1.2vw);
  margin: calc(6px + 1.2vw) calc(6px + 1.2vw);
  display: flex;
  align-items: center;
}
.panelMarket .card-maestro .place-top-up > div:hover {
  opacity: 0.9;
  cursor: pointer;
}
.panelMarket .card-maestro .place-button-card {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}
.panelMarket .card-maestro .textarea-market {
  text-align: center;
  margin-top: 20px;
}
.panelMarket .card-maestro .textarea-market textarea {
  width: 74%;
  font-size: calc(10px + 1vw);
  padding: calc(4px + 0.8vw);
}
.panelMarket .card-maestro .emoji-box {
  height: 40px;
  position: relative;
}
.panelMarket .card-maestro .emoji-box img {
  position: absolute;
  top: -2;
  left: 15px;
  height: 40px;
}
.panelMarket .card-maestro h2 {
  font-size: calc(12px + 1.2vw);
  font-weight: bold;
  margin-bottom: calc(8px + 0.4vw);
  margin-top: calc(8px + 0.4vw);
  padding: 0 calc(8px + 0.4vw);
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panelMarket .card-maestro h2 span {
  color: black;
}
.panelMarket .card-maestro .answer {
  margin: calc(6px + 1.2vw) calc(6px + 1.2vw);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.panelMarket .card-maestro .answer input {
  width: calc(6px + 1.2vw);
  height: calc(6px + 1.2vw);
  margin-right: calc(6px + 1.2vw);
}
.panelMarket .card-maestro .right-box {
  font-style: italic;
  text-align: center;
  font-weight: bold;
  background-image: linear-gradient(-90deg, #255878, #1032db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panelMarket .card-maestro .right-box span {
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panelMarket .card-maestro .error-box {
  font-style: italic;
  text-align: center;
  font-weight: bold;
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panelMarket .card-maestro .error-box span {
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panelMarket .card-maestro .btn-pay-box {
  text-align: right;
  margin: calc(16px + 0.8vw) 0;
}
.panelMarket .card-maestro .btn-pay-box .btn-pay {
  margin-right: 20%;
}

.SupperBody footer {
  width: 100%;
  background-color: rgb(238, 244, 246);
  font-size: calc(11px + 0.5vw);
  color: rgba(23, 66, 88, 0.8);
}
.SupperBody footer .result-cont {
  width: 100%;
  position: relative;
  padding-top: 30px;
  display: flex;
}
.SupperBody footer .result-cont .column-lang {
  display: none;
  flex: 1;
}
.SupperBody footer .result-cont .column-lang a {
  color: rgba(23, 66, 88, 0.8);
}
.SupperBody footer .result-cont .column-lang img {
  height: calc(12px + 0.6vw);
  position: relative;
  top: 5px;
  margin-right: 5px;
}
.SupperBody footer .result-cont .column-lang a:hover {
  cursor: pointer;
  opacity: 1;
}
@media (max-width: 900px) {
  .SupperBody footer .result-cont .column-lang {
    display: none;
  }
}
.SupperBody footer .result-cont .column-footer {
  flex: 4;
  text-align: center;
  display: none;
}
.SupperBody footer .result-cont .column-footer .center-footer {
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}
.SupperBody footer .result-cont .column-footer .center-footer > div {
  display: block;
  cursor: pointer;
  margin: calc(3px + 0.15vw);
}
.SupperBody footer .result-cont .column-footer .center-footer > div:hover {
  text-decoration: underline;
}
.SupperBody footer .result-cont table {
  width: 100%;
  border: solid 1px;
  margin-top: 25px;
}
.SupperBody footer .result-cont table td {
  text-align: left;
}
.SupperBody footer .copyright {
  height: 50px;
  text-align: center;
}

.SupperBody .dropdown {
  font-size: 16px;
}
.SupperBody .dropdown span {
  color: #0c7ebd;
  position: relative;
  bottom: 2px;
}
.SupperBody .dropdown .dropdown-menu {
  min-width: 80px;
  width: 100%;
  font-size: 16px;
}
.SupperBody .dropdown .dropdown-menu a {
  color: #0c7ebd;
  cursor: pointer;
}
.SupperBody .dropup {
  display: inline-block;
  font-size: 16px;
  color: #0c7ebd;
  margin-left: 30px;
}
.SupperBody .dropup .lang-keyb {
  display: inline;
  position: relative;
  right: 25px;
}
.SupperBody .dropup .dropdown-toggle {
  color: #28a4e8;
  padding: 0;
  background: 0 0;
  border: none;
  line-height: 1.625;
}
.SupperBody .dropup img {
  width: 21px;
  height: 20px;
  line-height: 1.375;
  position: relative;
  top: 5px;
  right: 10px;
}
.SupperBody .dropup .dropdown-menu > li > a:hover {
  color: #4f4f4f;
  text-decoration: none;
  background-color: #f5f5f5;
  cursor: pointer;
}
.SupperBody .dropup .dropdown-menu:before {
  display: block;
  content: "";
  position: absolute;
  right: 20px;
  height: 0;
  width: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  bottom: -6px;
  border-top: 6px dashed #fff;
}
.SupperBody .dropup .dropdown-menu li:not(.divider) a, .SupperBody .dropup .dropup .dropdown-menu li:not(.divider) a {
  font-size: 14px;
  line-height: 13px;
  font-weight: 400;
  padding: 7px 35px 7px 15px;
}
.SupperBody .dropup .dropdown-menu li:not(.divider):hover a, .SupperBody .dropup .dropup .dropdown-menu li:not(.divider):hover a {
  background-color: #29a5e8;
  color: #fff;
}
.SupperBody .dropup .dropdown-menu {
  top: auto;
  margin-bottom: 2px;
  font-weight: 400;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 7px 0;
  min-width: 130px;
  bottom: calc(100% + 5px);
}

.slide_info {
  transform-origin: bottom right;
}

.adsense-vertical.left {
  flex-direction: column;
  z-index: 1;
}
.adsense-vertical.left .blockToResults {
  overflow: visible;
  white-space: nowrap;
}
.adsense-vertical.left .blockToResults .B1 {
  font-size: 22px;
  color: rgb(12, 126, 189);
  font-weight: bold;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
}
.adsense-vertical.left .blockToResults .B1:hover {
  cursor: pointer;
  text-decoration: underline;
  transform: scale(1.1);
}
.adsense-vertical.left .blockToResults .B2 {
  margin-left: 20px;
  display: inline-block;
  transition: transform 0.8s ease;
  position: relative;
  top: 10px;
}
.adsense-vertical.left .blockToResults .B2 img {
  height: 40px;
}
.adsense-vertical.left .blockToResults .B2 img.rotated {
  transform: rotate(180deg);
}
.adsense-vertical.left .blockToResults .B2:hover {
  transform: rotate(720deg) scale(1.2);
  cursor: pointer;
}

.adsense-vertical {
  position: absolute;
  left: 0px;
  top: 260px;
  width: calc((100% - 820px) / 2);
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
}
.adsense-vertical .wrapperHelp {
  max-height: 400px;
  width: 100%;
  /* overflow: visible;
   display: flex;
   justify-content: center;*/
}

.adsense-vertical.right {
  min-width: 200px;
  left: unset;
  right: 150px;
  top: 100px;
  height: unset;
  display: none;
  z-index: 1;
  border: solid 1px grey;
  background: #ffedbd;
  border-radius: 10px;
  padding: 20px 10px 20px 20px;
}
.adsense-vertical.right .A1 {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #1f82c8;
}
.adsense-vertical.right .A2 {
  text-align: center;
  margin: 20px 0;
  cursor: pointer;
  position: relative;
}
.adsense-vertical.right .A2 img {
  position: absolute;
  height: 30px;
  top: -6px;
  right: 30px;
}
.adsense-vertical.right .A2 img:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.adsense-vertical.right .A3 {
  text-align: center;
}
.adsense-vertical.right .A3 button {
  border: none;
  color: #fff;
  padding: 6px 15px 7px;
  margin-top: -1px;
  background-color: #1f82c8;
  box-shadow: #1f82c8 0 1px 2px;
  text-shadow: 0 -1px 1px #a9abad;
  cursor: pointer;
  font-weight: bold;
}

.first-help-text {
  max-width: 400px;
  min-height: 255px;
  border: solid 1px grey;
  background: #ffedbd;
  border-radius: 10px;
  z-index: 2;
  padding: 20px 10px 20px 20px;
  text-align: left;
  /*font-size: 18px;*/
  font-size: calc(6px + 0.6vw);
}
.first-help-text ul {
  list-style-type: none;
  padding-left: 5px;
}
.first-help-text li {
  text-indent: 20px;
  color: #095dbd;
}

.book-place-img:hover {
  text-decoration: underline;
  cursor: pointer;
}

.book-place-img img.img-book {
  position: relative;
  top: calc(3px + 0.15vw);
}

.box-settings {
  display: inline-block;
  width: 0;
  position: relative;
  right: 20px;
  top: 6px;
}

.box-settings:hover {
  opacity: 0.7;
  cursor: pointer;
}

.options-for-nav {
  z-index: 1;
  display: inline-block;
  color: #0c7ebd;
  font-size: calc(12px + 0.6vw);
  font-weight: normal;
  width: 58%;
  position: relative;
  /*position: relative;
    top: 31px;*/
}
.options-for-nav .balans-panel {
  position: relative;
  word-wrap: break-word;
  white-space: normal;
  display: flex;
  justify-content: center;
  margin: 0 30px;
}
.options-for-nav img {
  position: absolute;
  right: -20px;
  top: 3px;
  cursor: pointer;
}

.st-progress-block {
  display: inline-block;
  width: 175px;
}
.st-progress-block .sum-text {
  text-align: center;
  position: relative;
}
.st-progress-block .sum-text .sum-points {
  position: absolute;
  right: -17px;
  top: -10px;
  font-size: 16px;
}
.st-progress-block .sum-text .sum-points span {
  font-weight: bold;
}
.st-progress-block .sum-progress {
  height: 7px;
  margin-top: 3px;
  width: 100%;
  border-radius: 10px;
  background-color: white;
  overflow: hidden;
}
.st-progress-block .sum-progress .bar-sum {
  min-width: 2%;
  height: 100%;
  background: #46a1da;
}

#container_mobile {
  display: none;
  height: 400px;
  position: relative;
  text-align: center;
}
#container_mobile .mobile-dialog {
  /*position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%, -50%);
    right: auto;*/
  padding: 30px;
  text-align: center;
  background-color: #fff;
  border-radius: 6px;
  width: calc(100% - 40px);
  max-width: 506px;
  display: inline-block;
  margin-top: calc(20px + 2vw);
}
#container_mobile .mobile-dialog h2 {
  color: #128bd0;
}

.SupperBody {
  /*#TrainerPanel{
      display:block;
  }

  #InfoPanel{
      display: none;
  }


    @media (max-width: 900px){

        #TrainerPanel { display: none;}

        #InfoPanel { display: block; }


    }*/
  /*@media (min-width: 900px){

    #InfoPanel { display: none!important; }
  }*/
}
.SupperBody .title-courses,
.SupperBody .title-layout {
  display: none;
}

.trainerPanel.Trainer .title-courses {
  display: block;
  margin-bottom: 40px;
}

.trainerPanel.Layout {
  position: relative;
  /*
  .keyField.for-card{
    margin-bottom: 120px;
  }

  .keyField.for-card{ margin-bottom: 100px;}

  .keyField.for-line{ margin-top: 0;}

    .keyField.for-words{ margin-top: 30px;}

    @media(min-width:1040px){
        .keyField.for-words{ margin-top: 50px;}
        .keyField.for-card{ margin-bottom: 80px;}
    }
    @media(min-width:1290px){
        .keyField.for-words{ margin-top: 50px;}
        .keyField.for-card{ margin-bottom: 95px;}
    }
  @media(min-width:1380px){
      .keyField.for-words{ margin-top: 60px;}
    .keyField.for-card{ margin-bottom: 110px;}
    .keyField.for-line{ margin-top: 10px;}
  }
  @media(min-width:1500px){
    .keyField.for-words{ margin-top: 60px;}
    .keyField.for-card{ margin-bottom: 120px;}
    .keyField.for-line{ margin-top: 30px;}
  }
  @media(min-width:1700px){
    .keyField.for-words{ margin-top: 70px;}
    .keyField.for-card{ margin-bottom: 140px;}
    .keyField.for-line{ margin-top: 70px;}
  }
  @media(min-width:1900px){
    .keyField.for-words{ margin-top: 100px;}
    .keyField.for-card{ margin-bottom: 160px;}
    .keyField.for-line{ margin-top: 110px;}
  }*/
  /*------------------------------------*/
  /* .keyboard{
     margin-top: 10px;
     margin-top: $size-15-extra;
   }*/
}
.trainerPanel.Layout .keyField {
  background: transparent;
}
.trainerPanel.Layout .keyField .keyFieldInside .line-cont {
  background: white;
  padding: 5px 30px;
  border-radius: 10px;
  min-width: 768px;
}
.trainerPanel.Layout .keyField.for-words {
  margin-top: calc(20vh - 180px);
}
.trainerPanel.Layout .title-layout {
  display: flex;
  visibility: hidden;
}

.blue-box.list-box {
  box-shadow: none;
  /*width: 30px;
  height: 23px;*/
  width: 35px;
  height: 28px;
  margin: 12px 7px;
  line-height: 29px;
  text-transform: uppercase;
  font-size: 16px;
  border-right: 1px solid #87aec3;
  border-bottom: 1px solid #87aec3;
}
.blue-box.list-box .empty-box {
  background: #d7d9dc;
}

@media (max-width: 1300px) {
  .trainerPanel .title-courses,
  .trainerPanel .title-layout {
    font-size: 17px !important;
  }
}
@media (max-width: 1100px) {
  .trainerPanel .title-courses,
  .trainerPanel .title-layout {
    font-size: 14px !important;
  }
}
.trainerPanel .title-courses,
.trainerPanel .title-layout {
  margin: 10px 0 0 0;
  width: 100%;
  z-index: 2;
  color: #0c7ebd;
  font-size: 20px;
  min-height: 40px;
  position: relative;
  display: flex;
  /*@media(min-width:1190px){
    .left-title{

    min-width: $size-220;
    }
  }*/
  /*.runner-res{
    display: inline-block;
    //margin-left: 20px;
    position: relative;
      width: 0;

    .abs-man{
      position: absolute;
      top: -75px;
      left: 0;
      white-space:nowrap;
      z-index:1;
      .man-box{
        height: 64px;
        display:  inline-block;
        position: relative;

        .color-level-box{
          //height: 8px;
          //width: 11px;
          position: absolute;
          left: 25px;
          top: -5px;
        }
        img{
          height: 100%;
        }

      }
    }
  }*/
}
.trainerPanel .title-courses .table-res.left,
.trainerPanel .title-layout .table-res.left {
  right: auto;
}
.trainerPanel .title-courses .left-title,
.trainerPanel .title-layout .left-title {
  display: inline-block;
  position: relative;
  text-align: center;
  /*  margin-right: 40px;
    margin-right: $size-40-extra;

    min-width: $size-280;*/
  width: 21%;
}
.trainerPanel .title-courses .left-title span.underline,
.trainerPanel .title-layout .left-title span.underline {
  border-bottom: 1px solid;
}
.trainerPanel .title-courses .left-title span:hover,
.trainerPanel .title-layout .left-title span:hover {
  border-width: 2px;
  cursor: pointer;
}
.trainerPanel .title-courses .table-res.text-panel,
.trainerPanel .title-layout .table-res.text-panel {
  top: 110px;
}
@media (min-width: 1200px) {
  .trainerPanel .title-courses .table-res.text-panel,
  .trainerPanel .title-layout .table-res.text-panel {
    top: 120px;
  }
}
@media (min-width: 1300px) {
  .trainerPanel .title-courses .table-res.text-panel,
  .trainerPanel .title-layout .table-res.text-panel {
    top: 130px;
  }
}
@media (min-width: 1500px) {
  .trainerPanel .title-courses .table-res.text-panel,
  .trainerPanel .title-layout .table-res.text-panel {
    top: 140px;
  }
}
@media (min-width: 1700px) {
  .trainerPanel .title-courses .table-res.text-panel,
  .trainerPanel .title-layout .table-res.text-panel {
    top: 150px;
  }
}
@media (min-width: 1900px) {
  .trainerPanel .title-courses .table-res.text-panel,
  .trainerPanel .title-layout .table-res.text-panel {
    top: 160px;
  }
}
.trainerPanel .title-courses .table-res,
.trainerPanel .title-layout .table-res {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: calc(30px + 1.5vw);
  right: 0;
  z-index: 100;
  background-color: white;
  border-radius: 10px;
  padding: 30px 15px 15px 15px;
  min-height: calc(250px + 12.5vw);
  /*.ul-res{
    display: inline-block;

    .row-res.active,
    p.active{
      font-weight: bold;
    }

    .row-res,
    p{
      //border: solid 1px;
      display: block;
      margin:5px;
      //position: relative;
      color: inherit;
      position: relative;
      font-size: 18px;

      .abs-color,
      i{
        position: absolute;
        right: -92px;
        bottom: 1px;
        font-size: 16px;
        color: inherit;

        .color-level-box{
          width:11px;
          height: 8px;
          margin-top: 0px;
        }
        .best-result{

            position: relative;
            top: 10px;
          img{
            width: 20px
          }
        }
      }
    }

  }*/
}
.trainerPanel .title-courses .table-res .coursesLeftMenu .center-title,
.trainerPanel .title-layout .table-res .coursesLeftMenu .center-title {
  text-align: center;
}
.trainerPanel .title-courses .table-res .coursesLeftMenu .center-title .blue-box,
.trainerPanel .title-layout .table-res .coursesLeftMenu .center-title .blue-box {
  float: unset;
  display: inline-block;
  position: relative;
  left: 2px;
  margin-bottom: 10px;
}
.trainerPanel .title-courses .table-res .coursesLeftMenu .center-title .speed-cr,
.trainerPanel .title-layout .table-res .coursesLeftMenu .center-title .speed-cr {
  display: inline-block;
  position: relative;
}
.trainerPanel .title-courses .table-res .coursesLeftMenu .center-title .speed-cr i,
.trainerPanel .title-layout .table-res .coursesLeftMenu .center-title .speed-cr i {
  position: absolute;
  top: 0;
  left: 200px;
  border: solid;
  width: 30px;
  height: 30px;
  color: inherit;
  font-size: 14px;
}
.trainerPanel .title-courses .table-res table,
.trainerPanel .title-layout .table-res table {
  /*tr.tr-today{
    height: unset;
  }*/
}
.trainerPanel .title-courses .table-res table tr.active,
.trainerPanel .title-layout .table-res table tr.active {
  font-weight: bold;
}
.trainerPanel .title-courses .table-res table tr.active .car-box,
.trainerPanel .title-layout .table-res table tr.active .car-box {
  border-bottom: 4px dashed #e4f1f5;
}
.trainerPanel .title-courses .table-res table tr.active .abs-color,
.trainerPanel .title-layout .table-res table tr.active .abs-color {
  opacity: 1;
}
.trainerPanel .title-courses .table-res table tr.active td:nth-child(2),
.trainerPanel .title-layout .table-res table tr.active td:nth-child(2) {
  background: #f9f7f7;
  border-radius: 10px;
  border: solid #90ceee 1px;
}
.trainerPanel .title-courses .table-res table tr:hover,
.trainerPanel .title-layout .table-res table tr:hover {
  cursor: pointer;
}
.trainerPanel .title-courses .table-res table tr.tr-cars,
.trainerPanel .title-layout .table-res table tr.tr-cars {
  height: calc(32px + 1.7vw);
}
@media (max-width: 1400px) {
  .trainerPanel .title-courses .table-res table tr.tr-cars,
  .trainerPanel .title-layout .table-res table tr.tr-cars {
    height: calc(30px + 1.5vw);
  }
}
@media (max-width: 1200px) {
  .trainerPanel .title-courses .table-res table tr.tr-cars,
  .trainerPanel .title-layout .table-res table tr.tr-cars {
    height: calc(28px + 1.4vw);
  }
}
.trainerPanel .title-courses .table-res table tr td,
.trainerPanel .title-layout .table-res table tr td {
  white-space: nowrap;
  height: 20px;
  color: inherit;
  font-size: 18px;
}
.trainerPanel .title-courses .table-res table tr td .car-box, .trainerPanel .title-courses .table-res table tr td .keyb-box,
.trainerPanel .title-layout .table-res table tr td .car-box,
.trainerPanel .title-layout .table-res table tr td .keyb-box {
  width: 165px;
}
@media (max-width: 1500px) {
  .trainerPanel .title-courses .table-res table tr td .car-box, .trainerPanel .title-courses .table-res table tr td .keyb-box,
  .trainerPanel .title-layout .table-res table tr td .car-box,
  .trainerPanel .title-layout .table-res table tr td .keyb-box {
    width: 140px;
  }
}
@media (max-width: 1400px) {
  .trainerPanel .title-courses .table-res table tr td .car-box, .trainerPanel .title-courses .table-res table tr td .keyb-box,
  .trainerPanel .title-layout .table-res table tr td .car-box,
  .trainerPanel .title-layout .table-res table tr td .keyb-box {
    width: 115px;
  }
}
@media (max-width: 1300px) {
  .trainerPanel .title-courses .table-res table tr td .car-box, .trainerPanel .title-courses .table-res table tr td .keyb-box,
  .trainerPanel .title-layout .table-res table tr td .car-box,
  .trainerPanel .title-layout .table-res table tr td .keyb-box {
    width: 90px;
  }
}
@media (max-width: 1200px) {
  .trainerPanel .title-courses .table-res table tr td .car-box, .trainerPanel .title-courses .table-res table tr td .keyb-box,
  .trainerPanel .title-layout .table-res table tr td .car-box,
  .trainerPanel .title-layout .table-res table tr td .keyb-box {
    width: 65px;
  }
}
.trainerPanel .title-courses .table-res table tr td .car-box,
.trainerPanel .title-layout .table-res table tr td .car-box {
  height: 40px;
  text-align: left;
}
.trainerPanel .title-courses .table-res table tr td .car-box img,
.trainerPanel .title-layout .table-res table tr td .car-box img {
  height: 100%;
}
.trainerPanel .title-courses .table-res table tr td .keyb-box,
.trainerPanel .title-layout .table-res table tr td .keyb-box {
  border-radius: 10px;
  text-align: center;
  padding-top: 4px;
  padding-bottom: -2px;
  background: rgba(255, 165, 0, 0.54);
  border-color: #67c1fb;
  box-shadow: #95c1dd 0 1px 2px;
  min-height: 60px;
  position: relative;
  margin-top: 5px;
}
.trainerPanel .title-courses .table-res table tr td .keyb-box .abs-title,
.trainerPanel .title-layout .table-res table tr td .keyb-box .abs-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.trainerPanel .title-courses .table-res table tr td .keyb-box .abs-title span,
.trainerPanel .title-layout .table-res table tr td .keyb-box .abs-title span {
  font-size: 14px;
  border: none;
}
.trainerPanel .title-courses .table-res table tr td .keyb-box img,
.trainerPanel .title-layout .table-res table tr td .keyb-box img {
  height: 50px;
  max-width: 100%;
}
.trainerPanel .title-courses .table-res table tr td .keyb-box.active,
.trainerPanel .title-layout .table-res table tr td .keyb-box.active {
  border: solid #90ceee 1px;
  box-shadow: unset;
}
.trainerPanel .title-courses .table-res table tr td .keyb-box.active img,
.trainerPanel .title-layout .table-res table tr td .keyb-box.active img {
  opacity: 1;
}
.trainerPanel .title-courses .table-res table tr td .keyb-box:hover img,
.trainerPanel .title-layout .table-res table tr td .keyb-box:hover img {
  opacity: 1;
}
.trainerPanel .title-courses .table-res table tr td .abs-color,
.trainerPanel .title-layout .table-res table tr td .abs-color {
  min-width: 70px;
  opacity: 0.5;
  position: relative;
}
.trainerPanel .title-courses .table-res table tr td .abs-color .color-level-box,
.trainerPanel .title-layout .table-res table tr td .abs-color .color-level-box {
  width: 11px;
  height: 8px;
  margin-top: 0px;
}
.trainerPanel .title-courses .table-res table tr td .abs-color .best-result,
.trainerPanel .title-layout .table-res table tr td .abs-color .best-result {
  height: 10px;
}
.trainerPanel .title-courses .table-res table tr td .abs-color .best-result img,
.trainerPanel .title-layout .table-res table tr td .abs-color .best-result img {
  height: 20px;
}
.trainerPanel .title-courses .table-res table tr td .abs-color .abs-speed,
.trainerPanel .title-layout .table-res table tr td .abs-color .abs-speed {
  position: absolute;
  top: -20px;
  right: 0;
  width: 30px;
  height: 20px;
  font-size: 12px;
}
.trainerPanel .title-courses .table-res table tr td:nth-child(1),
.trainerPanel .title-layout .table-res table tr td:nth-child(1) {
  padding-right: 15px;
}
.trainerPanel .title-courses .table-res table tr td:nth-child(2),
.trainerPanel .title-courses .table-res table tr td:nth-child(3),
.trainerPanel .title-layout .table-res table tr td:nth-child(2),
.trainerPanel .title-layout .table-res table tr td:nth-child(3) {
  text-align: right;
  padding-right: 10px;
}
.trainerPanel .title-courses .table-res table tr td.td-today,
.trainerPanel .title-layout .table-res table tr td.td-today {
  text-align: center;
  padding-right: 0;
  vertical-align: top;
  padding-bottom: 15px;
}
.trainerPanel .title-courses .table-res .divider,
.trainerPanel .title-layout .table-res .divider {
  height: 1px;
  background: #ddd;
  padding: 0;
  margin: 15px -123px 10px -33px;
}
@media (max-width: 1200px) {
  .trainerPanel .title-courses,
  .trainerPanel .title-layout {
    /*.sum-all{
      width: 100px !important;
    }*/
  }
  .trainerPanel .title-courses .progress-block,
  .trainerPanel .title-layout .progress-block {
    width: 100px !important;
    margin-right: 20px !important;
  }
}
.trainerPanel .title-courses .sum-all,
.trainerPanel .title-layout .sum-all {
  position: absolute;
  right: 0;
  text-align: center;
  width: 21%;
  height: 100%;
}
.trainerPanel .title-courses .sum-all .result-all,
.trainerPanel .title-layout .sum-all .result-all {
  display: inline-block;
  /* span{
     //text-decoration: underline;
     //border-bottom: solid 2px;
     cursor: pointer;
   }*/
}
.trainerPanel .title-courses .sum-all .result-all .title-btn.underline span,
.trainerPanel .title-layout .sum-all .result-all .title-btn.underline span {
  border-bottom: solid 1px;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn,
.trainerPanel .title-layout .sum-all .result-all .title-btn {
  margin: 0 10px;
  position: relative;
  cursor: pointer;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn .abs-beginners,
.trainerPanel .title-layout .sum-all .result-all .title-btn .abs-beginners {
  display: none;
  position: absolute;
  left: 0;
  top: -5px;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn .abs-beginners .relative-beginners,
.trainerPanel .title-layout .sum-all .result-all .title-btn .abs-beginners .relative-beginners {
  position: relative;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn .abs-beginners .relative-beginners .beginners-block,
.trainerPanel .title-layout .sum-all .result-all .title-btn .abs-beginners .relative-beginners .beginners-block {
  position: absolute;
  right: 10px;
  border: solid 1px;
  background: #ffedbd;
  background: #ffedbd;
  border-radius: 10px;
  z-index: 2;
  padding: 15px 20px;
  text-align: left;
  white-space: nowrap;
  border-color: #88a9b4;
  font-size: 18px;
  font-size: calc(9px + 0.4vw);
  color: #095dbd;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn .title-letters,
.trainerPanel .title-layout .sum-all .result-all .title-btn .title-letters {
  position: relative;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn span,
.trainerPanel .title-layout .sum-all .result-all .title-btn span {
  margin: 0 5px;
  cursor: pointer;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn span:hover,
.trainerPanel .title-layout .sum-all .result-all .title-btn span:hover {
  border-width: 2px;
}
.trainerPanel .title-courses .sum-all .result-all .title-btn span.active,
.trainerPanel .title-layout .sum-all .result-all .title-btn span.active {
  border-bottom: solid 2px;
  opacity: 1;
  cursor: unset;
  transform: scale(1.1);
}
.trainerPanel .title-courses .blue-title,
.trainerPanel .title-layout .blue-title {
  display: inline-block;
  margin-left: 50px;
  margin-left: calc(18px + 1.6vw);
  position: relative;
}
.trainerPanel .title-courses .blue-title .blue-box,
.trainerPanel .title-layout .blue-title .blue-box {
  position: absolute;
  top: -45px;
  left: 0;
}
@media (max-width: 1090px) {
  .trainerPanel .title-courses .speed-title,
  .trainerPanel .title-layout .speed-title {
    margin-left: 10px !important;
  }
}
@media (max-width: 990px) {
  .trainerPanel .title-courses .speed-title,
  .trainerPanel .title-layout .speed-title {
    margin-left: 0px !important;
  }
}
.trainerPanel .title-courses .speed-title,
.trainerPanel .title-layout .speed-title {
  display: inline-block;
  margin-left: 40px;
  margin-left: calc(14px + 1.4vw);
}
.trainerPanel .title-courses .speed-title b,
.trainerPanel .title-layout .speed-title b {
  margin-right: 10px;
  width: 50px;
  display: inline-block;
  text-align: right;
}

#fields_visible {
  visibility: hidden;
}

/*DELETE*/
/*#fields_visible{
  display:inline-block !important;
}*/
.del {
  display: inline-block;
}
.del a {
  width: 200px;
  height: 150px;
  border: none;
  border-top: 1px solid #74cdfb;
  color: #fff;
  padding: 6px 15px 7px !important;
  margin-top: -1px;
  background-color: #2ca0f7;
  background-image: linear-gradient(to bottom, #3bb9fa, #2ca0f7);
  box-shadow: #2c93d4 0 1px 2px;
  text-shadow: 0 -1px 1px #a9abad;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  touch-action: manipulation;
  cursor: pointer;
  border-radius: 4px;
  outline: 0;
  font-size: 35px;
  font-weight: bold;
  margin-right: 4px;
  line-height: 1.42857143;
  display: flex;
  align-items: center;
  justify-content: center;
}
.del a.a2 {
  border: solid 1px #0db9f0;
  box-shadow: #2c93d4 0 1px 2px;
  background-color: #65befb;
  background-image: none;
}

#neuro_panel_6,
#payment_panel_4,
#account_panel_3,
#main_panel_2 {
  display: none;
}

#modal_panel_1 {
  display: none;
  min-height: 80vh;
  padding-bottom: 100px;
}
#modal_panel_1 .green {
  color: green;
}
#modal_panel_1 .red {
  color: red;
}

.MaestroBody #main_panel_2 {
  display: block;
}

.main_panel_2 {
  min-height: 80vh;
  padding-top: 105px;
  padding-bottom: 100px;
  position: relative;
}
.main_panel_2 .absTitlesTexts {
  position: absolute;
  bottom: 95px;
  left: 50%;
  transform: translateX(-50%);
  width: 768px;
  display: flex;
  justify-content: center;
}
.main_panel_2 .absTitlesTexts .box__TitlesTexts {
  text-align: center;
  color: #286a90;
  font-size: 20px;
  font-weight: bold;
}
.main_panel_2 .absTitlesTexts .box__TitlesTexts img {
  margin-right: 10px;
  position: relative;
  top: 4px;
}
.main_panel_2 .absTitlesTexts .box__TitlesTexts span:hover,
.main_panel_2 .absTitlesTexts .box__TitlesTexts img:hover {
  transform: scale(1.1);
}
.main_panel_2 .absTitlesCards,
.main_panel_2 .absTitlesLines {
  position: absolute;
  bottom: 95px;
  left: 50%;
  transform: translateX(-50%);
  width: 768px;
  display: flex;
  justify-content: space-around;
  font-size: 1.2rem;
  font-style: italic;
  color: #095c89;
}
.main_panel_2 .absTitlesCards {
  justify-content: flex-start;
  bottom: 47px;
}
.main_panel_2 .absTitlesCards .box__TitlesCards {
  height: 90px;
  width: 200px;
  text-align: center;
}
.main_panel_2 .abs__SwitchErrors {
  bottom: -8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  display: flex;
  justify-content: flex-end;
  display: none;
}
.main_panel_2 .abs__SwitchErrors .ui.toggle.checkbox label:before {
  cursor: pointer;
}
.main_panel_2 .abs__SwitchErrors .ui.toggle.checkbox label:after {
  background-color: #3295db !important;
  cursor: pointer;
}
.main_panel_2 .abs__SwitchErrors .ui.toggle.checkbox input:checked ~ label:after {
  background-color: #dce0ef !important;
}
.main_panel_2 .abs__SwitchErrors .ui.toggle.checkbox input:checked ~ label:before {
  background-color: #3295db !important;
}
.main_panel_2 .errors-lett {
  color: red;
}
.main_panel_2 .errors-cont {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  overflow: hidden;
  text-align: center;
}
.main_panel_2 .errors-cont .empty-errors {
  border: solid 1px #0045ff;
  min-width: 100px;
  display: inline-block;
}
.main_panel_2 .errors-cont .span-words {
  white-space: nowrap;
  overflow: hidden;
}
.main_panel_2 .errors-cont .span-words i {
  font-weight: bold;
  font-style: normal;
  color: red;
}
.main_panel_2 .logo-cont {
  margin-top: calc(25px + 5vw);
  display: inline-block;
  position: fixed;
  right: calc(40px + 8vw);
  bottom: -10px;
  z-index: 600;
}
.main_panel_2 .logo-cont img {
  height: calc(25px + 5vw);
}
.main_panel_2 .logo-cont .deadline-rate {
  position: absolute;
  width: 70%;
  height: 100%;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}
.main_panel_2 .logo-cont .deadline-rate .dead-top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: calc(9px + 1.8vw);
  font-weight: bold;
}
.main_panel_2 .logo-cont .deadline-rate .dead-top > div {
  display: flex;
  align-items: center;
  font-size: calc(12px + 0.6vw);
  color: #9b0311;
}
.main_panel_2 .logo-cont .deadline-rate .dead-bottom {
  position: relative;
  bottom: calc(4px + 0.8vw);
  font-size: calc(14px + 1.4vw);
  padding-left: calc(6px + 1.2vw);
  font-weight: bold;
  color: #9b0311;
}
.main_panel_2 .logo-cont:hover {
  opacity: 0.9;
  bottom: 0px;
  cursor: pointer;
}

.trainerPanel {
  /* */
  /*#lang_place{
    display:none;
  }*/
  /* #key_field{
     display:none;
   }*/
  /* @media(max-width:1490px){
     .keyboard{
       margin-top:30px;
       transform:scale(0.9);
     }
   }*/
  /* @media(max-width:1380px){
     .keyboard{
       transform:scale(0.95);
       -webkit-transform:scale(0.95);
       margin-top: 10px !important; // 42  -50
       //margin-bottom: -10px !important; // 0  -80
     }
     .progressPanel{
       transform:scale(0.95);
       -webkit-transform:scale(0.95);
     }
     .keyField{
       transform:scale(0.95);
       -webkit-transform:scale(0.95);
       //bottom: 20px;
     }

   }*/
  /* @media(max-width:1290px){
     .keyboard{
       transform:scale(0.9);
       -webkit-transform:scale(0.9);
       margin-top: 0px !important;  // -50
       //margin-bottom: -50px !important; // -80
     }
     .progressPanel{
       transform:scale(0.9);
       -webkit-transform:scale(0.9);
     }
     .keyField{
       transform:scale(0.9);
       -webkit-transform:scale(0.9);
       //bottom: 20px;
     }
   }*/
  /* @media(max-width:1190px){
     .keyboard{
       margin-top:10px;
       transform:scale(0.7);
     }
   }*/
}
.trainerPanel .bank-box img {
  height: 300px;
}
@media (max-width: 1199px) {
  .trainerPanel .keyField .keyFieldInside .fields {
    font-size: 25px !important;
  }
}
@media (max-width: 1099px) {
  .trainerPanel .keyField .keyFieldInside .fields {
    font-size: 23px !important;
  }
}
@media (max-width: 999px) {
  .trainerPanel .keyField .keyFieldInside .fields {
    font-size: 20px !important;
  }
  .trainerPanel .keyField .keyFieldInside .fields .text-panel.line-cont {
    min-width: 860px !important;
  }
}
.trainerPanel .langSpace {
  height: 90px;
}
.trainerPanel .courseSpace {
  height: 30px;
}
.trainerPanel .img-exercises {
  text-align: center;
  margin-top: 30px;
}
.trainerPanel .keyField {
  font-size: 27px;
  position: relative;
  width: 100%;
  line-height: 30px;
  color: #4f4f4f;
  border-radius: 10px;
  visibility: visible;
  z-index: 0;
  margin-top: calc(20vh - 190px);
  height: 75px;
}
.trainerPanel .keyField .line-trans {
  min-width: 768px;
  height: 50px;
  margin: -20px 0 0 0;
}
.trainerPanel .keyField .line-trans span {
  display: inline-block;
  overflow: hidden;
  color: #286a90;
  font-size: 24px;
  font-size: calc(12px + 0.6vw);
  padding: 0 20px 5px 20px;
}
.trainerPanel .keyField .line-trans span.bold {
  font-weight: bold;
  border: solid 1px #75b7dc;
  padding: 0 20px 5px 20px;
  border-radius: 50px;
  background: rgba(40, 163, 232, 0.1);
  margin-right: calc(5px + 0.5vw);
}
.trainerPanel .keyField .translateField {
  width: 100%;
  text-align: center;
  position: relative;
  bottom: calc(8px + 0.8vw);
}
.trainerPanel .keyField .keyFieldInside {
  width: 100%;
  position: relative;
  background-color: transparent;
  text-align: center;
}
.trainerPanel .keyField .keyFieldInside .fInput {
  background-color: transparent;
  padding: 0 20px 0 20px;
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  outline: 0;
  top: 100px;
  overflow: hidden;
  border: none;
  color: transparent;
  height: 1px;
  z-index: 5;
}
.trainerPanel .keyField .keyFieldInside .f_hidden {
  display: none;
}
.trainerPanel .keyField .keyFieldInside .fields {
  position: relative;
  z-index: 16;
  min-width: 768px;
  display: inline-block;
}
.trainerPanel .keyField .keyFieldInside .fields .text-panel.line-cont {
  min-width: 915px;
  text-align: left;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont {
  display: inline-block;
  position: relative;
  background: white;
  padding: 5px 30px;
  border-radius: 10px;
  min-width: 768px;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block {
  position: absolute;
  bottom: 53px;
  /* width: 500%; */
  height: 30px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  /*table{
    width: 100%;

    td{
      border-right: solid 1px;
      overflow: visible;
      table-layout: fixed;
    }
  }*/
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box {
  display: inline-block;
  position: relative;
  width: 10%;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .no-opacity {
  opacity: 0;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  white-space: nowrap;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont span {
  display: inline-block;
  overflow: hidden;
  color: #286a90;
  font-size: 24px;
  font-size: calc(12px + 0.6vw);
  padding: 0 20px 5px 20px;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont .bold {
  font-weight: bold;
  border: solid 1px rgb(117, 183, 220);
  padding: 0 20px 5px 20px;
  border-radius: 50px;
  background: rgba(40, 163, 232, 0.1);
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont .odd1 {
  position: relative;
  top: -20px;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont .odd2 {
  position: relative;
  top: -40px;
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont .long1 {
  font-size: 22px;
  font-size: calc(11px + 0.5vw);
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont .long2 {
  font-size: 20px;
  font-size: calc(10px + 0.5vw);
}
.trainerPanel .keyField .keyFieldInside .fields .line-cont .words-block .cell-box .word-cont .long3 {
  font-size: 18px;
  font-size: calc(9px + 0.4vw);
}
.trainerPanel .keyField .keyFieldInside .fields .f1 {
  white-space: pre;
  display: inline;
  color: #cedee5;
  letter-spacing: 0.03ex;
  border-collapse: collapse;
  empty-cells: show;
  line-height: 39px;
  text-indent: 0px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  position: relative;
}
.trainerPanel .keyField .keyFieldInside .fields .f1 b {
  position: absolute;
  top: -67px;
  left: -15px;
  border: solid;
  color: grey;
  font-size: 18px;
  opacity: 0.5;
}
.trainerPanel .keyField .keyFieldInside .fields .fCursor {
  white-space: pre;
  display: inline;
  border-right: 1px solid #626262;
  padding: 0;
  visibility: hidden;
  position: relative;
}
.trainerPanel .keyField .keyFieldInside .fields .lineTrans {
  display: inline;
  padding: 0;
  position: relative;
  font-size: 24px;
}
.trainerPanel .keyField .keyFieldInside .fields .lineTrans .trans-row2,
.trainerPanel .keyField .keyFieldInside .fields .lineTrans .trans-row {
  position: absolute;
  padding: 0;
  bottom: 35px;
  right: 10px;
  white-space: nowrap;
  color: #286a90;
  opacity: 0.5;
  display: none;
}
.trainerPanel .keyField .keyFieldInside .fields .lineTrans .trans-row2 {
  bottom: 35px;
  right: unset;
  left: 5px;
  opacity: 1;
}
.trainerPanel .keyField .keyFieldInside .fields .f2.skip {
  opacity: 0;
}
.trainerPanel .keyField .keyFieldInside .fields .f2 {
  white-space: pre;
  display: inline;
  color: #4f4f4f;
  letter-spacing: 0.03ex;
  position: relative;
}
.trainerPanel .keyField .keyFieldInside .fields .f2 i {
  font-style: normal;
  color: red;
}
@media (max-width: 1150px) {
  .trainerPanel {
    /*.keyboard{
      transform:scale(0.75);
      -webkit-transform:scale(0.75);
      margin-top: -20px !important;  // -50
      margin-bottom: -50px !important; // -80
    }
    .progressPanel{
      transform:scale(0.75);
      -webkit-transform:scale(0.75);
    }*/
  }
}
@media (max-width: 1040px) {
  .trainerPanel {
    /*.keyboard{
      transform:scale(0.6);
      -webkit-transform:scale(0.6);
      margin-top: -50px !important;
      margin-bottom: -80px !important;
    }
    .errors-cont{
      margin-top: 0px !important;
    }
    .progressPanel{
      transform:scale(0.6);
      -webkit-transform:scale(0.6);
    }*/
  }
}
.trainerPanel .keyboard { /*display:none;*/
  width: 768px;
  height: 254px;
  background-color: #3295db;
  border-radius: 10px;
  margin: 42px auto 0 auto;
  position: relative;
  text-align: center;
  margin-top: 10px;
  margin-top: calc(5px + 0.5vw);
}
.trainerPanel .keyboard .PanelLettError {
  position: absolute;
  top: -33px;
  line-height: 0.9;
  font-size: 30px;
  color: #c61111;
  left: 792px;
  white-space: nowrap;
  overflow: visible;
  width: 100px;
  height: 30px;
}
.trainerPanel .keyboard .PanelLastLetter.top__progress {
  top: -242px;
  right: -100px;
}
.trainerPanel .keyboard .PanelLettError.active {
  border: solid 1px #0045ff;
}
.trainerPanel .keyboard .PanelLastLetter {
  position: absolute;
  top: -150px;
  right: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: bold;
  color: blue;
  width: 55px;
  height: 55px;
}
.trainerPanel .keyboard .PanelLastLetter .A1 .bucket-media {
  background: #50c850;
  border-color: #0da30d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transform: scale(1.1);
}
.trainerPanel .keyboard .PanelLastLetter .A1 .bucket-media > div {
  height: unset;
}
.trainerPanel .keyboard .PanelLastLetter .A2 {
  color: #c61111;
}
.trainerPanel .keyboard .PanelLastLetter .A3 {
  color: #c61111;
}
.trainerPanel .keyboard .PanelButtonsTitle {
  position: absolute;
  top: 0;
  right: -110px;
  overflow: visible;
  width: 100px;
  height: 60px;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  color: #0c7ebd;
  font-weight: bold;
  font-size: 20px;
  flex-direction: column;
}
.trainerPanel .keyboard .PanelButtonsTitle .A2 {
  font-style: italic;
}
.trainerPanel .keyboard .PanelButtonsTitle .A1, .trainerPanel .keyboard .PanelButtonsTitle .A2 {
  display: flex;
}
.trainerPanel .keyboard .PanelButtonsMode {
  position: absolute;
  top: 55px;
  right: -8px;
  width: 1px;
  height: 200px;
  display: flex;
  flex-direction: row;
}
.trainerPanel .keyboard .PanelButtonsMode [data-tooltip]:after {
  min-width: 300px !important;
  white-space: normal;
}
.trainerPanel .keyboard .PanelButtonsMode .box__SpeedGoal {
  margin-bottom: 5px;
  color: #0c7ebd;
  font-weight: bold;
  margin: 15px 7px;
}
.trainerPanel .keyboard .PanelRestart {
  position: absolute;
  bottom: 40px;
  right: -50px;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  z-index: 1;
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Внутренний вложенный круг */
}
.trainerPanel .keyboard .PanelRestart .inner-circle-1 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.trainerPanel .keyboard .PanelRestart .inner-circle-2 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #a6d4f0;
  border: solid #67a1ca 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* базовая тень */
  transition: all 0.2s ease;
}
.trainerPanel .keyboard .PanelRestart .inner-circle-2 img {
  height: 30px;
  width: 30px;
}
.trainerPanel .keyboard .PanelRestart .inner-circle-2:hover {
  background: #c2e3f8; /* чуть ярче */
  transform: scale(1.05); /* лёгкое увеличение */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* тень побольше */
  cursor: pointer;
}
.trainerPanel .keyboard .keys {
  padding: 5px;
  height: 170px;
  position: relative;
  display: inline-block;
}
.trainerPanel .keyboard .keys .keys-box {
  width: 100%;
  height: 100%;
}
.trainerPanel .keyboard .keys div.clear {
  clear: both;
}
.trainerPanel .keyboard .keys .last-row {
  height: 20px;
  border: solid;
}
.trainerPanel .keyboard .keys div.key-btn {
  float: left;
  width: 46px;
  height: 46px;
  font-size: 15px;
  border: 1px solid #c7d0d4;
  margin: 3px 2px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #9ad3fa;
  border-bottom: 1px solid #43a7dc;
  color: #88a9b4;
  cursor: default;
  border-radius: 6px;
}
.trainerPanel .keyboard .keys div.key-btn .main-key {
  position: absolute;
  width: 100%;
  bottom: -2px;
  left: 0px;
  text-align: center;
}
.trainerPanel .keyboard .keys div.key-btn .main-key .line-key {
  display: inline-block;
  width: 7px;
  height: 1px;
  border: solid 1px;
}
.trainerPanel .keyboard .keys div.key-btn .finger-box {
  position: absolute;
  height: 46px;
  width: 46px;
  top: 33px;
  left: 0;
  z-index: 1;
}
.trainerPanel .keyboard .keys div.key-btn .finger-box img {
  height: 100%;
}
.trainerPanel .keyboard .keys div.key-btn input {
  width: 100%;
  height: 100%;
  border: unset;
  font-size: 20px;
  text-align: center;
  cursor: default;
  border-radius: 6px;
  background-color: #a6d4f0;
}
.trainerPanel .keyboard .keys div.key-btn input:focus {
  font-weight: bold;
  border: solid 1px black;
}
.trainerPanel .keyboard .keys div.caps {
  width: 75px;
}
.trainerPanel .keyboard .keys div.tab {
  width: 63px;
}
.trainerPanel .keyboard .keys div.enter {
  width: 76px;
}
.trainerPanel .keyboard .keys div.skip {
  opacity: 0.6;
  /*input{
    color:transparent !important;
  }*/
}
.trainerPanel .keyboard .keys div.hand input {
  border: 1px solid #86a1ff;
  color: #6674ff;
  font-weight: bold;
  background-color: #d4f0fe !important;
}
.trainerPanel .keyboard .keys div.is_main {
  background-color: red !important;
}
.trainerPanel .keyboard .keys div.yellow input {
  background-color: #ffedbd !important;
}
.trainerPanel .keyboard .keys div.sel.yellow {
  background: #ffde87 !important;
}
.trainerPanel .keyboard .keys div.sel {
  background: #a8ccff !important;
  border: 3px solid white;
}
.trainerPanel .keyboard .keys div.sel input {
  font-size: 28px;
  font-weight: bold;
  color: blue;
  background: inherit;
}
.trainerPanel .keyboard .keys div.sys {
  background: unset;
  border: unset;
}
.trainerPanel .keyboard .keys div.sys input {
  background: unset;
}
.trainerPanel .keyboard .keys div.rshift,
.trainerPanel .keyboard .keys div.lshift {
  width: 101px;
}

.Question__Circle {
  height: 27px;
  width: 27px;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background: #f4b643;
  font-style: normal;
  position: absolute;
  right: -40px;
  bottom: 0;
}

.Question__Circle:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.blockProgress {
  align-items: center;
  display: flex;
  flex: 1;
}
.blockProgress .progress-bar {
  height: 26px;
  border: solid 1px white;
  width: 100%;
  display: flex;
}
.blockProgress .progress-bar .progress-white {
  margin: 1px 0 1px 1px;
  height: calc(100% - 2px);
  background: white;
}
.blockProgress .progress-bar .progress-blue {
  height: 100%;
  color: white;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 10px;
  font-size: 16px;
  font-weight: normal;
}

.bucket-media {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #f4b643, #f7c35d); /* градиент от основного цвета */
  border: 3px solid #d19d3f; /* чуть темнее, чтобы выделить границу */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* небольшая тень */
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 8px;
  position: relative;
  flex-direction: column;
  overflow: visible;
  white-space: nowrap;
  font-size: 18px;
  z-index: 1;
}
.bucket-media > div {
  height: 14px;
}
.bucket-media span {
  font-size: 12px;
}

.itemResults:hover {
  height: 30px;
  cursor: pointer;
}

.itemResults.opened {
  height: unset !important;
  padding-top: 10px;
}
.itemResults.opened .lesson-split {
  visibility: visible;
}

.itemFirst {
  background: linear-gradient(90deg, #eea0a0, #e2a2b8) !important;
  display: none;
  /*.title__First {
      text-align: center;
      color: #2c3e50;
      position: relative;
      margin-top: 20px;

      span{

          font-weight: bold;
          font-size: 2rem;
          position: relative;
          img{
              position: absolute;
              height: 45px;
              left: -50px;
              bottom: -5px;
          }
      }

  }
  p {
      margin-bottom: 15px;
  }
  .highlight {
      font-weight: bold;
      color: #e67e22;
  }
  .btn-group {
      text-align: center;
      margin-top: 20px;
  }
  button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 12px 25px;
      margin: 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s ease;
  }
  button:hover {
      background-color: #2980b9;
  }*/
}
.itemFirst .title__First {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 2rem;
  font-weight: bold;
  color: #222;
  padding: 20px;
  color: white;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: none;
}
.itemFirst .title__First span {
  font-weight: bold;
  font-size: 2rem;
  position: relative;
}
.itemFirst .title__First span img {
  position: absolute;
  height: 45px;
  left: -50px;
  bottom: -5px;
}
.itemFirst h2 {
  text-align: center;
  font-size: 1.8rem;
  color: #222;
  margin: 10px 0 0;
}
.itemFirst p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 10px 20px;
}
.itemFirst .highlight {
  background: #ffe066;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: bold;
}
.itemFirst h3 {
  margin: 20px 20px 10px;
  font-size: 1.4rem;
  color: #444;
}
.itemFirst ul {
  margin: 0 20px 20px;
  padding: 0;
  list-style: none;
}
.itemFirst ul li {
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 8px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.itemFirst .btn-group {
  text-align: center;
  margin-bottom: 30px;
}
.itemFirst .btn-group button {
  background: linear-gradient(90deg, #68afe1, #3295db);
  border: none;
  color: white;
  font-size: 1.2rem;
  padding: 12px 25px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.itemFirst .btn-group button:hover {
  background: linear-gradient(90deg, #56a5dc, #208bd7);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.itemPoints {
  font-weight: bold;
}

.itemResults {
  transition: height 0.5s ease;
  height: 20px;
}
.itemResults .lesson-split {
  visibility: hidden;
}
.itemResults .lesson-split .A4 img {
  height: 40px;
  margin-right: 20px;
}
.itemResults .lesson-split .A1 {
  font-size: 22px;
  font-weight: 700;
  width: 200px;
}
.itemResults .lesson-split .A2 {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.itemResults .lesson-split .A2 .not_checked-item {
  display: block;
}
.itemResults .lesson-split .A2 .yellow-item {
  display: none;
}
.itemResults .lesson-split .A2 .checked-item {
  display: none;
}
.itemResults .lesson-split .A2 .box__itemRes {
  display: inline-block;
  margin: 0 6px;
}
.itemResults .lesson-split .A2 .box__itemRes img {
  width: 30px;
  position: relative;
  top: 3px;
}
.itemResults .lesson-split .A2 .box__itemRes:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.itemDashboard {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #fff;
  margin-bottom: 20px;
  position: relative;
  padding: 0 20px 5px;
}
.itemDashboard .PlaceToResults {
  font-size: 22px;
  color: rgb(12, 126, 189);
  font-weight: bold;
  margin-bottom: -20px;
  display: flex;
  justify-content: space-between;
}
.itemDashboard .PlaceToResults span:hover {
  opacity: 0.7;
  text-decoration: underline;
  cursor: pointer;
}
.itemDashboard .PlaceToResults .time-content {
  margin: 0 20px;
}
.itemDashboard .lesson-split.res_active .lesson-action .btn-yellow {
  display: block;
}
.itemDashboard .lesson-split.res_active .lesson-action .btn-blue {
  display: none;
}
.itemDashboard .lesson-split.res_active .A2 .yellow .yellow-item {
  display: block;
}
.itemDashboard .lesson-split.res_active .A2 .yellow .checked-item {
  display: none;
}
.itemDashboard .lesson-split.res_active .A2 .yellow .not_checked-item {
  display: none;
}
.itemDashboard .lesson-split {
  flex-wrap: nowrap;
  align-items: center;
  display: flex;
  justify-content: space-between;
  text-align: left;
}
.itemDashboard .lesson-split .A2 .checked .checked-item {
  display: block;
}
.itemDashboard .lesson-split .A2 .checked .yellow-item {
  display: none;
}
.itemDashboard .lesson-split .A2 .checked .not_checked-item {
  display: none;
}
.itemDashboard .lesson-split .time-content {
  flex: 1;
}
.itemDashboard .lesson-split .accuracy-content {
  flex: 1;
  color: green;
  /*.C{
      height: 30px;
      width: 30px;
      border-radius: 50%;
      color: white;
      background: green;
      display:flex;
      align-items: center;
      justify-content: center;
  }*/
}
.itemDashboard .lesson-split .lesson-content {
  margin-top: 20px;
  padding-right: 20px;
  min-width: 60%;
}
.itemDashboard .lesson-split .lesson-content .bucket {
  display: flex;
}
.itemDashboard .lesson-split .lesson-content .bucket .bucket-content {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  margin-left: 40px;
}
.itemDashboard .lesson-split .finished-item img {
  height: 50px;
}
.itemDashboard .lesson-split .lesson-action {
  position: relative;
}
.itemDashboard .lesson-split .lesson-action .btn-blue {
  display: block;
}
.itemDashboard .lesson-split .lesson-action .btn-yellow {
  display: none;
}
.itemDashboard .lesson-split .lesson-action img {
  width: 85px;
}
.itemDashboard .lesson-split .lesson-action img:hover {
  transform: translateY(2px);
  opacity: 0.7;
  cursor: pointer;
}
.itemDashboard .lesson-split .lesson-action .lesson-btn {
  padding: 2px 10px 0;
  position: relative;
  min-width: 120px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  background: #e5bb48;
  border-radius: 5px;
  color: #6d5825;
}
.itemDashboard .lesson-split .lesson-action .lesson-btn svg.arrow {
  transform: rotate(-90deg);
  height: 7px;
  width: 11px;
}
.itemDashboard .chunks.second {
  margin-left: unset;
  width: 100%;
  margin-top: 10px;
}
.itemDashboard .chunks {
  /*left: 3px;
  width: calc(100% - 6px);*/
  left: 87px;
  width: calc(100% - 70px);
  bottom: 2px;
  height: 30px;
  display: flex;
  margin-bottom: 4px;
  margin-left: auto;
}
.itemDashboard .chunks .chunk {
  flex: 1;
  margin-right: 2px;
  transition: all 0.25s ease-in-out;
  text-align: center;
  width: 100%;
  cursor: pointer;
  position: relative;
  background: #eaeaea;
}
.itemDashboard .chunks .chunk .speed-next {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3px;
  white-space: nowrap;
  color: white;
}
.itemDashboard .chunks .chunk .speed-next span {
  visibility: hidden;
}
.itemDashboard .chunks .chunk.is-complete {
  background: #3295db;
}
.itemDashboard .chunks .chunk.is-next {
  background: #f7c35d;
}
.itemDashboard .chunks .chunk.is-next .speed-next {
  visibility: visible;
  font-weight: bold;
  font-size: 20px;
  top: 1px;
}
.itemDashboard .chunks .chunk.is-next .speed-next span {
  visibility: visible;
}
.itemDashboard .chunks .chunk.is-again {
  background: #bfe04f;
}
.itemDashboard .chunks .chunk.is-again .speed-next {
  color: #0c7ebd;
  font-weight: bold;
}
.itemDashboard .chunks .chunk:hover {
  background-color: rgba(50, 149, 219, 0.5);
  flex: 1.3;
  transform: scaleY(1.5) translateY(-1px);
}
.itemDashboard .chunks .chunk:hover .speed-next {
  visibility: visible;
}

/*
.item__Title{

    .C{
        //border:solid;
        width: 100%;
        position: relative;

        .row__Mode{
            border: solid 1px;
            position:absolute;
            left:0;
            top:0;
        }


        .B__Title{

            span{
                font-size: 10px;
            }
        }
    }




    h1{
        margin-top: 0;
        font-size: 28px;
    }
    h2{
        margin-bottom: 0;
        //margin-top: 10px;
        //

        span{
            position:relative;
            //margin-right: 36px;
            margin-left: 5px;
        }
        .icon__Bars:hover{
            transform: scale(1.1);
            cursor: pointer;
            box-shadow: unset;
        }

        .icon__Bars{
            border-radius: 5px;
            margin: 0 10px;
            height: 30px;
            width: 33px;
            background: #cce9f8;


            opacity: 1;
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
            border: solid;
            display:flex;
            align-items:center;
            justify-content: center;

            position: absolute;
            right: -55px;
            bottom:0;
        }
    }
}*/
.box__SpeedGoal.B__speed {
  position: relative;
}
.box__SpeedGoal.B__speed span {
  bottom: -35px;
}
.box__SpeedGoal.B__speed .abs_plus {
  position: absolute;
  top: -14px;
  /* border: solid; */
  min-height: unset;
  font-size: 14px;
  border-radius: 20px;
  background: white;
  white-space: nowrap;
  font-style: italic;
  right: -27px;
}

.box__SpeedGoal:hover .span__hover {
  opacity: 1;
}

.box__SpeedGoal:hover,
.box__SpeedGoal.active {
  opacity: 1;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  border: solid;
}
.box__SpeedGoal:hover span,
.box__SpeedGoal.active span {
  opacity: 1;
}

.box__SpeedGoal {
  opacity: 0.5;
  border: solid 1px;
  border-radius: 5px;
  margin: 0 15px;
  height: 50px;
  width: 55px;
  background: #cce9f8;
}
.box__SpeedGoal .C1 {
  line-height: 1;
  margin-top: 5px;
  color: #d69c2f;
}
.box__SpeedGoal .C2 {
  font-size: 12px;
}
.box__SpeedGoal img {
  height: 90%;
  margin-top: 7%;
}
.box__SpeedGoal span.span__hover {
  opacity: 0;
}
.box__SpeedGoal span {
  opacity: 0;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: italic;
  pointer-events: none;
}

.box__SpeedGoal:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.box__ImgSpeed {
  opacity: 0.7;
  border: solid 1px;
  border-radius: 5px;
  height: 50px;
  width: 55px;
  background: #cce9f8;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
  margin-top: 10px;
}
.box__ImgSpeed img {
  height: 90%;
  margin-top: 7%;
}
.box__ImgSpeed .abs_plus {
  position: absolute;
  top: -14px;
  /* border: solid; */
  min-height: unset;
  font-size: 14px;
  border-radius: 20px;
  background: white;
  white-space: nowrap;
  font-style: italic;
  right: -27px;
  font-weight: bold;
}

.box__SpeedIcon:hover,
.box__SpeedIcon.active {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  border: solid;
  opacity: 1;
}

.box__SpeedIcon:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.box__SpeedIcon {
  border-radius: 5px;
  height: 50px;
  width: 55px;
  background: #cce9f8;
  opacity: 0.5;
  border: solid 1px;
}
.box__SpeedIcon .B1 {
  line-height: 1;
  margin-top: 5px;
  color: #d69c2f;
  font-weight: bold;
  font-size: 22px;
}
.box__SpeedIcon .B2 {
  font-size: 12px;
}

.PlaceResults {
  min-height: 200px;
  margin-bottom: 200px;
  text-align: center;
  color: #0c7ebd;
}
.PlaceResults .blockTitle {
  text-align: center;
}
.PlaceResults .blockTitle .first_pink {
  background: linear-gradient(90deg, #eea0a0, #e2a2b8);
  color: #166692;
}
.PlaceResults .blockTitle .BoxTitle {
  margin: 0 auto 35px;
  width: 970px;
  display: flex;
  border-radius: 10px 10px 0 0;
  /*.row__Mode:hover{
      .B.active span{
          opacity:0;
      }
  }*/
}
.PlaceResults .blockTitle .BoxTitle .item__Mode {
  flex: 1;
  font-size: 22px;
  font-weight: bold;
  margin-top: 7px;
  /* align-items: center;
   display:flex;*/
}
.PlaceResults .blockTitle .BoxTitle .place__Title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.PlaceResults .blockTitle .BoxTitle .place__Title .A {
  background: #237dbd;
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  font-style: italic;
}
.PlaceResults .blockTitle .BoxTitle .place__Title .A:hover {
  transform: translateY(2px);
  cursor: pointer;
}
.PlaceResults .blockTitle .BoxTitle .row__Mode:hover .box__SpeedGoal .span__active {
  opacity: 0 !important;
}
.PlaceResults .blockTitle .BoxTitle .row__Mode {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: relative;
  /*.B:hover .span__active{
      opacity:0 !important;
  }*/
}
.PlaceResults h1, .PlaceResults h2, .PlaceResults h3, .PlaceResults h4 {
  color: inherit;
}
.PlaceResults h1 {
  margin-bottom: 0;
}
.PlaceResults h2 {
  margin: 0 0 20px;
  font-style: italic;
}
.PlaceResults .close__Promotion {
  position: absolute;
  right: 20px;
  top: 5px;
  font-size: 26px;
  z-index: 1;
  color: black;
}
.PlaceResults .close__Promotion:hover {
  cursor: pointer;
  transform: scale(1.4);
}
.PlaceResults .item__Explain {
  font-size: 22px;
  text-align: left;
}
.PlaceResults .item__Explain .box__Close {
  text-align: center;
}
.PlaceResults .item__Explain .box__Close button {
  margin: 10px 0 20px auto;
  background: #237dbd;
  color: white;
  padding: 5px 20px;
  cursor: pointer;
}
.PlaceResults .item__Explain .box__Close button:hover {
  opacity: 0.8;
}
.PlaceResults .item__Explain .A1 {
  font-size: 24px;
  font-weight: bold;
  color: #d31a1a;
  margin: 20px;
  text-align: center;
}
.PlaceResults .item__Explain .A2 {
  color: #237dbd;
  font-weight: bold;
}
.PlaceResults .item__Explain .A3 {
  background-color: #f3f2ee;
  color: black;
  font-style: italic;
}
.PlaceResults .item__Explain .A3 a {
  text-decoration: underline;
  font-weight: bold;
}
.PlaceResults .item__Explain .A3 a:hover {
  cursor: pointer;
  text-decoration: unset;
  font-weight: normal;
}
.PlaceResults .item__Explain .A2, .PlaceResults .item__Explain .A3, .PlaceResults .item__Explain .A4 {
  font-size: 20px;
  padding: 5px 25px;
  margin: 15px;
}
.PlaceResults .item__Explain .A4 {
  color: #d31a1a;
  background-color: #f3f2ee;
  font-weight: bold;
}
.PlaceResults .item__Explain .A5 {
  font-size: 20px;
  font-weight: bold;
  padding: 15px 25px;
  text-align: center;
}
.PlaceResults .item__Promotion {
  padding: 20px 40px;
}
.PlaceResults .item__Promotion .A1 {
  font-size: 24px;
  font-weight: bold;
  color: #d31a1a;
  margin-bottom: 10px;
}
.PlaceResults .item__Promotion .A2 {
  font-size: 20px;
  padding: 15px 25px;
  font-weight: bold;
  margin-bottom: 15px;
  background-color: #f3f2ee;
}
.PlaceResults .item__Promotion .A3 {
  font-size: 20px;
  font-weight: bold;
  padding: 15px 25px;
}
.PlaceResults .item__Promotion .btn__Start {
  background-color: #f7c35d;
  color: #27278e;
}
.PlaceResults .item__Promotion .btn__Register {
  background-color: #46a1da;
  box-shadow: #46a1da 0 1px 2px;
  color: white;
}
.PlaceResults .item__Promotion .btn__Start,
.PlaceResults .item__Promotion .btn__Register {
  font-size: 20px;
  font-weight: bold;
  padding: 6px 15px 7px;
}
.PlaceResults .item__Promotion .A4 {
  text-align: left;
  font-size: 18px;
}
.PlaceResults .item__Promotion .btn__Start:hover,
.PlaceResults .item__Promotion .btn__Register:hover {
  transform: translateY(2px);
  opacity: 0.7;
}
.PlaceResults .item__SpeedMode {
  padding: 20px 40px;
  /*.blockSpeedMode:hover{

      cursor: pointer;

      .B2{
          background: #e1f1fa;
      }
  }*/
}
.PlaceResults .item__SpeedMode h2 {
  margin-bottom: 5px;
}
.PlaceResults .item__SpeedMode .action__SpeedMode {
  font-size: 22px;
  margin-bottom: 10px;
  text-align: left;
}
.PlaceResults .item__SpeedMode .blockSpeedMode.active {
  background: #e1f1fa;
}
.PlaceResults .item__SpeedMode .blockSpeedMode:hover {
  text-decoration: underline;
}
.PlaceResults .item__SpeedMode .blockSpeedMode:hover,
.PlaceResults .item__SpeedMode .blockSpeedMode.active {
  cursor: pointer;
}
.PlaceResults .item__SpeedMode .blockSpeedMode:hover .B1 .box__ImgSpeed,
.PlaceResults .item__SpeedMode .blockSpeedMode.active .B1 .box__ImgSpeed {
  opacity: 1;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  border: solid;
}
.PlaceResults .item__SpeedMode .blockSpeedMode:hover .B1 span,
.PlaceResults .item__SpeedMode .blockSpeedMode.active .B1 span {
  position: relative;
  top: 2px;
  transform: scale(1.1);
}
.PlaceResults .item__SpeedMode .blockSpeedMode {
  display: flex;
  min-height: unset;
  /*.B1.active,
  .B1:hover{
      cursor: pointer;
      background: #e1f1fa;
      .box__ImgSpeed {

          opacity: 1;
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
          border: solid;
      }
      span{
          position: relative;
          top:2px;
          transform: scale(1.1);
      }
  }*/
}
.PlaceResults .item__SpeedMode .blockSpeedMode .B1 {
  border: solid 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  width: 140px;
  /*.box__ImgSpeed.active{
      opacity: 1;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
      border: solid;
  }*/
}
.PlaceResults .item__SpeedMode .blockSpeedMode .B1 span {
  font-weight: bold;
}
.PlaceResults .item__SpeedMode .blockSpeedMode .B2 {
  flex: 1;
  border: solid 1px;
  border-left: unset;
  text-align: left;
  padding: 10px 20px;
  /*.desc__SpeedMode:hover{

      cursor: pointer;
      opacity: 0.8;
      text-decoration: underline;
  }*/
}
.PlaceResults .item__SpeedMode .blockSpeedMode .B2 .desc__SpeedMode {
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}
.PlaceResults .item__SpeedMode .blockSpeedMode .B2 p {
  font-size: 16px;
  margin: 0;
}
.PlaceResults .item__Graphs {
  padding: 20px 40px 40px;
}
.PlaceResults .item__Graphs h2 {
  margin-bottom: 5px;
}
.PlaceResults .item__Graphs .action__SpeedMode {
  font-size: 22px;
  margin-bottom: 10px;
  text-align: left;
  min-height: 57px;
  border: solid 1px;
  background: #fbe29a;
  padding: 10px 20px;
  font-weight: bold;
}
.PlaceResults .item__Graphs .header__Graphs {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
  position: relative;
  margin-top: 30px;
}
.PlaceResults .item__Graphs .header__Graphs .C3 {
  display: flex;
  position: relative;
  top: 9px;
  /* .line__SpeedGoal:hover,
   .line__SpeedGoal.active{
       .abs__Speed{
           box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
           border: solid;
           opacity: 1;
       }
   }
   .line__SpeedGoal:hover {
       .abs__Speed {
           box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
           cursor: pointer;
       }
   }*/
}
.PlaceResults .item__Graphs .header__Graphs .C3 .line__SpeedGoal {
  width: 55px;
  margin-left: 10px;
  position: relative;
}
.PlaceResults .item__Graphs .header__Graphs .C3 .line__SpeedGoal .box__SpeedIcon {
  position: absolute;
  bottom: 0;
}
.PlaceResults .item__Graphs .header__Graphs .C1,
.PlaceResults .item__Graphs .header__Graphs .C2 {
  display: flex;
  color: orange;
}
.PlaceResults .item__Graphs .header__Graphs .C1 .D,
.PlaceResults .item__Graphs .header__Graphs .C2 .D {
  font-weight: bold; /* всегда */
  opacity: 0.5;
  cursor: pointer;
  margin: 0 5px;
}
.PlaceResults .item__Graphs .header__Graphs .C1 .D:hover,
.PlaceResults .item__Graphs .header__Graphs .C1 .D.active,
.PlaceResults .item__Graphs .header__Graphs .C2 .D:hover,
.PlaceResults .item__Graphs .header__Graphs .C2 .D.active {
  opacity: 1;
  text-decoration: underline;
}
.PlaceResults .item__Graphs .header__Graphs .C1 .D.green,
.PlaceResults .item__Graphs .header__Graphs .C2 .D.green {
  color: green;
}
.PlaceResults .item__Graphs .PlaceGraphs {
  min-height: 100px;
  width: 100%;
  position: relative;
}
.PlaceResults .item__Graphs .PlaceGraphs .abs_middle {
  position: absolute;
  top: 0;
  left: 50%; /* смещаем в центр */
  transform: translateX(-50%); /* смещаем обратно на половину ширины */
  font-size: 22px;
  color: orange;
  font-weight: bold;
  padding: 5px 20px;
  border-radius: 40%;
  background: white;
  border: solid 1px;
}
.PlaceResults .item__Graphs .PlaceGraphs .abs_middle.green {
  color: #3bb020;
}
.PlaceResults .item__Graphs .PlaceGraphs .abs_middle.left_middle {
  transform: unset;
  left: 58px;
}
.PlaceResults .item__Graphs .title__Graphs {
  margin-top: 10px;
  font-size: 1.3rem;
}
.PlaceResults .item__Graphs .E1 {
  font-size: 1.2rem;
  margin-top: 12px;
}
.PlaceResults .item__Graphs .E2 {
  margin-left: 10px;
  font-size: 1.1rem;
}
.PlaceResults .item__Graphs .E1, .PlaceResults .item__Graphs .E2 {
  text-align: left;
}
.PlaceResults .item__Promotion {
  padding: 20px 40px;
}
.PlaceResults .item__Promotion p {
  text-align: left;
  font-size: 18px;
  margin: 5px;
}
.PlaceResults .item__Promotion h2 {
  margin-bottom: 5px;
}
.PlaceResults .item__Promotion .B {
  text-align: center;
}
.PlaceResults .item__Promotion .B img {
  width: 110px;
}
.PlaceResults .item__Promotion .B img:hover {
  transform: translateY(2px);
  opacity: 0.7;
  cursor: pointer;
}
.PlaceResults .item__Promotion .highlight {
  background: #ffe066;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: bold;
}
.PlaceResults .blockRegister {
  background: linear-gradient(#ffa346, #f3761b);
  box-shadow: 0 10px 10px 0 rgba(74, 74, 74, 0.1);
  color: white;
  font-size: 20px;
  width: 970px;
  margin: 0 auto 20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px;
  border-radius: 10px;
  line-height: 2;
}
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText {
  font-size: 18px;
  font-style: italic;
  position: relative;
  text-align: left;
}
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText span {
  display: inline-block;
  margin-left: 30px;
}
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText span .elem__Circle {
  background: white;
  height: 30px;
  width: 30px;
  color: black;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText img:hover,
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText span:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText .B {
  position: absolute;
  right: -70px;
  bottom: -10px;
}
.PlaceResults .blockRegister .itemRegisterText .row__RegisterText .B img {
  height: 50px;
}
.PlaceResults .blockRegister .itemRegister {
  display: flex;
  align-items: center;
}
.PlaceResults .blockRegister .itemRegister button {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #f3761b;
  box-shadow: 0 2px #bf5507;
  color: #f3761b;
  font-size: 14px;
  padding: 2.5px 20px 1.5px;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 0.8);
  font-family: quicksand, sans-serif;
  font-weight: 700;
}
.PlaceResults .blockRegister .itemRegister button:hover {
  transform: scale(1.1);
  background: #fff6ec;
  color: #f3761b;
}
.PlaceResults .blockResults {
  width: 970px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}
.PlaceResults .blockResults .ListTab {
  width: 250px;
  z-index: 0;
}
.PlaceResults .blockResults .ListTab .itemLevel {
  font-size: 1.2rem;
  font-weight: bold;
  background: #fcfcfc;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #d5d5d5;
  cursor: pointer;
  flex: 1 0 auto;
  margin: 0 15px 0 0;
  padding: 15px;
  transition: all 0.25s ease-in-out;
  display: flex;
  justify-content: space-between;
}
.PlaceResults .blockResults .ListTab .itemLevel .PlaceTabLeft {
  display: flex;
  flex-direction: column;
}
.PlaceResults .blockResults .ListTab .itemLevel .PlaceTabLeft .box-button-tab img {
  margin-top: 10px;
  width: 110px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.PlaceResults .blockResults .ListTab .itemLevel .PlaceTabLeft .box-button-tab img:hover {
  transform: translateY(2px); /* немного опускаем изображение для эффекта */
  opacity: 0.7;
}
.PlaceResults .blockResults .ListTab .itemLevel .PlaceTabRight .box-man img {
  height: 100px;
}
.PlaceResults .blockResults .ListTab .itemLevel .PlaceTabRight .box-level {
  display: flex;
  flex-direction: column;
}
.PlaceResults .blockResults .ListTab .itemLevel.is_active {
  background-color: #3295db;
  border-radius: 10px 0 0 10px;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-left: -10px;
  margin-right: -20px;
  padding-right: 50px;
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: quicksand, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
}
.PlaceResults .blockResults .ListTab .itemLevel:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.PlaceResults .blockResults .ListTab .itemLevel:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.PlaceResults .blockResults .ListDashboard {
  flex: 1;
  background-color: #3295db;
  border-radius: 10px;
  padding: 20px;
  z-index: 1;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress {
  border-bottom: 1px solid #d5d5d5;
  min-height: 50px;
  display: flex;
  position: relative;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .bucket-media {
  bottom: 10px;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .time-level {
  position: absolute;
  color: white;
  bottom: -30px;
  right: 27px;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .time-total {
  color: white;
  margin-left: 15px;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .blockProgress {
  margin: 0 0 20px 20px;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .blockSertificate {
  margin-left: 20px;
  display: flex;
  position: relative;
  bottom: 10px;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .blockSertificate button {
  background-color: #d5d5d5;
  color: #4a4a4a;
  cursor: default;
  opacity: 0.5;
  font-size: 14px;
  font-weight: bold;
  padding: 2.5px 10px 1.5px;
  border-radius: 8px;
  margin-left: 20px;
  white-space: nowrap;
  line-height: 1.4;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .blockSertificate button span {
  text-transform: uppercase;
}
.PlaceResults .blockResults .ListDashboard .PlaceProgress .blockSertificate:hover:after {
  width: 300px; /* Ограничение ширины */
  white-space: normal;
}
.PlaceResults .blockResults .ListDashboard .BlockBasic {
  display: flex;
  color: white;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
}
.PlaceResults .blockResults .ListDashboard .BlockBasic .B1 {
  font-size: 22px;
  font-weight: 700;
}
.PlaceResults .blockResults .ListDashboard .BlockBasic .B2 {
  flex: 1;
  border: solid 1px;
  margin-left: 40px;
  font-size: 18px;
  padding: 10px 20px;
  font-weight: bold;
}
.PlaceResults .blockResults .ListDashboard .BlockBasic .B1:hover {
  text-decoration: underline;
  transform: translateY(2px);
}
.PlaceResults .blockResults .ListDashboard .BlockBasic .B2:hover {
  transform: translateY(2px);
  background: #2788cd;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard {
  position: relative;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes {
  position: relative;
  display: flex;
  padding: 5px 40px 5px 20px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DateEnd {
  position: absolute;
  left: 0;
  bottom: 20px;
  color: white;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__Points {
  color: white;
  display: flex;
  align-items: center;
  display: none;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__Points .C {
  display: flex;
  /*  .Q2{
        margin-left: 10px;
        height: 25px;
        width: 25px;
        display:flex;
        border-radius:50%;
        justify-content: center;
        align-items: center;
        background: #f4b643;
    }
    .Q2:hover{
        cursor: pointer;
        transform: scale(1.1);
    }*/
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__Points .C .box__daysLeft {
  display: flex;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__SpeedTotal {
  min-width: 50px;
  display: flex;
  gap: 40px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__SpeedTotal .bucket-media {
  cursor: pointer;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__SpeedTotal .bucket-media .abs_plus_bucket {
  position: absolute;
  top: -14px;
  /* border: solid; */
  min-height: unset;
  font-size: 14px;
  border-radius: 20px;
  background: white;
  white-space: nowrap;
  font-style: italic;
  right: -27px;
  display: flex;
  align-items: center;
  color: blue;
  padding: 5px 3px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__SpeedTotal .C1 {
  background: linear-gradient(135deg, #e9a72e, #e7b148);
  border: 3px solid #b6852c;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__SpeedTotal .C2 {
  background: #f7c35d;
  border-color: #d1a351;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__AccuracyTotal {
  min-width: 50px;
  display: flex;
  gap: 40px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__AccuracyTotal .bucket-media {
  background: #13a613;
  border-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__AccuracyTotal .bucket-media > div {
  height: unset;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DaysLeft:hover {
  transform: scale(1.05);
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DaysLeft {
  display: none;
  min-width: 50px;
  left: 0;
  bottom: -1px;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 8px;
  position: relative;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DaysLeft .C .box__TillDays {
  display: inline-block;
  cursor: pointer;
  display: none;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DaysLeft .C .box__TillDays .D {
  position: absolute;
  left: 0;
  top: -20px;
  color: white;
  font-size: 1rem;
  white-space: nowrap;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DaysLeft .C button {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 1px 14px;
  /*position: relative;
  bottom: 4px;
  left: 22px;*/
  border-radius: 5px;
  background: linear-gradient(#ffa346, #f3761b);
  box-shadow: 0 10px 10px 0 rgba(74, 74, 74, 0.1);
  margin-left: 10px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .item__DaysLeft .C button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results {
  font-size: 22px;
  color: white;
  font-weight: 700;
  text-align: center;
  flex: 1;
  margin-right: 50px;
  margin-bottom: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results .box__SpeedGoal {
  height: 40px;
  width: 44px;
  background: white;
  margin-right: 20px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results .box__SpeedGoal img {
  margin: 0;
  height: 100%;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results span {
  position: relative;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results span img {
  position: absolute;
  right: -60px;
  top: -8px;
  transition: transform 0.8s ease;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results span img.rotated {
  transform: rotate(180deg);
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results span:hover {
  cursor: pointer;
  transform: scale(1.1);
  text-decoration: underline;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard .panelRes .title__Results span:hover img {
  transform: rotate(720deg) scale(1.2);
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard h3 {
  font-size: 22px;
  color: white;
  font-weight: 700;
  text-align: left;
  margin: unset;
  margin-bottom: 15px;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard h3 span {
  position: relative;
  color: #d31a1a;
  margin-left: 50px;
  text-decoration: underline;
}
.PlaceResults .blockResults .ListDashboard .BlockDashboard h3 span:hover {
  text-decoration: unset;
  transform: translateY(2px);
  opacity: 0.7;
  cursor: pointer;
}

.end_float,
.end-float {
  clear: both;
}

.basket-place {
  width: 30%;
  font-size: 30px;
  display: inline-block;
  float: left;
}
.basket-place .letter-cont {
  text-align: center;
  min-height: 20px;
  font-weight: bold;
  color: #1818b9;
  text-transform: uppercase;
  position: relative;
}
.basket-place .letter-cont span {
  position: absolute;
  right: 30px;
  top: 5px;
  font-size: 25px;
  color: green;
}
.basket-place .letter-cont span.left {
  right: unset;
  left: 35px;
  font-weight: normal;
}
.basket-place .basket-cont {
  height: 150px;
  text-align: center;
  position: relative;
  /*.basket-num{
    position: absolute;
    left: 10px;
    //transform: translateX(-50%);
    bottom: 110px;
    border: solid;
    //transform: translateY(-50%);
    font-size: 150px;
    font-weight: bold;
    opacity: 0.4;
    color: #5db6f0;
  }*/
}
.basket-place .basket-cont .basket-box {
  position: absolute;
  width: 120px;
  height: 145px;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  border: solid 20px #5db6f0;
  border-radius: 0 0 20px 20px;
  border-top: 1px;
  box-sizing: content-box;
  border-top: solid 6px #3c96c7;
  box-shadow: 1px 1px 3px 2px #6497e0;
}
.basket-place .basket-cont .basket-box img {
  height: 100%;
  width: 100%;
}
.basket-place .basket-cont .basket-box .basket-num {
  font-size: 100px;
  font-weight: bold;
  opacity: 0.5;
  color: #5db6f0;
  height: 100%;
  position: relative;
  top: -20px;
}
.basket-place .basket-cont table {
  position: relative;
  margin: 10px auto;
}
.basket-place .basket-cont table td {
  width: 20px;
  height: 30px;
  line-height: 1;
  text-align: center;
  color: #1818b9;
}

.firstPanel { /*display: none;*/
  width: 768px;
  margin: 22px auto 60px auto;
  /*.end-float{
    clear:both;
  }*/
}
.firstPanel .level-place {
  width: 70%;
  display: inline-block;
  float: left;
  padding-left: 25px;
  /* .end-float{
     clear: both;
   }*/
}
.firstPanel .level-place .errors-cont {
  min-height: 15px;
  border: solid;
  font-size: 25px;
  margin-bottom: 14px;
}
.firstPanel .level-place .ch-cont {
  float: left;
  position: relative;
  top: 3px;
  right: 10px;
}
.firstPanel .level-place .ch-cont .abs-num {
  position: absolute;
  top: 30px;
  left: -25px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #28a4e9;
}
.firstPanel .level-place .ch-cont .abs-color {
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: 10px;
  right: 5px;
  text-align: center;
}
.firstPanel .level-place .ch-cont .abs-color .color-cont {
  display: inline-block;
}
.firstPanel .level-place .level-cont.last-basket .level-box .num-box {
  border-top: solid 4px transparent;
  box-shadow: 2px 2px 3px 0px #6497e0;
}
.firstPanel .level-place .level-cont {
  float: left;
}
.firstPanel .level-place .level-cont .current-cont {
  width: 85px;
  margin-right: 20px;
  margin-top: 15px;
  overflow: visible;
  color: #0c7ebd;
}
.firstPanel .level-place .level-cont .current-cont .speed-box {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.firstPanel .level-place .level-cont .current-cont .sign-box {
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}
.firstPanel .level-place .level-cont .level-box {
  width: 60px;
  display: inline-block;
  margin: 10px;
  font-size: 20px;
  color: #0c7ebd;
}
.firstPanel .level-place .level-cont .level-box .num-box {
  height: 70px;
  border: solid 12px #5db6f0;
  text-align: center;
  border-radius: 0 0 20px 20px;
  font-size: 25px;
  border-top: solid 4px #3c96c7;
  padding-top: 7px;
  box-shadow: 1px 1px 3px 2px #6497e0;
  font-weight: bold;
}
.firstPanel .level-place .level-cont .level-box .speed-box {
  height: 30px;
  text-align: center;
  padding-top: 6px;
}

.pro-box {
  font-weight: bold;
  color: #0c7ebd;
  padding-top: 15px;
}

.color-level-box {
  width: 14px;
  height: 10px;
  background: transparent;
  float: right;
  margin: 20px 2px 0;
  border-radius: 3px;
}

.testPanel .courseCont .progress-place {
  margin-top: 0;
}
.testPanel .course-cont {
  padding-bottom: 15px;
}
.testPanel .pro-box {
  padding-top: 10px;
}
.testPanel .row-layout {
  margin-left: 275px;
  font-size: 18px;
}
.testPanel .result-test {
  width: 70px;
  overflow: visible;
  margin: 1px 100px 0 30px;
  text-align: center;
  float: left;
}

.testPanel,
.layoutPanel,
.thirdPanel,
.secondPanel {
  width: 768px;
  margin: 0 auto;
  font-size: 22px;
  color: #0c7ebd;
}
.testPanel .titlePanel,
.layoutPanel .titlePanel,
.thirdPanel .titlePanel,
.secondPanel .titlePanel {
  font-size: calc(16px + 0.8vw);
  color: #0c7ebd;
  font-weight: bold;
  margin-bottom: calc(16px + 0.8vw);
  text-align: center;
  position: relative;
}
.testPanel .titlePanel .title-sound,
.layoutPanel .titlePanel .title-sound,
.thirdPanel .titlePanel .title-sound,
.secondPanel .titlePanel .title-sound {
  display: inline-block;
  position: relative;
  font-size: calc(16px + 0.8vw);
  color: #0c7ebd;
  font-weight: bold;
}
.testPanel .titlePanel .title-sound .abs-sound,
.layoutPanel .titlePanel .title-sound .abs-sound,
.thirdPanel .titlePanel .title-sound .abs-sound,
.secondPanel .titlePanel .title-sound .abs-sound {
  position: absolute;
  right: -60px;
  top: 5px;
  cursor: pointer;
  display: inline-block;
}
.testPanel .titlePanel .title-sound .abs-scroll-up,
.layoutPanel .titlePanel .title-sound .abs-scroll-up,
.thirdPanel .titlePanel .title-sound .abs-scroll-up,
.secondPanel .titlePanel .title-sound .abs-scroll-up {
  position: absolute;
  right: -150px;
  bottom: 2px;
  top: unset;
  margin: 0 20px;
  cursor: pointer;
  display: block;
  display: inline-block;
}
.testPanel .courseCont,
.layoutPanel .courseCont,
.thirdPanel .courseCont,
.secondPanel .courseCont {
  font-size: 15px;
  position: relative;
  padding: 8px 0 24px;
}
.testPanel .courseCont .color-block,
.layoutPanel .courseCont .color-block,
.thirdPanel .courseCont .color-block,
.secondPanel .courseCont .color-block {
  position: absolute;
  top: 0;
  right: 0;
}
.testPanel .courseCont .color-block .sum-cont,
.layoutPanel .courseCont .color-block .sum-cont,
.thirdPanel .courseCont .color-block .sum-cont,
.secondPanel .courseCont .color-block .sum-cont {
  margin-right: 100px;
  font-size: 20px;
}
.testPanel .courseCont .color-block .color-cont,
.layoutPanel .courseCont .color-block .color-cont,
.thirdPanel .courseCont .color-block .color-cont,
.secondPanel .courseCont .color-block .color-cont {
  display: inline-block;
  position: relative;
  width: 80px;
  text-align: right;
}
.testPanel .courseCont .color-block .color-cont .rate-color,
.layoutPanel .courseCont .color-block .color-cont .rate-color,
.thirdPanel .courseCont .color-block .color-cont .rate-color,
.secondPanel .courseCont .color-block .color-cont .rate-color {
  position: absolute;
  top: 15px;
  right: -55px;
  margin-right: 14px;
  display: inline-block;
  color: #0c7ebd;
}
.testPanel .courseCont .color-block .color-cont .abs-speed,
.layoutPanel .courseCont .color-block .color-cont .abs-speed,
.thirdPanel .courseCont .color-block .color-cont .abs-speed,
.secondPanel .courseCont .color-block .color-cont .abs-speed {
  position: absolute;
  top: 13px;
  right: -70px;
  height: 20px;
  font-size: 16px;
}
.testPanel .courseCont .flag,
.layoutPanel .courseCont .flag,
.thirdPanel .courseCont .flag,
.secondPanel .courseCont .flag {
  display: block;
  position: absolute;
  border-left: 12px solid #e0e7ed;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
  left: 13px;
  top: 13px;
  border-radius: 5px;
  cursor: pointer;
}
.testPanel .courseCont .course-row,
.layoutPanel .courseCont .course-row,
.thirdPanel .courseCont .course-row,
.secondPanel .courseCont .course-row {
  margin-left: 55px;
  cursor: pointer;
  color: #0c7ebd;
  font-size: 22px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
}
.testPanel .courseCont .course-row .icon-sound,
.layoutPanel .courseCont .course-row .icon-sound,
.thirdPanel .courseCont .course-row .icon-sound,
.secondPanel .courseCont .course-row .icon-sound {
  position: absolute;
  right: -15px;
  top: 5px;
  height: 20px;
  width: 20px;
}
.testPanel .courseCont .course-row .repeat-box-layout,
.layoutPanel .courseCont .course-row .repeat-box-layout,
.thirdPanel .courseCont .course-row .repeat-box-layout,
.secondPanel .courseCont .course-row .repeat-box-layout {
  top: 3px;
}
.testPanel .courseCont .course-row .course-title,
.layoutPanel .courseCont .course-row .course-title,
.thirdPanel .courseCont .course-row .course-title,
.secondPanel .courseCont .course-row .course-title {
  min-width: 260px;
  position: relative;
  margin-right: 20px;
}
.testPanel .courseCont .course-row .course-title .abs-img-point,
.layoutPanel .courseCont .course-row .course-title .abs-img-point,
.thirdPanel .courseCont .course-row .course-title .abs-img-point,
.secondPanel .courseCont .course-row .course-title .abs-img-point {
  position: absolute;
  right: 20px;
  top: -10px;
  /* width: 30px;
   border: solid;*/
}
.testPanel .courseCont .course-row .course-title .abs-img-point img,
.layoutPanel .courseCont .course-row .course-title .abs-img-point img,
.thirdPanel .courseCont .course-row .course-title .abs-img-point img,
.secondPanel .courseCont .course-row .course-title .abs-img-point img {
  height: 54px;
}
.testPanel .courseCont .course-row .passed-box .course-rate,
.layoutPanel .courseCont .course-row .passed-box .course-rate,
.thirdPanel .courseCont .course-row .passed-box .course-rate,
.secondPanel .courseCont .course-row .passed-box .course-rate {
  min-width: 70px;
  visibility: hidden;
}
.testPanel .courseCont .course-row .passed-box .course-rate.is_visible,
.layoutPanel .courseCont .course-row .passed-box .course-rate.is_visible,
.thirdPanel .courseCont .course-row .passed-box .course-rate.is_visible,
.secondPanel .courseCont .course-row .passed-box .course-rate.is_visible {
  visibility: visible;
}
.testPanel .courseCont .course-row .passed-box > div,
.layoutPanel .courseCont .course-row .passed-box > div,
.thirdPanel .courseCont .course-row .passed-box > div,
.secondPanel .courseCont .course-row .passed-box > div {
  float: left;
}
.testPanel .courseCont .course-row > div,
.layoutPanel .courseCont .course-row > div,
.thirdPanel .courseCont .course-row > div,
.secondPanel .courseCont .course-row > div {
  float: left;
}
.testPanel .progress-place,
.layoutPanel .progress-place,
.thirdPanel .progress-place,
.secondPanel .progress-place {
  padding-left: 40px;
  margin: 20px 0;
  display: none;
}
.testPanel .progress-place .max-size-file,
.layoutPanel .progress-place .max-size-file,
.thirdPanel .progress-place .max-size-file,
.secondPanel .progress-place .max-size-file {
  font-weight: bold;
  padding-left: 40px;
  margin-bottom: 20px;
}
.testPanel .courseCont.active .course-title span,
.layoutPanel .courseCont.active .course-title span,
.thirdPanel .courseCont.active .course-title span,
.secondPanel .courseCont.active .course-title span {
  font-weight: bold;
}
.testPanel .courseCont.active .flag,
.layoutPanel .courseCont.active .flag,
.thirdPanel .courseCont.active .flag,
.secondPanel .courseCont.active .flag {
  border-left: 12px solid #0c7ebd;
}
.testPanel .courseCont.active .course-row .passed-box,
.layoutPanel .courseCont.active .course-row .passed-box,
.thirdPanel .courseCont.active .course-row .passed-box,
.secondPanel .courseCont.active .course-row .passed-box {
  visibility: hidden;
}
.testPanel .courseCont.open.active .flag,
.layoutPanel .courseCont.open.active .flag,
.thirdPanel .courseCont.open.active .flag,
.secondPanel .courseCont.open.active .flag {
  border-top: 12px solid #0c7ebd;
}
.testPanel .courseCont.open .flag,
.layoutPanel .courseCont.open .flag,
.thirdPanel .courseCont.open .flag,
.secondPanel .courseCont.open .flag {
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 12px solid #e0e7ed;
  top: 20px;
  left: 10px;
}
.testPanel .courseCont.open .progress-place,
.layoutPanel .courseCont.open .progress-place,
.thirdPanel .courseCont.open .progress-place,
.secondPanel .courseCont.open .progress-place {
  display: block;
}
.testPanel .graphCont,
.layoutPanel .graphCont,
.thirdPanel .graphCont,
.secondPanel .graphCont {
  display: none;
  width: 50%;
  height: 100px;
  border: solid;
}

/*
.blue-box.empty{

}*/
.blue-box.active {
  box-shadow: 1px 1px 3px 2px #6497e0;
}

.blue-box {
  float: left;
  border-radius: 5px;
  font-size: 21px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  position: relative;
  font-family: proximaSB, Arial, Tahoma, Verdana, sans-serif;
  background: #63bcfb;
  width: 108px;
  height: 72px;
  border: none;
  border-right: 1px solid #41a9e3;
  border-bottom: 1px solid #41a9e3;
  margin: 7px 20px 23px 7px;
  box-shadow: 0 0 0 4px rgba(6, 26, 38, 0.05);
}
.blue-box b {
  text-transform: uppercase;
}
.blue-box .color-box {
  height: 100%;
  border-radius: 5px;
}
.blue-box .ch-rate {
  line-height: 0;
  position: relative;
  top: 7px;
  left: 7px;
}
.blue-box .empty-box {
  border-radius: 5px;
  background: #d7d9dc url(/img/supertype/lock.png?v=1) no-repeat center 26px;
  height: 100%;
}

/*.courseCont.active .flag.blink{
  animation-name: flagblinker;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 1s;
}
@keyframes flagblinker {
  from {!*transform: scale(1.2);*!
    border-left: 12px solid #e0e7ed;
  }
  to {!*transform: scale(1);*!
    border-left: 12px solid #6BACED;
  }
}*/
.blue_box_blinker,
.blue-box.blink.active {
  animation-name: blinker;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
  animation-duration: 1s;
}

.blue-box.blink.active:hover {
  cursor: pointer;
}
.blue-box.blink.active:hover .color-box {
  transform: scale(1.2);
}

@keyframes blinker {
  from {
    transform: scale(1.02);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0.9;
  }
}
.element {
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2, end);
  animation-duration: 1s;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
/*@keyframes blinker {
  from { box-shadow: 1px 1px 3px 2px #6497e0; }
  to { box-shadow: -1px -1px 3px 2px #6497e0; }
}*/
.thirdPanel {
  /* ADD CONT */
  font-size: 22px;
  color: #0c7ebd;
  margin-top: 150px;
  /* ADD CONT OPENED*/
}
.thirdPanel .infoCont {
  margin: 30px 0 0 0;
  padding-bottom: 20px;
}
.thirdPanel .infoCont .text-set {
  text-indent: 40px;
  margin-bottom: 50px;
}
.thirdPanel .infoCont .only-book-info {
  background: #f9e550;
  text-indent: 40px;
  padding: 20px;
  border-radius: 50px;
}
.thirdPanel .infoCont .row-set {
  margin: 20px 20px 20px 40px;
  /*.switch-box{

    width: $size-120;
    height: $size-48;
    margin: $size-16 $size-16 0 0;

    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#5977b3,#5959b3);
    border-radius: 50px;

    .checkbox{
      position: relative;
      left: $size-6;

      label:hover{
        cursor:pointer;
      }

    }
    .checkbox:hover{
      cursor:pointer;
    }
  }

  .switch-box:hover{
    cursor: pointer;
  }*/
}
.thirdPanel .infoCont .row-set .checkbox-set {
  display: inline-block;
  position: relative;
  /*label{
    color: #0c7ebd;
    margin-left: 20px;
  }*/
}
.thirdPanel .infoCont .row-set .checkbox-set .ui.radio.checkbox label:after {
  background-color: #0c7ebd;
}
.thirdPanel .infoCont .row-set .checkbox-set .ui.toggle.checkbox input:checked ~ label:before {
  background-color: #0c7ebd !important;
}
.thirdPanel .infoCont .row-set .checkbox-set .ui.toggle.checkbox label:after {
  background-color: #0c7ebd !important;
}
.thirdPanel .infoCont .row-set .checkbox-set .ui.toggle.checkbox input:checked ~ label:after {
  background-color: #dce0ef !important;
}
.thirdPanel .infoCont .row-set .title-keyboard {
  display: inline-block;
  position: relative;
  bottom: 7px;
}
.thirdPanel .infoCont .row-set .title-set {
  display: inline-block;
  margin-left: 10px;
}
.thirdPanel .infoCont .row-set .half_opacity {
  opacity: 0.7;
}
.thirdPanel .infoCont .row-set .img-question {
  margin-left: 20px;
  display: inline-block;
  background: #ffed2d;
  border-radius: 50px;
  width: 20px;
  height: 30px;
  text-align: center;
}
.thirdPanel .infoCont .row-set .img-question:hover {
  background: #fdf065;
  cursor: pointer;
  transform: scale(1.2);
}
.thirdPanel .addCont {
  margin-top: 30px;
  position: relative;
  min-height: 50px;
}
.thirdPanel .addCont .flag {
  display: block;
  position: absolute;
  border-left: 12px solid #e0e7ed;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
  left: 13px;
  top: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.thirdPanel .addCont .add-button {
  position: absolute;
  top: 0;
  left: 30px;
}
.thirdPanel .addCont .add-field {
  display: none;
}
.thirdPanel .addCont .add-field input {
  width: 300px;
  padding: 3px 15px;
  margin-left: 40px;
  font-size: 22px;
  color: #0c7ebd;
  font-weight: bold;
}
.thirdPanel .addCont .add-field input::-moz-placeholder {
  font-weight: normal;
  opacity: 0.6;
}
.thirdPanel .addCont .add-field input::placeholder {
  font-weight: normal;
  opacity: 0.6;
}
.thirdPanel .addCont .create-book {
  display: block;
}
.thirdPanel .addCont .add-book {
  display: none;
}
.thirdPanel .addCont .text-add {
  margin: 30px 0 20px 40px;
  height: 300px;
}
.thirdPanel .addCont .text-add textarea {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #0b3a54;
  font-size: 18px;
  overflow-y: scroll;
}
.thirdPanel .addCont .text-add textarea::-moz-placeholder {
  opacity: 0.8;
}
.thirdPanel .addCont .text-add textarea::placeholder {
  opacity: 0.8;
}
.thirdPanel .addCont.opened .add-button {
  left: 400px;
}
.thirdPanel .addCont.opened .create-book {
  display: none;
}
.thirdPanel .addCont.opened .add-book {
  display: block;
}
.thirdPanel .addCont.opened .add-field {
  display: block;
}
.thirdPanel .courseCont .color-cont .pro-box {
  font-size: 20px;
  font-weight: normal;
}
.thirdPanel .courseCont.active .color-cont .pro-box {
  font-weight: bold;
}
.thirdPanel .courseCont.open .text-book {
  display: block;
}
.thirdPanel .courseCont.open .num-tasks,
.thirdPanel .courseCont.open .delete-book {
  display: block;
}
.thirdPanel .courseCont .text-book {
  display: none;
  text-indent: 40px;
  height: 300px;
  overflow-y: scroll;
  color: #0b3a54;
  font-size: 18px;
  padding: 20px;
  margin: 10px 0 20px 50px;
  /* textarea{
     width: 100%;
     height: 100%;
   }*/
}
.thirdPanel .courseCont .num-tasks {
  display: none;
  position: absolute;
  right: 60px;
  top: 19px;
  color: #0c7ebd;
}
.thirdPanel .courseCont button {
  position: absolute;
  right: 150px;
  top: 17px;
}
.thirdPanel .courseCont button:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.thirdPanel .courseCont .delete-book {
  display: none;
  position: absolute;
  right: 110px;
  top: 17px;
  width: 25px;
  margin-left: 20px;
}
.thirdPanel .courseCont .delete-book img {
  width: 100%;
}
.paymentPanel .layoutPanel {
  color: unset;
}
.paymentPanel .title-payment {
  border-bottom: 1px solid;
  padding-bottom: calc(3px + 0.15vw);
}
.paymentPanel .row-payment,
.paymentPanel .title-payment {
  display: flex;
  margin-bottom: calc(12px + 0.6vw);
  margin-top: calc(12px + 0.6vw);
}
.paymentPanel .row-payment > div,
.paymentPanel .title-payment > div {
  flex: 1;
  text-align: center;
}
.paymentPanel .row-payment .btn-payment,
.paymentPanel .title-payment .btn-payment {
  background: #97a9e1;
  display: inline-block;
  border-radius: calc(4px + 0.8vw);
}
.paymentPanel .row-payment .btn-payment .m25,
.paymentPanel .title-payment .btn-payment .m25 {
  white-space: nowrap;
  font-size: calc(12px + 0.6vw);
  font-weight: bold;
  margin-bottom: calc(2px + 0.1vw);
  margin-top: calc(4px + 0.2vw);
  padding: calc(4px + 0.2vw) calc(21px + 1vw);
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.paymentPanel .row-payment .btn-payment:hover,
.paymentPanel .title-payment .btn-payment:hover {
  opacity: 0.7;
  cursor: pointer;
}

.resultsPanel .title-result {
  border-bottom: 1px solid;
  padding-bottom: calc(3px + 0.15vw);
}
.resultsPanel .row-result,
.resultsPanel .title-result {
  display: flex;
  margin-bottom: calc(12px + 0.6vw);
  margin-top: calc(12px + 0.6vw);
}
.resultsPanel .row-result > div,
.resultsPanel .title-result > div {
  flex: 1;
  text-align: center;
}
.resultsPanel .flex-results {
  display: flex;
  flex-direction: row;
  margin-top: calc(35px + 1.7vw);
}
.resultsPanel .flex-results .row-res {
  flex: 1;
}
.resultsPanel .flex-results .row-res .title-res {
  border-bottom: 1px solid;
  padding-bottom: calc(3px + 0.15vw);
}
.resultsPanel .flex-results .row-res > div {
  text-align: center;
  margin-bottom: calc(12px + 0.6vw);
}

.resultsPanel {
  padding-top: 100px;
}
.resultsPanel h2 {
  text-align: center;
  font-size: calc(16px + 0.8vw);
  color: #0c7ebd;
  margin-bottom: 40px;
}

.groupPlace {
  position: relative;
  padding-top: 150px;
}
.groupPlace .sum-group {
  text-transform: lowercase;
  position: absolute;
  right: 40px;
  top: 0;
  color: #0c7ebd;
  font-size: 20px;
}

.layoutPanel {
  /*.repeat-box-layout{
    display: none;
  }*/
  /* .result-box-layout{
     display: inline-block;
   }*/
}
.layoutPanel .sum-cont {
  display: inline-block;
}
.layoutPanel .courseCont.open {
  /*.result-box-layout{
    display: none;
  }*/
}
.layoutPanel .courseCont.open .repeat-box-layout {
  display: inline-block;
}
.layoutPanel .progress-place {
  /*label{
    display: inline-block;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-size: calc(10px + 0.5vw);
    background: linear-gradient(90deg, #5977b3, #5959b3);
    color: #fff;
    margin-left: 15px;
    font-weight: normal;
    line-height: 1.5em;

    border-top-color: #fdf488;
    border-bottom-color: #f0c002;
    background-color: #f5d604;
    background-image: linear-gradient(to bottom, #fae811, #f5d604);
    opacity: 1;

  }*/
}
.layoutPanel .progress-place .row-layout.active {
  font-weight: bold;
}
.layoutPanel .progress-place .row-layout:hover .title-row {
  opacity: 0.8;
}
.layoutPanel .progress-place .row-layout {
  margin-left: 35px;
  color: #0c7ebd;
  font-size: 20px;
  margin-bottom: 20px;
}
.layoutPanel .progress-place .row-layout .title-row {
  min-width: 200px;
  display: inline-block;
  text-transform: lowercase;
  cursor: pointer;
}
.layoutPanel .progress-place .row-layout .title-row .car-box img {
  height: 40px;
}
.layoutPanel .progress-place .row-layout .stars-block {
  display: inline-block;
  position: relative;
  top: 4px;
}
.layoutPanel .progress-place .row-layout .stars-block .star-box {
  margin-right: 5px;
  display: inline-block;
  overflow: visible;
}
.layoutPanel .progress-place .row-layout .level-block {
  width: 100px;
  display: inline-block;
  position: relative;
  bottom: 18px;
}
.layoutPanel .progress-place .row-layout .level-block .color-level-box {
  width: 11px;
  height: 8px;
}
.layoutPanel .progress-place .row-layout .level-block .best-result {
  text-align: right;
  margin-right: 15px;
  position: relative;
  top: 9px;
}
.layoutPanel .progress-place .row-layout .level-block .best-result img {
  width: 20px;
}
.layoutPanel .progress-place .row-layout .level-block .abs-speed-panel {
  position: absolute;
  top: 14px;
  right: -70px;
  width: 30px;
  height: 20px;
  font-size: 12px;
}
.layoutPanel .progress-place .row-layout .btn-row {
  display: inline-block;
  margin-left: 30px;
}
.layoutPanel .progress-place .row-layout .btn-row .btn-premium a {
  font-size: 14px;
}

.adsensePanel {
  width: 768px;
  margin: 100px auto 100px auto;
}

.progressPanel { /*display: none;*/
  width: 768px;
  height: 100px;
  margin: 0px auto -20px auto;
  position: relative;
}
@media (min-width: 1400px) {
  .progressPanel {
    margin-top: calc(5px + 0.5vw);
  }
}
.progressPanel .button-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.progressPanel .abs-close.disabled_close {
  opacity: 0.7;
}
.progressPanel .abs-close {
  right: -62px;
  width: 70px;
  top: -6px;
  position: absolute;
  padding-left: 10px;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
}
.progressPanel .abs-close img {
  height: 25px;
}
.progressPanel .abs-close img:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  cursor: pointer;
  opacity: 1;
}
.progressPanel .abs-down {
  right: -30px;
  top: 24px;
  position: absolute;
}
.progressPanel .abs-down img {
  width: 24px;
}
.progressPanel .abs-down:hover {
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  cursor: pointer;
}

.running-place {
  height: 75%;
  width: 100%;
  background-color: white;
  padding-top: 10px;
  border-top: 1px solid #d1d1d1;
  position: relative;
  overflow: hidden;
}
.running-place .man-box {
  height: 64px;
  display: inline-block;
  position: relative;
}
.running-place .man-box .color-level-box {
  left: 24px;
  top: -5px;
}
.running-place .second-speed {
  position: absolute;
  bottom: 24px;
  left: 85px;
  display: inline-block;
  font-style: italic;
  font-size: 17px;
  font-weight: bold;
}
.running-place img {
  height: 100%;
  z-index: 1;
}
.running-place .color-level-box {
  position: absolute;
  top: 14px;
}
.running-place .color-level-box .speed-box {
  position: relative;
}
.running-place .color-level-box .speed-box .abs-speed {
  top: -27px;
  left: -13px;
  width: 40px;
  height: 20px;
  text-align: center;
  position: absolute;
  font-size: 18px;
}
.running-place .hidden {
  visibility: hidden;
}
.running-place .forth {
  color: #63bcfb;
  background: #63bcfb;
}
.running-place .third {
  color: #4bbd4b;
  background: #4bbd4b;
}
.running-place .second {
  color: orange;
  background: orange;
}
.running-place .first {
  color: hotpink;
  background: hotpink;
}

.cardField { /*display: none;*/
  width: 768px;
  height: 85px;
  margin: 20px auto 0 auto;
}
.cardField .card-place {
  height: 100%;
  width: 100%;
  text-align: center;
  /*.card:hover{
    transform: rotate3d(0, 1, 0, 180deg);
  }*/
}
.cardField .card-place .hidden {
  visibility: hidden;
}
.cardField .card-place .card {
  height: 85px;
  width: 65px;
  border-radius: 10px;
  border: solid 1px #6dc0fe;
  display: inline-block;
  transition: transform 0.1s linear;
  background-color: #d4f0fe;
  color: #6674ff;
  font-size: 54px;
  /*span{
    border: solid 1px;
    position: absolute;
    top: 50%;
    //-ms-transform: translateY(-50%);
    transform: translateY(-50%);


  }*/
}

.RegisterButton {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #f3761b;
  box-shadow: 0 2px #bf5507;
  color: #f3761b;
  font-size: 14px;
  padding: 2.5px 20px 1.5px;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 0.8);
  font-family: quicksand, sans-serif;
  font-weight: 700;
}

.RegisterButton:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.PlacePlan h2 {
  font-size: calc(21px + 1vw);
  font-weight: bold;
  margin-bottom: calc(8px + 0.4vw);
  margin-top: calc(8px + 0.4vw);
  padding: 0 calc(8px + 0.4vw);
  background-image: linear-gradient(-90deg, #255878, #db1010);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.PlacePlan h2 span {
  color: black;
}

.startField .plan-fact {
  display: inline-block;
  width: calc(350px + 17vw);
  font-size: 18px;
  display: none;
}

.startField .start-modal .img-learn img {
  width: 80%;
}
.startField .start-modal .img-learn img:hover {
  cursor: pointer;
  opacity: 0.8;
}
.startField .start-modal .lesson-place {
  border-top: 1px solid #ebe6e6;
  border-bottom: 1px solid #ebe6e6;
  background-color: #f9f7f7;
  padding: 10px 10px;
  font-size: 16px;
}
.startField .start-modal .lesson-place ol {
  margin: 0;
  padding: 0 20px 0 40px;
}
.startField .start-modal .lesson-place ol li {
  text-align: justify;
  padding: 5px;
  color: #0a4e76;
  list-style-type: none;
}
.startField .start-modal .img-modal {
  height: 100px;
  margin: 20px 0;
  position: relative;
}
.startField .start-modal .img-modal img:hover {
  cursor: pointer;
  opacity: 0.8;
}
.startField .start-modal .img-modal .abs-hand {
  position: absolute;
  height: 76px;
  top: 10px;
}
.startField .start-modal .img-modal .abs-hand img {
  height: 100%;
}
.startField .start-modal .img-modal .left {
  left: 40px;
}
.startField .start-modal .img-modal .right {
  right: 40px;
}
.startField .start-modal .img-modal img {
  height: 100%;
}
.startField .start-modal .keyFieldInside {
  font-size: 26px;
  position: relative;
  margin-top: 30px;
  /*.fInput {
    background-color: transparent;
    padding: 0 20px 0 20px;
    position: absolute;
    left: 0;
    width: 100%;
    //border: none;
    margin: 0;
    outline: 0;
    top: -10px;
    overflow: hidden;
    color: transparent;
    height: 1px;
    z-index: 5;
  }*/
}
.startField .start-modal .keyFieldInside .fields .line-cont {
  display: inline-block;
  padding: 0 30px;
  border: solid 1px #c0bfbf;
  min-width: 50%;
}
.startField .start-modal .keyFieldInside .fields .line-cont .f2 {
  white-space: pre;
  display: inline;
  color: #4f4f4f;
  letter-spacing: 0.03ex;
  position: relative;
}
.startField .start-modal .keyFieldInside .fields .line-cont .f1 {
  white-space: pre;
  display: inline;
  color: #cedee5;
  letter-spacing: 0.03ex;
  border-collapse: collapse;
  empty-cells: show;
  line-height: 39px;
  text-indent: 0px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  position: relative;
}
.startField .start-modal .keyFieldInside .fields .line-cont .fCursor {
  white-space: pre;
  display: inline;
  border-right: 1px solid #626262;
  padding: 0;
  visibility: hidden;
  position: relative;
}
.startField .start-modal .keyFieldInside .fInput {
  padding: 0 20px 0 20px;
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  outline: 0;
  overflow: hidden;
  height: 1px;
  z-index: 5;
  top: -1px;
  opacity: 0;
  /*height: 41px;
  opacity: 1;
  border: solid;
  width: 150px;*/
}
.startField .start-modal .btn-start {
  justify-content: center;
  position: relative;
  top: 7px;
}
.startField .start-modal .btn-start a {
  width: 50%;
  color: #0c7ebd;
  font-weight: bold;
  cursor: pointer;
}

.startField {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1300px) {
  .startField .start-modal {
    margin-top: 10px !important;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
}
@media (max-width: 1100px) {
  .startField .start-modal {
    margin-top: -20px !important;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
}
.startField .start-modal.not_modal {
  background: unset;
  box-shadow: unset;
  margin-top: 100px;
  margin-top: calc(50px + 2.5vw);
}
.startField .start-modal {
  width: 620px;
  width: calc(350px + 17vw);
  display: inline-block;
  background: #fff;
  text-align: center;
  border-radius: 10px;
  box-shadow: #3ca5f2 0 0 30px;
  margin-top: 25px;
  position: relative;
}
.startField .start-modal .modal__BtnErrors {
  position: absolute;
  right: -90px;
  top: 60px;
}
.startField .start-modal .modal__BtnErrors::after {
  white-space: normal;
  width: 600px;
}
.startField .start-modal .modal__BtnErrors:hover {
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.startField .start-modal .diagonal-strike {
  position: relative;
  /* padding: 4px;
   font-size: 24px;
   color: black;*/
}
.startField .start-modal .modal__Strike {
  position: absolute;
  top: 90px;
  right: -110px;
  width: 100px;
  height: 2px;
  background: red;
  background: blue;
  transform: rotate(-50deg);
  transform-origin: center;
}
.startField .start-modal .modal__BoxPlace {
  position: absolute;
  right: -107px;
  top: 145px;
  display: flex;
  flex-direction: column;
  width: 80px;
  z-index: 2;
}
.startField .start-modal .modal__BoxPlace .A1 {
  font-size: 20px;
  text-align: left;
  overflow: visible;
  color: #0f6da0;
  font-weight: bold;
}
.startField .start-modal .modal__BoxPlace .A2:hover {
  cursor: pointer;
  transform: scale(1.1);
  animation: unset;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content {
  display: flex;
  flex-direction: column;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content .B1 {
  padding: 7px;
  background: #ffde0e;
  color: #216488;
  font-weight: bold;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content .B2 {
  display: flex;
  height: 300px;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content .B2 .content__Arr {
  width: 100%;
  padding: 15px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content .B2 .content__Arr .C {
  color: #216488;
  font-size: 26px;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content .B2 .content__Arr span {
  margin-right: 4px;
}
.startField .start-modal .modal__BoxPlace .A2:hover .box__Content .B2 .content__Arr span i {
  color: #c61111;
  font-weight: bold;
  font-style: normal;
}
.startField .start-modal .modal__BoxPlace .A2.empty_box .box__Number {
  display: none;
}
.startField .start-modal .modal__BoxPlace .A2.empty_box .img-empty {
  display: block;
}
.startField .start-modal .modal__BoxPlace .A2.empty_box .img-full {
  display: none;
}
.startField .start-modal .modal__BoxPlace .A2 {
  /*  animation: floatY2 2s
    ease-in-out infinite;*/
  animation: floatXY 2s ease-in-out infinite;
  margin-bottom: 10px;
  position: relative;
}
.startField .start-modal .modal__BoxPlace .A2 .img-empty {
  display: none;
  transform: scale(0.5);
}
.startField .start-modal .modal__BoxPlace .A2 .box__Number {
  position: absolute;
  height: 75%;
  width: 85%;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.startField .start-modal .modal__BoxPlace .A2 .box__Content {
  position: absolute;
  right: 135px;
  /* min-width: 200px;
   min-height: 155px;*/
  border: solid 1px #ffce06;
  background: #f8f7dc;
  display: none;
  width: 500px;
  box-shadow: #ffce06 0 0 0 2px;
  border-radius: 5px;
}
.startField .start-modal .modal__BoxPlace .A2 img {
  height: 80px;
}
.startField .start-modal .modal__Accuracy {
  position: absolute;
  right: -83px;
  top: -10px;
}
.startField .start-modal .modal__Accuracy .bucket-media {
  background: #13a613;
  border-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transform: scale(1.1);
}
.startField .start-modal .modal__Accuracy .bucket-media > div {
  height: unset;
}
.startField .start-modal .roll-btn:hover {
  transform: scale(1.1);
  cursor: pointer;
  font-weight: bold;
}
.startField .start-modal .roll-btn {
  display: none;
  width: 83px;
  position: absolute;
  top: -70px;
  right: -90px;
}
.startField .start-modal .roll-btn .roll-block {
  position: relative;
  /* width:100%;
   height: 100%;
   border:solid;*/
}
.startField .start-modal .roll-btn .roll-block img {
  /*  position: absolute;
    top: 0;
    left: 0;*/
  width: 100%;
}
.startField .start-modal .roll-btn .roll-block .title-plan {
  position: absolute;
  top: -3px;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.startField .start-modal h3 {
  font-size: 20px;
  margin: 10px 0 10px;
  color: #0c7ebd;
}
.startField .start-modal .start-place {
  padding: 0 30px;
}
.startField .start-modal .start-place h4 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #0d6da2;
}
.startField .start-modal .start-place p {
  text-align: left;
  font-size: 1.2rem;
  color: #0d6da2;
  font-weight: bold;
}
.startField .start-modal .abs-man-gif {
  position: absolute;
  left: 25px;
  top: -17px;
  height: 64px;
}
.startField .start-modal .PlaceModalTitle {
  height: 100px;
  position: relative;
}
.startField .start-modal .PlaceModalTitle .blockRegisterModal {
  position: absolute;
  right: -170px;
  top: 10px;
  background: linear-gradient(#ffa346, #f3761b);
  box-shadow: 0 10px 10px 0 rgba(74, 74, 74, 0.1);
  color: white;
  border-radius: 10px;
  font-weight: bold;
  padding: 10px 20px;
  animation: floatY 2s ease-in-out infinite;
  z-index: 1;
}
.startField .start-modal .PlaceModalTitle .blockRegisterModal .item1__RegisterModal .C2 {
  margin: 5px;
  font-size: 20px;
}
.startField .start-modal .PlaceModalTitle .star1, .startField .start-modal .PlaceModalTitle .star2, .startField .start-modal .PlaceModalTitle .star3, .startField .start-modal .PlaceModalTitle .star4, .startField .start-modal .PlaceModalTitle .star5, .startField .start-modal .PlaceModalTitle .star6 {
  position: absolute;
  bottom: 15px;
  height: 30px;
  animation: floatY 2s ease-in-out infinite;
}
.startField .start-modal .PlaceModalTitle .star1 {
  left: 10%;
  animation-delay: 0s;
}
.startField .start-modal .PlaceModalTitle .star2 {
  left: 25%;
  animation-delay: 0.2s;
}
.startField .start-modal .PlaceModalTitle .star3 {
  left: 40%;
  animation-delay: 0.4s;
}
.startField .start-modal .PlaceModalTitle .star4 {
  right: 40%;
  animation-delay: 0.6s;
}
.startField .start-modal .PlaceModalTitle .star5 {
  right: 25%;
  animation-delay: 0.8s;
}
.startField .start-modal .PlaceModalTitle .star6 {
  right: 10%;
  animation-delay: 1s;
}
.startField .start-modal .man-place {
  position: relative;
  padding: 10px;
  display: flex;
  flex-direction: row;
}
.startField .start-modal .man-place .title-modal {
  flex: 1;
  height: 50px;
  font-weight: bold;
  font-size: 22px;
  color: rgb(12, 126, 189);
}
.startField .start-modal .man-place .title-modal span:hover {
  cursor: pointer;
  opacity: 0.7;
  border-bottom: unset;
}
.startField .start-modal .man-place .man-box {
  height: 64px;
  display: inline-block;
  position: relative;
  right: 10px;
}
.startField .start-modal .man-place .man-box .color-level-box {
  position: absolute;
  left: 25px;
  top: -5px;
}
.startField .start-modal .man-place .man-box .speed-level {
  position: absolute;
  left: 35px;
  top: -10px;
  z-index: 1;
}
.startField .start-modal .man-place .man-box img {
  height: 100%;
}
.startField .start-modal .green {
  background: #bfe04f;
  color: #fff;
  padding: 6px 0;
  text-align: center;
  background: linear-gradient(90deg, #bfe04f, #c7df9b);
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 44px;
}
.startField .start-modal .green img {
  height: 100%;
}
.startField .start-modal .green .res-second {
  font-weight: bold;
  font-size: 50px;
}
.startField .start-modal .green .win-current {
  display: none;
}
.startField .start-modal .yellow.green {
  background: #ffde0e;
  color: #0e6596;
}
.startField .start-modal .yellow.green .res-current {
  font-weight: bold;
  font-size: 50px;
}
.startField .start-modal .yellow.green .res-second {
  font-weight: normal;
  font-size: 44px;
}
.startField .start-modal .yellow.green .win-current {
  display: block;
}
.startField .start-modal .yellow.green .win-second {
  display: none;
}
.startField .start-modal .running-place {
  padding-top: 40px;
}
.startField .start-modal .running-place .color-level-box {
  top: 40px;
}
.startField .start-modal > span {
  display: inline-block;
  color: #94a2aa;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.375;
}
.startField .start-modal h4 {
  color: #9bb641;
  margin: 20px;
  font-size: 32px;
  font-weight: 400;
  padding: 0 20px;
  word-wrap: break-word;
  animation: floatY 2s ease-in-out infinite;
}
.startField .start-modal h4 span {
  text-transform: uppercase;
}
.startField .start-modal .txt {
  width: 346px;
  color: #48b8f3;
  font-size: 18px;
  margin: 0 auto;
}
.startField .start-modal .block-btn-modal {
  width: 100%;
  border: solid;
}
.startField .start-modal .btn-modal.active a {
  box-shadow: #b9dc45 0 0 0 4px;
}
.startField .start-modal .btn-modal.yellow.active a {
  box-shadow: #ffce06 0 0 0 4px;
}
.startField .start-modal .btn-modal.yellow a {
  color: #0e6596;
  border-top: 1px solid #fff696;
  border-bottom: 1px solid #ffce06;
  background-color: #ffde0e;
  background-image: linear-gradient(to bottom, #ffed2d, #ffde0e);
}
.startField .start-modal .place-btn-next {
  display: flex;
  position: relative;
  margin: 30px;
  justify-content: center;
  z-index: 1;
}
.startField .start-modal .place-btn-next .PlaceMan {
  height: 80px;
  display: flex;
  position: relative;
  top: 10px;
}
.startField .start-modal .place-btn-next .PlaceMan .bucket-media {
  top: -20px;
}
.startField .start-modal .place-btn-next .PlaceMan .bucket-media.black {
  border-color: #8d6c32;
  background: linear-gradient(135deg, #b49d74, #bc923f);
}
.startField .start-modal .place-btn-next .blockTypeNext {
  display: none;
  margin-right: 20px;
  border: solid #0c7ebd 1px;
}
.startField .start-modal .place-btn-next .blockTypeNext .box-types-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3px;
  max-width: 300px; /* исходная ширина (или любое значение побольше) */
  overflow: hidden;
  transition: max-width 0.3s ease, padding 0.3s ease;
  white-space: nowrap;
}
.startField .start-modal .place-btn-next .blockTypeNext .box-types-next.collapsed {
  max-width: 26px;
  padding: 0;
}
.startField .start-modal .place-btn-next .blockTypeNext .box-close-next {
  width: 30px;
  height: 100%;
  border-left: 1px solid #0c7ebd;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.startField .start-modal .place-btn-next .blockTypeNext .box-close-next img {
  position: relative;
  left: 5px;
}
.startField .start-modal .place-btn-next .blockTypeNext .box-close-next img.rotated {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
  left: -2px;
}
.startField .start-modal .option-next {
  display: inline-block;
  font-size: 16px;
  position: relative;
  bottom: 6px;
  opacity: 0.8;
  color: #0c7ebd;
  /* img{
       position: relative;
       top: 6px;
   }*/
}
.startField .start-modal .option-next .icon-type-next {
  width: 30px;
  display: inline-block;
  /*background-image: url(/img/supertype/radio_btn.svg);
  background-size: contain;
  background-repeat: no-repeat;*/
}
.startField .start-modal .option-next .icon-type-next img {
  position: relative;
  top: 6px;
}
.startField .start-modal .option-next .icon-type-next img:nth-of-type(2) {
  display: inline;
}
.startField .start-modal .option-next .icon-type-next img:nth-of-type(1) {
  display: none;
}
.startField .start-modal .option-next.active {
  font-weight: bold;
  opacity: 1;
}
.startField .start-modal .option-next.active .icon-type-next img:nth-of-type(1) {
  display: inline;
}
.startField .start-modal .option-next.active .icon-type-next img:nth-of-type(2) {
  display: none;
}
.startField .start-modal .option-next:hover {
  opacity: 1;
  cursor: pointer;
}
.startField .start-modal .btn-modal.abs_again {
  position: absolute;
  bottom: -64px;
  right: -64px;
}
.startField .start-modal .btn-modal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 70px;
}
.startField .start-modal .btn-modal a {
  display: inline-block;
  padding: 7px 20px;
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.5em;
  font-weight: bold;
  color: #0c7ebd;
  margin: unset;
  box-shadow: rgba(99, 121, 133, 0.14) 0 0 0 4px;
  font-size: 16px;
  background-color: #bfe04f;
  background-image: linear-gradient(to bottom, #bfe04f, #c7df9b);
  position: relative;
}
.startField .start-modal .btn-modal a:hover {
  cursor: pointer;
  background-image: unset;
}
.graphPanel {
  padding-top: 150px;
}
.graphPanel h2 {
  font-size: calc(16px + 0.8vw);
  color: #0c7ebd;
  font-weight: bold;
  margin-bottom: calc(21px + 1vw);
  text-align: center;
}

.chart-box { /*display: none;*/
  width: 768px;
  margin: 0 auto 0 auto;
  position: relative;
  padding: 20px 20px 20px 20px;
  background-color: white;
  border-radius: 10px;
}
.btn-pay {
  background: #ffc439;
  padding: 5px 25px;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  border-radius: 5px;
  color: #2d2d87;
  font-size: 24px;
  position: relative;
  z-index: 1;
}

.bottom_secrets {
  right: 28% !important;
}

#bottom_deadline {
  display: none;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  right: 13%;
}

.bottom_secrets,
.bottom_deadline {
  color: red;
  background: #ffc439;
  cursor: pointer;
  border-radius: 7px;
  position: relative;
  display: flex;
}
.bottom_secrets .ItemCena,
.bottom_deadline .ItemCena {
  position: relative;
  padding: 4px 11px 0 10px;
}
.bottom_secrets .ItemCena .abs-sum,
.bottom_deadline .ItemCena .abs-sum {
  font-weight: bold;
  color: blue;
}
.bottom_secrets .ItemTitle,
.bottom_deadline .ItemTitle {
  background: #ffc439;
  border-radius: 5px;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  display: flex;
  padding-top: 12px;
}
.bottom_secrets .ItemTitle img,
.bottom_deadline .ItemTitle img {
  height: 50px;
}
.bottom_secrets .ItemTitle .img-maestro,
.bottom_deadline .ItemTitle .img-maestro {
  margin-left: 10px;
}
.bottom_secrets .ItemDeadline,
.bottom_deadline .ItemDeadline {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}
.bottom_secrets .ItemDeadline .abs-full-sum,
.bottom_deadline .ItemDeadline .abs-full-sum {
  /*position: absolute;
  right: 1px;
  top: 1px;*/
}
.bottom_secrets .ItemDeadline .deadline-bottom,
.bottom_deadline .ItemDeadline .deadline-bottom {
  font-size: 16px;
  color: #9b0311;
  width: 67px;
}
.bottom_secrets .text-free-deadline,
.bottom_deadline .text-free-deadline {
  color: blue;
  text-decoration: underline;
  font-size: 16px;
}
.bottom_secrets .cena,
.bottom_deadline .cena {
  position: relative;
}
.bottom_secrets .cena:before,
.bottom_deadline .cena:before {
  border-bottom: 2px solid #c56a6a;
  position: absolute;
  content: "";
  width: 150%;
  height: 60%;
  left: -31%;
  transform: rotate(-20deg);
}
.bottom_secrets .abs-arrow-deadline,
.bottom_deadline .abs-arrow-deadline {
  position: absolute;
  right: 0;
  bottom: 0px;
}
.bottom_secrets .abs-arrow-deadline img,
.bottom_deadline .abs-arrow-deadline img {
  transform: rotate(180deg);
}

.bottom_deadline:hover,
.bottom_secrets:hover {
  cursor: pointer;
  font-weight: bold;
  transform: scale(1.2);
}
.bottom_deadline:hover .text-free-deadline,
.bottom_secrets:hover .text-free-deadline {
  text-decoration: unset;
}
.bottom_deadline:hover .abs-arrow-deadline,
.bottom_secrets:hover .abs-arrow-deadline {
  position: absolute;
  right: 0;
  bottom: 5px;
}
.bottom_deadline:hover .abs-arrow-deadline img,
.bottom_secrets:hover .abs-arrow-deadline img {
  transform: rotate(180deg);
}
#help {
  bottom: 0;
  color: #fff;
  position: fixed;
  z-index: 1500;
  background-color: #0d8de6;
  right: 0;
  padding-top: 10px;
  border-radius: 5px 0 0 5px;
  font-size: calc(8px + 0.8vw);
  font-weight: bold;
  /* height: $len-120;
   width: $len-120;*/
  transition: height 1.5s ease;
  opacity: 0.8;
  text-transform: uppercase;
  text-align: center;
  height: 60px;
}
#help span {
  display: inline-block;
  width: 100%;
  text-align: center;
  height: 32px;
  height: calc(18px + 0.9vw);
}
#help img {
  margin-bottom: 10px;
  padding: 7px;
  width: 45px;
}

#help:hover {
  opacity: 1;
  cursor: pointer;
}
#help:hover span {
  opacity: 1;
}
@media (min-width: 700px) {
  #help:hover {
    height: calc(300px + 15vw);
  }
}
#scrollUpId {
  top: 50%;
  position: fixed;
  right: calc(14% - 100px);
  z-index: 1;
}
#scrollUpId .scrollBig,
#scrollUpId .scrollDown,
#scrollUpId .scrollUp {
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url(/img/arrow_up.png) no-repeat 50% 50%;
  background-color: #0d8de6;
}
#scrollUpId .place-scroll-big {
  position: relative;
  height: 1px;
}
#scrollUpId .place-scroll-big .scrollBig {
  position: absolute;
  top: 10px;
  left: 34px;
  width: 40px;
  height: 40px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer {
  display: inline-block;
  position: absolute !important;
  left: -30px;
  top: 150px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .price-box {
  font-size: 30px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .price-box .cena {
  white-space: nowrap;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .price-box .price-bold {
  font-size: 30px !important;
  margin-left: 15px !important;
  white-space: nowrap;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .buy-block {
  margin-top: 20px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .buy-block .buy-box {
  right: 30px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .buy-block .buy-box button a {
  font-size: 20px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .buy-block .buy-box span {
  font-size: 20px;
  right: -71px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .buy-block .buy-box img {
  width: 95px;
  right: -85px;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .life-time {
  display: none;
}
#scrollUpId .place-scroll-big .PlaceRightOffer .deadline-place {
  text-align: center;
  font-size: 20px;
  color: #9b0311;
  display: block;
}
#scrollUpId .place-scroll-big .place-btn-go {
  display: none;
  height: 50px;
  position: absolute !important;
  left: -30px;
  top: -150px;
}
#scrollUpId .place-scroll-big .place-btn-go a {
  background: #0c7ebd;
  text-align: center;
}
#scrollUpId .place-scroll-big .place-btn-go:hover {
  opacity: 0.8;
}
#scrollUpId .scrollDown {
  transform: scaleY(-1);
  margin-top: 5px;
  position: relative;
}
#scrollUpId .scrollBig:hover,
#scrollUpId .scrollDown:hover,
#scrollUpId .scrollUp:hover {
  opacity: 0.8;
  cursor: pointer;
}

.SupperBody {
  position: relative;
  /*.abs-blank-first{
      position: absolute;
      height: 35px;
      //border:solid;
      width: 100%;
      top: 54px;
      z-index:100;
  }*/
}
.SupperBody .abs-blank {
  position: absolute;
  height: 30px;
  width: 100%;
  top: -18px;
  z-index: 100;
}
.SupperBody .hint {
  position: fixed;
  height: 0;
  right: 0;
  top: 70px;
  z-index: 102;
}
.SupperBody .hint .reportDiv {
  font-weight: 700;
  font-size: 18px;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  background-image: linear-gradient(to bottom, #6cc8fc, #61b9fa);
  padding: 7px 16px 6px;
  margin-right: 31px;
  top: 180px;
  right: -50%;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  z-index: 102;
}
.SupperBody .btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0;
  font-size: 15px;
}
.SupperBody .btn-sign-up {
  border: none;
  border-top: 1px solid #74cdfb;
  color: #fff;
  padding: 6px 15px 7px !important;
  margin-top: -1px;
  background-color: #46a1da;
  box-shadow: #46a1da 0 1px 2px;
  text-shadow: 0 -1px 1px #a9abad;
}
.SupperBody .btn-login {
  padding: 6px 15px 7px !important;
  border: solid 1px #0db9f0;
  box-shadow: #2c93d4 0 1px 2px;
  background: #92d7fa;
}
.SupperBody .box-offer .price-box {
  /* position: absolute;
   top: 0;
   right: 7%;*/
  font-size: 50px;
  color: #255878;
  display: flex;
  justify-content: center;
}
.SupperBody .box-offer .price-box .price-bold {
  margin-left: 70px;
  font-weight: bold;
  font-size: 44px;
  color: #aa2323;
}
.SupperBody .box-offer .price-box .cena {
  position: relative;
}
.SupperBody .box-offer .price-box .cena:before {
  border-bottom: 2px solid red;
  position: absolute;
  content: "";
  width: 170%;
  height: 60%;
  left: -50%;
  transform: rotate(-20deg);
}
.SupperBody .box-offer .buy-block {
  margin-top: 36px;
  text-align: center;
}
.SupperBody .box-offer .buy-block .buy-box {
  display: inline-block;
  position: relative;
  right: 7%;
}
.SupperBody .box-offer .buy-block .buy-box button {
  background: transparent;
}
.SupperBody .box-offer .buy-block .buy-box button a {
  padding: 0 30px;
  font-size: 30px;
  font-weight: bold;
  margin: 0;
}
.SupperBody .box-offer .buy-block .buy-box img {
  position: absolute;
  right: -114px;
  top: -7px;
}
.SupperBody .box-offer .buy-block .buy-box span {
  position: absolute;
  right: -99px;
  top: -5px;
  font-size: 30px;
  font-weight: bold;
  color: #ffde0e;
}
.SupperBody .box-offer .life-time {
  text-align: center;
  font-weight: bold;
  font-style: italic;
}

.SupperBody #slide_info .slideCont {
  border-color: #64bdfa;
}
.SupperBody #slide_info .slideCont .message-place {
  color: #0c7ebd;
  /* .shake {
       animation: shake 0.5s ease-in-out infinite;
   }*/
}
.SupperBody #slide_info .slideCont .message-place .animate img {
  animation: floatY 2s ease-in-out infinite;
}
.SupperBody #slide_info .slideCont .message-place .animate img, .SupperBody #slide_info .slideCont .message-place .animate .thanks-poll h2 {
  animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal {
  background: linear-gradient(135deg, #bbe2fc, #80c7f7);
  border: 2px solid #64bdfa;
  border-radius: 16px;
  padding: 24px 24px 36px 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1s ease-in-out;
  font-family: "Segoe UI", sans-serif;
  color: #3c7aa6;
  font-size: 1.1rem;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .PlaceRegister {
  text-align: left;
  font-size: 20px;
  display: flex;
  justify-content: space-around;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .PlaceRegister .A1 > div {
  margin-top: 15px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .PlaceRegister .A1 span {
  text-decoration: underline;
  position: relative;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .PlaceRegister .A1 span:hover {
  cursor: pointer;
  text-decoration: unset;
  transform: scale(1.1);
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .PlaceRegister .A2 img {
  height: 120px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal > h2 {
  animation: floatY 2s ease-in-out infinite;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal h2 {
  font-size: 24px;
  color: #3c7aa6;
  margin: 12px 0;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .future-textarea textarea {
  width: 50%;
  padding: 0 15px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type {
  margin: 15px 0;
  display: inline-block;
  position: relative;
  right: 50px;
  /* .btn-poll{
       padding: 3px 25px;
       //background: #ededc7;
       background: #ffc439;
   }*/
  /*  button.btn-life{
        font-size: 20px;
        //background: #ffc439;
    }*/
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row.selected {
  border: solid;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row {
  flex: 1 1 50%; /* каждая строка занимает 50% */
  box-sizing: border-box;
  padding: 5px 10px; /* отступы внутри колонок */
  display: flex;
  align-items: center;
  cursor: pointer;
  border: solid 1px #729cc1;
  margin: 10px 0;
  position: relative;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row .plus-sign {
  font-size: 44px;
  position: absolute;
  bottom: -2px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row .duration {
  width: 137px;
  position: relative;
  white-space: nowrap;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row .duration img {
  width: 40px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row .type-pay {
  width: 150px;
  white-space: nowrap;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row .type-pay .cena {
  position: relative;
  transform: scale(1.2);
  margin: 0 20px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row .type-pay .cena:before {
  border-bottom: 2px solid #c56a6a;
  position: absolute;
  content: "";
  width: 170%;
  height: 60%;
  left: -50%;
  transform: rotate(-20deg);
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type button {
  position: absolute;
  left: 110%;
  bottom: 1px;
  white-space: nowrap;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  cursor: pointer;
  border-radius: 7px;
  padding: 3px 25px;
  background: #ffc439;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .abs-info-maestro,
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .abs-info-poll {
  position: absolute;
  left: 110%;
  top: 45px;
  width: 200px;
  font-size: 16px;
  font-weight: normal;
  color: black;
  text-align: left;
  padding: 5px 10px;
  background: #ededc7;
  border-radius: 10px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .abs-info-maestro {
  top: 0;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .abs-info-maestro a {
  color: blue;
  text-decoration: underline;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .abs-info-maestro a:hover {
  text-decoration: unset;
  color: #3c7aa6;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .abs-rate-discount {
  position: absolute;
  right: 107%;
  top: 0px;
  font-weight: bold;
  color: #f2e66f;
  font-size: 24px;
  white-space: nowrap;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .img-discount {
  position: absolute;
  right: 99%;
  top: 0px;
  height: 40px;
  transform: scaleX(-1);
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-type .answer-row input[type=radio] {
  margin-right: 15px; /* отступ справа от радио кнопки */
  transform: scale(1.5);
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-future {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-future .answer-row {
  flex: 1 1 50%; /* каждая строка занимает 50% */
  box-sizing: border-box;
  padding: 5px 10px; /* отступы внутри колонок */
  display: flex;
  align-items: center;
  cursor: pointer;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .radio-btn-future .answer-row input[type=radio] {
  margin-right: 15px; /* отступ справа от радио кнопки */
  transform: scale(1.5);
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .place-star-poll {
  margin: 30px;
  display: flex;
  justify-content: space-evenly;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .place-star-poll img {
  width: 7%;
  cursor: pointer;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .thanks-poll {
  display: flex;
  justify-content: center;
  align-items: center;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .thanks-poll img {
  height: 50px;
  margin: 0 30px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .close-poll {
  text-align: right;
  padding-right: 50px;
  height: 0px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .close-poll .btn {
  font-size: 20px;
  position: relative;
  bottom: 50px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .blockDaily {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer {
  position: relative;
  margin-bottom: 16px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy {
  font-size: 48px;
  display: inline-block;
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy img {
  height: 40px;
  animation: floatY 2s ease-in-out infinite;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy img:nth-child(4) {
  animation: unset;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy img:nth-child(2),
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy img:nth-child(6) {
  animation-delay: 0.2s;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy img:nth-child(7),
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy img:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes floatY2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes floatXY {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-2px, -2px);
  }
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-1,
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-2,
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-3 {
  position: absolute;
  left: -50px;
  top: 10px;
  border: solid;
  height: 20px;
  width: 20px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-1 img,
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-2 img,
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-3 img {
  height: 50px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-1 {
  left: -30px;
  top: -20px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-2 {
  left: -60px;
  top: 20px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .trophy .box-star-3 {
  left: -30px;
  top: 60px;
}
.SupperBody #slide_info .slideCont .message-place .DailyGoal .iconContainer .stars {
  font-size: 24px;
  color: gold;
  animation: twinkle 1.2s infinite alternate;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes twinkle {
  from {
    opacity: 0.5;
    transform: rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: rotate(5deg);
  }
}
.SupperBody #slide_info .slideCont .message-place .ShortBuy {
  color: #286a90;
}
.SupperBody #slide_info .slideCont .message-place .ShortBuy .btn-buy-block {
  display: flex;
  justify-content: center;
}
.SupperBody #slide_info .slideCont .message-place .ShortPrev .prev-explain {
  font-size: 1em;
  font-style: italic;
  margin-top: 10px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .img-maestro {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .img-maestro img {
  max-width: 100%;
  max-height: 100%;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro {
  color: #114a69;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .title-pro {
  font-size: calc(14px + 0.7vw);
  text-align: center;
  line-height: 1;
  margin-bottom: calc(10px + 0.5vw);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro {
  display: flex;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro {
  flex: 3;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro {
  font-style: italic;
  color: #114a69;
  position: relative;
  width: 100%;
  overflow: visible;
  padding-left: calc(30px + 1.5vw);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .help-container {
  border: solid;
  position: relative;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .help-img,
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .right-img,
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .left-img {
  position: absolute;
  height: calc(24px + 1.2vw);
  display: inline-block;
  left: -40px;
  bottom: 0;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .right-img {
  left: unset;
  right: 15%;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .help-img {
  left: unset;
  right: 2%;
  cursor: pointer;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro .help-img:hover {
  opacity: 0.6;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro:nth-child(1) .left-img {
  left: 0;
  bottom: 20px;
  transform: scale(1.2);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro:nth-child(2) {
  margin-top: calc(10px + 0.5vw);
  margin-bottom: calc(10px + 0.5vw);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro:nth-child(2) .left-img {
  left: 0;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro:nth-child(3) .left-img {
  left: -60px;
  transform: scale(0.9);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .first-pro .line-pro:hover {
  cursor: pointer;
  opacity: 0.8;
  text-decoration: unset;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .second-pro {
  flex: 2;
  display: flex;
  flex-direction: column;
  position: relative;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .horizont-pro .second-pro .btn-pay.maestro {
  margin: auto 0 0 auto;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .choose-sign {
  text-decoration: underline;
  cursor: pointer;
  margin-top: calc(5px + 0.25vw);
}
@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1mm);
  }
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .choose-sign:hover {
  text-decoration: unset;
  opacity: 0.8;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro {
  /*.checkbox-cond{
      text-align: right;

      .custom-checkbox{
          display:inline-block;

      }
      .custom-checkbox input{
          margin-right:5px;
      }
  }*/
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll {
  position: relative;
  width: 64%;
  padding: 80px 10%;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .box-roll {
  height: 100%;
  border: solid 1px red;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .box-roll .img-roll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .box-roll .box-loop {
  position: absolute;
  left: 92%;
  top: 60%;
  white-space: nowrap;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .box-roll .box-loop img {
  position: relative;
  right: 14px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .box-roll .box-loop .btn-pay {
  position: relative;
  left: 14px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .place-roll {
  width: 100%;
  height: 100%;
  display: inline-block;
  z-index: 1;
  position: relative;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .place-roll img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .roll .place-roll .help-installment:hover {
  cursor: pointer;
  opacity: 0.6;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .rate80 .cena:before {
  border-bottom-color: red;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .rate80 .abs-discount {
  font-weight: bold;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .rate80 .abs-discount img {
  opacity: 1;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro td.days-pro {
  text-transform: uppercase;
  /* Стили для стрелок */
  /*input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      background-color: #ccc; !* Цвет фона стрелок *!
      width: 20px; !* Ширина стрелок *!
      height: 20px; !* Высота стрелок *!
      border-radius: 50%; !* Закругление углов для создания круглых стрелок *!
  }*/
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro td.days-pro input {
  width: 65px;
  border: solid 1px grey;
  border-radius: 5px;
  padding-left: 10px;
  font-weight: bold;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro td.days-pro input[type=number]::-webkit-inner-spin-button,
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro td.days-pro input[type=number]::-webkit-outer-spin-button {
  opacity: 1; /* Делаем стрелки видимыми */
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro td.pay-discount {
  min-width: 200px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .cena {
  position: relative;
  transform: scale(1.2);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .cena:before {
  border-bottom: 2px solid #c56a6a;
  position: absolute;
  content: "";
  width: 170%;
  height: 60%;
  left: -50%;
  transform: rotate(-20deg);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro table {
  border-spacing: 0 20px;
  width: 100%;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro table td {
  padding: 0 10px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro table td img {
  opacity: 0.6;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro table td:nth-child(2) {
  padding-left: calc(16px + 0.8vw);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro table tr:nth-child(1) {
  border-bottom: 1px solid black;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .btn-pay {
  font-size: calc(12px + 0.6vw);
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .btn-pay.disable {
  opacity: 0.5;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .checkbox-cond label {
  position: relative;
  left: 50px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .abs-discount {
  position: absolute;
  left: -111px;
  top: -16px;
  font-weight: normal;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .abs-discount img {
  opacity: 0.6;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .abs-discount i {
  position: relative;
  bottom: 15px;
  right: 114px;
  color: white;
  font-size: 32px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .boxbtn-pro .pay-pro .abs-discount i span {
  font-size: 18px;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .img-bonus {
  position: absolute;
  right: 14%;
  top: 18%;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .img-bonus:hover {
  opacity: 0.8;
  transform: scale(1.2);
  cursor: pointer;
}
.SupperBody #slide_info .slideCont .message-place .to-pro .deadline {
  position: absolute;
  left: 107%;
  top: 40px;
  text-align: right;
  font-size: calc(12px + 0.6vw);
  margin: calc(4px + 1.6vw);
  color: #c56a6a;
  font-weight: bold;
}
.SupperBody #slide_info .slideCont .message-place .is-market p {
  text-decoration: underline;
  color: #164c72;
  cursor: pointer;
}
.SupperBody #slide_info .slideCont .message-place .is-market p:hover {
  text-decoration: none;
}
.SupperBody #slide_info .slideCont .message-place .is-market .deadline {
  position: absolute;
  right: 10px;
  top: 0;
  text-align: right;
  font-size: calc(14px + 1.4vw);
  margin: calc(4px + 1.6vw);
  color: #c56a6a;
  font-weight: bold;
}
.SupperBody #slide_info .slideCont .message-place .to-take-bonus .row-info {
  text-align: center;
  margin: 10px 0 20px;
}
.SupperBody #slide_info .slideCont .message-place .end-course .row-info {
  text-align: center;
  margin: 10px 0 20px;
  font-weight: normal;
}
.SupperBody #slide_info .slideCont .message-place .end-course .row-course {
  margin-left: 20px;
}
.SupperBody #slide_info .slideCont .message-place .end-course .row-course .title-course {
  float: left;
}
.SupperBody #slide_info .slideCont .message-place .end-course .row-course .btn-start {
  float: left;
  margin-left: 30px;
  display: inline-block;
}

.close__DailyGoal {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 22px;
}

.close__DailyGoal:hover {
  cursor: pointer;
  transform: scale(1.2);
  font-weight: bold;
}

.DailyGoal {
  /*.date {
      font-weight: bold;
      margin-top: 5px;
      animation: fadeIn 1.2s ease forwards;
      animation-delay: 1.5s;
      opacity: 0;
  }*/
}
.DailyGoal .bonus {
  background: #fffae5;
  border: 2px solid #ffcc00;
  padding: 10px;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  border-radius: 8px;
  /* animation: bounceIn 0.8s ease forwards;
   animation-delay: 0.5s;
   opacity: 0;*/
  display: flex;
  justify-content: center;
  width: 70%;
  margin: 15px auto;
  position: relative;
}
.DailyGoal .bonus .Q {
  position: absolute;
  right: -40px;
  margin-left: 10px;
  height: 45px;
  width: 45px;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background: #f4b643;
  font-size: 30px;
}
.DailyGoal .bonus .Q:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.DailyGoal .bonus img {
  height: 30px;
  margin-right: 30px;
}
.DailyGoal .note {
  font-size: 1.1rem;
  margin-top: 5px;
  color: #555;
  font-weight: bold;
}
.DailyGoal .table__Bonus {
  margin-top: 10px;
  /* animation: fadeIn 1.2s ease forwards;
   animation-delay: 1.0s;
   opacity: 0;*/
}
.DailyGoal .table__Bonus .bonus-table {
  border-collapse: collapse;
  margin: 0 auto;
}
.DailyGoal .table__Bonus .bonus-table td {
  padding: 0 8px;
  vertical-align: middle;
  text-align: left;
  font-size: 1.1rem;
  color: #458932;
}
.DailyGoal .table__Bonus .bonus-table td.points {
  text-align: right;
  font-weight: bold;
  color: #c0770b;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 800px) {
  .SupperBody #progress_all,
  .SupperBody .abs-runner,
  .SupperBody .abs-start {
    display: none !important;
  }
  .SupperBody .contentPanel.first {
    margin: 20px 0 !important;
  }
  .SupperBody .contentPanel.first .list-plus,
  .SupperBody .contentPanel.first .box-how-to,
  .SupperBody .contentPanel.first .for-beginners {
    margin: 0 !important;
  }
}
.SupperBody .tab-content {
  position: relative;
}
.SupperBody .tab-content .abs-runner {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 25%;
}
.SupperBody .tab-content .abs-runner img {
  width: 100%;
  max-height: 150px;
  position: relative;
  left: 60px;
  top: -10px;
}
.SupperBody .tab-content .abs-start {
  position: absolute;
  right: calc(30px + 1.5vw);
  top: calc(16px + 0.8vw);
  max-width: 25%;
}
@media (max-width: 1000px) {
  .SupperBody .tab-content .abs-start {
    display: none;
  }
}
.SupperBody .contentPanel.first {
  position: relative;
  top: 10px;
  color: #0c7ebd;
  margin: 30px 15%;
  text-align: center;
  font-size: calc(16px + 0.8vw);
}
.SupperBody .contentPanel.first .space-40 {
  height: calc(14px + 1.4vw);
}
.SupperBody .contentPanel.first .box-how-to {
  display: flex;
  justify-content: space-around;
}
.SupperBody .contentPanel.first .how-to {
  font-size: calc(15px + 0.7vw);
  font-weight: normal;
  color: #0c7ebd;
  text-decoration: underline;
  cursor: pointer;
}
.SupperBody .contentPanel.first .how-to:hover {
  text-decoration: none;
  opacity: 0.9;
}
.SupperBody .contentPanel.first .title-beginners {
  text-align: center;
  font-size: 28px;
  margin-top: 20px;
}
.SupperBody .contentPanel.first .for-beginners {
  display: none;
  font-size: 18px;
  margin-top: 30px;
  margin-left: 30%;
  margin-bottom: 30px;
}
.SupperBody .contentPanel.first .for-beginners h2 {
  font-size: 26px;
  color: #0c7ebd;
}
.SupperBody .contentPanel.first .block-info:hover {
  background: rgba(70, 175, 228, 0.2);
  cursor: pointer;
}
@media (max-width: 1200px) {
  .SupperBody .contentPanel.first .block-info {
    width: 99% !important;
    margin: 20px auto;
  }
}
.SupperBody .contentPanel.first .block-info {
  width: 100%;
  margin-bottom: 30px;
  position: relative;
  border: solid 3px #65c0f3;
  display: inline-block;
  min-height: 240px;
  padding: 10px;
  padding-bottom: 40px;
  border-radius: 50px;
  background: rgba(70, 175, 228, 0.1);
  text-align: left;
}
.SupperBody .contentPanel.first .block-info .btn-premium {
  position: absolute;
  right: 50px;
  bottom: 20px;
}
.SupperBody .contentPanel.first .block-info .title-first {
  height: 50px;
}
.SupperBody .contentPanel.first .block-info .title-first img {
  width: 100%;
}
.SupperBody .contentPanel.first .block-info .progressPanel {
  height: 90px;
  width: 90%;
  margin-top: 50px;
}
.SupperBody .contentPanel.first .block-info .progressPanel .running-place img {
  height: 54px;
}
.SupperBody .contentPanel.first .block-info .progressPanel .running-place .color-level-box {
  margin-top: 15px;
}
.SupperBody .contentPanel.first .block-info .title-card {
  text-align: center;
  margin: 5px 0 10px 0;
  font-size: 20px;
  color: #0c7ebd;
  position: relative;
}
.SupperBody .contentPanel.first .block-info .title-card .result-speed {
  font-weight: normal;
  font-style: italic;
  font-size: 16px;
  margin-right: 30px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: left;
  display: block;
}
@media (max-width: 1000px) {
  .SupperBody .contentPanel.first .block-info .title-card .result-speed {
    display: none; /* Скрыть элемент при ширине экрана менее 1000px */
  }
}
.SupperBody .contentPanel.first .block-info .title-card .btn-premium {
  display: inline-block;
}
.SupperBody .contentPanel.first .block-info .list-plus {
  margin: 30px 0 10px 40px;
}
.SupperBody .contentPanel.first .block-info .list-plus .title-block {
  font-size: 20px;
  color: #0c7ebd;
  font-style: italic;
  font-weight: bold;
  margin: 0 0 20px 50px;
}
.SupperBody .contentPanel.first .block-info .list-plus li {
  margin-bottom: calc(4px + 0.2vw);
  color: #0c7ebd;
  font-size: 20px;
  font-size: calc(10px + 0.5vw);
}

#menu_maestro {
  display: none;
}

.MaestroBody {
  background-color: #abd2f9;
}
.MaestroBody .trainerPanel .keyboard {
  background-color: unset !important;
}
.MaestroBody .trainerPanel .keyboard .keys .key-btn input {
  background-color: #c1defd;
}

.MaestroBody .mainMenu {
  background: none;
}
.MaestroBody .mainMenu .centerMenu {
  height: 80px;
  height: calc(40px + 2vw);
  text-align: left;
  padding-left: 10px;
}
.MaestroBody .mainMenu .centerMenu .nav-tabs #logo_super1 {
  position: relative;
}
.MaestroBody .mainMenu .centerMenu .nav-tabs #logo_super1 .abs-level {
  font-size: 29px;
  font-style: italic;
  position: absolute;
  left: 165px;
  top: -6px;
  color: #0e7fbe;
  white-space: nowrap;
}
.MaestroBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right {
  position: absolute;
  right: 0;
  top: 14px;
}
.MaestroBody .mainMenu .centerMenu .nav-tabs.nav-tabs-right .nav-login .btn-login {
  background: unset;
  border: unset;
  box-shadow: unset;
  font-style: italic;
}
.MaestroBody .mainMenu .bottom-menu {
  margin-bottom: -10px;
}
.MaestroBody .mainMenu .bottom-menu .abs-center {
  position: absolute;
  width: 150px;
  height: 50px;
  left: 0;
  right: 0;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  color: #0d7ebd;
  font-weight: normal;
  text-align: center;
  font-size: 20px;
  font-style: italic;
}
.MaestroBody .mainMenu .bottom-menu table {
  width: 100%;
}
.MaestroBody .mainMenu .bottom-menu table td {
  text-align: center;
}
.MaestroBody .mainMenu .bottom-menu table td .blue-box {
  float: unset;
  display: inline-block;
  margin: 12px 7px;
}
.MaestroBody .mainMenu .bottom-menu table td.left-list,
.MaestroBody .mainMenu .bottom-menu table td.right-list {
  width: 40%;
  vertical-align: top;
}
/*# sourceMappingURL=SupertypeCSS.css.map */