.btn-default {
    background-color: rgba(12,34,63,1);
    border-color: rgba(12,34,63,1);
    color: white;
    border-radius: 50px;
}

.btn-default.active,
.btn-default:hover, .btn-default:active {
    background-color: #ff8300;
    border-color: #ff8300;
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
    color: white;
}



.nav-link-small {
    font-size: 1em!important;
}
#nav-tab-messaging > .nav-link {
    font-size: 0.8em !important;
    padding: 8px;
}


/* Columns fixes */
div#settlementcalendar.column {
    width: auto; 
    max-width: 46%; 
    display: inline-block;
    left:0;
    right:0;
    transform: left .3s, right .3s;
}
div#settlementcalendar.column .columnInnerWrap {
    overflow-y: hidden;
}
div#settlementcalendar.maximize {
    position: absolute;
    left: 20px;
    right: 20px;
    max-width: unset;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2), 
                inset 0 -12px 24px -12px, 
                0 0 40px 20px rgba(0,0,0,0.5);
}

.columnInnerWrap {
    margin: 0;
    padding: 10px;
    padding-top: 20px;
    overflow-y: auto;
    box-sizing: content-box;
    max-height: calc(100% - 60px);
}


.column > div:first-child {
    background-color: #0c223f;
    border-radius: 5px;
    padding:12px;
    color: white;
    padding: 10px;
    text-align: center;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.2);
    margin: 1px;
}
.column > div:first-child h1,
.column > div:first-child h3 {
    font-size:1.2em;
    font-weight:bolder;
    color:white;
    text-align:center;
    margin-bottom: 0px;
}
.column > div:first-child ion-icon {
    display: none;
}

.column[data-status="Completed"] > div:first-child::after,
.column#settlementcalendar > div:first-child::after {
    content:' ';
    display:block;
    clear:both;
}

.column .column-footer {
    /*min-height: 48px;*/
}

.wiz-content,
.wiz-content.control-Text {
    width: 100%;
}

/* button fixes */

.btn {
    border-radius: 25px;
}


/* card layout fixes */
#currentbooking .settlementdate-display {
    background-color: #ff8c00;
    border-radius: 0 0 15px 15px;
    padding: 6px;
    margin-top: -10px;
    padding-top: 13px;
    color: white;
    text-align: center;
}

#currentbooking .settime {
    color: white;
}

#timebandit {
    top: initial;
    left: initial;
    position: absolute;
    z-index: 2000;
    background: #0c223f;
    border: 1px solid black;
    padding: 12px;
    display: block;
}
.datepicker-dropdown:before,
.datepicker-dropdown:after {
    border-bottom-color: #0c223f;
}

.settlement-area {
    margin-bottom: 20px;
}

#currentbooking .memberlisting {
    max-width: unset;
    min-width: 230px;
}

#currentbooking .bookingtitle::before,
#currentbooking .bookingtitle:focus:before {
    display: none;
}

#currentbooking .bookingtitle {
    font-size: 2rem;
}

#currentbooking .bookingtitlearea {
    box-shadow: -10px 10px 10px -10px rgba(0,0,0,0.3);
    border-radius: 25px 0 0 25px;
    margin: -12px;
    margin-bottom: 15px;
    margin-right: -12px;
    padding-bottom: 10px;
    padding-right: 22px;
    padding-left: .8rem;
    z-index: 0;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

.badge.badge-danger.express {
    background-color: #0c223f;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.7em;
    font-size: 3rem;
    text-align: center;
    padding: 0;
    padding-top: .3rem;
    color: #ff8300;
    display: inline-block;
    float: left;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    margin-right: .8rem;
}

.badge-outline {
    border-radius: 25px;
    padding:6px 8px;
}
.badge-outline.badge-info {
    border-color: #0c223f;
    color: #0c223f;
}

.badge-outline.badge-success {
    border-color: #28a745;
    background-color: #28a745;
    color: #fff;
}

#currentbooking .bookingtitle::after {
    content: "\f2db";
    font-family: "Ionicons";
    font-size: 1rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .8rem;
    line-height: 1.2rem;
    text-align: center;
    color: white;
    display: inline-block;
    background: #0c223f;
    text-decoration: none;
    padding: 0;
    margin-left: 1rem;
    padding-top: .1rem;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    position: relative;
    top: -.3rem;
}
#currentbooking .bookingtitle:focus:after {
    content: "\f2db";
}


#currentbooking .actions.bookingheader .details>div {
    display: inline-flex;
}

#currentbooking .actions.bookingheader .details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin:0;
}
#currentbooking .actions.bookingheader .details>div>span {
    font-weight: 500;
}

#currentbooking .actions.bookingheader .details>div>span:first-child {
    font-weight: 900;
    margin-right: 5px;
}



/*.checklistbutton,
.booking-left.bookingcard {
    display: none;
}*/
.booking-left.bookingcard,
.booking-right.bookingcard {
    width:480px;
    border-radius: 0 25px 25px 0;
}
.booking-left.bookingcard {
    border-radius: 25px 0 0 25px;
}
.bookingcard {
    background-color:white;
    border-radius: 25px 0 0 25px;
    width:800px;
    box-shadow: 0 0 28px 4px rgba(0,0,0,0.4);
}
.has-checklist .bookingcard {
    border-radius: 0 0 0 0;
}
.has-checklist .bookingcard.booking-left {
    border-radius: 25px 0 0 25px;
}
.has-checklist .bookingcard.booking-right {
    border-radius: 0 25px 25px 0;
}
.bookingcard .booking-content {
    width:620px;
}
.bookingcard .inventory {
    width:145px;
}

.checklistbutton  {
    border-radius: 25px 0 0 25px;
    margin-bottom: 9px;
}

/*input[type="checkbox"].custom-control-input.disabled,*/
input[type="checkbox"].custom-control-input.disabled ~ .custom-control-label {
    opacity: 0.45;
    pointer-events: none;
}

.bookingcard>.actions {
    display: inline-flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    text-align: left;
}

#currentbooking.completed-status .settlement-date-label {
    width: 100%;
    display: inline-block;
}

.btn {
    box-shadow: 0 .15rem 0.5rem .05rem rgba(0,0,0,0.1),  0 .05rem .25rem .05rem rgba(0,0,0,0.1);
    transition: box-shadow 0.15s;
}
.btn:hover {
    box-shadow: 0 .15rem .8rem .05rem rgba(0,0,0,0.1),  0 .05rem .35rem .05rem rgba(0,0,0,0.3);
}
.btn:active {
    box-shadow: 0 .15rem .4rem .05rem rgba(0,0,0,0.1),  0 .05rem .15rem .05rem rgba(0,0,0,0.3);
}

/*.btn {
    box-shadow: 0 .3rem 1.0rem .1rem rgba(0,0,0,0.1),  0 .1rem .5rem .1rem rgba(0,0,0,0.1);
    transition: box-shadow 0.15s;
}
.btn:hover {
    box-shadow: 0 .3rem 1.6rem .1rem rgba(0,0,0,0.1),  0 .1rem .7rem .1rem rgba(0,0,0,0.3);
}
.btn:active {
    box-shadow: 0 .3rem .8rem .1rem rgba(0,0,0,0.1),  0 .1rem .3rem .1rem rgba(0,0,0,0.3);
}*/

