@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@200;300;400;500;600;700;800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
:root{
	--color_accent: #4F70E9;
	--color_accent_hover: #3f54dd;
	--color_accent_bright: #7aa9ed;
	
	--color_primary: #E8BA4E;
	--color_primary_hover: #4bc0c0;
	--color_primary_w: #73a2c5;

	--color_neutral_white: #e9ebed;
	--color_neutral_white2: #f3f3f3;
	--color_neutral_black: #423d46;

	--success: #9ac510;
	--failure: #e7133f;
	--warning: #f3720c;
	--black: #2b2f30;

	--border-radius-1: 5px;
	--border-radius-2: 10px;
	--border-radius-3: 15px;

	--font-heading: 'Lexend';
	--font-text: 'Manrope';
}
body{
	font-family: var(--font-text), 'Open Sans', sans-serif;
}
*{ box-sizing: border-box; }
*::-webkit-scrollbar{width: 5px;}
*::-webkit-scrollbar{ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0)}
*::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,0.4)}
*::selection{
    background-color: #524848a3;
    color: #fbfbfb;
}
a{ text-decoration: none; transition: 0.1s ease; cursor: pointer; }

.border{ height: 3px; background-color: var(--color_primary); width: 20px }

.frow{display: flex; flex-flow: row nowrap;}
.frow.reverse{flex-direction: row-reverse !important;}
.fcolumn{display: flex; flex-flow: column nowrap;}
.fcolumnReverse{display: flex; flex-flow: column-reverse nowrap;}
.fcolumn.reverse{flex-direction: column-reverse !important;}
.grid{display: grid;}


