:root {
    /* Colors */
    --redLightest: #fce9e9;
    --redLigher: #f5a8a8;
    --redLight: #ed6767;
    --red: #E62727;
    --redDark: #b81f1f;
    --redDarker: #8a1717;
    --redDarkest: #5c0f0f;
    --orange: #ff8c00;
    --orangerDark: #ff6f00;
    --yellow: #ffeb3b;
    --yellowDark: #fdd835;
    --blueSuperLight: #d6e4f0;
    --blueLightness: #7ab8d1;
    --blueLightest: #4c8bb0;
    --blueLigher: #327aa5;
    --blueLight: #196a9a;
    --blue: #005A8F;
    --blueOpacity: #005A8F80;
    --blueDark: #005180;
    --blueDarker: #004872;
    --blueDarkest: #003e64;
    --greeLightest: #6ca46f;
    --greenLigher: #57975a;
    --greenLight: #428a46;
    --green: #2e7d32;
    --greenDark: #29702d;
    --greenDarker: #246428;
    --greenDarkest: #205723;
    --greyLightest: #f8f8f8;
    --greyLighter: #ebebeb;
    --greyLight: #dedede;
    --grey: #cfcfcf;
    --greyDark: #bfbfbf;
    --greyDarker: #a8a8a8;
    --greyDarkest: #8f8f8f;
    --blackText: #222;
    --blackTextLight: #333;

    /* Sizes */
    --generalSpace: 24px;
    --xxxsmall: 6px;
    --xxsmall: 8px;
    --xsmall: 10px;
    --small: 12px;
    --normal: 16px;
    --medium: 20px;
    --large: 24px;
    --xlarge: 32px;
    --xxlarge: 48px;
    --xxxlarge: 64px;

    /* Miscellaneous */
    --transitionAll: all 0.3s ease;
    --borderRadius: calc(var(--generalSpace) / 4);
    --shadowFloor: 0 8px 6px -6px var(--greyDarkest);
}

