:root {
	--defaultBg: #c0c0c0;
    --defaultBoxBg: #ffffff;
    --defaultBoxText: #202123;
    --defaultBoxTextR: #ff3823;
	--defaultSubBoxBg: #d8d9db;
	--defaultInputOutline: #232323;
	--defaultInputText: #494949;
    --defaultButtonBg: #ebebeb;
    --defaultSubButtonBg: #aaaaaa;
    --defaultHeadBg: #eeeeee;
    --defaultHeadTitle: #202123;
    --defaultHeadSubtitle: #8c8c8d;
    --defaultHeadText: #444444;
	--defaultSideBg: #202123;
    --defaultSideTitle: #ffffff;
    --defaultSideText: #8c8c8d;
    --defaultSideTextSelect: #ffffff2d;
	--defaultSubBox1Bg: #ebebeb;
	--defaultSubBox2Bg: #f7f6f6;
	--defaultSubBox3Bg: #d6d6d6;
	--defaultBoxBorder: #000000;
	--defaultAffirmBg: #dfedd6;
	--defaultDeclineBg: #ffdad8;
    --defaultText: #202123;
	--defaultNumText: #000000;
	--defaultShadow: #00000080;
	--defaultIconBg: #929292;
	--defaultIconBorder: #7a7a7a;
	--defaultHazeBg: #2e2e2e99;

	--darkBg: #131313;
    --darkBoxBg: #2e2e2e;
    --darkBoxText: #e4e9e9;
    --darkBoxTextR: #ff6d5c;
	--darkSubBoxBg: #39383d;
	--darkInputOutline: #d1d1d1;
	--darkInputText: #eeeeee;
    --darkButtonBg: #ebebeb;
    --darkSubButtonBg: #aaaaaa;
    --darkHeadBg: #202020;
    --darkHeadTitle: #cfcfcf;
    --darkHeadSubtitle: #a0a0a0;
    --darkHeadText: #bebebe;
	--darkSideBg: #0c0c0e;
    --darkSideTitle: #bebebe;
    --darkSideText: #979797;
    --darkSideTextSelect: #cae2e42d;
    --darkSubBox1Bg: #ebebeb;
	--darkSubBox2Bg: #f7f6f6;
	--darkSubBox3Bg: #d6d6d6;
	--darkBoxBorder: #000000;
	--darkAffirmBg: #dfedd6;
	--darkDeclineBg: #ffdad8;
	--darkText: #202123;
	--darkNumText: #000000;
	--darkShadow: #00000080;
	--darkIconBg: #929292;
	--darkIconBorder: #7a7a7a;
	--darkHazeBg: #d3d3d399;

    --clear: #00000000;

    --topMenuHeight: 8em;
	--headerBorderWidth: 0.2em;

	--defaultWidth: 1366;
	--defaultHeight: 900;

    --textFont: "Spectral SC";
	--numFont: "Abril Fatface";
}
.default-theme {
    --bg: var(--defaultBg);

	--boxBg: var(--defaultBoxBg);
	--boxText: var(--defaultBoxText);
	--boxTextR: var(--defaultBoxTextR);
	--subBoxBg: var(--defaultSubBoxBg);
	--inputOutline: var(--defaultInputOutline);
	--inputText: var(--defaultInputText);
    --buttonBg: var(--defaultButtonBg);
    --subButtonBg: var(--defaultSubButtonBg);
	--subBox1Bg: var(--defaultSubBox1Bg);
	--subBox2Bg: var(--defaultSubBox2Bg);
	--subBox3Bg: var(--defaultSubBox3Bg);
	--boxBorder: var(--defaultBoxBorder);
	--affirmBg: var(--defaultAffirmBg);
	--declineBg: var(--defaultDeclineBg);
	--text: var(--defaultText);
	--numText: var(--defaultNumText);
	--shadow: var(--defaultShadow);
	--iconBg: var(--defaultIconBg);
	--iconBorder: var(--defaultIconBorder);

    --headBg: var(--defaultHeadBg);
    --headTitle: var(--defaultHeadTitle);
    --headSubtitle: var(--defaultHeadSubtitle);
    --headText: var(--defaultHeadText);
    --sideBg: var(--defaultSideBg);
    --sideTitle: var(--defaultSideTitle);
    --sideText: var(--defaultSideText);
    --sideTextSelect: var(--defaultSideTextSelect);

	--hazeBg: var(--defaultHazeBg);
}
.dark-theme {
    --bg: var(--darkBg);

	--boxBg: var(--darkBoxBg);
	--boxText: var(--darkBoxText);
	--boxTextR: var(--darkBoxTextR);
	--subBoxBg: var(--darkSubBoxBg);
	--inputOutline: var(--darkInputOutline);
	--inputText: var(--darkInputText);
    --buttonBg: var(--darkButtonBg);
    --subButtonBg: var(--darkSubButtonBg);
	--subBox1Bg: var(--darkSubBox1Bg);
	--subBox2Bg: var(--darkSubBox2Bg);
	--subBox3Bg: var(--darkSubBox3Bg);
	--boxBorder: var(--darkBoxBorder);
	--affirmBg: var(--darkAffirmBg);
	--declineBg: var(--darkDeclineBg);
	--text: var(--darkText);
	--numText: var(--darkNumText);
	--shadow: var(--darkShadow);
	--iconBg: var(--darkIconBg);
	--iconBorder: var(--darkIconBorder);

    --headBg: var(--darkHeadBg);
    --headTitle: var(--darkHeadTitle);
    --headSubtitle: var(--darkHeadSubtitle);
    --headText: var(--darkHeadText);
    --sideBg: var(--darkSideBg);
    --sideTitle: var(--darkSideTitle);
    --sideText: var(--darkSideText);
    --sideTextSelect: var(--darkSideTextSelect);
	
	--hazeBg: var(--darkHazeBg);
}


