* {
  margin: 0;
 padding: 0;
 font-family: "Roboto", sans-serif;
 box-sizing: border-box;
}

body {
 background: #f0f0f0;
 min-height: 100vh;
 margin: 0;
 padding: 0;
 background-image: url("/static/image/fundo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#mensagem_erro {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 6px;
  background-color: #ffdddd; /* vermelho claro */
  border: 1px solid #ff8888;
  text-align: center;
}

#mensagem_erro p {
  color: #a60000; /* vermelho escuro */
  font-size: 16px;
  font-weight: 500;
}

.main_container {
 display: flex;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
}

.left_panel {
 position: relative;
 background-color: #2d9596;
 width: 35%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding: 40px;
 color: white;
 overflow: hidden;
}

.left_panel .bg_image {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url('/static/image/fundo_barra_lateral.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 opacity: 0.2;
 z-index: 0;
}

.left_panel h1 {
 font-size: 48px;
 font-weight: bold;
 color: white;
}

.left_panel p {
 font-size: 25px;
 color: white;
}

.left_panel_text {
  align-self: anchor-center;
}

.right_panel {
 background-color: #ffffff;
 width: 65%;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 40px;
}

.card {
 width: 100%;
 max-width: 500px;
}

.label_float label {
 display: block;
 margin-bottom: 5px;
 font-size: 20px;
 color: #666;
 font-weight: 500;
}

.label_float input {
 width: 100%;
 padding: 12px;
 border: 1px solid #ddd;
 border-radius: 7px;
 font-size: 18px;
 background-color: #f8f8f8;
 transition: border-color 0.3s ease;
 outline: none;
}

.label_float {
 position: relative;
 margin-bottom: 20px;
}

.label_float input:focus {
 border-color: #2d9596;
 background-color: #fff;
}

button {
 width: 100%;
 background-color: #50a8ae;
 color: #ffffff;
 border: none;
 padding: 12px;
 font-weight: 600;
 font-size: 20px;
 border-radius: 25px;
 cursor: pointer;
 transition: background-color 0.3s ease;
 margin: 20px 0;
 text-transform: uppercase;
 margin-bottom: 30px;
}

button:hover {
 background-color: rgb(117, 195, 199);
}

.justify_center {
 display: flex;
 justify-content: center;
 margin-bottom: 15px;
}

p {
 font-size: 20px;
 text-align: center;
 color: #666;
 margin: 0;
}

p a {
 color: #4285f4;
 text-decoration: none;
 font-weight: 500;
}

p a:hover {
 text-decoration: underline;
}

.esqueci_senha {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 8px;
}

.esqueci_senha label {
 margin-bottom: 0;
}

.esqueci_senha a {
 color: #4285f4;
 font-size: 16px;
 text-decoration: none;
 font-weight: 500;
}

.esqueci_senha a:hover {
 text-decoration: underline;
}

.fa-eye-slash,
.fa-eye {
 position: absolute;
 right: 11px;
 top: 45px;
 font-size: 18px;
 cursor: pointer;
 color: #999;
}

.justify_center {
 display: flex;
 justify-content: center;
 margin-bottom: 4px;
}

hr {
 margin-bottom: 4%;
 width: 70%;
 border: none;
 border-top: 1px solid #e0e0e0;
}

.social_login_section {
 margin-top: 20px;
}

.social_login_section h3 {
 color: #999;
 font-size: 16px;
 font-weight: 400;
 text-align: center;
 margin-bottom: 15px;
 position: relative;
   margin-top: 65px;
}

.social_login_section h3::before,
.social_login_section h3::after {
 content: "";
 position: absolute;
 top: 50%;
 width: 35%;
 height: 1px;
 background-color: #e0e0e0;
}

.social_login_section h3::before {
 left: 0;
}

.social_login_section h3::after {
 right: 0;
}

.social_buttons {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.social_btn {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 12px 16px;
 border: 1px solid #ddd;
 border-radius: 8px;
 text-decoration: none;
 font-size: 18px;
 font-weight: 500;
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 color: #333;
}

.social_btn:hover {
 background-color: #f8f9fa;
 border-color: #ccc;
}

.social_btn_icon {
 width: 20px;
 height: 20px;
 margin-right: 12px;
 flex-shrink: 0;
}

.google_icon {
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285f4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334a853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23fbbc05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23ea4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E")
   center/contain no-repeat;
}

.password_container {
  position: relative;
}

.password_container input {
  padding-right: 40px; /* espaço pro ícone não ficar em cima do texto */
}

.password_container .toggle-password {
  position: absolute;
  right: 12px;
  top: 45px; /* ajusta conforme o seu input */
  cursor: pointer;
  font-size: 18px;
  color: #666;
}