.bookingcard .actions .workspace-id .btn,
.bookingcard .actions .workspace-manual .btn {
    background-color:white;
    border-color: white;
    color:rgba(0,0,0,0.9);
}
.card-item .details .pexaid::before,
.bookingcard .actions .workspace-id .btn::before,
.bookingcard .actions .workspace-manual .btn::before {
    content: ' ';
    display: inline-block;
    background-image: url(/assets/avatars/Pexa.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-position: top left;
    background-size: contain;
    position: relative;
    top: 2px;
    margin: -3px 5px -3px 1px;
}

.bookingcard>.actions .btn {
    display: inline-flex;
    justify-content: space-between;
}

.bookingcard>.actions .request-help .btn {
    width: 38px;
    height: 38px;
    text-align: center;
    justify-content: center;
    font-weight: bolder;
    font-size: 1.4em;
    line-height: 1em;
}




.bookingcard .actions .action-step .btn::before {
    content: '  ';
    display: inline-block;
    background-image: url(/images/logos/actionstep.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-position: top left;
    background-size: contain;
    position: relative;
    top: 2px;
    margin: -3px 5px -3px 1px;
}
.bookingcard .actions .action-step .btn {
    background-color: white;
    border-color: white;
    color: rgba(0,0,0,0.9);
}

.actionstep-inactive {
    background-color: white!important;
    border-color: white!important;
    color: rgba(0,0,0,0.9)!important;

}

}


.requirement {
    float: unset;
    display: inline-block;
}


.docname {
    font-weight: 500;
}

.filewrapper .filename {
    display: inline-block;

}
.filewrapper .fileinfo:hover,
.filewrapper .fileinfo {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    background: transparent;
    width: unset;
    box-shadow: none;
    border: none;
    border-radius: unset;
    padding: unset;
}
.filewrapper .fileinfo:hover:after {
    top: -100%;
    border-radius: 1em;
}
.filewrapper .fileinfo {
    width:unset;
}
.filewrapper .filename .prefix {
    /*max-width: calc(100% - 64px);*/
    max-width: unset;
}
.filewrapper .filename .postfix {
    max-width: unset;
}
.doctypeRow .docList {
    clear: both;
}

.fileinfo.done[data-percent="100"]::before {
    display: none;
}
.filewrapper {
    box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
    padding-left: 10px;
    border-radius: 15px;
    background: rgba(12,34,63,1);
    color: white;
    width: unset;
    font-size: 0.76rem;
    line-height: 1rem;
    margin-right: 0.2%;

    display: inline-flex;
    flex-flow: row;
    justify-content: space-between;
    padding: 4px 8px 0px 8px;
}
.filewrapper:hover {
    background-color: #ff8300;
    border-color: #ff8300;
}
.filewrapper .deletebutton {
    border-radius: 50%;
    width: 22px;
    height: 22px;
    top: -2px; 
    left: 6px;
}
    .filewrapper .issuebutton {
        font-size: large;
        border-radius: 50%;
        width: 21px;
        height: 21px;
        top: -3px;
        left: 16px;
        padding: 1px;
    }

.issuespacing{
    margin-left:10px;
}
.issuesfound{
    color:red;

}
.supportingdoc-template {
    float: right;
    font-weight: initial;
    text-decoration: none;
}
.supportingdoc-template:before {
    content: '';
    display: none;
}

.supportingdoc-add {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    text-decoration: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0px 3px 0 3px;
    float:right;
    margin-left: 2px;
}
.supportingdoc-add:before {
    position: relative;
    top: 3px;
    line-height: 0rem;
}

.doctypeRow {
    clear: both;
    background: white;
    padding: 5px 10px 5px 10px;
    margin-bottom: 10px;
    border-bottom:none;
}
.doctypeRow .fileRowHeader {
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

/* hack to make "other" files look a little different */
.doctypeRow[data-supdocname="other"] .docname {
    display: none;
}

.doctypeRow[data-supdocname="other"] .fileRowHeader {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.doctypeRow[data-supdocname="other"] .fileRowHeader::before {
    content: "Additional Documents & Attachments";
    font-size: 1.2em;
    color: #434343;
    font-weight: 800;
}
/* end hack to make "other" files look a little different */


.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;
}
.requirement.good:after {
    content: "*";
    color: #28a745;
}
.requirement.bad:after {
    content: "*";
    color: #dc3545;
}
.supportingdoc-na:before {
    display: none;
}
.supportingdoc-na {
    float:right;
    font-size: .6rem;
    font-weight: 600;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    line-height: 1.5rem;
    text-align: center;
    overflow: hidden;

    background-color: #c82333;
    border-color: #c82333;
    color: white;
    text-decoration: none;
    margin-left: 2px;
}

.bookingcard .inventory .btn {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5em;
    margin-bottom: 10px;
}
.bookingcard .inventory .members-area.btn,
.bookingcard .inventory .settlement-area .btn {
    margin-bottom: 0;
}

.priority-selection .dropdown-item.btn {
    margin-bottom:2px;
}

.bookingcard h4 {
    font-weight: 800;
    font-family: Poppins,Roboto,sans-serif;
    font-size: 1.2em;
}
.bookingcard h4:not(.card-title) {
    color: #434343;
}

.actions-left,.actions-right {
    display: inline-flex;
}

.actions-right .btn {
    margin-left: 10px;
}

.actions-left .btn {
    margin-right: 10px;
}


/* make the booking data section look better */
.field-area .input-group .form-control,
.field-area .input-group .form-control:focus,
.field-area .input-group:hover,
.field-area .input-group {
    border-radius: 0;
    box-shadow: none;
}

.field-area .input-group-text {
    background: transparent;
    color: inherit;
    font-weight: normal;
}

.field-area {
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.field-area .form-control:hover {
    background: rgba(10,15,65,0.1);
    border-radius: 0;
}

.field-area .row:first-of-type .form-control {
    border-top-right-radius: 15px;
}

.field-area .row:last-of-type .form-control {
    border-bottom-right-radius: 15px;
}

.field-area .form-control {
    background-color: white;
    transition: background-color .4s;
}
/* end make the booking data section look better */



/* end card layout fixes */


/* Form layout fixes */
.input-group-text {
    border-radius: 15px;
    background-color: #0c223f;
    border: none;
    color:white;
    font-weight: 600;
}
.form-control {
    border-radius: 15px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    border: none;
}
.form-control:hover {
    box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
}
.input-group>.form-control,
.input-group>.form-control:hover {
    box-shadow: none;
}
.input-group {
    border-radius: 15px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    border: none;
}
.input-group:hover {
    box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
}

input.form-check-input[type="radio"],
input.form-check-input[type="checkbox"] {
    display:none;
}
input.form-check-input[type="radio"]:checked+label:after,
input.form-check-input[type="checkbox"]:checked+label:after {
    background: #0c223f;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAvElEQVQoU42LOwrCQBRFJxALtbQS3IFgaesiXIHYiJDawgVYuQc7awsbCwvLNClEXIG1CEIQZPRMvBI/GciBy5u57zxTBmvtkKzJTJUfpPkDmBfSU10MwkjyrYzcIakOxqqLwakgJZJXqv0gTSSfSVN1DruQRcO9mS1y1UGUCZ9QtklMdqSKt5B8ZITSclhMneDgfSJ3vftSvmEXsFw66Q3/PSOQ8g9CnRxeenYw0MoPUpdsyYabmuofjHkC0qHXTimUCboAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

input.form-check-input[type="radio"]+label::after,
input.form-check-input[type="checkbox"]+label:after {
    content: ' ';
    display: block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #0c223f,
        0 .15rem 0.5rem .05rem rgba(0,0,0,0.1),  0 .05rem .25rem .05rem rgba(0,0,0,0.1);
    margin: 0 4px 0 2px;

}
input.form-check-input[type="radio"]:hover:checked+label:after,
input.form-check-input[type="checkbox"]:hover:checked+label:after {
    background-color: #ff8300;
}
input.form-check-input[type="radio"]+label:hover:after,
input.form-check-input[type="checkbox"]+label:hover:after {
    /*background-color: #ff8300;*/
    box-shadow: inset 0 0 0 2px #ff8300,
        0 .15rem .8rem .05rem rgba(0,0,0,0.1),  0 .05rem .35rem .05rem rgba(0,0,0,0.3);
}
input.form-check-input[type="radio"]+label:active:after,
input.form-check-input[type="checkbox"]+label:active:after {
    background-color: #ff8300;
    box-shadow: inset 0 0 0 2px #ff8300,
        0 .15rem .4rem .05rem rgba(0,0,0,0.1),  0 .05rem .15rem .05rem rgba(0,0,0,0.3);
}

.form-control option {
    background-color: #0c223f;
    border-color: #0c223f;
    color: white;
}

.form-control option:hover,
.form-control option:checked,
.form-control option:active {
    background-color: #ff8300 !important;
    border-color: #ff8300 !important;
    color: white;
}

.form-control option:disabled {
    color: darkgray;
    background: #363e4a;
}

/* end Form layout fixes */

/* background overlay */
.bookingcard-bg {
    background-image: radial-gradient(rgba(255,255,255,0.4), rgba(0,0,0,0.5), rgba(0,0,0,0.9));
    background-color: unset;
}
/* end background overlay */


/* dashboard columns fixes */
.column .card-item {
    padding: 5px;
    border-radius: 20px;
    margin: -8px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    color:#434343;
    transition: box-shadow .3s;
}
.column .card-item:hover {
    box-shadow: 0px 2px 7px rgba(0,0,0,0.4);
    background: white;
}

.column .card-item h5.bookingtitle {
    font-weight: bold;
    font-size: 0.9em;
    padding-top: 5px;
    color:#434343;
}
.column .card-item h5.bookingtitle::after {
    content: ' ';
    border-bottom: 1px solid rgba(150,150,150,0.1);
    height:0;
    line-height: 0pt;
    display: block;
    margin:8px;
    margin-left: -10px;
    margin-right: -10px;
}

.column .card-item::after {
    content: "File #"attr(data-bookingid);
    font-weight: bold;
    color:#434343;
}
/* end dashboard columns fixes */


/* dashboard card listing fixes */


#settlementcalendar .calDay .card-item>.details {
    display: flex;
}
#settlementcalendar .calDay .card-item>.details>.statusarea {
    display: none;
}

#settlementcalendar .calDay .card-item:after {
    padding: 0 2px;
    content: attr(data-settlement-time);
    font-size: .8em;
    display: block;
    text-align: center;
}

.column .card-item .label-area {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.card-item .label-area .badge {
    display: inline-flex;
    font-weight: 500;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    font-size: .75em;
}

.column .card-item .details, .card-item-footer {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    padding: 5px 5px 0 10px;
    border-top: 1px solid rgba(150,150,150,0.1);
    margin: 3px -5px 0;
}
.card-item-footer {
    padding-bottom: 5px;
    min-height: 37px;
}

.card-item-id {
    font-weight: 700;
    display: inline-flex;
    margin-bottom: -10px;
}

.column .card-item::after {
    display: none;
}

.column .card-item .details {
    color:#384a62;
    font-weight: 700;
    border-top: none;
    margin-top: 0;
}

.card-item .badge.status {
    margin-left: .2rem;
    margin-right: .2rem;
    display: inline-flex;
    align-items: center;
    padding: 0;
    width: 1.4em;
    height: 1.4em;
    border-radius: 2em;
    font-size: 108%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.column .card-item.help_requested .helpicon:after, .column .card-item.changed_since_last_view .notify:after {content: "\f338";font-family: "Ionicons";}

.card-item .badge.expressstatus::after {
    content: "\f2f1";
    font-family: "Ionicons";
}

.card-item .badge.expressstatus {
    background-color: #0c223f;
    color: #ff8300;
}

.column .card-item .card-item-id,
.column .card-item h5.bookingtitle {
    font-size: 1em;
}

.column .card-item.help_requested .help:after {
    content: "?";
    font-weight: 700;
}

.badge-warning {
    color: white;
    background-color: #ff8300;
    border-color: #ff8300;
}

.column .card-item .members {
    display: inline-flex;
    justify-content: flex-end;
    flex-flow: wrap;
}

.card-item .members span {
    display: inline-flex;
}

.column .card-item .members span .avatar {
    display: inline-flex;
}

.card-item .pexaid:empty {
    display: none;
}

.btn-white {
    background: white;
}

.card-item .pexaid {
    font-size: 60%;
    /* max-width: 50px; */
    max-height: 20px;
    font-size: 11px;
    font-weight: 800;
    padding: 0 4px;
    margin: 2px 0px;
}

.card-item .label-area .doctype {
    max-width: 62%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-item .badge.status {
    display: none;
}

#settlementcalendar .calDay .card-item.help_requested .badge.status.help,
#settlementcalendar .calDay .card-item.changed_since_last_view .badge.status.notify,
#settlementcalendar .calDay .card-item.is_express .badge.status.expressstatus,
.card-item.help_requested .badge.status.help,
.card-item.changed_since_last_view .badge.status.notify,
.card-item.is_express .badge.status.expressstatus {
    display: inline-flex;
}

.card-item .btn-group .btn.avatar,
.card-item .btn-group .btn.avatar:first-child,
.card-item .btn.avatar,
.card-item .avatar {
    width: 26px;
    height: 26px;
    margin-left:-4px;
}

/* end dashboard card listing fixes */

/* comments/messaging fixes */
.note-comment {
    background: #0c223f;
    color: white;
    word-wrap: break-word;
    word-break: break-word;
}

.note-content {
    position: relative;
}




.note.self .note-comment {
    background: #ff8300;
    color: white;
}

.note.self .note-comment::before {
    border-left-color: #ff8300;
}

.note-comment::before {
    border-right-color: #0c223f;
}

.otheraddresslist li.btn-default {
    border-radius: 0;
    margin: 0;
    padding: 4px 10px;
    cursor: pointer;
}

/* end comments/messaging fixes */

/* utility */
.dropdown-toggle.dropdown-selected-display::after {
    margin-top: 9px;
    float: right;
}
/* end utility */


/* popups */
.modal-header,
.alertify .ajs-header,
.ajs-header {
    font-weight: bold;
    color: white;
    background: #0c223f;
}

.modal-header .close {
    color:white;
}
/* end popups */


body.dashboard {
    /* padding-top: 56px; */
    background-image: url(/images/dash-bg2.jpg);
}

.sticky-offset {
    top: 56px;
}

#body-row {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}

#sidebar-container {
    min-height: 93vh;
    background-color: rgba(12,34,63,1);
    padding: 0;
}

.side-nav-item {
    background-color: rgba(12,34,63,1)
}

.nav-logo {
    width: 130px;
    height: 40px;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}

.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: rgba(12,34,63,1);
    height: 35px;
    padding-top: 10px;
}

.sidebar-separator {
    background-color: rgba(12,34,63,1);
    height: 25px;
}

.logo-separator {
    background-color: rgba(12,34,63,1);
    height: 60px;
}

.navbar a:hover {
    color: white !important;
}

.dropdown-toggle,
.dropdown-menu {
    background-color: rgba(12,34,63,1);
    border-color: rgba(12,34,63,1);
    color: white;
}

.dropdown-item {
    color: white;
}

    .dropdown-item:hover {
        background: rgba(255,131,0,1);
        color: white;
        border-radius: 25px;
    }

.btn.btn-light.dropdown-item.filter-dropdown-item {
    color: white;
}

.btn.btn-light.dropdown-item.filter-dropdown-item:hover {
    background: #ff8300;
    color: white;
    border-radius: 25px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f0d7";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f0da";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}


.navbar {
    background:
}

.list-group-item-action:focus, .list-group-item-action:hover {
    background: rgba(12,34,63,1);
}

.custom-card {
    /*box-shadow: 0px 1px 20px rgba(0,0,0,0.2);*/
    border: none;
}

.list-group-item {
    border: none;
}

#nav-tab-messaging {
    width: 100%;
    display: flex;
    border: none;
}
#nav-tab-messaging>.nav-link {
    font-size:1.3em;
    font-weight:700;
    color:#212529;
    display: inline-flex;
    flex-grow: 1;
    justify-content: center;
    border-radius: 0;
    background-color: white; /*#0c223f;*/
    border-color: white; /*#0c223f;*/
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
}
#nav-tab-messaging>.nav-link:first-child {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
#nav-tab-messaging>.nav-link:last-child {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

