/* Header Footer */

#header{
	width:100%;
	height:120px;
	padding:0px;
	margin:0px;
	float:none;
	clear:both;
	background-color: var(--sublight, grey);
}

#header div, #footer div, #footertop div{padding:20px 0px; height:80px; overflow:hidden; display: flex; align-items: center;}
#header .title{width:20%; float:left; margin-left:20px;}
#header .logo{ width:60%;float:left;}
#header .version{float:right; margin-right:20px;}

#footer, #footertop{
	width:100%;
	height:120px;
	padding:0px;
	margin:20px 0px 0px 0px;
	float:none;
	clear:both;
	background-color: var(--back, grey);
	}

#footertop{
	margin-bottom:-20px;
	background-color: var(--backlight, grey);
}

#footer .back{width:20%; float:left; margin-left:20px;}
#footer .middle{ float:left;}
#footer .sponsor{float:right; margin-right:20px;}
#footer .sponsor img{width:180px;}
#footertop .newend {float:right; margin-right:20px;}
#footertop .main, #footer .main {width:20%; float:left; margin-left:20px;}

/* Container */

#basiccontent{
	padding:20px;
}

/* Grid */

.grid-item{
	padding:0px !important;
}

.homegrid {
	display: grid;
	grid-template-columns: 1fr 1fr repeat(4, 3fr) 2fr 2fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom:10px;
}

.newgamegrid {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr 3fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom:10px;
}

.editgamegrid {
	display: grid;
	grid-template-columns: 2fr 2fr 3fr 3fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom:10px;
}

.endgamegrid {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr 3fr 3fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom: 10px;
}

.teameditgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom:10px;
}

.newteamgrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom:10px;
}

.editsquadsgrid {
	display: grid;
	grid-template-columns: 3fr 3fr 3fr 1fr 3fr 3fr 3fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	margin-bottom:10px;
}

.left{width:47%; float:left;}
.right{width:47%; float:right;}

/* Grid Style*/

.gridheadlines .grid-item{
	font-size:14px;
	text-align: center;
	line-height:17px;
	padding-top:6px;
	height:50px;
}

.gridheadlines{
	border-bottom: 3px solid var(--main, black);
}

.gridcontent .grid-item{
	font-size:14px;
	text-align: center;
	line-height:17px;
	padding-top:6px;
	overflow: hidden;
	margin-bottom:10px;
	height:40px;
}

.finished .grid-item{
	height:20px;
}

.finished .itemstandard, .finished .buttonstandard{
	padding:0px;
}

/* Grid observer */

.observerheader{
	background-color:#e5e5e5;
	border-bottom: 3px solid #479f99;
	padding-top:20px;
}

.observerheader .grid-item{
	background-color:#e5e5e5;
}

.observerfooter{
	background-color:#e5e5e5;
	border-top: 3px solid #479f99;
	padding-top:20px;
}

.observerfooter .grid-item{
	background-color:#e5e5e5;
}

.grid-item{
	background-color:#ebebeb;
}

.oblight .grid-item{
	background-color:#f7f7f7;
}

.obbench .grid-item{
	background-color:#f7f7f7;
	height:40px;
}

.gridheadlines .grid-item{
	font-size:14px;
	text-align: center;
	line-height:17px;
	padding-top:6px;
	background-color: #d2ebeb;
}

.gridheadlines {
	border-bottom: 3px solid #479f99;
}

.teamname{
	background-color: transparent !important;
	font-weight:bold;
	font-size: 18px !important;
}

.number{position:relative;}

.number .namehover{
	display:none;
}

.number:hover .namehover{
	display:block !important;
	z-index:1000;
	position:absolute;
	top:-10px;
	left:23px;
	background-color:#5c90e1;
	color:white;
	padding:10px;
	border-radius: 10px;
	box-shadow: 4px 4px 10px #666;
}

.info{
	position:relative;
}

.info .infofield{
	background-image: url("../img/info.png");
	background-size:100% auto;
	background-repeat: no-repeat;
	width:20px;
	height:20px;
	position:absolute;
	top:-10px;
	right:-10px;
}


.info .infofield .infotext{
	display:none;
}

.info .infofield:hover .infotext{
	width:120px;
	height:100px;
	display:block !important;
	z-index:1000;
	position:absolute;
	bottom:0px;
	right:0px;
	background-color:#5c90e1;
	padding:10px;
	border-radius: 10px;
	box-shadow: 4px 4px 10px #666;
	background-image: url("../img/info.png");
	background-size:20px 20px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
}

.info .infofield .infotext p{
	padding:0px;
	font-size: 10px;
	margin:-5px 0px 0px 0px;
	color:white;
}

.observerheader{
	padding:8px;
}

.observercontent{
	padding:25px 8px 25px 8px;
}

.observerfooter{
	padding:8px;
}


.observerteams{
width:48%;
	float:left;
}

.presetteams{
width:45%;
	float:left;
}

.observerright {
margin-left:4%;
}

