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

:root {
   /* Colors */
   --primary-blue: #00aeee;
   --primary-blue-opacity: rgb(0, 174, 238, 0.3);
   --secondary-blue: #17469f;
   --primary-red: #c0191f;
   --secondary-red: #c4161c;
   --white: #ffffff;
   --black: #333333;
   --primary-gray: #545454;
   --secondary-gray: #bcbcbc;
   --tertiary-gray: #e3e3e3;
   --green: #2a8352;

   /* Typography */
   --ff-roboto: "Roboto", sans-serif;
   --ff-poppins: "Poppins", sans-serif;

   --fs-1: 0.875rem;
   --fs-2: 1rem;
   --fs-3: 1.25rem;
   --fs-4: 1.5rem;
   --fs-5: 1.75rem;
   --fs-6: 2rem;
   --fs-7: 2.5rem;

   --fw-400: 400;
   --fw-500: 500;
   --fw-600: 600;
   --fw-700: 700;

   /* Transitions */
   --transition-1: 0.25s ease-in-out;

   /* Spacing */
   --section-padding: 80px;

   /* Radius */
   --radius-4: 4px;
   --radius-5: 5px;
   --radius-8: 8px;
   --radius-10: 10px;
   --radius-15: 15px;

   /* Default Theme Colors */
   --bg-primary: hsl(0, 0%, 100%);
   --bg-secondary: hsl(0, 0%, 100%);
   --color-primary: hsl(0, 0%, 34%);
   --color-secondary: hsl(0, 0%, 37%);
   --card-shadow: hsla(0, 0%, 0%, 0.1);
   --input-bg: hsl(0, 0%, 93%);
   --shadow-1: 10px 10px 40px var(--card-shadow);
}

/* Dark Theme */
body.dark_theme {
   --bg-primary: hsl(0, 0%, 12%);
   --bg-secondary: hsl(0, 0%, 19%);
   --color-primary: hsl(0, 0%, 100%);
   --color-secondary: hsl(0, 0%, 62%);
   --card-shadow: hsla(0, 0%, 0%, 0.4);
   --input-bg: hsl(0, 0%, 16%);
   --shadow-1: 10px 10px 40px var(--card-shadow);
}

body.light_theme {
   --bg-primary: hsl(0, 0%, 100%);
   --bg-secondary: hsl(0, 0%, 100%);
   --color-primary: hsl(0, 0%, 12%);
   --color-secondary: hsl(0, 0%, 37%);
   --card-shadow: hsla(0, 0%, 0%, 0.1);
   --input-bg: hsl(0, 0%, 93%);

   --shadow-1: 10px 10px 40px var(--card-shadow);
}

/* Reset */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

li {
   list-style: none;
}

a {
   text-decoration: none;
   color: inherit;
}

input,
button,
select,
textarea {
   background: none;
   border: 1px var(--secondary-gray) solid;
   font: inherit;
}

button,
select {
   cursor: pointer;
}

input,
textarea {
   width: 100%;
}

/* :is(a, button, select):focus {
   outline-color: var(--primary-red);
   outline-offset: 3px;
} */

html,
body {
   height: 100%;
   display: flex;
   flex-direction: column;
}

html {
   font-family: var(--ff-roboto);
   scroll-behavior: smooth;
}

body {
   color: var(--color-primary);
   transition: var(--transition-1);
}

button {
   font-size: 16px;
   cursor: pointer;
}

label {
   margin-bottom: 5px;
}

.page-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
   height: 100vh;
}

.form-container {
   display: flex;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   width: 45%;
   flex: 1;
}

.form-login {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 450px;
   overflow: hidden;
}

#login-form {
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 70%;
   height: 480px;
   overflow: hidden;
   background-image: linear-gradient(to bottom, var(--white), 5%, var(--secondary-blue));
   border-radius: 20px;
}

.bg-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-content: center;
   width: 60%;
   height: 100vh;
   background: url("../img/bg_3.jpg") center repeat, rgba(255, 255, 255, 0.4);
}

.image-bg {
   align-content: center;
   text-align: center;
   flex: 1;
   border-left: 1px var(--tertiary-gray) solid;
}

.image-bg img {
   width: 70%;
}

.logo-login {
   display: flex;
   justify-content: center;
   margin: 20px 0 30px 0;
}

.logo-login img {
   padding: 0;
   height: 40px;
}

.auth-form {
   position: absolute;
   padding: 0;
   opacity: 0;
   pointer-events: none;
   transition: opacity 300ms, transform 500ms;
}

.auth-form.active {
   opacity: 1;
   transform: translateY(0) !important;
   pointer-events: all;
}

#login-form.auth-form {
   transform: translateY(-100%);
}

#sign-up-form.auth-form,
#forgot-pw-form.auth-form {
   transform: translateY(100%);
}

