:root {
   --cor-de-fundo: #FFFFFF;
   --cor-de-fundo-secundaria: #F9FAFB;
   --cor-pricipal: #F70A26;
   --cor-link: #E5E9F2;
   --cor-links: #878787;
   --cor-titulo: #47525E;
   --cor-fonte-sucesso: #178344;
   --cor-sucesso: #A8F0C6;
   --cor-fonte-erro: #8F130C;
   --cor-erro: #f1b7b4;
 }

 * {
   padding: 0;
   margin: 0;
 }

 .form-signin {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 100vh;
   grid-template-areas: "img login";
 }

 .form-signin input:focus {
   border: 1px solid var(--cor-pricipal) !important;
   box-shadow: none !important;
 }
 .container-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.container-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  background: linear-gradient(to left, rgb(255, 255, 255) , rgba(0, 0, 0, 0) 60%);
  z-index: 1;
}

.container-img img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

 .logo-login {
   align-items: center;
   width: 175px;
 }

 .container-titulo {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
 }

 .titulo {
   color: var(--cor-titulo) !important;
   text-align: center;
 }

 .container-login {
   grid-area: login;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 15px;
   width: 50%;
   margin: 0 auto;
 }

 .secao-input {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .botao-login {
   padding: 16px 8px;
   font-weight: bold;
   border-radius: 5px;
   background-color: var(--cor-pricipal);
   background-size: 200%;
   border: none;
   font-size: 1.2rem;
   color: var(--cor-de-fundo);
   font-family: 'Poppins', sans-serif;
   cursor: pointer;
   transition: .5s;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .link-login {
   color: var(--cor-links);
   font-family: 'Lato', sans-serif;
   font-size: 14px;
   text-decoration: none;
 }

 .bi {
   margin-right: 5px !important;
   margin-top: 3px;
 }

 .msg_error {
   color: var(--cor-fonte-erro);
   border-radius: 5px;
   background-color: var(--cor-erro);
   padding: 2px;
   font-family: 'Lato', sans-serif;
   font-size: 13px;
 }

 .msg_success {
   color: var(--cor-fonte-sucesso);
   border-radius: 5px;
   background-color: var(--cor-sucesso);
   padding: 2px;
   font-family: 'Lato', sans-serif;
   font-size: 13px;
 }

 .alert__login {
   display: flex;
   position: relative;
   width: 100%;
   justify-content: center;
 }

 footer {
   position: fixed;
   bottom: 20px;
   right: 20px;
   color: var(--cor-font-footer);
   font-size: 13px;
   text-align: right;
 }

 .versao {
   padding: 1px 15px;
   border-radius: 9999px;
   border: 1px solid #d6d6d6;
   background-color: #ececec;
   color: #b1b1b1;
   cursor: pointer;
 }

 /* (320x480) iPhone (Original, 3G, 3GS) */
 @media only screen and (min-width: 320px) and (max-width: 480px) {
   .form-signin {
     display: grid;
     grid-template-rows: 100vh;
     grid-template-columns: none;
     grid-template-areas: "login";
   }

   .container-img {
     display: none;
   }

   .container-login {
     width: auto;
   }
 }

 /* (480x800) Android */
 @media only screen and (min-width: 480px) and (max-width: 800px) {
   .form-signin {
     display: grid;
     grid-template-rows: 100vh;
     grid-template-columns: none;
     grid-template-areas: "login";
   }

   .container-img {
     display: none;
   }

   .container-login {
     width: auto;
   }
 }

 /* (640x960) iPhone 4 & 4S */
 @media only screen and (min-width: 640px) and (max-width: 960px) {
   .form-signin {
     display: grid;
     grid-template-rows: 100vh;
     grid-template-columns: none;
     grid-template-areas: "login";
   }

   .container-img {
     display: none;
   }

   .container-login {
     width: auto;
   }
 }

 /* (720x1280) Galaxy Nexus, WXGA */
 @media only screen and (min-width: 720px) and (max-width: 1280px) {
   .form-signin {
     display: grid;
     grid-template-rows: 100vh;
     grid-template-columns: none;
     grid-template-areas: "login";
   }

   .container-img {
     display: none;
   }

   .container-login {
     width: auto;
   }
 }

 /* (1024x768) iPad 1 & 2, XGA */
 @media only screen and (min-width: 768px) and (max-width: 1024px) {}

 /* (2048x1536) iPad 3 */
 @media only screen and (min-width: 1536px) and (max-width: 2048px) {}

 /* (1280x720) Galaxy Note 2, WXGA */
 @media only screen and (min-width: 720px) and (max-width: 1280px) {}

 /* (1280x1024) SXGA Display */
 @media screen and (min-width: 1280px) {}

 /* (1366x768) WXGA Display */
 @media screen and (min-width: 1366px) {}

 /* (1440x900) WXGA+ Display */
 @media screen and (min-width: 1440px) {}

 /* (1680x1050) WSXGA+ Display */
 @media screen and (min-width: 1680px) {}

 /* (1920x1080) Full HD Display */
 @media screen and (min-width: 1920px) {}