.observergrid {
display: grid;
grid-template-columns: 1fr 1fr repeat(5, 2fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.squads {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:25px;
}
.squads .grid-item{margin-bottom:10px;}


.gameset {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:25px;
}
.gameset .grid-item{margin-bottom:10px;}

.observergrid2 {
display: grid;
grid-template-columns: 1fr 1fr repeat(5, 2fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.observergridw {
display: grid;
grid-template-columns: 1fr 1fr repeat(4, 2fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}


.observerfootergrid {
display: grid;
grid-template-columns: 6fr 6fr 2fr 6fr 6fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.maindeskfootergrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.observerheadergrid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.maindeskhead .observerheadergrid {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.maindeskgrid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
margin-bottom:7px;
}

.maindeskbottomgrid {
display: grid;
grid-template-columns: 11fr 2fr 11fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.settingsgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
margin-bottom:15px;
}

.observerteams .grid-item{
	height:40px;
}

.maindesk .observerteams .grid-item{
	height:20px;
}

.observerteamsw .grid-item{
	height:40px;
}

.maindesk .observerteamsw .grid-item{
	height:20px;
}

.maindesk .observerteams{
	margin-bottom:50px;
}


.grid-item{
	position: relative;
}

.observerheader input, .observercontent input{
	width:100%;
	padding:0px;
	margin: 9px 0px 0px 0px;
	border:0px;
	z-index:0;
	text-align:center;
	color:black !important;
}

.observercontent  input:disabled{
	color:black !important; 
	font-size:14px;
	background-color: rgba(0, 0, 0, .0);
	-webkit-appearance: none;
-moz-appearance: none;
	opacity: 1;
}

.observerheader  input::-webkit-outer-spin-button,
 .observerheader  input::-webkit-inner-spin-button, .observercontent input::-webkit-outer-spin-button,
 .observercontent input::-webkit-inner-spin-button  {
  -webkit-appearance: none;
  margin: 0;
}

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

.buttonminus, .buttonplus{
	z-index:10;
	position:absolute;
	width:20px;
	height:40px;
}

.buttonminus{
	top:0px;
	left:0px;
}

.buttonplus{
	top:0px;
	right:0px;
}

.updown img{
	max-height:40px;
	 height:90%;
	width:auto;
}

.updown{
	width:40px;
	height:40px;
}


#chatbox, .chatbox{
	height:150px;
	width:100%;
	overflow: scroll;
	overflow-x: hidden; 
}

.maindeskhead .chatbox{
	height:90px;
}

.messagemain{
	width:80%;
	float:left;
}

.home{
	padding:20px;
}

.sett .row{
	width: 100% !important;
}

#chatbox p, .chatbox p {
	font-size: 11px;
    line-height: 12px;
	margin:4px 0px 4px 0px;
}

#ev_history, #ev_history2, .ev_history{
	padding:8px;
	height:203px;
	overflow: scroll;
}

#ev_history p, #ev_history2 p, .ev_history p{
	font-size:12px;
}

.maindeskfootergrid .ev_history{
	height:150px !important;
}

.maindesk{padding:20px;}

.floatkiller{
	width:100%;
	height:0px;
	padding:0px;
	margin:0px;
	float:none;
	clear:both;
}

/* Settings */

.settings .row{
	width:600px;
}

.settings .row .col-1{
	width:180px;
	margin-right:10px;
	float:left;
	}

.teamsinput{max-width:500px; padding:10px; }

.outerframe {padding:20px;}


/* Notes */

#notebook{
	width:50%;
	height:100%;
	background-color: rgba(231,229,204,1.00);
	position:absolute;
	top:0px;
	right:0px;
	z-index:500;
}

#notebookb{
	width:50%;
	height:100%;
	background-color: rgba(231,229,204,1.00);
	position:absolute;
	top:0px;
	left:0px;
	z-index:500;
}

#notebook h2, #notebookb h2{
	margin-left:20px;
	margin-top:30px;
	font-size:22px;
	text-transform:uppercase;
}

#notesbox{
	position: relative;
	width:90%;
	height:62%;
	top: 0px;
	left:0px;
	overflow: scroll;
	margin-left:auto;
	margin-right:auto;
	overflow-x: hidden; 
}

#notesboxb{
	position: relative;
	width:90%;
	height:62%;
	top: 0px;
	left:0px;
	overflow: scroll;
	margin-left:auto;
	margin-right:auto;
	overflow-x: hidden; 
	
}

#tagnotes select{
	height:40px;
	margin:20px;
	float:left;
}

#notebook input, #notebookb input{
	height:40px;
	width:90%;
	border:0px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	float:none;
	display:block;
	background-color: white;
}

#notebook input[type=submit] , #notebookb input[type=submit] {
	height:40px;
	width:20%;
	border: 0px;
    border-radius: 20px;
    background-color: #92cecb;
    padding: 5px 10px 5px 10px;
}


#tagnotes input{
	height:40px;
	width:100px;
	margin:20px;
	float:left;
}

.notebutton{
	width: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.notebuttonl, .notebuttonr{
	position:absolute;
	top:10px;
	right:40px;
	width: 80px;
    margin:20px;
    display: block;
}

#notesbox p {
	font-size: 14px;
    line-height: 16px;
	margin:4px 0px 4px 0px;
}

#notesboxb p {
	font-size: 14px;
    line-height: 16px;
	margin:4px 0px 4px 0px;
}



#bottomstart img, #topstart img{
	margin-left: auto;
    margin-right: auto;
    display: block;
	width:18%;
	height:auto;
}

#topstart img{
	margin-left: auto;
    margin-right: auto;
    display: block;
	width:40%;
	height:auto;
}

.markwatch{
	width:40px !important;
	float:right !important;
	display:block !important;
	padding: 0px !important;
    margin: 12px -28px 0px 0px !important;
}


/* Settings */

.settings .observerheader h2{
	text-align: center;
}

.settings .grid-item{
	padding:5px;
}

.settings input{
	padding:5px 0px;
}


.firstinfo span{
	width: 130px;
    display: block;
    float: left;
    margin-top: 14px;
	font-weight:bold;
}

.firstinfo {
	height:45px;
	margin-top:10px;
}

.inactive .setupbutton{
	background-color:#ececec;
	padding:5px;
	color:#777777;
}

.inactive .setupbutton a{
	color:#666666;
}