html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
    background: var(--bg);
    color: var(--fontColor);
    font-family: helvetica;
	font-size: 1rem;
}
main {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
	color: var(--boxText);
	font-family: "Source Sans 3";
	font-weight: 600;
	text-align: inherit;
    order: 1;
}
span {
    color: var(--text);
	font-family: var(--textFont);
	font-size: 0.23em;
	font-weight: 400;
	text-align: center;
	align-self: stretch;
	justify-self: stretch;
	order: 1;
	line-height: 0.95em;
	margin-top: 0em;
}
input {
	background: var(--boxBg);
	color: var(--inputText);
	border-color: var(--inputOutline);
	border-width: 1px;
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-family: "Source Sans 3";
	font-weight: 600;
	text-align: left;
}
select {
	background: var(--boxBg);
	color: var(--inputText);
	border-color: var(--inputOutline);
	border-width: 1px;
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-family: "Source Sans 3";
	font-weight: 600;
	text-align: left;
}
textarea {
	background: var(--boxBg);
	color: var(--inputText);
	border-color: var(--inputOutline);
	border-width: 1px;
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-family: "Source Sans 3";
	font-weight: 600;
	text-align: left;
}
option {
	background: var(--boxBg);
	color: var(--inputText);
	border-color: var(--inputOutline);
	border-width: 1px;
	border-style: solid;
	border-radius: calc(100 * (3vw / var(--defaultWidth)));
	font-family: "Source Sans 3";
	font-weight: 600;
	text-align: inherit;
}


.row::after {
	content: "";
	clear: both;
	display: table;
}

/* For mobile phones: */
/*[class*="col-"] {
	width: 95%;
	margin: auto;
}

@media only screen and (min-width: 768px) {
	/* For desktop: */
    .col-05 {width: 05%; margin: auto;}
    .col-10 {width: 10%; margin: auto;}
    .col-15 {width: 15%; margin: auto;}
    .col-16 {width: 16.66%; margin: auto;}
    .col-20 {width: 20%; margin: auto;}
    .col-25 {width: 25%; margin: auto;}
    .col-30 {width: 30%; margin: auto;}
    .col-33 {width: 33.33%; margin: auto;}
    .col-35 {width: 35%; margin: auto;}
    .col-40 {width: 40%; margin: auto;}
    .col-45 {width: 45%; margin: auto;}
    .col-50 {width: 50%; margin: auto;}
    .col-55 {width: 55%; margin: auto;}
    .col-60 {width: 60%; margin: auto;}
    .col-65 {width: 65%; margin: auto;}
    .col-66 {width: 66.66%; margin: auto;}
    .col-70 {width: 70%; margin: auto;}
    .col-75 {width: 75%; margin: auto;}
    .col-80 {width: 80%; margin: auto;}
    .col-83 {width: 83.33%; margin: auto;}
    .col-85 {width: 85%; margin: auto;}
    .col-90 {width: 90%; margin: auto;}
    .col-95 {width: 95%; margin: auto;}
    .col-100 {width: 100%; margin: auto;}
/*}*/

.main {
    box-sizing: border-box;
    flex: auto;
    display: block;
    font-size: 13px;
}

/* For mobile phones: */
[class*="main-root-"] {
    width: 95%;
    margin: auto;
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .main-root-d {width: 100em; max-width: 1300px;}
}