.header {
   --background-color: rgba(21, 34, 43, 0.85) !important;
}

.section-title h2 {
   font-weight: bold;
}

.auth-box {
   display: flex;
   border-radius: var(--border-radius);
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
   justify-content: center;
   padding: 3rem;
   width: 950px;
}

.auth-form {
   margin-left: 3rem;
   width: 100%;
}

.form-title {
   font-weight: bold;
   margin-bottom: 10px;
}

.error-message {
   color: red;
   font-size: 18px;
   margin-bottom: 23px;
}

.auth-image {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.auth-image img {
   margin-bottom: 1.3rem;
}

.auth-image a {
   text-decoration: underline;
}

.form-group {
   position: relative;
   margin-bottom: 25px;
   width: 100%;
}

.input-label {
   position: absolute;
   left: 0;
   top: 3px;
}

.auth-input {
   border: none;
   border-bottom: 1px solid var(--default-color);
   width: 100%;
   padding: 6px 30px;
   outline: none;
}

.input-label i {
   font-size: 20px;
}

.auth-input:focus,
.auth-input:hover {
   color: var(--accent-color);
}

.auth-input:focus + .input-label,
.auth-input:hover + .input-label {
   color: var(--accent-color);
}

.auth-input:focus + .input-label i,
.auth-input:hover + .input-label i {
   color: var(--accent-color);
}

.auth-input:hover {
   border-bottom: 1px solid var(--accent-color);
}

.auth-submit {
   border: none;
   background: color-mix(in srgb, var(--accent-color), transparent 20%);
   color: var(--bs-body-bg);
   padding: 10px 20px;
   border-radius: var(--border-radius);
   height: 50px;
}

.auth-submit:hover {
   background: var(--accent-color);
}

.auth-input-error {
   text-align: center;
   width: -moz-available;
   width: -webkit-fill-available;
}

.g-sign-in-button *,
.g-sign-in-button *:before,
.g-sign-in-button *:after {
   box-sizing: border-box;
}

.g-sign-in-button {
   /* margin: ; */
   display: flex;
   width: 240px;
   height: 50px;
   background-color: #4285f4;
   color: #fff;
   border-radius: 5px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
   transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
}

.g-sign-in-button:hover {
   cursor: pointer;
   -webkit-box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
   box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
   text-decoration: none !important;
}

.g-sign-in-button:active {
   background-color: #3367d6;
   transition: background-color 0.2s;
}

.g-sign-in-button .content-wrapper {
   height: 100%;
   width: 100%;
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.g-sign-in-button img {
   width: 18px;
   height: 18px;
}

.g-sign-in-button .logo-wrapper {
   padding: 15px;
   background: #fff;
   width: 48px;
   height: 100%;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.g-sign-in-button .text-container {
   font-family: Roboto, arial, sans-serif;
   font-weight: 500;
   letter-spacing: 0.21px;
   font-size: 16px;
   line-height: 48px;
   vertical-align: top;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 180px;
   text-align: center;
   color: white;
}

/* media queries */
@media (max-width: 992px) {
   .auth-box {
      width: 95%;
   }

   .auth-form {
      margin: 0 0 0 3rem;
      width: 100%;
   }
}

@media (max-width: 768px) {
   .section-title {
      width: 90%;
   }
   .auth-form {
      margin: 0;
   }

   .auth-box {
      flex-direction: column-reverse;
      width: 95%;
      box-shadow: none;
      padding: 0 3rem;
   }

   .auth-image img {
      display: none;
   }

   .auth-submit {
      width: 100%;
      margin-bottom: 1rem;
   }

   .g-sign-in-button,
   .g-sign-in-button .text-container {
      width: 100%;
      height: auto;
   }
}