#nav-tab-messaging>.nav-link.active {
    background-color: #0c223f;
    border-color: #0c223f;
    color: white;
}
#nav-tab-messaging>.nav-link:hover,
#nav-tab-messaging>.nav-link:active,
#nav-tab-messaging>.nav-link:focus {
    background-color: #ff8300;
    border-color: #ff8300;
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
    color: white;
}

.btn-primary,
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    border-radius: 50px;
}

.btn-danger {
    color: white;
    border-color: #c82333;
    background-color: #c82333;
    border-radius: 50px;
}

.btn-warning {
    color: white;
    border-color: #ff8300;
    background-color: #ff8300;
    border-radius: 50px;
}

.btn-warning:hover, .btn-warning:active {
    color: white;
    background-color: #ffc107;
    border-color: #ffc107;
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
    border-radius: 50px;
}

.btn-danger:hover, .btn-danger:active {
    background-color: #c82333;
    border-color: #c82333;
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
    color: white;
    border-radius: 50px;
}

.btn-accent {
    color: white;
    border-color: #ff8300;
    background-color: #ff8300;
    border-radius: 50px;
}

    .btn-accent:hover {
        color: white;
        border-color: #ffa03d;
        background-color: #ff8300;
        border-radius: 50px;
    }

.forgotpasslink {
    font-weight: bold !important;
}




#startBbookingWizardDocType {
    border-radius: 15px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    border: none;
}


textarea:focus,
input[type="text"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
{
    border-color: rgba(126, 239, 104, 0);
    /* give your style */
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    /* give your style */
    outline: 0 none !important;
    /* give your style */
}



textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover,
.uneditable-input:hover {
    border-color: rgba(126, 239, 104, 0);
    /* give your style */
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    /* give your style */
    outline: 0 none !important;
    /* give your style */
}

select:focus,
textarea:focus {
    outline-color: transparent;
}

select:focus,
text-area:focus {
    box-shadow: none;
}



.form-control-label {
    font-weight: bold;
}

.required {
    color: #c82333;
}

.v-center {
    vertical-align: middle !important;
}

.table thead th {
    border-top: none;
}

.btn-outline-light {
    color: white;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,1);
}

    .btn-outline-light:hover {
        color: white;
        font-weight: bold;
        border: 1px solid white;
        background: #ff8300;
    }

.dash-col {
    border-radius: 15px;
    border: none;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2)
}

.dash-card {
    border-radius: 15px;
    border: none;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2)
}

.dash-card-header {
    background-color: white !important;
    border-radius: 15px !important;
    padding: 5px 5px 5px 10px !important;
    font-size: 14px;
}

.accent-color {
    color: #ff8300;
}

/* spinner from bootstrap */
@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
input[data-fieldname="TitleParticulars"]+div {
    position: relative;
    display: inline;
}
.spinner-border+div {
    position: relative;
}
.spinner-border+div:after {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
    content: '';
    position: absolute;
    left: -2.6rem;
    top: .4rem;
}
.group>.spinner-border+div:after {
    top:0;
    left:-2rem;
}
/* end spinner from bootstrap */



/**************** Navbar profile settings dropdown animation ****************************/

@media (min-width: 992px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }

    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

/*
  .side-nav-item.list-group-item.list-group-item-action.flex-column.align-items-start:focus,
  .list-group-item.list-group-item-action.side-nav-item.text-white:focus,
  .side-nav-item.list-group-item.list-group-item-action:focus {
    color: #ff8300 !important;
  }
  */



/*********************** Login CSS ***********************/

.login-block {
    background: #0c223f; /* fallback for old browsers */
    float: left;
    width: 100%;
    border-radius: 25px !important;
    box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
}

.banner-sec {
    background-size: cover;
    min-height: 500px;
    border-radius: 0px 25px 25px 0px !important;
    padding: 0;
}

.container-login {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
}

.carousel-inner {
    border-radius: 0 10px 10px 0;
}

.carousel-caption {
    text-align: left;
    left: 5%;
}

.login-sec {
    padding: 50px 30px;
    position: relative;
    background-color: white;
    border-radius: 25px 0px 0px 25px;
}

    .login-sec .copy-text {
        position: absolute;
        width: 80%;
        bottom: 20px;
        font-size: 13px;
        text-align: center;
    }

        .login-sec .copy-text i {
            color: #FEB58A;
        }

        .login-sec .copy-text a {
            color: #E36262;
        }

    .login-sec h2 {
        margin-bottom: 15px;
        font-weight: 800;
        font-size: 30px;
        color: #0c223f;
        text-align: center;
    }

        .login-sec h2:after {
            content: " ";
            width: 100px;
            height: 5px;
            background: #ff8300;
            display: block;
            margin-top: 10px;
            border-radius: 3px;
            margin-left: auto;
            margin-right: auto
        }

.btn-login {
    background: #DE6262;
    color: #fff;
    font-weight: 600;
}

.banner-text {
    width: 70%;
    position: absolute;
    bottom: 40px;
    padding-left: 20px;
    background-color: rgba(0,0,0,0.5)
}

    .banner-text h2 {
        color: #fff;
        font-weight: 600;
    }

        .banner-text h2:after {
            content: " ";
            width: 100px;
            height: 5px;
            background: #FFF;
            display: block;
            margin-top: 20px;
            border-radius: 3px;
        }

    .banner-text p {
        color: #fff;
    }





.btn-default-split {
    background-color: rgba(12,34,63,1);
    border-color: rgba(12,34,63,1);
    color: white;
}

.btn-default-split:hover {
    background-color: #ff8300;
    border-color: #ff8300;
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
    color: white;
}


