* {
	box-sizing: border-box;
	margin: 0px; /** must always be 0 for width value! */
}

body {
	margin: 0;
	font-family_: "Georgia", Times, serif; /*Arial;*/
	font-size: 50px; /*1vw 17px;*/
  /* font-size_:100%; */
  /* text-align:center; */
  background:#ddd;
}

.my_zoomall
{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
}


.c_all_hidden
{
	border: 5px solid red;
	overflow: hidden;
	
	visibility: hidden;
	height: 0px;
}

pn_simdata {
	/* border: 5px solid black; */
	
	
	float: left;
	overflow: auto;
	width: inherit;
	max-height: 60px;
	display:none; /* </strong> removes the element from the document */
	align: center;
	
	/*
	 max-width: 100px;
	 max-height: 60px;
	 display: block;
	 */
}


.c_html
{
	height:100%;
	min-height:100%;
}


.knbody__
{
	height_:100%;
	/* min-height:100%; */
	
}

.c_body
{
	height:100%;
	font-size_: 20px;
	border: 0px solid red;
	margin: 0;
	padding: 0px;
	/* box-sizing:border-box|content-box; */
	box-sizing:border-box;
	
	background-image_: url("/accmgr/images/img1.png");
	background-position_: center;
	background-repeat_: no-repeat;
	background-size_: cover;
	
	/* font-family: family-name|generic-family|initial|inherit; */
	font-family: "Georgia", Times, serif; /*monospace; fantasy*/
	font-kerning: none;
	/* font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; */
	
	
	color_: white; /*rgba(0,0,0,0.5);*/
	background-color_: black; /*rgba(255,255,255,1);*/
	
	opacity_: 0.0;
	
	font-size_: 4vw; /* small; / *large;*/
	font-style: normal;
	font-variant: normal;
	font-variant-caps: normal;
	font-weight: normal;
}

.c_body_img
{
	background-image: url("/accmgr/images/img1.png");
	background-position: center;
	background-repeat: repeat-y; /* no-repeat */
	background-size: cover;
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
/*
 //@media screen and (min-width: 601px) {
	//.c_body {
		font-size: 20px;
	}
}
*/

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
	.c_body {
		font-size: 15px;
	}
}

.c_body_div
{
	/*auto|scroll*/
	overflow: scroll;
	
	border: 0px solid black;
	/*margin: 0;*/
	padding: 0px;
	/* box-sizing:border-box|content-box; */
	box-sizing:border-box;
	
	height: 100%;
	min-height:100%
	
	opacity: 0.9;
}

.kndiv
{
	/*auto|scroll*/
	overflow: scroll;
	border: 0px solid green;
	
	height: 25%;
	min-height:25%
	
	width: 50%;
	min-width: 50%;
	
	background-color: lightgray; /*rgba(255,255,255,1);*/
	
	opacity: 0.9;
	box-shadow_: 20px 20px 20px red;
}

.c_kncontainer
{
	display_: table;
	width_: 100%;
	padding_: 0px;
	/*margin: 0px;*/
	/*border:1px solid green;*/
	/*inset: 0;*/
	
	opacity_: 0.9;
	
	
}

/**
 all element that is preceded by a c_kncontainer class element
 */
.c_kncontainer ~ *
{
	clear: both;
}

.c_kncontainer_l
{
	float: left;
	height_: 100px;
	overflow: auto;
	border_:5px solid red;
	
	display_: table-cell;
	padding_: 0px;
	margin_: 0px;
	
	/*border:1px solid red;*/
	
	/*inset: 0;*/
}

.c_kncontainer_m
{
	float_: left;
	height_: 100px;
	overflow: auto;
	border_:5px solid red;
}


.c_kncontainer_r
{
	float: right;
	height_: 100px;
	overflow: auto;
	border_:5px solid red;
}

.knwidth-100p
{
	width: 100%;
}

.mytitle
{
	color: white;
	text-align: center;
	white-space: nowrap;
	font-size_: 20px;
}

.kndiv-small_notused
{
	/* this is size_small */
	min-width: 260px;
	max-width: 260px;
	box-sizing:border-box;
	
	/*width: auto;*/
}

