:root{

    --fundo:#050816;

    --sidebar:#081120;

    --card:#101935;

    --card2:#0d1730;

    --texto:#ffffff;

    --texto2:#94a3b8;

    --primaria:#4f7cff;

    --borda:rgba(255,255,255,0.05);
}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
}

html,
body{

    width:100%;

    min-height:100%;

    background:var(--fundo);

    color:var(--texto);

    font-family:'Inter',sans-serif;

    overflow-x:hidden;
}

body{

    min-height:100vh;
}

a{

    text-decoration:none;

    color:inherit;
}

img{

    max-width:100%;

    display:block;
}

button,
input,
textarea,
select{

    font-family:'Inter',sans-serif;
}

button{

    border:none;

    background:none;

    cursor:pointer;
}

ul,
ol{

    list-style:none;
}

/*
=====================================================
TIPOGRAFIA
=====================================================
*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-weight:700;
}

p{

    margin:0;
}

/*
=====================================================
FORMULÁRIOS
=====================================================
*/

form{

    width:100%;
}

/*
=====================================================
SCROLLBAR
=====================================================
*/

::-webkit-scrollbar{

    width:10px;

    height:10px;
}

::-webkit-scrollbar-track{

    background:#081120;
}

::-webkit-scrollbar-thumb{

    background:#1e293b;

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

    background:#334155;
}

/*
=====================================================
ALERTAS
=====================================================
*/

.alerta{

display:flex;

align-items:center;

justify-content:space-between;

padding:15px 20px;

margin-bottom:20px;

border-radius:14px;

border:1px solid transparent;

animation:fadeAlert .3s ease;

}

.alerta-conteudo{

display:flex;

align-items:center;

gap:12px;

}

.alerta-conteudo i{

font-size:18px;

}

.alerta span{

font-size:14px;

font-weight:500;

}


.alerta-erro{

background:#5a0d13;

border-color:#ff3b3b;

color:#fff;

}

.alerta-sucesso{

background:#0c4421;

border-color:#22c55e;

color:#fff;

}

.alerta-aviso{

background:#574000;

border-color:#facc15;

color:#fff;

}


.fechar-alerta{

background:none;

border:none;

color:#fff;

font-size:22px;

cursor:pointer;

opacity:.7;

padding:0;

}

.fechar-alerta:hover{

opacity:1;

}


@keyframes fadeAlert{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}