/**** START display configuration for action buttons ****/
.reject-action,
.lodge-action,
.complete-action,
.archive-action,
.workspace-action,
.finalletter-action,
.no-action
{
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    display: none;
    margin-bottom: 3px;
}
.delete-action,
.xero-action,
.adjustments-action,
.payment-receipt,
.requisition-action,
.fees-action,
.submit-action {
    display: none;
    margin-bottom: 3px;
}
.is-admin .reject-action,
.is-admin .lodge-action,
.is-admin .complete-action,
.is-admin .archive-action,
.is-admin .workspace-action,
.is-admin .finalletter-action,
.is-admin .xero-action,
.is-admin .adjustments-action,
.is-admin .requisition-action,
.is-admin .fees-action,
.is-admin .no-action {
    position: initial;
    visibility: visible;
    pointer-events: initial;
}
.draft-status .submit-action,
.draft-status .delete-action,
.submitted-status .no-action,
.lodged-status .no-action,
.completed-status .no-action,

.is-admin .draft-status .workspace-action,

.is-admin .submitted-status .delete-action,
.is-admin .submitted-status .reject-action,
.is-admin .submitted-status .lodge-action,
.is-admin .submitted-status .workspace-action,

.is-admin .lodged-status .delete-action,
.is-admin .lodged-status .reject-action,
.is-admin .lodged-status .complete-action,
.is-admin .lodged-status .xero-action,
.is-admin .lodged-status .adjustments-action,
.is-admin .lodged-status .workspace-action,

.is-admin .draft-status .requisition-action,
.is-admin .submitted-status .requisition-action,
.is-admin .lodged-status .requisition-action,

.is-admin .draft-status .fees-action,
.is-admin .submitted-status .fees-action,
.is-admin .lodged-status .fees-action,

.is-admin .completed-status .archive-action,
.is-admin .completed-status .xero-action,
.is-admin .completed-status .adjustments-action,
.is-admin .completed-status .workspace-action,
.is-admin .settlement-success-status .finalletter-action,
.is-admin .completed-status.lbl-archived .no-action {
    display: block;
}
.is-admin .submitted-status .no-action,
.is-admin .lodged-status .no-action,
.is-admin .completed-status .no-action,

.is-admin .completed-status.lbl-archived .archive-action
{
    display: none;
}

.workspace-action.workspace-data.show {
    display: block;
    visibility: visible;
    position: initial;
    visibility: visible;
    pointer-events: initial;
}

/**** END display configuration for action buttons ****/