/*Set the row height to the viewport*/
.row-height {
    height: 78vh;
}

/*Set up the columns with a 100% height, body color and overflow scroll*/

.left, .mid, .right {
    height: 100%;
    overflow-y: scroll;
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ff8300;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #ffa444;
    }


* {
    -ms-overflow-style: none !important;
}

.calDay > div:first-child {
    background-color: #0c223f;
    border-radius: 15px;
    color: white !important;
}

#settlementcalendar .calDay:nth-child(odd) {
    padding-left: 10px !important;
    border: none !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    background: #dadcdd !important;
}

#settlementcalendar .calDay:nth-child(even) {
    padding-left: 10px !important;
    border: none !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    background: #cecece !important;
}



.columns {
    display: flex;
    max-height: calc(100% - 40px);
    overflow-x: auto;
}

.column {
    max-height: calc(100% - 40px);
    width: 320px;
    background: #dadcdd;
    padding: 10px 15px 15px 15px !important;
    border-radius: 20px !important;
    float: left;
    max-width: 26%;
    min-width: 320px;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1), inset 0px -10px 20px rgba(0,0,0,0.5);
}

.search_results_box {
    top: 56px !important;
}











.job-type-badge {
    border: 1px solid #0c223f;
    background-color: none;
    color: #0c223f;
    padding: 5px;
}





.btn-danger.deletebutton {
    border-color: #c82333 !important;
    background: #c82333 !important;
    color: white !important;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.3) !important;
}

    .btn-danger.deletebutton:hover {
        background-color: #ff0019 !important;
        border-color: #ff0019 !important;
        box-shadow: 0px 0px 15px rgba(0,0,0,0.3) !important;
    }



.btn-danger.issuebutton {
    border-color: #fcff00 !important;
    background: orange !important;
    color: white !important;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.3) !important;
}

    .btn-danger.issuebutton:hover {
        background-color: #f8a246 !important;
        border-color: #ff0019 !important;
        box-shadow: 0px 0px 15px rgba(0,0,0,0.3) !important;
    }



#noteinput:hover, #noteinput:active, #noteinput:focus {
    box-shadow: none !important;
}

.supporting-doc-upload, .primary-doc-upload {
    padding: 5px;
    border-radius: 25px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}

.modal-content {
    border: none;
    box-shadow: 0px 0px 20px rgba(0,0,0,1);
}

.navbar.navbar-light.navbar-expand-lg {
    margin-top: 10px !important;
}

.contact-textbox {
    resize: none;
}

#commentInput:hover,
#commentInput:focus,
#commentInput:active {
    box-shadow: none !important;
}




.RadComboBox.RadComboBox_Bootstrap {
    width: 65% !important;
}


.bookinglayout {
    padding-top: 30px !important;
}
/* .supportingdoc-add {
    background: black;
    color: white !important;
    padding: 5px;
    border-radius: 10px;
    text-decoration: none !important;
}
    */

    

    .fileinfo:hover {
        cursor: pointer;
    }



.bookingtitle, .label-area, .details, .members {
    padding-left: 5px;
    padding-right: 5px;
}




.btn-pexa {
    background: white;
    color: black;
    padding: 5px;
    border-radius: 25px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}



.big-header {
    font-size: 2rem !important;
    font-weight: bold;
}

* {
    font-size: 100%;
    font-family: Poppins,Roboto,sans-serif;
}

label {
    margin-bottom: 0px !important;
}

textarea.no-resize {
    resize: none;
}

/*    EDITING RADGRID STUFF    */

.RadGrid_Bootstrap .rgRow > td, .RadGrid_Bootstrap .rgAltRow > td {
    border-style: none !important;
}

.RadGrid_Bootstrap .rgHeader, .RadGrid_Bootstrap th.rgResizeCol, .RadGrid_Bootstrap .rgHeaderWrapper, .RadGrid_Bootstrap .rgMultiHeaderRow th.rgHeader, .RadGrid_Bootstrap .rgMultiHeaderRow th.rgResizeCol {
    border-left: none !important;
}

.rgMasterTable {
    /*box-shadow: 0px 1px 20px rgba(0,0,0,0.2) !important;*/
    border: none !important;
    font-size: small;
}

.RadGrid_Bootstrap {
    border: none !important;
}

td, .rgHeader {
    padding: 10px !important;
}


.user-table {
    box-shadow: none !important;
}

.form-control:focus {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    border: none;
}

.commentarea,
.commentarea:hover, .commentarea:focus, .commentarea:active,
textarea,
textarea:hover, textarea:focus, textarea:active {
    border-color: rgba(126, 239, 104, 0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    border-radius: 15px;
    /*padding: 5px;*/
    /*margin: 0 5px 10px 5px;*/
}
#currentbooking .commentarea>textarea,
.commentarea textarea:hover,
.commentarea textarea:focus,
.commentarea textarea:active {
    padding: 5px;
    border:none;
    box-shadow: none;
    outline: 0 none;
    border-radius: 15px 15px 0 0;
}

.commentsection {
     margin: 20px 6px;
}
.commentarea {
    margin: 10px 6px;
}

.commentarea .btn {
    font-weight: 700;
}

/*.collapsed .description .note {
    display: block;
}*/

/* messaging visibility toggles */
.bookinglayout .booking-right { /* collapsed by default */
    margin-left: -480px;
    opacity: 0;
    pointer-events: none;
}

.bookinglayout.show-messages .booking-right { /*expanded when parent has show-messages class*/
    margin-left: 0;
    opacity: 1;
    pointer-events: unset;
}

.bookinglayout .booking-left { /* collapsed by default */
    margin-left: -480px;
    opacity: 0;
    pointer-events: none;
}
.bookinglayout.show-checklist .booking-left { /*expanded when parent has show-messages class*/
    margin-left: 0px;
    opacity: 1;
    pointer-events: unset;
    display: block;
}

.staffNotesButton {
    transition: border-radius 0.3s;
    border-radius: 0 25px 25px 0;
    margin-bottom: 9px;
}
.bookinglayout.show-messages .staffNotesButton {
    border-radius: 0;
}


.checklistbutton {
    transition: border-radius 0.3s;
    border-radius: 25px 0 0 25px;
    margin-bottom: 9px;
}
.bookinglayout.show-checklist .checklistbutton {
    border-radius: 0;
}


/* end messaging visibility toggles */


/*** New flow wizard stuff ***/
.addtab,
.tab {
    font-weight: 800;
    font-size: 1.2em;
    padding: 0.5em 1em;
    border-radius: 15px;
    margin: 0.25em 0;
}

.tab {
    background-color: white;
    border-color: white;
    color: rgba(12,34,63,1);
}
.tab.active {
    background-color: rgba(12,34,63,1);
    border-color: rgba(12,34,63,1);
    color: #ff8300;
}

.tab>.btn {
    margin-left: 10px;
}


.wiz-control.form-control {
    display: inline-block;
    /*width: 30%;/* Just default, but maybe bad idea...*/
}

select.wiz-control.form-control {
    width:auto;
    max-width: 100%;
}


.wiz-content {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

.wiz-content>* {
    margin-top: 10px;
    margin-bottom: 0px;
    max-width: 100%;
}

.wiz-content.tab-content {
    display: block;
    width: auto;
}

.inline-header, .inline-options {
    display: inline-flex;
    padding-right: 20px;
}

.inline-header.inline-header-bold {
    font-weight: bold;
}

.inline-options>span {
    padding-right: 10px;
}

.inline-options input.form-check-input[type="radio"]+label::after,
input.form-check-input[type="checkbox"]+label::after {
    display: inline-flex;
    border-radius: 12px;
    margin-left: 12px;
    position: relative;
    top: .3em;
}

.control-Panel {
    margin-left: 0px;
}

.control-Panel .control-Panel {
    padding-left: 30px;
}
.control-Panel h5, .control-Panel h4 {
    margin-bottom: 0;
}

.distribution-sum,
.distribution-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.numerator.is-invalid {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2), inset 0 0 0 1px red;
    color:red;
}

.distribution-item select {
}
.sumRow .partySelected, .sumRow .numerator, .sumRow .denominator {
    width: 94px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 15px;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    display: block;
    box-sizing: content-box;
    border: 1px solid transparent;
}

.group {
    margin-right: 10px;
}
.group input.form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

.group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-right: 0;
}

.form-group.title-list {
    width: 100%;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
}

/*.note {
    font-style: normal;
}*/
.note.note-info {
    color: #ff8300;
}
.note.note-danger {
    color: #c82333;
}
.note.note-success {
    color: #28a745;
}


.inline-checklist {
    flex-wrap: wrap;
    display: inline-flex;
}

.inline-checklist>span {
    flex-basis: 30%;
}

.inline-checklist.c1>span { flex-basis:100%; }
.inline-checklist.c2>span { flex-basis: 50%; }
.inline-checklist.c3>span { flex-basis: 33%; }
.inline-checklist.c4>span { flex-basis: 25%; }

.overseas-panel {
    width:100%;
}
.overseas-panel>* {
    width:100%;
    display: flex;
}

.addressrow {
    width: 100%;
    display: flex;
}

.notice-warning {
    border-radius: 15px;
    padding: 10px;
    background: #ff8300;
    color: white;
}

.custom-switch .custom-control-label.labeltext {
    padding-left: 2rem;
    line-height: 2.25rem;
}

.text-row {
    display: flex;
    width: 100%;
}
.text-row>label {
    width: 25%;
}
.text-row .form-control {
    width: 100%;
}
.control-DatePicker {
    width: 100%;
}
.control-DatePicker .row {
    width: 50%;
}


.text-row input.form-control {
    max-height: 2.25rem;
}
.option-panel {
    width:100%;
}
.wizardContainer {
    width: 100%;
}
.control-TextArea {
    width: 100%;
}

