/*
 Theme Name:   Coco & Jay Theme
 Theme URI:    https://cocoandjay.com/
 Description:  A child theme of Hello Elementor theme.
 Author:       Coco & Jay GmbH
 Author URI:   https://cocoandjay.com/
 Template:     hello-elementor
 Version:      1.3.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/



/************************************************************************************************************
*************************************************************************************************************
*** GENERAL SETTINGS ****************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

a:focus,
button:focus,
input:focus,
:focus {
  outline: none !important;
}

p{
	margin: 0;
}

div[data-elementor-type="wp-page"] {
    overflow: hidden;
}


/************************************************************************************************************
*************************************************************************************************************
*** STICKY HEADER *******************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

#mainheader {
    transition: margin-top 0.5s ease; /* Adjust the transition duration and timing function as you like */
    margin-top: 0;
}

#mainheader.sticky {
    /*margin-top: -120px; /* Adjust the value as per the height of your header */

}



/************************************************************************************************************
*************************************************************************************************************
*** FORM ****************************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

#qwrap{
	min-height: 200px;
	font-family: "Metropolis", Sans-serif;
	font-weight: 400;
	overflow: hidden;
	color: white;
}

#qwrap h3{
	font-weight: 300;
}

#calc_colr{
	min-height: 630px;
}

#qshortcode{
	transition: min-height 1.2s ease-in-out;
}

.hider{
	position: absolute;
	margin-left: -100%;
	width: 100%;
	background-color: #333C44;
	height: 100%; 
	z-index: 10;
}

.question{
	position: absolute;
	padding: 0 30px;
	width: 100%;
	margin-left: 110%;
    transition: margin-left 0.8s ease-in-out;
    height: 0;
    text-align: center;
    font-weight: 20px;
}

.question h3{
	font-size: 20px;
	margin-bottom: 24px;
}

.question input{
	border-radius: 0;
	padding: 12px 24px;
	border: 0;
	font-size: 18px;
}

.question select{
	background-color: white;
	color: #333C44;;
	border-radius: 0;
	padding: 12px 24px;
	border: 0;
	font-size: 18px;
	-webkit-appearance: none;
}

.question input[type=button], .question button{

	font-weight: 400;
	font-family: "Metropolis", Sans-serif;
	border-radius: 0;
	text-transform: uppercase;
	margin: 0 12px 12px 12px;
	border: 1px solid white;
	font-size: 18px;
	color: white;
	cursor: pointer;
}

.question button span{
	text-transform: none;
}

.question.past{
	margin-top: 0 !important;
	margin-left: -150%;

	
}

.question.active{
	margin-top: 0 !important;
	margin-left: 0;
	position: absolute;
	height: auto;
}


#back.hidden, #next.hidden, #quotepdf.hidden, #quotepdfm.hidden, #back2.hidden, #nextm.hidden, #offerm.hidden, #backm.hidden, #back2m.hidden{
	display: none;
}

input.finalform, textarea.finalform{
	margin-top: 12px;
	width: 100%;
	padding: 12px 24px;
	font-size: 18px;
}


#form_street, #form_email
{
	margin-top: 24px;
}

#form_plz{
	width: 49%;
	margin-right: 1%;
	float: left;
}

#form_city{
	width: 49%;
	margin-left: 1%;
}


/**** SLIDERS ******************************************************************************************************/

#slider_personen, #slider_uhrzeit, #slider_abbau, #slider_aufbau, .slider_day, .slider_drink{
	width: 70%;
	margin: 0 15%;
}

#slider_uhrzeit_output, #slider_personen_output, #slider_abbau_output, #slider_aufbau_output, .slider_day_output, .slider_day_input, .slider_drink_output, .slider_drink_input{
	margin-top: 12px;
	margin-bottom: 6px;
	font-size: 20px;
}

#slider_uhrzeit_err, #slider_uhrzeitwe_err{
	color: #b71717;
	display: none;
}

.form_date{
	width: 150px !important;
	margin: 0 !important;
	text-align: center;
	font-size: 18px;
	margin: 12px 24px;
}

span.ui-slider-handle{
	border-radius: 0px !important;
}

#slider_personen span.ui-slider-handle.ui-state-active, #slider_uhrzeit span.ui-slider-handle.ui-state-active{
	background-color: white !important;
	border: 1px #2A3841 solid !important;
} 