.bold{font-weight: bold}
.lighter{font-weight: lighter;}
.soft{color: #747474}

.wrap{flex-wrap: wrap !important}
.f1{flex: 1}
.f2{flex: 2}
.f3{flex: 3}
.f4{flex: 4}
.f5{flex: 5}
.f6{flex: 6}
.f7{flex: 7}

.scrollY{overflow-y: auto;}
.scrollX{overflow-x: auto;}

.gap1{gap:1px}
.gap2{gap:2px}
.gap3{gap:3px}
.gap5{gap:5px}
.gap7{gap:7px}
.gap10{gap:10px}
.gap15{gap:15px}
.gap20{gap:20px}
.gap30{gap:30px}
.gap50{gap:50px}
.gap60{gap:60px}

.m3{margin:3px}
.m5{margin:5px}
.m7{margin:7px}
.m10{margin:10px}
.m13{margin:13px}
.m15{margin:15px}
.m20{margin:20px}
.m30{margin:30px}

.p0{padding:0px !important}
.p3{padding:3px !important}
.p5{padding:5px !important}
.p7{padding:7px !important}
.p10{padding:10px !important}
.p13{padding:13px !important}
.p15{padding:15px !important}
.p20{padding:20px !important}
.p30{padding:30px !important}
.p40{padding:40px !important}
.p50{padding:50px !important}

.p3_5{padding: 3px 5px !important}
.p5_7{padding: 5px 7px !important}
.p5_10{padding: 5px 10px !important}
.p7_10{padding: 7px 10px !important}
.p7_15{padding: 7px 15px !important}
.p10_20{padding: 10px 20px !important}

.cWhite{color: white}

.fs04{font-size: 0.4em}
.fs05{font-size: 0.5em}
.fs07{font-size: 0.7em}
.fs08{font-size: 0.8em}
.fs09{font-size: 0.9em}
.fs1{font-size: 1em}
.fs11{font-size: 1.1em}
.fs12{font-size: 1.2em}
.fs13{font-size: 1.3em}
.fs15{font-size: 1.5em}
.fs17{font-size: 1.7em}
.fs18{font-size: 1.8em}
.fs2{font-size: 2em}
.fs21{font-size: 2.1em}
.fs22{font-size: 2.2em}
.fs23{font-size: 2.3em}
.fs25{font-size: 2.5em}
.fs27{font-size: 2.7em}
.fs28{font-size: 2.8em}
.fs3{font-size: 3em}
.fs4{font-size: 4em}

.circled{border-radius: 99999px}

.success{color: var(--success)}
.failure{color: var(--failure)}
.warning{color: var(--warning)}

.cAccent{color: var(--color_accent)}
.cBlack{color: var(--black)}
.cSuccess{color: var(--success)}
.cFailure{color: var(--failure)}
.cPrimary{color: var(--color_primary)}
.cNeutralW{color: var(--color_neutral_white)}
.cNeutralB{color: var(--color_neutral_black)}

.bgAccent{background-color: var(--color_accent)}
.bgPrimary{background-color: var(--color_primary)}
.bgBlack{background-color: var(--black)}
.bgWhite{background-color: white}
.bgNeutralW{background-color: var(--color_neutral_white)}
.bgNeutralB{background-color: var(--color_neutral_black)}

a.cAccent:hover{color: var(--color_accent_hover)}
a.cPrimary:hover{color: var(--color_primary_hover)}
a.cNeutralW:hover{filter: brightness(0.8)}
a.cBlack:hover{ color: var(--color_accent)}
a.cWhite:hover{ color: var(--color_accent_bright)}

.m0{margin: 0px}
.m1{margin: 1px}
.m3{margin: 3px}
.m5{margin: 5px}
.m7{margin: 7px}
.m10{margin: 10px}

.w100{width: 100%}
.h100{height: 100%}

.c2{grid-template-columns: 1fr 1fr}
.c3{grid-template-columns: 1fr 1fr 1fr}
.c4{grid-template-columns: 1fr 1fr 1fr 1fr}
.c5{grid-template-columns: 1fr 1fr 1fr 1fr 1fr}

.r2{grid-template-rows: 1fr 1fr}
.r3{grid-template-rows: 1fr 1fr 1fr}
.r4{grid-template-rows: 1fr 1fr 1fr 1fr}
.r5{grid-template-rows: 1fr 1fr 1fr 1fr 1fr}

.alignCenter{align-items: center}
.alignStretch{align-items: stretch;}
.alignStart{align-items: flex-start}
.alignEnd{align-items: flex-end}

.justCenter{justify-content: center}
.justBtwn{justify-content: space-between}
.justStretch > *{ flex: 1 }
.justSpaced{justify-content: space-evenly}
.justAround{justify-content: space-around}
.justStart{justify-content: flex-start}
.justEnd{justify-content: flex-end}


.sq10{
	width: 10px;
	min-width: 10px;
	height: 10px;
	min-height: 10px;
}
.sq15{
	width: 15px;
	min-width: 15px;
	height: 15px;
	min-height: 15px;
}
.sq17{
	width: 17px;
	min-width: 17px;
	height: 17px;
	min-height: 17px;
}
.sq20{
	width: 20px;
	min-width: 20px;
	height: 20px;
	min-height: 20px;
}
.sq25{
	width: 25px;
	min-width: 25px;
	height: 25px;
	min-height: 25px;
}
.sq30{
	width: 30px;
	min-width: 30px;
	height: 30px;
	min-height: 30px;
}
.sq40{
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
}
.sq50{
	width: 50px;
	min-width: 50px;
	height: 50px;
	min-height: 50px;
}
.sq70{
	width: 70px;
	min-width: 70px;
	height: 70px;
	min-height: 70px;
}
.sq100{
	width: 100px;
	min-width: 100px;
	height: 100px;
	min-height: 100px;
}

.br0{border-radius: 0px !important;}
.br3{border-radius: 3px !important;}
.br5{border-radius: 5px !important;}
.br7{border-radius: 7px !important;}
.br10{border-radius: 10px !important;}
.br12{border-radius: 12px !important;}
.br15{border-radius: 15px !important;}
.br17{border-radius: 17px !important;}
.br20{border-radius: 20px !important;}
.br25{border-radius: 25px !important;}
.br30{border-radius: 30px !important;}
.br35{border-radius: 35px !important;}
.br9999{border-radius: 9999px !important;}

.minH100{min-height: 100vh}

.noOverflow{overflow: hidden}
.shadow{
	box-shadow: 0px 2px 3px rgba(0,0,0,0.05);
}
.noShadow{
	box-shadow: none !important;
}
.shadowtxt{
	text-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}

.noSelect{ user-select: none; }
.noDisplay{ display: none !important; }

@media (max-width: 900px) {
	.mediaOver900{ display: none; }
}
@media (max-width: 700px) {
	.mediaOver700{ display: none; }
}

select.fancyInput{
	cursor: pointer;
}
.fancyform input, .fancyform textarea, .fancyInput{
	outline: none;
    display: block;
    padding: 7px 10px;
    border: solid 1px #0000000f;
/*    border-left: solid 3px rgba(0,0,0,0.3);*/

    border-radius: 2px;
	transition: 0.1s ease;
}
.fancyform textarea, textarea.fancyInput{
	min-height: 50px;
	transition: border 0.1s ease;
}

.fancyform input:not([type="radio"]), .fancyInput{
/*	width: 100%;*/
}

.fancyform input[type="checkbox"]{
	cursor: pointer;
}
.fancyform input:hover, .fancyform textarea:hover, .fancyInput:hover, .fancyInput.active{
/*    border-left: solid 5px var(--color_accent);*/
}
.fancyform input:focus, .fancyform textarea:focus, .fancyInput:focus{
	border: solid 1px var(--color_accent);
/*    border-left: solid 3px var(--color_accent);*/
}
.fancyform input[type="checkbox"]{
	height: 20px;
    width: 20px;
}

.fancyform input[type="color"]{
	block-size: 40px;
	padding: 0px;
}

*:disabled, *.disabled{
	pointer-events: none !important;
    opacity: 0.5 !important;
}
*.noInput{
	pointer-events: none !important;
}

.fancyform button, .fancyButton{
	cursor: pointer;
	border: 0;
	border-radius: 3px;
/*	border-radius: 10px;*/

	color: white;
	background-color: var(--color_accent);

	width: max-content;
	padding: 12px 30px;

	transition: 0.1s ease;
}

.fancyform button:focus, .fancyform button:hover, .fancyButton:focus, .fancyButton:hover{
	outline: none;
	background-color: var(--color_accent_hover);
	transform: scale(1.05);
}

.img_falsa{
	background-position: center;
	background-size: cover;
/*	background-size: contain;*/
	background-repeat: no-repeat;
/*	border-radius: 999px;*/
	overflow: hidden;
}

space{
	position: relative;
	display: block;
	height: 1px;
	width: 1px;
}
space.h100p{height: 100%}
space.h100vw{height: 100vw}
space.h5px{height: 5px}
space.h7px{height: 7px}
space.h10px{height: 10px}
space.h15px{height: 15px}
space.h20px{height: 20px}
space.h25px{height: 25px}
space.h30px{height: 30px}
space.h35px{height: 35px}
space.h40px{height: 40px}
space.h45px{height: 45px}
space.h50px{height: 50px}
space.h60px{height: 60px}
space.h70px{height: 70px}
space.h80px{height: 80px}
space.h90px{height: 90px}
space.h100px{height: 100px}
space.h120px{height: 120px}
space.h150px{height: 150px}
space.h180px{height: 180px}
space.h200px{height: 200px}
space.h300px{height: 300px}

space.w100p{width: 100%}
space.w100vw{width: 100vw}
space.w5px{width: 5px}
space.w7px{width: 7px}
space.w10px{width: 10px}
space.w15px{width: 15px}
space.w20px{width: 20px}
space.w25px{width: 25px}
space.w30px{width: 30px}
space.w35px{width: 35px}
space.w40px{width: 40px}
space.w45px{width: 45px}
space.w50px{width: 50px}
space.w60px{width: 60px}
space.w70px{width: 70px}
space.w80px{width: 80px}
space.w90px{width: 90px}
space.w100px{width: 100px}
space.w120px{width: 120px}
space.w150px{width: 150px}
space.w180px{width: 180px}
space.w200px{width: 200px}
space.w300px{width: 300px}
space.w100px{width: 300px}

.h5{height:5px}

.m-0{margin: 0 !important;}
.m-1 {margin: 0.25rem !important;}
.m-2 {margin: 0.5rem !important;}
.m-3 {margin: 1rem !important;}
.m-4 {margin: 1.5rem !important;}
.m-5 {margin: 3rem !important;}
.m-auto {margin: auto !important;}
.mx-0 {margin-right: 0 !important;margin-left: 0 !important;}
.mx-1 {margin-right: 0.25rem !important;margin-left: 0.25rem !important;}
.mx-2 {margin-right: 0.5rem !important;margin-left: 0.5rem !important;}
.mx-3 {margin-right: 1rem !important;margin-left: 1rem !important;}
.mx-4 {margin-right: 1.5rem !important;margin-left: 1.5rem !important;}
.mx-5 {margin-right: 3rem !important;margin-left: 3rem !important;}
.mx-auto {margin-right: auto !important;margin-left: auto !important;}
.my-0 {margin-top: 0 !important;margin-bottom: 0 !important;}
.my-1 {margin-top: 0.25rem !important;margin-bottom: 0.25rem !important;}
.my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;}
.my-3 {margin-top: 1rem !important;margin-bottom: 1rem !important;}
.my-4 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}
.my-5 {margin-top: 3rem !important;margin-bottom: 3rem !important;}
.my-auto {margin-top: auto !important;margin-bottom: auto !important;}
.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: 0.25rem !important;}
.mt-2 {margin-top: 0.5rem !important;}
.mt-3 {margin-top: 1rem !important;}
.mt-4 {margin-top: 1.5rem !important;}
.mt-5 {margin-top: 3rem !important;}
.mt-auto {margin-top: auto !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: 0.25rem !important;}
.mb-2 {margin-bottom: 0.5rem !important;}
.mb-3 {margin-bottom: 1rem !important;}
.mb-4 {margin-bottom: 1.5rem !important;}
.mb-5 {margin-bottom: 3rem !important;}
.mb-auto {margin-bottom: auto !important;}