.kndiv-smallest_notused
{
	/* this is size_small */
	min-width: 100px;
	max-width: 100px;
	box-sizing:border-box;
	
	/*width: auto;*/
}

.kndiv-all
{
	/* this is sizeall */
	width: auto;
	margin: 0px;
	/*border: 10px solid gray;*/
	
	/* this is sizeall */
	/*
	 width: auto;
	 margin: 0px;
	 border: 5px solid black;
	 */
	
	/*background-color: #333;*/
	overflow: auto;
	white-space: nowrap;
	
	
	
	
	/* this is size_small */
	/*
	 min-width: 300px;
	 max-width: 300px;
	 */
	
	/*width: auto;*/
}


.knborder-blue
{
	border: 0px solid black;
	/*margin: 0;*/
	padding: 0px;
	/* box-sizing:border-box|content-box; */
	box-sizing:border-box;
}

.c_header
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/*padding: 5px;*/
	background-color: #cae8ca;
	/*
	 border: 2px solid #4CAF50;
	 */
	
	/* position: absolute; relative, static, absolute, sticky, inherit, fixed */
	/*top: 0;*/
	/*width: 100%;*/
	/*margin: 0px;*/
	
	z-index: 20;
	
}

.c_knbg
{
	background-position-y: top;
	background-image: url("/css/vertical_header_blue_1x43x32.png");
	background-repeat: repeat-x; /*no-repeat;*/
	background-size: auto 100%;
	color:black;
	font-size_: 20px;
}

.c_menu_container
{
	border-radius: 5px;
	border:1px solid rgb(255, 179, 179);
	background-color:gray;
	margin-bottom: 6px;
}

/**
 <!-- KNA -->
 */
.c_menu
{
	/* box-sizing:border-box|content-box; */
	box-sizing_: content-box;
	border: 0px solid red;
	float: right;
	padding: 0px;
	
	position: absolute;
	right: 0px;
	top: 0px;
	
	z-index: 200;
	background-color: initial; /* yellow; */
	opacity: 1;
	
	color: inherit;
	overflow: hidden;
	
	display_:none;
}

.c_menu_none
{
	display:none;
}

.c_menu_off
{
	width_:0px;
	display_:none;
	
	animation: a_menu_off 0.3s; /*  infinite;*/
	width: 0%;
	
	display_:initial;
}

@keyframes a_menu_off
{
	from {flex-basis_: 100%; width: 100px; display_:initial;}
	to {flex-basis_: 0px; width: 0%;display_:none;}
}

.c_menu_on
{
	display_:initial;
	overflow_: initial;
	
	animation: a_menu_on 0.3s; /*  infinite;*/
	flex-basis_:200px;
	width_: 200px;
	
	flex-basis_:100%;
	width: 100px;
	
	display_:initial;
}

@keyframes a_menu_on
{
	from {flex-basis_: 0%; width: 0%;display_:initial;}
	to {flex-basis_: 100%; width: 100px;display_:initial;}
}




.c_menu_off_
{
	animation: a_menu_off 0.7s; /*  infinite;*/
	
	flex-basis: 0%;
	width: 0%;
}




.c_menu_a
{
	background-color:steelblue; /*e7e7e7;*/ /*Gray*/ /*#4CAF50;*/ /* Green */
	border_: 1px solid;
	color: white;
	padding: 0px 10px 0px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/*margin: 4px 2px;*/
	/*margin: 0px 3px 0px 3px;*/
	cursor: pointer;
	
	font-size: inherit;
	
	border-radius_: 20px;
	
	vertical-align:middle;
	
	width:100%;
}

.c_menu_a:hover
{
	background-color: #4CAF50; /* Green */
	color: white;
	/* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
	
	/*padding: 0 5px 0 5px;*/ /**top,right, bottom, left*/
	/*margin: 5px;*/
	
	/*margin: 20px;*/
	/*padding:inherit;*/
}

