:root {
    --text-color        : #202020;
    --text-light        : #f6f6f6;
    --available         : #E9B209;
    --available-light   : #FBF5D5;
    --unavailable       : #C93C4E; /*#DC939E;*/
    --unavailable-light : #F4D7DB; /*#F0F0F0;*/
    --published         : #55B12B;
    --published-light   : #DDEFD4;
    --declined          : #C93C4E;
    --declined-light    : #F4D7DB;
    --pending           : #3E85E8;
    --pending-light     : #D8ECFB;
    --quickfill         : #9446B9;
    --quickfill-light   : #E9D8F1;
    --openshift         : #818181;
    --openshift-light   : #e3e3e3;
    --agency-color      : #202020;
    --grey              : #818181;
    --lightish-grey     : #e3e3e3;
    --light-grey        : #f6f6f6;
    --invited           : #C234C1;
    --interested        : #FF8C4B;

}

.shift-popup {
    color : var(--text-color);
}

.text-error, 
.fa.text-error:before {
    color : var(--unavailable);
}

.shift-content .text-light,
.shift-popup .text-light {
    color : var(--grey);
}

.d-flex {
    display: flex !important;
}
.shift-content .shift-calendar .picker-calendar.picker-modal-inline {
    height : 320px;
}
.shift-content .shift-calendar .picker-modal .picker-modal-inner {
    height : 100% !important;
}
.android .shift-content .shift-calendar .picker-modal .picker-modal-inner {
    height: calc(100% - 48px * 1) !important;
    padding-bottom: 36px;
}
.shift-content .navBlock {
    background: #fff;
    margin-top: 0;
    padding: 0 1.5em;
}

.shift-content a.row.shift-link {
    color: var(--text-color);
    font-weight: lighter;
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    padding: 10px 0;
    border-bottom: var(--light-grey) 1px solid;

    display: flex;
    align-items: center;
}

.shift-content a.row.shift-link > div{
    display: flex;
    align-items: center;
}

.shift-content a.row.shift-link i.fa {
    font-size: 20px;
}

.shift-content .billboard-block {
    padding : 40px 0;
}
.shift-content .billboard-block .billboard-block__text {
    color: var(--text-color);
}
.shift-content pre {
    font-family: Lato;
}
#shiftDate {
    display: none;
    padding: 20px 0;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
}

.shift-content h3 {
    font-weight: lighter;
    font-size: 30px;
    margin : 10px 0;
}

/* no idea why it's got toolbar-hidden? */
.picker-calendar .toolbar.toolbar-hidden {
    margin-bottom: 20px;
    display: block !important;
}

#monthName {
    line-height: 1.2em;
    font-size: 1.4em;
    text-align: center;
    font-weight: 700;
}

.shift-content a.link .fa {
    color : var(--lightish-grey);
}

.picker-calendar-day.picker-calendar-day-today span {
    background : var(--text-light);
    color : var(--text-color);
}

.picker-calendar-day.picker-calendar-day-selected.-unselected span {
    background : transparent !important;
    color: var(--text-color);
}
.picker-calendar-day.picker-calendar-day-selected span,
.picker-calendar-day.-selected span {
    background : var(--agency-color);
    color: #fff !important;
    font-weight: bolder;
}
.picker-calendar-day.-selected span:after {
    display: none !important;
}

.available-or-not {
    padding-top: 1em;
    font-size: 1.2em;
}
.available-or-not .fa {
    font-size: 20px;
    padding-right: 5px;
}
.available-or-not small {
    font-size: .8em;
    line-height: 1.5em;
    display: block;
    color: var(--grey);
}

.picker-calendar-day.-available:not(.picker-calendar-day-selected) span:after,
.picker-calendar-day.picker-calendar-day-prev.-available span:after, 
.picker-calendar-day.picker-calendar-day-next.-available span:after {
    background: var(--published);
    color: #fff;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    margin-left: -2px;
    left: 50%;
    bottom: 1px;
}
.picker-calendar-day.-unavailable:not(.picker-calendar-day-selected) span:after,
.picker-calendar-day.picker-calendar-day-prev.-unavailable span:after, 
.picker-calendar-day.picker-calendar-day-next.-unavailable span:after {
    background: var(--unavailable);
    color: #fff;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    margin-left: -2px;
    left: 50%;
    bottom: 1px;
}
.picker-calendar-day.-accepted:not(.picker-calendar-day-selected) span:after,
.picker-calendar-day.picker-calendar-day-prev.-accepted span:after, 
.picker-calendar-day.picker-calendar-day-next.-accepted span:after {
    background: var(--published);
    color: #fff;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    margin-left: -2px;
    left: 50%;
    bottom: 1px;
}
.picker-calendar-day.-declined:not(.picker-calendar-day-selected) span:after,
.picker-calendar-day.picker-calendar-day-prev.-declined span:after, 
.picker-calendar-day.picker-calendar-day-next.-declined span:after {
    background: var(--declined);
    color: #fff;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    margin-left: -2px;
    left: 50%;
    bottom: 1px;
}
.picker-calendar-day.-pending:not(.picker-calendar-day-selected) span:after,
.picker-calendar-day.picker-calendar-day-prev.-pending span:after, 
.picker-calendar-day.picker-calendar-day-next.-pending span:after {
    background: var(--available);
    color: #fff;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    margin-left: -2px;
    left: 50%;
    bottom: 1px;
}
.shift-content a.align-right {
    display: block;
}


