/* @import url('https://fonts.googleapis.com/css2?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/css?family=Roboto:300,400,500,700,900"); */

*, *:before, *:after {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

html, body {
	/* font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, "sans-serif"; */
	font-family: "Roboto", sans-serif;
	font-size: var(--site_font_size);
	text-align: left;
	line-height:1;
	background-color: var(--color_html_back_01);
	color: var(--color_html_font_01);
}

ul,ol {list-style:none;}
fieldset,img,hr {border:0;}
caption,th {text-align:left;}
table {border-collapse:separate; border-spacing:0;}
td {padding:0;}
a {outline:none; text-decoration:none;}
a:link, a:visited, a:hover, a:active, a:focus, input:focus  {outline:none;}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:0; padding:0;}
button,input,optgroup,select,textarea{line-height:1;}

input[type="date"], input[type="time"] {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

img { /*vertical-align: middle; line-height:0;*/ display:block; }

h1 {
	/* margin: 6px 0 24px 0; */
	margin:0;
	font-size: 20px;
	font-weight: 500;
	/* text-align:center; */
	/* background-color: Coral; */
}
h2 {
	font-size:20px;
}

#overlay_load {
	position:fixed; z-index:10000; top:0; left:0; width:100%; height:100vh;
  background-image: url('/core/assets/images/svg/loader.svg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
	/* background-size: 200px 200px; */
}
.overlay_load_inner { width: 48px; margin: 0 auto; }
/* @media only screen and (min-width: 240px) { .overlay_load_inner { width: 200px; } } */
.overlay_loader {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-top: 24px;
	border: 16px solid;
	-webkit-border-radius: 50%; border-radius: 50%;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}
/* @media only screen and (min-width: 240px) { .overlay_loader { width: 200px; height: 200px; margin-top: 48px; } } */
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes         spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

#body_wrapper {
	width: 100%;
	height: 100vh;
	/* background-color: Chocolate; */
}
/* #body_header_back { */
	/* background-color: Coral; */
/* } */
#body_header_front {
	z-index: 9990;
	width: 100%;
	height: var(--header_height);
	/* max-height: var(--header_height); */
	position: fixed;
	top:0;
	left:0;
	padding: var(--header_padding);
	-webkit-box-shadow: 0 1px 0 0 var(--color_shad_01); box-shadow: 0 1px 0 0 var(--color_shad_01);
	background-color: var(--color_html_back_01);
}

#body_page {
	-webkit-transition: margin-left 0.2s ease;
		 -o-transition: margin-left 0.2s ease;
			transition: margin-left 0.2s ease;
	/* background-color: DeepPink; */
}
#body_page.is_maxi { margin-left: 0; }
/* #body_page.is_mini { margin-left: calc( var(--sbar_menu_01_width) + var(--shadow_01_width) ); } */

#page_container {
	z-index: 9950;
	/* background-color: Red; */
}

#page_content {
	/* width: 100%; */
	/* margin-bottom: 24px; */
	/* background-color: Wheat; */
	/* color: black; */
	/* GhostWhite, WhiteSmoke, Snow */
}

#page_footer {
	/* width: 100%; */
	padding: 12px;
	-webkit-box-shadow: 0 -1px 0 0 var(--color_shad_01); box-shadow: 0 -1px 0 0 var(--color_shad_01);
	/* background-color: Tan; */
	/* background-color: var(--color_html_back_01); */
	/* color: var(--color_html_font_01); */
}


.elem_hide { display: none; }
.elem_invisible { visibility: hidden; }

.font_bold { font-weight:bold; }

.cursor_pointer { cursor: pointer; }


.link_01:link    { color: var(--color_font_01); }
.link_01:visited { color: var(--color_font_01); }
.link_01:hover   { color: var(--color_font_02); }

.user_select_text {
	-webkit-user-select: text;
	   -moz-user-select: text;
		-ms-user-select: text;
			user-select: text;
}


.breadcrumb_01 {
	/* margin: 0 auto; */
	/* width: 100%; */
	/* max-width: 1320px; */
	padding: 4px 6px 16px 0px;
	/* font-size: 24px; */
	/* background-color: Wheat; */
}
.breadcrumb_01 ul { padding: 0; margin: 0; }
.breadcrumb_01 li { display: inline; }
.breadcrumb_01 li:after { margin: 0 2px 0 6px; font-size: 20px; content: '›'; }
.breadcrumb_01 li:last-child:after { content: ''; }

.svg_icon {
	display:block;
	fill: currentColor;
	background-color: transparent;
	/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this.
	For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */
	vertical-align: middle;
	overflow: hidden;
}
.icon_0  { width:  0px; height:  0px; }
.icon_12 { width: 12px; height: 12px; }
.icon_16 { width: 16px; height: 16px; }
.icon_18 { width: 18px; height: 18px; }
.icon_24 { width: 24px; height: 24px; }
.icon_32 { width: 32px; height: 32px; }
.icon_36 { width: 36px; height: 36px; }
.icon_40 { width: 40px; height: 40px; }



#vp_flg {display: none;}
#vp_chk {display: none; content: '1';}
@media only screen and (min-width:  288px) {#vp_chk {content:  '288';}}
@media only screen and (min-width:  360px) {#vp_chk {content:  '360';}}
@media only screen and (min-width:  480px) {#vp_chk {content:  '480';}}
@media only screen and (min-width:  576px) {#vp_chk {content:  '576';}}
@media only screen and (min-width:  640px) {#vp_chk {content:  '640';}} 
@media only screen and (min-width:  768px) {#vp_chk {content:  '768';}} 
@media only screen and (min-width:  880px) {#vp_chk {content:  '880';}} 
@media only screen and (min-width:  992px) {#vp_chk {content:  '992';}} 
@media only screen and (min-width: 1200px) {#vp_chk {content: '1200';}}
@media only screen and (min-width: 1320px) {#vp_chk {content: '1320';}}
@media only screen and (min-width: 1366px) {#vp_chk {content: '1366';}}
@media only screen and (min-width: 1440px) {#vp_chk {content: '1440';}}
@media only screen and (min-width: 1680px) {#vp_chk {content: '1680';}}
/* BASIC BREAKPOINTS: 576, 768, 992, 1200, 1400 */