/**** START File layout stuff ****/
    .filewrapper {
        clear:both;
    }
    .fileinfo {
        background: white;
        border-radius: 3px;
        box-shadow: 0 2px 0 0 #dadcdd;
        padding: 2px 34px 2px 5px;
        /*overflow: hidden;*/
        position: relative;
        display: inline-block;
    }
    .filetype {
        float:right;
        background: white;
        border-radius: 3px;
        box-shadow: 0 2px 0 0 #dadcdd;
        padding: 2px 5px 2px 5px;
        margin-bottom: 4px;
        overflow: hidden;
        position: relative;
        display: inline-block;
        text-transform: capitalize;
    }
    .fileinfo::before {
        content:'';
        position: absolute;
        top:0;
        left:0;
        height: 3px;
        background: lightgreen;
        transition: width .2s linear, height .2s linear, left .2s linear, right, top .2s linear, border-radius .2s linear;
    }

    .fileinfo[data-percent="100"]::before {
        transition: width .2s ease-out, height .5s ease-in, left .5s ease-in, right, top .5s ease-in, border-radius .5s ease-in;
        width:100%;
    }
    .fileinfo.done[data-percent="100"]::before {
        width: 16px;
        height: 16px;
        right: 10px;
        left: auto;
        top: 6px;
        border-radius: 12px;
        content: '';
        background: no-repeat lightgreen center url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAvElEQVQoU42LOwrCQBRFJxALtbQS3IFgaesiXIHYiJDawgVYuQc7awsbCwvLNClEXIG1CEIQZPRMvBI/GciBy5u57zxTBmvtkKzJTJUfpPkDmBfSU10MwkjyrYzcIakOxqqLwakgJZJXqv0gTSSfSVN1DruQRcO9mS1y1UGUCZ9QtklMdqSKt5B8ZITSclhMneDgfSJ3vftSvmEXsFw66Q3/PSOQ8g9CnRxeenYw0MoPUpdsyYabmuofjHkC0qHXTimUCboAAAAASUVORK5CYII=');
    }
    .fileinfo.done.del[data-percent="100"]::before {
        transition: none;
        background: red;
        top:0;
        left:0;
        right:auto;
        height:3px;
        width:100%;
    }
    .filewrapper.deleted .fileinfo::before {
        background: red;
        top:0;
        left:0;
        right:auto;
        height:3px;
        width:0;
    }

    .fileinfo.done.error[data-percent="100"]::before,
    .fileinfo.error[data-percent="100"]::before {
        width: 16px;
        height: 16px;
        right: 10px;
        left: auto;
        top: 6px;
        border-radius: 12px;
        text-align: center;
        content: 'x';
        color: white;
        background: red;
        line-height: 14px;
    }

    .filewrapper .deletebutton {
        cursor: pointer;
        border-radius: 3px;
        box-shadow: 0 2px 0 0 #5e4e46;
        background-color: #7e6e66;
        padding: 4px 5px 0 5px;
        overflow: hidden;
        position: relative;
        display: none;
        margin-left:4px;
    }

    body.is-admin .filewrapper .deletebutton,
    .draft-status .filewrapper .deletebutton {
        display: inline-block;
    }

    .filewrapper .dropdown-toggle::after {
        position: absolute;
        right: 8px;
        top: 12px;
    }


    .dropdown-toggle.dropdown-selected-display::after {
        margin-top: 9px;
        position: absolute;
        right: 8px;
        top: 12px;
    }

    .filewrapper .type-label {
        max-width: 100%;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .filewrapper .dropdown-toggle {
        padding-right:20px;
        max-width: 100%;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .filewrapper .fileinfo:hover {
        background: lightgrey;
    }
    .filewrapper .filename {
        cursor: pointer;
    }
    .filewrapper .filename .prefix {
        float: left;
        text-overflow: ellipsis;
        max-width: 69%;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
    }
    .filewrapper .filename .postfix {
        /*overflow:hidden;*/
        float: left;
        text-align: left;
        max-width: 29%;
        white-space: nowrap;
        display: inline-block;
    }
    .filewrapper .fileinfo {
        max-width: 50%;
    }
    .filewrapper {
        position: relative;
    }
    .filewrapper .fileinfo:hover:after {
        content: attr(data-filename);
        position: absolute;
        top:1px;
        left:12px;
        background: lightgoldenrodyellow;
        border:gold solid 1px;
        color: #a58127;
        padding:2px 8px;
        font-size: .9em;
        z-index: 100;
        font-style: italic;
        white-space: nowrap;
        pointer-events: none;
    }
    .filewrapper .notip.fileinfo:hover:after,
    .filewrapper .fileinfo:active:after {
        display: none;
    }
/**** END File layout stuff ****/


/**** Start general layout stuff (to be sorted/segmented) ****/
    .hidden {
        display: none;
        visibility: hidden;
    }

.commentarea {
    border-radius: 5px;
    box-shadow: 0 1px 2px 1px darkgrey;
    margin-bottom: 10px;
    background-color: white;
}
.commentarea textarea {
    padding: 6px 10px 0 10px;
    outline:none;
    border: none;
    width: 100%;
    height: 60px;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
    -webkit-appearance: none;
    margin-top: 0px;
    margin-bottom: 0px;
    resize: none;
    border-radius: 5px 5px 0 0;
}
.commentarea .commentoptions {
    height:32px;
    padding-right: 10px;
}

.bookingcard {
    background-color: #edeff0;
    border-radius: 5px;
    box-shadow: 0 3px 0 0 darkgrey;
    padding:12px;
    margin:10px;
    position: absolute;
    width: 768px;
    max-width: 100%;
}

/*Make the card float over the rest of the scene.
    1. card is pos absolute, and is centered using the left50 marginleft -25% thing...
    2. The root node for the content (form id form1) is styled as pos fixed, top = left = bottom = right = 0
    3. We _should_ have a buffer between the card and the rest of the page, which dismisses the card when clicked.
*/
.bookingcard {
    top:60px;
    left:50%;
    margin-left:-384px;
    z-index:3000;
}
.bookingcard-bg {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:2000;
}

.bookingcard .title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-right:50px;
}


#currentbooking .close {
    width: 30px;
    height: 30px;
    text-align: center;
    padding-top: 1px;
    font-size: 1.7rem;
}

.bookingtitle::after {
    content:attr(data-suffix);
}
#currentbooking .bookingtitle::before {
    content: 'Click to edit';
    font-size: 0.9rem;
    font-weight: normal;
    text-decoration: underline;
    color: darkgray;
    display: block;
}
#currentbooking .bookingtitle:focus:before {
    content:'Editing title...';
}
#currentbooking.completed-status .bookingtitle::before {
    display: none;
}

.bookingcard.loading {
    /*opacity:.66;*/
    /*pointer-events:none;*/
}
.bookingcard .loadingbar {
    display: none;
}
.bookingcard.loading .loadingbar {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    display: block;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: .8em;
}