.button.button-available,
.button.button-unavailable ,
.button.button-decline,
.button.button-accept,
.button.shift-button,
.button.button-grey
{
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    margin: 7px 0;
    color : #fff;
    background-color : var(--agency-color);
    border: none;
}
.button.button-available {
    background : var(--available) !important;
}
.button.button-unavailable {
    background : var(--unavailable) !important;
}
.button.button-decline {
    background : var(--declined) !important;
}
.button.button-accept {
    background : var(--published) !important;
}
.button.button-grey {
    background : var(--grey) !important;
}

.align-right {
    text-align: right;
}
.w-100 {
    width: 100% !important;
}
.shift-popup .page-inner .row {
    padding-top: 5px;
    padding-bottom: 5px;
}

.-pending:not(.picker-calendar-day) {
    color : var(--pending);
}
.-accepted:not(.picker-calendar-day),
.-clocked-in:not(.picker-calendar-day),
.-clocked-out:not(.picker-calendar-day),
.-attended:not(.picker-calendar-day) {
    color : var(--published);
}
.-declined:not(.picker-calendar-day), .-expired {
    color : var(--declined);
}

.shift-content .button:not(.tab-link),
.button.shift-button {
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    margin: 7px 0;
    color : #fff;
    background-color : var(--agency-color);
    border: none;
}
.shift-content .button.button-outline,
.shift-button.button.button-outline {
    color : var(--agency-color);
    background : #ffffff;
    border: 1px solid var(--agency-color);
}
.shift-content .button.button-outline i.fa,
.shift-button.button.button-outline i.fa {
    color : inherit !important;
    font-size: 20px;
}

.shift-content .-grey,
.shift-content .-grey a i.fa {
    color : var(--grey) !important;
}

.shift-content .-primary,
.shift-content a.next-shift,
.shift-content a.next-shift i.fa {
    color : var(--agency-color) !important;
}


.shift-content a.next-shift i.fa {
    color : var(--agency-color) !important;
}

.shift-content .card {
    background : #fff;
    border-radius : 15px;
    padding: 15px;
    margin: 0;
}

.shift-content .avatar {
    height : 40px;
    width : 40px;
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    color : #fff;
    background : var(--lightish-grey);
    display: block;
}

.shift-content .avatar i.fa {
    color : #fff;
    font-size: 1.2em;
}
.shift-content .avatar i.fa:before {
    color : #fff;
}

.shift-content .avatar.error {
    background : var(--unavailable);
}

.shift-content .avatar img {
    height : 40px;
    width : 40px;
    border-radius: 20px;
    object-fit: cover;
}

.shift-content .card .shift-data {
    font-size: 16px;
    padding: 3px 0;
    display: flex;
    align-items: center;
}
.shift-content .card .shift-data .fa {
    font-size: 16px;
}

.shift-pick .shift-data{
    display: flex;
    align-items: center;
}

.shift-content .align-left {
    text-align: left;
}
.shift-content .next-shift h4 {
    line-height: 35px;
    font-weight: bolder;
    font-size: 20px;
    padding-top: 0;
    margin: 0;
}
.shift-content .next-shift-row {
    padding-top: 10px;
    padding-bottom: 10px;   
    border-bottom: var(--light-grey) 1px solid;
}
.shift-content .next-shift-row p {
    font-size: 1.2em;
    margin: 0;
    font-weight: lighter;
}

.multiline {
    white-space : pre-line;
}

.shift-popup label i.fa:before {
    font-size: 16px;
}
.shift-popup label i.fa {
    width: 24px;
}

.shift-popup label i.fa.pound:before {
    font-family: sans-serif;
    content : '£';
    font-weight: 700;
    color: var(--text-color);
}

.shift-content .next-shift-row a.next-shift i.fa {
    color: var(--grey) !important;
    font-size: 16px;
}

.shift-content .d-day {
    font-weight: bolder;
    font-size: 18px;
    text-align: center;
}
.shift-content .d-dayname {
    font-weight: bolder;
    font-size: 14px;
    padding-top: 10px;
    text-align: center;
    text-transform: uppercase;
}

.shift-popup .checkbox-label {
    display: inline-block;
    padding: 10px 0 0;
}

.shift-popup .label-switch input[type="checkbox"]:checked + .checkbox {
    background: var(--published);
}

.shift-content .picker-calendar-selected-date,
.shift-popup .picker-calendar-selected-date {
    display: none !important;
}

.shift-content .content-block .card:first-of-type {
    margin-top: 1.5em;
}
.shift-content.main-shift-page {
    background : #fff;
}
.shift-content.main-shift-page .top-shift-block {
    background : var(--lightish-grey);
    padding-bottom : 1.5em !important;
    /*margin-top: -1em; Any reason for this? It's causing a design issue.*/
}

