/*---------- General Styles ----------*/
* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body, form {
    width: 100% !important;
    height: 100% !important;
}

body {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 12pt;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

button, button:focus {
    outline: none;
}

ul {
    display: block;
    list-style-type: disc;
    padding: 15px;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

h1, h2, h3, h4 {
    margin: 0 0 8pt 0;
}

h1 {
    font-size: 30pt;
}

h2 {
    font-size: 20pt;
}

h3 {
    font-size: 16pt;
    text-transform: uppercase;
}

h4 {
    font-size: 16pt;
}

.inline-block {
    display: inline-block;
}

input {
    font-family: inherit;
}

button, input[type="button"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select {
    width: 120px;
    border: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: inherit;
    text-align-last: center;
    text-align: center;
    background: url('../images/arrow_drop_down_black_128x128.png') 96% / 15% no-repeat;
}

select::-ms-expand {
    display: none;
}

option {
    color: black;
}

.IsiOS {
    font-size: 16px !important;
}

.timeSelect {
    background: url('../images/arrow_drop_down_black_128x128.png') 98% / 45% no-repeat;
    width: 40px;
    border: 1px solid #b3b3b3;
    padding-right: 10px;
}

.header select {
    background: url('../images/arrow_drop_down_white_128x128.png') 96% / 15% no-repeat;
    width: 120px;
}

.filterSelect {
    background: url('../images/arrow_drop_down_black_128x128.png') 96% / 9% no-repeat;
    width: 200px;
    padding-right: 11%;
}

#PageUpdating {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

#PageUpdating > div {
    margin-left: 50px;
}

#spinner {
    position: relative;
}

input[type=text], input[type=password], input[type="number"], input[type="email"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: none;
    outline: none;
}
input[type=text].bordered {
    padding: 6.5px 4px;
    border: 1px solid #c6c6c6;
}
.refresh-icon,
.help-icon {
    height: 18px;
    width: 18px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    cursor: pointer;
}

.refresh-icon.white {
    background-image: url('../images/refresh_white_52x52.png');
}

.refresh-icon.blue {
    background-image: url('../images/refresh_blue_52x52.png');
}

.help-icon.white {
    background-image: url('../images/help_white_36x36.png');
}

.help-icon.blue {
    background-image: url('../images/help_blue_36x36.png');
}

.help-contents {
    display: none;
}

.main {
    height: 100%;
    width: 100%;
    /*Vertical flex*/
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.header {
    background-color: #003045;
    background: linear-gradient(to right, #005D85, #005D85, #003045);
    color: #fff;
    max-height: 60px;
    min-height: 60px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /*Vertical flex*/
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.wrapper {
    position: relative;
    /*Vertical flex*/
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
    /*Horizontal flex*/
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.wait {
    cursor: wait;
}

.button {
    width: 70px;
    border: 1px solid #003045;
    margin: 0 10px 10px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.chevron, .ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
    padding: 0 0.45em 0 0.2em;
}

.chevron::before, .ui-datepicker .ui-datepicker-prev::before, .ui-datepicker-next::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.35em;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
}

.chevron.right:before, .ui-datepicker-next::before {
    left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.chevron.bottom:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.chevron.left:before, .ui-datepicker .ui-datepicker-prev::before {
    left: 0.25em;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.ui-datepicker .ui-datepicker-next::before, .ui-datepicker .ui-datepicker-prev::before {
    border-color: #fff;
    top: 0.6em;
}

.ui-datepicker-next::before {
    left: unset;
    right: -1em;
}

.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover {
    top: 2px;
}

.content {
    background: white;
    padding: 10px;
    /*Horizontal flex*/
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.contact-card {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    align-self: stretch;
    width: 363px;
    min-height: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-right: 1px solid #003045;
    background: linear-gradient(#005D85, #005D85, #003045);
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.contact-card.collapsed {
    width: 80px;
    transition: width 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.contact-card-inner {
    width: 343px;
}

.contact-header {
    position: relative;
    min-height: 30px;
    margin-top: 10px;
    padding: 0 15px 0 39px;
}

.contact-card-bottom {
    width: 100%;
    font-size: 10px;
    text-align: center;
    padding: 0px;
    margin-top: auto;
}

.bottom-logo-wrapper {
    width: 220px;
    margin: 0px auto;
    color: #FFF;
}

.contact-card-vocantas-logo {
    width: 147px;
    height: 61px;
    margin: 20px auto;
    background: URL('../images/login_poweredby_vocantas_logo.png');
}

.contact-card-vocantas-logo-collapsed {
    background: URL('../images/vocantas_asc_portal_230x118_white.png');
    background-size: 80px 41px;
    background-repeat: no-repeat;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100px;
    height: 70px;
}

/* User Icon */
.contact-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 29px;
    width: 29px;
    background: url('../images/cp_icon_white_29x29.png');
}

.contact-header h4 {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 4px;
}

.contact-card.collapsed .contact-header-text {
    opacity: 0;
    transition: opacity 0.3s;
}

.contact-card.collapsed .contact-header::before {
    cursor: pointer;
}

.contact-last-update {
    font-size: 12px;
}

.contact-card .chevron.left {
    position: absolute;
    top: 23px;
    right: 0;
    width: 2em;
    height: 2em;
}

.contact-card .chevron.left::before {
    left: 0.75em;
    top: 0.45em;
}

.contact-card.collapsed .chevron.left {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.contact-prefs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-height: 530px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 25px;
    overflow: hidden;
    transition: all 1s;
}

.contact-card.collapsed .contact-prefs {
    margin-top: 15px;
    transition: margin-top 0.8s;
}

.contact-prefs-row {
    margin-bottom: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    font-size: 13.33px;
}

.contact-row-left {
    position: relative;
    margin: auto;
    width: 14px;
}

.contact-row-left input[type=checkbox] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.contact-card.collapsed .contact-row-left {
    width: 0;
    margin: 0 0 0 6px;
    overflow: hidden;
}

.contact-card.collapsed .contact-card-bottom {
    display: none;
}

.contact-card.collapsed .contact-card-vocantas-logo-collapsed {
    display: block;
}

.contact-row-middle {
    width: 260px;
}

.contact-row-middle > p {
    margin-top: 14px;
    font-size: 14.5px;
}

.contact-input-wrapper {
    position: relative;
    width: 246px;
    height: 42px;
    padding: 1px;
    background: #fff;
    border: 1px solid #fff;
}

.contact-input-wrapper.invalid {
    background-color: #f7d8d6;
    border-color: #d63d34;
}

.contact-input-icon {
    display: inline-block;
    height: 44px;
    width: 44px;
    background-size: contain;
    margin-top: -1px;
    margin-left: -1px;
}

.contact-input-icon.phone {
    background-image: url('../images/cp_phone_active_88x88.png');
}

.contact-input-wrapper.inactive .contact-input-icon.phone {
    background-image: url('../images/cp_phone_inactive_88x88.png');
}

.contact-input-wrapper.invalid .contact-input-icon.phone {
    background-image: url('../images/cp_phone_invalid_88x88.png');
}

.contact-input-icon.text {
    background-image: url('../images/cp_text_active_88x88.png');
}

.contact-input-wrapper.inactive .contact-input-icon.text {
    background-image: url('../images/cp_text_inactive_88x88.png');
}

.contact-input-wrapper.invalid .contact-input-icon.text {
    background-image: url('../images/cp_text_invalid_88x88.png');
}

.contact-input-icon.email {
    background-image: url('../images/cp_email_active_88x88.png');
}

.contact-input-wrapper.inactive .contact-input-icon.email {
    background-image: url('../images/cp_email_inactive_88x88.png');
}

.contact-input-wrapper.invalid .contact-input-icon.email {
    background-image: url('../images/cp_email_invalid_88x88.png');
}

.contact-input-wrapper input[type=text],
.contact-input-wrapper input[type=email] {
    margin-left: 15px;
    height: 44px;
    max-width: 140px;
    vertical-align: top;
}

.contact-input-wrapper.inactive input[type=text],
.contact-input-wrapper.inactive input[type=email] {
    color: #b3b3b3;
}

.contact-card.collapsed .contact-input-wrapper {
    width: 42px;
    background-color: rgba(255,255,255,0);
}

.contact-card.collapsed .contact-input-wrapper input,
.contact-card.collapsed .contact-input-wrapper .contact-test-button,
.contact-card.collapsed .validation-message,
.contact-card.collapsed .contact-test-button {
    display: none;
}

.contact-test-button {
    position: absolute;
    max-height: 17px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 8px;
    color: #003045;
    text-decoration: underline;
    cursor: pointer;
}

.contact-test-button:active {
    text-decoration: none;
}

.contact-input-wrapper.flat {
    height: 25px;
}

.contact-input-wrapper.flat input[type=text] {
    display: block;
    height: 25px;
    margin-left: 10px;
}

.contact-prefs-row.collapsible {
    min-height: 45px;
}

.contact-card.collapsed .contact-prefs-row.collapsible {
    min-height: 0px;
    height: 0px;
    margin-bottom: 0;
    overflow: hidden;
}

.preferred-greeting-title {
    display: inline-block;
    margin-bottom: 3px;
}

.contact-input-wrapper.preferred-greeting-name {
    background: none;
    border: none;
    font-size: 22px;
    word-wrap: break-word;
}

.contact-row-right {
    width: 23px;
    margin: auto;
}

.contact-card.collapsed .contact-row-right {
    width: 0;
    overflow: hidden;
}

.contact-details-icon {
    display: block;
    height: 23px;
    width: 23px;
    background-size: contain;
    cursor: pointer;
}

.contact-details-icon.clock {
    background-image: url('../images/cp_timerange_46x46.png');
}

.contact-details-icon.pencil {
    background-image: url('../images/cp_edit_46x46.png');
    margin-bottom: -20px;
}

.contact-notification-number {
    display: inline-block;
    width: 18px;
    margin-left: 5px;
    vertical-align: middle;
    border-radius: 5px;
    font-size: 9px;
    text-align: center;
    background: #ff5000;
    color: #fff;
}
.save-button-wrapper {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.save-button, .save-button.white:active {
    width: 88px;
    margin-right: 15px;
    padding: 12px 0;
    text-align: center;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.save-button.white, .save-button:active {
    background-color: #fff;
    color: #003045;
}

.save-contact-prefs-button, .cancel-contact-prefs-button {
    text-align: center;
    background: none;
    border: 1px solid #003045;
    color: #003045;
    font-size: 15px;
    cursor: pointer;
    width: 70px;
    margin: 0 10px 10px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.contact-details-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: space-around;
    padding: 0px;
    height: 100%;
    flex-wrap: wrap;
}

.contact-details-content .heading {
    font-size: 16px;
    font-weight: bold;
    flex: 0 0 20px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.contact-details-content .note {
    font-size: 12px;
    color: lightgray;
    font-style: italic;
    flex: 0 0 20px;
}

.contact-details-range-toggle-wrapper {
    display: inline-block;
    margin-bottom: -8px;
}

.contact-details-range-toggle {
    display: table-cell;
    line-height: 26px;
    width: 83.5px;
    height: 26px;
    padding: 2px;
    color: #fff;
    text-align: center;
    background: #b3b3b3;
    cursor: pointer;
    user-select: none;
}

#ContactDetails {
    padding-top: 0px;
}

#agendaView {
    position: relative;
}

#agendaView.disabled * {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

#agendaView.disabled:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-color: #000000;
    z-index: 999999;
}

.contact-details-range-toggle.active {
    background: #00c04e;
}

.contact-details-range-inputs-wrapper {
    width: calc(100% - 32px);
    text-align: center;
    margin: 0px;
    font-size: 1em;
}

.contact-details-content .prefkey-select {
    background: url('../images/arrow_drop_down_black_128x128.png') right center / 25px 25px no-repeat;
    border: 1px solid #b3b3b3;
    width: 100%;
    max-width: 300px;
    margin-bottom: 6px;
    height: 30px;
    font-size: 1em;
}

.contact-details-range-toggle-wrapper.default .contact-details-range-toggle.toggleDefault {
    display: none;
}

@media only screen and (max-width: 680px) {
    .contact-details-content .prefkey-select {
        max-width: 408px;
    }

    .contact-details-range-toggle-wrapper {
        margin-bottom: 4px;
    }

    .contact-details-range-toggle {
        width: 133.33px;
    }

    .contact-details-range-toggle-wrapper.default .contact-details-range-toggle {
        width: 200px;
    }
}

.contact-details-range-inputs-wrapper.collapsed {
    height: 0;
    overflow: hidden;
    margin: 0 auto;
    transition: height 0.5s, margin 0.5s;
}

.contact-details-range-inputs-wrapper .select {
    width: 50px;
    border: 1px solid #b3b3b3;
    margin: 0px 8px 0 0;
}

.contact-details-range-inputs-wrapper .spacer {
    margin-right: 8px;
    margin-left: 8px;
}

.contact-details-right-border
{
    border-right: 1px solid gray;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cal-wrapper {
    /*Content vertical flex*/
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    z-index: 2;
}

.cal-wrapper-help-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
}

.cal-wrapper-refresh-icon {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
}

.cal-toolbar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 5px;
}

.cal-toolbar-help-icon-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    min-width: 0 !important;
    right: -7px;
    top: -7px;
    padding: 0 !important;
    font-size: 11px;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.cal-toolbar-help-icon-wrapper .help-icon {
    width: 15px;
    height: 15px;
    margin-left: 10px;
}

.cal-toolbar-filters-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-left: 20px;
    width: 100%;
}

.cal-toolbar-filters-opener {
    display: none;
}

.cal-toolbar-nav-icons-wrapper {
    min-width: 96px;
}

.cal-toolbar-nav-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-size: contain;
    cursor: pointer;
}

.cal-toolbar-nav-icon.contact {
    background-image: url('../Images/contactpref_active_96x96.png');
    display: none;
}

.cal-toolbar-nav-icon.calendar {
    background-image: url('../Images/calendar_active_96x96.png');
}

.cal-toolbar-nav-icon.calendar.inactive {
    background-image: url('../Images/calendar_inactive_96x96.png');
}

.cal-toolbar-nav-icon.list {
    background-image: url('../Images/table_active_96x96.png');
}

.cal-toolbar-nav-icon.list.inactive {
    background-image: url('../Images/table_inactive_96x96.png');
}

.cal-toolbar-nav-icon.contact.inactive {
    background-image: url('../Images/contactpref_inactive_96x96.png');
}

.block-single-filters-wrapper {
    min-width: 120px;
}

.block-single-filters-wrapper .control .text {
    min-width: 94px;
}

.cal-toolbar .control {
    width: 80px;
}

.block-single-filters-wrapper > .control {
    width: 105px;
}

.status-filters-wrapper .control .text::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -10px;
    height: 16px;
    width: 78px;
    z-index: -1;
}

.status-filters-wrapper .control input:checked ~ .text::before {
    border: 2px solid;
    border-left: none;
}

/*EXTERNAL SCHEDULE*/
#divExternalFilters {
    background-color: #E5E5E8;
    display: inline-block;
}

#divExternalFilters .control.external-regular input:checked ~ .text::before,
#divExternalFilters .control.external-relieved input:checked ~ .text::before,
#divExternalFilters .control.external-booked-off input:checked ~ .text::before {
    border-color: #B39BD5;
}

#divExternalFilters .control.external-booked-off input:checked ~ .text::before {
    background: repeating-linear-gradient( 135deg, #FFFFFF, #FFFFFF 3px, #B39BD5 1px, #B39BD5 4px );
}

#divExternalFilters .control.external-regular input:checked ~ .text::before {
    background: #B39BD5;
}
/*END EXTERNAL SCHEDULE*/

.filter-title {
    display: inline-block;
    width: 88px;
    position: relative;
    top: 1px;
}

.status-filters-wrapper .control.open input:checked ~ .text::before,
.status-filters-wrapper .control.pending input:checked ~ .text::before,
.status-filters-wrapper .control.awarded input:checked ~ .text::before {
    border-color: #00affb;
}

.status-filters-wrapper .control.pending input:checked ~ .text::before {
    background: repeating-linear-gradient( 135deg, #FFFFFF, #FFFFFF 3px, #00AFFB 1px, #00AFFB 4px );
}

.status-filters-wrapper .control.awarded input:checked ~ .text::before {
    background: #00AFFB;
}

.status-filters-wrapper .control.closed input:checked ~ .text::before {
    background: #7b7b7b;
    border-color: #7b7b7b;
}

.status-filters-wrapper .control.closed input:checked ~ .text {
    color: #fff;
}

.status-filters-wrapper .control.declined input:checked ~ .text::before {
    background: #b3b3b3;
    border-color: #b3b3b3;
}

.status-filters-wrapper .contact-notification-number {
    position: absolute;
    top: -3px;
    right: 5px;
}

.cal-toolbar-input-wrapper {
    display: inline-block;
    position: relative;
    background-size: 1em 1em;
    background-position: 86px 4px;
    background-repeat: no-repeat;
}

.cal-toolbar-input-wrapper input {
    width: 80px;
    padding: 3px 20px 2px 4px;
    border: 1px solid #b3b3b3;
    border-radius: 1px;
}
.cal-toolbar-input-wrapper.search {
    background-image: url('../Images/filter_30x30.png');
}

.cal-toolbar-input-wrapper.date {
    background-image: url('../Images/date_picker_30x30.png');
}

.location-filter-wrapper .select {
    min-width: 100px;
}

.location-filter-wrapper .select > select {
    padding-right: 30px;
}

.validation-message {
    min-width: 195px;
    max-width: 290px;
    position: relative;
    padding: 15px 45px 15px 10px;
    margin: 20px auto;
    border: 1px solid #00c04e;
    background: #c7f2dc;
    color: #00c04e;
    font-size: 13px;
    text-align: center;
    z-index: 1;
}

.validation-message.error {
    background: #f7d8d6;
    color: #d63d34;
    border: 1px solid #d63d34;
}

.validation-message::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: URL(../images/valid_34x34.png);
    background-size: contain;
}

.validation-message.error::after {
    background-image: URL(../images/cp_invalid_34x34.png);
}

.validation-failed {
    background: #f7d8d6;
    color: #d63d34;
    border: 1px solid #d63d34;
}
/**********************
Custom Form Controls
Based on: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes 
**********************/
.control {
    display: block;
    position: relative;
    height: 20px;
    padding-left: 30px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 13.33px;
}

.control.inline {
    display: inline-block;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control .text {
    position: relative;
    padding: 4px 0;
    display: inline-block;
    z-index: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 16px;
    width: 16px;
    background: #fff;
    border: 2px solid #005D85;
}

.control--radio .control__indicator {
    border-radius: 50%;
}
/*.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}*/
.control input:checked ~ .control__indicator {
    background: #005D85;
}

.control input:checked ~ .control__indicator.white {
    background: #fff;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #005D85;
}

.control:hover input:not([disabled]):checked ~ .control__indicator.white,
.control input:checked:focus ~ .control__indicator.white {
    background: #fff;
}

.control input:checked ~ .control__indicator.shift-open,
.control:hover input:not([disabled]):checked ~ .control__indicator.shift-open,
.control input:checked:focus ~ .control__indicator.shift-open {
    background: #00affb;
}

.control input:checked ~ .control__indicator.block-open,
.control:hover input:not([disabled]):checked ~ .control__indicator.block-open,
.control input:checked:focus ~ .control__indicator.block-open {
    background: #f68a33;
}

.control input:checked ~ .control__indicator.shift-external,
.control:hover input:not([disabled]):checked ~ .control__indicator.shift-external,
.control input:checked:focus ~ .control__indicator.shift-external {
    background: #B39BD5;
}

.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after { /*Checkmark*/
    left: 6px;
    top: 0;
    width: 3px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.control--checkbox .control__indicator.white:after {
    border-color: #000;
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}

.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}


/*.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
    border-top-color: #000;
}*/
.select select:disabled ~ .select__arrow {
    border-top-color: #ccc;
}
/****************************
End Custom Form Controls
****************************/

/*---------- Calendar view styles ----------*/
.fc3 .shift-open, .shift-open {
    background: #FFFFFF;
    color: #000000;
    border: 2px solid #00AFFB;
}

.fc3 .shift-pending, .shift-pending {
    background: repeating-linear-gradient(135deg, #FFFFFF, #FFFFFF 3px, #00AFFB 1px, #00AFFB 4px);
    color: #000000;
    border: 2px solid #00AFFB;
}

.fc3 .shift-awarded, .shift-awarded {
    background-color: #00AFFB;
    color: #000000;
    border: 2px solid #00AFFB;
}

.fc3 .shift-declined, .shift-declined {
    background: #CCCCCC;
    color: #000000;
    border: 2px solid #CCCCCC;
}

.fc3 .shift-closed, .shift-closed {
    background: #999999;
    color: #FFFFFF;
    border: 2px solid #999999;
}

.fc3 .block-open, .block-open {
    background: #FFFFFF;
    color: #000000;
    border: 2px solid #F68A33;
}

.fc3 .block-pending, .block-pending {
    background: repeating-linear-gradient(135deg, #FFFFFF, #FFFFFF 3px, #F68A33 1px, #F68A33 4px);
    color: #000000;
    border: 2px solid #F68A33;
}

.fc3 .block-declined, .block-declined {
    background: #CCCCCC;
    color: #000000;
    border: 2px solid #CCCCCC;
}

.fc3 .shift-external, .shift-external {
    border: 2px solid #B39BD5;
}

.fc3 .external-booked-off-shift, .fc3 .external-partially-booked-off-shift, .external-booked-off-shift, .external-partially-booked-off-shift {
    background: repeating-linear-gradient(135deg, #FFFFFF, #FFFFFF 3px, #B39BD5 1px, #B39BD5 4px);
    color: #000000;
    border: 2px solid #B39BD5;
}

.fc3 .external-regular-shift, .external-regular-shift {
    background: #B39BD5;
    color: #000000;
    border: 2px solid #B39BD5;
}

.fc3 .external-relieved-shift, .fc3 .external-partially-relieved-shift, .external-relieved-shift, .external-partially-relieved-shift {
    background: #FFFFFF;
    color: #000000;
    border: 2px solid #B39BD5;
}

@media only screen and (max-width: 900px) and (min-width: 750px) {
    .block-single-filters-wrapper {
        margin-right: 15px;
    }
}

@media only screen and (max-width: 550px) {
    .block-single-filters-wrapper {
        margin-right: 85px;
    }
}

.type-marker {
    box-sizing: border-box;
    width: 8px !important;
    display: inline-block;
    height: 100%;
    min-height: 32px;
    margin-right: 7px;
    vertical-align: middle;
}

.type-text {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.type-cell {
    width: auto;
}

.header-logo {
    display: inline-block;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    height: 45px;
    width: 135px;
    margin: 5px 0 5px 10px;
    background-size: 135px 45px;
    background-image: url('../images/customer-logo.png');
}

.header-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    margin-right: 50px;
    min-height: 23px;
    text-align: center;
}
.impersonate-button, .cancel-impersonation-button {
    position: relative;
    height: 25px;
    width: 25px;
    margin-right: 40px;
    margin-bottom: 2.5px;
    background: url('../Images/incognito_icon_white_29x29.png');
    background-size: cover;
}
.cancel-impersonation-button {
    margin: 0 40px 0 -30px;
    background-image: url('../Images/cancel-impersonation-icon.png');
}
#ImpersonateEmployeesModal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.header-logout {
    margin-right: 10px;
}

/*********** TermsOfService page *******************/
.tosContent {
    margin: 0 auto;
    margin-top: 5vh;
    height: 70vh;
    width: 70vw;
    overflow-y: scroll;
    background-color: #fff;
    color: #000;
    padding: 10px;
}

/*---------- Login Page Specific Styles -----------*/
.tosBG,
#login-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: URL('../images/login-bg.jpg');
    background-repeat: repeat;
    overflow: auto; /*To prevent margin collapsing*/
    color: #fff;
}

#login-bg div {
    margin-right: auto;
    margin-left: auto;
}

.login-container {
    width: 300px;
    margin-top: 20px;
}

.login-container h4 {
    text-align: center;
    margin-bottom: 30px;
}

.login-container .or {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75em;
    margin: 12px auto;
    width: calc(100% - 78px);
    text-align: center;
}

.login-container .or::before, .login-container .or::after {
    content: "";
    position: relative;
    border-top: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    margin-bottom: 0.15em;
    overflow: hidden;
}

.login-container .or::before {
    right: 0.5em;
    margin-left: -50%;
}
.login-container .or::after {
    left: 0.5em;
    margin-right: -50%;
}

.login-customer-logo {
    margin-bottom: 30px;
    width: 250px;
    height: 90px;
    background: URL('../images/login-customer-logo.png');
    background-size: contain;
}

.login-input-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 230px;
    height: 20px;
    padding: 10px 10px;
    margin-bottom: 20px;
    border: 1px solid #fff;
}

.login-input-wrapper input[type=text],
.login-input-wrapper input[type=password] {
    width: 170px;
    margin-left: 30px;
    padding: 2px 0 0 0;
    font-size: 13.33px;
    color: #fff;
}

.login-checkbox-wrapper {
    text-align: center;
    font-size: 10pt;
}

.login-checkbox-wrapper > label {
    vertical-align: top;
}

.login-checkbox-wrapper > input[type=checkbox] {
    margin: 2px;
}

.login-button {
    width: 250px;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #b3b3b3;
    color: #003045;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    margin: auto;
    margin-top: 30px;
    display: block;
    box-sizing: content-box;
}

.login-button:active {
    background: #00affb;
    border-color: #00affb;
    color: #fff;
}

.login-vocantas-logo {
    width: 147px;
    height: 61px;
    margin: 20px auto;
    background: URL('../images/login_poweredby_vocantas_logo.png');
}

/*  SHIFT VIEW   */
.ui-dialog.shift-view {
    font-size: 13px;
}

.ui-dialog-titlebar.shift-view .ui-dialog-title {
    padding-left: 10px;
}

.ui-dialog-titlebar.shift-view .type-marker {
    position: absolute;
    top: 0;
    left: 0;
}

.callout-details {
    max-width: 800px;
    margin: 10px 0 20px 0;
}

.callout-details > span {
    display: inline-block;
    margin: 10px 20px;
    line-height: 1.5em;
}

.callout-details-label,
table.shift-view-table thead th {
    color: #666;
    text-transform: uppercase;
}

table.shift-view-table {
    width: 100%;
    margin-bottom: 20px;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
}

table.shift-view-table tbody td,
table.shift-view-table thead th {
    padding: 8.5px 10px;
    font-weight: normal;
    border-bottom: 1px solid;
    border-color: #ddd;
}

/*---------- basictable styles ----------*/
table.bt td {
    text-align: left;
}

table.bt tbody td::before {
    font-weight: normal;
    width: 9em;
    color: #666;
    text-transform: uppercase;
}

table.shift-view-table.bt tr:nth-child(2n) td {
    background-color: #EFEFEF;
}

table.shift-view-table.bt td:last-child {
    margin-bottom: 20px;
}

.action-button-wrapper {
    text-align: center;
}

.action-button {
    width: 90px;
    padding: 7px 0;
    margin-right: 15px;
    color: #fff;
    cursor: pointer;
}

@supports (-webkit-touch-callout: none) {
    .action-button {
        padding: 7px 0 25px;
    }
}

.action-button.auto-width {
    width: auto;
    padding: 7px;
}
.action-button.light {
    background-color: #00affb;
}

.action-button.medium {
    background-color: #005D85;
}

.action-button.dark {
    background-color: #003045;
}

/* jquery-ui Modal Styles */
.ui-dialog {
    min-width: 380px;
    max-width: 100%;
    background: #fff;
    padding: 0;
    z-index: 1000 !important;
    -webkit-overflow-scrolling: touch;
}

.ui-dialog.message-dialog {
    z-index: 2001 !important;
}

.ui-dialog.loading-dialog {
    min-width: 250px;
    border: 3px solid #005D85;
    z-index: 2000 !important;
}

.ui-widget-overlay {
    background: #000;
    opacity: 0.75;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em;
    background: #003045;
    color: #fff;
}

.modal-title-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
}
.modal-title-icon.none {
    display: none;
}
.modal-title-icon.type-marker {
    height: 100% !important;
}

.phone-blue {
    background-image: url('../Images/phone_blue_52x52.png');
}

.phone-white {
    background-image: url('../Images/phone_white_52x52.png');
}

.call-blue {
    background-image: url('../Images/phone_blue_52x52.png');
}

.call-white {
    background-image: url('../Images/phone_white_52x52.png');
}

.sms-blue {
    background-image: url('../Images/text_blue_52x52.png');
}

.sms-white {
    background-image: url('../Images/text_white_52x52.png');
}

.text-blue {
    background-image: url('../Images/text_blue_52x52.png');
}

.text-white {
    background-image: url('../Images/text_white_52x52.png');
}

.email-blue {
    background-image: url('../Images/email_blue_52x52.png');
}

.email-white {
    background-image: url('../Images/email_white_52x52.png');
}

.mobileapp-blue {
    background-image: url('../Images/mobileapp_blue_52x52.png');
}

.contact-type-list {
    width: 20px;
    height: 20px;
    margin-bottom: -5px;
}

.contact-type-shift-view {
    width: 20px;
    height: 20px;
    margin: 5px;
    margin-bottom: -10px;
}

.shift-info {
    line-height: 2em;
    vertical-align: top;
}

.ui-dialog .ui-dialog-title {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    font-size: 20px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.ui-dialog .ui-dialog-titlebar-close {
    height: 40px;
    width: 40px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    font-weight: bolder;
    background: url('../Images/close_white_36x36.png');
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    transition: all 0.2s;
}

.ui-dialog .ui-dialog-content {
    padding: 20px 20px;
}

.ui-dialog-content .help-icon {
    position: absolute;
    top: 8px;
    right: 8px;
}

.ui-dialog-titlebar.message-dialog-titlebar {
    background: #fff;
    padding-bottom: 0;
}

.ui-dialog-titlebar.message-dialog-titlebar .ui-dialog-titlebar-close {
    display: none;
}

.ui-dialog-titlebar-close.close-black {
    background-image: url('../Images/close_black_36x36.png');
}

.ui-dialog .ui-dialog-buttonpane {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.ui-dialog .ui-dialog-buttonpane button {
    border: 1px solid #003045;
    margin: 0 10px 10px 10px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    min-width: 70px;
}

.message-icon-wrapper {
    float: left;
    height: 100%;
    margin-right: 20px;
}

#message-icon {
    display: inline-block;
    height: 44px;
    width: 44px;
    background-size: contain;
}

#message-icon.confirm {
    background-image: url('../images/confirm_88x88.png');
}

#message-icon.warning {
    background-image: url('../images/warning_88x88.png');
}

