:root{
	--color-schema: "black";	
  --main-bg-color: rgba(0, 0, 0, 1);
  --main-text-color: #f1f1f1;  
  --transparent-header-area: rgba(30, 30, 30, 0.95);
  --intransparent-header-area: rgba(30, 30, 30, 1.0);
  --transparent-body-area: rgba(50, 50, 50, 0.5);
  --tab-area: rgb(60, 60, 60);
  --button-area: rgba(50, 50, 50, 1);
  --button-hover-area: rgba(70, 70, 70, 1);
  --button-active-area: rgba(90, 90, 90, 1);
  --content-area: rgba(0, 0, 0, 0.5);
  --content-p: rgba(255, 255, 255, 0.4);
  --content-canvas: rgba(0, 0, 0, 0.0);
  --content-video: rgba(0, 0, 0, 0.0);
  --content-iframe: rgba(0, 0, 0, 0.0);
  --content-description-area: rgba(50, 50, 50, 0.5);
  --bg-video: visible;
}
:root-white{
	--color-schema: "white";
  --main-bg-color: rgba(255, 255, 255, 1);
  --main-text-color: #000000;
  --transparent-header-area: rgba(245, 245, 245, 0.8);
  --intransparent-header-area: rgba(245, 245, 245, 1.0);
  --transparent-body-area: rgba(245, 245, 245, 0.8);
  --tab-area: rgba(241, 241, 241);
  --button-area: rgba(240, 240, 240, 1);
  --button-hover-area: rgba(220, 220, 220, 1);
  --button-hover-area: rgba(200, 200, 200, 1);
  --content-area: rgba(245, 245, 245, 0);
  --content-p: rgba(255, 255, 255, 0.4);
  --content-canvas: rgba(0, 0, 0, 0.0);
  --content-video: rgba(0, 0, 0, 0.0);
  --content-iframe: rgba(0, 0, 0, 0.0);
  --content-description-area: rgba(245, 245, 245, 0.8);
  --bg-video: hidden;
}
a{
  color: var(--main-text-color);
}      
span {
  color: #000000;
  background-color: #FFD800DD;
}
body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
  background: var(--main-bg-color);
  color: var(--main-text-color);
}

#bgVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  z-index: -1;
  visibility: var(--bg-video);  
}

#bodyContainer {display: none;}

table {border-collapse:collapse;border-spacing:2;}
td{border-color:rgb(125,125,125);border-style:solid;border-width:1px;
  overflow:hidden;padding:10px;text-align:center;vertical-align:center;font-size:1.8vh;}
th{border-color:rgb(125,125,125);border-style:solid;border-width:1px;
  font-weight:bold;overflow:hidden;padding:10px;text-align:center;vertical-align:center;font-size:1.8vh;}
label {font-size:1.8vh;}
button {font-size:1.5vh;border: 1px solid; background: var(--button-area); color: var(--main-text-color);padding: 3px;} 
button:hover {background-color: var(--button-hover-area);}
input {font-size:1.5vh; border: 1px solid; background: var(--main-bg-color); color: var(--main-text-color)} 
select {font-size: 1.5vh; border: 1px solid ;background: var(--main-bg-color); color: var(--main-text-color);}
textarea {background: var(--main-bg-color); color: var(--main-text-color);}

.amTable {border-collapse:collapse;border-spacing:2;}
.amTable td{border-color:rgb(125,125,125);border-style:solid;border-width:0px;
  overflow:hidden;padding:5px;text-align:left;vertical-align:center;font-size:1.8vh;}
.amTable th{border-color:rgb(125,125,125);border-style:solid;border-width:0px;
  font-weight:bold;overflow:hidden;padding:5px;text-align:left;vertical-align:center;font-size:1.5vh;}


#iframeContainer {
	position: fixed;
  top: 10%;
  left: 10%;
  width:80%;
  height:70vh;
  background-color: var(--button-active-area);
  z-index: 5;
  border-style:solid;
  border-width:1px;
}
#iframePage {
  width:100%;
  height:100%;
}
#orderPage {
  width:100%;
  height:100%;
}
#orderExtensionPage {
  width:100%;
  height:100%;
}
.kc-item img {
	position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;           
  pointer-events: none;
  width:100%;
}
.kcWrapper { 
  position: fixed;
  height:35%;
  width: 100%;
  padding:0px;
  z-index: 1;
}
.kc-wrap {
  position: fixed;
  height:35%;
  width: 100%;
  background: var(--transparent-header-area);
  padding:0px;
  z-index: 1;
 }
 .kc-nav-button {
  margin-left: 4vw;
  width:4vw;
  height:4vw;
  background-color: rgba(100, 100, 100, 1);
  border-radius:0px;
}
.kc-nav-button.last {
  margin-bottom:0;
}
.kc-nav-button.active {
  background-color: #FFD800DD;
}
.kcWrapperSelectionA {
  position: fixed;
  bottom: 65%;
  left:0%;
  text-decoration: none;
  z-index: 2;
  font-size: 4vh;
} 

.simpleHeaderArea {
  position: fixed;
  background: var(--transparent-header-area);
  top: 0%;
  height:15%;
  width: 100%;
  padding: 0px;
  z-index: 2;
  padding-left: 10px;
}      
.simpleHeaderArea img {
  position: fixed;
  top: 0px;
  right: 0px;
  height:15%;
}
.simpleHeaderArea p {
  position: fixed;
  top: 0px;
  font-size: 4vh;
  font-weight: bold;
}

.simpleBodyArea {
  position: fixed;
  top: 16%;
  bottom: 0;
  background: var(--transparent-body-area);
  padding: 10px;
  font-size: 2vh;
  width: 100%;
}      

.fixedHeaderArea {
  position: fixed;
  background: var(--transparent-header-area);
  top: 0%;
  height:20%;
  width: 100%;
  padding: 0px;
  z-index: 2;
  padding-left: 10px;
}      
.fixedHeaderArea img {
  position: fixed;
  top: 0px;
  right: 0px;     
  max-width:20%;
  max-height:20%;
}
.fixedHeaderArea p {
  font-size: 4vh;
  font-weight: bold;
}
.fixedHeaderArea a{
  position: relative;
  top: 20%;
  left:0%;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  font-size: 4vh;
}
.fixedHeaderArea  span{
  text-decoration: none;
  display: inline-block;
}

.selectionArea {
  position: fixed;
  top: 1%;
  height:40%;
  width: 100%;
  background: var(--transparent-header-area);
  padding:0px;
  z-index: 1;
}      
.fixedBodyArea {
  position: fixed;
  bottom: 0;
  background: var(--transparent-body-area);
  padding: 10px;
  font-size: 2vh;
  width: 100%;
}      
.fixedBodyArea a{
}           
.fixedBodyArea p{
  width:95%;
}

.floatingBodyArea {
  position: absolute;
  top: 21%;
  background: var(--main-bg-color);
  width: 98%;
  padding: 1%;
  font-size: 2vh;
  z-index: 0;
}      
.floatingBodyArea a{
  text-decoration: none;
}