*, *:before, *:after {
	box-sizing: border-box;
}

button {
  background-color:var(--ButtonBgCol) ;
  border:0;
  font-weight:600 !important;
  font-size : 12px;
  padding:4px 20px; 
  min-height:40px;
}

button:hover {
	background-color: var(--ButtonBgColHover);
}

button:pressed {
	background-color: var(--ButtonBgColPressed);
}

button:focus {
	border: 1px solid #ff7f00;
}


/* -------------------------------------------  */
.FEDialog {
  margin-top:30px;
  background-color:#4f3f3f !important;
}

.FEDialog_Button {
  background-color:var(--ButtonBgCol) ;
}



.Login{
	min-width: 550px; 
}

.Login div{
	width: 100%;
}

/* ------------------ Login-Form --------------- */
div.login_gridcontainer {
	display:grid;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	grid-template-columns: 25% auto auto ;
	margin-top: 30px;
}

.login_gridcontainer > label, 
.login_gridcontainer > div ,
.login_gridcontainer > input
{
	height:40px;
	line-height: 40px;
}

.login_gridcontainer > div,
.login_gridcontainer > label
 {
	font-size:18px;
}

.login_GridTextInputItem {
	grid-column: 2 / 4;
	font-size:16px !important;
	color:#0f0f0f !important;
	/*background-color:#efefef !important;*/
}

label.LoginInput1 {
	display: inline-block;
}

input[type="text"].error, input[type="password"].error{
	border: 2px solid #a02c2c;
}
input[type="text"].error:focus, input[type="password"].error:focus {
	border: 2px solid #d35f5f;
}

a.login_small {
	font-size: 0.8em;
}

/*  ------ Error - Dialog  ------ */
.LoginError {
	clear: both;  
	color : #ffffff;
	border: 4px solid #A02C2C;
	background-color: #533333E0;
	padding: 16px;
	position:absolute;
	top:0px;
	left:50px;
	right:50px;
}

.LoginError-titel {
	font-size: 1.25em;
	padding-bottom: 8px;
	margin: 0;  
	border-bottom: 1px solid #C8C8C8;  
}

.LoginError-head {
	padding: 8px 0;
	font-weight: bold;
	line-height: 20px;
}

.LoginError-body {
	color: #cfcfcf;
}

button.LoginError-CloseBtn {
	background-color : #53333300;	
	background-image : url("/wp-content/plugins/MTO-Hub/frontend/images/mto_close_white.png");
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top:0px;
	right:0px;
	width:20px !important;
	height:20px;
	font-size:12px;
	line-height:20px;
	border:none;

}

button.LoginError-CloseBtn:hover {
  background-color : #4f4f4f;	
	cursor: pointer;
	text-decoration: underline;
}

/* ---- Logoutbtn ----- */
.VPELogout {
	background-color: darkgrey;
	color: black;
	text-align: center;
	cursor: pointer;
}

input[type="button"]:disabled ,input[type="button"]:disabled:hover  {
	background-color:#9f9f9f;
}


div.StartPageGrid {
	display:grid;
	row-gap: 30px;
	column-gap: 39px;
	grid-template-columns: 100%;

	width: 100%;
}

@media only screen and (min-width: 728px) {
	div.StartPageGrid {
		grid-template-columns: CALC( (100% - 60px) / 3) CALC( (100% - 60px) / 3) auto;
	}
	
}


div.SimpleKachel{
	box-shadow: inset 0 0 15px 2px rgba(0, 156, 218, 0.5);
	border-radius: 10px;
	background-color: rgba(7, 94, 121, 0.5);
	padding: 10px 15px 25px 15px;
	backdrop-filter: blur(20px);
	height: calc(100% - 10px);  
	max-width: 350px;
	min-width: 200px;
	width:100%;
  }
  
  div.SimpleKachel > div.head {
	width: 100%;
	text-align: center;
	font-size: larger;
	border-bottom: 1px solid rgba(0, 156, 218, 0.3);
	min-height: 30px;
	line-height: 30px;
  }
  
  div.SimpleKachel > div.text {
	width: 100%;
	padding-top: 10px;
	min-height: 100px;
	border-bottom: 1px solid rgba(0, 156, 218, 0.3);
  }
  
  div.SimpleKachel > div.content {
	width: 100%;
	padding: 5px;
  }
  div.SimpleKachel > div.content > ul{
	margin-top: 0px;
  }

  .SimpleKachel > input[type="button"] {
	  display:block;
	  width:CALC(100% - 20px);
	  margin: 15px 10px 5px 10px;
	  
      background-color:#ffffff03; 
	  box-shadow: 0 0 5px 1px rgba(0, 156, 218, 0.2);
	  border-radius: 6px;
  
  }

  .SimpleKachel > input[type="button"]:disabled {
    color:#bfbfbf;	
  }


.SimpleKachel button {
	color:#f7f7f7;
	display:block;
	width:CALC(100% - 20px);
	margin: 15px 10px 15px 10px;
	background-color:#ffffff03; 
	box-shadow: 0 0 5px 1px rgba(0, 156, 218, 0.2);
	border-radius: 6px;
	border-width:0px;
  cursor:pointer;
}

.SimpleKachel button:hover {
  background-color:#ffffff13; 
}

.SimpleKachel button:disabled {
  background-color: transparent;
  color:#7f7f7f;
  box-shadow:none;
}

.SimpleKachel button:disabled:hover {
	background-color: #4f4f4f7f;
	color: #9f9f9f;
}

div.SimpleKachel .note {
  color:#9f9f9f;
  font-size: 1.1rem;
  margin:0px;
}

div.FileListGridFE {
  display: grid;
  column-gap: 10px;
  grid-template-columns: 8rem  7rem 12rem 12rem 28rem auto ;
  min-width:62rem; /*summe Template-colums + reserve */
  row-gap:2px;
  /*background-image: linear-gradient(180deg, #ffffff, #cfcfcf);*/
  padding:5px 10px 5px 10px;
}


div.FileListHead {
	padding: 5px 15px 5px 5px;
	border-bottom: #ffffff solid 1px;
}

/* Spaltenüberschriften */
div.FileListColHead {  
	color: #efefef;
	cursor: pointer;
  }
  div.FileListColHeadSort {
	color: #ffffff;
	font-weight: 700;
  }

  div.FileListFE {
    background-color: #2f2f2f; 
    padding : 3px;
    overflow-y : scroll;
    overflow-x : auto;
    height: 46vh;
    position:relative;
  	margin-bottom:20px;
  }

	div.FileListFEItem {
		background-color: #2f2f2f; 
		/* background-color: #efefef; */
		/*color:#0f0f0f; */
	}
	div.FileListFEItem:hover {
		background-color: #3f3f3f; 
	}

  div.FileListFE hr {
    margin: 0 20px 0 10px;
    border-color : #4f4f4f;
    border-width: 1px;
  }