.loading
{
    width: 100%;
    height: 150px;
    background: white url("../images/loading.gif") center no-repeat;
    background-size: 15% auto;
    background-position: center; 
}

/* Templates list: wrap cell text so the table stays inside the section box */
.templates-section
{
    overflow-x: hidden;
    max-width: 100%;
}

#listing,
#users_table_wrap
{
    max-width: 100%;
    min-width: 0;
}

#listing .table-responsive,
#users_table_wrap.table-responsive,
.templates-table-wrap.table-responsive
{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    border: 0;
}

.templates-table
{
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
    word-wrap: break-word;
}

.templates-table > thead > tr > th,
.templates-table > tbody > tr > td
{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    padding: 8px 6px;
    max-width: 0; /* forces fixed-layout columns to honour wrap */
}

.templates-table > tbody > tr > td.templates-actions,
.templates-table > thead > tr > th.templates-actions
{
    white-space: nowrap !important;
    width: 130px;
    max-width: 130px;
    text-align: right;
    vertical-align: middle;
}

.templates-table .templates-actions .btn
{
    float: none;
    display: inline-block;
    width: 35px;
    height: 35px;
    padding: 6px 0;
    margin-left: 4px;
    vertical-align: middle;
}

/* Photographers: compact status / stable action column */
#users_table > thead > tr > th:nth-child(1),
#users_table > tbody > tr > td:nth-child(1)
{
    width: 56px;
    max-width: 56px;
    text-align: center;
}

#users_table > thead > tr > th:nth-child(2),
#users_table > tbody > tr > td:nth-child(2)
{
    width: 12%;
}

#users_table > thead > tr > th:nth-child(3),
#users_table > tbody > tr > td:nth-child(3)
{
    width: 18%;
}

#users_table > thead > tr > th:nth-child(4),
#users_table > tbody > tr > td:nth-child(4)
{
    width: 22%;
}

