/* =============================================================================================================================================== */
/* ================================================================== VARIABLES ================================================================== */
/* =============================================================================================================================================== */
:root{
	--blue-dark-30:#022029;
	--blue-dark-20:#062832;
	--blue-dark-10:#18404B;
	--blue-light:#4B717C;
	--orange-40:#d55f00;
	--orange-30:#FF7700;
	--red-40:#a03f3f;
	--red-30:#DF5252;
	--green-50:#008D46;
	--green-40:#04B55C;
	--green-30:#23CC73;
	--silver-40:#96b1b8;
	--silver-30:#B8CED4;
	--silver-20:#CEDDE1;
	--silver-10:#E8F0F2;
	--white:#ffffff;

	--padding-48:48px;
	--padding-40:48px;
	--padding-32:32px;
	--padding-24:24px;
	--padding-16:16px;
	--padding-8:8px;
	--padding-4:4px;

	--fw-normal:500;
	--fw-bold:800;
}




/* =============================================================================================================================================== */
/* ==================================================================== FONTS ==================================================================== */
/* =============================================================================================================================================== */

@font-face { font-family:'Candy Beans'; src:url('../fonts/Candy-Beans.otf') format('opentype'); font-weight:var(--fw-normal); font-style:normal; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; }



/* =============================================================================================================================================== */
/* ==================================================================== BASICS =================================================================== */
/* =============================================================================================================================================== */

