:root{
  /* Colors */

  --clr-primary: #113A36;
  --clr-accent: #078049;

  --clr-text: black;
  --clr-text-invert: white;

  --clr-background:#f8f7f4;
  --clr-background-primary:#EBEFE2;
  --clr-background-primary-hover:rgba(218, 232, 204, 0.56);
  --clr-background-primary-active:#D9E7CB;

  --clr-background-body:white;
  --clr-background-secondary: #FBFEF5;
  --clr-background-highlight: #fff7db;

  --clr-border:#e0e0e0;
  --clr-border-field:#949494;

  --clr-scarlet: #FF3800;

  /* Nav */
  --header-height: 3.5rem;
  
  /* Sizes */
  --width-xl: 1600px;
  --width-lg: 912px;
  --width-md: 640px;
  --width-sm: 360px;
  

  /* Transition */
  --transition: all .2s ease;
}
@font-face {
  font-family: eUkraineThin;
  src: url(../fonts/e-Ukraine-Thin.eot);
  src: url(../fonts/e-Ukraine-Thin.eot?#iefix) format("embedded-opentype"),
       url(../fonts/e-Ukraine-Thin.woff2) format("woff2"),
       url(../fonts/e-Ukraine-Thin.woff) format("woff"),
       url(../fonts/e-Ukraine-Thin.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: eUkraineLight;
  src: url(../fonts/e-Ukraine-Light.eot);
  src: url(../fonts/e-Ukraine-Light.eot?#iefix) format("embedded-opentype"),
       url(../fonts/e-Ukraine-Light.woff2) format("woff2"),
       url(../fonts/e-Ukraine-Light.woff) format("woff"),
       url(../fonts/e-Ukraine-Light.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: eUkraineRegular;
  src: url(../fonts/e-Ukraine-Regular.eot);
  src: url(../fonts/e-Ukraine-Regular.eot?#iefix) format("embedded-opentype"),
       url(../fonts/e-Ukraine-Regular.woff2) format("woff2"),
       url(../fonts/e-Ukraine-Regular.woff) format("woff"),
       url(../fonts/e-Ukraine-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: eUkraineHead;
  src: url(../fonts/e-UkraineHead-Regular.eot);
  src: url(../fonts/e-UkraineHead-Regular.eot?#iefix) format("embedded-opentype"),
       url(../fonts/e-UkraineHead-Regular.woff2) format("woff2"),
       url(../fonts/e-UkraineHead-Regular.woff) format("woff"),
       url(../fonts/e-UkraineHead-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root{
  --rem: 16px;

  --font-body:'eUkraineLight';

  --font-thin:'eUkraineThin';
  --font-light:'eUkraineLight';
  --font-regular:'eUkraineRegular';
  --font-heading:'eUkraineHead';
}

html{
  font-size: var(--rem);
}
body{
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-body), Arial, Helvetica, sans-serif;
  color:var(--clr-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Font */
.font-thin{
  font-family: var(--font-thin);
}
.font-body{
  font-family: var(--font-body);
}
.font-regular{
  font-family: var(--font-regular);
}
.font-heading{
  font-family: var(--font-heading);
}


/* Heading */
.heading-xl,
.heading-lg,
.heading-md,
.heading-sm,
.heading-xs{
  font-family: var(--font-heading);
}
.heading-xl {
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: bold;
}
.heading-lg {
  font-size: 2.375rem;
  line-height: 2.5rem;
  font-weight: bold;
}
.heading-md {
  font-size: 1.75rem;
  line-height: 2rem;
}
.heading-sm {
  font-size: 1.5rem;
  line-height: 1.75rem;
}
.heading-xs{
  font-size: 1.25rem;
  line-height: 1.5rem;
}
@media screen and (max-width: 640px) {
  .heading-xl {
    font-size: 1.625rem;
    line-height: 1.75rem;
  }
  .heading-lg {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  .heading-md {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
  .heading-sm {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .heading-xs{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Body */
.body-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.body-md {
  font-size: 1rem;
  line-height: 1.5rem;
}
.body-sm {
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.body-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
@media screen and (max-width: 640px) {
  .body-lg {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .body-md {
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }
  .body-sm {
    font-size: 0.6875rem;
    line-height: 0.875rem;
  }
  .body-xs {
    font-size: 0.625rem;
    line-height: 0.875rem;
  }
}

/* Font */
.font-body{
  font-family: var(--font-body);
}
.font-thin{
  font-family: var(--font-thin);
}
.font-light{
  font-family: var(--font-light);
}
.font-regular{
  font-family: var(--font-regular);
}
.font-heading{
  font-family: var(--font-heading);
}

/* Colors */
.clr-primary{
  color: var(--clr-primary);
}
.clr-accent{
  color: var(--clr-accent);
}

.expired {
  color: var(--clr-scarlet);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  background: var(--clr-background);
}
.sign-in{
  padding-bottom: 6rem;
  max-width: var(--width-sm);
}

/* DX */
.dx-button.dx-button-default{
  border-radius: 1.5rem;
  height: 2.5rem;  
}
.dx-button-has-text .dx-button-content{
  padding: 0.375rem 1.5rem;
}
.dx-button-text{
  text-transform: none;
  font-size: 1rem;
}
.dx-checkbox-text{
  padding-left: 1rem;
  font-size: 0.875rem;
}
.dx-widget,
.dx-widget input,
.dx-widget textarea {
  font-family: var(--font-heading);
}