.comment {
    border-bottom:1px solid rgba(0,0,0,0.01);
    margin-top:10px;
    padding:4px;
}
.comment .commentby .commenter {
    font-weight: bold;
    margin-left:10px;
    margin-right:10px;
}
.comment .body {
    border-radius: 5px;
    box-shadow: 0 1px 2px 1px darkgrey;
    background-color: white;
    padding:10px;
    display: inline-block;
    white-space: pre-wrap;
}
.comment.help-request .body {
    box-shadow:  0 1px 2px 1px darkgrey, inset 0 0 0 4px orange;
}
.comment.help-request.help-cleared .body {
    box-shadow:  0 1px 2px 1px darkgrey, inset 0 0 0 4px lime;
}


.bookingcard h4 {
    margin-top: 0.5em;
}


.bookingcard .booking-content {
    width:540px;
    display: inline-block;
    float:left;
    /*background: rgba(255,0,0,0.3);*/
}
.bookingcard .inventory {
    width:192px;
    display: inline-block;
    float:left;
    margin-left: 10px;
    /*background: rgba(0,0,255,0.3);*/
}

/**** End general layout stuff (to be sorted/segmented) ****/

/*** editable fields using contenteditable ***/
.editfield[contenteditable="true"]:after {
    /*content:'E';
    margin-left:12px;
    border-radius: 100%;
    background: white;
    display: inline-block;
    width: 15px;
    height:15px;*/
}
.description.editfield {
    min-height: 1.6em;
}
.description.editfield[contenteditable="true"]:after {
    display: block;
    content:'Click to edit';
    text-decoration: underline;
    color: darkgrey;
    font-weight: 400;
    font-size: 0.9em;
}
.editfield[contenteditable="true"]:focus:after {
    display:none;
}
.editfield[contenteditable="true"] {
    border-width: 1px;
    border-radius: 3px;
    border-color: transparent;
    transition: background .3s ease, border-color .3s ease;
    outline: none;
    cursor: pointer;
}
.editfield[contenteditable="true"]:focus {
    cursor: default;
    background: white;
    border-color:#dadcdd;
}
/*** end editable fields uising contenteditable ***/

/*** START dashboard layouts / columns stuff: ***/
.column {
    display:inline-block;
    max-height:calc(100% - 80px);
    width:320px;
    background:#dadcdd;
    margin:12px 6px;
    padding:7px;
    overflow: hidden;
    border-radius: 3px;
    float: left;
    max-width: 22%;
    min-width: 200px;
}
.columnInnerWrap {
    margin:0;
    padding:6px;
    overflow-y:auto;
    box-sizing: content-box;
    max-height: calc(100% - 60px);
}
.columnInnerWrap:empty {
    overflow-y:initial;
}
.columnInnerWrap:empty:after {
    content:'No files to display';
    font-style: italic;
    color: darkgrey;
}
#settlementcalendar .columnInnerWrap:empty:after {
    padding:12px;
}
.column .card-item h5 {
    margin-top:0;
    margin-bottom: 2px;
    font-size: 1em;
}
.column .card-item {
    padding:4px;
    padding-left:8px;
    background:white;
    margin-bottom:8px;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 darkgrey;
    cursor: pointer;
    transition: background .2s ease;
    position: relative;
}

.column .card-item.help_requested .helpicon,
.column .card-item.changed_since_last_view .changeicon {
    padding-bottom: 22px;
}
.column .card-item.help_requested .helpicon:after,
.column .card-item.changed_since_last_view .changeicon:after {
    content:"\f338";
    border:1px solid rgb(200,0,0);
    background: rgb(230,10,10);
    margin-right:2px;
    color:white;
    width:16px;
    height:16px;
    display: inline-block;
    border-radius: 3px;
    text-align: center;
    font-size: .9em;

    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.column .card-item.help_requested .helpicon:after {
    content:"\f16d";
    border:1px solid rgb(200,160,0);
    background: rgb(230,180,10);
}
#settlementcalendar.column .card-item.help_requested .helpicon:after,
#settlementcalendar.column .card-item.changed_since_last_view .changeicon:after {
    display:none;
}


.column .card-item.danger {
    box-shadow: inset 3px 0 0 0 var(--danger),
                inset 0 0 0 1px var(--danger),
                0 1px 0 0 darkgrey;
}
.column .card-item.warning {
    box-shadow: inset 3px 0 0 0 var(--warning),
                inset 0 0 0 1px var(--warning),
                0 1px 0 0 darkgrey;
}
.column .card-item.primary {
    box-shadow: inset 3px 0 0 0 var(--primary),
                inset 0 0 0 1px var(--primary),
                0 1px 0 0 darkgrey;
}
.column .card-item.info {
    box-shadow: inset 3px 0 0 0 var(--info),
                inset 0 0 0 1px var(--info),
                0 1px 0 0 darkgrey;
}
.column .card-item.dark {
    box-shadow: inset 3px 0 0 0 var(--dark),
                inset 0 0 0 1px var(--dark),
                0 1px 0 0 darkgrey;
}
.column .card-item.light {
    box-shadow: inset 3px 0 0 0 var(--light),
                inset 0 0 0 1px var(--light),
                0 1px 0 0 darkgrey;
}
.column .card-item.secondary {
    box-shadow: inset 3px 0 0 0 var(--secondary),
                inset 0 0 0 1px var(--secondary),
                0 1px 0 0 darkgrey;
}
.column .card-item:hover {
    background: rgb(240,242,246);
}
.column .column-footer {
    padding:12px;
}
.column .column-footer div {
    margin:2px;
}

