@import url('/css/poppins-font.css');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

html {
	background: url("/images/background_1.jpg"); /* TODO: Mehrere Bilder*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: 50% 50%;
	scrollbar-width: thin;
}

body {
	display: grid;
	place-items: center;
	text-align: center;
	background-size: cover;
}

body {
	scrollbar-width: none;
}

body::-webkit-scrollbar {
	display: none;
}

.content {
	margin-top: 100px;
	width: 60%;
	border-radius: 10px;
	padding: 40px 30px;
	box-shadow: -3px -3px 9px #aaa9a9a2, 3px 3px 7px rgba(147, 149, 151, 0.671);
	background-color: rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(10px);
}

.content .text {
	font-size: 25px;
	font-weight: 600;
	margin-bottom: 20px;
	color: rgb(247, 233, 233);
}

.field .custom-input::placeholder {
	color: #e0d2d2a6;
}

.field:nth-child(2) {
	margin-top: 20px;
}

.field span {
	position: absolute;
	width: 50px;
	line-height: 50px;
	color: #ffffff;
}

.custom-input[type=text],
.custom-select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.custom-input#staff,
.custom-input#points,
.custom-input#reason,
.custom-input#hint,
.custom-input#dataStart,
.custom-input#dataEnd,
.custom-input,
button {
	margin: 25px 0 0 0;
	width: 100%;
	height: 50px;
	color: rgb(238, 226, 226);
	font-size: 18px;
	font-weight: 600;
	border: 2px solid rgba(255, 255, 255, 0.438);
	border-radius: 8px;
	background: rgba(105, 105, 105, 0);
	margin-top: 10px;
	outline: none;
	cursor: pointer;
	border-radius: 8px;
	backdrop-filter: blur(20px);
}

[type=submit]{
	background: rgba(73, 139, 65, 0.603);
}


.content .or {
	color: rgba(255, 255, 255, 0.733);
	margin-top: 9px;
}

.icon-button {
	margin-top: 15px;
}

.icon-button span {
	padding-left: 17px;
	padding-right: 17px;
	padding-top: 6px;
	padding-bottom: 6px;
	color: rgba(244, 247, 250, 0.795);
	border-radius: 5px;
	line-height: 30px;
	background: rgba(255, 255, 255, 0.164);
	backdrop-filter: blur(10px);
}

.icon-button a#apply-button span {
	background: #498b49;
}

button:hover,
.icon-button span:hover {
	background-color: #babecc8c;
}

a {
	text-decoration: none !important;
}

ul {
	color: #e0d2d2;
	font-size: large;
}

.tabs {
	margin: 5px;
	padding: 0;
	list-style: none;
	position: relative;
	font-size: larger;
}

.tabs {
	display: inline-block;
	cursor: pointer;
	color: #e0d2d2;
	padding: 5px 10px;
}

.tabs .active-tab {
	color: #fff;
}

.tabs:first-child {
	margin-left: 10px;
}

.tabs-content {
	margin: 20px;
	padding: 0;
	list-style: none;
	text-align: -webkit-center;
}

.tabs-content .tabs {
	display: none;
}

.tabs-content table{
	color: rgb(247, 233, 233);
	border-color: rgb(247, 233, 233);
	border-collapse: collapse;
    border-spacing: 2px;
	border-width: 1px;
	border-radius: 2px;
	width: 100%;
}

.tabs-content table tr:first-of-type{
	backdrop-filter: blur(400px);
}

/* .tabs-content table td:nth-child(odd){
	font-weight:bold;
} */

.tabs-content table th,td{
	padding:5px;
	text-align: left;
}

hr {
	/* width: 80%; */
	margin-left: 25%;
	margin-right: 25%;
}

.label {
	color: rgb(247, 233, 233);
	float: left;
	font-size: 18px;
}

.hint-error {
	position: fixed;
	top: -82px;
	border: 3px solid #FF0000!important;
	background-color: #f00!important;
	width: 95%;
	color: #fff;
	padding: 10px 20px!important;
}

.hint-error-inline {
	top: -82px;
	border: 3px solid #FF0000!important;
	background-color: #f00!important;
	width: 95%;
	color: #fff;
	padding: 10px 20px!important;
    resize: none;
}

.hint-success {
	position: fixed;
	top: -82px;
	border: 3px solid #00FF00!important;
	background-color: rgb(0, 94, 0)!important;
	width: 95%;
	color: #fff;
	padding: 10px 20px!important;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	box-shadow: -3px -3px 9px #aaa9a9a2, 3px 3px 7px rgb(147 149 151 / 67%);
	background-color: rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(150px);
	color: white;
	max-height: 10%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.footer-left {
	float: left;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer-right {
	float: right;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

li#points-content {
	height: 15rem;
	max-height: 30%;
	overflow-y: scroll;
}

.left {
	float: left!important;
	padding-left: 0!important;
	margin-left: 0!important;
}

.right {
	float: right!important;
	padding-right: 0!important;
	margin-right: 0!important;
}

.questionmark:after{
    content: '?';
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    width: 1.8ex;
    height: 1.8ex;
    font-size: 1.4ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 4px;
    padding: 1px;
    color: blue;
    background: white;
    border: 1px solid blue;
    text-decoration: none;
}

.questionmark:hover:after{
    color: white;
    background: blue;
    border-color: white;
    text-decoration: none;
}

.debug-msg {
	margin: none;
	padding: none;
	color: #f00;
	background-color: #fff;
}

[type="date"] {
	background: url("/images/calendar-icon.png")  100% 50% no-repeat ;
	background-size: 30px;
}

[type="date"]::-webkit-inner-spin-button {
	display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	position:absolute;
	width:100%;
	height:50px;
	color:rgba(204,204,204,0);
  }

textarea#reason {
	resize: none;
	height: auto!important;
}

.form-header{
	color: #fff;
	border-radius: 10px;
    padding: 10px 10px;
    box-shadow: -3px -3px 9px #aaa9a9a2, 3px 3px 7px rgb(147 149 151 / 67%);
    background-color: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);
}

.hintarea{
	position: fixed;
	left: 2.5%;
}

.notifyarea{
	position: fixed;
	left: 2.5%;
}

.smaller-text {
	font-size: smaller;
}

@media (max-width: 1300px) {
	/* handy*/
	.content {
		width: 95%;
		margin-top: 70px;
		margin-bottom: 50px;
	}

	.hint-error {
		position: fixed;
		top: -70px;
	}

	.hint-success {
		position: fixed;
		top: -70px;
	}

}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */