*,
::after,
::before {
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
html {
  -ms-overflow-style:scrollbar;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  scroll-behavior:smooth;
  height:100vh;
  overflow:auto;
}
body {
  overflow-x:hidden;
  background-color:#fff;
  min-height:100vh;
  text-rendering:optimizeSpeed
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin:0;
  padding:0;
  border:0;
  /*! vertical-align:baseline */
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display:block
}
blockquote,
q {
  quotes:none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content:''
}
table {
  border-collapse:collapse;
  border-spacing:0
}
base,
basefont,
datalist,
head,
meta,
noembed,
param,
script,
style,
template,
title {
  display:none
}
img {
  vertical-align:middle;
  border-style:none;
}
div {
  position:relative
}
.grid {
  display:-webkit-box;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  flex-direction:column;
  position:relative
}
.row {
  display:-webkit-box;
  display:flex;
  flex-wrap:wrap;
}
.col {
  -webkit-box-flex:1;
  flex:1 0 0;
  max-width:100%;
  padding:6px
}
[class*=col-] {
  position:relative;
  /*! display:flex; */
  padding:2px;
  width:100%;
  min-height:1px;
}
.col-auto {
  -webkit-box-flex:0;
  flex:0 0 auto;
  width:auto;
  max-width:none
}
.col-0{
  -webkit-box-flex:0;
  flex:0 0 0%;
  max-width:0%
}
.col-1{
  -webkit-box-flex:0;
  flex:0 0 8.333335%;
  max-width:8.333335%
}
.col-2{
  -webkit-box-flex:0;
  flex:0 0 16.66667%;
  max-width:16.66667%
}
.col-3{
  -webkit-box-flex:0;
  flex:0 0 25.000005%;
  max-width:25.000005%
}
.col-4{
  -webkit-box-flex:0;
  flex:0 0 33.33334%;
  max-width:33.33334%
}
.col-5{
  -webkit-box-flex:0;
  flex:0 0 41.666675%;
  max-width:41.666675%
}
.col-6{
  -webkit-box-flex:0;
  flex:0 0 50.00001%;
  max-width:50.00001%
}
.col-7{
  -webkit-box-flex:0;
  flex:0 0 58.333345%;
  max-width:58.333345%
}
.col-8{
  -webkit-box-flex:0;
  flex:0 0 66.66668%;
  max-width:66.66668%;
}
.col-9{
  -webkit-box-flex:0;
  flex:0 0 75.000015%;
  max-width:75.000015%
}
.col-10{
  -webkit-box-flex:0;
  flex:0 0 83.33335%;
  max-width:83.33335%
}
.col-11{
  -webkit-box-flex:0;
  flex:0 0 91.666685%;
  max-width:91.666685%
}
.col-12{
  -webkit-box-flex:0;
  flex:0 0 100.00002%;
  max-width:100.00002%
}
.text-center{text-align: center;}
.text-right{text-align: right;}

.border3-db { 
  border:1px solid rgba(0,0,0,0.2);
}
.shadow-glow{	
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);  
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
}
.btn{
  color:var(--color);
  font-size:14px;
  cursor:pointer;
  text-decoration: none;
}
button, a{
  color:var(--color-dark);
  font-size:14px;
   cursor:pointer;
  text-decoration: none;
}
button:hover, a:hover{opacity:0.7;}
.text-button{
  border:none;
  background: none;
}
.info{
  width:40vw;
  margin:1vh auto;
	background: var(--color-info)!important;
	color: #fff;
	font-size:24px;
	border:1px solid  var(--color-light);
}
.info:before{
  font-family:metro-ui-icons-core-set!important;
  content:"\e98f"	;
	padding:10px;
	font-size:30px;
}	
.alert{
  width:100%;
  margin:1vh auto;
	background: var(--color-warning)!important;
	color: #fff;
	font-size: .9vw;
	border:1px solid  var(--color-light);
}
.alert:before{
  font-family:metro-ui-icons-core-set!important;
  content:"\ea07"	;
	padding:10px;
	font-size:30px;
}	
.error{

  margin:1vh auto;
	background: var(--color-alert)!important;
	color: #fff;
	font-size:24px;
	border:1px solid  var(--color-light);
}
.error:before{
  font-family:metro-ui-icons-core-set!important;
  content:"\e968"	;
	padding:10px;
	font-size:30px;
}	
.success{
  width:auto;
  margin:1vh auto;
	background: var(--color-success)!important;
	color: #fff;
  padding: 5px 60px 5px 0;
	font-size:18px;
	border:1px solid  var(--color-light);
}
.success:before{
  font-family:metro-ui-icons-core-set!important;
  content:"\ea10"	;
	padding:10px;
	font-size:20px;
}
.hr-dotted { border:dotted 2px var(--color);}
.float-r{
  float:right;
}
.abs-r{  
  position: absolute;
  right: -5px;
  top: -5px;
    background: #fff;

}
.abs-r-bg{  
  position: absolute; 
  display: flex;
  right: 30px;
  background: #fff;
  padding: 0 8px;

}
.row1 td, .row2 td{	
  background: var(--color-light);
  border-bottom:dotted 1px var(--color);
  border-left:dotted 1px var(--color);
  padding: 1px 3px;
  vertical-align: top;
}
.row2 td{	
  background: #fff;
}
.active td{   
    border-top:1px solid  var(--color-alert);
    border-bottom:1px solid  var(--color-alert);
}
.brd-ch{border:1px solid #000;}

.flymsg {
	position: absolute;
    right:0;
	top: 10%;
	transform: translateY(50%);
	z-index: 100000000000;
}
input[type=text]{font-size:20px;}

select{
  font-size:20px; 
  padding:0 5px; 
  background: #fff; 
  border:none;
}
.o5{opacity:.5;}
.o7{opacity:.7;}
.o1{opacity:1;}