@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap");

:root {
    --bg-principal: rgb(255, 255, 255);
    --bg-secundario: rgb(50, 118, 156);
    --bg-secundario-light: rgb(218, 45, 45);

    --font-principal: rgb(50, 118, 156);
    --font-secundario: rgb(218, 45, 45);
    --font-ligth: rgb(255, 255, 255);
    --font-dark: rgb(45, 45, 45);

    --border-principal: rgb(50, 118, 156);

    --shadow-box-mininal: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    --shadow-box-center: 0px 0px 20px 0px rgb(0 0 0 / 15%);
    --shadow-box: 0px 20px 20px 0px rgb(0 0 0 / 15%);

    --btn-action: rgb(50, 118, 156);
    --btn-action-hover: rgb(218, 45, 45);

    --input-focus: rgba(245, 135, 50, 0.25);

    --red: rgba(248, 216, 218, 0.45);
    --green: rgba(208, 231, 220, 0.45);
    --azul: rgba(207, 244, 252, 0.45);
    --gray: rgb(128, 128, 128, 0.45);
}
* {
    scrollbar-width: auto;
    scrollbar-color: #263a8f #e5e5e5;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 14px;
}

*::-webkit-scrollbar-track {
    background: #e5e5e5;
}

*::-webkit-scrollbar-thumb {
    background-color: #263a8f;
    border-radius: 100px;
    border: 3px solid #e5e5e5;
}
.bg-grey {
    background-color: var(--gray);
}
.bg-red {
    background-color: var(--red);
}
.bg-green {
    background-color: var(--green);
}
.bg-blue {
    background-color: var(--azul);
}
.w100 {
    width: 100% !important;
}
.w80 {
    width: 80% !important;
}
.w70 {
    width: 70% !important;
}
.w60 {
    width: 60% !important;
}
.w50 {
    width: 50% !important;
}
.w40 {
    width: 40% !important;
}
.w33 {
    width: calc(100% / 3) !important;
}
.w30 {
    width: 30% !important;
}
.w25 {
    width: 25% !important;
}
.w20 {
    width: 20% !important;
}
.w10 {
    width: 10% !important;
}
.m10 {
    margin: 10px;
}
dl,
ol,
ul,
p {
    margin-top: 0;
    margin-bottom: 0rem;
}

* {
    box-sizing: border-box !important;
    padding: 0px;
    margin: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-family: "Montserrat", sans-serif;
    text-decoration: none !important;
    list-style: none !important;
    margin-block-start: 0em;
    margin-block-end: 0em;
}
.bold {
    font-weight: 700;
}
p,
span {
    font-size: 0.9rem;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.2rem;
}
h4,
h5,
h6 {
    font-size: 0.9rem;
}
a {
    color: var(--font-dark);
}

html,
body {
    width: 100%;
    height: 100%;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.invisible {
    display: none !important;
    transition: all 1s;
}

.visible {
    display: block !important;
}
.flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}
.g10 {
    gap: 10px;
}
.g20 {
    gap: 20px;
}
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.flex-center-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 15px;
}

.flex-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.animation-slide {
    animation: slide;
    animation-duration: 0.4s;
    animation-timing-function: ease;
}
@keyframes slide {
    from {
        transform: translateX(-50px);
    }

    to {
        transform: translateX(0px);
    }
}