/* Estilos para el formulario de reserva */
#reserva-yate-form {
    max-width: 600px;
    margin: auto;
    padding: 0;
    background: #fff;
    border: 0;
    font-family: Arial, sans-serif;
}
#reserva-yate-form label {
    display: block;
    margin-top: 10px;
    font-family: 'Inter Tight';
    font-size: 16px;
    color: #011640;
}
#reserva-yate-form input {
    width: 100%;
    padding: 5px;
	margin-top: 10px;
    font-family: 'Inter Tight';
    font-size: 16px;
    color: #011640;
}
#reserva-yate-form button {
    margin-top: 15px;
    padding: 14px 55px;
    cursor: pointer;
    background-color: #011640;
    font-family: "Inter Tight", Sans-serif;
    font-weight: 600;
    fill: #FFFFFFE8;
    color: #FFFFFFE8;
    border-radius: 0px 0px 0px 0px;
    font-size: 16px;
	width: 100%!important;
}
#date_range {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 5px;
}

/* Estilos para el panel lateral de resumen final */
#resumenReserva {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100%;
    background: white;
    display: flex;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    font-family: Arial, sans-serif;
    flex-direction: column;
    justify-content: center;
}

#resumenReserva h2{
    font-family: 'Inter Tight' !important;
    color: #011640!important;
    font-size: 25px!important;
}

#resumenReserva p{
	font-family: 'Inter Tight' !important;
    color: #011640!important;
    font-size: 16px!important;
}

#costesDetalle{
	background-color: #DDE8F5;
    padding: 28px;
    border-radius: 0;
}

#costesDetalle h2{
	font-family: 'Inter Tight'!important;
    font-size: 21px!important;
    color: #011640!important;
	border-bottom: 1px solid #011640;
}

#costesDetalle ul li{
    display: flex!important;
    flex-direction: row!important;
    justify-content: space-between!important;
	font-family: 'Inter Tight';
    font-size: 16px;
    color: #011640;
}

#finalizarReservaBtn{
	width: 100%!important;
}

.daterangepicker .drp-calendar{
	max-width: inherit!important;
}

.drp-calendar.left{
	 margin: 1em;
}

.drp-calendar.right{
	margin: 1em 1em 1em 2em!important;
}

.drp-buttons{
	background: #011640!important;
    color: white!important;
    font-family: 'Inter Tight'!important;
    min-height: 50px!important;
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: flex-end!important;
}

.daterangepicker .drp-selected{
	display: inline-block!important;
    font-size: 18px!important;
    padding-right: 8px!important;
    font-weight: 500!important;
}

.daterangepicker .drp-buttons .btn {
    margin-left: 8px!important;
    font-size: 15px!important;
    font-weight: 400!important;
    padding: 9px 16px!important;
    border-radius: 0px!important;
    background: #DBAC34!important;
    color: white!important;
    font-family: 'Inter Tight';
}

.daterangepicker th.month {
    width: auto;
    font-family: 'Inter Tight';
    font-size: 18px;
    font-weight: 500;
    color: #011640;
}

.daterangepicker .calendar-table td, .daterangepicker .calendar-table th {
	font-family: 'Inter Tight';
    color: #011640;
}


.daterangepicker td.active{
	background-color: #DDE8F5!important;
}

.ui-timepicker-standard{
	border: 0!important;
}

.ui-widget.ui-widget-content {
    border: 1px solid #ededed!important;
}

.ui-corner-all{
	font-weight: 500!important;
	color:#011640!important;
	font-family: 'Inter Tight'!important;
	font-size: 16px!important;
}

a#ui-active-item{
	background-color: #DDE8F5!important;
	border: 1px solid #DDE8F5!important;
	font-weight: 500;
	color:#011640!important;
	font-family: 'Inter Tight';
	font-size: 16px!important;
}

#errorMensaje{
	color: red;
    font-family: 'Inter Tight';
    font-size: 15px;
    margin-top: 10px;
}

@media only screen and (max-width: 768px){
	.daterangepicker{
		width: inherit!important;
	}
	
	#resumenReserva{
		width: 100%!important;
		z-index: 999;
	}
}