.mySlides {display:none}
    .w3-tag, .fa {cursor:pointer}
    .w3-tag {height:15px;width:15px;padding:0;margin-top:6px}
    .event-calendar {
      cursor: default;
    }

#calendar-wrapper {
    width: 100%;
    display: grid;
    grid-template-rows: 2.5em 1fr;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    font-size: inherit;
    
    /*border-style: groove;
    border-color: darkblue;
    */

    border-left:  1px solid rgb(176, 176, 176) !important;
    border-right:  1px solid rgb(176, 176, 176) !important;
    border-bottom:  1px solid rgb(176, 176, 176) !important;
}


.select-start-date-box {

    border-radius: 8px 0px 0px 0px;

}

.select-end-date-box {

    border-radius: 0px 8px 0px 0px;

}

.select-date-box {
    /*border: 2px solid darkblue;*/
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    padding-left: 0.8em;
    

    border:  1px solid rgb(176, 176, 176) !important;

    min-height: 60px;
}

.title-in-select-box {
    font-weight: 600;
    font-size: 12px;

}

.date-in-select-box {
    font-size: 16px;
}

#calendar-wrapper #calendar-header {
    grid-row: 1/2;
    font-size: 2em;
    box-sizing: inherit;
}

#showcase-wrapper {
    display: grid;
    justify-items: center;
    align-content: center;

}

#showcase-wrapper #apartment-selection {
    padding: 12px;
    border: 1px solid black;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    
}

#calendar-wrapper #calendar-header h4 {
    padding: 0;
    margin: 0;
}


#calendar {
    display: grid;
    grid-template-rows: 3em 1fr;
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

#calendar #calendar-days,
#calendar #calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    padding: 0 1em;
    box-sizing: inherit;
    margin: 0;
}

#calendar #calendar-days {
    justify-items: center;
    grid-row: 1/2;
    grid-column: 1/2;
}

#calendar #calendar-grid {
    
    justify-items: flex-start;
    grid-row: 2/-1;
    grid-column: 1/2;
    width: 100%;
}

#calendar #calendar-grid > time {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    margin: 0.2em;
    padding: 0.5em;
    width: 80%;
    background-color: rgba(108, 108, 108, 0.02);
    border-radius: 3px;
    border: 2px solid transparent;
    transition: box-shadow 200ms, border 100ms;
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
    box-sizing: inherit;
}

#calendar #calendar-grid time.selected {

    background-color: lightblue;
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
}

#calendar #calendar-grid time.dayBooked,
#calendar #calendar-grid time.dayBooked:hover {
    outline: none;
    box-sizing: inherit;
    background-color: #c64949;
    cursor: not-allowed;
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
    border: 0
}

#calendar #calendar-grid time.disabled,
#calendar #calendar-grid time.disabled:focus {
    outline: none;
    border: 2px solid transparent;
    box-sizing: inherit;
    cursor: not-allowed;
    background-color: rgba(30, 39, 51, 0.2);
    box-shadow: 1px 1px rgba(0, 0, 0, 0);

}

#myCalendarWrapper {
    min-width: 325px;
}


.calendarLegend {

    padding-right: 15px;
    margin-top: 20px;

}

#calendar-header div p {

    cursor: pointer;
    background: transparent;
    border: 0;
    max-height: 2em;
    box-sizing: inherit;
    padding: 0.1em;
    margin: 0;
    height: auto;
    float: right;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#calendar-header div p#next-month{
    float: left;
}

#calendar-header div p#previous-month{
    float: right;
}

#calendar-header div p:hover {
    opacity: 0.75;
}

#calendar-header div p[disabled] {
    cursor: not-allowed;
    color:  rgba(30, 39, 51, 0.2);
}

.important-data {
    font-size: 20px;
    font-weight: bold;
}   

.reservation-desc {
    font-size: 17px;
    font-weight: bold;
}

.apartment-select {
    width: 60%;
    padding: 10px;
    margin-top: 10px;
}

.calendar-element {
    width: 70%;
    
}



.reservas-desc {
    width: 85%;
}

@media (min-width: 880px) {

    .reservas-desc {
        width: 55%;
    }

    #calendar-casas-rural {
        width: 75%;
    }

  }

  @media (min-width: 650px) and (max-width: 879px) {

    .reservas-desc {
        width: 65%;
    }

  }

@media (max-width: 450px) {
    #calendar-title {
        font-size: 30px;
    }

    .calendar-element {
        width: 95%;
        
    }

    .apartment-select {
        width: 80%;
        padding: 10px;
    }
  }