@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;900&display=swap');

:root {
	--bg-color: linear-gradient(to right, #0000ff0f 45%, #f000 55%, #f000 100%);
	--bg2-color: white;
    --text-color: #454545;
	--border-color: #80808033;
	--botton-color: #8080801f;
	--html-bg: white;
}

.dark-mode {
	--bg-color: linear-gradient(to right, #0000ff78 45%, #73737380 55%, #73737380 100%);
	--bg2-color: black;
	--text-color: #ffffff;
	--border-color: #e1e1e133;
	--botton-color: #b5b5b5;
	--html-bg: black;
}

html {
	background: var(--);
}
body {
    margin: 0;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-color);
	color: var(--text-color);
	width: 100vw;
}

a {
	color: var(--text-color);
}
.login-container {
	background-color: var(--bg2-color);
	padding: 3rem;
	border-radius: 25px;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 300px;
	z-index: 1;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

label {
    font-weight: bold;
    color: #333;
}

input {
	padding: .6rem;
	border: 1px solid #ddd;
	border-radius: 25px;
	font-size: 1rem;
}

button {
	background-color: #1877f2;
	color: white;
	padding: 0.75rem;
	border: none;
	border-radius: 25px;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s;
	margin: 0 25px;
}

button:hover {
    background-color: #166fe5;
}

.message {
    color: #dc3545;
    margin: 0;
    text-align: center;
}

.loader {
	display: none;
	position: absolute;
	left: calc(50% - 65px);
	top: calc(50% - 65px);
	width: 100px;
	height: 100px;
	border: 15px solid #f3f3f3;
	border-radius: 50%;
	border-top: 15px solid #004ea2;
	animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading .loader {
    display: block;
}

.loading button {
    opacity: 0.5;
}

.logo-wm {
	height: 150px;
	position: fixed;
	right: 5px;
	bottom: 5px;
}

.logo-app {
	position: fixed;
	top: 12vh;
	left: 50%;
	transform: translateX(-50%);
	width: 30vw;
	max-width: 500px;
	min-width: 150px;
	aspect-ratio: 813 / 110;
}

.name-app {
	width: 200px;
	position: fixed;
	left: calc(50vw - 100px);
	top: 15px;
}

.footer {
	position: fixed;
	bottom: 15px;
	font-size: .8rem;
	text-align: center;
}