@charset "UTF-8";
html,
body {
  user-select: none;
  height: 100%;
  text-align: center;
  overflow-x: hidden;
  font-family: "Noto Sans", Georgia, Helvetica, sans-serif;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

main > .container-fluid {
  margin: 3.5rem 0px 0;
  padding: 0;
}

main > .container-fluid > h1 {
  text-transform: uppercase;
  text-align: center;
}

.footer {
  z-index: 9999;
  background-color: #f5f5f5;
  font-size: 0.8rem;
}

.footer > .container {
  text-align: center;
  padding-right: 15px;
  padding-left: 15px;
}

.footer > #versionNumber {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 5px 15px;
  text-align: right;
  background-color: white;
}

/*
*   Navbar
*/
nav {
  height: 3.5rem;
}

.nav-item {
  padding: 0.5rem 1rem 0 1rem;
  font-size: 1.25rem;
}

.navbar-brand {
  font-size: 1.75rem;
}

.logo {
  height: 1.75rem;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand {
    font-size: 1.5rem;
  }

  .logo {
    height: 1.5rem;
  }

  .nav-item {
    padding: 0.25rem 1rem 0 1rem;
    font-size: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-brand {
    font-size: 1.4rem;
  }

  .logo {
    height: 1.4rem;
  }

  .nav-item {
    padding: 0.275rem 0.25rem 0 0.25rem;
    font-size: 0.85rem;
  }

  .navbar > .navbar-collapse > .form-inline > .form-control,
.navbar > .navbar-collapse > .form-inline > .btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
  }
}
@media (max-width: 767px) {
  .navbar-collapse {
    background-color: #666;
  }

  .nav-item {
    text-align: left;
    font-size: 1rem;
  }

  .form-inline {
    padding: 0.5rem 1rem 1rem 1rem;
  }
}
@media (max-width: 575px) {
  .navbar > .navbar-collapse > .form-inline {
    margin-top: 0rem !important;
  }

  .navbar > .navbar-collapse > .form-inline > .form-control {
    width: auto;
    margin-right: 0.5rem !important;
  }
}
.nav-link {
  padding: 1rem;
}

/*
*   Gestione orientamento piccoli dispositivi
*/
#turn-device {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9999;
  background-color: #fff;
}

#turn-device p {
  margin-top: 4rem;
  color: #333;
  text-align: center;
}

#turn-device .turn-icon {
  transition: All 0.5s ease;
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  display: block;
  width: 100%;
  height: 64px;
  margin-bottom: 1rem;
  background: url(../images/turn-mob-device-grey.png) center no-repeat;
}

#turn-device .rotate {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}

/* Per correggere Firefox: dotted box intorno a button clicked */
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

/* Colori   */
/*  Additional Features */
/* OL and RL Font Sizes */
/* Result Line: height  */
/* Result Line: margin-top/margin-bottom    */
/*
*   #proposedWordLine
*/
#proposedWordLine {
  color: darkslategray;
  background-color: lightgray;
}

/* Fine #proposedWordLine */
/*
*   #resultsLine
*/
@media (max-width: 575px) {
  #resultsLine {
    height: 18rem;
  }
}
/*  Fine #resultsLine */
/*
*   Modalità scrittura:
*   Proposal Line e Result Line hanno la stessa altezza.
*   Max 12 caratteri
*/
#writing {
  /*  Max 10 caratteri    */
  /*  Max 8 caratteri    */
}
#writing #proposedWordLine,
#writing #resultsLine {
  height: 25vh;
}
#writing #resultsLine {
  margin-bottom: 5vh;
}
#writing #writingForm,
#writing #fakeForm {
  height: 25vh;
  margin: 0 1.175vw;
  padding: 0;
}
#writing #writingForm .input-group,
#writing #fakeForm .input-group {
  width: auto;
  margin: 0 auto;
}
#writing #writingForm input,
#writing #fakeForm input {
  color: darkslategray;
  margin: 0 0.25vw;
  padding: 0;
  text-align: center;
  font-size: 7.5vw;
  height: 7.5vw !important;
  min-height: 7.5vw;
  max-height: 7.5vw;
  width: 7.5vw !important;
  min-width: 7.5vw;
  max-width: 7.5vw;
}
@supports (-webkit-touch-callout: none) {
  #writing #writingForm input,
#writing #fakeForm input {
    /* CSS specific to iOS devices */
    height: 15vw !important;
    min-height: 15vw;
    max-height: 15vw;
  }
}
#writing #writingForm input:focus,
#writing #fakeForm input:focus {
  border: 1px solid #ced4da;
  box-shadow: none;
}
#writing #fakeForm input {
  background-color: transparent;
  border-color: transparent;
}
@media (min-width: 576px) and (max-width: 767px) {
  #writing #writingForm input,
#writing #fakeForm input {
    font-size: 9.1vw;
    height: 9.1vw !important;
    min-height: 9.1vw;
    max-height: 9.1vw;
    width: 9.1vw !important;
    min-width: 9.1vw;
    max-width: 9.1vw;
  }
  @supports (-webkit-touch-callout: none) {
    #writing #writingForm input,
#writing #fakeForm input {
      /* CSS specific to iOS devices */
      height: 18.2vw !important;
      min-height: 18.2vw;
      max-height: 18.2vw;
    }
  }
}
@media (max-width: 575px) {
  #writing #proposedWordLine,
#writing #resultsLine {
    height: 23vh;
  }
  #writing #writingForm,
#writing #fakeForm {
    height: 23vh;
  }
  #writing #writingForm input,
