:root {
  --brand: #5e6169;
  --background_image: url("/assets/dashboard/images/bg7.jpg");
  --text_color: #dcdfe4;
  --text_hover: #f5f5f5;
  --text_error: #F44336;
}
@font-face {
  font-family: 'ubuntu';
  src: url("/assets/dashboard/fonts/Ubuntu-R.ttf");
}
body {
  margin: 0;
  padding: 0;
  outline: 0;
  background-image: var(--background_image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: "ubuntu";
}
.main_body {
  background-image: var(--background_image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
#login {
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  backdrop-filter: blur(3px);
}
#login .login_form {
  height: 300px;
  width: 400px;
  max-width: 425px;
  position: relative;
  /* background-color: red; */
}
#login .login_form .bg1 {
  content: '';
  clip-path: polygon(1% 18%, 54% 18%, 67% 1%, 99% 1%, 99% 99%, 13% 99%, 1% 82%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(100%);
  width: calc(100%);
  border-radius: 17px;
  z-index: 3;
  backdrop-filter: blur(4px);
}
#login .login_form .bg2 {
  content: '';
  clip-path: polygon(0% 17%, 53% 17%, 66% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 83%);
  background-color: var(--brand);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(100%);
  width: calc(100%);
  border-radius: 4px;
  z-index: 1;
}
#login .login_form .bg3 {
  content: '';
  clip-path: polygon(1% 18%, 54% 18%, 67% 1%, 99% 1%, 99% 99%, 13% 99%, 1% 82%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(100%);
  width: calc(100%);
  border-radius: 17px;
  z-index: 2;
  background-image: var(--background_image);
  background-repeat: no-repeat;
  background-position: center center;
}
#login .login_form .heading {
  height: 43px;
  width: 254px;
  clip-path: polygon(0px 0px, 102px 0px, 111px 6px, 162px 6px, 170px 0px, 254px 0px, 236px 5px, 202px 40px, 225px 51px, 124px 51px, 95px 40px, 54px 40px, 37px 47px, 0px 47px, 7px 38px, 7px 7px);
  background: var(--brand);
  border: 1.9px solid #aaaaaa;
  box-sizing: border-box;
}
#login .login_form .heading h2 {
  margin: 0;
  font-size: 20px;
  line-height: 40px;
  padding-left: 20px;
  color: var(--text_color);
  letter-spacing: 3px;
}
#login .login_form .form_content {
  position: relative;
  z-index: 9;
  height: calc(100% - 70px);
  padding: 10px 25px;
}
#login .login_form .form_content span,
#login .login_form .form_content label,
#login .login_form .form_content input {
  color: var(--text_color);
}
#login .login_form .form_content .form_group {
  border: 2px solid var(--brand);
  box-sizing: border-box;
  margin-top: 25px;
  border-radius: 5px;
  position: relative;
}
#login .login_form .form_content .form_group.button_group {
  border: 0;
  position: absolute;
  right: 0;
  bottom: -34px;
  margin: 0;
}
#login .login_form .form_content .form_group .input_body {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px;
}
#login .login_form .form_content .form_group .input_body input {
  background-color: transparent;
  border: 0;
  outline: 0;
  flex: 1;
  padding: 10px 10px;
  font-size: 14px;
  font-family: "ubuntu";
}
#login .login_form .form_content .form_group.form_group_error .input_body .icon {
  color: var(--text_error);
  font-weight: bold;
}
#login .login_form .form_content .form_group.form_group_error label::after {
  background-color: var(--text_error);
}
#login .login_form .form_content .form_group label {
  position: absolute;
  right: -5px;
  bottom: 0;
  text-transform: uppercase;
  width: 61px;
  padding: 2px;
  padding-right: 15px;
  padding-left: 35px;
  font-size: 12px;
  cursor: pointer;
}
#login .login_form .form_content .form_group label .text {
  position: relative;
  z-index: 9;
}
#login .login_form .form_content .form_group label::after {
  content: '';
  background-color: var(--brand);
  height: 100%;
  width: 100%;
  position: absolute;
  right: 5px;
  bottom: 0;
  clip-path: polygon(20px 0px, 100% 0%, 100% 100%, 0% 100%);
  transition-duration: 0.3s;
}
#login .login_form .form_content .form_group .buttons {
  text-align: right;
  padding: 0px 45px;
}
#login .login_form .form_content .form_group .buttons button {
  border: 0;
  padding: 5px 25px;
  padding-top: 10px;
  border-radius: 2px;
  color: var(--text_color);
  text-transform: uppercase;
  margin: 0px 0px;
  position: relative;
  background-color: transparent;
  cursor: pointer;
}
#login .login_form .form_content .form_group .buttons button:disabled {
  cursor: progress;
}
#login .login_form .form_content .form_group .buttons button .text {
  position: relative;
  z-index: 9;
}
#login .login_form .form_content .form_group .buttons button .text:hover {
  color: var(--text_hover);
}
#login .login_form .form_content .form_group .buttons button::after {
  content: '';
  background-color: var(--brand);
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0px;
  bottom: 0px;
  clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 20px 100%);
}
#login .login_form .form_content .form_group .buttons button:nth-child(1) {
  padding-right: 10px;
}
#login .login_form .form_content .form_group .buttons button:nth-child(2) {
  padding-left: 10px;
}
#login .login_form .form_content .form_group .buttons button:nth-child(2)::after {
  clip-path: polygon(0px 0px, 100% 0px, calc(100% - 20px) 100%, 0% 100%);
}
#login .login_form .form_content .form_group .form_error,
#login .login_form .form_content .form_group .error {
  color: var(--text_error);
  font-size: 14px;
  padding: 5px;
}

  .school_title{
    font-size: 58px;
    color: #ffffff;
    margin-bottom: 80px;
    text-align: center;
    font-weight: 700;
  }
    .grid_container {
      display: grid;
      grid-template-columns: repeat(4, 220px);
      gap: 20px;
    }

    .role_button {
      background-color: #223ea3;
      color: white;
      border: none;
      padding: 20px 10px;
      text-align: center;
      font-size: 16px;
      /* font-weight: bold; */
      /* border-radius: 6px; */
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
    }

    .role_button:hover {
      background-color: #011a7b;
      color: rgb(168, 164, 164);
    }
/*# sourceMappingURL=./login.css.map */