@charset "utf-8";

/* width */
::-webkit-scrollbar {
  	width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
	border: 2px solid #2E2E2E;
	background: #171717;
	box-shadow: inset 0 0 5px black;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #535353;
	border-radius: 10px;
	box-shadow: inset 0 0 5px black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #C2C47D;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.separator{
	position: relative;
	width:100%;
	height:2px;
	border-bottom:1px solid #474747;
	margin-top:5px;
	margin-bottom: 5px;
}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 25px;
	background: #535353;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius: 10px;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: #4CAF50;
	cursor: pointer;
	border-radius: 10px;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: #4CAF50;
	cursor: pointer;
}

.slidernumber{
	padding-left:5px;
	background: transparent;
	color:#8E8F6D;
	font-family: ethnocentric, sans-serif;
	font-weight: 500;
	font-size: 22px;
	border:0px;
	width:90px;
}

.slidernumber:hover{
	color:#FFFE82;
}

#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.5);
    background-image: url("http://i.stack.imgur.com/MnyxU.gif");
    background-repeat: no-repeat;
    background-position: center;
}

html, body{
  padding: 0;
  margin: 0;
}

html{
  height: 100%;
}

body{
	min-height: 100%;
	
	background-color: #0E0E0E;
	background-image: url("UI/images/concrete.jpg");
	background-size: 100%;
	background-repeat: repeat-x;
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
	overflow: hidden;
}

.maindiv{
	position:absolute;
	width: 900px;
	height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	left:calc(50% - 450px);
	top:calc(50% - 200px);
}

.contentmaindiv{
	position:absolute;
	width: 950px;
	height: 450px;
	overflow-y: auto;
	overflow-x: hidden;
	left:calc(50% - 475px);
	top:calc(50% - 225px);
}

.borderdiv{
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	pointer-events: none;
	z-index: 10000;
	
	background-image: url("UI/images/video-border.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	
	filter: sepia(1);
}

#icontable{
	position: absolute;
	left:20px;
	transform: skew(-5deg);
	width:40%;
	text-align: center;
}

#myVideo {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	filter: sepia(1) brightness(120%);
}

#subtable{
	border:2px solid #2E2E2E;
	padding:10px;
	vertical-align: middle;
	box-shadow: 5px 5px 30px black;
	background-color: #1C1C1C;
	
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 25px;
}

#icontable th{
	border:2px solid #2E2E2E;
	padding:10px;
	vertical-align: middle;
	box-shadow: 5px 5px 30px black;
}

#icontable td{
	background-color: #171717;
	border:2px solid #2E2E2E;
	padding:10px;
	
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 35px;
	color:white;
	vertical-align: middle;
	
	box-shadow: 5px 5px 30px black;
	cursor: pointer;
	cursor: hand;
}

#icontable td:hover{
	border:2px solid #C79400;
	box-shadow: 0px 0px 20px #C79400;
	filter: sepia(1);
}

#contentdiv{
	position:fixed;
	height:100%;
	width:100%;
	top:0px; left:0px;
	background-color: #0E0E0E;
	background-image: url("UI/images/mediabg.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 9000;
}

#closebutton{
	position:fixed;
	width:120px;
	padding:10px;
	bottom:30px; right:30px;
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	color:beige;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 20px;
	z-index: 9001;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

#closebutton:hover{
	border:2px solid #CCB163;
	box-shadow: 0px 0px 20px #CCB163;
	filter: sepia(1);
	cursor:pointer;
	cursor:hand;
}

#refreshbutton{
	position:fixed;
	width:120px;
	padding:10px;
	bottom:30px; right:30px;
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	color:beige;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 20px;
	z-index: 0;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

#refreshbutton:hover{
	border:2px solid #CCB163;
	box-shadow: 0px 0px 20px #CCB163;
	filter: sepia(1);
	cursor:pointer;
	cursor:hand;
}

.spshopbutton{
	border:0px solid #2E2E2E;
	padding:7px;
	font-size: 30px;
	color:white;
	vertical-align: middle;
	cursor: pointer;
	cursor: hand;
}

.spshopbutton:hover{
	color:#6E6EFE;
	border:0px solid #C79400;
	filter: sepia(1);
}

.accessListTable{
	border-radius: 10px;
	border: 2px solid #2E2E2E;
	background-color: #171717;
	width: 95%;
	margin:20px;
	padding: 10px;
	overflow: hidden;
	
	color:beige;
	font-family: "Impact";
	font-size:25px;
	letter-spacing:2px;
	
	box-shadow: 5px 5px 30px black;
	
	transform: skewX(-5deg) skewY(-1deg);
}

.accessListTable select{
	min-width: 500px;
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	padding:7px;
	
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 25px;
}

.carholderTable{
	border-radius: 10px;
	border: 2px solid #2E2E2E;
	background-color: #171717;
	width: 95%;
	margin:20px;
	overflow: hidden;
	
	color:beige;
	font-family: ethnocentric, sans-serif;
	font-weight: 500;
	font-size:25px;
	letter-spacing:2px;
	
	box-shadow: 5px 5px 30px black;
	
	transform: skewX(-5deg) skewY(-1deg);
}

