@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:&display=swap');

* {
    margin: 0;
    padding: 0;
    /*font-family: "Imprima", sans-serif;*/
    font-family: "Nunito Sans", sans-serif;
    font-size: var(--font-size);
    box-sizing: border-box;
    /*letter-spacing: 1px;*/
    /*color: var(--black);*/
}

body {
    background-color: var(--white);
}

ul {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

li {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

[v-cloak] {
    display: none;
}

.fg-primary {
    color: var(--primary-color) !important;
}

.fg-secondary {
    color: var(--secondary-color) !important;
}

.transparent {
    color: var(--transparent) !important;
}

.white {
    color: var(--white) !important;
}

.black {
    color: var(--black) !important;
}

.blue {
    color: var(--blue) !important;
}

.green {
    color: var(--green) !important;
}

.red {
    color: var(--red) !important;
}

.orange {
    color: var(--orange) !important;
}

.yellow {
    color: var(--yellow) !important;
}

.gray {
    color: var(--gray) !important;
}

.dark-gray {
    color: var(--gray-dark) !important;
}

.lite-gray {
    color: var(--gray-lite) !important;
}

.rose {
    color: var(--rose) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.bg-black {
    background-color: var(--black) !important;
}

.bg-transparent {
    background-color: var(--transparent);
}

.bg-blue {
    background-color: var(--blue) !important;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-red {
    background-color: var(--red) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-gray {
    background-color: var(--gray-lite) !important;
}

.bg-dark-gray {
    background-color: var(--gray-dark) !important;
}

.bg-rose {
    background-color: var(--rose) !important;
}

.semi-transparent {
    opacity: 0.5 !important;
}

.semi-semi-transparent {
    opacity: 0.35 !important;
}

.w-16 {
    width: 16% !important;
}

.clickable {
    cursor: pointer !important;
}

.default-cursor {
    cursor: default !important;
}

.min-width-150 {
    display: inline-block;
    min-width: 150px !important;
}

.min-width-200 {
    display: inline-block;
    min-width: 200px !important;
}

.max-width-500 {
    max-width: 500px;
}

h3 {
    font-weight: bold;
    margin-bottom: var(--margin);
    text-align: center;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--button-height);
    width: 200px;
    /*width: auto;*/
    height: var(--button-height);
    background-color: var(--primary-color) !important;
    border: var(--border-width) solid var(--primary-color);
    border-radius: var(--radius);
    color: var(--white) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color var(--transition-time), color var(--transition-time), border var(--transition-time);
}

    .btn:hover {
        background-color: var(--white) !important;
        border: var(--border-width) solid var(--primary-color);
        border-radius: var(--radius) !important;
        color: var(--primary-color) !important;
        transition: background-color var(--transition-time), color var(--transition-time), border var(--transition-time);
    }

    .btn i {
        font-size: inherit;
    }

    .btn.btn-big {
        width: 300px !important;
        height: calc(var(--button-height) * 1.5) !important;
        font-size: 1.5rem;
    }

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

    .btn-primary:hover {
        background-color: var(--transparent) !important;
        border-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
}

    .btn-secondary:hover {
        background-color: var(--transparent) !important;
        border-color: var(--secondary-color) !important;
        color: var(--secondary-color) !important;
    }

.btn-red {
    background-color: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--white) !important;
}

    .btn-red:hover {
        background-color: var(--transparent) !important;
        border-color: var(--red) !important;
        color: var(--red) !important;
    }

.btn-green {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
    color: var(--white) !important;
}

    .btn-green:hover {
        background-color: var(--transparent) !important;
        border-color: var(--green) !important;
        color: var(--green) !important;
    }

.btn-blue {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: var(--white) !important;
}

.btn.blue:hover {
    background-color: var(--transparent) !important;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.btn-orange {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: var(--white) !important;
}

    .btn-orange:hover {
        background-color: var(--transparent) !important;
        border-color: var(--orange) !important;
        color: var(--orange) !important;
    }

.btn-yellow {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: var(--black) !important;
}

    .btn-yellow:hover {
        background-color: var(--transparent) !important;
        border-color: var(--yellow) !important;
        color: var(--yellow) !important;
    }

.w50 {
    width: 50px !important;
}

.w200 {
    width: 200px !important;
}

.h200 {
    height: 200px !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.max-height-100 {
    max-height: 100px;
}

.max-height-200 {
    max-height: 200px;
}

.max-height-300 {
    max-height: 300px;
}

.max-height-400 {
    max-height: 400px;
}

.max-height-500 {
    max-height: 500px;
}

.max-height-600 {
    max-height: 600px;
}

.max-height-700 {
    max-height: 700px;
}

.max-height-800 {
    max-height: 800px;
}

.height-100 {
    height: 100px;
}

.height-200 {
    height: 200px;
}

.height-300 {
    height: 300px;
}

.height-400 {
    height: 400px;
}

.height-500 {
    height: 500px;
}

.height-600 {
    height: 600px;
}

.height-700 {
    height: 700px;
}

.height-800 {
    height: 800px;
}

.scroll {
    scroll-behavior: smooth;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

    .scroll::-webkit-scrollbar-track,
    .scroll::-webkit-scrollbar {
        width: var(--padding);
        background: var(--blue-light-light);
        box-shadow: none;
        border-radius: var(--radius);
    }

    .scroll::-webkit-scrollbar-thumb {
        width: var(--padding);
        background: var(--primary-color);
        box-shadow: none;
        border-radius: var(--radius);
    }

.hscroll {
    scroll-behavior: smooth;
    overflow: hidden !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

    .hscroll::-webkit-scrollbar-track,
    .hscroll::-webkit-scrollbar {
        height: var(--padding);
        background: var(--blue-light-light);
        box-shadow: none;
        border-radius: var(--radius);
    }

    .hscroll::-webkit-scrollbar-thumb {
        height: var(--padding);
        background: var(--primary-color);
        box-shadow: none;
        border-radius: var(--radius);
    }

.mr {
    margin-right: var(--margin);
}

.mt {
    margin-top: var(--margin);
}

.mb {
    margin-bottom: var(--margin);
}

.ml {
    margin-left: var(--margin);
}

.pr {
    padding-right: var(--padding);
}

.pt {
    padding-top: var(--padding);
}

.pb {
    padding-bottom: var(--padding);
}

.pl {
    padding-left: var(--padding);
}

@view-transition {
    navigation: auto;
}

::view-transition-group(*) {
    animation-duration: .33s;
}

::view-transition-old(root) {
    animation: .33s ease-in both leave;
}

::view-transition-new(root) {
    animation: .33s ease-in both enter;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) {
        animation-duration: 0s;
    }
}

.field-not-valid {
    border-color: var(--red) !important;
}

.not-selectable {
    user-select: none;
}