.shift-content div#shiftNext {
    min-height : 235px;
}

.shift-content div#shiftNext .card {
    min-height : 180px;
}


.shift-content .avatar,
.shift-popup .avatar {
    height : 40px;
    width : 40px;
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    color : #fff;
    background : var(--lightish-grey);
    display: block;
}

.shift-content .avatar img,
.shift-popup .avatar img {
    height : 40px;
    width : 40px;
    border-radius: 20px;
    object-fit: cover;
}
.shift-content hr, 
.shift-popup hr {
    margin: 20px 0;
    background-color: var(--text-light);
    border: 0 none;
    color:  var(--text-light);
    height: 1px;
}
.shift-content h3, 
.shift-popup h3 {
    font-weight: 300;
    font-size: 24px;
    text-align: center;
}
.shift-content h4, 
.shift-popup h4 {
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.shift-popup label {
    padding-top: 10px;
    display: block;
    font-weight: 700;
}

.shift-popup label.label-switch {
    padding: 0;
    display: inline-block;
    margin-right: 15px;
}

.shift-status {
    color: white !important;
    background: var(--grey);
    display: inline-block;
    font-size: .9em;
    padding: 0.15em 0.75em;
    border-radius: 12px;
    margin-top: 4px;
}

.shift-status.-pending,
.shift-status.-submitted, 
.shift-status.-expiring  {
    background : var(--available);
}

/* are there too many "green" options? */
.shift-status.-accepted,
.shift-status.-complete,
.shift-status.-clocked-in,
.shift-status.-clocked-out,
.shift-status.-attended,
.shift-status.-approved {
    background : var(--published);
}
.shift-status.-declined, 
.shift-status.-expired {
    background : var(--declined);
}
.shift-status.-expired.-shift-details {
    width: 43px;
    margin-right : 8px;
    text-align : center;
}
.shift-status.-working{
    background : var(--pending);
}
.shift-status.-break {
    background : var(--unavailable);
}
.shift-status.-finished {
    background : var(--grey);
}
.shift-status.-invited{
    background : var(--invited);
}
.shift-status.-interested{
    background : var(--interested);
}

.shift-content .buttons-row .button {
    margin-left : auto; /* fix for the tabs being split on android */
}

.shift-content .border,
.shift-popup .border {
    border-radius : 15px;
    border: 2px solid #e3e3e3;
}
.shift-popup .border .row.main {
    margin : 0;
    padding: 0;
}
.shift-popup .border .row.main .col-50 {
    margin: 0;
    padding: 10px;
    width: 50%;
}
.shift-popup .border .row.main .col-50:first-of-type {
    border-right: 2px solid #e3e3e3;
}
.shift-popup .border .row.main h4 {
    margin: 0 0 10px;
}

.shift-popup .border .row.bottom-row {
    background : #f6f6f6;
    margin : 0;
    padding: 10px;
    border-top: 2px solid #e3e3e3;
    border-bottom-left-radius : 15px;
    border-bottom-right-radius : 15px;
}

.shift-content strong i.fa,
.shift-popup strong i.fa {
    font-size: 1.125em;
}

.android .shift-calendar .picker-calendar.picker-modal.picker-modal-inline .picker-header,
.android .shift-calendar .picker-calendar.picker-modal.picker-modal-inline .picker-footer {
    display: none;
}

a#nextMonth i, a#prevMonth i {
    color: var(--lightish-grey);
}

.shift-time{
    display:flex;
    align-items:center;
    justify-content:center;
}
.shift-time .fa{
    margin-right:.25em;
}

.shift-popup .button .fa{
    margin-right:.25em;
}

#shift-tabbar .buttons-row .tab-link{
    border-radius: 20px !important;
    height: 40px;
    line-height: 40px;
    color: var(--agency-color) !important;
    border: 1px solid var(--agency-color) !important;
    background-color: #fff !important;
}

#shift-tabbar .buttons-row .tab-link.active{
    color: #fff !important;
    background-color: var(--agency-color) !important;
}

#shift-tabbar .buttons-row .tab-link:first-child{
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
}

#shift-tabbar .buttons-row .tab-link:last-child{
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
}

#shift-tabbar{
    /*padding-bottom: 1.5em !important;*/
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: top 400ms;
}

#shift-tabbar .buttons-row{
    padding-top: 1.5em !important;
    background: #efeff4;
}

#shift-tabbar:after{
    content:'';
    display:block;
    height: 1.5em;
    width: 100%;
    background-image: linear-gradient(#efeff4 10%, transparent);
}

.no-navbar-by-scroll #shift-tabbar{
    top: -44px !important;
}

.shift-popup .document-wrapper,
.timesheets-popup .document-wrapper {
    height: 80px;
}

.shift-popup .document-icon,
.timesheets-popup .document-icon {
    padding: .2em .2em .05em;
    margin-top: .7em;
}

.shift-popup .page-content .document-icon img,
.timesheets-popup .page-content .document-icon img {
    max-height: 50px;
    max-width: unset;
}