fable, fbody, fhead{
	display: flex;
	flex-flow: column nowrap;
}
fhead fr{
	align-items: center;
	border-bottom: solid 2px #00000017;
}
fhead fd{
	font-weight: bold;
}

fr{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	border-bottom: solid 1px #00000017;
}
fd{
	display: flex;
	flex-flow: column nowrap;
	gap: 5px;
	padding: 5px 7px;
	flex: 1;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button{
	border: none;
	cursor: pointer;
}
textarea{
	resize: vertical;
}
label{
	cursor: pointer;
}

.trans1s{
	transition: 0.1s ease;
}

.bigbtn{
	background-color: var(--color_accent);
	color: white;
	padding: 10px 15px;
	border-radius: var(--border-radius-2);
	transition: 0.12s ease;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 4px;

    box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);

    cursor: pointer;
	user-select: none;
	font-family: inherit;
}
.bigbtn:hover, .bigbtn:focus{
	outline: none;
	color: white !important;
	background-color: var(--color_accent_hover);
}
.bigbtn.red, button.red{
	background-color: #e1205e;
}
.bigbtn.red:hover, button.red:hover, .bigbtn.red:focus, button.red:focus{
	background-color: #a1224d;
}

.bigbtn.yellow{
	background-color: #f19e2b;
}
.bigbtn.yellow:hover, .bigbtn.yellow:focus{
	background-color: #c77c15;
}