.title-list input {
    max-width: 180px;
    margin-right: 10px;
}

.distribution-item input {
    width: 80px;
    margin-left: 10px;
    margin-right: 10px;
}
.distribution-item input.item-name {
    width: 100%;
}

.itemRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.itemBreak {
    flex-basis: 100%;
    margin-bottom: 14px;
}

.wiz-content.control-Heading {
    margin: 0;
}

.page-tracker {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    width: 100%;
}
.page-tracker>.page-btn {
    flex: 1;
}

.form-control.validation {
    padding-right: calc(1.5em + .75rem);
}
.form-control.validation.is-valid1 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.validation.is-invalid1 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.validation.is-invalid2 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fbc93e' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fbc93e' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/*** end New flow wizard stuff ***/


/* hacks */

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.column {
    background: #eee;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2), inset 0 -12px 24px -12px;
}


.urgency-dropdown {
    background-color: white;
    border-color: white;
    color: #333;
}
.urgency-dropdown.dropdown-toggle.dropdown-selected-display::after {
    top:0;
}

/* ---- Item List Wizard layout ---- */
.item-list>.group {
    display: flex;
    margin-bottom: 8px;
}

.control-TextList>.form-group>.form-control,
.item-list>.group>.list-item {
    border-radius: 15px 0 0 15px;
}

.control-TextList .item-list {
    width: 100%;
    display: block;
}

.control-TextList>.form-group {
    width: 100%;
    display: flex;
}
.control-TextList>.form-group>.btn {
    border-radius: 0 15px 15px 0;
}
/* ---- end Item List Wizard layout ---- */

/* ---- Jurisdiction State Selector ----- */

#states a path {
    transition: fill .5s ease;
    -moz-transition: fill .5s ease;
    -webkit-transition: fill .5s ease;
    fill: #ff8300;
}

#states a:hover path {
    transition: fill .5s ease;
    -moz-transition: fill .5s ease;
    -webkit-transition: fill .5s ease;
    fill: #ff6a00 !important;
}

#states a:hover path {
    cursor: pointer;
    fill: #425957;
}

#states a text {
    cursor: pointer;
    fill: #222222;
    display: initial;
}

#states a:hover text {
    fill: #EAEAEA;
    color: #EAEAEA;
}

#states a.inverse text:hover {
    fill: #ff6a00;
}

#states a.inverse text {
    fill: #222222;
}

.CCMcredit a {
    color: #81AC8B;
}

#states a text {
    font-size: 18pt;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


/* edit button for workspace ID */
.edit-workspace:hover {
    background-color: #0069d9;
    border: 1px solid #0062cc;
}
.edit-workspace:after {
    content: 'Edit';
}
.edit-workspace {
    position: absolute;
    right: -1px;
    top: -1px;
    bottom: -1px;
    background-color: #28a745;
    border: 1px solid #28a745;
    color: #fff;
    border-radius: 0;
    overflow: hidden;

    left: 100%;
    padding: 0 0;
    opacity: 0%;

    transition: left 0.3s, padding 0.15s, opacity 0.3s, border-radius 0.15s;
}
*:hover>.edit-workspace {
    left:60%;
    border-radius: 15px;
    padding: 0 10px;
    opacity: 100%;
}
/* end edit button for workspace ID */

/* Ensure people can tell a booking is deleted when viewing it */
#currentbooking .bookingtitlearea.deleted {
    background-color: #c82333;
    color: rgba(255,255,255,0.9);
}

#currentbooking .bookingtitlearea.deleted .title.editfield.bookingtitle:before {
    content: '(CANCELLED)';
    display: inline-block;
    font-size:inherit;
    font-family:inherit;
    color:inherit;
    text-decoration:inherit;
    font-weight:inherit;
}
/* Ensure people can tell a booking is deleted when viewing it */


/*** Make Express cards stand out more ***/
.column .card-item.is_express {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2),
                inset 0 0 0px 2px rgba(255,0,0,0.9);
}
.column .card-item.is_express:hover {
    box-shadow: 0px 2px 7px rgba(0,0,0,0.4),
                inset 0 0 0px 2px rgba(255,0,0,0.9);
}
/*** END Make Express cards stand out more ***/


/****** hacks to disable editing for stuff we don't want edited *****/

/** HIDE elements: **/
body.noedit div.btn.btn-success,
body.noedit .edit,
body.noedit .supportingdoc-add,
body.noedit .supportingdoc-na,
body.noedit .members-area,
body.noedit .request-help,
body.noedit .bookingcard>.actions,
body.noedit .members-added .popover-body .btn-danger,
body.noedit .filewrapper .deletebutton,
body.noedit #currentbooking .bookingtitle::after
{
    display: none;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/** Disable elements: **/
body.noedit .management>div>div[onclick="alterJurisdiction();"],
body.noedit .management>div>.priority-selection,
body.noedit .management .settlement-area *,
body.noedit .management .settlementdate *,
body.noedit .management .settlementdate-display *,
body.noedit #currentbooking .bookingtitle
{
    pointer-events: none;
}

/****** end hacks to disable editing for stuff we don't want edited *****/

/**** Xero Badge ****/
div#xerobutton[data-count]:not([data-count="0"]):after {
    content: attr(data-count);
    margin-left: 10px;
    border-radius: 5px;
    background-color: #ff8300;
    padding: 0 4px;
    font-size: smaller;
}
/**** end Xero Badge ****/



/****** List frequent contacts *****/
.contact-list-area {
    position: absolute;
    margin-top: 50px;
    z-index: 200;
}

.contact-list {
    background: white;
    border: 1px solid lightblue;
    width: 500px;
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
}

.contact-item {
    cursor: pointer;
    padding: 4px 8px;
}

.contact-item:hover {
    background: #ff8300;
    color: white;
}
/****** end List frequent contacts *****/


/***** Make individual buttons have loading / waiting animations: ******/
.btn.working:after {
    content: '';
    position: absolute;
    left: 0;
    background-image: 
        radial-gradient(rgba(255,255,255,0.66) 20%, transparent 20%),
        radial-gradient(rgba(255,255,255,0.66) 10%, transparent 10%);
    right: 0;
    top: 0;
    bottom: 0;
    background-size: 32px 32px;
    background-position: 0 0, 16px 0;
    animation: working 1s ease infinite;
}

.btn.working {
    position: relative;
}
.btn.disabled {
    pointer-events: none;
}

@keyframes working {
    0% { background-position: 0 0, 16px 10px }
    50% { background-position: 16px 10px, 32px 0 }
    100% { background-position: 32px 0, 48px 10px }
}
/***** end Make individual buttons have loading / waiting animations: ******/


/**** Notification icons and animations *****/
.note.note-icon-info:before {
    content: 'i';
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #ff8300;
    text-align: center;
    color: white;
    font-weight: bold;
    margin-right:12px;
}

.note.pulse-icon:before {
    animation: pulse;
    animation-iteration-count: infinite;
    animation-duration: .7s;
}

@keyframes pulse {
    0% {
        transform:scale(1.4) rotate(4deg);

    }
    25% {
        transform:scale(1.2) rotate(-4deg);
        
    }
    50% {
        transform:scale(1) rotate(4deg);
    }
    75% {
        transform:scale(1.2) rotate(-4deg);
        
    }
    100% {
        transform:scale(1.4) rotate(4deg);
    }
}
/**** END  Notification icons and animations *****/


/**** Flip card to show workspace status stuff: *****/
/* /**** This stuff that's commented out was for flipping the main booking card... not good. ***
.bookingcard {
    transition: all .3s ease;
  transform-style: preserve-3d;
}
.bookingcard.flipped {
    transform: rotate3d(0, 1, 0, 180deg);
    border-radius: 0 25px 25px 0;
}
.booking-body-summary {
    transition: opacity .3s ease-out;
    backface-visibility: hidden;
  transform: rotateY(180deg);
  display: none;
  background-color: white;
}
.booking-body {
    transition: opacity .3s ease-out;
    backface-visibility: hidden;
}
.bookingcard.flipped .booking-body {
    display: none;
}
.bookingcard.flipped .booking-body-summary {
    display: block;
}

.bookingcard.flipped .labels,
.bookingcard.flipped>.actions,
.bookingcard.flipped .bookingtitlearea {
    transform: rotate3d(0, 1, 0, 180deg);
}

#currentbooking .bookingcard.flipped .close {
    transform: rotate3d(0, 1, 0, 180deg);
    float: left;
}*/


.booking-right.bookingcard {
    transition: transform .25s linear;
}
.booking-right.bookingcard.flip-to-normal,
.booking-right.bookingcard.flip-to-status {
    transform: rotate3d(0,1,0,90deg);
}
.booking-right.bookingcard.show-status {
    /*background-color:aliceblue;*/
}

.booking-right.bookingcard.show-status .bookingright-content {
    display:none;
}
.booking-right.bookingcard .bookingright-status {
    display:none;
}

.booking-right.bookingcard.show-status .bookingright-status {
    display:block;
}

#flipper {
    position: absolute;
    right:15px;
}

.bookingright-status.booking-content {
    max-width: 100%;
}

.booking-right .nav.nav-tabs#nav-tab-messaging {
    width: 80%;
}
.booking-right .bookingright-status.booking-content .heading-main {
    margin-bottom: 1.2em;
}

.booking-right.show-status #flipper:before {
    content: 'Messaging';
}
.booking-right #flipper:before {
    content: 'Status';
}

/**** END Flip card to show workspace status stuff: *****/
/**** Lender Invite stuff: *****/
.text-row input.form-control.invite-sent {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: calc(100% - 220px);
}
.invite-sent+.invite-indicator {
    background-color: rgba(12,34,63,1);
    border-radius: 0 36px 36px 0;
    display: inline-block;
    width: 220px;
    height:36px;
    color: white;
    padding-top: 6px;
    text-align: center;
}
.invite-sent+.invite-indicator:after {
    content: 'Invite Sent';
}