.c_menu_button
{
	background-color:steelblue; /*e7e7e7;*/ /*Gray*/ /*#4CAF50;*/ /* Green */
	border: 1px solid;
	color: white;
	padding_: 0px 10px 0px 10px;
	text-align_: center;
	text-decoration: none;
	display: inline-block;
	/*margin: 4px 2px;*/
	/*margin: 0px 3px 0px 3px;*/
	cursor: pointer;
	
	font-size_: 20px;
	
	border-radius_: 20px;
	
	vertical-align:middle;
	
	width:100%;
}



.report_total
{
	background-color: rgb(255, 191, 0); /* rgb(174, 221, 255);*/
	height_: 100%;
}

.report_total_h
{
	height: 50px;
}

.report_tot_cont_h
{
	height: 50px;
}

.report_tot_cont
{
	background-color: rgb(255, 191, 0);
	
	border: 0px solid red;
	color_:red;
	width_:100%;
	height_: 50px;
	position: relative;
	
}

.report_tot_contsub
{
	border: 0px solid black;
	color_:red;
	width_:100%;
	height_: 200px;
	margin_: auto;
	text-align: center;
	vertical-align:text-center;
	position: absolute;
	bottom: 50%;
	left_:50%;
	right_:50%;
	width:100%;
}

filter_mainacc_span
{
	/*
	 display:inline-block;
	 width:100%; / *200px;* /
	 
	 / * 1 of 2 below * /
	 overflow: hidden; / *hidden:scroll;* /
	 text-overflow: ellipsis;
	 white-space: nowrap;
	 
	 min-width_: 100px;
	 */
	
	display: inline-block;
	overflow-x: scroll !important;
	width: 100%;
	white-space: nowrap; /* normal,nowrap */
	height_: 1em;
	
	text-overflow: initial;
	
}

/* div.treediv> */
label>input[type=checkbox]:checked + span.filter_mainacc_span
{
	background-color:darkgoldenrod;
	color:white;
}

/*
 label>input[type=radio]:checked + span.filter_mainacc_span
 {
 background-color:darkblue;
 color:white;
 }
 */

.c_mainacclistdiv
{
	width_: 100%;
	
	padding: 4px;
	border: 5 solid red;
	
	min-height_:40px; max-height:100px;
	
	
}

.c_mainacclist
{
	display: inline-block;
	overflow-x: scroll !important;
	width_: 100%;
	white-space: nowrap; /* normal,nowrap */
	height_: 100%;
	
	text-overflow: initial;
	
	background-color:darkgray; /* #4D4DFF; / *steelblue;*/ /*e7e7e7;*/ /*Gray*/
	color:white; /* black; */
	
	opacity: 1;
	transition: 0.3s;
	
	padding_: 4px 0px;
}

.c_mainacclist:hover
{
	opacity: 0.5;
	background-color:yellow;
	color:black;
}

/** mainacclist after input checked of label */
label>input[type=checkbox]:checked + .c_mainacclist
{
	background-color:yellow;
	color:black;
}









/* Customize the label (the container) */
.c_account_label {
	display: block;
	position: relative;
	cursor: pointer;
}

.c_account_label:hover {
	opacity: 0.5;
}

/* Hide the browser's default checkbox */
.c_account_span {
	background-color: red;
}





/*
 //.mybtnacc:hover {opacity: 1}
 
 //.mybtnacc {
 display: block;
 width: 100%;
 border: none;
 
 background-color:#4D4DFF;/ *steelblue;* / / *e7e7e7;* / / *Gray* /
 border: none;
 color: white;
 / *padding: 16px 32px;* /
 padding: 6px;
 margin: 0px;
 / *width: "100%";* /
 text-align: center;
 font-size_: 16px;
 / *margin: 4px 2px;* /
 opacity: 0.6;
 transition: 0.3s;
 
 white-space: nowrap;
 */


.report_data
{
	/*e7e7e7;*/ /*Gray*/ /*#4CAF50;*/ /* Green */
	
	/*
	 background-color:steelblue;
	 border: 1px solid;
	 color: white;
	 padding: 0px 10px 0px 10px;
	 text-align: center;
	 text-decoration: none;
	 display: inline-block;
	 */
	/*margin: 4px 2px;*/
	/*margin: 0px 3px 0px 3px;*/
	cursor: pointer;
	
	/*
	 font-size_: 20px;
	 
	 border-radius: 5px;
	 
	 vertical-align:middle;
	 */
}