#message-icon.error {
    background-image: url('../images/error_88x88.png');
}

#message-icon.info {
    background-image: url('../images/info_88x88.png');
}

#message-icon.success {
    background-image: url('../images/success_88x88.png');
}

#message-icon.prompt {
    background-image: url('../images/confirm_88x88.png');
}

#message-content {
    max-width: 260px;
    float: left;
}

#messageText {
    float: left;
    margin-bottom: 20px;
}

#message-dialog.ui-dialog-content {
    padding: 0 30px;
}

.ui-dialog.help-modal {
    z-index: 1002 !important;
    font-size: 11pt;
}

.help-modal .ui-dialog-content {
    padding: 20px !important;
}

.help-modal .message-icon-wrapper {
    display: none !important;
}

.help-modal #message-content {
    max-width: 900px !important;
}

/* jQuery UI Accordian and Calendar Styles */
.ui-accordion .ui-widget-content,
.ui-datepicker {
    border: 1px solid #003045;
    background: #ffffff;
    color: #333333;
    z-index: 2 !important;
}

.ui-datepicker-today {
    background-color: #00affb;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #003045;
    background: #fff;
    font-weight: normal;
    color: #003045;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #00affb;
    background: #00affb;
    font-weight: normal;
    color: #ffffff;
}

.ui-accordion .ui-accordion-header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-color: #dddddd;
}

