@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
} 
:root {
    --primary-blue: #93FFF6; 
    --soft-purple: #772BD7; 
    --secondary-green: rgb(4, 117, 51); 
    --black: rgb(0, 0, 0); 
    --white: rgb(255, 255, 255); 
    --light-gray: rgb(212, 212, 212); 
    --purple: #240062; 
    --button: rgb(0, 0, 0); 
    --degrade: linear-gradient(to right, rgb(161, 253, 108) 10%, rgb(161, 253, 108) 50%); 
    --accent-orange: rgb(255, 165, 0); 
    --light-blue: rgb(173, 216, 230); 
}

.custom-header {
    background-color: var(--soft-purple); /* Substitua pela sua cor desejada */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0); /* Sombra para dar profundidade */
    z-index: 1000; /* Para garantir que o cabeçalho fique acima do conteúdo */
 }
 .profile-container {
    flex: 1;
}

.profile-image {
    background-color: rgb(212, 212, 212); /* Cor de fundo cinza */
    border-radius: 50%; /* Faz a imagem ficar redonda */
    display: inline-block; /* Para centralizar o fundo */
    padding: 5px; /* Espaçamento entre a imagem e o fundo */
}


.btn-custom {
    background-color: #772BD7; /* Cor do botão */
    color: #ffffff; /* Cor do texto do botão */
}
.btn-custom:hover {
    background-color: #772BD7; /* Cor ao passar o mouse */
    color: #93FFF6; /* Cor do texto do botão */
}
h2, h4, h3 {
    color: #ffffff; /* Cor do texto */
}
.logo {
    margin-bottom: 40px; /* Espaçamento abaixo do logo */
}
.text-container {
    margin-bottom: 50px; /* Espaçamento abaixo do texto */
}
.form-group {
    margin-bottom: 30px; /* Espaçamento abaixo do input */
}

.password-container {
    position: relative;
}
.icone-olho {
    position: absolute;
    right: 15px;
    top: 4px;
    cursor: pointer;
    width: 30px; 
    height: 30px; 
}

.navbar-toggler {
    border-color: transparent; /* Remove the button border */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.menu-icon {
    color: white;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adiciona sombra preta */
}


/* Sidebar */
.sidebar {
    display: none;
    height: 100%;
    width: 250px; /* largura da sidebar */
    position: fixed; /* faz com que a sidebar fique fixa */
    z-index: 999; /* garante que fique acima de outros elementos */
    top: 0;
    left: 0;
    background-color: #772BD7; /* cor de fundo da sidebar */
    overflow-x: hidden; /* esconde a barra de rolagem horizontal */
    transition: 0.5s; /* efeito de transição */
    padding-top: 80px; /* espaçamento superior */
    justify-content: space-between; /* Isso empurra o botão para o final */
}

/* Links dentro do sidebar */
.sidebar a {
    display: block; /* faz cada link ocupar toda a largura disponível */
    white-space: nowrap; /* impede quebra de linha */
    font-size: 16px; /* tamanho do texto, aumente se necessário */
    color: white; /* cor do texto */
    text-decoration: none; /* remove sublinhado */
    padding: 10px; /* espaço interno */
    transition: font-size 0.2s ease; /* animação suave para mudança de tamanho */
}

.sidebar a:hover {
    color: #93FFF6; /* cor do texto ao passar o mouse (exemplo: dourado) */}

/* Link de fechar (x) */
.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Overlay para escurecer o fundo */
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7); /* Fundo semi-transparente */
    transition: 0.3s;
}