*{ font-family:'Nunito'; font-size:15px; line-height:1.5; color:inherit; }
*, *::after, *::before{ box-sizing:border-box; }
html{ height:100%; scroll-behavior:smooth; }
body, html{ position:relative; margin:0; padding:0;}
body{ overflow:hidden; min-height:100%; font-weight:var(--fw-normal); color:#4B717C; background-color:var(--silver-10); }
a{ text-decoration:underline; font-weight:var(--fw-bold); color:var(--green-50); cursor:pointer; }
/* ::-moz-selection { } ::selection { } */
h1, h2, h3, h4, h5, h6{ margin:0 0 .5rem 0; }
h1, h2{ font-family:'Candy Beans'; color:var(--blue-dark-10); font-weight:var(--fw-normal); }
h1{ font-size:40px; line-height:1.1; }
h2{ font-size:24px; line-height:1.2; }
h3{ font-size:18px; line-height:1.4; color:var(--blue-dark-10); }
h4{ font-size:16px; line-height:1.4; color:var(--blue-dark-10); }
label{ cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
table, td, th, tr{ margin:0; padding:0; border-collapse:collapse; border-spacing:0; text-align:left; vertical-align:top; font-weight:var(--fw-normal); }
p{ margin:0 0 1em 0; }
p:last-child{ margin-bottom:0; }
label{ display:block; position:relative; }
ul{ display:block; margin:0; padding:0; }
li{ list-style-type:none; margin:0; padding:0; }
button{ cursor:pointer; }
summary{ user-select:none; }
div{ display:grid; align-content:start; }
select{ padding-right:35px !important; -moz-appearance:none; -webkit-appearance:none; appearance:none; background:url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat calc(100% - 12px) 50%; }
 
::placeholder { color:var(--silver-40); opacity:1; }
::-ms-input-placeholder { color:var(--silver-40); }


textarea{ resize:vertical; padding:12px; }
input[type="text"], select, input[type="email"], input[type="password"], input[type="number"]{ height:44px; padding:0 12px; }
input[type="text"], textarea, select, input[type="email"], input[type="password"], input[type="number"]{ width:100%; background-color:transparent; border:2px solid var(--silver-10); border-radius:8px; }

input[type="radio"], input[type="checkbox"]{ display:none; }
input[type="radio"] + .input, input[type="checkbox"] + .input{ display:flex; grid-gap:var(--padding-4); }

input[type="radio"] + .input i.check, input[type="checkbox"] + .input i.check{ display:inline-grid; justify-content:center; align-content:center; border:2px solid var(--silver-20); width:20px; height:20px; vertical-align:middle; border-radius:4px; background-color:var(--white); transition:border-color .2s; }
input[type="radio"] + .input i.check{ border-radius:100%; }
input[type="radio"] + .input i.check::before{ border-radius:100%; }
input[type="radio"] + .input i.check::before, input[type="checkbox"] + .input i.check::before{ content:''; background-color:var(--green-40); width:0px; height:0px; display:block; transition:width .2s, height .2s; }
input[type="radio"]:checked + .input i.check, input[type="checkbox"]:checked + .input i.check{ border-color:var(--green-40); }
input[type="radio"]:checked + .input i.check::before, input[type="checkbox"]:checked + .input i.check::before{ width:12px; height:12px; }

input[type="radio"]:checked + .input.button.button--border, input[type="checkbox"]:checked + .input.button.button--border{ border-color:var(--green-40) !important; }


/* =============================================================================================================================================== */
/* =============================================================== GLOBAL ELEMENTS =============================================================== */
/* =============================================================================================================================================== */

/* Label */
.label{ display:inline-block; width:fit-content; font-size:12px; background:var(--silver-10); padding:0px 5px; border-radius:6px; font-weight:var(--fw-normal); position:relative; white-space:nowrap; }
.label .fa-regular, .label .fa-solid{ font-size:12px; }

/* Accordion */
.accordion{ text-decoration:none; }
.accordion + .panel{ display:none; }
.accordion::before{ content:'\f0d7'; font-family:"Font Awesome 6 Pro"; text-decoration:none; } 
.accordion.active::before{ content:'\f0d8'; }

/* Indent */
.indent{ padding-left:1rem; }

/* Card */
.card{ background-color:#fff; border:2px solid var(--silver-10); border-radius:12px; border:2px solid var(--silver-20); }
.card .card__content{ padding:var(--padding-24); }
a.card{ text-decoration:none; color:inherit; }

/* Button */
.button{ height:44px; padding:0 12px; border-radius:8px; font-weight:var(--fw-bold); background-color:transparent; display:flex; grid-gap:6px; width:fit-content; align-items:center; box-shadow:none; border:0; text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none; position:relative; }
.button.button--small{ height:32px; font-size:13px; }
.button.button--small *{ font-size:13px; }
.button.button--green{ background-color:var(--green-40); border-bottom:3px solid var(--green-50); color:var(--white);  }
.button.button--orange{ background-color:var(--orange-30); border-bottom:3px solid var(--orange-40); color:var(--white);  }
.button.button--silver{ background-color:var(--silver-10); border-bottom:3px solid var(--silver-20); color:var(--blue-dark-10);  }
.button.button--red{ background-color:var(--red-30); border-bottom:3px solid var(--red-40); color:var(--white);  }
.button.button--border{ border:2px solid var(--silver-10); color:var(--blue-dark-10); transition:border-color .3s; }
.button.button--border:hover{ border-color:var(--silver-20);  }
.button:not(.button--border):active{ border-bottom-width:0px; }

.button.button--loading{ color:transparent !important; }
.button.button--loading::after{ color:var(--white) !important; content:'\e1d4'; position:absolute; top:calc(50% - 8px); left:calc(50% - 8px); font-family:'Font Awesome 6 Pro'; line-height:16px; font-size:16px; animation:rotate 2s infinite linear; }
.button.button--silver.button--loading::after,
.button.button--border.button--loading::after{ color:var(--blue-dark-10) !important; }

.button[disabled]{ background-color:var(--silver-20); border-bottom-color:var(--silver-30); color:#a3bdc3; cursor:default; }
.button[disabled]:active{ border-bottom-width:3px; }


/* Modal */
.modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(2,32,41,.0); transition:background-color .2s; padding:var(--padding-24); justify-items:center; overflow-x:hidden; overflow-y:auto; z-index:999; }
.modal .card{ width:100%; max-width:800px; margin:auto; position:relative; top:24px; opacity:0; transition:top .2s, opacity .2s; }
.modal .modal__close{ position:fixed; top:12px; right:12px; cursor:pointer; padding:8px 12px; opacity:0; transition:opacity .2s; } 
.modal .modal__close::before{ content:'\f00d'; font-family:'Font Awesome 6 Pro'; display:block; color:var(--white); font-size:32px; line-height:1; }

.modal.modal--open{ background-color:rgba(2,32,41,.85); }
.modal.modal--open .card{ opacity:1; top:0; }
.modal.modal--open .modal__close{ opacity:1; }

.modal[data-modal-name="confirm"] .card{ max-width:400px; }
.modal[data-modal-name="confirm"] .card__content{ grid-gap:var(--padding-16); }
.modal[data-modal-name="confirm"] .actions{ display:flex; grid-gap:var(--padding-8); }
.modal[data-modal-name="confirm"] .actions .button{ min-width:64px; justify-content:center; }
.modal[data-modal-name="confirm"] .modal__close{ display:none; }


/* =============================================================================================================================================== */
/* =========================================================== UNDER CONSTRUCTION PAGE =========================================================== */
/* =============================================================================================================================================== */


body.under_construction { display: grid; grid-gap:8px; align-items: center; align-content: center; justify-content: center; justify-items: center; text-align: center; padding: 24px; }
body.under_construction svg { width: 200px; height: auto; margin: 0 auto 24px auto; }