@font-face {
  font-family: SemconMono;
  src: url(../fonts/semcon_mono-webfont.woff2);
}

@font-face {
  font-family: SemconMonoBold;
  src: url(../fonts/semcon_mono_bold-webfont.woff2);
}

@font-face {
  font-family: SemconGeomanist;
  src: url(../fonts/semcon_geomanist-webfont.woff2);
}

:root {
  --primary-color: #ff6357;
}

body{
  font-family: SemconMono;
}

table,
table th{
  white-space: nowrap;
}

.sidebar-semcon,
.navbar-semcon{
  background-color: var(--primary-color);
}

.navbar-light
.navbar-nav
.nav-link{
  color: #fff;
}

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(../img/semcon-login-backgroound.jpg) no-repeat center center/cover;
}

.wrapper__login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper__login .wrapper__video{
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.wrapper__h1{
  position: absolute;
  top: 0;
  z-index: 2;
  max-width: 350px;
  width: 100%;
  margin: 2rem 0 0 2rem;
}

.h1__login{
  color: #fff;
  font-size: 2.5rem;
  font-family: Geomanist, Arial;
  line-height: .93em;
  text-transform: uppercase;
  font-weight: 800;
}

.h1-color1{
  color: #d8d4cb;
}

.h1-color2{
  color: #a6c0c9;
}

.h1-color3{
  color:#cfced8;
}

.h1-color4{
  color: #d8b3b2;
}

.login__area{
  background-color: #ffffff;
  opacity: 0.9;
  
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  
  margin: auto;
  max-width: 350px;
  width: 100%;
  padding: 2rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login__logo img{
  height: 160px;
  width: auto;
  max-width: 280px;
  transition: all .2s ease-in-out;
}

.login__logo img:hover{
  opacity: 0.7;
  transform: scale(1.1);
}

.login__form,
.register__form{
  width: 100%;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
}

.register__form label{
  margin-top: 0.5rem;
}

.login__form .form-input,
.register__form .form-input{
  margin: 0.6rem 0;
  border: 1px solid #999;
  border-radius: 4px;

  font-family: SemconMono;
  padding: 10px;
}

.login__form .form-button,
.register__form .form-button{
  background-color: var(--primary-color);
  margin: 0.5rem 0;
  border: none;
  border-radius: 4px;
  padding: 10px;

  font-family: SemconMono;
  color: #fff;
  font-size: 1rem;

  transition: all .2s ease-in-out;
}

.login__form .h1-title{
  margin-bottom: 1rem;
}

.login__form .div-link-pass{
  margin: 1rem 0;
}

.login__form button:hover,
.register__form button:hover{
  cursor: pointer;
  opacity: 0.8;
  transform: scale(1.01);
}

.flex__column{
  display: flex;
  flex-direction: column;
}

.login__register{
  margin: 0.9rem 0;
}

.register-form__small{
  font-size: 0.8rem;
}

.login__footer{
  font-size: 0.7rem;
}

.s-link{
  color: var(--primary-color);
  font-weight: bold;
  text-decoration: none;
}

.s-link:hover{
  color: var(--primary-color);
  opacity: 0.7;
  text-decoration: underline;
}

@media (max-width: 764px){
  .wrapper__video{
    display: none;
  }

  .h1__login{
    display: none;
  }

  .login__area{
    width: 100%;
    padding: 1rem;
    right: auto;
    left: 0;
    max-width: 75%;
  }
}

@media (max-width:440px){
  .body__login{
    background-image: url(../img/semcon-login-backgroound-mb.jpg);
    background-size: auto;
  }

  .bg-video-wrap{
    display: none;
  }

  .wrapper__h1{
    margin: 2rem;
  }

  .login__area{
    background: #ffffffff;
    max-width: 92.8%;
    height: auto;
  }

  .footer__name,
  .footer_developed{
    display: none;
  }

  .main-footer{
    background-color: var(--primary-color);
  }
}

.display-none {
  display: none;
}

.test__answer{
  outline: 0px;
  text-decoration: none;
  color: #333;
  background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
  padding: 10px 15px;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease 0s;
  display: block;
}

.test__answer input[type=radio]{
  display: none;
}

.test__answer:hover,
.test__answer:focus{
  opacity: .7;
}

.test__answer[data-selected="true"] {
  color: #fff;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
  background-blend-mode: multiply,multiply;
}