.report_data:hover
{
	background-color: lightgreen; /* #4CAF50; / * Green */
	color: white;
	opacity:0.8;
	/* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
	
	/*padding: 0 5px 0 5px;*/ /**top,right, bottom, left*/
	/*margin: 5px;*/
	
	/*margin: 20px;*/
	/*padding:inherit;*/
}

.report_data:active
{
	background-color: darkgreen; /* #4CAF50;*/
}

.report_datacell
{
	cursor: pointer;
}

.report_datacell:hover
{
	background-color:lightgreen;
}

.report_datacell:empty
{
	background-color:initial;
}

/**
 div + p:
 Selects the first p element that is placed immediately after <div> elements
 KKKK12
 */
label>input[type=radio]:checked + .report_datacell
{
	background-color:lightblue;
}

.c_note {
	color:blue;
}

.c_data_desc {
	width:100%;
	height:4em;
	max-height:4em;
	max-width:100%;
	background-color:inherit;
	border:3px solid #ccc;
	text-align_: left;
	white-space_: pre-wrap;
	word-break_: break-all;
	word-spacing_: normal;
	word-wrap_: break-word;
	font: inherit;"
}



.c_maxmin_box
{
	background:yellow;
	position:fixed; /* absolute; */
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	
	height:100%;
	
	margin: 0px;
	padding: 0px;
	
	box-sizing_:content-box;
	box-sizing_:border-box;
	border_: 3px solid magenta;
	
	/*
	 box-sizing:content-box;
	 box-sizing:border-box;
	 */
}

/* div element with class = c_maxmin */
/*
 button.c_maxmin
 {
 font-size_:64px;
 border_:2px solid green;
 padding: 10px 10px;
 margin:0px;
 width_:inherit;
 display: inline-block;
 position:relative;
 }
 */

/* div element with class = c_maxmin */
/*
 button.c_maxmin > div
 {
 font-size_:30px;
 border_:0px solid red;
 padding_: 0px 10px;
 margin:0px;
 width_:inherit;
 display: inline-block;
 height_:10px;
 position:absolute;
 top_:0px;
 left_:0px;
 bottom_:0px;
 right_:0px;
 translate: -8px -20px;
 }
 
 div.c_maxmin__:hover
 {
 background: lightgreen;
 }
 */

.c_hide
{
	display: none;
}






.mybody
{
	border: 1px solid black;
	/*width: auto; / *100%;*/
	/*margin: 9px;*/
	/*width: auto;*/
}

.mydatadiv_
{
	border-top_: 10px solid blue;
	border-bottom_: 5px solid blue;
}

.mydatadiv_:last-child
{
	border-top_: 10px solid blue;
	border-bottom: 5px solid blue;
}

.myborder_red
{
	border: 0px solid red;
}

.myborder_white1
{
	border: 1px solid white;
}

.mydatadesc_scrollx
{
	display: inline-block;
	overflow-x: scroll !important;
	width: 100%;
	white-space: nowrap; /* normal,nowrap */
	height_: 1em;
	
	text-overflow: initial;
	
	
	/*
	 display:inline-block;
	 
	 height: 50px;
	 white-space: nowrap; / * normal,nowrap * /
	 overflow-x: scroll; / * auto, scroll * /
	 color_: inherit;
	 color: red;
	 / *border: 1px solid white;* /
	 
	 resize: none; / * for textarea * /
	 font: inherit;
	 
	 cursor_: default !important;
	 pointer-events_: all !important;
	 
	 text-overflow: initial;
	 */
}


.mydatadesc
{
	height: 50px;
	white-space: nowrap; /* normal,nowrap */
	overflow-x: scroll; /* auto, scroll */
	color: inherit;
	/*border: 1px solid white;*/
	
	resize: none; /* for textarea */
	font: inherit;
	
	cursor_: default !important;
	pointer-events_: all !important;
}