.templates-table > thead > tr > th.sortable
{
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.templates-table > thead > tr > th.sortable:hover
{
    color: #337ab7;
}

.templates-table > thead > tr > th.sortable:after
{
    content: " \2195";
    font-size: 10px;
    color: #bbb;
    font-weight: normal;
}

.templates-table > thead > tr > th.sortable.sort-asc:after
{
    content: " \25B2";
    color: #337ab7;
}

.templates-table > thead > tr > th.sortable.sort-desc:after
{
    content: " \25BC";
    color: #337ab7;
}

.checkboxHover:hover
{
    -webkit-box-shadow: 0px 0px 15px 1px #568188;
    -moz-box-shadow: 0px 0px 15px 1px #568188;
    box-shadow: 0px 0px 10px 1px #568188;
}

.plate
{
    background: transparent;
    padding: 5px;
    border: 1px solid #e9e9e9;
    margin-bottom: 25px;
}

#modal_add, #modal_edit, #modal_copy
{
    width: 60%;
    margin: auto;
    margin-top: 1%;
    display: none;
    position: fixed;
    z-index: 1000;
    overflow: auto;
}

#modal_edit_user_tags, #modal_add_user, #modal_edit_user, 
#modal_edit_profile, #modal_edit_email, #modal_edit_password, #modal_preview, #modal_reprint_add,
#modal_add_vacation, #modal_edit_vacation, #modal_add_unavailable
{
    width: 50%;
    margin: auto;
    margin-top: 1%;
    left: 0;
    right: 0;
    display: none;
    position: fixed;
    z-index: 1000;
    overflow: auto;
}

#modal_edit_user_tags_buttons
{
    width: 100%;
    margin: auto;
    padding-top: 35px;
}

#modal_edit_user_tags_btn_add, #modal_edit_user_tags_btn_delete
{
    margin-left: -14px;
    margin-bottom: 5px;
    width: 110px;
    float: left;
}

#modal_delete, #modal_reserve, #modal_give_up, #modal_ask, #modal_ban_user, 
#modal_unban_user, #modal_delete_user, #modal_delete_vacation,
#modal_change_status, #modal_change_ask_status
{
    width: 40%;
    min-width: 320px;
    max-width: 560px;
    margin: auto;
    left: 0;
    right: 0;
    top: 20%;
    display: none;
    position: fixed;
    z-index: 1050;
    overflow: visible;
}

#modal_iptc_preview
{
    width: 90%;
    max-width: 720px;
    min-width: 280px;
    margin: auto;
    left: 0;
    right: 0;
    top: 8%;
    bottom: 8%;
    display: none;
    position: fixed;
    z-index: 1050;
    overflow: visible;
    box-sizing: border-box;
    max-height: 84vh;
}

#modal_iptc_preview .modal-dialog
{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    height: 100%;
    max-height: 84vh;
}

#modal_iptc_preview .modal-content
{
    display: flex;
    flex-direction: column;
    max-height: 84vh;
    height: auto;
    overflow: hidden;
    max-width: 100%;
}

#modal_iptc_preview .modal-header,
#modal_iptc_preview .modal-footer
{
    flex: 0 0 auto;
}

#modal_iptc_preview .modal-body
{
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#modal_iptc_preview_body
{
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#modal_iptc_preview_body table
{
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
}

#modal_iptc_preview_body th,
#modal_iptc_preview_body td
{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    max-width: 0;
}

#modal_iptc_preview_body th
{
    width: 32%;
}

#modal
{
    width: 40%;
    min-width: 320px;
    margin: auto;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 10%;
    display: none;
    position: fixed;
    z-index: 1050;
    overflow: visible;
    max-height: 80vh;
}

#modal .modal-dialog
{
    height: 100%;
    max-height: 80vh;
    margin: 0 auto;
}

#modal .modal-content
{
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
}

#modal .modal-header,
#modal .modal-footer
{
    flex: 0 0 auto;
}

#modal .modal-body,
#modal_body
{
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 1364px)
{
    #modal_add, #modal_edit, #modal_copy, #modal_edit_user_tags, #modal_add_user, #modal_edit_user, 
    #modal_edit_profile, #modal_edit_email, #modal_edit_password, #modal_preview, #modal_reprint_add,
    #modal_add_vacation, #modal_edit_vacation, #modal_add_unavailable
    {
        width: 99%;
        margin: auto;
        margin-top: 1%;
        left: 0;
        right: 0;
        display: none;
        position: fixed;
        z-index: 1050;
        overflow: auto;
    }

    #modal_edit_user_tags_btn_add, #modal_edit_user_tags_btn_delete
    {
        margin-right: 25px;
        width: 110px;
    }

    #modal_edit_user_tags_buttons
    {
        padding-top: 0px;
        margin: auto;
        margin-left: 15%;
        width: 100%;
    }

    #modal_delete, #modal_reserve, #modal_give_up, #modal_ask, #modal_ban_user, 
    #modal_unban_user, #modal_delete_user, #modal_change_ask_status, #modal_change_status,
    #modal_delete_vacation
    {
        width: 99%;
        min-width: 0;
        max-width: none;
        margin: auto;
        left: 0;
        right: 0;
        top: 10%;
        display: none;
        position: fixed;
        z-index: 1050;
        overflow: visible;
    }

    #modal
    {
        width: 99%;
        min-width: 0;
        margin: auto;
        left: 0;
        right: 0;
        top: 5%;
        bottom: 5%;
        display: none;
        position: fixed;
        z-index: 1050;
        overflow: visible;
        max-height: 90vh;
    }

    #modal_iptc_preview
    {
        width: 96%;
        max-width: none;
        min-width: 0;
        top: 4%;
        bottom: 4%;
        max-height: 92vh;
    }

    #modal_iptc_preview .modal-dialog,
    #modal_iptc_preview .modal-content
    {
        max-height: 92vh;
    }
}

/* Same-day booking conflict marker */
tr.day-conflict > td
{
    background-color: rgba(217, 83, 79, 0.08) !important;
    box-shadow: inset 3px 0 0 #d9534f;
}

.day-conflict-icon
{
    color: #d9534f;
    margin-right: 4px;
}

/* Capacity overview */
.capacity-table td,
.capacity-table th
{
    vertical-align: middle !important;
}

.capacity-bar
{
    display: inline-block;
    width: 90px;
    height: 8px;
    background: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.capacity-bar > span
{
    display: block;
    height: 100%;
    background: #5cb85c;
}

tr.capacity-low .capacity-bar > span
{
    background: #f0ad4e;
}

tr.capacity-full .capacity-bar > span
{
    background: #d9534f;
}

tr.capacity-full > td
{
    background-color: rgba(217, 83, 79, 0.06) !important;
}

/* Dark mode */
body.theme-dark
{
    background-color: #1a1d21;
    color: #d8dde3;
}

body.theme-dark .navbar-default
{
    background-color: #23272c;
    border-color: #2f353c;
}

body.theme-dark .navbar-default .navbar-brand,
body.theme-dark .navbar-default .navbar-nav > li > a
{
    color: #d8dde3;
}

body.theme-dark .navbar-default .navbar-nav > .active > a,
body.theme-dark .navbar-default .navbar-nav > .active > a:hover,
body.theme-dark .navbar-default .navbar-nav > .open > a,
body.theme-dark .navbar-default .navbar-nav > .open > a:hover
{
    background-color: #2f353c;
    color: #fff;
}

body.theme-dark .dropdown-menu
{
    background-color: #23272c;
    border-color: #2f353c;
}

body.theme-dark .dropdown-menu > li > a
{
    color: #d8dde3;
}

body.theme-dark .dropdown-menu > li > a:hover
{
    background-color: #2f353c;
    color: #fff;
}

body.theme-dark .section,
body.theme-dark .section-inner,
body.theme-dark .aside .section-inner,
body.theme-dark .latest .section-inner,
body.theme-dark .about .section-inner
{
    background-color: #23272c !important;
    color: #d8dde3;
    border-color: #2f353c;
}

body.theme-dark .heading,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark label,
body.theme-dark .control-label
{
    color: #eef1f4;
}

body.theme-dark .table,
body.theme-dark .table > thead > tr > th,
body.theme-dark .table > tbody > tr > th,
body.theme-dark .table > tbody > tr > td
{
    background-color: transparent;
    border-color: #2f353c;
    color: #d8dde3;
}

body.theme-dark .table-striped > tbody > tr:nth-of-type(odd)
{
    background-color: rgba(255, 255, 255, 0.03);
}

body.theme-dark .table-hover > tbody > tr:hover
{
    background-color: rgba(255, 255, 255, 0.06);
}

body.theme-dark .form-control,
body.theme-dark select.form-control,
body.theme-dark textarea.form-control
{
    background-color: #1a1d21;
    border-color: #3a4149;
    color: #eef1f4;
}

body.theme-dark .btn-default
{
    background-color: #2f353c;
    border-color: #3a4149;
    color: #eef1f4;
}

body.theme-dark .btn-default:hover
{
    background-color: #3a4149;
    color: #fff;
}

body.theme-dark .well,
body.theme-dark .well-sm,
body.theme-dark pre
{
    background-color: #1a1d21;
    border-color: #3a4149;
    color: #d8dde3;
}

body.theme-dark .modal-content
{
    background-color: #23272c;
    color: #d8dde3;
    border-color: #2f353c;
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer
{
    border-color: #2f353c;
}

body.theme-dark .close
{
    color: #fff;
    opacity: 0.7;
    text-shadow: none;
}

body.theme-dark .help-block,
body.theme-dark .text-muted
{
    color: #9aa3ad;
}

body.theme-dark tr.day-conflict > td
{
    background-color: rgba(217, 83, 79, 0.18) !important;
}

body.theme-dark .capacity-bar
{
    background: #3a4149;
}

body.theme-dark a
{
    color: #7eb6ff;
}

body.theme-dark a:hover
{
    color: #a8ceff;
}

body.theme-dark .pagination > li > a,
body.theme-dark .pagination > li > span
{
    background-color: #23272c;
    border-color: #2f353c;
    color: #d8dde3;
}

body.theme-dark .pagination > .disabled > a,
body.theme-dark .pagination > .disabled > span
{
    background-color: #1a1d21;
    border-color: #2f353c;
    color: #6c757d;
}

/* Personal feed */
.personal-feed-item
{
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.personal-feed-item.is-new
{
    background: rgba(240, 173, 78, 0.08);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Week plan */
.weekplan-table th,
.weekplan-table td
{
    vertical-align: top !important;
    font-size: 11px;
    min-width: 110px;
}

.weekplan-event
{
    margin: 2px 0;
    line-height: 1.25;
}

.weekplan-booked
{
    background: rgba(92, 184, 92, 0.1);
}

.weekplan-vacation
{
    background: rgba(128, 0, 128, 0.08);
}

.weekplan-unavailable
{
    background: rgba(119, 119, 119, 0.12);
}

body.theme-dark .personal-feed-item
{
    border-bottom-color: #2f353c;
}

body.theme-dark .weekplan-booked
{
    background: rgba(92, 184, 92, 0.18);
}