.column .card-item .details {
    margin-top:3px;
    color:darkgray;
}
.column .card-item .details span {
    display: inline-block;
    margin-right: 8px;
}
.column .card-item .details span>i.icon {
    display: inline-block;
    margin-right:2px;
}
.column .card-item .members {
    text-align: right;
}
.column .card-item .members span {
    display: inline-block;
    margin-right: 8px;
}
#currentbooking .management .members-added .removable-face:hover:after {
    content:' ';
    position: absolute;
    top:-5px;
    left:-5px;
    right:-5px;
    bottom:-5px;
    border-radius: 100%;
    box-shadow: inset 0 0 3px 1px red;
    border:1px solid red;
    background-image: 
        linear-gradient(
            135deg, 
            transparent 0%, transparent 47%,
            red 47.1%, red 52.9%,
            transparent 53%, transparent 100%);
}


.column .card-item .progress {
    display: none;
}
#draftcolumn.column .card-item .progress {
    display: block;
}
/*** END dashboard layouts / columns stuff: ***/

#currentbooking .actions .details {
    margin-top:10px;
}
#currentbooking .actions .details>div {
    font-size: .75em;
}
#currentbooking .actions .details>h5 {
    font-size: 1.2em;
    margin-bottom: 0;
}
#currentbooking .requirements.hide-complete .list-item {
    display: none;
}
#currentbooking .requirements .toggle-hide-req,
#currentbooking .requirements.hide-complete .toggle-show-req {
    display: block;
}
#currentbooking .requirements.hide-complete .toggle-hide-req,
#currentbooking .requirements .toggle-show-req {
    display: none;
}

#currentbooking .requirements .list-item.dragover {
    background-color:white;
    box-shadow: inset 0 0 1px 1px black;
}

#currentbooking .settlementdate>input.datepicker-input {
    position: absolute;
    width: 190px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
}

#currentbooking.no-settlement .settlement-area {
    display: none;
}

#settlementdate-publicholiday {
    color:red;
    font-size: small;
    font-style: italic;
}

#currentbooking .settlement-date-label,
#currentbooking.completed-status .settlement-date-button,
#currentbooking.completed-status .add-attachment-button {
    display: none;
}
#currentbooking.completed-status .settlement-date-label {
    display:block;
}

.badge {
    margin-right:2px;
}
.badge.badge-outline {
    min-height:18px;
    background: transparent;
    border:1px solid;
    box-sizing: border-box;
}
.badge-outline.badge-primary {
    color:var(--primary);
    border-color:var(--primary);
}
.badge-outline.badge-secondary {
    color:var(--secondary);
    border-color:var(--secondary);
}
.badge-outline.badge-warning {
    color:var(--warning);
    border-color:var(--warning);
}
.badge-outline.badge-danger {
    color:var(--danger);
    border-color:var(--danger);
}
.badge-outline.badge-info {
    color:var(--info);
    border-color:var(--info);
}

#currentbooking .settime {
    cursor:pointer;
    text-decoration:underline;
    color:darkgrey;
    font-weight:400;
    font-size:0.9em;
}


.columnInnerWrap .card-item .label-area {
    display: inline-block;
}

#settlementcalendar {
    padding: 7px 0;
}
#settlementcalendar .calDay {
    overflow-y: auto;
    z-index: 550;
    display: inline-block;
    width: 303px;
    white-space: normal;
    vertical-align: top;
    height: calc(100vh - 289px);
}
#settlementcalendar .columnInnerWrap {
    padding:0;
    position: relative;
}
#settlementcalendar .calDay:nth-child(odd) {
    background-color:rgb(140,154,168);
    border: 10px solid rgb(140,154,168);
    padding-right:10px;
    border-bottom: 5px;
    margin-bottom: 5px;
    border-right:none;
    border-top:none;
    box-shadow: 0 5px 0 0 rgb(140,154,168);
    /*box-shadow: 0 10px 0 10px rgb(140,154,168);*/
}
#settlementcalendar .calDay:nth-child(even) {
    background-color:rgb(100,114,128);
    border: 10px solid rgb(100,114,128);
    padding-right:10px;
    border-bottom: 5px;
    margin-bottom:5px;
    border-right:none;
    border-top:none;
    box-shadow: 0 5px 0 0 rgb(100,114,128);
    /*box-shadow: 0 10px 0 10px rgb(100,114,128);*/
}