.bgRedLightest { background-color: var(--redLightest); }
.bgRedLigher { background-color: var(--redLigher); }
.bgRedLight { background-color: var(--redLight); }
.bgRed { background-color: var(--red); }
.bgRedDark { background-color: var(--redDark); }
.bgRedDarker { background-color: var(--redDarker); }
.bgRedDarkest { background-color: var(--redDarkest); }
.bgBlueSuperLight { background-color: var(--blueSuperLight); }
.bgBlueLightest { background-color: var(--blueLightest); }
.bgBlueLigher { background-color: var(--blueLigher); }
.bgBlueLight { background-color: var(--blueLight); }
.bgBlue { background-color: var(--blue); }
.bgBlueDark { background-color: var(--blueDark); }
.bgBlueDarker { background-color: var(--blueDarker); }
.bgBlueDarkest { background-color: var(--blueDarkest); }
.bgGreenLightest { background-color: var(--greenLightest); }
.bgGreenLigher { background-color: var(--greenLigher); }
.bgGreenLight { background-color: var(--greenLight); }
.bgGreen { background-color: var(--green); }
.bgGreenDark { background-color: var(--greenDark); }
.bgGreenDarker { background-color: var(--greenDarker); }
.bgGreenDarkest { background-color: var(--greenDarkest); }
.bgGreyLightest { background-color: var(--greyLightest); }
.bgGreyLighter { background-color: var(--greyLighter); }
.bgGreyLight { background-color: var(--greyLight); }
.bgGrey { background-color: var(--grey); }
.bgGreyDark { background-color: var(--greyDark); }
.bgGreyDarker { background-color: var(--greyDarker); }
.bgGreyDarkest { background-color: var(--greyDarkest); }
.bgWhite { background-color: #fff; }

.txtRedLightest { color: var(--redLightest); }
.txtRedLigher { color: var(--redLigher); }
.txtRedLight { color: var(--redLight); }
.txtRed { color: var(--red); }
.txtRedDark { color: var(--redDark); }
.txtRedDarker { color: var(--redDarker); }
.txtRedDarkest { color: var(--redDarkest); }
.txtBlueLightest { color: var(--blueLightest); }
.txtBlueLigher { color: var(--blueLigher); }
.txtBlueLight { color: var(--blueLight); }
.txtBlue { color: var(--blue); }
.txtBlueDark { color: var(--blueDark); }
.txtBlueDarker { color: var(--blueDarker); }
.txtBlueDarkest { color: var(--blueDarkest); }
.txtGreenLightest { color: var(--greenLightest); }
.txtGreenLigher { color: var(--greenLigher); }
.txtGreenLight { color: var(--greenLight); }
.txtGreen { color: var(--green); }
.txtGreenDark { color: var(--greenDark); }
.txtGreenDarker { color: var(--greenDarker); }
.txtGreenDarkest { color: var(--greenDarkest); }
.txtGreyLightest { color: var(--greyLightest); }
.txtGreyLighter { color: var(--greyLighter); }
.txtGreyLight { color: var(--greyLight); }
.txtGrey { color: var(--grey); }
.txtGreyDark { color: var(--greyDark); }
.txtGreyDarker { color: var(--greyDarker); }
.txtGreyDarkest { color: var(--greyDarkest); }
.txtWhite { color: #fff; }

.xxxsmall { font-size: var(--xxxsmall); }
.xxsmall { font-size: var(--xxsmall); }
.xsmall { font-size: var(--xsmall); }
.small { font-size: var(--small); }
.normal { font-size: var(--normal); }
.medium { font-size: var(--medium); }
.large { font-size: var(--large); }
.xlarge { font-size: var(--xlarge); }
.xxlarge { font-size: var(--xxlarge); }
.xxxlarge { font-size: var(--xxxlarge); }

.widthXxxsmall { width: var(--xxxsmall); }
.widthXxsmall { width: var(--xxsmall); }
.widthXsmall { width: var(--xsmall); }
.widthSmall { width: var(--small); }
.widthMedium { width: var(--medium); }
.widthLarge { width: var(--large); }
.widthXlarge { width: var(--xlarge); }
.widthXxlarge { width: var(--xxlarge); }
.widthXxxlarge { width: var(--xxxlarge); }

.transitionAll { transition: var(--transitionAll); }
.borderRadius { border-radius: var(--borderRadius); }
.shadowFloor { box-shadow: var(--shadowFloor); }
.overflowHidden { overflow: hidden; }
.overflowAuto { overflow: auto; }
.overflowScroll { overflow: scroll; }
.overflowScrollX { overflow-x: scroll; }
.overflowScrollY { overflow-y: scroll; }
.cursorPointer { cursor: pointer; }
.aspect-169{ aspect-ratio: 16/9;}
.aspect-916{ aspect-ratio: 9/16;}
.aspect-43{ aspect-ratio: 4/3;}
.aspect-34{ aspect-ratio: 3/4;}
.aspect-11{ aspect-ratio: 1/1;}
.background-center{ background-position: center; }
.background-cover{ background-size: cover; }
.background-no-repeat{ background-repeat: no-repeat; }

.ellipsis-vertical-1 {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.ellipsis-vertical-2 {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ellipsis-vertical-3 {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.display-inline-flex { display: inline-flex !important; }

/* Loading */
/* From Uiverse.io by jack0237 */ 
#loading{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    display: flex;
}

.loader .dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #e8e8e8;
    background: var(--blue);
    animation: jump 0.8s ease-in-out infinite alternate;
}

@keyframes jump {
    100% {
        background: var(--red);
        transform: translateZ(-3rem) scale(1.9);
    }
}

.loader .dot:nth-child(1) {
    animation-delay: 0.1s;
}

.loader .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loader .dot:nth-child(3) {
    animation-delay: 0.3s;
}

.loader .dot:nth-child(4) {
    animation-delay: 0.4s;
}

.loader .dot:nth-child(5) {
    animation-delay: 0.5s;
}

/* Resets */
* {
    box-sizing: border-box;
}

body {
    font-size: var(--normal);
    color: var(--blackText);
}

html{
    /* scrollbar-color: var(--redDarkest) var(--redLightest);
    scrollbar-width: thin; */
    scrollbar-width: none;
}

html, h1, h2, h3, h4, h5, h6, p, a{
    font-family: 'Montserrat', sans-serif !important;
}

/* UiKits */
input, select, textarea, button{
    border-radius: var(--borderRadius) !important;
}

.uk-button-primary{
    background-color: var(--blue);
    border-radius: var(--borderRadius);
}

.uk-button-primary:hover{
    background-color: var(--blueDark);
}

.uk-button-secondary{
    background-color: var(--red);
    border-radius: var(--borderRadius);
}

.uk-button-secondary:hover{
    background-color: var(--redDark);
}

.uk-button-default{
    background-color: var(--grey);
    border: none;
    border-radius: var(--borderRadius);
}

.uk-button-default:hover{
    background-color: var(--greyDarkest);
    color: white;
}

.uk-button-danger{
    background-color: var(--red);
    border-radius: var(--borderRadius);
}

.uk-button-danger:hover{
    background-color: var(--redDark);
}

.uk-button-danger:disabled, .uk-button-default:disabled, .uk-button-primary:disabled, .uk-button-secondary:disabled{
    background-color: var(--grey);
    color: white;
    border: none;
}

.uk-heading-bullet::before{
    border-left: calc(5px + .1em) solid var(--blue);
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus{
    border-color: var(--blue);
}

.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked{
    background-color: var(--blue);
}

.uk-offcanvas-bar{
    background-color: var(--blue);
    padding: var(--generalSpace);
}

.uk-offcanvas-overlay::before{
    background-color: rgba(0, 0, 0, 0.2);
}

.uk-divider-small::after{
    border-color: var(--greyDark);
}

.uk-background-primary{
    background-color: var(--blue);
}

.uk-slidenav:hover{
    color: white;
}

/* Form switchs */
.custom-switch {
    display: flex;
    align-items: center;
    --button-width: 3em;
    --button-height: 1.5em;
    --toggle-diameter: 1em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 2.5em;
    --color-idle: #95acc1;
    --color-actived: #3e5264;
    cursor: pointer;
}

.custom-switch-slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-idle);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.custom-switch-slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.custom-switch input[type="checkbox"]:checked+.custom-switch-slider {
    background-color: var(--color-actived);
}

.custom-switch input[type="checkbox"]:checked+.custom-switch-slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.custom-switch input[type="checkbox"] {
    display: none;
}

.custom-switch input[type="checkbox"]:active+.custom-switch-slider::after {
    width: var(--toggle-wider);
}

.custom-switch input[type="checkbox"]:checked:active+.custom-switch-slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

.custom-switch-label{
    display: inline-block;
    margin-left: calc(var(--generalSpace) / 2);
    font-size: var(--small);
}

/* Tabs */
.uk-tab{
    justify-content: center;
    flex-wrap: nowrap;
}

.uk-tab>.uk-active>a{
    border-color: var(--red);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input::placeholder{
    font-size: var(--small);
}

/* input{
    font-size: var(--small) !important;
} */

/* Notifications */
.uk-notification-message{
    font-size: var(--small);
}

.uk-notification-message-warning{
    background-color: var(--red);
    color: white;
}

.uk-notification-message-success{
    background-color: var(--green);
    color: white;
}

/* Pulse */
.pulseBtn {
    position: relative;
	padding: calc(var(--generalSpace) / 2);
	background-color: var(--blue);
	color: white !important;
	border-radius: var(--borderRadius);
	box-shadow: 0 0 0 0 var(--blueOpacity);
    margin-bottom: calc(var(--generalSpace) / 2);
	animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
	font-size: small;
	font-weight: bold;
}

.pulseBtn.btnRounded{
	border-radius: 100% !important;
	width: calc(var(--generalSpace) * 2.5) !important;
	height: calc(var(--generalSpace) * 2.5) !important;
	padding: 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes pulse {
	to {
	    box-shadow: 0 0 0 30px rgba(230, 237, 255, 0);
	}
}

/* Miscellaneous */
.form-container{
    margin: calc(var(--generalSpace) * 2) auto;
    background-color: var(--greyLightest);
    padding: calc(var(--generalSpace) * 2);
    border-radius: var(--borderRadius);
    box-shadow: var(--shadowFloor);
}

.form-container.small{
    width: 90%;
    max-width: 600px;
    font-size: inherit;
}

.validation{
    min-height: 35px;
    color: var(--red);
    font-size: var(--small);
}

.input-error{
    outline: 1px solid var(--red) !important;
}

#big-screen{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blueOpacity);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px){
    .form-container{
        padding: calc(var(--generalSpace) * 1.5);
    }

    .form-container.small{
        width: 90%;
        max-width: 100%;
    }

    .uk-tab{
        justify-content: flex-start;
        overflow-x: auto;
    }
}