html,
body {
  height: 100%;
  min-height: 100%;
  color: #333;
  font-size: 14px;
}

@font-face {
  font-family: 'UTM Davida', sans-serif;
  src: url(../fonts/UTM-Davida/UTM-Davida.ttf);
  src: local("UTM-Davida"), local("UTM Davida"), url(../fonts/UTM-Davida/UTM-Davida.ttf) format("ttf");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.container-fluid {
  padding: 0 0rem;
}

.main {
  position: relative;
  text-align: center;
}

.main .btn-back {
  position: absolute;
  padding: 1rem;
  top: 1rem;
  left: 1rem;
}

.main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  z-index: -1;
  background-image: url('../images/bg-login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.main::after {
  content: '';
  position: absolute;
  top: 0%;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: -1;
  background: rgba(255, 255, 255, 1);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(82%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 205, 159, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffcd9f', GradientType=0);

}

.logo {
  width: 100px;
}

@media screen and (max-width: 1300px) and (min-width: 767px) {
  .logo {
    width: 60px;
  }
}

/* .heading {
  font-family: 'UTM Davida', sans-serif;
  font-size: clamp(56px, 6vw, 82px);
  text-align: center;
  width: min-content;
  white-space: break-space;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
} */

.title-page {
  font-family: 'UTM Davida', sans-serif;
  text-align: center;
  font-size: clamp(24px, 3vw, 36px);
  color: #C61914;
  text-transform: uppercase;
}

.main .left,
.main .right {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.main .right {
  min-height: 100vh;
}

.main .col-sm-6 .right {}

.form-signin {
  margin: 100px 0;
  width: 100%;
  padding: 1rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.form-fields {
  max-width: clamp(360px, 4vw, 400px);
}
.form-label {
  /* font-size: 16px; */
}

.form-signin .form-control {
  font-size: 24px;
  background-color: #ffffff80;
  border-width: 0 0 1PX 0;
  border-color: #DEE2E6;
  border-radius: 0;
  font-weight: bold;
}

.form-signin .form-control.is-invalid {
  border-color: #C61914;
}

.btn-danger {
  background-color: #C61914;
}

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;

}

.divider::before,
.divider::after {
  content: '';
  position: relative;
  width: 50%;
  border-block-start: 1px solid transparent;
  border-block-start-color: inherit;
  border-block-end: 0;
  transform: translateY(50%);
  border-color: #D9D9D9;
}

.app-block {
  /* position: absolute; */
  width: 100%;
  bottom: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 4px;
}

@media screen and (max-width: 767px) {
  .container-fluid {
    padding: 0 2rem;
  }

  .main::before {
    width: 100%;
  }

  .main::after {
    display: none;
  }

  .form-signin {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(82%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 205, 159, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 82%, rgba(255, 205, 159, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffcd9f', GradientType=0);
  }
}

.btn {
  font-weight: 500;
}