#settlementcalendar .card-item {
    clear:both;
}
#settlementcalendar .calDay .card-item:after {
    padding: 0 2px;
    content: attr(data-settlement-time);
    font-size: .8em;
}

#settlementcalendar .calDay .card-item>div>.badge,
#settlementcalendar .calDay .card-item>.members,
#settlementcalendar .calDay .card-item>.details {
    display: none;
}
#settlementcalendar .calDay .card-item>div>.badge.badge-outline {
    display: inline-block;
}
#settlementcalendar .calDay.collapse-day>div {
    display:none;
}
#settlementcalendar .calDay.collapse-day>div:nth-child(1) {
    display:block;
}
#settlementcalendar .calDay>div:nth-child(1) {
    cursor: pointer;
}
#settlementcalendar .calDay.collapse-day>div:nth-child(1):after {
    content:'\f280';
    font-family: "Ionicons";
    float:right;
}
#settlementcalendar .calDay>div:nth-child(1):after {
    content:'\f286';
    font-family: "Ionicons";
    float:right;
}


/*** This is the notes section where notes are added... ***/
#toggleNotesView {
    margin:2px;
    border-radius:20px;
    text-align: center;
    background-color:rgba(0,0,0,0.1);
    text-decoration: underline;
    cursor: pointer;
}
#toggleNotesView .hidenotes,
.collapsed #toggleNotesView .shownotes {
    display:block;
}
#toggleNotesView .shownotes,
.collapsed #toggleNotesView .hidenotes {
    display:none;
}

/*.collapsed .description .note {
    display: none;
}*/
/*.collapsed .description .note:nth-last-child(-n+3) {
    display: block;
}*/

.note {
    border-radius: 10px;
    border: none;
    padding: 10px;
    clear:both;
}
.description .note:after {
    content:' ';
    display: block;
    clear:both;
}

.note.self {
    clear: both;
}

.note.self .note-comment {
    background: #007bff;
    color: rgba(255,255,255,0.85);
    border-bottom-left-radius:10px;
    border-bottom-right-radius:0;
    overflow-wrap: break-word;
}
.note.self.help-request .note-comment  {
    background: #f0bb00;
    color: rgba(50,30,0,0.85);
}
.note.self.help-request.help-cleared .note-comment {
    background: #00edb0;
}


.note-comment::before {
    content: ' ';
    position: absolute;
    left: -20px;
    border: 10px solid transparent;
    width: 1px;
    height: 1px;
    border-right: 10px solid #f8f9fa;
    bottom: 0;
    border-bottom: 0px solid transparent;
}
.note.self .note-comment::before {
    border-color: transparent;
    border-left-color: #007bff;
    color: rgba(255,255,255,0.85);
    right:-20px;
    left:auto;
}
.note.self.help-request .note-comment::before {
    border-left-color: #f0bb00;
}
.note.self.help-request.help-cleared .note-comment::before {
    border-left-color: #00edb0;
}

.note.self.private .note-comment::after {
    content: 'Just Me';
    background-color: #6c757d;
    border-radius: 5px;
    color:white;
    padding-left:8px;
    padding-right: 8px;
    text-align: center;
    display: inline-block;
    width:64px;
    font-size: 0.75em;
}

.note-comment {
    position: relative;
    border-radius: 10px;
    border: none;
    padding: 10px;
    background: #f8f9fa;
    border-bottom-left-radius:0;
}

.note.self.private .note-content {
    float: right;
}
.note.self.private .note-comment {
    background: #f7f9fc;
    color: #333;
    box-sizing: border-box;
    border: 1px dashed silver;
    font-style: italic;
    border-radius: 10px;
}

.note.self .note-content .note-meta {
    text-align: right;
}

.note.self .note-content {
    text-align: left;
}

.note.self.private .note-comment::before {
    display: none;
}

.note>div {
    float: left;
}

.note.self>div {
    float: right;
}

.note .note-content .note-meta {
    font-size:.75em;
}
.note .note-content .note-meta .messagetime {
    margin-left:2em;
}

.description.editfield {
    clear: both;
}

.commentarea .btn-group-toggle .btn {
    color: rgba(255,255,255,0.8);
}
.commentarea .btn-group-toggle .btn-secondary.active {
    background: #28a745;
    color:white;
}


#commentsTab.newComments::after,
#staffNotesTab.newComments::after {
    content: attr(data-newcount);
    background: red;
    border-radius: .7em;
    color: rgba(255,255,255,0.8);
    box-shadow: 0px 2px 5px 5px rgba(0,0,0,.06);
    font-size: .8em;
    padding: .2em;
    margin-left: .4em;
}
/*** end the notes section ****/


.popover.memberlisting .popover-body {
    max-height: 400px;
    overflow-y: auto;
}