.invite-sent.invite-accepted+.invite-indicator {
    background-color: #28a745;
}
.invite-sent.invite-accepted+.invite-indicator:after {
    content: 'Invite Accepted';
}
.invite-sent.invite-rejected+.invite-indicator {
    background-color: #c82333;
}
.invite-sent.invite-rejected+.invite-indicator:after {
    content: 'Invite Declined';
}
.invite-sent.invite-failed+.invite-indicator {
    background-color: #c82333;
}
.invite-sent.invite-failed+.invite-indicator:after {
    content: 'Unable to Invite';
}
/**** END Lender Invite stuff: *****/

/***** START Auto-complete stuff: *****/
input+.autocomplete {
    display: none;
}

input:focus+.autocomplete, .autocomplete.show {
    display: block;
    width: 100%;
    background: white;
    box-shadow: 0 0 12px rgba(0,0,0,0.3);
    border-radius: 8px;
    max-height: 100px;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    z-index: 99;
}

.autocomplete>.option {
    background: #0c223f;
    color: white;
    padding: 4px 10px;
    cursor: pointer;
}

.autocomplete>.option:hover {
    background: #ff8300;
}
/***** END Auto-complete stuff: *****/

/***** Start booking status tab stuff *****/
.card-header[data-toggle="collapse"]:after {
    content: "\2716";
    display: inline-block;
    float: right;
    line-height: 0em;
    margin-top: -1em;
}
.card-header.collapsed[data-toggle="collapse"]:after {
    content: '\25BC';
}
.card-header>h4 {
    margin: 0;
}


#participantsList>.row[data-toggle="collapse"]:after {
    content: "-";
    position: absolute;
    right:4px;
}
#participantsList>.row[data-toggle="collapse"].collapsed:after {
    content: "+";
}
/***** END booking status tab stuff *****/

/***** Wizard UI alignment fixes ****/
.wiz-content .inline-header {
    min-width: 24%;
}

.wiz-content>.form-group {
    width: 100%;
}

.wiz-content>.text-row>label {
    min-width: 24%;
}
/***** END Wizard UI alignment fixes ****/

/***** Make filter fit multiple lines ****/
#navbarNav>ul.nav.navbar-nav.flex-row {
    max-width: 38%;
}

#navbarNav>ul.nav.navbar-nav.flex-row li {
    overflow-wrap: anywhere;
}

ul#filters {
    flex-wrap: wrap;
}

#navbarNav>ul.nav.navbar-nav.flex-row #filters li .nav-item {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

li#applyFilterButton {
    max-height: 38px;
}
/***** END Make filter fit multiple lines ****/


/***** Display fixes for Final Letter form display ****/
#inputformforfinalletter .form-group {
    width: 48%;
    display: inline-block;
    margin-left: 0.5%;
    margin-right: 0.5%;
}
.ajs-modal .ajs-auxiliary .alert, 
.ajs-modal .ajs-auxiliary .symbol1, 
.ajs-modal .ajs-auxiliary .symbol2 {
    display: inline-block;
    margin-right: 1em;
}

.ajs-modal .ajs-auxiliary .alert:empty:after {
    content: '-';
}

.ajs-modal .ajs-auxiliary .alert.balanceDue:before {
    content: 'Balance Due: ';
}


.ajs-modal .ajs-auxiliary .alert.sourceTarget:before {
    content: 'Source: ';
}


.ajs-modal .ajs-auxiliary .alert.destTarget:before {
    content: 'Dest: ';
}

.ajs-modal .source-items>.row, .dest-items>.row {
    padding-top:6px;
    padding-bottom:0px;    
    border-bottom:1px solid rgba(0,0,0,0.1);
}

.ajs-modal .source-items>.row:nth-child(odd), .dest-items>.row:nth-child(odd) {
    /*background: rgba(0,0,0,0.04);*/ /** If we want alternating colour backgrounds **/
}
.ajs-modal .source-items>.row:last-child, .dest-items>.row:last-child {
    background:transparent;
    border-bottom:none;
}


.overflow-hidden {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.row[data-toggle="collapse"]>.overflow-hidden {
    white-space: initial;
    text-overflow: initial;
    overflow-x: initial;
}

.row.collapsed[data-toggle="collapse"]>.overflow-hidden {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
/***** END Display fixes for Final Letter form display ****/

/***** Update Delete Button to say "Restore" when booking is deleted *****/
#currentbooking .bookingcard.deleted .actions .delete-action .btn::after {
    content: 'Restore';
    font-size: initial;
    color: rgba(255,255,255,0.95);
}
#currentbooking .bookingcard.deleted .actions .delete-action .btn {
    font-size: 0px;
    color: transparent;
}
/***** END Update Delete Button to say "Restore" when booking is deleted *****/

/***** Search Result Cards with Status Edge and Hover *****/
.card-item.s_Draft {
    box-shadow: inset -260px 0px 0px -250px rgb(165 160 200), 
    0px 0px 5px rgb(0 0 0 / 20%);
}
.card-item.s_Draft:hover {
    box-shadow: inset -260px 0px 0px -250px rgb(165 160 200), 
    0px 2px 7px rgb(0 0 0 / 40%)
}
.card-item.s_Draft:hover:before {
    content: 'Draft';
    position: absolute;
    display: block;
    color:white;
    font-weight:bold;
    top: 0;
    right: 0;
    background: rgba(165,160,200,.9);
    border-radius: 5px;
    padding: 3px 10px;
padding-right: 16px;
    border-top-right-radius: 20px;
    
}

.card-item.s_Submitted {
    box-shadow: inset -260px 0px 0px -250px rgb(65,90,250), 
    0px 0px 5px rgb(0 0 0 / 20%);
}
.card-item.s_Submitted:hover {
    box-shadow: inset -260px 0px 0px -250px rgb(65,90,250), 
    0px 2px 7px rgb(0 0 0 / 40%)
}
.card-item.s_Submitted:hover:before {
    content: 'Submitted';
    position: absolute;
    display: block;
    color:white;
    font-weight:bold;
    top: 0;
    right: 0;
    background: rgba(65,90,250,.9);
    border-radius: 5px;
    padding: 3px 10px;
padding-right: 16px;
    border-top-right-radius: 20px;
    
}


.card-item.s_Lodged {
    box-shadow: inset -260px 0px 0px -250px rgb(65 180 190), 
    0px 0px 5px rgb(0 0 0 / 20%);
}
.card-item.s_Lodged:hover {
    box-shadow: inset -260px 0px 0px -250px rgb(65 180 190), 
    0px 2px 7px rgb(0 0 0 / 40%)
}
.card-item.s_Lodged:hover:before {
    content: 'Lodged';
    position: absolute;
    display: block;
    color:white;
    font-weight:bold;
    top: 0;
    right: 0;
    background: rgba(65,180,190,.9);
    border-radius: 5px;
    padding: 3px 10px;
padding-right: 16px;
    border-top-right-radius: 20px;
    
}


.card-item.s_Completed {
    box-shadow: inset -260px 0px 0px -250px rgb(25 235 96), 
    0px 0px 5px rgb(0 0 0 / 20%);
}
.card-item.s_Completed:hover {
    box-shadow: inset -260px 0px 0px -250px rgb(25 235 96), 
    0px 2px 7px rgb(0 0 0 / 40%)
}
.card-item.s_Completed:hover:before {
    content: 'Completed';
    position: absolute;
    display: block;
    color:white;
    font-weight:bold;
    top: 0;
    right: 0;
    background: rgba(25, 235, 96, .9);
    border-radius: 5px;
    padding: 3px 10px;
padding-right: 16px;
    border-top-right-radius: 20px;
    
}





