html {
	height: 100%;
}

body {
	height: 100%;
}

#mainPage {
	/* background-image: url(images/jassen.jpg) !important; */
	background-color: DarkGreen !important;
	/* background-size: cover !important; */
}

.gridMainHeaderBar {	
	display: grid;
	grid-template-columns: 33% 34% 33%;
	justify-items: stretch !important;
}

.gridTable, .gridSum, .gridTeams {
	display: grid;
	grid-template-columns: 20% 8% 20% 4% 20% 8% 20%;
	/* height: 100% !important; */
}

.gridTeam {
	display: grid;
	grid-template-columns: 50% 50%;
	justify-items: stretch;	
	row-gap: 1vh;		
}

.gridTeam {
	display: grid;
	grid-template-columns: 50% 50%;
	justify-items: stretch;	
	row-gap: 1vh;		
}

.gridTeamHeader {
	display: grid;
	grid-template-columns: 48% 4% 48%;
	justify-items: stretch;	
	row-gap: 1vh;		
}

.gridScore {
	display: grid;
}

.gridDraw {
	display: grid;
	grid-template-columns: 50% 50%;		
	row-gap: 1vh;	
}

.gridNeu {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;			
	justify-items: stretch;
	row-gap: 1vh;		
}

.divColor {
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 26px;
	height: 26px;	
	line-height: 20px;
	border-radius: 50%;	
	background-color: lightgrey;
	border: 1px solid black;
	
	justify-self: center;
	align-self: center;
}

.imgColor {
	width: 20px;
	height: 20px;	
}

.flexCenter {
  display: flex;
  justify-content: center;
}

/* Input-Feld des Sliders ausblenden Teil 1*/
.sliSpiel {
	display:none !important;
}

/* Input-Feld des Sliders ausblenden Teil 2*/
.ui-slider-track {
   margin-left:15px !important;
}

#popScore, #popTeams {
	padding: 10px;
	width: 80vw;
}

#popPlayer {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;	
	width: 80vw;
}

.txtTeam {
	text-align: center !important;
	pointer-events: none;	
	color: white !important;
	background-color: black !important;
}

.txtScore {
	text-align: right !important;
	pointer-events: none;	
	justify-self: center;
	align-self: center;
	font-weight: bold;
	/* font-size: medium !important; */
}

.txtSum {
	text-align: right !important;
	pointer-events: none;	
	color: white !important;
	background-color: black !important;
	/* font-size: medium !important;	 */
}

.gridItem {
	justify-self: center;
	align-self: center;	
}

.gridItemTeams {
	justify-self: stretch;
	align-self: center;	
}

#popTeams2-popup {
  width: 80%;
  left: 10%;
  right: 10%
}

 .divPlayerTag {
	border: 2px solid black;
	margin: 5px;
	padding: 5px;
	text-align: center !important;	
  border-radius: 12px;
  cursor: move;	
 }
 
  .divTeamTag {
	margin: 5px;
	padding: 5px;
	text-align: center !important;
	font-size: 25px;
	font-weight: bold;	
	justify-self: center;
	align-self: center;
 }

 .btnColor, .btnTrash {
  aspect-ratio: 1;
  border-radius: 50%;
  /* display: grid; */
  /* place-items: center; */
  /* padding: 0 2em; */
  background-position: center center;
  background-repeat: no-repeat;	
	width: 30px;
	height: 30px;
	background-size: 80% 80%;
	border: 1px solid black;
	line-height: 30px;
	justify-self: center;
	align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;	
 }
 
 .navIcons {
	color:black;
	min-width: 25px;
	min-height: 25px;
}

#divFooterMainFlex {
	justify-content: center;
}

.headerFooterFlex {
	background: DarkGreen !important;	
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	padding-left: 5px;
	padding-right: 5px;
}

#footerMain {
	border: 0px;
}

#hdrStatus {
  text-align: center !important;  
}

.popupTitle {
  text-align: center !important;  
}

.popupButtons {
	display: flex !important;  
	justify-content: center !important;  

}

.underconstruction {
	background-image: url(ímages/underconstruction.png) !important;
	background-size: cover !important;
}

.noPoinerEvents {
	pointer-events: none;	
}

.text-transform {
	text-transform: none !important;
}

table {
  margin-left: auto;
  margin-right: auto;
}

.optionContainer {
	display: flex;	
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	background-color: #f6f6f6;
}

/* .optionSelection{ */
	/* width: 15px !important; */
/* } */

/* .ui-slider-track { */
   /* margin-left: 15px !important; */
/* } */

.ui-li-divider {
	padding-left: 5px !important;
	padding-right: 5px !important;	
	font-size: medium !important;
}

.ui-btn {
	font-size: small !important;
}

.ui-li-static {
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: small !important;
	background-color: #f9f9f9 !important;
}

.ui-panel-inner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0px;
 		overflow: auto;
		-webkit-overflow-scrolling: touch;
}