/***** requesting help dialog in front of everything: *****/
#helpMeModal+.modal-backdrop {
    z-index: 3000;
}

#helpMeModal {
    z-index: 3060;
}
/***** END requesting help dialog in front of everything *****/

/***** xero dialog in front of everything: *****/
#xeroinvoice + .modal-backdrop {
    z-index: 3000;
}

#xeroinvoice {
    z-index: 3060;
}
/***** END xero dialog in front of everything *****/

/***** Table layout for documents *****/
.doctypeRow {
    clear:both;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 3px;
}
.docname {
    display: inline-block;
}
.requirement { 
    float:right;
    color:red;
    font-size: 1.1em;
    line-height: 1em;
}
.supportingdoc-na,
.supportingdoc-add,
.supportingdoc-template {
    /*float:right;*/
    font-size: 0.9rem;
    font-weight: normal;
    text-decoration: underline;
    color: darkgray;
    display: inline-block;
    cursor: pointer;
    color: #007bff;
}
.supportingdoc-unavailable {
    font-size: 0.9rem;
    font-weight: normal;
    text-decoration: underline;
    color: darkgray;
    display: inline-block;
    color: #9b9999;
}
.supportingdoc-na {
    display: inline-block;
    margin-left:6px;
    color:#dc3545;
}
.supportingdoc-na:before {
    content:"\f367";
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    font-size: 1.2rem;
    margin-right: 3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.supportingdoc-add:before {
    content:"\f2c8";
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    font-size: 1.2rem;
    margin-right: 3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.supportingdoc-template {
    color:#258;
    margin-left:6px;
    display: inline-block;
}
.supportingdoc-template:before {
    content:"";
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    font-size: 1.2rem;
    margin-right: 3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.docList .filewrapper {
    /*width: calc(100% - 32px);*/
    max-width:auto;
}



.requirement.good:after{
    content:"\f2ba";
    color:#28a745;
}
.requirement.bad:after {
    content:"\f3a5";
    color:#dc3545;
}
.requirement.good:after,
.requirement.bad:after {
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.doctypeRow .filewrapper .fileinfo {
    max-width: unset;
    width: calc(100% - 32px);
}

.doctypeRow .filewrapper .filename .prefix {
    max-width: 86%;
}
.doctypeRow .filewrapper .filename .postfix {
    max-width: 14%;
}

.doctypeRow.dragover {
    background: rgba(0,0,0,0.1);
    box-shadow: inset 0 0 10% rgba(0,0,0,0.2);
}
/***** END Table layout for documents *****/

/****** Card lout 3-column overrides *****/
.bookinglayout {
    position: absolute;
    width:100%;
    padding-top:60px;
    justify-content: center;
    display: flex;
}
.bookingcard {
    float:left;
    position:relative;
    left: auto;
    margin-left: 0;
    top:0;
    width:700px;
}
.bookingcard .booking-content {
    width: 472px;
}
.booking-right {
    float:left;
    position: relative;
    z-index: 3000;
    width:480px;
}
.booking-left {
    float:left;
    position: relative;
    z-index: 3000;
    /*width:480px;*/
    width:480px;
}

.bookingright-content .tab-pane {
    max-height: 700px;
    overflow-y: auto;
    /*height:100%;*/

    /*height: 700px;*/
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.bookingright-content > .bookingComments {
    max-height: 700px;
    overflow-y: auto;
    /*height:100%;*/
    /*height: 700px;*/
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#checklistarea:empty:before {
    content:'No checklist available';
}

#checklistarea table>* { /* make the checklist font a bit smaller, so it _might_ fit better. */
    font-size: 0.8em;
}

#checklistarea td, #checklistarea th {
    box-shadow: inset 1px 1px 0 0 black; /* top left "borders" */
}
#checklistarea table {
    box-shadow: inset -1px -1px 0 0 black; /* bottom right "borders" */
}
.ellipsis-check {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.bookingright-content .tab-pane {
    transition: height .3s;
}

.booking-right {
    z-index: 2998;
    margin-left:0;
    transition:margin-left .4s, opacity .4s;
}
.booking-right.collapsed {
     margin-left: -480px;
     opacity: 0;
     pointer-events: none;
}
.booking-left {
    z-index: 2999;
    margin-right:10px;
    transition:margin-right .4s, opacity .4s;;
}
.booking-left.collapsed {
     margin-right: -490px;
     opacity: 0;
     pointer-events: none;
}

#nav-tab-messaging a {
    color: black;
    border-color: silver silver #dee2e6;
}
#nav-tab-messaging a.active {
    border-color: black black white;
}
/****** End Card lout 3-column overrides *****/

/****** Column collapsation ******/
.columnHeaderArea {
    cursor:pointer;
}
.columnHeaderArea>h3:after {
    float:right;
    content:"\f368";
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.collapsedColumn .columnHeaderArea>h3:after {
    float:right;
    content:"\f369";
}
.collapsedColumn .columnInnerWrap,
.collapsedColumn .column-footer {
    display: none;
}
.column {
    transition: margin-right 0.4s ;
}
.collapsedColumn {
    transform: rotate(90deg) translateY(-55px);
    transform-origin: left top 0px;
    margin-right: -259px;
}
/****** END Column collapsation ******/



/**** No cards - Welcom panel *****/
div#nocardspanel:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    height: 100%;
    border-radius: 20px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.3)), linear-gradient(0deg, rgba(255,0,0,0.04), rgba(0,0,255,0.04), rgba(0,255,100,0.04));
    box-shadow: inset 0 0 2px 1px rgba(255,0,255, 0.05), 0 10px 10px 2px rgba(0,0,0,0.15);
    background-position-x: center;
    background-size: 200%;
    background-position-y: center;
    content: '';
    z-index: 121;
}

