/* login */

.fa-exclamation-triangle:before {
  content: '\f071';

  font-family: 'Font Awesome 5 Free' !important;
}

.fa-check-circle:before {
  content: '\f058';

  font-family: 'Font Awesome 5 Free' !important;
}
div.infobox.fa-check-circle::before {
  display: none;
}
#resetpassform > p.description {
  text-transform: none;
}

@media only screen and (max-width: 450px) {
  body:not(.navigation-hidden) {
    overflow: visible;
  }
}

#content-container-login {
  width: 100%;

  position: relative;

  z-index: 17;

  padding-left: 0px;

  height: 100%;
}

#woffice-login-right > div > form > div.accept-checkbox-container > p {
  text-transform: none !important;

  margin: 0px 0px !important;

  text-align: left !important;
}

#woffice-login {
  background-color: #efefef !important;
}

#woffice-login-left-custom {
  background-color: #78b928;

  width: 95%;

  height: 550px;

  top: 0px;

  margin-top: 24px;

  margin-left: auto;

  margin-right: auto;
}

body.layout-2 #woffice-login-right {
  position: relative;

  top: -200px;

  width: 594px;

  padding: 30px 100px 30px;

  margin: 0px auto 50px;

  height: auto;

  max-height: none;

  overflow: visible;

  border-radius: 5px;

  z-index: 10;

  box-shadow: 0 0 4rem rgb(0 0 0 / 28%);
}

.login-title-container {
  width: 100%;

  height: 300px;

  display: inline-block;

  text-align: center;
}

.login-title {
  color: white;

  font-size: 36px;

  margin-top: 100px;

  font-family: 'UniversForSchueco-330Light' !important;
}

.logo-schuco-login {
  width: 525px;
  max-width: 90%;
  height: auto;
  margin: 40px auto 0;
}

#woffice-login form label {
  margin-bottom: 0;

  font-weight: 500;

  width: 100%;

  color: black !important;
}

#loginform > p.login-username > label,
#loginform > p.login-password > label {
  font-family: 'UniversForSchueco-530Med' !important;

  font-size: 16px !important;

  text-transform: none !important;
}

#loginform > p:nth-child(3) > a {
  font-family: 'UniversForSchueco-430Reg' !important;

  font-size: 13px !important;
}

.login-submit {
  text-align: center;
}

#woffice-login form .login-submit input {
  margin: 50px 0 30px 0;

  border: 0 !important;

  width: 50% !important;

  height: 70px;

  border-radius: 0px !important;

  background-color: #666666 !important;

  float: none !important;
}

a.password-lost {
  position: static;

  font-style: normal !important;

  text-transform: none !important;

  color: #78b928 !important;

  top: -2rem;

  text-align: left;

  display: block;
}

#woffice-login form p.login-password:after,
#woffice-login form p.login-username:after {
  content: '' !important;
}

/* login accept charte */

#accept-alert {
  color: red;

  font-size: 12px;

  text-transform: uppercase;

  width: 100%;
}

.accept-submit-container {
  text-align: center;
}

#accept-submit {
  margin: 20px 0 30px 0;

  border: 0 !important;

  width: 50% !important;

  height: 70px;

  border-radius: 0px !important;

  background-color: #666666 !important;

  float: none !important;

  font-family: 'UniversForSchueco-430Reg' !important;

  font-size: 21px !important;

  text-transform: none !important;

  font-weight: 100 !important;
}

.login-accept-consult-container {
  display: grid;

  grid-template-columns: 60% 40%;

  height: 50px;

  box-shadow: inset 0 -1px 0 0 #e6e6e6;

  text-align: center;

  width: 100%;

  margin: 0px auto 20px;

  padding-left: 10px;
}

.login-accept-title {
  text-align: center;

  font-family: 'UniversForSchueco-630Bold' !important;

  font-size: 26px;

  font-weight: bold;
}

.login-accept-text {
  line-height: 30px;

  font-family: 'UniversForSchueco-430Reg' !important;

  font-size: 16px !important;
}

.login-accept-consult {
  grid-column: 1;

  font-family: 'UniversForSchueco-530Med' !important;

  font-size: 13px !important;

  font-weight: normal;

  font-stretch: normal;

  font-style: normal;

  line-height: normal;

  letter-spacing: normal;
}

.login-accept-link {
  grid-column: 2;

  text-align: left;

  font-family: 'UniversForSchueco-430Reg' !important;

  font-style: 13px !important;

  color: #78b928 !important;
}

.accept-checkbox-container {
  display: grid;

  grid-template-columns: 10% 90%;

  text-align: center;

  width: 80%;

  margin: 0 auto;
}

#accept-checkbox {
  grid-column: 1;

  width: 20px;

  height: 20px;
}

#woffice-login-right > div > div.accept-checkbox-container > p {
  grid-column: 2;

  text-align: left;

  font-family: 'UniversForSchueco-430Reg' !important;

  font-size: 13px !important;
}

@media only screen and (max-width: 1400px) {
  .tutorial-text-container {
    margin: 0px 0px 0px 20% !important;
  }

  .tutorial-button-form {
    width: 40%;
  }
}

@media only screen and (max-width: 1200px) {
  .tutorial-text-container {
    margin: 0px 0px 0px 15% !important;
  }
}

