@charset "ISO-8859-1";

/* Bewerbungsart-Auswahl-Popup */

#application-selection-container {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;	
}

#whatsapp-button {
	width: 100%;
	position: relative;
	text-align: center;
	background-color:#25d366;
}

#whatsapp-button img {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

/* Bewerbungsformular-Popup */

#form-button {
	width: 100%;
}

.form-area {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	row-gap: 30px;
	padding: 20px 20px;
	border-bottom: 1px solid #dee2e6;
}

.form-component {
	width: 100%;
}

.form-component input[type=file] {
	visibility: hidden;
}

#custom-text-area {
	display: flex;
	justify-content: center;
}

#mandatory-notice {
	display: flex;
	align-items: center;
}

#error-area {
	display: none;
	color: var(--red);
	margin-left:20px;	
}

#button-area {
	border-bottom: none;
	width: 100%;
}

#button-area button {
	width: 100%;
}

/* Dateiupload */

#upload-button {
	height: 50px;	
}

#upload-button input, #upload-button label {
	position: absolute;
}

#file-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	overflow: scroll;
}

#file-table tr {
	border-top: 1px solid var(--dark);
	border-bottom: 1px solid var(--dark);
}

#file-table td {
	padding: 10px;
}

/* Lade-Animation */

.loader {
	border: 5px solid #f3f3f3;
	border-radius: 50%;
	border-top: 5px solid var(--blue);
	width: 70px;
	height: 70px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
										
/* Bestätigungs-Animation bei Eingang der Bewerbung */

#application-confirmation-container svg {
	display: block;
	height: 70px;
	width: 70px;	
}

#failedIcon {
	color: var(--red);
}

#successIcon {
	color: var(--green);	
}

.circle {
  	stroke-dasharray: 76;
  	stroke-dashoffset: 76;
  	animation: draw 1s forwards;
}

.tick, .x {
  	stroke-dasharray: 18;
  	stroke-dashoffset: 18;
  	animation: draw 1s forwards 1s;
}

@keyframes draw { 
  	to {
  		stroke-dashoffset: 0
  	} 
}

/* Responsives Design */

@media only screen and (max-width: 767px) {

	/* Popup */
	
	#popup-container {
		padding: 10px;
		overflow-y: scroll;
	}
	
	.form-area {
		grid-template-columns: 1fr;
	}	
	
}