.shifts_exchange_page_content { width: 95%; margin: 3rem auto; display: flex; flex-direction: column; position: relative; } /* -- Suspended screen */ #suspended_content, #unsuscribed_content { align-items: center; text-align: center; } #shifts_exchange .select_makeups, #shifts_exchange .unsuscribed_form_link, .cant_have_delay_form_link { margin: 1.5rem 0; } /* -- Suspended can't have delay screen */ #suspended_cant_have_delay_content { align-items: center; text-align: center; width: 50%; } @media screen and (max-width:992px) { #suspended_cant_have_delay_content { align-items: center; text-align: center; width: 90%; } } /* -- Calendar screen, area on top of the calendar */ #calendar_top_info { display: flex; justify-content: space-between; } @media screen and (max-width:992px) { #calendar_top_info { display: flex; flex-direction: column; justify-content: space-between; } } /* -- Calendar screen, shifts list */ #shifts_list { flex-direction: column; display: none; max-width: 100%; white-space: nowrap; } @media screen and (max-width:992px) { #partner_shifts_list { display: flex; flex-direction: column; align-items: center; } } .shift_line_container { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; } .shift_line_extra_actions { display: flex; justify-content: flex-start; flex-wrap: nowrap; } @media screen and (max-width:768px) { .shift_line_container { flex-direction: column; } .shift_line_extra_actions { width: 100%; } .affect_associate_registered { margin: 0.5rem 0; } } .selectable_shift_line { min-width: 325px; display: flex; align-items: center; border-radius: 5px; } .selectable_shift_line .checkbox { margin-right: 10px; } .selectable_shift_line.btn { cursor: not-allowed; } .affect_associate_registered { display: flex; align-items: center; border-radius: 5px; } @media screen and (min-width:768px) { .selectable_shift_line { margin: 0 15px; } .affect_associate_registered { margin-left: 15px; } } .selectable_shift{ margin: 1rem 0; } .delete_registration_button { justify-content: center; align-items: center; margin: 0.75rem 15px; color: #d9534f; cursor: pointer; display: none; } /* -- Calendar screen, makeups message */ #need_to_select_makeups_message { display: none; align-self: center; background-color: #d9534f; color: white; margin: 0 1rem 2rem 1rem; padding: 1rem 1.25rem; text-align: center; } .makeups_warning { margin-right: 3px; } @media screen and (max-width:992px) { .select_makeups_message_block { display: block; } } /* -- Calendar screen, can delete registrations message */ #can_delete_future_registrations_area { display: none; justify-content: center; align-items: center; margin: 0 1rem 1rem 1rem; } #can_delete_future_registrations_area button { white-space: normal; word-break: normal; margin: 1rem; } /* -- Calendar screen, calendar */ #calendar { margin: 2rem 1rem; } .loading-calendar { margin: 3rem auto; display: none; } @media screen and (max-width:992px) { #calendar { display: none; } } .fc .fc-event { cursor: pointer; margin: 1px 10px !important; } .fc-event { background-color: #008AD9; border-color: #008AD9; color: white; } td{ --fc-list-event-hover-bg-color:#005BA6; } .fc-event.shift_booked { background-color: #585858; cursor: auto; border-color: #585858; } .fc-event.shift_booked td { --fc-list-event-hover-bg-color:#585858; } .fc-list-event.shift_booked { color: white; } .fc-event.shift_booked_makeup { background-color: #f0ad4e; cursor: auto; border-color: #f0ad4e; } .fc-event.shift_booked_makeup td { --fc-list-event-hover-bg-color:#f0ad4e; } .fc-list-event.shift_booked_makeup { color: white; } #calendar .fc-list-table { table-layout: auto; } .resp-header-toolbar { display: flex; flex-direction: column; } .resp-header-toolbar .fc-toolbar-chunk { text-align: center; margin: 0.25rem; } .date_old_shift, .time_old_shift, .date_new_shift, .time_new_shift { font-weight: bold; } /* -- Explainations */ #calendar_explaination_area { max-width: 33%; border: 2px solid #585858; border-radius: 15px; padding: 1rem; } .example-event { max-width: 200px; margin: 2rem 0 0.5rem 0; font-size: 1.4rem !important; padding: 0 !important; } @media screen and (max-width:992px) { .example-event { margin: 2rem auto 0.5rem auto; } } .arrow_explanation_numbers { margin: 0 3px; } #calendar_explaination_button { max-width: 60%; margin: 2rem auto 0.5rem auto; } /* -- Assign shift modal */ .modal_affect_shift_buttons { margin: 1rem 0; } .assign_shift_button { margin: 0.25rem; }