@viewport {
  width: device-width ;
  zoom: 1.0 ;
} 

@font-face {
    font-family: Quando;
    src: url(Quando-Regular.ttf);
}


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Quando, Arial, sans-serif, Helvetica;
}

body {
    background-color: #efefef;
    /*padding: 25px;*/
}

#zeHead {
    position:fixed;
    top : 0;	
	padding : 5px;

	max-width: 640px;
	margin : 0 auto;

	
	overflow-y:hidden;
    overflow-x:hidden;
	
	background-color : whitesmoke;
	/*opacity : 1;*/
	
}

#about {
  display: none;
  position: fixed;
  bottom: 0;  
  font-size : 0.8em;
  background-color: whitesmoke;
  padding : 15px;
  overflow-y : auto;
  /*width: 640px;*/
}

#about h2 {
	font-size : 1.3em;
	padding : 10px 0 10px 0;
}

#about ul {
	list-style-type: none;	
}

#logo {
	float: left; 
	height:56px; 
	width:56px;
}

.button1 {
	float : right;
	border : 0;
	font-size : 1.2em;
	font-weight : bold;
	margin : 15px 10px 0px 0px;
}

#container {
	position : fixed;
	top : 69px;
	height : 2000px;
	max-width:640px;
	
	overflow-y:scroll;
    overflow-x:hidden;
	/*width: 640px;*/
    margin : 0 auto;
    /*padding: 0 15px 15px 15px;*/
    background-color: #fff;
    box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;
    border-radius: 5px;
    /*overflow-x: auto;*/
}

.rounded {
    /*box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;*/
    border-radius: 5px;
	/*border : 1px #fff solid;*/
	display	: inline-block;
	padding : 2px;
	min-width : 50px;
	text-align : center;
	/*float:right;*/
}

.c0 {
	::background-color: #bbffbb;
	background-color:#AEF02B;
}

.c1 {
	background-color:	#ffc107;
}
	
.c2 {
	background-color: #ff9800;  
}
	
.c3 {  
	background-color: #f44336 !important;  
}    
  
.cG {
	background-color: gray;
	color :white;
}  
  
.cN {
	background-color: whitesmoke;
	color :black;
}


.form_control {
    border: 1px solid gray;
    background-color: white;
    outline: none;
    padding: 8px 12px;
    min-width: 15%;
    color: #222;
    margin: 15px 0 10px 10px;
}

.form_control::placeholder {
    color: inherit;
    /*opacity: 0.5;*/
}

.form_control:is(:hover, :focus) {
    box-shadow: inset 0 1px 6px #0002;
    border-radius: 5px;
}


.action_btn {
    display: inline-flex;
    align-items: center;
}

.action_btn>* {
    border: none;
    outline: none;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 8px 14px;
    position: relative;
    transition: 0.3s ease-in-out;
}

.action_btn>*+* {
    border-left: 1px solid #0003;
}

.action_btn>*:hover {
    filter: hue-rotate(-20deg) brightness(0.97);
    transform: scale(1.05);
    border-color: transparent;
    box-shadow: 0 2px 10px #0004;
    border-radius: 4px;
}

.action_btn>*:active {
    transform: scale(1);
    box-shadow: 0 2px 5px #0004;
}

._table {
    width: 100%;
	position: relative;
	border-collapse: collapse; 
}


._table thead {
	position: sticky;
	top : 0;
}

._table :is(th, td) {
    border-bottom: 1px solid #0002;
    padding: 2px 3px;
}

._table th {
    user-select: none;
	font-size : 0.7em;
	text-decoration : none;
	font-weight : normal;
	/*font-variant : small-caps;*/
	background-color : whitesmoke;
}

._table th:hover {
    background-color: #0001;
    cursor: pointer;
}

._table th::after {
    content: '\25b4';
    position: absolute;
    right: 10px;
    font-size: inherit;
    transform-origin: center;
    transform: rotate(180deg);
}

._table th.asc {
    ::background-color: #0001;
	background-color: #808080;
	color : #fff;
}

._table th.asc::after {
    transform: rotate(0deg);
}

._table td:nth-child(2) {
  /*display: none*/
  font-size : 0.5em;
}

._table td:nth-child(3), th:nth-child(3) {
  width : 120px;
  text-align : right;
}