.mydatadesctextarea
{
	box-sizing:border-box;
	
	max-height: 5em;
	max-width: 100%;
	overflow: scroll; /* auto, scroll */
	color: inherit;
	border: 1px solid black;
	font: inherit;
	
	white-space_: nowrap; /* normal,nowrap */
	overflow-x_: scroll; /* auto, scroll */
	
	resize_: none; /* for textarea */
	
	cursor_: default !important;
	pointer-events_: all !important;
}

.datagroup
{
	border_: 5px solid magenta;
	width: 100%;
	box-sizing:border-box;
}

.mydatascrollx
{
	height_: 50px;
	white-space: nowrap; /* normal,nowrap */
	overflow-x: scroll; /* auto, scroll */
	color: inherit;
	/*border: 1px solid white;*/
	
	resize: none; /* for textarea */
	font: inherit;
	
	cursor_: default !important;
	pointer-events_: all !important;
}

/**
 <!-- KNA3 -->
 <!-- KNA4 -->
 */
.myboxarea
{
	height_: initial;
	border-radius: 4px;
	resize: none;
	white-space: nowrap;
	overflow_:    scroll;
	overflow-y:  hidden;
	overflow-x:  scroll;
	overflow:    -moz-scrollbars-horizontal;
	
	color:white;
	font: inherit;
	
	
	width_: 200px;
	
	padding_: 10px 10px;
	box-sizing_: border-box;
	border_: 2px solid red;
	background-color_: yellow;
	
	position_: relative; /* absolute; */
	right_: 50px;
	left_: 50px
	
	white-space_: nowrap; /* normal,nowrap */
	outline_: 30px;
}

.myboxarea_2
{
	color:white;
	font: inherit;
}

.mydiv
{
	border-top_: 5px solid magenta;
	border-bottom_: 5px solid magenta;
}

.mysize_border
{
	border: 1px solid black; /*green; #ddd; */
	border-collapse: collapse;
	
	/*
	 margin: 0px;
	 padding: 0px;
	 */
}

.mysize_bg1
{
	/*background: coral;*/
	/*background-position: center center;*/
	/*
	 background-image: url('/css/vertical_header_blue_1x43x32.png');
	 background-position-x: center;
	 background-position-y: center;
	 background-size: auto;
	 background-repeat: no-repeat;
	 */
	
	
	/*height:43px;*/
	/*border: 10px dashed black;*/
	/*padding: 50px;*/
	background-position-y: top;
	background-image: url("/css/vertical_header_blue_1x43x32.png");
	background-repeat: repeat-x; /*no-repeat;*/
	background-size: auto 100%;
}

.mysize_bg2
{
	/*background: coral;*/
	/*background-position: center center;*/
	/*
	 background-image: url('/css/vertical_header_blue_1x43x32.png');
	 background-position-x: center;
	 background-position-y: center;
	 background-size: auto;
	 background-repeat: no-repeat;
	 */
	
	
	/*height:43px;*/
	/*border: 10px dashed black;*/
	/*padding: 50px;*/
	background-position-y: top;
	background-image: url("/css/iphone_bg_320x480x8.png");
	background-repeat: repeat-x; /*no-repeat;*/
	background-size: auto 100%;
}

.mysize_col-container
{
	display: table;
	width: 100%;
	padding: 0px;
	margin: 0px;
	/*border:1px solid green;*/
	/*inset: 0;*/
}

.mysize_col
{
	display: table-cell;
	padding: 0px;
	margin: 0px;
	/*border:1px solid red;*/
	
	/*inset: 0;*/
}

.mysize_col-w100p
{
	width: 100%;
}

.mysize_sticky
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/*padding: 5px;*/
	background-color: #cae8ca;
	/*
	 border: 2px solid #4CAF50;
	 */
	
	/* position: absolute; relative, static, absolute, sticky, inherit, fixed */
	/*top: 0;*/
	/*width: 100%;*/
	/*margin: 0px;*/
	
	z-index: 10;
	
}

.mysize_allscroll
{
	/* this is sizeall */
	/*
	 width: auto;
	 margin: 0px;
	 border: 5px solid black;
	 */
	
	/*background-color: #333;*/
	overflow: auto;
	white-space: nowrap;
	
}