/**** SELECTs ****************************************************************************************************/


#table_personen, #table_aufbau, #table_abbau, .table_day, .table_drink{
	max-width: 300px;
}

#table_personen select, #table_aufbau select, #table_abbau select, .table_day select, .table_drink select{
	text-align: center;
}

#table_personen td, #table_aufbau td, #table_abbau td, .table_day td, .table_drink td{
	border: none;
	font-size: 18px;
	vertical-align: middle;
	
}



/**** BUTTONS ****************************************************************************************************/

button.drinks.selected, button.drinks:hover, input.kitchenyesno.selected, input.kitchenyesno:hover, input.wlanyesno.selected, input.wlanyesno:hover, button.location.selected, button.location:hover{
	background-color: white;
	color: #333C44;
}


/**** PRICETABE **************************************************************************************************/

.pricetable tr:nth-child(odd){
	background-color: rgba(255,255,255,0.2);
}

.pricetable td{
	padding: 5px;
	border: 0;
	vertical-align: middle;
}

.pricetable td:nth-child(odd){
	text-align: left;
}

.pricetable td:nth-child(even){
	text-align: right;
	min-width: 130px;
}

table tbody > tr:nth-child(odd) > th {
background-color: none !important;
}

td {
background-color: transparent !important;
}


/**** DATEPICKER *************************************************************************************************/

#ui-datepicker-div{
	z-index: 10000 !important;
}

table.ui-datepicker-calendar{
	font-family: "Metropolis", Sans-serif;
	font-weight: 400;	
}

table.ui-datepicker-calendar a.ui-state-active{
	background-color: #2A3841 !important;
	border: 1px solid #2A3841 !important;
	color: white;
}

td[title="notavail"]::after {
      content: " ";
    border-bottom: 3px solid black;
    width: 45px;
    height: 11px;
    /* font-size: 26px; */
    position: absolute;
    margin-top: -23px;
    transform: rotate(-38deg);
    margin-left: -8px;
}

#form_event_start_mobile, #form_event_end_mobile{
	height: 300px;
	display: none;
}


#form_event_start_mobile  .ui-datepicker-inline, #form_event_end_mobile .ui-datepicker-inline{
	margin: auto;
}


#form_event_start_mobile td[title="notavail"]::after, #form_event_end_mobile td[title="notavail"]::after {
      content: " ";
    border-bottom: 3px solid black;
    width: 45px;
    height: 11px;
    /* font-size: 26px; */
    position: absolute;
    margin-top: -23px;
    transform: rotate(-38deg);
    margin-left: -26px;
}


/**** ERR MSG ***********************************************************************************************/

#err_anlass,#err_name, #err_email, #err_phone, #err_end_date, #err_company, #err_street, #err_plz, #err_city{
	padding: 6px 24px;
	color: #b71717;
	display: none;
	text-align: center;
}


/**** MOBILE BEDIENUNG ********************************************************************************************/


#conf_mob_nav{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1000;
	margin-left: -100%;
	width: 100%;
    transition: all .5s ease-in-out;
}

#conf_mob_nav.vis{
	/*margin-left: 0;*/
}

/**** CONTACT FORMS ***********************************************************************************************/

.elementor-field-group{
	margin-bottom: 15px !important;
}

.elementor-field-group input, .elementor-field-group textarea{
	font-weight: 400 !important;
	font-family: "Metropolis", Sans serif;
}

/**** MOBILE ANPASSUNGEN *****************************************************************************************/



@media only screen and (max-width: 1025px) {
	
	#next, #back, #back2, #quotepdf, .form_date, #slider_uhrzeit, #slider_uhrzeit_output, #slider_personen, #slider_personen_output{
		display: none;
	}
	
	#form_event_start_mobile, #form_event_end_mobile, #table_uhrzeiten, #table_personen, #table_aufbau, #table_abbau, .table_day, .table_drink{
		display: unset;
	}

	#calc_colr{
		min-height: 0;
	}
	
	.question{
		padding: 0;
	}
	
	
	#qwrap{
		min-height: 200px;
	}
	
	#backm, #nextm{
		margin: auto;
	}
	
	#quotepdfm a{
		width: 100%;
	}
	
}

/**** HIDE ANLASS *****************************************************************************************/

#q2{
	opacity: 0;
}