.ui-button-icon-only {
    border: none;
}

.ui-datepicker .ui-datepicker-header {
    background-color: #00affb;
    color: #fff;
    font-size: 1.1em;
    text-transform: uppercase;
}

.ui-datepicker-calendar .ui-state-default {
    border-color: #DDDDDD;
}

.ui-datepicker-calendar .ui-state-default:hover {
    background-color: #ddd;
}

.ui-datepicker table {
    background: #fff;
}


@media only screen and (min-height: 535px) { /* Screen height > login container */
    .login-container {
        max-height: 535px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    .login-vocantas-logo {
        margin-top: 80px;
    }
}

@media only screen and (max-width: 1279px) {
    .contact-card {
        position: absolute;
        z-index: 200;
        box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.30);
    }

    .contact-card.collapsed {
        box-shadow: none;
    }

    .content {
        padding-left: 107px;
    }

    .control.inline {
        margin-right: 10px;
    }
}

@media only screen and (max-width: 1023px) {
    .cal-toolbar {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .cal-toolbar-filters-wrapper {
        margin-left: 0;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .content {
        padding: 0;
    }

    .contact-card {
        width: 100%;
        min-height: 100%;
        margin-top: 48px;
        padding: 0;
        border: none;
        transition: none;
    }

    .contact-card > .chevron {
        display: none;
    }

    .contact-card-inner {
        margin: 0 auto;
    }

    .contact-card.collapsed {
        width: 0;
        padding: 0;
        transition: none;
    }

    .contact-card .contact-notifications-wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-top: 30px;
    }

    .contact-card .contact-notification-text {
        display: none;
    }

    .contact-card .contact-notification {
        width: 68px;
        border: none;
        margin: auto;
    }

    .contact-card .contact-notification-icon {
        height: 21px;
        width: 68px;
        right: 0;
        margin: auto;
        transition: all 1.0s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    .contact-card .contact-notification-number {
        position: absolute;
        top: -5px;
        right: 9px;
    }

    .contact-prefs {
        margin-top: 5px;
    }

    .contact-prefs-row, .contact-prefs-row.collapsible {
        transition: none;
    }

    .cal-toolbar {
        margin-bottom: 23px;
    }

    .cal-toolbar-nav-icon.contact {
        display: inline-block;
    }

    .cal-toolbar-filters-wrapper {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        position: absolute;
        top: 38px;
        right: 0px;
        max-height: 17px;
        overflow: hidden;
        z-index: 2;
        background: white;
        transition: max-height 0.5s, z-index 0.5s step-end;
    }

    .cal-toolbar-help-icon-wrapper {
        display: none;
        right: 10px;
        top: 10px;
    }

    .cal-toolbar-filters-wrapper.open .cal-toolbar-help-icon-wrapper {
        display: inline-block;
    }

    .cal-toolbar-filters-wrapper.open {
        max-height: 300px;
        box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.30);
        z-index: 3;
        transition: max-height 0.5s, z-index 0s step-start;
    }

    .cal-toolbar-filters-opener {
        display: block;
        position: absolute;
        top: -2px;
        right: 15px;
        cursor: pointer;
    }

    .cal-toolbar-filters-opener .chevron.bottom::before {
        top: 0;
    }

    .cal-toolbar-filters-wrapper > div {
        margin-top: 15px;
        margin-left: 5px;
        margin-bottom: 5px;
    }

    .cal-toolbar-nav-icons-wrapper {
        width: 100%;
        height: 48px;
        border-bottom: 1px solid #b3b3b3;
    }

    .ui-dialog {
        min-width: 320px;
    }

    .contact-details-content {
        padding-right: 0;
        padding-left: 0;
    }

    .impersonate-button, .cancel-impersonation-button {
        height: 23px;
        width: 23px;
        margin-right: 20px;
    }

    .cancel-impersonation-button {
        margin-left: -10px;
    }
}

@media only screen and (max-width: 500px) {
    .header-user {
        margin-right: 10px;
        margin-left: 10px;
    }

    .impersonate-button, .cancel-impersonation-button {
        height: 20px;
        width: 20px;
    }
}

@media only screen and (max-width: 360px) {
    .header-logo {
        width: 85px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .contact-card-inner {
        margin: 0 auto;
        width: 320px;
    }

    .cal-toolbar-help-icon-wrapper {
        top: auto;
        bottom: 10px;
    }

    .action-button {
        margin-right: 0;
    }
}

@media print {
    body {
        height: 100% !important;
    }

    .header, .contact-card, .cal-toolbar, .fc-button {
        display: none !important;
    }

    .fc-toolbar {
        margin: 0px !important;
    }

    .content {
        padding: 0px !important;
    }

    html, body, form, .main, .wrapper, .content, .cal-wrapper, #calendarContainer, .fc-view-container, .fc-view, .fc-scroller {
        overflow: visible !important;
        height: auto !important;
    }
}

/*** FC3 styles scoped to .fc3 ***/
.fc3 .fc-list-header {
  position: relative;
  vertical-align: middle !important;
  padding-top: 10px;
}
.fc3 .unsorted::after, .fc3 .sortedAsc::after, .fc3 .sortedDesc::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: auto;
    margin-left: 2px;
    background-size: contain;
    background-repeat: no-repeat;
}
.fc3 .fc-list-header.unsorted::after {
  background-image: url("../images/unsorted_24x24.png");
}
.fc3 .fc-list-header.sortedAsc::after {
  background-image: url("../images/sorted_up_24x24.png");
}
.fc3 .fc-list-header.sortedDesc::after {
  background-image: url("../images/sorted_down_24x24.png");
}
.fc3 .fc-toolbar {
  background-color: #003045 !important;
  color: #FFFFFF;
  height: 31px;
}
.fc3 .fc-toolbar h2 {
  font-weight: normal;
  text-transform: uppercase;
  min-width: 230px;
  cursor: pointer;
}
.fc3 .fc-toolbar button {
  background-color: #003045 !important;
  color: white;
  height: 26px;
}
.fc3 .fc-state-default {
  background: inherit !important;
  border: 0px !important;
  box-shadow: 0px !important;
}
.fc3 .fc-content-skeleton td:not(:empty) {
  cursor: pointer;
}
.fc3 .fc-day-number {
  float: none !important;
}
.fc3 .fc-today {
  background-color: #E0F6FF !important;
}
.fc3 .fc-more-cell {
  color: #666666;
  text-align: center;
  font-size: 10pt;
}
.fc3 .fc-more-cell div {
  margin-top: 4%;
}
.fc3 .fc-event {
  border-radius: 0px;
  font-size: 10pt;
  cursor: pointer;
}
.fc3 .fc-event:hover {
  color: #000000;
  font-weight: bold;
}
.fc3 .fc-event.shift-cancelled:hover {
  color: #FFFFFF;
}
.fc3 .fc-list-view {
  border: 0px !important;
}
.fc3 .fc-list-table {
  margin-top: -25px;
}
.fc3 .fc-list-item-row {
  border: 1px solid #DDDDDD;
  cursor: pointer;
  font-size: 10pt !important;
  height: 100%;
}
.fc3 .fc-list-item-row:hover {
  background-color: #E0F6FF !important;
}
.fc3 .fc-list-heading td {
  background-color: transparent !important;
  padding: 0px;
  padding-top: 25px;
}
.fc3 .fc-list-heading td div {
  background-color: #005D85 !important;
  color: #FFFFFF;
  text-transform: uppercase;
  padding: 3px;
  height: 20px;
}
.fc3 .fc-list-item {
  padding: 0px !important;
  text-align: center;
  vertical-align: middle !important;
  height: 100%;
}
.fc3 td.fc-list-item:first-child {
  text-align: left;
  white-space: nowrap;
}
.fc3 .fc-list-header {
  text-align: center;
  font-size: 10pt !important;
  text-transform: uppercase;
  color: #666666;
  cursor: pointer;
}
@media only screen and (max-width: 1023px) {
  .fc3 .fc-time {
    display: none;
  }
  .fc3 td.fc-list-item:last-child, .fc3 td.fc-list-header:last-child {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .fc3 .fc-toolbar h2 {
    min-width: 200px;
  }
  .fc3 td.fc-list-item:nth-last-child(2), .fc3 td.fc-list-header:nth-last-child(2) {
    display: none;
  }
  .fc3 td.fc-list-header {
    font-size: 75% !important;
  }
  .fc3 .fc-list-table td:not(.fc-list-header) {
    font-size: 90%;
  }
}
@media only screen and (max-width: 360px) {
  .fc3 .fc-toolbar h2 {
    min-width: 0;
    font-size: 20px;
    margin-top: 3px;
    margin-left: 0;
  }
  .fc3 .fc-toolbar button.fc-button {
    padding: 0;
  }
  .fc3 td.fc-list-item:nth-last-child(3), .fc3 td.fc-list-header:nth-last-child(3) {
    display: none;
  }
}


/*** FC5 styles scoped to .fc5 ***/
.fc5 .fc-timegrid-col-events .fc-event.fc-event-draggable {
    opacity: 100;
}

.fc5 #mirrorTest .fc-event.fc-event-draggable {
    cursor: no-drop;
}

.fc5 .fc-direction-ltr .fc-timegrid-col-events {
    margin-right: 2px;
}

.fc5 .fc-event-resizer-end {
    display: block !important;
}
.fc5 .fc-event-resizer-end::after {
    content: "—";
    position: absolute;
    width: 100%;
    text-align: center;
    height: 4px;
    
    top: -6.5px;
    color: white;
}

.fc5 .daySwitch {
    width: 12px;
    height: 20px;
    overflow: hidden;
    background: none;
    border: none;
}
.fc5 .daySwitch:hover {
    color: blue;
}
.fc5 .daySwitch:after {
    font-weight: 700;
    font-size: 200%;
    position: absolute;
    top: -7px;
}

.fc5 .daySwitch.left {
    float: left;
}
    .fc5 .daySwitch.left:after {
        content: "\02039";
        left: 2px;
    }
.fc5 .daySwitch.right {
    float: right;
}
    .fc5 .daySwitch.right:after {
        content: "\0203A";
        right: 2px;
    }