.auth-form__header {
   margin-bottom: 2rem;
}

.auth-form__header h1 {
   font-size: 20px;
   font-weight: 500;
   color: #fff;
}

.auth-form__footer {
   display: flex;
   justify-content: center;
   margin-top: 10px;
}

.centralize {
   display: flex;
   justify-content: right;
   margin-top: -5px;
}

.centralize a {
   color: #fff;
   text-decoration: none;
   font-size: 0.8rem;
}

.auth-form button[type="button"] {
   background-color: transparent;
   border: none;
   text-decoration: underline;
   font-size: 14px;
   font-weight: 600;
   padding: 0;
   transition: opacity 300ms ease-in-out;
}

.auth-form button[type="button"]:hover {
   opacity: 0.8;
}

.auth-form button[type="submit"] {
   background-color: var(--primary-blue);
   color: #fff;
   font-weight: 600;
   border: none;
   border-radius: 8px;
   padding: 10px 35px;
   font-size: 14px;
   transition: background-color 300ms ease-in-out;
}

.auth-form button[type="submit"]:hover {
   background-color: #fff;
   border: 1px var(--tertiary-gray);
   color: #000;
}

.form-group {
   display: flex !important;
   flex-direction: column;
   margin-bottom: 25px;
}

.form-group label {
   color: #fff;
   font-size: 14px;
}

.form-group input {
   background-color: #f9f9f9;
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 8px 12px;
   transition: background-color 300ms ease-in-out;
   width: 340px;
   outline: none;
}

.btn-fixo {
   background: #005eff;
   border: 0;
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 5px 15px;
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
   font-family: Montserrat, sans-serif;
   font-size: 0.9em;
   margin: 5px;
   padding: 12px 30px !important;
   text-align: center;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   transition: 0.25s ease-in-out;
   margin-top: 1rem;
}

.forgot-password {
   color: #eaebec;
   transition: 0.25s ease-in-out;
}

.forgot-password:hover {
   scale: 1.02;
   text-decoration: underline;
}

.btn-fixo:hover {
   scale: 1.02;
}

.input-email,
.input-password,
.input-phone {
   display: flex;
   position: relative;
}

.input_wrapper {
   position: relative;
}

.input-icon {
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 12px;
   transform: translateY(-50%);
   margin-right: 15px;
   color: var(--secondary-gray);
}

.input-email input,
.input-password input,
.input-phone input {
   flex: 1;
   padding-left: 35px;
}

.input_icon,
.email_icon {
   position: absolute;
   right: -10px;
   bottom: -10px;
   width: 30px;
   height: 30px;
   padding: 2px;
   transform: translate(-50%, -50%);
   transform-origin: center;
}

.input_icon:hover {
   cursor: pointer;
}

.input__icon-wrapper {
   position: absolute;
   top: 50%;
   right: 12px;
   transform: translateY(-50%);
   cursor: pointer;
}

.input__icon,
.confirm__icon {
   color: #999;
   font-size: 20px;
}

.input__icon:hover,
.confirm__icon:hover {
   color: #333;
}

.footer-login {
   display: none;
}

/* The actual popup */
.popuptext {
   visibility: hidden;
   width: 160px;
   background-color: #555;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 8px 0;
   position: absolute;
   z-index: 1;
   bottom: 90%;
   left: 50%;
   margin-left: -80px;
   font-size: 13px;
}

/* Popup arrow */
.popuptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.show {
   visibility: visible;
   -webkit-animation: fadeIn 1s;
   animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.footer-image {
   display: flex;
   position: relative;
   bottom: 0;
}

.footer-image img {
   width: 100%;
   bottom: 0;
}

@media screen and (max-width: 1280px) {
   .auth-form {
      width: 390px !important;
      height: 460px !important;
   }
}

@media screen and (max-width: 820px) {
   .bg-container {
      display: none;
   }

   .page-container {
      background: url("../img/bg_3.jpg") center repeat, rgba(255, 255, 255, 0.4);
   }

   .form-login {
      width: 90%;
   }

   #login-form {
      width: 55% !important;
   }

   .form-group input {
      width: 370px;
   }

   .auth-form__header h1 {
      font-size: 18px;
   }

   .auth-form__footer {
      margin-top: 8px;
   }

   .logo-login {
      margin: 10px 0 20px 0;
   }

   .footer-login {
      display: block;
   }
}

@media screen and (max-width: 576px) {
   .form-login {
      display: flex !important;
      flex-direction: column;
      align-content: center;
      align-items: center;
      width: 100%;
      padding: 0 10px !important;
   }

   #login-form {
      display: flex;

      width: 90% !important;
   }

   .input__icon-wrapper {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
   }

   .form-group input {
      max-width: 100%;
   }

   .input_wrapper {
      display: flex !important;
      justify-content: center !important;

      width: 95%;
   }
}