/* Mobile Info */
section#mobileinfo {
			display:none;
		}
@media screen and (max-width: 960px) {
	section#login {
					display: none !important;
				}
	
	section#mobileinfo {
					margin-top: 25px;
					text-align: center;
					display: block !important;
				}
}

/* Section Changes */

section#login.two  {
	height: 78vh !important;
}

/* Dropdown Menue */
.navitems {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 0px;
	margin: 0px;
	position: relative;

}

#nav ul li.dropdown {
    position: relative;
}

#nav ul li .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1100;
    top: 100%;
    left: 0;

}

#nav ul li.dropdown:hover .dropdown-content {
	display: block;
}

/* Hover-Stil für Unterpunkte */
#nav ul li .dropdown-content li:hover {
	 background-color: #f5f5f5;
	 width: 100%;
	 transition: 0.8s ease-in-out;
	 border-bottom: 1px solid #990000;
}


/* Header Chnages */

div#logo2 span.image {
		display: none;
	}

.nav-up {
		opacity: 0;
		transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
		transform: translateY(-60px);
	}
	
	.nav-up div#logo2 span.image {
		display: block;
		width: 60px;
		height: auto;
		transition: transform 0.5s ease-in-out;
	}
	
	.nav-up div#logo {
		margin-top: 2.35em;
	}
	
	.nav-up .promote {
		width: 100px;
	}
	
	.nav-up nav {
		width: 1000px;
	}
	
	.nav-up div#logo p {
		display: none;
	}
	
	.nav-up div#logo h1#title {
		font-size: 20px;
		padding-left: 8.5px;
	}
	
	.nav-down div#logo2 span.image {
		display: none;
	}

	div#header.nav-down {
		position: sticky !important;
	}
	
	.nav-down div#logo1 span.image {
		display: block;
		transition: transform 0.5s ease-in-out;
	}
	
	.nav-up div#logo1 span.image {
		display: none;
		transition: transform 0.5s ease-in-out;
	}

.promote {
    position: absolute;
    text-align: left;
    display: flex;
    width: 310px;
    flex-direction: column;
    padding-left: 179px;
}

.nav-up div.top {
    padding-top:30px;
}

.nav-up .promote {
	padding-top:10px;
	padding-left: 60px !important;
}

/* Registration Form */
/* The message box is shown when the user clicks on the password field */
#message {
	display:none;
	background: #f1f1f1;
	color: #000;
	position: relative;
	padding: 20px;
	margin-top: 10px;
  }
  
  #message p {
	padding: 10px 35px;
	font-size: 18px;
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
	color: green;
  }
  
  .valid:before {
	position: relative;
	left: -35px;
	content: "✔";
  }
  
  /* Add a red text color and an "x" when the requirements are wrong */
  .invalid {
	color: red;
  }
  
  .invalid:before {
	position: relative;
	left: -35px;
	content: "✖";
  }


/* Standard Messaging Alert */
.alert {
		display: block;
		width: 100%;
		background-color: #fff2bd;
		padding: 10px 15px;
		
		color: var(--link-color);
		font-weight: 400;
		border-left: 2px solid var(--link-color);
	}

	.alert::after {
		content: " !";
		font-weight: 800;
		font-size: 35px;
	}


	.success {
		display: block;
		width: 100%;
		background-color: #85b188; 
		padding: 10px 15px;
	
		
		color: green;
		font-weight: 400;
		border-left: 2px solid green;
	}

	.success::after {
		content: " !";
		font-weight: 800;
		font-size: 35px;
	}

/* Chart Frame */

.frame,
.shadow {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#monthSelect,
#yearSelect,
#yearSelectBar,
#monthSelectBar,
#projectStateSelect,
#donutStateFilter,
#donutYearFilter,
#requestSelect,
#budgetRequestorSelect,
#requestorFilter,
#yearSelectresp,
#regionSelect,
#businessFunctionSelect,
#functionLevelSelect,
#regionMarketSelect,
#regionTimeline,
#businessFunctionTimeline,
#functionLevelTimeline,
#regionMarketTimeline,
.chart > label,
.chart > p,
input {
    font-size: 13pt;
}

.explanation p > span {
	font-size: 0.7em;
	color: #777777;
}

.chart {
    padding-bottom: 15px;
}
.userinfo {
	font-size: 0.8em;
}

/* Subnav */
.subnav {
	width: 100%;
	border-bottom: #d3d2d2 1px solid;
	/* padding: 5px 20px 15px 5px; */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	gap: 30px;
}

.subnavitem {
	font-size: 0.8em;
	text-transform: uppercase;
	display: block;
	padding: 10px 12px;
	cursor: pointer;
}

.subnavitem:hover {
	background-color: #f1f1f1;
	transition: 1s ease-in-out;
}

.subnavitem.active {
	border-bottom: 3px solid crimson;
	font-weight: 500;
	transition: 1s ease-in-out;
}

.tabcontent {
	display: none;
}

/* Chart Loader */
.chart-loader {
	margin: 15px auto;
	padding: 15px;
	height: 30px;
	aspect-ratio: 2.5;
	--_g: no-repeat radial-gradient(farthest-side,var(--link-color) 90%,#0000);
	background: var(--_g), var(--_g), var(--_g), var(--_g);
	background-size: 20% 50%;
	animation: l44 1s infinite linear alternate; 
  }
  @keyframes l44 {
	0%,
	5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
	12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
	25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
	37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
	50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
	62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
	75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
	87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
	95%,
	100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  }

  .center-loader {
	width: 100%;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  }

  /* Table Definitions */

  .frame th,
  .frame td {
	font-size: 0.8em;
  }

  /* Searchbar */
  #searcharea {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 20px 10px;
	width: 100%;
	background-color: #f1f1f1;
  }

  span#useranzahl {
	font-size: 0.7em;
  }

  #searcharea input[type=text] {
	max-width: 400px;
  }

  .archive table {

  }
  .archive thead,
  .archive tbody {
	font-size: 0.8em;
  }

  .options {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
  }