.mysize_allall
{
	/* this is sizeall */
	width: auto;
	margin: 0px;
	/*border: 10px solid gray;*/
}

.mysize_all
{
	// this is size_small
	min-width: 300px;
	max-width: 300px;
	/*border: 1px solid blue;*/
	
	/*
	 this is sizeall
	 width: auto;
	 margin: 0px;
	 border: 5px solid black;
	 */
	
	/*
	 margin: 0px;
	 text-align: center;
	 */
	/*
	 min-width: 100%;
	 max-width: 100%;
	 */
	/*margin: 0px;*/
	/*width: auto; / *100%;*/
	/*margin: 10px;*/
	/*margin: 0px;*/
}

.mysize_small
{
	/* this is size_small */
	min-width: 300px;
	max-width: 300px;
	border: 10px solid yellow;
	
	/*
	 margin: 0px;
	 
	 */
	/*margin: 0px;*/
	/*width: auto; / *100%;*/
	/*margin: 10px;*/
	/*margin: 0px;*/
}


/*
 h=Math.max(400,h);
 w=Math.max(1200,w);
 */
.mysize_longer
{
	min-width: 1800px;
	max-width: 1800px;
	border: 10px solid gray;
	
	/*
	 margin: 0px;
	 text-align: center;
	 */
	/*
	 min-width: 100%;
	 max-width: 100%;
	 */
	/*margin: 0px;*/
	/*width: auto; / *100%;*/
	/*margin: 10px;*/
	/*margin: 0px;*/
}

/*
 
 word-wrap is the legacy name for the overflow-wrap
 
 *)overflow-wrap:
 normal:
 Long words will not break, even if they overflow the container. This is default
 anywhere:
 Long words will break if they overflow the container
 break-word:
 Long words will break if they overflow the container
 
 word-break: normal;
 word-break: break-all;
 word-break: keep-all;
 */
.mytextwrap
{
	overflow-wrap: anywhere; /*break-word:*/
	/*word-break: break-all;*/
	hyphens: manual;
	/*overflow: hidden;*/
}

/* SIZE_ALL-PNG */
.mybg
{
	background-image: url("/css/iphone_bg_320x480x8.png_");
	background-color: yellow; /*#cccccc;*/
	height: 480px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.myboxscroll
{
	position: relative; /*relative|absolute*/
	overflow: scroll; /*scroll:hidden:visible*/
	visibility:visible; /*hidden:visible;*/
	/*z-index: 7;*/
	
	top: 0px; /*50px above + 4x20px*/
	left: 0px;
	
	/*width:auto;*/
	/*height:inherit;*/ /*170-60*/
	
	margin: 0px;
	padding: 0px;
	/*border: 0px solid;*/ /*darkgreen;*/
	/*background-color: lightgreen;*/
}

#mytableid {
	border: 10px;
	white-space: nowrap;
	color:red;
	/* 1 of 2 below */
	overflow: hidden; /*hidden:scroll;*/
	/*text-overflow: ellipsis;*/
	background-color: lightyellow;
	text-decoration: none;
}

/*
 position_: static; / * position: static|absolute|fixed|relative|sticky|initial|inherit;* /
 padding_: 10px 10px 10px 10px;
 height_: 100px;
 border-radius_: 5px;
 */

.c_div_scroll
{
	width:100%;
	overflow: scroll;
	margin: 0px;
	border-bottom: 1px solid black;
}

.c_div_scroll_h
{
	width: 100%;
	overflow: scroll;
	margin: 0px;
	border-bottom: 1px solid black;
	white-space: nowrap;
}





/**
 report container
 */
.c_report_container_
{
	margin: 0px;
	position: relative;
	padding: 0px;
}

.c_report_center_
{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.c_report_window
{
	width:100%;
	height_: 300px;
	border: 20px solid red;
	overflow: hidden;
}

.c_maxmin_report
{
	width:100%;
	height: 100%; /* 250px; */
	border: 0px solid green;
	overflow: hidden; /*auto;*/
	margin: 0px;
	padding: 0px;
}


html, body { margin:0px; height:100%; }



.header {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	background-color: #f1f1f1;
}

.progress-container {
	width: 100%;
	height: 8px;
	background: #ccc;
}

.header h2 {
	text-align: center;
}

.progress-bar {
	height: 8px;
	background: #4caf50;
	width: 75%;
}


div.scrollmenu
{
	background-color: #333;
	overflow: auto;
	white-space: nowrap;
	margin_: 0px;
}

div.verticalbar
{
	display: inline-block;
	padding: 5px 0px;
	
	color: red;
	white-space: nowrap;
	background-color: white;
	width: 1px;
	margin: 0px;
	
	border-style: solid;
	border-color: green;
	border-width: 0px thin;
	
}

div.scrollmenu a
{
	display: inline-block;
	color: white;
	text-align: center;
	padding: 0px 14px;
	text-decoration: none;
	
	/*
	 Set the width of the top and bottom borders to 10px,
	 and the width of the left and right borders to 1px:
	 */
	border-style_: solid;
	border-color_: red;
	border-width_: 0px thin;
	border_: 10px solid red;
}

/*
 div.scrollmenu a:hover
 {
 background-color: #777;
 }
 */

div.fixed___
{
	position_: fixed;
	position_: absolute;
	bottom: 0;
	margin_: auto; /** box center*/
	left: 0%;
	right: 0%;
	width_: 300px;
	border_: 3px solid #73AD21;
	
	z-index: 10;
}


div.fixed
{
	position: fixed;
	position_: absolute;
	bottom: 0;
	margin_: auto; /** box center*/
	left_: 0%;
	right_: 0%;
	width_: 300px;
	border_: 3px solid #73AD21;
	
	z-index: 10;
}

div.c_sticky {
  position: -webkit-sticky;
  position: sticky;
  
  top: 0;
  
  padding_: 5px;
  background-color_: #cae8ca;
  border_: 2px solid #4CAF50;
}


div.c_sticky_parent {
  border: 5px solid black;
  width: 200px;
  height: 100px;
  
  
  overflow: scroll;
  
  white-space: nowrap;
}

div.c_bottom
{
	border_:10px solid green;
	color_:white;
	position:absolute;
	bottom:0px;
	
	left_:50%;
	right_:20%;
	width:100%;
	margin_:10%;
	
	z-index: 20; /* like header */
}


/**
 style="position:absolute;left:10px;right:10px;z-index: 9;display:none;"
 
 min-width: 260px;
 max-width: 260px;
 box-sizing:border-box;
 
 */
.c_hide_child
{
	position:absolute;
	left:10px;
	right:10px;
	display:none;
	margin: 0px;
	
	min-width: 240px;
	max-width: 240px;
	box-sizing:border-box;
	
	border:5px solid magenta;
	
	z-index: 19; /* before header stiky */
}

.c_hide_parent
{
	position:relative;
	
	border:0px solid cyan;
}

.c_b1
{
	border:5px solid black;
}

.c_b2
{
	border:0px solid blue;
}

.c_b3
{
	border:0px solid cyan;
}

.c_b4
{
	border:0px solid red;
}

.c_b5
{
	border:0px solid green;
}


/**
 To show child inside parent container
 Adding a clearfix class with overflow: auto; to the containing element:
 */
.c_clearfix
{
	overflow: auto;
}

.c_bottom_kn
{
	height:60px;
	border:1px solid red;
	width_:260px;
	color:white;
	opacity_: 0.9;
}

.c_bg_dark
{
	background-color:steelblue; /*e7e7e7;*/ /*Gray*/ /*#4CAF50;*/
}

.c_sep_row {
	height: 0px;
	background-color:lightyellow; /*e7e7e7;*/ /*Gray*/ /*#4CAF50;*/ /* Green */
	border: 0px solid;
	color: white;
	padding: 0px 10px 0px 10px;
	text-align: center;
	text-decoration: none;
	display_: inline-block;
	/*margin: 4px 2px;*/
	/*margin: 0px 3px 0px 3px;*/
	cursor: pointer;
	
	font-size_: 20px;
	
	border-radius_: 20px;
	
	vertical-align:middle;
	width: 100%;
}


.c_show {
	background-color:steelblue; /*e7e7e7;*/ /*Gray*/ /*#4CAF50;*/ /* Green */
	border: 0px solid;
	color: white;
	padding: 0px 10px 0px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/*margin: 4px 2px;*/
	/*margin: 0px 3px 0px 3px;*/
	cursor: pointer;
	
	font-size_: 20px;
	
	border-radius_: 20px;
	
	vertical-align:middle;
}


.c_show:hover {
	background-color: #4CAF50; /* Green */
	color: white;
	/* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
	
	/*padding: 0 5px 0 5px;*/ /**top,right, bottom, left*/
	/*margin: 5px;*/
	
	/*margin: 20px;*/
	/*padding:inherit;*/
}

.c_show:disabled {
	background-color: gray; /* Green */
	/*color: gray;*/
	/* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
	
	/*padding: 0 5px 0 5px;*/ /**top,right, bottom, left*/
	/*margin: 5px;*/
	
	/*margin: 20px;*/
	/*padding:inherit;*/
}

.c_show[a_status="enable"]
{
	background-color: #4CAF50; /* Green */
	padding: 10px 30px 10px 30px; /**top,right, bottom, left*/
}

.c_block
{
	display:block;
}



.c_group
{
	border: 0px solid blue;
}

.c_margin
{
	margin_: 0px 6px;
}

.c_details
{
	margin_: 3px 3px;
	border_: 5px solid green;
	border-radius: 5px;
	border:1px solid rgb(255, 179, 179);
}


/**
 remark here:
 
 parent color and background is set to black
 child border is also black. if red we see space between childs
 border-width used on child width smaller border! (less div space)
 this is a workaround!
 
 translate, float and margin test nok
 
 */
.div_parent
{
	background-color: green; /* Green */
	border: 10px solid red;
	color: white;
	cursor: pointer;
	white-space: nowrap;
	overflow-x: scroll; /*scroll:hidden:visible*/
	overflow-y: hidden; /*scroll:hidden:visible*/
	height: 100%;
	
	font-size_: 16px;
	text-align_: center;
	text-decoration_: none;
	width: 100%;
	/** padding and border are included in the width and height */
	box-sizing: border-box;
	
	
	
}

.div_child
{
	background-color: #4CAF50; /* Green */
	border: solid red;
	/* top right bottom left */
	border-width: 5px 5px 5px 0px;
	/* 20px top and bottom, 5px on the sides */
	color: white;
	padding: 5px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size_: 16px;
	cursor: pointer;
	
	white-space: nowrap;
	clear_: both;
	
	margin: 0px;
	padding_: 0px;
}

.div_parent .div_child:hover {
	background-color: #3e8e41;
}

.div_parent .div_child:last-child {
	border-right: none; /* Prevent double borders */
}

.div_parent .div_child:first-child {
	border-left: none; /* Prevent double borders */
}


.c_clr_button
{
	color: red;
	border_: 1 solid black;
	background_: white;
}

.c_color_black {
	color:black;
}

/* KKKK11 */
.c_fsz02 {font-size: 0.2rem;}
.c_fsz04 {font-size: 0.4rem;}
.c_fsz06 {font-size: 0.6rem;}
.c_fsz08 {font-size: 0.8rem;}
.c_fsz10 {font-size: 1rem;}
.c_fsz12 {font-size: 1.2rem;}
.c_fsz14 {font-size: 1.4rem;}
.c_fsz16 {font-size: 1.6rem;}
.c_fsz18 {font-size: 1.8rem;}
.c_fsz20 {font-size: 2rem;}

.c_fbold {font-weight: bold;}

/* vertical parent div */
.c_div_parent_v {
  display: flex;
}

.c_div_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c_div_nowrap {
  white-space: nowrap;
}

html {
  font-size: 16px; /* Base font size */
}

body {
  font-family: 'Arial', sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem); /* Fluid text for body */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Adjust base font size on smaller devices */
  }
}