/*=================================
=            Variables            =
===================================*/

:root {
    --calendario-dorado: #b39b73;
    --calendario-gris-oscuro:#777c80;
    --calendario-gris-claro:#d5dce0;
}

/*======  End of Variables  ======*/

/*===============================================
=            Estilos del formulario             =
=================================================*/

.wpforms-container {
    gap: 1rem;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

.wpforms-container .wpforms-field,
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field select {
    max-width: 100% !important;
    width: 100%;
}

.wpb_column.vc_column_container.vc_col-sm-6 {
    width: 50%;
}

.vc_column-inner,
.wpforms-field-container,
.wpforms-form * {
    margin: 0 auto;
    width: 100% !important;
}

.wpforms-field-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem !important;
}

/*=============================================
=            Estilos de los inputs            =
=============================================*/

#wpforms-11153-field_7-container,
#wpforms-11155-field_7-container {
    grid-row: 5/6;
}

#wpforms-11153-field_8-container,
#wpforms-11155-field_8-container {
    grid-row: 6/7;
}

#wpforms-11153-field_3-container,
#wpforms-11155-field_3-container {
    grid-row: 7/8;
    grid-column: 1/3;
}

/*=====  End of Estilos de los inputs  ======*/

/*=====  End of Estilos del formulario  ======*/

/*=============================================
=            Estilos calendario            =
=============================================*/

#ui-datepicker-div .ui-datepicker-header {
    background-image: none !important;
    background-color: white !important;
    border: 0 !important;
}

#ui-datepicker-div .ui-icon.ui-icon-circle-triangle-e,
#ui-datepicker-div .ui-icon.ui-icon-circle-triangle-w {
    background-image: none !important;

    display: none;
}

#ui-datepicker-div .ui-corner-all {
    height: 100%;
    top: 0 !important;
    bottom: 0 !important;
}

.ui-datepicker-next,
.ui-datepicker-prev {
    transition: all .3s ease;
    text-decoration: none !important;
}

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
    background: var(--calendario-gris-claro) !important;
    border: none !important;
}

.ui-datepicker-next {
    right: 0 !important;
}

.ui-datepicker-next:hover {
    border-radius: 0 5px 5px 0 !important;
}

.ui-datepicker-prev {
    left: 0 !important;
}

.ui-datepicker-prev:hover {
    border-radius: 5px 0 0 5px !important;
}

#ui-datepicker-div .ui-datepicker-calendar {
    width: 100% !important;
}

#ui-datepicker-div .ui-state-highlight {
    width: 80% !important;
}

.ui-datepicker-title {
    display: flex;
    gap: .5rem;
}

.ui-datepicker-title select {
    background-color: transparent !important;
    border: 1px solid rgb(212, 232, 231) !important;
    color: rgb(93,81,72) !important;
}

.ui-state-default {
    background: rgb(212, 232, 231) !important;
    border: 1px solid rgb(212, 232, 231) !important;
    color: var(--calendario-gris-oscuro) !important;
}

.ui-state-active {
    background: rgb(253, 208, 130) !important;
    border: 1px solid rgb(253, 208, 130) !important;
    color: black !important;
    font-weight: bold !important;
}

/*==============================================
=            Estilos de las felchas            =
================================================*/

.ui-datepicker-next::before,
.ui-datepicker-prev::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    color: var(--calendario-gris-oscuro) !important;
    
    height: 100% !important;

    display: flex !important;
    justify-content: center;
    align-items: center;
}

.ui-datepicker-prev::before {
    content: "\f104";
}
  
.ui-datepicker-next::before {
    content: "\f105";    
}


/*=======  End of Estilos de las felchas  ======*/

/*=====  End of Estilos calendario  ======*/


/*=====================================
=            Media queries            =
=======================================*/

@media screen and (max-width: 768px) {
    .wpb_column.vc_column_container.vc_col-sm-6 {
        width: 100%;
    }

    #form-grupotel input,
    #wpforms-form-11139 input,
    #wpforms-form-11139 select,
    #wpforms-form-11139 textarea {
        font-size: 14px !important;
    }
}

/*======  End of Media queries  ======*/