/* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); */
/* @import url('https://fonts.googleapis.com/css?family=VT323&display=swap'); */
/* <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet"> */

@import url("styles_page.css");
@import url("styles_gl.css");

/* generale pagina */
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:'Inconsolata', monospace; font-size:1.3rem; }
html { font-size:13px; }
html, body { height:100%; }
body { background:#ffffff; color:#574c4f; font-family:'Inconsolata', monospace; font-size:1.3rem; margin:0; }
input { color:#574c4f; font-family:'Inconsolata', monospace; padding:10px 12px 10px 12px; border-color:#cccccc; }
select { color:#574c4f; font-family:'Inconsolata', monospace; padding:10px 12px 10px 12px; border-color:#cccccc; }
button { padding:6px 12px 6px 12px; }
hr { width:100%; background-color:#6087ba; border:none; height:1px; }
a { text-decoration:none; color:#6392ea; }
div { vertical-align:top; }

.w_1 { width:100%; display:block; }
.w_2 { width:50%; display:inline-block; }
.w_3 { width:33.32%; display:inline-block; }
.w_4 { width:25%; display:inline-block; }
.w_5 { width:20%; display:inline-block; }
.w_6 { width:16.66%; display:inline-block; }

.c_verde { background-color:#84a845 !important; color:#ffffff !important; }
.c_celeste { background-color:#46afd3 !important; color:#ffffff !important; }

@media screen and (max-width: 9000px)
{
	.main_left_on { width:30vw !important; }
	.main_right_on { width:30vw !important; }
	.side_panel { width:30vw !important; }
}
@media screen and (max-width: 1240px)
{
	.main_left_on { width:50vw !important; }
	.main_right_on { width:50vw !important; }
	.side_panel { width:50vw !important; }
}
@media screen and (max-width: 1024px)
{
	.main_left_on { width:50vw !important; }
	.main_right_on { width:50vw !important; }
	.side_panel { width:50vw !important; }
}
@media screen and (max-width: 768px)
{
	.main_left_on { width:85vw !important; }
	.main_right_on { width:85vw !important; }
	.side_panel { width:85vw !important; }
}

#box_bg_close { width:100%; height:100%; display:none; margin:0 auto; z-index:-1; background-color:#aabbcc; }

.box_bg { width:100%; max-width:1100px; height:100%; margin:0 auto; }
.main_center { width:100%; min-height:100%; overflow:hidden; background-color:#fefefe; }
#main_box { padding:0; font-size:16px; overflow:hidden; }

/* menu centrale */
#mcc { width:100%; max-width:1100px; height:50px; background-color:#f5f5f5 !important; color:#6087ba !important; }
#mcc > div { height:inherit; text-align:center; }
#mcc_c { width:68%; margin-left:16%; }
#mcc_c div { height:inherit; display:inline-block; }
#mcc_c div { width:70% !important; padding:5px 0 0 0 !important; }
#mcc_c div a { font-family:'Inconsolata', monospace; font-size:2.4rem; color:#6087ba; }
#mcc_c div a img { height: 42px; }

#mcc_l { width:16%; float:left; cursor:pointer; padding:13px 0 0 0; }
#mcc_r { width:16%; float:right; cursor:pointer; padding:13px 0 0 0; }

/* top_menu */
.top_menu { width:100%; height:50px; background-color:#f5f5f5; color:#bbbbbb; }
.top_menu div { width:20%; height:inherit; display:inline-block; text-align:center; padding:13px 0 0 0; }
.top_menu img { cursor:pointer; }
.icona_attiva { color:#6087ba; }
#icon_panel_a { color:#333333 !important; }
#icon_panel_j { color:#333333 !important; }

/* pannelli laterali */
.side_panel { width:100%; height:100%; display:none; padding:12px 0 16px 0; }
.side_panel_active { display:block; }

#panel_b { padding:8px 6px 16px 0; }
#panel_c { padding:8px 0 16px 0; overflow:hidden; }
#panel_d { padding:8px 6px 16px 0; }
#panel_e { padding:8px 8px 16px 8px; }
#panel_f { padding:8px 8px 16px 8px; }
#panel_g { padding:8px 8px 16px 8px; overflow:hidden; }
#panel_h { padding:8px 8px 16px 8px; overflow:hidden; }
#panel_i { padding:8px 0 16px 0; overflow:hidden; }
#panel_b { padding:8px 6px 16px 0; }
#panel_b { padding:8px 6px 16px 0; }

/* pulsanti e campi */
.btn_a { display:block; background-color:#343233 !important; color:#efdab9 !important; width:100% !important; border:none; border-bottom:1px solid #ffd152; margin:0; padding:10px 0 10px 16px; }
.btn_b { background-color:#fafafa !important; color:#574c4f !important; width:100% !important; max-width:400px !important; border:none; margin:0 0 8px 0; padding:10px 12px; }

/* 
.btn_c { display:block; background-color:#343233 !important; color:#efdab9 !important; width:100% !important; border:none; border-bottom:1px solid #ffd152; margin:0; padding:12px 0 11px 0; }
*/
.btn_c { display:inline-block; margin:2px 6px 2px 0; padding:12px 12px 11px 12px; cursor:pointer; }
.btn_c { background-color:#595657 !important; color:#efdab9 !important; border:none; border-bottom:1px solid #ffd152; }

.btn_d { display:block; background-color:#eaeaea !important; color:#574c4f !important; width:100% !important; padding:12px 0 12px 24px; }

#panel_b hr { width:100%; margin:6px 0 6px 0; border:none; background-color:#6087ba; height:1px; }
#panel_c hr { width:100%; margin:6px 0 6px 0; border:none; background-color:#6087ba; height:1px; }
#panel_d hr { width:100%; margin:6px 0 6px 0; border:none; background-color:#6087ba; height:1px; }
#panel_e hr { width:100%; margin:6px 0 6px 0; border:none; background-color:#6087ba; height:1px; }

.rr { color:#e23d3d !important; }
.oo { color:#E39A5B !important; }
.gg { color:#60AF5D !important; }

.rrr { border-bottom-color:#e23d3d !important; }
.ooo { border-bottom-color:#E39A5B !important; }
.ggg { border-bottom-color:#60AF5D !important; }

/* messaggi */
#msg_top { transition:0.2s ease-out; -webkit-transition:0.2s ease-out; -moz-transition:0.2s ease-out; -ms-transition:0.2s ease-out; -o-transition:0.2s ease-out; }
#msg_top { display:block; position:fixed; z-index:1200; width:100%; height:60px; top:-60px; text-align:center; cursor:pointer; padding:12px; font-size:1.2rem; }
#msg_top { background-color:#fafafa !important; color:#6087ba !important; border-bottom:1px solid #6087ba; }
#msg_top a { color:#6087ba; font-size:1.2rem; }
.msg_top_on { top:0px !important; }

#msg_bottom { transition:0.2s ease-out; -webkit-transition:0.2s ease-out; -moz-transition:0.2s ease-out; -ms-transition:0.2s ease-out; -o-transition:0.2s ease-out; }
#msg_bottom { display:block; position:fixed; z-index:1200; width:100%; bottom:-60px; text-align:center; cursor:pointer; padding:12px; font-size:1.2rem; }
#msg_bottom { background-color:#fafafa !important; color:#6087ba !important; border-top:1px solid #6087ba;  }
#msg_bottom a { color:#6087ba; font-size:1.2rem; }
.msg_bottom_on { bottom:0px !important; }

/* scroller */
#scroller { display:none; position:fixed; width:52px; height:52px; bottom:22px; right:72px; z-index:1001; padding:2px; text-align:center; cursor:pointer; font-size:14px; line-height:20px; }

/* quick_menu */
#quick_menu_btn { position:fixed; width:52px; height:52px; bottom:22px; right:12px; z-index:1001; padding:2px; text-align:center; cursor:pointer; font-size:14px; line-height:20px; }

#quick_menu_bg { position:fixed; display:none; width:100%; height:100%; top:0; left:0; z-index:999; background-color:rgba(234,234,235,0.95); }
#quick_menu { position:fixed; display:none; width:100%; height:100%; top:0; left:0; z-index:1000; }
#quick_menu > div { width:80%; max-width:400px; position:absolute; bottom:90px; right:12px; background-color:#fafafa; color:#6087ba; text-align:right; }
#quick_menu div div div { width:100%; padding:8px 12px 8px 0; font-size:1.2rem; line-height:1.2em; cursor:pointer; }
#quick_menu div div div:hover { background-color:#f3f3f3; }
#quick_menu div div div a { color:#6087ba; }
#quick_menu div div div:hover a { color:#6087ba; }

#quick_menu div div div i { display:inline-block; width:20px; height:20px; margin:0 0 0 12px; padding:2px 0 0 0; text-align:center; vertical-align:middle; }


/* icon svg color */
/* https://codepen.io/sosuke/pen/Pjoqqp */
.ico_bga { filter: invert(50%) sepia(51%) saturate(369%) hue-rotate(174deg) brightness(92%) contrast(94%); width:25px; height:25px; cursor:pointer; } 	/* icon #6087ba */
.ico_bgb { filter: invert(100%) sepia(6%) saturate(0%) hue-rotate(70deg) brightness(108%) contrast(108%); width:25px; height:25px; cursor:pointer; } 	/* icon #ffffff */
.ico_bgc { filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(338deg) brightness(106%) contrast(109%); width:25px; height:25px; cursor:pointer; }  /* icon #000000 */