/*<style>*/
/* MODAL */
	
/* Fullscreen Popup Modal CSS */

.modal-flex-container {
    display: flex;
    justify-content: space-between;
	height: 100% !important;
}

.span_tlf_company {
	text-align: center !important;
	    padding-left: 5rem !important;
    padding-right: 5rem  !important;
}
.modal_company_name {
	float: left !important;
	color: #333367 !important;
}
.modal_tlf {
	float: right !important;
	color: #333367 !important;
}
  	.modal-form-container {
 		padding-top: 5rem !important; 
		
	}  
	/*
.modal-form-container, .modal-image-container {
    width: 50%;
}*/
	.modal-form-container {
		width: 60% !important;
	}
	.modal-image-container {
		width: 40% !important;
	}
	.modal-image-container {
		 flex-grow: 1 !important;
	}
.modal-image-container {
  position: relative;
  display: inline-block; /* or 'block', depending on your layout */
}

.modal-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(51, 51, 103, 0.7) 100%);
  z-index: 1;
}

.modal-image-container img {
  display: block; /* This removes any default inline spacing */
  width: 100%; /* This will make the image responsive to the container's width */
  height: auto; /* This will maintain the image's aspect ratio */
  position: relative;
  z-index: 0;
}
/* Ensure the modal content does not overflow the modal */
.popup-content {
    overflow: auto; /* Add scroll to the modal content if needed */
}

/* Responsive adjustments if necessary */
@media (max-width: 768px) {
    .modal-flex-container {
        flex-direction: column;
    }

    .modal-form-container, .modal-image-container {
        width: 100%; /* Stack them on smaller screens */
    }
}	

.popup-modal {
    position: fixed !important; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;  
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.75); 
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background-color: #fefefe;
	margin-top: 7rem !important;
	margin-bottom: 5rem !important;
/*     margin: auto; */
/*     padding: 40px !important; */
    border-radius: 8px; 
    width: 70% !important; 
	height: 70% !important;
	z-index: 9999 !important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    position: absolute; 
    transition: all 0.3s; 
	overflow: hidden;
}

	.modal_h2 {
		width: 100% !important;
		text-align: center !important;
		font-size: 42px !important;
		color: #333367 !important;
	}

	.modal_form_kontakt {
		padding-left: 5rem !important;
		padding-right: 5rem !important;
		margin-top: 3rem !important;
	}
 .img-close-icon {
    width: 20px !important; 
    height: 20px !important; 
}
.close-button {
    float: right;
	display: inline-block !important;
	padding: 0 !important; 
	line-height: 0px !important;
	position: absolute !important;
	right: 2rem !important;
	top: 2rem !important;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


@media screen and (max-width: 768px) {
    .popup-content {
        width: 90%; 
    }
}

/*</style>
<style>*/
	
.modal_input, .modal_textarea {
    width: 100%; 
    padding: 10px 0px !important; 
    margin-bottom: 10px; 
    border-bottom: 1px solid #FA9365 !important;
	border-radius: 0px !important;
	border-top: 0px !important;
	border-left: 0px !important;
	border-right: 0px !important;
    font-size: 16px; 
}
	.modal_input::placeholder {
		color: #333367 !important;
	}
	.modal_textarea::placeholder {
		color: #333367 !important;
	}

.modal_textarea {
    height: 120px;
    resize: none; 
	margin-top: 4rem !important;
}

.modal_submit {
    padding: 10px 35px;
    border: none;
    border-radius: 20px;
    background-color: #FFE4D9; 
    color: #333367; 
    font-size: 16px;
    cursor: pointer;
	float: right !important;
}

/*
.modal_submit:hover {
    background-color: #333; 
}*/
	#modal_input_name {
		width: 45% !important;
		margin-bottom: 4rem !important;
	}
	#modal_input_email {
		float: right !important;
		width: 45% !important;
		margin-bottom: 4rem !important;
	}
#modal_input_company {
	width: 45% !important;
	margin-bottom: 1rem !important;
}	
#modal_input_phone {
		float: right !important;
		width: 45% !important;
		margin-bottom: 1rem !important;
}

	#div_success_failure_message {
		text-align: center !important;
		color: #FA9365 !important;
	}

/*</style> */