.carholderTable:hover{
	box-shadow: 0px 0px 20px #CCB163;
	filter: brightness(110%);
	cursor:pointer;
	cursor:hand;
}

.carholderTable td{
	padding:10px;
}

.modelname{
	color:#85867E;
	font-size:18px;
}

.infoname{
	color:#9CA36C;
	font-size:18px;
}

.confbutton{
	width:120px;
	padding:5px;
	background-color: #0E0E0E;
	border:1px solid #2E2E2E;
	border-radius: 10px;
	color:beige;
	font-family: "Impact";
	font-size:20px;
	letter-spacing:2px;
	text-align: center;
	box-shadow: 5px 5px 10px black;
}

.confbutton:hover{
	box-shadow: 0px 0px 20px #CCB163;
	filter: sepia(1);
	cursor:pointer;
	cursor:hand;
}

.editSetupDiv{
	position:fixed;
	width: 900px;
	height: 400px;
	padding:10px;
	padding-right:15px;
	padding-left:15px;
	overflow-y: auto;
	overflow-x: hidden;
	left:calc(50% - 450px);
	top:calc(45% - 200px);
	
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	z-index: 10000;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

.editSetupTable{
	width:100%;
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	
	transform: skewY(-1deg);
}

.editSetupTable select{
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	padding:5px;
	
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
}

#setupButtons{
	position:fixed;
	width:300px;
	padding:10px;
	bottom: 30px; left:calc(50% - 150px);
	z-index: 10001;
}

.addnewbutton{
	width:250px;
	padding:10px;
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 20px;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

.setupclosebutton, .setupsavebutton, .newsetupbutton{
	width:120px;
	padding:10px;
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 20px;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

.setupclosebutton{ color:beige; }
.setupsavebutton{ color:yellow; }
.newsetupbutton{ color:beige; }

.setupclosebutton:hover, .setupsavebutton:hover, .newsetupbutton:hover, .addnewbutton:hover{
	border:2px solid #CCB163;
	box-shadow: 0px 0px 20px #CCB163;
	filter: sepia(1);
	cursor:pointer;
	cursor:hand;
}

.mySetupsButtonBar{
	position:fixed;
	padding:10px;
	top:20px; right:100px;
	z-index: 9002;
}

#savesetupresult{
	position:fixed;
	width: 600px;
	height: 200px;
	padding:10px;
	padding-right:15px;
	padding-left:15px;
	overflow-y: auto;
	overflow-x: hidden;
	left:calc(50% - 300px);
	top:calc(45% - 100px);
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	color:white;
	
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	z-index: 10010;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

.setupname{
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	padding:5px;
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	text-align: left;
	box-shadow: 5px 5px 30px black;
}

#aoButtons{
	position:fixed;
	width:300px;
	padding:10px;
	bottom: 30px; left:calc(50% - 150px);
	z-index: 10002;
}

.newAO{
	position:fixed;
	width: 800px;
	height: 400px;
	padding:10px;
	padding-right:15px;
	padding-left:15px;
	overflow-y: auto;
	overflow-x: hidden;
	left:calc(50% - 400px);
	top:calc(45% - 200px);
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	color:white;
	
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	z-index: 10001;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

.confirmationWindow{
	position:fixed;
	width: 600px;
	height: 200px;
	padding:10px;
	padding-right:15px;
	padding-left:15px;
	overflow-y: auto;
	overflow-x: hidden;
	left:calc(50% - 300px);
	top:calc(45% - 100px);
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	color:white;
	
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	z-index: 10001;
	text-align: center;
	box-shadow: 5px 5px 30px black;
}

#confirmationButtons{
	position:fixed;
	width:300px;
	padding:10px;
	bottom: 130px; left:calc(50% - 150px);
	z-index: 10002;
}

.tboxinput{
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-radius: 10px;
	padding:5px;
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	text-align: left;
	box-shadow: 5px 5px 30px black;
}

.stepinput{
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding:5px;
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	text-align: left;
	box-shadow: 5px 5px 30px black;
}

.stepbutton{
	background-color: #0E0E0E;
	border:2px solid #2E2E2E;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding:5px;
	color:beige;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	text-align: left;
	box-shadow: 5px 5px 30px black;
}

.stepbutton:hover{
	border:2px solid #CCB163;
	box-shadow: 0px 0px 20px #CCB163;
	filter: sepia(1);
	cursor:pointer;
	cursor:hand;
}

.menudarkbg{
	background-color: black;
	opacity: 0.5;
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	z-index: 9998;
}

.informationTable{
	border-radius: 10px;
	border: 2px solid #2E2E2E;
	background-color: #171717;
	width: 95%;
	margin:20px;
	overflow: hidden;
	
	padding: 5px;
	
	box-shadow: 5px 5px 30px black;
}

.informationspan{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	color:white;
}