$black: #454545;
$max-width: 728px;

[lang="en"] {
  font-family: "Kanit Regular";
}

[lang="ar"] {
  font-family: "Noto Sans Arabic Regular";
  font-weight: bold;
}

html {
  height: 100%;
}

html body {
  font-family: "Kanit Regular";
  color: $black;
  height: 85%;
}

body .root {
  height: 100%;
}

body .root .content {
  margin: 0 auto;
  width: 80%;
  max-width: $max-width;
  height: 100%;

  @media screen and (max-width: $max-width) {
    width: 350px;
  }
}

body .root .content .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  direction: ltr;
}

body .root .content .row.title {
  display: flex;
  place-content: center;
  text-decoration: none;
  width: 100%;
}

body .root .content .row.dropdown-row {
  .react-select.language {
    text-align: right;
    li:first-child { font-family: "Noto Sans Arabic Regular"; }
    li:last-child { font-family: "Kanit Regular"; }
  }
}

body .root .content ul.body {
  clear: both;
  list-style-type: none;
  height: 90%;
  padding: 0;

  /* Height of 625px, or less */
  @media screen and (max-height: 625px) {
    height: 330px;
  }

  /* Height of 595px, or less */
  @media screen and (max-height: 595px) {
    height: 310px;
  }
}