@media only screen and (max-width: 1000px) {
  #content-container-login {
    height: 85%;
  }

  .tutorial-button-form {
    width: 100%;
  }

  .tutorial-text-container {
    margin: 0px 0px 0px 10% !important;
  }
}

@media only screen and (max-width: 880px) {
  body .tutorial-button {
    margin: 10px auto 0px !important;
  }

  .tutorial-text-title {
    padding-bottom: 20px;
  }

  .tutorial-text-container {
    grid-column: 1;

    padding: 80px 0px 0px;

    width: 450px;

    position: relative;

    margin: 0 auto !important;
  }

  body.layout-2 #woffice-login-right {
    width: 594px;

    padding: 20px;

    height: auto;
  }

  #woffice-login-left-custom {
    margin-top: 10px;
  }

  .login-accept-consult-container {
    display: block;

    height: 70px;
  }

  .login-title {
    font-size: 36px;
  }

  #content-container-login {
    height: 82%;
  }

  .schuco-tutorial-presentation-container {
    height: 550px !important;

    display: block !important;
  }

  .tutorial-text-title {
    font-size: 26px;
    font-weight: bold;
    max-width: 90%;
    text-align: center !important;
    margin: 0 auto;
    display: inline-block;
  }

  .tutorial-text-paragraph {
    font-size: 21px;
    text-align: center !important;
  }
}

@media only screen and (max-width: 600px) {
  body.layout-2 #woffice-login #woffice-login-right {
    top: -230px;
  }

  .schuco-video-container iframe {
    width: 100% !important;
  }

}

@media only screen and (max-width: 500px) {
  .login-title {
    font-size: 30px;
  }

  .tutorial-button {
    width: 250px !important;
    height: 90px !important;
  }

  .tutorial-text-container {
    grid-column: 1;

    padding: 20px 0px 0px !important;

    width: 350px !important;

    position: relative;

    margin: 0 auto;
  }
}

@media only screen and (max-width: 400px) {
  #accept-submit {
    width: 70% !important;
  }

  .accept-text {
    margin-left: 10px;
  }

  .login-title {
    font-size: 20px;
  }

  .tutorial-text-container {
    grid-column: 1;

    padding: 20px 10px 0px !important;

    width: 350px;

    position: relative;

    margin: 0 auto;
  }
}

/* tutorial */

.tutorial-content-container {
  background-color: #efefef;
}

.schuco-video-container {
  width: 95%;

  height: 550px;

  background-color: #8ea5ae;

  margin-bottom: 40px;

  margin-right: auto;

  margin-left: auto;

  position: relative;

  top: 24px;
  text-align: center;
  padding-top: 100px;
}

.schuco-tutorial-presentation-container {
  width: 95%;

  height: 350px;

  margin-right: auto;

  margin-left: auto;

  background-color: #fff;

  display: grid;

  grid-template-columns: 50% 50%;

  text-align: center;
}

.tutorial-text-container {
  grid-column: 1;

  padding: 80px 0px 0px;

  width: 450px;

  position: relative;

  margin: 0 auto;
}

.tutorial-text-title {
  font-family: 'UniversForSchueco-530Med' !important;

  font-size: 26px !important;

  text-align: left;

  font-weight: bold;
}

.tutorial-text-paragraph {
  font-family: 'UniversForSchueco-430Reg' !important;
  font-size: 21px !important;
  text-align: left;
}

.tutorial-button {
  grid-column: 2;
  margin: 150px auto 0px !important;
  border: 1px solid #666666 !important;
  background-color: #666666 !important;
  width: 350px;
  height: 70px;
  padding: 20px 10px;
  color: white!important;
}

body > div.tutorial-content-container > div.schuco-tutorial-presentation-container > div.tutorial-button > a {
  font-family: 'UniversForSchueco-430Reg' !important;

  font-size: 21px !important;
}

.tutorial-button > a {
  color: white !important;
}

a.tutorial-button {
    text-transform: uppercase;
    color: #fff;
    float: none;
    font-weight: 700;
    margin: 15px 0;
    border: 0;
    border-radius: .2rem;
    white-space: normal;
    font-size: .9rem;
}

a.tutorial-button:hover {
  opacity: .8;
}

a.tutorial-button-mobile{
  display:none;
}

body > div.tutorial-content-container > div.schuco-tutorial-presentation-container > form > p > input.tutorial-button {
  border: 1px solid #666666 !important;

  background-color: #666666 !important;

  float: none !important;
}

.empty-footer {
  width: 100%;

  height: 50px;

  background-color: #efefef !important;
}

.video-player-icon-container {
  text-align: center;

  height: 100px;
}

.far.fa-play-circle {
  font-size: 80px;

  padding-top: 80px;
}

.first-connexion-footer-text {
  color: black;

  font-size: 16px;

  font-family: 'UniversForSchueco-430Reg' !important;

  text-transform: uppercase;
}

.first-connexion-footer-text-container {
  text-align: center;

  position: relative;

  bottom: 180px;
}

.video-timer {
  color: black;

  font-size: 16px !important;

  font-family: 'UniversForSchueco-430Reg' !important;

  padding-top: 20px !important;
}