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

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

html[lang="ar"] {
  font-family: "Amiri Quran Regular";
}

html {
  height: 100%;
}

html body {
  color: $black;
  height: 85%;
}

body .root {
  height: 100%;
}

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

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

  a.title {
    display: flex;
    place-content: center;
    text-decoration: none;
    width: 100%;
    font-size: large;
    line-height: 38px;
  }

  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;
    }
  }

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

  .row.dropdown-row {
    align-items: flex-end;
    line-height: 30px;

    .react-select.theme {
      width: 35px;
    }

    .react-select.language {
      width: 70px;
      text-align: right;
      li { font-family: "Kanit Regular"; }
    }
  }
}

body .root .content.ar {
  a.title {
    font-size: xx-large;
  }
}