.bigbtn.golden{
	background-color: #cb9528;
}
.bigbtn.golden:hover, .bigbtn.golden:focus{
	background-color: #af7b12;
}

.bigbtn.green{
	background-color: #9ac510;
}
.bigbtn.green:hover, .bigbtn.green:focus{
	background-color: #77ad1c;
}

.bigbtn.blue{
	background-color: #41a3bf;
}
.bigbtn.blue:hover, .bigbtn.blue:focus{
	background-color: #3483a7;
}

.bigbtn.black{
	background-color: var(--black);
}
.bigbtn.black:hover, .bigbtn.black:focus{
	background-color: #0d0d12;
}

.bigbtn.white{
	color: var(--black);
	background-color: white;
}
.bigbtn.white:hover, .bigbtn.white:focus{
	background-color: var(--color_accent);
	color: white;
}

.bigbtn.mini{
	padding: 5px 12px;
	border-radius: var(--border-radius-1);
}


.editPopup{
	border-radius: 3px;
	cursor: auto !important;

	width: 1200px;
	max-width: 97%;
}

.progressbar{
	position: relative;
	overflow: hidden;
	height: 3px;
	background-color: whitesmoke;
}
.progressbar.normalStyle{
	border-radius: 999px;
	box-shadow: 0px 1px 8px rgb(0 0 0 / 38%);
}

