@font-face {
  font-family: "languages";
  src: url("./fonts/languages/languages.eot?46513395");
  src: url("./fonts/languages/languages.eot?46513395#iefix") format("embedded-opentype"),
    url("./fonts/languages/languages.woff2?46513395") format("woff2"),
    url("./fonts/languages/languages.woff?46513395") format("woff"),
    url("./fonts/languages/languages.ttf?46513395") format("truetype"),
    url("./fonts/languages/languages.svg?46513395#languages") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Ultralight.otf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Thin.otf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Light.otf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Medium.otf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Semibold.otf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Bold.otf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Heavy.otf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "SFDisplay";
  src: url("./fonts/SFDisplay/SFDisplay-Black.otf");
  font-weight: 900;
  font-style: normal;
}
body,
h1,
h2,
h3,
h4,
h5,
.ui.menu {
  font-family: "SFDisplay", sans-serif;
  letter-spacing: 0.2px;
}
html,
body,
#root,
#main {
  height: 100%;
}
a,
a:hover {
  color: #df542d;
}
h1,
h2,
h3,
h4,
h5 {
  color: #474b56;
  margin-bottom: 21px;
}
h1 {
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 19px;
  line-height: normal;
}
h1.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h3 {
  font-size: 20px;
  font-weight: normal;
}
ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  list-style-type: none;
}
.ui.input > input[type="text"],
.ui.form input[type="text"],
.ui.form textarea,
.ui.input > input[type="text"]:focus,
.ui.form input[type="text"]:focus,
.ui.form textarea:focus {
  background: #f7f8f9;
  padding: 10px 16px 8px 16px;
  font-size: 13px;
  border: solid 1px #f0f1f3;
}
.ui.form textarea {
  resize: none;
}
.ui.input > input[type="text"]::placeholder,
.ui.form input[type="text"]::placeholder,
.ui.form textarea::placeholder,
.ui.input > input[type="text"]:focus::placeholder,
.ui.form input[type="text"]:focus::placeholder,
.ui.form textarea:focus::placeholder {
  color: "#c0c2c8";
}

.ui[class*="left icon"].input > input[type="text"] {
  padding-left: 43px !important;
}
/*
 * when using loaders inside modals with dimmer, these loaders get invisible,
 * this class fixes this until semantic-ui releases a solution
 */
.ui.dimmer .ui.workaround.loader:before {
  border-color: rgba(0, 0, 0, 0.1);
}
.ui.dimmer .ui.workaround.loader:after {
  border-color: #767676 transparent transparent;
}

/* when using fullscreen modal, we need to turn off default spaces around the modals and dimmer */
.modals.dimmer .ui.scrolling.modal.fullscreen-modal {
  margin: 0;
}

.ui.dimmer.fullscreen {
  padding: 0;
}

.scrolling.dimmable.dimmed > .dimmer.fullscreen {
  overflow: unset;
}

.position-right {
  position: absolute;
  right: 0;
}