/*** Express versions ****/
.card-item.is_express.s_Draft {
    box-shadow: 
    0px 0px 5px rgb(0 0 0 / 20%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(165 160 200);

}
.card-item.is_express.s_Draft:hover {
    box-shadow: 
    0px 2px 7px rgb(0 0 0 / 40%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(165 160 200);
}
.card-item.is_express.s_Submitted {
    box-shadow: 
    0px 0px 5px rgb(0 0 0 / 20%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(65,90,250);

}
.card-item.is_express.s_Submitted:hover {
    box-shadow: 
    0px 2px 7px rgb(0 0 0 / 40%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(65,90,250);
}
.card-item.is_express.s_Lodged {
    box-shadow: 
    0px 0px 5px rgb(0 0 0 / 20%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(65 180 190);

}
.card-item.is_express.s_Lodged:hover {
    box-shadow: 
    0px 2px 7px rgb(0 0 0 / 40%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(65 180 190);
}
.card-item.is_express.s_Completed {
    box-shadow: 
    0px 0px 5px rgb(0 0 0 / 20%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(25 235 96);

}
.card-item.is_express.s_Completed:hover {
    box-shadow: 
    0px 2px 7px rgb(0 0 0 / 40%), inset 0 0 0px 2px rgb(255 0 0 / 90%),
    inset -260px 0px 0px -250px rgb(25 235 96);
}
/***** END Search Result Cards with Status Edge and Hover *****/

/***** New file listing styles *****/

.category-area {
    margin-left: 2em;
}
.category-area.no-margin {
    margin-left: 0;
}
.category-area.no-margin .category-title {
    margin-left: 0;
}
.category-area .category-title {
    margin-left: -2em;
}
.file-item {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: baseline;
}
.file-item .prefix {
    overflow-x: hidden;
    text-overflow: ellipsis;
    flex-flow: nowrap;
    white-space: nowrap;
}
.file-item .postfix {
    flex-flow: nowrap;
}
.file-item .actions {
    flex-flow: nowrap;
}
.attachments>.card {
    margin-bottom: 10px;
}
.bookingcard .card-header {
    border-radius: 15px 15px 0 0;
}
.bookingcard .card {
    border-radius: 15px;
}
.bookingcard .card-header.collapsed {
    border-radius: 15px 15px 15px 15px;
}
.bookingcard .card .area {
    margin: 4px 10px;
}
.bookingcard .card .file-na {
    display: none;
}
.bookingcard .card .category-na>div.category-title::after {
    content: 'N/A';
    border-radius: 1.5em;
    height: 3em;
    width: 3em;
    background: #c82333;
    color: white;
    font-size: 50%;
    display: inline-block;
    position: absolute;
    text-align: center;
    padding-top: .75em;
    margin-left: 1em;
}
.no-margin .file-item {
    padding: 0;
}


.file-row .filewrapper {
    max-width: calc(100% - 32px);
    cursor: pointer;
}

.file-row {
    max-width: 100%;
    /*line-height: 1.6em;
    min-height: 1.6em;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin-bottom: 3px; 
    overflow-y: hidden; 
}
.file-row .btn {
    display: inline-block;
    padding: 0;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    top: -2px;
    left: 6px;
}
.file-row .file-actions {
    transition: opacity 0.15s ease-in;
    opacity: 0;
    display: flex; 
    align-items: center; 
    gap: 4px; 
}
.file-row:hover {
    /*box-shadow: inset 0 0 10px 1px rgba(222,222,222,0.6);*/
    background-color: rgba(0,0,0,.1); 
}
.file-row:hover .file-actions {
    opacity: 100%;
}
.file-actions>i {
    font-style: normal;
}


.filewrapper.fileinfo:hover:after {
    content: attr(data-filename);
    position: absolute;
    bottom: 102%;
    left: 0%;
    background: lightgoldenrodyellow;
    border: gold solid 1px;
    border-radius: 20px;
    color: #a58127;
    padding: 2px 8px;
    font-size: .9em;
    z-index: 100;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
}

.filewrapper.fileinfo.dragging:hover:after, 
.filewrapper.fileinfo.notip:hover:after {
    display: none;
}


.group-default {
    background-color: rgb(98 123 147);
    border-color: rgb(98 123 147);
    color: white;
    border-radius: 50px;
}

.group-default.active,
.group-default:hover, .group-default:active {
    background-color: rgba(12,34,63,1);
    border-color: rgba(12,34,63,1);
    box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
    color: white;
}

.card-title.inline {
    display: flex;
    font-weight: 800;
    font-family: Poppins,Roboto,sans-serif;
    font-size: 1.2em;
    margin-bottom: 0;
    padding: 4px;
}

.header-container {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-right: 2em;
}

.btn.btn-default.uploads {
    display: flex;
}

.header-container .ecafbutton,
.header-container .financialButton {
    margin-right: 4px;
}

.header-container .ecafbutton, .header-container .uploads,
.header-container .financialButton {
    border: 1px solid white;
    border-radius: 15px;
    padding: 3px 14px;
    position: relative;
    height: 30px;
}
.header-container .groupAreaButtons {
    display: inline-flex;
}

.header-container .ecafbutton:hover,
.header-container .uploads:hover,
.header-container .financialButton:hover {
    background-color: #ff8300;
}
.uploads .upload-stuff {
    position: absolute;
    background: white;
    border-radius: 15px;
    right: 0;
    top: 100%;
    border: 1px solid rgba(12,34,63,1);
    z-index: 999;
    padding: 4px 10px;
    color: black;
    margin-top: 4px;
    min-width: 360px;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.uploads.expand .upload-stuff {
    display: block;
}

.uploads .upload-stuff .upload-option {
    display: block;
    text-align: left;
    padding: 0 20px;
    margin: 0;
    margin-bottom: 1px;
}
.upload-option.mandatory:after {
    content: '*';
    color: #fa4231;
    font-weight: 900;
    font-size: 1.3em;
    line-height: 1em;
}

.upload-option:drop {
    background-color: #ff8300;
    border-color: #ff8300;
    box-shadow: 0px 1px 7px rgb(0 0 0 / 50%);
    color: white;
}

.require {
    margin-left: 3px;
    position: relative;
}
.require:before {
    border-radius: 10px;
    width: 20px;
    height: 20px;
    display: inline-block;
    content: '\d7';
    color: white;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    background-color: #c82333;
}
.require:hover:after {
    content: attr(data-name);
    background-color: black;
    position: absolute;
    z-index: 1000;
    color: white;
    border-radius: 20px;
    min-height: 20px;
    left: 0;
    padding: 4px 20px;
    bottom: 100%;
    font-size: 16px;
    font-weight: normal;
    white-space: nowrap;
}
.require.done:before {
    background-color: #28a745;
    content: '\2713';
}
.group-requirements {
    display: flex;
}


/******** review todo ************/

.require:before {
    background-color: transparent;
    content: '\2713';
    color: white;
    box-shadow:inset 0 0 0 2px white;
}

.require.pending:before,
.require.done:before,
.require.problem:before {
    box-shadow:none;
}

.require.pending:before {

    background-color: #ff8300;
    content: '\2713';
    color: white;
}


.require.problem:before {
    background-color: #c82333;
    content: '!';
    font-size:16px;
    color: white;
}

.group-requirements {
    margin-left: 10px;
}

.doc-group-area .card-header {
    padding-top: 5px;
    padding-bottom: 5px;
}
/******** review todo ************/
.file-row>.filenameandstatus>.require {
    display: inline-block;
}

.file-row>.filenameandstatus>.require:before {
    color: #0c223f;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #0c223f;
}

.file-row>.filenameandstatus>.require.verified:before {
    color: white;
    font-weight: bold;
    box-shadow: none;
    background-color:#28a745;
}

.file-row>.filenameandstatus>.require.problem:before {
    color: white;
    font-weight: bold;
    box-shadow: none;
    content: '!';
    background-color:#c82333;
}

.file-row>.filenameandstatus>.require:hover:after {
    display:none;
}
.file-row>.filenameandstatus {
    max-width: 80%;
    width: 100%;
    display: flex; 
}

.option-row.mandatory .upload-option {display: block;}
.option-row .markNA {
    display: inline-block;
    margin-left: 10px;
    border-radius: 20px;
    text-align: left;
    padding: 0 10px;
    margin-bottom: 1px;
    color: white;
}
.option-row .markNA:hover {
}

.option-row {
    display: flex;
}
/***** END New file listing styles *****/
/******* fix workspace id button to work on draft pages as well *****/
#currentbooking .workspace-id.show,
#currentbooking .workspace-manual.show {
    display: block;
}
/******* end fix workspace id button to work on draft pages as well *****/

.refresh-status {
    padding: 0;
    margin-left: 10px;
    width: 20px;
    height: 20px;
    line-height: 22px;
}

.bookingtitle>span.badge {
    font-size: 100%;
}

.wiz-content.control-Hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/******* Ecaf integration stuff *****/
.document-review-area {
    display: flex;
}

.review-left-column {
    width: 20%;
}
.review-right-column {
    width:80%;
}

.review-display {
    background: #888;
    height: 640px;
    overflow: scroll;
}

.review-file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #0c223f;
    border-radius: 20px;
    padding: 2px 12px;
    color: rgba(255,255,255,0.94);
    margin: 2px;
    cursor: pointer;
}

.review-file:hover {
    background-color: #ff8300;
}

.review-file.active {
    background-color: hsl(200deg 36% 49%);
}
.review-display-tools {
    display: flex;
    justify-content: space-between;
}

.zoom-panel {
    display: flex;
    justify-content: space-between;
    width:25%;
    vertical-align: middle;
    line-height:37px;
}

.document-review-area .review-display .page {
    transform-origin: top left;
}
/******* end Ecaf integration stuff *****/

/******* fss status details stuff ******/
#fssList .col-3.currency[title^="$"]:last-child {
    text-align: right;
    padding-left: 0;
    right: 0;
}

#fssList .col-3.currency[title^="$"]:last-child:before {
    content: '$';
    text-align: left;
    float: left;
    clear: both;
}

#fssList .col-3.currency[title^="$"]:last-child:after {
    content: ' ';
    position: relative;
    top: 6px;
    left: 3px;
    float: right;
    border-radius: 10px;
    width: 8px;
    height: 8px;
    background-color: grey;
    overflow: hidden;
    border: 1px solid black;
    display: none;
}
#fssList .col-3.currency.fundsready[title^="$"]:last-child:after {
    background-color: rgb(100,255,200);
    display: initial;
}
#fssList .col-3.currency.fundsnotready[title^="$"]:last-child:after {
    background-color: rgb(255,100, 100);
    display: initial;
}
#fssList .section-header .col-3.currency[title^="$"]:last-child:after {
    display: none;
}

#fssList .col-3.currency.alert-success[title^="$"]:last-child {
    padding-left: 7.5px;
    padding-right: 0;
}

#fssList .row[data-section]:nth-child(odd) {
    box-shadow: inset 1000px 1000px rgb(0 0 0 / 5%);
}



#fssList {
    overflow-x: hidden;
}

#fssList .row.section-header {
    font-weight: bold;
    margin-top:12px;
    box-shadow:none !important;
}
#fssList .row.section-header:nth-child(2) {
    margin-top:0;
}

#fssList .row.section-header[data-section$="VENDOR"] {
    background-color: rgb(255,220,129);
}
#fssList .row[data-section$="VENDOR"] {
    background-color: rgb(255,245,200);
}


#fssList .row.section-header[data-section$="PURCHASER"] {
    background-color: rgb(165,195,255);
}
#fssList .row[data-section$="PURCHASER"] {
    background-color: rgb(225,245,255);
}