div#nocardspanel {
    text-align:center;
    font-size:160%;
    position: absolute;
    top: 25%;
    left: 20%;
    right: 20%;
    min-height: 50%;
    z-index:12000;
    padding:20px;
}

div#nocardspanel>h1 {
    margin-top:1em;
    font-size:180%;
}

div#nocardspanel>* {
    position:relative;
    z-index:9999;
}

div#nocardspanel:before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 300px;
    background-position-x: center;
    background-size: 200%;
    background-position-y: center;
    display: block;
    background-image: url(/images/melbourne2.jpg);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    z-index:120;
}
/**** END No cards - Welcom panel *****/


/***** INVOICE AREA *****/

.invoice-header.card-header.collapsed:after {
    content: '+';
    display: inline-block;
    float: right;
    font-size: 1.3em;
    line-height: 1em;
    font-weight: normal;
}
.invoice-header>div {
    display: inline-block;
}
.invoice-area .invoice-content {
    padding:0 0.4em;
}
.invoice-header.card-header:after {
    content: '\2014';
    display: inline-block;
    float: right;
    font-weight: bold;
}

/***** End - INVOICE AREA *****/


/****** Booking card extra data fields ******/
#currentbooking .additional-fields:empty {
    display: none;
}


/**** REA stuff ****/
#realistitems {
    padding:1.2em;
}
.card.rea-card {
    max-width: 330px;
    margin-bottom: .2em;
    cursor: pointer;
    min-width: 330px;
}
#currentreabookingwrapper .bookingcard .booking-content {
    width:100%;
}
.special-actions {
    display: flex;
    justify-content: space-evenly;
}

/***** Member is active in booking *****/
.member-is-active {
    border: 5px solid green; /* temporary style, replace */
}
/***** END Member is active in booking *****/


.dashboard-signing-warning {
    background-color: yellow;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    padding: .15rem .5rem;
    margin-bottom: 1rem;
    font-weight: 300;
    display: flex;
    user-select: none;
    cursor: pointer;
    font-size: .9em;
    gap: 1rem;
    padding: .5rem;
}