#writing #fakeForm input {
    font-size: 11.1vw;
    height: 11.1vw !important;
    min-height: 11.1vw;
    max-height: 11.1vw;
    width: 11.1vw !important;
    min-width: 11.1vw;
    max-width: 11.1vw;
  }
  @supports (-webkit-touch-callout: none) {
    #writing #writingForm input,
#writing #fakeForm input {
      /* CSS specific to iOS devices */
      height: 22.2vw !important;
      min-height: 22.2vw;
      max-height: 22.2vw;
    }
  }
}

/* Fine #writing */
/*
*   Modalità appaiamento parola con parola
*
*   NB: da rivedere completamente poiché ho modificato le unità di misura
*   dei font utilizzando quelle relative: vw, vh, vmin e vmax
*/
#pairingWtoW #proposedWordLine #proposedWord {
  padding: 3rem 0;
  font-size: 8vw;
}
#pairingWtoW #resultsLine .row {
  margin-top: 1.5rem;
}
#pairingWtoW #resultsLine .result-button {
  margin: 0;
  padding: 0;
  width: 96%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 8px 8px #999;
  font-size: 6vw;
  line-height: 6.75rem;
  background-color: lightskyblue;
  background-repeat: repeat-x;
  border-color: lightskyblue;
  color: darkslateblue;
}
#pairingWtoW #resultsLine .result-button:active {
  box-shadow: 4px 4px #777;
  transform: translateY(4px);
}
#pairingWtoW #resultsLine .btn.disabled {
  opacity: 0.85;
}
@media (min-width: 992px) and (max-width: 1199px) {
  #pairingWtoW #resultsLine .result-button {
    font-size: 4.8vw;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #pairingWtoW #resultsLine .result-button {
    font-size: 9.1vw;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  #pairingWtoW #proposedWordLine #proposedWord {
    font-size: 9.1vw;
  }
  #pairingWtoW #resultsLine .row {
    margin-top: 1rem;
  }
  #pairingWtoW #resultsLine .result-button {
    line-height: 4.5rem;
    font-size: 6.825vw;
    border-radius: 20px;
  }
}
@media (max-width: 575px) {
  #pairingWtoW #proposedWordLine #proposedWord {
    padding: 2rem 0;
    font-size: 11.1vw;
  }
  #pairingWtoW #resultsLine .row,
#pairingWtoW #resultsLine .col-12 + .col-12 {
    margin-top: 1rem;
  }
  #pairingWtoW #resultsLine .result-button {
    line-height: 3.24rem;
    font-size: 7.77vw;
    border-radius: 20px;
  }
}

/* Fine #pairingWtoW */
/*
* Status Line
*/
#status-line-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
#status-line-container #status-line {
  border: 1px solid #999;
  border-radius: 5px;
  color: #666;
  text-transform: uppercase;
  margin: 10px 0px 0px 0px;
  font-size: 0.8rem;
  line-height: 0.8rem;
}
#status-line-container #status-line .col-12,
#status-line-container #status-line .col-sm-6,
#status-line-container #status-line .col-md-3 {
  padding: 5px;
}

@media (max-width: 575px) {
  #status-line-container #status-line {
    font-size: 0.6rem;
    line-height: 0.6rem;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  #status-line-container #status-line {
    font-size: 0.7rem;
    line-height: 0.7rem;
  }
}
#writing #status-line-container #status-line #correctWords {
  text-transform: lowercase;
}

/* FINE Status Line */
/*  #settingsForm */
#settingsForm .tab {
  text-align: left;
  font-size: 1rem;
  line-height: 1.5rem;
  color: darkslategray;
  background-color: lightgray;
  border: 1px solid lightgray;
  border-radius: 15px;
  margin: 15px;
  padding: 15px;
  height: 100%;
}
#settingsForm h2 {
  text-align: center;
}
#settingsForm label {
  font-weight: 500;
}
#settingsForm input[type=radio] {
  margin-top: 0.4rem;
}
#settingsForm input[type=checkbox] {
  margin: 0px 3px 3px 0px;
}
#settingsForm input[type=number] {
  margin: 0px 0px 3px 3px;
  background-color: lightgray;
  border-color: white;
  color: darkslategray;
}
#settingsForm input[type=number]:disabled {
  opacity: 0.5;
}
#settingsForm input[type=number]:focus {
  background-color: white;
  border-color: white;
  outline: none;
}
@media (min-width: 768px) and (max-width: 991px) {
  #settingsForm .tab {
    font-size: 0.8rem;
  }
}
@media (max-width: 767px) {
  #settingsForm .tab {
    height: auto;
  }
}

/*  FINE #settingsForm */
/*  #additionalFeatures */
#additionalFeatures .btn-features {
  color: #6c757d;
  float: right;
  height: 50px;
  padding: 15px 15px 15px 5px;
  font-size: 1.75rem;
  line-height: 1.75rem;
}
#additionalFeatures .btn-features:hover, #additionalFeatures .btn-features:focus, #additionalFeatures .btn-features:active, #additionalFeatures .btn-features:visited {
  box-shadow: none;
}
#additionalFeatures #mode {
  text-align: left;
  font-size: 0.8rem;
  padding: 15px;
  float: left;
}
@media (max-width: 575px) {
  #additionalFeatures .btn-features {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
  #additionalFeatures #mode {
    font-size: 0.6rem;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  #additionalFeatures #mode {
    font-size: 0.7rem;
  }
}

/*  FINE #additionalFeatures */
#alertMessage {
  position: fixed;
  top: 3.5rem;
  left: 0px;
  border-radius: 0px;
  width: 100%;
  z-index: 1030;
}
#alertMessage p {
  font-size: 1rem;
  line-height: 1.5rem;
}

.form-group-bordered {
  padding: 10px;
  border: 1px solid darkgray;
  border-radius: 10px;
}

.col-form-label-bordered {
  padding: 0;
  margin-left: 1rem;
  width: auto;
}

/*# sourceMappingURL=custom.css.map */