.progressbar .fill{
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}

.fill.green{background-color: #44dc8b;}
.fill.yellow{background-color: #dcb144;}
.fill.red{background-color: #db3658;}

.clamped{
	width: 1200px;
	max-width: 100%;
	
	margin-left: auto;
	margin-right: auto;
}
.clamped.w700{width: 700px}
.clamped.w800{width: 800px}
.clamped.w900{width: 900px}
.clamped.w1000{width: 1000px}
.clamped.w1100{width: 1100px}

@media (max-width: 1200px) {
	.onlydesktop{
		display: none !important;
	}
	.columnReverseOnMobile{
		flex-direction: column-reverse !important;
	}
	.columnOnMobile{
		flex-direction: column !important;
	}
	.rowOnMobile{
		flex-direction: row;
	}
	.c2.responsive, .c3.responsive, .c4.responsive, .c5.responsive{
		grid-template-columns: 1fr
	}
	.noWrapOnMobile{
		flex-wrap: nowrap !important;
	}
}
@media (min-width: 1201px) {
	.onlymobile{
		display: none !important;
	}
}

.cursor_default{cursor: default;}
.pointer{ cursor: pointer; }

.anim_highlight {
	-webkit-animation-name: highlight;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes highlight {
	0%   { box-shadow: 0px 0px 0px var(--color_accent);}
	50%   { box-shadow: 0px 0px 10px var(--color_accent);  transform: scale(1.05)}
	100%   { box-shadow: 0px 0px 0px var(--color_accent);}
}

.onParentHover, .hideOnParentHover{
	transition: 0.1s ease;
}
.onParentHover{
	opacity: 0;
}

*:hover > .onParentHover,
*:hover > * > .onParentHover.deep1,
*:hover > * > * > .onParentHover.deep2{
	opacity: 1;
}
*:hover > .hideOnParentHover,
*:hover > * > .hideOnParentHover.deep1,
*:hover > * > * > .hideOnParentHover.deep2{
	opacity: 0;
	font-size: 0;
}

.vue-app.loading .hideOnVueLoading{
	display: none;
}
.vue-app:not(.loading) .showOnVueLoading{
	display: none;
}

.linethrough{text-decoration: line-through;}

.leading-3{line-height: .75rem; /* 12px */}
.leading-4{line-height: 1rem; /* 16px */}
.leading-5{line-height: 1.25rem; /* 20px */}
.leading-6{line-height: 1.5rem; /* 24px */}
.leading-7{line-height: 1.75rem; /* 28px */}
.leading-8{line-height: 2rem; /* 32px */}
.leading-9{line-height: 2.25rem; /* 36px */}
.leading-10{line-height: 2.5rem; /* 40px */}
.leading-none{line-height: 1}
.leading-tight{line-height: 1.25}
.leading-snug{line-height: 1.375}
.leading-normal{line-height: 1.5}
.leading-relaxed{line-height: 1.625}
.leading-loose{line-height: 2}