.dashboard-signing-warning .iconarea {
    flex: 0 0 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-signing-warning .iconarea svg {
    width: 100%;
    height: 100%;
    filter: invert(13%) sepia(86%) saturate(7383%) hue-rotate(359deg) brightness(113%) contrast(109%);
}

.dashboard-signing-warning .infoarea {
    display: flex;
    align-items: center;
}




.note {
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    gap: .5rem; 
}

.note.self {
    justify-content: flex-end;
}

.note .note-avatar { 

}


/* FILE VIEWER */

.fileviewer-container { 
    z-index: 5000; 
    width: 100%; 
    height: 100%; 
    position: fixed;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    align-items: center; 
    background-color: rgba(0,0,0,.8);
    padding: 1rem; 
}



.fileviewer {
    background-color: #323639;
    padding: .5rem;
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;

}

.fileviewer-header {
    background-color: #323639;
    display: flex;
    flex: 0 0 3rem; 
}

.fileviewer-header > * {
    flex: 1;
    padding: 1rem;
    align-items: center;
    display: flex;
}

.fileviewer-header-left { 
    flex: 1 0 80%;
}
.fileviewer-header-right {
    flex: 0 0 5rem; 
    justify-content: right;
}

.fileviewer-body {
    background-color: white;
    height: 90vh; 
    width: 50rem; 
    flex: 1; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.fileviewer-embed { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

.fileviewer-embed img {
    width: 100%;
}


.fileviewer-btn {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 
        Not sure why Bootstrap thinks we need to make everything border-box... 
        Now I have to make box-sizing = content-box to make css behave the way I 
        expect it to. 
    */
    box-sizing: content-box;
    padding: .5rem;
    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(7410%) hue-rotate(351deg) brightness(112%) contrast(110%);
    transition: background-color .15s; 
}

.fileviewer-btn:hover {
    background-color: rgba(255,255,255,.10); 
}

.fileviewer-btn svg {
    width: 100%; 
    height: 100%; 
}

.fileviewer-close { 
    
}

.fileviewer-textbox, .fileviewer-textbox:hover, .fileviewer-textbox:focus {
    box-shadow: none;
}


.fileviewer-textbox {
    max-height: 50vh;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: .5rem; 
    transition: .3s; 
}

.fileviewer-textbox::-webkit-scrollbar {
    display: none;
}

.fileviewer-textbox.closed {
    max-height: 0px; 
    padding: 0px;
    opacity: 0; 
    overflow: hidden;
}


.fileviewer-sideview-container {
    height: 100%;
    margin-left: 1rem;
    width: 30rem; 
}

.fileviewer-message-container {
    width: 100%;
    background-color: white;
    display: flex;
    border-radius: 25px;
    flex-direction: column;
    padding: 1rem; 
}

.fileviewer-message-checkbox-container {
    cursor: pointer; 
    padding: .5rem; 
    user-select: none; 
    transition: .15s; 
    display: flex; 
}

.fileviewer-message-checkbox-container * {
    pointer-events: none; 
}

.fileviewer-message-checkbox-container:hover { 
    background-color: #ddd; 
}

.fileviewer-textbox-btn {
    color: white;
    border-radius: 15px;
    padding: .25rem 1rem;
    user-select: none; 
    cursor: pointer; 
}

.fileviewer-loader-container { 
    background-color: white; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
/* HTML: <div class="loader"></div> */
.fileviewer-loader {
    width: 35px;
    aspect-ratio: 1;
    --_g: no-repeat radial-gradient(circle closest-side,rgba(0,0,0,0.3) 98%,#ffff);
    background: var(--_g) 0 0, var(--_g) 0 100%, var(--_g) 100% 100%;
    background-size: 40% 40%;
    animation: file-viewer-loader-animation 1s infinite linear;
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    user-select: none; 
}

@keyframes file-viewer-loader-animation {
    25% {
        background-position: 100% 0,0 100%,100% 100%
    }

    50% {
        background-position: 100% 0,0 0,100% 100%
    }

    75% {
        background-position: 100% 0,0 0,0 100%
    }

    100% {
        background-position: 100% 100%,0 0,0 100%
    }
}

.fileviewer-textbox-btn {
    margin-left: .5rem; 
}

.fileviewer-textbox-sendbutton { 
    background-color: green; 
}

.fileviewer-textbox-exitbutton {
    background-color: #e74c3c;
}

.fileviewer-textbox-btn:hover {
    filter: brightness(115%);
}

.fileviewer-textbox-footer {
    display: flex;
    justify-content: end;
    padding: .5rem;
    cursor: pointer; 
}

.fileviewer-loading { 
    background-color: red; 
    height: 100%; 
    width: 100%; 
}

.fileviewer-icon-container { 
    aspect-ratio: 1; 
    width: 1rem; 
    display: flex; 
    margin-right: 1rem; 
}

.fileviewer-checklist-button {
    border-radius: 50%;
    padding: .25rem;
    aspect-ratio: 1;
    box-sizing: content-box;
}

.fileviewer-checklist-button.orange {
    --_cool-orange: #e67e22;
    background-color: orange;
}

.fileviewer-checklist-button.red {
    --_cool-red: #e74c3c;
    background-color: var(--_cool-red);
}

.fileviewer-checklist-button.green {
    --_cool-green: #2ecc71;
    background-color: green;
}

.white-svg svg, svg.white-svg {
    filter: brightness(0) saturate(100%) invert(98%) sepia(81%) saturate(7368%) hue-rotate(180deg) brightness(119%) contrast(100%);
}

.fileviewer-notification { 
    background-color: white; 
    padding: .5rem 1rem; 
    border-radius: 15px; 
    margin-bottom: .5rem; 
}

.fileviewer-notifications-container { 
    margin-top: 1rem; 
    width: 100%; 
}

/* Other */

.file-listing-btn {
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(9%) sepia(38%) saturate(2831%) hue-rotate(193deg) brightness(97%) contrast(94%);
}

.file-listing-btn.green {
    filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(4361%) hue-rotate(103deg) brightness(99%) contrast(69%);
}

.file-listing-btn:hover, .file-listing-btn.green:hover {
    filter: brightness(0) saturate(100%) invert(53%) sepia(25%) saturate(3666%) hue-rotate(97deg) brightness(104%) contrast(117%);
}


/* New Message Styling */
.note.self .note-avatar {
}

.note .note-content { 

}

.note .note-content {
    flex: 0 2 65%;
}

.note-content { 
    cursor: pointer; 
}




.message-options-panel-container { 
    width: 200px; 
    height: 200px; 
    background-color: white; 
    position: absolute; 
    z-index: 9999; 
}