@import url('http://fonts.googleapis.com/css?family=Roboto');@import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');            body {            margin: 0;            font-family: Roboto, sans-serif;            display: flex;            flex-direction: column;            align-items: center;            justify-content: center;            min-height: 100vh;            background-color: #f0f0f0;        }        .container {            display: flex;            max-width: 800px;            background-color: #ffffff;            border-radius: 10px;            overflow: hidden;            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);        }        .image-container {            flex: 1;            padding: 20px;            display: flex;            justify-content: center;            align-items: center;        }					        .image-container img {            max-width: 100%;            height: auto;        }				.credit {    background-color: rgba(225, 225, 225, 0.8);    color: black;    padding: 5px 10px;    margin-top: 5px;    border-radius: 5px;    text-align: center;	font-family: 'Roboto';	font-size: 12px;	}a {            color: black; /* Defina a cor desejada para os links */            text-decoration: none; /* Remova a sublinhado dos links */        }				        .form-container {            flex: 1;            padding: 20px;            display: flex;            flex-direction: column;            justify-content: center;            align-items: center;            font-weight: bold;        }        .form-container h1 {            margin-bottom: 20px;            font-size: 24px;            font-family: "Helvetica Neue", sans-serif;        }        .form-container input,        .form-container button {            margin-bottom: 15px;            width: 100%;            max-width: 300px;            padding: 10px;            border: none;            border-bottom: 2px solid #ccc;            background-color: #f0f0f0;            font-size: 16px;            outline: none;            transition: border-color 0.3s, background-color 0.3s;        }        .form-container input:focus,        .form-container button:focus {            border-color: blue;            background-color: #fff;        }								/* Definindo variáveis para as cores principais */:root {    --primary-color: #007bff;    --secondary-color: #0056b3;    --text-color: #ffffff;}/* Estilo base para o botão */.form-container button {    background-color: var(--primary-color);    color: var(--text-color);    border: none;    border-radius: 5px;    padding: 12px 20px;    font-size: 16px;    cursor: pointer;    transition: background-color 0.3s;}/* Efeito de hover para o botão */.form-container button:hover {    background-color: var(--secondary-color);}/* CSS adicional para o posicionamento dos ícones */		.input-container {			position: relative;		}				.input-icon {    position: absolute;    top: 36.5%;    transform: translateY(-50%);    left: -40px;    color: rgba(0, 0, 0, 0.5);    z-index: 1;    width: 42px; /* Largura do ícone */    height: 40.5px; /* Altura do ícone */    display: flex;    justify-content: center;    align-items: center;    background-color: lightblue; /* Cor de fundo azul claro */    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */    border-top-left-radius: 50%; /* Canto superior esquerdo arredondado */    border-bottom-left-radius: 50%; /* Canto inferior esquerdo arredondado */    border-top-right-radius: 0; /* Canto superior direito reto */    border-bottom-right-radius: 0; /* Canto inferior direito reto */}				.input-icon i {			font-size: 16px;		}				.input-field {			padding-left: 40px; /* Ajuste esse valor para alinhar o ícone corretamente */			margin-bottom: 10px; /* Adicione margem para separar os inputs */			padding-left: 30px; /* Mantenha esse valor para o texto não se sobrepor ao ícone */		}				.login-button-container {  display: flex;  justify-content: center;  align-items: center;  height: 100vh; /* Isso garante que o container ocupe toda a altura da tela */}.login-button {  position: relative;  z-index: 2;  display: flex;  flex-direction: column; /* Mude para column para alinhar verticalmente */  align-items: center;  justify-content: center;  width: 200px; /* Ajuste a largura conforme necessário */  height: 50px; /* Ajuste a altura conforme necessário */  color: white;  font-size: 14px;  font-weight: 600;  text-transform: uppercase;  transition: color 0.5s ease-in-out, background 0.5s ease-in-out, transform 0.3s ease-in-out;  background: linear-gradient(45deg, #91C9FF, #4F95DA);  cursor: pointer; /* Adicione um cursor de clique */}.login-button:hover {  background: linear-gradient(45deg, #4F95DA, #91C9FF); /* Troque as cores no hover */  }.login-button .button-content {  transition: color 0.5s ease-in-out;}.login-button:hover .button-content {  color: #fff;}