* {
  margin: 0;
  padding: 0;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  text-align: center;
  margin-bottom: 57px;
}

section,
header,
footer,
nav,
aside {
  display: block;
}

.gameModeLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: #fff;
}

.gameHeaderText {
  font-size: 28px;
  margin-bottom: 0;
  padding-top: 10px;
  padding: 4px 0;
}

.gameHeaderText > span.regular {
  font-size: 38px;
}

.beginnerModeColor {
  background-color: #4caf50 !important;
}

.expertModeColor {
  background-color: #ec1101 !important;
}

.gameStars {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.greenScoreNumber {
  color: rgb(30, 162, 25);
}

.logoTop {
  position: relative;
}

.tradeMark {
  font-size: 12px;
  position: relative;
  top: -5px;
  color: #000;
}

.tradeMarkLg {
  font-size: 26px;
  position: absolute;
  top: 20%;
  color: #000;
}
/* --- --- --- --- --- --- --- --- --- --- */
/* Global Styles */

.bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
}

.boldItalic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
}

.regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

.upperCase {
  text-transform: uppercase;
}

.grayColor {
  color: #9a9a9a;
}

.orangeColor {
  color: #ee5b27;
}

.darkGrayColor {
  color: #4e4e4e;
}

.noSpace {
  margin: 0 !important;
  padding: 0 !important;
}

button {
  border: none;
  border-radius: 5px;
  margin: 0 0.5%;
}

button:focus {
  outline: none;
}
/* --- --- --- --- --- --- --- --- --- --- */

/* [A-Z] */

/* <Header> */
header.header {
  color: black;
  margin: 0.5% auto;
}

header.header .calendar-field {
  margin-top: 17px;
}

header.header .logo {
  font-size: 4em;
  margin-top: 0;
}

header.header .root,
.modal .root {
  color: #da8d00;
}
/* </Header> */

/* <Buttons> */
section.buttons {
  margin: 2.5% 0;
}

section.buttons button {
  color: white;
  font-family: "Lato", sans-serif;
  font-size: 24px;
  font-weight: 500;
  /*padding: 10px 35px;*/
  padding: 0.8% 2.7%;
  text-transform: uppercase;
}

section.buttons button:focus {
  outline: none;
}

.play {
  background: #00a651;
}

.stop {
  background: #ff0000;
}

.help {
  background: #2d2d2d;
}
/* <Buttons> */

/* <Game> */
section.game .panel {
  border-radius: 8px 8px 0 0;
  border: none;
}

section.game .panel-default > .panel-heading {
  background-color: #da8d00;
  border-radius: 8px 8px 0 0;
  color: white;
  font-size: 38px;
}

section.game .panel-default > .panel-body {
  border-bottom: 1px solid #dedede;
  border-right: 1px solid #dedede;
  border-left: 1px solid #dedede;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px;
}
/* <Definition> */
.definition {
  color: #002544;
  line-height: 41px;
}

.definition .root {
  font-size: 30px;
  float: left;
}

.definition .arrow-left {
  border-style: solid;
  border-width: 9px 10px 9px 0;
  border-color: transparent #002544 transparent transparent;
  float: left;
  height: 0;
  width: 0;
  margin: 12px 20px 0;
}

.definition .meaning {
  font-size: 24px;
}
/* </Definition> */

/* <Inputs> */
.inputs {
  margin-top: 3%;
}

.inputs li {
  color: white;
  background: #227fbb;
  border-radius: 5px;
  display: inline-block;
  font-size: 2em;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  height: 45px;
  line-height: 45px;
  margin: 0 0.2%;
  padding: 0;
  text-align: center;
  width: 45px;

  position: relative;
}

.inputs li input {
  background: white;
  border: 1px solid #b1b1b1;
  border-radius: 5px;
  color: #666;
  height: 45px;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  width: 45px;
}

.inputs li input:focus {
  background: #f2eb89;
}

/* Inputs that are given by admin  */
.default {
  background: #227fbb !important;
  color: white !important;
}

.default2 {
  background: #2b3e51 !important;
  color: white !important;
}

.correct {
  color: #00a651 !important;
}

.wrong {
  color: #ff0000 !important;
}

.correctExpert,
.wrongExpert {
  color: black !important;
}

.inputs input:focus {
  outline: none;
}
/* </Inputs> */

/* <Duration> */
.duration {
  margin-top: 1%;
}

.duration,
.timer {
  overflow: auto;
}

.duration .bonusPointsTimer p {
  background: #2b3e51;
  color: white;
  font-size: 25px;
  width: 260px;
  line-height: 48px;
}

.duration .timer p {
  background: #c23824;
  color: white;
  font-size: 25px;
  width: 106px;
  line-height: 48px;
}
/* </Duration> */

/* <Hint/Clue/Examples> */
.info {
  background: #ebebeb;
  border: 1px solid #bbbbbb;
  margin-top: 20px;
  min-height: 130px;
  overflow: auto;
  padding-top: 15px;
  width: 100%;
}

.info p {
  font-size: 16px;
}

.additional {
  color: #767676;
}

.additional a {
  color: #227fbb;
  text-decoration: none;
}

.archive {
  padding: 15px 0;
  text-align: center;
}

.modal .archive {
  padding: 0;
}

.modal-content {
  overflow: hidden;
}

.archive > p {
  text-align: center;
  padding: 5px 0;
}

.archive > div {
  margin: 0 auto;
}

.archive-text {
  padding-right: 5px !important;
  padding-top: 5px;
}

.archive-wrapper {
  padding-left: 0 !important;
}

.archive-wrapper .btn {
  width: 100%;
}

.low-score {
  display: block;
}

.low-score.hide {
  display: none;
}

.high-score {
  display: none;
  padding: 20px 0;
  margin-bottom: -15px;
  background-color: rgba(227, 227, 227, 0.7);
}

.high-score p {
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.high-score.show {
  display: block;
}

.add-margin-x {
  margin: 0 10px;
}
/* <Hint/Clue/Examples> */

/* <BottomButtons> */
.bottomButtons {
  margin-top: 30px;
}

.bottomButtons button {
  background: #2b3e51;
  border-radius: 5px;
  color: white;
  font-size: 17px;
  padding: 1% 1.5%;
}

.bottomButtons button.active {
  background: #4f7295;
}
/* </BottomButtons> */
/* </Game> */

/* <Help> */
.helpContent .heading {
  font-size: 26px;
  font-weight: 700;
}

.helpContent p {
  font-size: 12px;
  margin-bottom: 5px;
}
/* </Help> */

/* <ModalInTheEnd> */
.modal-body .h3 {
  margin-top: 0 !important;
}

#modalEnd .examples p {
  margin-bottom: 5px !important;
  font-size: 12px;
}
/* </ModalInTheEnd> */

footer.footer {
  background: #222222;
  color: white;
  clear: both;
  position: absolute;
  bottom: 0;
  line-height: 57px;
  height: 58px;
  width: 100%;
}