/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
span.full-width {
    display: inline-block;
}
.table-movies {
    width: 1100px!important;
}
.full-width {
    width: 100%!important;
}
.movie-title {
    color: #e54640;
}
.movie-title:hover, .movie-title:active {
    color: #007CA1;
}
a.reservation-link, a.reservation-link:hover, a.reservation-link:active {
    text-decoration: none;
}
.reservation-link {
    background-color: #d5d5d5;
    padding: 0px 20px 0px 20px;
    border-radius: 10px;
    margin: 5px 0px 5px 0px;
    color: black;
    cursor: pointer;
    display: block;
}
.reservation-link:hover, .reservation-link:active {
    background-color: #0000006b;
    color: white;
}
.reservation-event {
    background-color: #FEDF7E;
}
.reservation-event:hover {
    background-color: #FEDF7E;
    color: black;
    opacity: 0.80;
}
.reservation-closed, .reservation-closed:hover, .reservation-closed:active {
    background-color: #d5d5d5;
    color: black;
    opacity: 0.5;
    cursor: not-allowed;
}
.popup-schedule-trigger a {
    cursor: pointer;
}
.day, .movie td {
    width: 12%;
}
.schedule-arrows {
    width: 16%;
}
.movie th {
    vertical-align: middle!important;
}
.table-movies caption {
    caption-side: top;
    color: black;
    font-size: 32px;
    font-weight: 700;
}
.picto {
    width: 15px;
}
.table-movies td, .table-movies th {
    background-color: white!important;
    border: none;
}
.table-movies tbody tr:hover>td, table tbody tr:hover>th{
    background-color: #eee!important;
}
button.arrow-left, button.arrow-right {
    font-size: 14px;
    padding: 0;
    margin-bottom: 2px;
    border: 1px solid #007CA1;
    color: #007CA1;
}
button.arrow-left:hover, button.arrow-right:hover {
    color: white;
    background-color: #007CA1;
}

/* LOADING MODAL */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('../css/ajax-loader.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}