@landscape: ~"only screen and (orientation: landscape)";
@portrait: ~"only screen and (orientation: portrait)";
@font-family: 'Bango Pro', 'sans-serif', ' Arial', ' Helvetica';
@generic-font: 'Roboto', 'Segoe UI', 'Helvetica', sans-serif;

.default-font {
  font-family: @font-family;
}

@import "./loading.less";
@import "./splash.less";

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

// Targets vi_VN
// We apply it to the universal selector (*) to ensure it hits every element
:lang(vi_VN) *,
[lang="vi_VN"] * {
  font-family: 'robotobold', sans-serif !important;
}

.gameUI {

  .paylines .flex-container {
    display: inline-block;
  }

  .paylines .square {
    display: inline-flex;
  }

  .replay {
    justify-content: center;
  }

  .replay-header {
    color: #f4b30b;
    text-align: center;
  }

  .replay-button {
    color: #f4b30b !important;
  }

}

.desc-text {
  color: #ffb133ff;
  margin: 20px auto 1vh;
}


h1.desc-text {
  text-transform: uppercase;
  color: #f4b30b !important;
}

.section-title {
  font-family: @font-family;

  text-transform: uppercase;
  text-align: center;
  margin: 2vh auto 0.5vh;
  filter: drop-shadow(0px 5px #512502);
  color: #f4b30b !important;
}

h1.section-title {
  font-size: 1.7em;

  @media (max-width: 380px) {
    font-size: 1.4em;
  }
}

#settings-rules {
  .content-block {
    padding: 0 5%;
  }

  ul,
  li {
    text-align: left;
  }

  ul {
    margin-bottom: 1vmax;
  }

  li {
    margin-bottom: 0.5vmax;
    margin: 0 auto;
  }
}

#settings-rules ul {
  width: 600px;
  max-width: 80%;
  text-align: left;
}

.paytable-values #left-value {
  color: #74ac01;
}

.paytable-values #right-value {
  color: #ffb133;
}

#settings-rules ul li {
  margin-bottom: 5px;
}

#settings-info {

  .feature-bet-amount {
    color: #ffb133ff;
  }

  .paytable-symbol-image-wrapper {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .buy-feature-button {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin: 0px 0 -30px;
    
    transform: scale(1) !important;
    
    .svg-container {
      position: relative;
    }

    .svg-icon {
      position: relative;
      width: 100px;
      height: 100px;
    }

    .enable-pointer-events {
      pointer-events: none;
    }
  }

  p {
    width: 600px;
    max-width: 80%;
    text-align: center;
  }
}

.replay {
  font-size: 2em !important;

  .replay-header {
    color: #f4b30b;
  }
  .replay-button {
    color: #a3a3a3 !important;
    font: normal normal normal 24px / 1 FontAwesome !important;
  }
}