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

@import url('../style/parts/modals.css');
@import url('../style/parts/cards.css');
@import url('../style/parts/dashboards.css');

@import url('../style/animations.css');

@import url('../style/parts/badges.css');
@import url('../style/parts/buttons.css');
@import url('../style/parts/inputs.css');
@import url('../style/parts/margins.css');

@import url('../style/parts/tables.css');

@import url('../style/pages/loading.css');

:root {
    --gold: #ECD453;
}

html {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-1); 
    font-optical-sizing: auto;
    -webkit-font-optical-sizing: auto;
    -moz-font-optical-sizing: auto;
    -ms-font-optical-sizing: auto;
    -o-font-optical-sizing: auto;
    letter-spacing: 1px;
    font-family: "Lexend", sans-serif;
    font-style: normal;
}

button {
    font-family: 'Montserrat', sans-serif !important;
}

.loading { background-image: var(--loading);}

@media all and (min-width: 770px) {
    .no-desktop { display: none !important; }
}
@media all and (max-width: 770px) {
    .no-mobile { display: none !important; }
}

.no-show { display: none; }
.no-visible { visibility: hidden; }
.no-decoration { text-decoration: none; }
.unselectable { user-select: none; }
.classic-transition { transition: .3s; }
.initial { color: black; background: var(--color-3); }

.shadow { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.shadow-sm { box-shadow: 0 0 15px rgba(0, 0, 0, 0.01); }
.shadow-xl { box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
.shadow-base { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); }

.drop-shadow { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1)); }
.drop-shadow-sm { filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.01)); }
.drop-shadow-xl { filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5)); }
.drop-shadow-2xl { filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.7)); }
.drop-shadow-4xl { filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.9)); }

.txt-white, .txt-black, .txt-on, .txt-nothing, .txt-off, .txt-link, .txt-theme { text-decoration: none !important; }

.blur-2 { backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);-moz-backdrop-filter: blur(2px); }
.blur-5 { backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);-moz-backdrop-filter: blur(5px); }
.blur-10 { backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);-moz-backdrop-filter: blur(10px); }
.blur-15 { backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);-moz-backdrop-filter: blur(15px); }

.round-10 { margin-left: 10px;width: 10px;height: 10px;border-radius: 50%; }

.auto { color: var(--opp-color-1) !important;background: var(--color-1) !important; }
.auto-2 { color: var(--opp-color-1) !important;background: var(--color-1-opa-2) !important; }

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

.dark { color: white !important; background: var(--black) !important; }
.txt-black { color: black !important; }

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

.light-gray { color: black !important; background: var(--lightgray) !important; }
.txt-light-gray { color: var(--lightgray) !important; }

.on { color: white !important; background: var(--green) !important; }
.txt-on { color: var(--green) !important; }

.nothing { color: black !important; background: var(--gray) !important; }
.txt-nothing { color: var(--color-ip) !important; }

.off { color: white !important; background: var(--red) !important; }
.txt-off { color: var(--red) !important; }

.link { color: white !important; background: var(--blue) !important; }
.txt-link { color: var(--blue) !important; }

.theme { color: white !important; background: var(--theme) !important; }£
.txt-theme { color: var(--theme) !important; }

.shadow { box-shadow: var(--shadow-1) !important; }

.radius-10 { border-radius: 10px; }
.radius-20 { border-radius: 20px; }

.four {
    display: block;
    width: 21.5%;
    margin: 10px 1%;
    padding: .5%;
}

.three {
    display: block;
    width: 29.5%;
    margin: 10px 1%;
    padding: 0 .5%;
}

.half {
    display: inline-block;
    width: 45.5%;
    vertical-align: top;
    margin: 10px 1%;
    padding: 0 .5%;
}

.full { width: 100%; }