#fssList .row:last-child {
    margin-bottom: 12px;
}
/******* end fss status details stuff ******/
/******* status workspace acceptance ******/
#fssList .row.section-header {
    cursor: pointer;
}
#fssList .row.section-header .col-6::after {
    content: '\2212';
    float: left;
    position: relative;
    font-size: 1.1em;
    margin-top: -0.05em;
    margin-bottom: -0.5em;
    margin-right: 5px;
}

#fssList .row.section-header.min .col-6::after {
    content: '\002B';
}
#fssList .row.itemdetails {
    font-size: 12px;
}
#fssList .row.expandable {
    cursor:pointer;
}
#fssList .row.expandable .col-6::after {
    content: '\2BC8';
}
#fssList .row.expandable.expanded .col-6::after {
    content: '\2BC6';
}
/*#participantsList div:last-child span.badge::after {
    background-color: transparent;
    content: ' ';
    color: #28a745;
    display: inline-block;
    border-radius: 8px;
    width: 10px;
    height: 10px;
    margin-left: 2px;
    font-size: 10px;
    position: relative;
    box-shadow: inset 0 0 0px 2px white;
}

#participantsList div:last-child span.badge.badge-success.Accepted::after {
    background-color: white;
    content: '\2713';
    box-shadow: none;
}*/
/******* end status workspace acceptance ******/

/******* Make linked parties to pexa obvious *******/
.wiz-content.linkedtopexa .pexaLinkButton {
    /*content: 'Linked to pexa';*/
    border: 1px solid black;
    border-radius: 20px;
    height: 20px;
    font-size: 13px;
    background: #444;
    color: white;
    padding: 0 10px;
    cursor: pointer;
}

.wiz-content.linkage {
    opacity: 1;
    pointer-events: initial;
    position: initial;
}

/*When there is a difference with pexa data, we need to identify it using the following: */
.wiz-content input.pexa-diff,
.wiz-content select.pexa-diff {
    box-shadow: 
        0px 0px 5px rgb(0 0 0 / 20%), 
        inset 0 0 0 2px rgb(195, 19, 167);
}
.wiz-content .pexa-diff {
    position: relative;
}
.wiz-content div.pexa-diff {
    background: rgb(195, 19, 167);
    font-size: 0.75em;
    color: white;
    border-radius: 1em;
    padding: 0 14px;
    margin-top: -0.75em;
    display: inline-block;
    position: relative;
    line-height: 1.2em;
    height: 1.4em;
    cursor: pointer;
}
.wiz-content div.pexa-diff:hover {
    background: rgb(225, 19, 167);
}
div.linkage.linkedtopexa div.partylinkoptionarea.pexapartyselector {
    display: none;
}
/******* end Make linked parties to pexa obvious *******/

/*** Make the feedback button look ok ***/
.feedbackbutton {
    position: fixed;
    right: 0px;
    top: 60%;
    background-color: rgb(0, 123, 255);
    border-radius: 5px 5px 0px 0px;
    text-orientation: mixed;
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 16px 6px 16px;
    z-index: 9999;
    cursor: pointer;
    font-size: 12pt;
    font-weight: bold;
    transform: rotate(-90deg) translate(0, 44px);
}

/*** end Make the feedback button look ok ***/

/*** Highlighting fields for bulk input creation process ***/
.bulk-value-data,
.bulk-value-required {
    display: none !important;
}

/*** end Highlighting fields for bulk input creation process ***/

/*** Financial Input Form ***/
#financialData>.row>.col-1,
#financialData>.row>.col-2,
#financialData>.row>.col-3,
#financialData>.row>.col-4,
#financialData>.row>.col-5,
#financialData>.row>.col-6,
#financialData>.row>.col-7,
#financialData>.row>.col-8,
#financialData>.row>.col-9,
#financialData>.row>.col-10,
#financialData>.row>.col-11,
#financialData>.row>.col-12 {
    padding-right: 4px;
    padding-left: 4px;
}
/*** End Financial Input Form ***/


/*****  Transform hiding settlment schedule day into a list view instead  *****/
div#settlementcalendar.column .columnInnerWrap{
    /* position:relative; */
}
#settlementcalendar .calDay.collapse-day {
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
}
#settlementcalendar .calDay.collapse-day .card-item {
    display:block;
    padding-bottom:2px;
    padding-top:2px;
    margin-top:-16px !important;
    margin-bottom:16px !important;
    border-radius:0;
    box-shadow:none;
}
#settlementcalendar .calDay.collapse-day .card-item.is_express {
    box-shadow: inset 0 0 0px 1px rgba(255,0,0,0.9);
}
#settlementcalendar .calDay.collapse-day .card-item:hover {
    display:block;
    padding-bottom:2px;
    padding-top:2px;
    margin-top:-16px !important;
    margin-bottom:16px !important;
    border-radius:0;
    box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.1);
    background-color:rgb(240,243,245);
}
#settlementcalendar .calDay.collapse-day .card-item:nth-child(odd) {
    background:rgb(245,248,250);
}
#settlementcalendar .calDay.collapse-day .card-item.is_express {
    box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.15), inset 0 0 0px 1px rgba(255,0,0,0.9);
}
#settlementcalendar .calDay.collapse-day .card-item .label-area {
    margin-bottom:0px !important;
    padding-bottom:0px !important;
    
}
#settlementcalendar .calDay.collapse-day .card-item .card-item-footer:after,
#settlementcalendar .calDay.collapse-day .card-item * {
    font-size:10pt !important;
    font-weight:normal !important;
}

#settlementcalendar .calDay.collapse-day .card-item>div,
#settlementcalendar .calDay.collapse-day .card-item .label-area .badge.doctype {
    display: inline-block !important;
    line-height:0.5em;
}

#settlementcalendar .calDay.collapse-day .card-item .label-area .badge.badge-danger.notify.status {
    width: 18px !important;
    /*padding-top: -4px;*/
}
#settlementcalendar .calDay.collapse-day .card-item .label-area .badge {
    /*display: none !important;*/
}

#settlementcalendar .calDay.collapse-day .card-item h5 {
    display:inline-block;
}

#settlementcalendar .calDay.collapse-day .card-item:after {
    display:inline-block;
    font-weight:normal;
    float:right;
}

#settlementcalendar .calDay.collapse-day .card-item .bookingtitle {
    width:25%;
    overflow-x:hidden;
    text-wrap:nowrap;
    text-overflow:ellipsis;
    overflow-y:hidden;
}

#settlementcalendar .calDay.collapse-day .card-item .label-area,
#settlementcalendar .calDay.collapse-day .card-item .card-item-footer {
    display:inline-block;
    /* float:left; */
    width:8%;
    overflow-x:hidden;
}
#settlementcalendar .calDay.collapse-day .card-item .label-area {
    width:10%;
}
#settlementcalendar .calDay.collapse-day .card-item .label-area .badge {
    width:auto;
}

#settlementcalendar .calDay.collapse-day .card-item .details {
    display:inline-block;
    float: right;
    width:10%;
}

#settlementcalendar .calDay.collapse-day .card-item .card-item-footer {
    border-width:0;
    margin:0;
    padding:0;
    line-height:1.5em;
    min-height:initial;
    overflow-x:hidden;
    text-wrap:nowrap;
    text-overflow:ellipsis;
    float:left;
    overflow-y:hidden;
}


#settlementcalendar .calDay.collapse-day .card-item .bookingtitle {
    border-bottom:none;
    margin:0;
    padding:0;
    width: 12%;
}
#settlementcalendar .calDay.collapse-day .card-item .bookingtitle:after {
    display:none;
}

#settlementcalendar .calDay.collapse-day .card-item .pexaid {
    margin-top:-4px;
    float:right;
}

#settlementcalendar .calDay.collapse-day .card-item .members {
    display:none;
}

#settlementcalendar .calDay .card-item .checkitems {
    display: none;
}
#settlementcalendar .calDay.collapse-day .card-item .checkitems {
    display: inline-block;
}

#settlementcalendar .calDay .card-item .checknotes {
    display: none;
}
#settlementcalendar .calDay.collapse-day .card-item .checknotes {
    display: inline-block;
    padding-left: 1em;
    max-width: 25%;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    line-height: 1em;
}

.badge.checkitem {
    display: inline-block;
    line-height: 0.5em;
    height: 0.5em;
    /*width: 0.5em;*/
    overflow: hidden;
    text-align: center;
}
.badge.checkitem:before {
    content: '\00a0\00a0\00a0';
    padding: 0;
    margin-left: -4px;
    width: 12px;
    display: inline-block;
}
.badge.checkitem.checked:before {
    content: '\2713\00a0';
}


#bookingdescription {
    border-radius: 15px;
    box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.15);
    min-height: 100px;
    max-height: 500px;
    overflow: auto;
    padding: 15px;
}
.highlight {
    color: red;
    background-color: yellow;
    font-weight: bold;
}
/***** END  Transform hiding settlment schedule day into a list view instead  *****/
/***** START soa form layout helpers *****/
.soa-form-target .soadatarow .row {
    margin-bottom: 10px;
}
.soa-form-target .fieldvalue {
    text-align: right;
}
.soa-form-target .sectionheader {
    margin-top: 10px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: bold;
}
.soa-form-target .bold {
    font-weight: bold;
}
/***** END soa form layout helpers *****/

/**** START Allow other team members to be on the right as well:  ***/
.note.self.other .note-comment {background: rgba(12,34,63,1);}
.note.self.other .note-comment::before {
    border-left-color:rgba(12,34,63,1);
}
/**** END Allow other team members to be on the right as well:  ***/


body.nooverflow {
    overflow: hidden !important;
}



.cs-badge-error {
    background-color: orange !important;
    color: white !important;
    border: 1px solid orange !important; 
}