:root {
	--background_color_main: #e3dbdb;
	
	--background_color_darkest: #164450;
	--background_color_mid1: #216778;
	--background_color_mid2: #2c89a0;
	--background_color_mid3: #5fbcd3;
	--background_color_mid4: #97e1f4;
	--background_color_mid5: #d5f7ff;
	--background_color_light: #c2cee0;
	--background_color_lightest: #b7c4c8;
	--background_color_grey: #dbdee3;

	--background_color_blue: #8babd0;

	--background_color_green: #ddffe9;
	--background_color_green2: #78d498;
	--background_color_gold: rgb(254, 223, 50);
	--background_color_light_gold: rgb(254, 243, 206);
	--background_color_lightest_gold: rgb(255, 252, 239);
	--background_color_orange: #f5bb5d;
	--background_color_brown: #bd852a;
	--background_color_darkbrown: #806230;
	
	--text_color_black: black;
	--text_color_darkest: #164450;
	--text_color_midblue: #216778;
	
	--text_color_mid: #939dac;
	--text_color_light: #b7c4c8;
	--text_color_lightest: #dbdee3;
  }

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

p { margin: 0.35em; color: var(--text_color_darkest); }  

body { padding: 0px; margin: 0px; font-family: 'Helvetica', 'Arial', sans-serif; background-color: var(--background_color_main); }

a { color: #6b520e; font-weight: bold; text-decoration:none; }

button { background-color: var(--background_color_darkest); color: var(--text_color_light); border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 1em; font-family: inherit; user-select: none; }
/*button:not(:last-child) { margin-bottom: 10px; }*/
button > * { margin: 0 10px; }

input { background-color: #f1f1f1; color: #444444; border: none; border-radius: 8px; font-size: 1em; padding: 8px; }
/*input:not(:last-child) { margin-bottom: 15px; }*/

select { background-color: #f1f1f1; color: #444444; border: none; border-radius: 8px; font-size: 1em; padding: 8px; }
/*select:not(:last-child) { margin-bottom: 10px; }*/

.fullwidth { width: 100%; }


.gap { gap: 10px; }

.right_fillup { margin-right: auto; }
.bottom_fillup { margin-bottom: auto; }
.left_fillup { margin-left: auto; }

.vert_center { align-items: center; }

.rounded { border-radius: 10px; }

.click { user-select: none; }
.click:hover { cursor: pointer; }

.column { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }

.bold { font-weight: bold; }
.white_text { color: white; }
.blue_text { color: #2c89a0; }
.black_text { color:black; }
.big_text { font-size: 1.3em; }
.bigtext { font-size: 1.3em; }
.lightest_text { color: var(--text_color_lightest); }
.error_text { color:red; }
.nowrap { white-space: nowrap; }

.hr { width: 100%; border-color: inherit;}

.mid_background2 { background-color: var(--background_color_mid2); }

.mid_wrapper1 { background-color: var(--background_color_mid1); padding: 10px; border-radius: 10px; }
.mid_wrapper2 { background-color: var(--background_color_mid2); padding: 10px; border-radius: 10px; }
.mid_wrapper3 { background-color: var(--background_color_mid3); padding: 10px; border-radius: 10px; }
.mid_wrapper4 { background-color: var(--background_color_mid4); padding: 10px; border-radius: 10px; }
.light_wrapper { background-color: var(--background_color_light); padding: 10px; border-radius: 10px; }
.lightest_wrapper { background-color: var(--background_color_lightest); padding: 10px; border-radius: 10px; }
.grey_wrapper { background-color: var(--background_color_grey); padding: 10px; border-radius: 10px; }

.light_rectangle { background-color: var(--background_color_light); padding: 10px; }

.background_main { background-color: var(--background_color_main); }
.background_darkest { background-color: var(--background_color_darkest); }
.background_mid1 { background-color: var(--background_color_mid1); }
.background_mid2 { background-color: var(--background_color_mid2); }
.background_mid3 { background-color: var(--background_color_mid3); }
.background_mid4 { background-color: var(--background_color_mid4); }
.background_mid5 { background-color: var(--background_color_mid5); }
.background_light { background-color: var(--background_color_light); }
.background_lightest { background-color: var(--background_color_lightest); }
.background_grey { background-color: var(--background_color_grey); }
.background_blue { background-color: var(--background_color_blue); }
.background_green { background-color: var(--background_color_green); }
.background_green2 { background-color: var(--background_color_green2); }
.background_gold { background-color: var(--background_color_gold); }
.background_light_gold { background-color: var(--background_color_light_gold); }
.background_lightest_gold { background-color: var(--background_color_lightest_gold); }
.background_orange { background-color: var(--background_color_orange); }
.background_brown { background-color: var(--background_color_brown); }
.background_cornsilk { background-color: cornsilk; }


/* START PAGE LOADERS */
.loading_div_cl { padding: 5px; background-color: #f1f1f1; }
.loading_head_cl { text-align: center; font-weight: bold; font-size: 1.5em; margin: 20px 10px 10px 10px; }
.loading_text_cl { text-align: center; font-size: 1.2em; margin: 0px 0px 10px 0px; }

.loading_spinner { border: 8px solid #5c5c5c; border-top: 8px solid rgba(255,255,255,0); border-bottom: 8px solid rgba(255,255,255,0); border-radius: 50%; width: 30px; height: 30px; animation: loading_spin 3s linear infinite; margin: 20px auto 0px auto; }
@keyframes loading_spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.loading_error_div_cl { display: none; padding: 5px; background-color: #f1f1f1; }
.reload_button_cl { display: flex; align-items: center; margin: 20px auto 5px auto; height: 50px; padding: 25px; background-color: red; width: fit-content; font-size: 1.2em; font-weight: bold; background-color: #8f8c78; border-radius: 5px; border: 2px solid #b0ad96; cursor: pointer; user-select: none; }

/* MAIN WINDOW */
.main_window { padding: 0px; margin: 0px; }