:root {
  --footerHeight: 3rem;
}

:root {
  --contentMaxWidth: 77rem;
}

:root {
  --popupShadow: 0 4px 5px -5px rgba(0, 0, 0, 0.2), 0 3px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 9px 0px rgba(0, 0, 0, 0.12);
}

:root {
  --dialogShadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
}

:root {
  --shadow: 0 0 1.5rem rgba(146, 153, 162, 0.15);
}

:root {
  --headerFont: Rubik, Areal, Open Sans, Roboto, Helvetica Neue, sans-serif;
}

:root {
  --genericFont: Rubik, Areal, Open Sans, Roboto, Helvetica Neue, sans-serif;
}

:root {
  --noMarginBottomHeader: -1.9rem;
}

:root {
  --marginBottomHeader: 2rem;
}

:root {
  --buttonBorderRadius: 0.25rem;
}

:root {
  --inputBorderRadius: 0.25rem;
}

:root {
  --boxBorderRadius: 0.5rem;
}

:root {
  --highlight: hsl(22, 100%, 50%);
}

:root {
  --fontColor: #3B4156;
}

:root {
  --video: #4c4c4c;
}

:root {
  --body: #FDFDFD;
}

:root {
  --bordergray: #DDDFE6;
}

:root {
  --backgroundgray: #F9FAFC;
}

:root {
  --gray700: #3B4156;
}

:root {
  --gray500: #818594;
}

:root {
  --gray300: #DDDFE6;
}

:root {
  --gray50: #F9FAFC;
}

:root {
  --gray25: #FDFDFD;
}

:root {
  --supportSecondary: #7397D5;
}

:root {
  --supportPrimary: #212936;
}

:root {
  --hoverlink: rgb(0, 143, 179);
}

:root {
  --link: rgb(0,133,166);
}

:root {
  --success: #0cc357;
}

:root {
  --black: #000000;
}

:root {
  --white: #ffffff;
}

:root {
  --green: #26C213;
}

:root {
  --red: #FF455C;
}

:root {
  --yellow: #FFDF00;
}

:root {
  --secondarytext: #DD9063;
}

:root {
  --primarytext: #7397D5;
}

:root {
  --secondaryactive: rgb(31, 125, 148);
}

:root {
  --primaryactive: rgb(31, 125, 148);
}

:root {
  --secondaryhover: hsl(191.9277108433735, 93%, 25.5490196078%);
}

:root {
  --primaryhover: hsl(191.9277108433735, 93%, 25.5490196078%);
}

:root {
  --secondarylight: hsl(191.9277108433735, 80%, 93%);
}

:root {
  --primarylight: hsl(191.9277108433735, 80%, 93%);
}

:root {
  --secondary: rgb(0,133,166);
}

:root {
  --primary: rgb(0,133,166);
}

:root {

}

#preboot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  padding: 0 0 6% 0;

  background: -webkit-radial-gradient(50% 40%, circle, #ffffff 0, #ffffff 20%, #f0f0f0 80%, #e5e5e5 100%);

  background: -o-radial-gradient(50% 40%, circle, #ffffff 0, #ffffff 20%, #f0f0f0 80%, #e5e5e5 100%);

  background: radial-gradient(circle at 50% 40%, #ffffff 0, #ffffff 20%, #f0f0f0 80%, #e5e5e5 100%);
  opacity: 1;

  font-family: Rubik, Areal, Open Sans, Roboto, Helvetica Neue, sans-serif;

  font-family: var(--genericFont);
  font-size: 10px;
  color:  #3B4156;
  color:  var(--gray700);

  -webkit-transition: opacity 300ms linear;

  -o-transition: opacity 300ms linear;

  transition: opacity 300ms linear;
}

#preboot.loaded {
  opacity: 0;
}

#preboot-loading {
  font-size: 200%;
  margin: 1em 0 0 0;
}

/* через запятую не работает */
#preboot-progress{
  border: none;
  background-color: #ddd;
  -webkit-border-radius: 0.4em;
          border-radius: 0.4em;
}
#preboot-progress::-webkit-progress-bar {
  border: none;
  background-color: #ddd;
  -webkit-border-radius: 0.4em;
          border-radius: 0.4em;
}

/* через запятую не работает */
#preboot-progress::-ms-fill{
  background-color: rgb(0,133,166);
  background-color: var(--primary);
  border-radius: 0.4em;
  border: none;
}
#preboot-progress::-moz-progress-bar{
  background-color: rgb(0,133,166);
  background-color: var(--primary);
  border-radius: 0.4em;
}
#preboot-progress::-webkit-progress-value {
  background-color: rgb(0,133,166);
  background-color: var(--primary);
  -webkit-border-radius: 0.4em;
          border-radius: 0.4em;
}

#preboot-progress {
  margin: 6em 0 0 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 32em;
  height: 0.6em;
}

#preboot-logo {
  max-width: 24em;
  max-height: 10em;
}

#incapability-curtain {
  font-size: 140%;

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background: #000;

  z-index: 1001;
}

#incapability-curtain_container {
  position: absolute;
  top: 2em;
  left: 1em;
  right: 1em
}

#incapability-curtain_container h1, #incapability-curtain_container p {
    color: #dddddd;
    text-align: left;
    line-height: 1.35;
    max-width: 40em;
  }

#incapability-curtain_container a {
    color: #ffffff
  }

#incapability-curtain_container a span {
      border-color: #cccccc;
    }

#incapability-curtain_container .mobile-apps {
    margin: 3em 0 0 0;
  }

#incapability-curtain_container .browser {
    white-space: nowrap
  }

#incapability-curtain_container .browser img {
      position: relative;
      top: 0.7em;

      display: inline-block;
      width: 2em;
      height: 2em;
    }

#incapability-curtain_browsers {
  white-space: nowrap;
}

.tm-app-clinic {
  min-width: 77rem;
}