.font-weight-semibold {
    font-weight:600;
}
.u-header__section--admin-dark a.active i{
    color: #00abcd !important;
}
#display-bookings{
    flex-wrap: nowrap;
    overflow-x: auto;
}
.simulator{
    width:240px;
    height: 100%;
    display: block;
    padding: 0px 15px;
    flex-grow: 0;
    flex-shrink: 0;
}
.is-venue{
    color: #00abcd;
}

.load-spinner{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fix for selectpicker appearing in the background */
    z-index: 1;
}
.form-error{
    color: red;
}

.time-slot{
    margin-bottom: 1px;
    display: flex;
    min-height: 64px;
}
.time-slot .media-body{
    max-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.booking-slot{
    background-color: #fceeee;
}
.available-slot{
    background-color: #f5f9f9;
}
.unavailable-slot {
    background-color: #e3e3e3;
}
.event-slot{
    background-color: #fff1bf;
}
.card.bsg-background--active {
    border-color: #1CC9E4 !important;
}
.card.bsg-background--active .card-header {
    background-color: #1CC9E4;
}
.card.bsg-background--active .card-title {
    color: #fff;
}

.booking-slot.current{
    border-top: 4px solid #0f9d58;
    border-right: 4px solid #0f9d58;
    border-bottom: 4px solid #0f9d58;
}
.available-slot.current{
    border-top: 4px solid #0f9d58;
    border-right: 4px solid #0f9d58;
    border-bottom: 4px solid #0f9d58;
}
.indicator{
    width: 20px;
    margin-right: 10px;
    align-self: stretch;
}
.available-slot > .indicator{
    background-color: #00abcd;
}
.booking-slot > .indicator{
    background-color: #ff0000;
}
.unavailable-slot > .indicator {
    background-color: #333 !important;
}

.event-slot > .indicator{
    background-color: #ffc800;
}
.time-slot .content{
    display: flex;
    position: relative;
    flex-direction: row;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    width: 100%;
}
.time-slot .options{
    align-self: center;
    position: absolute;
    right: 10px;
    top: 22px;
}

.details-summary{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 172px;
}

/* Checked used in Summernote BS4 */
.custom-control-input {
    z-index: 1;
    opacity: 1;
    left: 5px;
    top: 5px;
}

#calendar .confirm-label {
    font-weight: 600;
}

#calendar .custom-control-input {
    z-index: -1;
    opacity: 0;
    left: unset;
    right: unset;
}

#calendar .custom-control-input {
    vertical-align: middle;
    font-size: 0.8rem;
    font-weight: 600;
}

#calendar .custom-control-input::before {
    left: 0;
}
#calendar .custom-control-input::after {
    vertical-align: middle;
    font-size: 0.8rem;
}

#calendar .custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: transparent;
}

#calendar .custom-checkbox .custom-control-input:not(:checked)~.custom-control-label::before {
    border: 1.5px solid #000;
    background-color: #fff;
}

#calendar .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2300' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

/* Right Aligned Checkbox */
label.custom-control-label.check-right {
    /* position: relative; */
    padding-right: 1.5rem;
}

label.custom-control-label.check-right::before,
label.custom-control-label.check-right::after {
    right: 2px;
    left: auto;
    top: 0.2rem;
    bottom: 0;
}

.view-booking-form-modal .select-conf-wrapper {
    color: #7A7A7A;
    width: 180px;
}

.note-toolbar {
    z-index: 10;
}

.noty_type__error.noty_theme__unify--v1 {
    background-color: #DE636F;
}

.g-pointer-events-none {
    pointer-events: none;
}

/* Fancybox Display - Break word for long emails */
.fancybox-container [id^="view-booking-form"] p {
    word-break: break-word;
}

/* Booking */
.booking-table-header #datepickerWrapper {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
}

.booking-table-header #datepickerWrapper #dateSelector:focus {
    outline: none;
}

.booking-table-header #datepickerWrapper > input{
    padding-top: 7px;
    padding-bottom: 7px;
}

.booking-table-header {
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
}

/* Breakpoint: sm */
@media(min-width: 768px) {
    .booking-table-header #datepickerWrapper {
        padding-top: 0;
        padding-bottom: 0;
    }

    .booking-table-header #datepickerWrapper > input{
        padding-top: 6.7px;
        padding-bottom: 6.8px;
    }  
}

@media (max-width: 900px) {
    .booking-table-header #datepickerWrapper {
        width: 235px !important;
    }
}

@media (max-width: 768px) {
    .booking-table-header #datepickerWrapper {
        width: auto !important;
        margin: 10px;
    }
}

form span.validation-error {
    color: #ff0000 !important;
}

form .error-container > span.validation-error {
    display: block;
}

form div.validation-error,
form div.validation-error:hover,
form div.validation-error:focus,
form select.validation-error,
form select.validation-error:hover,
form select.validation-error:focus,
form input.validation-error,
form input.validation-error:hover,
form input.validation-error:focus {
    border-color: #ff0000 !important;
}

#datepickerWrapper input.validation-error + input {
    border: 1px red solid !important;
}

/* #region FC CUSTOM CSS */
/* Possibley due to the fact we changed events to have borders and event also have on hover effects */
.fc-scroller {
    overflow-y: hidden !important;
}
.fc-event {
    display: flex !important;
    font-size: 14px;
    border-radius: 4px;
    overflow: hidden;
}
.fc-title {
    font-weight: bold;
    order: 3;
    width: 100%;
}
.fc-time {
    width: auto;
    -ms-flex-item-align: left!important;
    align-self: left!important;
}
.fc-content .checkbox {
    display: block;
    width: auto;
}
.fc-time-grid .fc-slats td {
    height: 2em; /* Change This to your required height */
    border-bottom: 0;
}
.fc-unthemed td.fc-today {
    background: #fff;
}
.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
}
.fc-content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
/* #region Single-slot display */
.fc-time-grid-event.fc-short .fc-time {
  display: none;
}
.fc-short > .fc-content {
  display: flex;
  flex-wrap: nowrap;
}
.fc-short > .fc-content > .fc-title {
  order: 0;
  display: block;
  white-space: pre-wrap !important;
}
.fc-short > .fc-content > .checkbox {
  padding-left: 0;
}
@media screen and (max-width: 1300px) {
    .fc-event .checkbox.custom-checkbox label > span {
        display: none;
    }   
}
/* #endregion */
/* Prototype: Experimenting using bg events for type availability indications on the calendar */
.bk-bg-event-type--bsg {
    background-color:rgba(0, 171, 205, 0.2) !important;
    /* Dan's Changes for Setting up background events modified */
    background: unset !important;
    border-left: 6px solid #041D41;
    opacity: 0.6 !important;
    width: 0px;
}

.bk-bg-event-type--mimatch {
    background-color: rgba(255, 168, 0, .2) !important;
    /* Dan's Changes for Setting up background events modified */
    background: unset !important;
    border-left: 6px solid #FFAD46;
    opacity: 0.6 !important;
    width: 0;
    /* margin-left: 9px; */
}

.bk-bg-event-type--coaching {
    background-color: rgba(51, 255, 0, 0.4) !important;
    /* Dan's Changes for Setting up background events modified */
    background: unset !important;
    border-left: 6px solid #0BA508;
    opacity: 0.6 !important;
    width: 0;
    /* margin-left: 18px; */
}
.bk-bg-event-type--unavailable {
    background-color: rgba(255, 0, 0, 0.4) !important;
    /* Dan's Changes for Setting up background events modified */
    background: unset !important;
    border-left: 6px solid #ff0000;
    opacity: 0.6 !important;
    width: 0;
    /* margin-left: 18px; */
}
/* .bk-bg-event-type--coaching:nth-child(n) {
    margin-left: calc(18px + (9 * n));
} */

.fc-event.bk-type--mimatch {
    margin-left: 7px;
}
.fc-event.bk-type--bsg, .fc-event.bk-type--mimatch, .fc-event.bk-type--coaching {
    margin-left: -2px;
}
/* TODO coaching styling for bk-type-- classes  */
/* #region Intersecting BG Events POC */
/*
It is is possible to set an overlap flag to 
move out both the ribbon and the event together.

Yes. but how do you get events respect ones that don't?
You cannot do this.
*/
.fc-overlap .bk-type--mimatch {
    margin-left: 7px;
}
.fc-overlap .bk-bg-event-type--mimatch {
    margin-left: 9px !important;
}
.fc-overlap .bk-bg-event-type--coaching {
    margin-left: 18px !important;
}
/* #endregion */
.fc-event.bk-type--mimatch.bk--confirmed,
.fc-event.bk-type--bsg.bk--confirmed,
.fc-event.bk-type--coaching.bk--confirmed {
    border-width: 0 0 0 9px;
}

.fc-event.bk-type--mimatch.bk--unconfirmed,
.fc-event.bk-type--bsg.bk--unconfirmed {
    border-width: 3px;
    margin: -2px; /* Keeps it in the middle, may cause overlap */
    background-color: white !important;
    box-sizing: border-box;
}
.fc-custom-info-content {
    margin: 2px 6px 0 6px;
}
.bk-type--bsg .fc-custom-info-content {
    min-width: 60px;
}
.fc-custom-info-content .badge.badge-pill {
    background-color: rgba(255,173,70,0.59);
    font-weight: 700;
    padding-top: 6px;
    padding-bottom: 6px;
}
.fc-event.bk-type--mimatch .fc-custom-info-content .badge.badge-pill {
    background-color: rgba(255,173,70,0.7);
}
.fc-event.bk-type--bsg .fc-custom-info-content .badge.badge-pill {
    background-color: rgba(4,29,65,0.7);
}
.fc-event.bk-type--range .fc-custom-info-content .badge.badge-pill {
    background-color: rgba(4,29,65,0.7);
}
.fc-event.bk-type--coaching .fc-custom-info-content .badge.badge-pill {
    background-color: rgba(11, 165, 8, 0.7)
}

@media screen and (max-width: 1250px) {
    .fc-event .custom-checkbox {
        padding-left: 0.2rem;
    }
}
/*
    Bootstrap badges uses :empty and renders display:none,
    if it has no child element including if #text
*/
.fc-event .fc-custom-info-content .badge:empty {
    display: block;
}
.fc-event.bk-type--mimatch .fc-custom-info-content .badge.badge-pill:after {
    content: 'MiMatch';
}
.fc-event.bk-type--bsg .fc-custom-info-content .badge.badge-pill:after {
    content: 'BSG';
}
.fc-event.bk-type--range .fc-custom-info-content .badge.badge-pill:after {
    content: 'RANGE';
}
.fc-event.bk-type--coaching .fc-custom-info-content .badge.badge-pill:after {
    content: 'Coaching';
}
.fc-event.sp-event--holiday .fc-time {
    display: none;
}

.fc-custom-info-content .icon-group {
    display:flex;
    /* justify-content: space-between; */
    font-weight: 700;
    padding-top:4px;
}

.fc-custom-info-content .icon-group > *:not(:last-child) {
    margin-right: 2px;
}

.fc-custom-info-content .icon-group .pcounter {
    margin-right: 1.5px;
    line-height: 1;
    vertical-align: middle;
}

.fc-custom-info-content .img-icon {
    width: 15px;
    height: 15px;
}

/* .fc-widget-content > .current-time {
    height: 1px;
    background-color: grey;
} */

.fc-widget-content > .temp-cell {
    border-top: 2px solid #AAAAAA;
}
.temp-cell .current-time {
    position: relative;
    top: 50%;
    width: 100%;
    height:1px;
}

.temp-cell .current-time > .btn-group-1 {
    position: absolute;
    left: 20%;
    top: -1.1rem;
}

.btn-group-1 > .btn.btn-primary.btn-bk-bsg {
    background-color: #041D412B;
    color: #041D41;
    border: unset;
    font-weight:700;
    z-index: 99;
}

.btn-group-1 > .btn.btn-primary.btn-bk-mimatch {
    background-color: #FFAD4621;
    color: #FFAD46;
    border: unset;
    font-weight:700;
    z-index: 99;
}

/*
 Adjusts the display of the booking calendar events on mobile.
 - No icons or pill displayed
 - Left aligned the time display using margin
 - Overflow on text display much cleaner using ellipsis
 */
@media screen and (max-width: 575.98px) {
    .fc-event .fc-custom-info-content {
        display: none;
    }
    .fc-event .fc-time {
        margin: 0 auto;
    }
    .fc-event .fc-title {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Using the opacity, you can blend the colours to indicate the overlap */
/* .bsg-mimatch-bookings {
    background-image: linear-gradient(45deg, rgba(0, 171, 205, 0.2) 25%, rgb(255, 168, 0) 25%, rgb(255, 168, 0) 50%, rgba(0, 171, 205, 0.2) 50%, rgba(0, 171, 205, 0.2) 75%, rgb(255, 168, 0) 75%, rgb(255, 168, 0) 100%) !important;
    background-size: 56.57px 56.57px !important;
} */

.class-one {
    background-image: linear-gradient(45deg, #CCEBF3 25%, #FFF3D1 25%, #FFF3D1 50%, #CCEBF3 50%, #CCEBF3 75%, #FFF3D1 75%, #FFF3D1 100%);
}
/* END PROTOTYPING */
/* #endregion */


/* #region Online Booking Modals */

.title-header {
    border-bottom: 1px solid #DEDEDE;
    display: flex;
    align-items: center;
}

.title-header h4 {
    font-weight: 400;
}

.title-header h6 {
    color: #AAAAAA;
    font-weight: 400;
}

.title-header button {
    padding: 10px 15px;
}

.title-header .title-container, .title-header .button-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.title-header .button-container button {
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.online-booking-availability {
    width: 513px;
}

.online-booking-availability button.fancybox-close-small:after, #add-booking-form button.fancybox-close-small:after {
    background: transparent;
    color: #DEDEDE;
    top: 15px;
    outline: none;
}

.online-booking-availability button, #add-booking-form button {
    outline: none;
}

.online-booking-availability h2 {
    margin-bottom: 25px !important;
}

.online-booking-availability .simulator-block {
    padding: 10px 20px;
    color: #000000;
    background-color: #DEDEDE;
    display: inline-block;
}

.online-booking-availability .simulator-block p {
    margin-bottom: 0;
}

.online-booking-availability .availability-info h6 {
    color: #000000;
    font-size: 16px;
}

.online-booking-availability .availability-info .timeslot {
    color: #ABABAB;
    font-size: 16px;
}

.online-booking-availability .availability-info .timeslot span {
    color: #000000;
}

.online-booking-availability .delete-availability, .delete-btn-container button, .delete-confirmation-modal .modal-footer .delete-bay, .view-booking-form-modal .view-cancel {
    background-color: rgba(234,107,107,0.28);
    color: #EA6B6B !important;
    font-weight: 600;
}

.delete-confirmation-modal .modal-footer .delete-bay:hover {
    border-color: #ec7568;
    background-color: #ec7568;
    color: #ffffff !important;
}

.delete-confirmation-modal .modal-footer button {
    padding: 10px 15px;
    outline: none;
}

.delete-confirmation-modal .modal-header {
    border: none;
}

.delete-confirmation-modal .modal-header span {
    color: #DEDEDE;
}

.delete-confirmation-modal .modal-footer {
    border: none;
}

.online-booking-availability .delete-availability:hover, .delete-btn-container button:hover {
    color: #ffffff !important;
}

.pro-tip {
    background-color: rgba(255,217,98,0.25);
    padding: 10px 15px;
    color: #7C7A7A;
}

.pro-tip p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.5;
}

.bay-list .number-box {
    background-color: #DEDEDE;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 2px;
}

.bay-list .inactive .number-box {
    color: #AAAAAA;
}

.bay-list .input-container {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    flex-grow: 1;
}

.bay-list .input-container input {
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    color: #000000;
    font-size: 16px;
    padding: 10px;
    width: 100%;
}

.delete-btn-container button {
    font-size: 14px;
    padding: 10px 25px;
}

.bay-list-container {
    min-height: 250px;
}

.bay-list .bay-item {
    margin-bottom: 20px;
}

.bay-list #save-bay-list {
    color: #ffffff !important;
}

.bay-list .add .number-box {
    background-color: transparent;
    border: 2px solid #1cc9e4;
    color: #1cc9e4;
    margin-right: 20px;
    font-weight: 700;
}

.bay-list .add .add-desc p {
    margin-bottom: 0;
    color: #1cc9e4;
    font-weight: 700;
}

.bay-list .bay-item.add {
    cursor: pointer;
}

/* .opening-hours-container {
    padding-left: 20px;
} */

.edit-bay-btn {
    cursor: pointer;
}

.delete-confirmation-modal.show {
    z-index: 99999;
    background-color: rgba(0,0,0,0.6);
}
/* #endregion */

/* #region QUICK BOOKING FORM */
#quick-booking-form {
    width: 623px;
    max-width: 100%;
}

#quick-booking-form .admin-booking {
    padding: 10px 0;
}

#quick-booking-form .form-control {
    border-color: #7A7A7A;
}
#quick-booking-form .players-input .input-group-append .input-group-text {
    border-color: #7A7A7A;
    background-color: #EFEFEF;
}
#quick-booking-form .players-input input {
    min-width: 50px;
    flex-grow: 0;
}

/* #region RECURSIVE */
/* Overriding default bootstrap for input groups */
.input-group.ig-recursive .input-group-append .input-group-text {
    border-color: #7A7A7A !important;
    background-color: #EFEFEF;
}
.input-group.ig-recursive input {
    border-bottom-left-radius: 4px !important;
    border-top-left-radius: 4px !important;
}
.input-group.ig-recursive .input-group-append > .input-group-text{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}
/* .input-group.ig-recursive .input-group-append > .input-group-text.unit-week::before {
    content: 'Week';
}
.input-group.ig-recursive .input-group-append > .input-group-text.unit-week::before {
    content: 'Wk';
}
.input-group.ig-recursive .input-group-append > .input-group-text.unit-week::before {
    content: 'Week';
}
.input-group.ig-recursive .input-group-append > .input-group-text.unit-week::before {
    content: 'Wk';
} */
/* #endregion */

#quick-booking-form .add-clubs {
    background-color: unset;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    border-radius: 5px;
    transition: .2s ease;
}

#quick-booking-form .add-clubs:hover,
#quick-booking-form .add-clubs:focus {
    outline-color: transparent;
    font-weight: 600;
}

#quick-booking-form .add-clubs:hover .number-box,
#quick-booking-form .add-clubs:focus .number-box {
    background-color: #1cc9e4 !important;
    color: #ffffff;
}
#quick-booking-form .flatpickr-wrapper {
    width: 100%;
    margin-bottom: 5px;
}

/* #region Flatpicker UI Customization / Normalizations */
/*
 * Due to a recent change with flatpickr version, the styling need to be updated.
 * However, the version change did not coexist well with admin theme CSS and needed to be updated.
 */
.u-datepicker--v3 .flatpickr-calendar.arrowTop {
    margin-top: 5px;
}
.u-datepicker--v3 .flatpickr-calendar.hasTime {
    width: 300px;
}
.u-datepicker--v3 .flatpickr-calendar.hasTime .flatpickr-time {
    border-top: none;
}
/* #endregion */

#quick-booking-form #players[type=number]::-webkit-inner-spin-button,
#quick-booking-form #players[type=number]::-webkit-outer-spin-button {
    display: none;
}

/* Refactoring required for CSS in :435 */
.number-box {
    background-color: transparent;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 2px;
    border: 2px solid #1cc9e4;
    font-weight:700;
}
.number-box-wrapper {
    color: #1cc9e4
}

/* .bsg--element.active { display: none; } */
/* #endregion */

/* #region SIDEBAR ADJUSTMENTS */
@media (min-width: 992px) {
    .u-sidebar-navigation-v1--mini #sideNavMenu {
        width: inherit;
        /* position: fixed; */
    }

    .u-sidebar-navigation-v1--mini {
        width: 50px !important;
    }

    #sideNavMenu .u-sidebar-navigation-v1-menu-item > a span:first-child {
        transition: none;
        opacity: 1 !important;
    }
}
#sideNavMenu .u-sidebar-navigation-v1-menu-item > a span {
    opacity: 1;
    transition: opacity 0.2s 50ms;
}

.main-page-container {
    min-height: calc(100vh - 65px);
}
@media screen and (max-width: 575.98px){
    .main-page-container {
        overflow-x: hidden;
    }
}

#sideNav {
    height: auto;
}

#sideNavMenu {
    z-index: 99;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    position:sticky;
    top: 65px;
}

@media screen and (max-width: 575.98px) {
    #sideNavMenu {
        width: inherit;
        /* Allows for nav items to stay fixed on content scroll */
        position: fixed;
        overflow-y: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}

#sideNavMenu::-webkit-scrollbar {
    display:none;
}

.page-content-col {
    margin-left: 0;

}

/* @media screen and (min-width: 992px) {
    .page-content-col {
        margin-left: 0;
    }
} */
@media screen and (min-width: 768px) {
    .page-content-col {
        padding-bottom: 65px;        
    }
}

.view-booking-form-modal .line-element.phone-number {
    cursor: pointer;
}

.u-sidebar-navigation-v1--mini {
    width: 0;
}
/* #endregion */

/* #region view-booking-form */
.view-booking-form-modal .media {
    flex-direction: column;
}

.view-booking-form-modal .line-item h5 {
    font-size: 16px;
    color: #ABABAB;
    font-weight: 600;
    margin-bottom: 8px;
}

.view-booking-form-modal .line-item .line-element {
    padding-bottom: 5px;
}

.view-booking-form-modal .line-item span {
    font-size: 16px;
    color: #272727;
}
.view-booking-form-modal .line-item span:empty::after {
    content: 'None';
    color: #a5a5a5
}
.view-booking-form-modal .line-item i {
    font-size: 16px;
    color: #000000;
    padding-right: 15px;
}

.view-booking-form-modal .line-item {
    padding-bottom: 15px;
}

.view-booking-form-modal .line-item .phone-number p {
    margin-bottom: 0;
    font-size: 14px;
}

.view-booking-form-modal .line-item .booking-time i {
    padding-top: 4px;
}

.view-booking-form-modal .line-item .booking-time p {
    margin-bottom: 0;
}

.view-booking-form-modal .line-item .email-address span{
    line-break: anywhere;
}

.view-booking-form-modal .booking-type {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.view-booking-form-modal .title-section {
    display:flex;
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}

#quick-booking-form .form-control:disabled {
    background-color: #ffffff;
}

.view-booking-form-modal .title-section .player-booking-info h3 {
    font-size: 20px;
}

@media (max-width: 767.98px) {
    .view-booking-form-modal .action-btn-container .btn, .view-booking-form-modal .action-btn-container button {
        width: 160px;
    }

    #quick-booking-form .add-clubs {
        padding: 18px 0;
    }
}

@media (max-width: 575.98px) {
    .view-booking-form-modal .title-section {
        -webkit-box-align: initial!important;
        -ms-flex-align: initial!important;
        align-items: initial!important;
    }

    .view-booking-form-modal .title-section .player-booking-info {
        margin-bottom: 10px;
    }

    /* .view-booking-form-modal .edit-booking-btn-container {
        width: 100%;
    }

    .view-booking-form-modal .edit-booking-btn-container .btn {
        width: inherit;
    }

    .view-booking-form-modal .button-wrapper-container .btn {
        width: 50%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .view-booking-form-modal .button-wrapper-container button {
        width: 50%;
    }

    .view-booking-form-modal .button-wrapper-container {
        margin-top: 10px;
    } */

    /* .view-booking-form-modal .button-wrapper-container .btn:first-child {
        width: 100%;
        display: block;
    }

    .view-booking-form-modal .button-wrapper-container .btn:nth-child(2) {
        width: 50%;
    }

    .view-booking-form-modal .button-wrapper-container button {
        width: 50%;
    } */

    .view-booking-form-modal .action-btn-container .btn, .view-booking-form-modal .action-btn-container button {
        width: 90px;
        padding: 0.92857rem 0rem;
        text-align: center;
    }
}

/* #endregion view-booking-form */

/* #region Booking Tab Responsive */
@media (max-width: 991.98px) {
    /* .booking-table-header {
        -webkit-box-align: initial!important;
        -ms-flex-align: initial!important;
        align-items: initial!important;
    } */
    .booking-table-header {
        flex-flow: row wrap
    }

    .booking-table-header .title-container, .booking-table-header .media-body {
        flex: 1 100%;
    }

    .booking-table-header h1 {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .booking-table-header #datepickerWrapper {
        margin: 10px 0px;
    }

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

    .fc-content .checkbox {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .booking-table-header {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 575.98px) {
    .booking-table-header #datepickerWrapper {
        margin: 0 !important;
    }

    .booking-table-header .media-body {
        margin-bottom: 5px;
    }

    .booking-table-header .media-body .form-group {
        vertical-align: middle;
    }

    .booking-table-header .title-container {
        margin-bottom: 10px;
    }
}
/* #endregion Booking Tab Responsive */

/* PROTOTYPING */
.fc-unthemed td.fc-today {
    background-color: transparent !important;
}

/* #region BG Event - Popper */

/* Relevent CSS modified can be found in bootstrap.css:5678 */

.popover.BSG {
    border: 2.5px solid #041D41;
    border-radius: .3rem
}
.popover.MiMatch {
    border: 2.5px solid #FFAD46;
    border-radius: .3rem
}
.popover.Coaching {
    border: 2.5px solid #0BA508;
    border-radius: .3rem
}
.popover.Unavailable{
    border: 2.5px solid #ff0000;
    border-radius: .3rem
}

.popover .arrow {}

.popover.MiMatch .arrow::before {
    border-right-color: #FFAD46;
    left: 0;
}
.popover.Coaching .arrow::before {
    border-right-color: #0BA508;
    left: 0;
}
.popover.BSG .arrow::before {
    border-right-color: #041D41;
    left: 0;
}

.popover .arrow::after {
    border-right-color: #fff;
    border-right-width: 0.4rem;
    /* This offset modifies the thickness of the arrow */
    left: 3.5px;
}

.popover-header {
    padding: 0.6rem .75rem 0;
    background-color: #fff;
    border-bottom: unset;
    font-weight: 700;
}

.popover-body {
    padding: 0rem 0.75rem 0.6rem;
    color: #212529;
    text-align: center;
}
/* #endregion */


/* #region MIMATCH UPDATES */
.view-booking-form-modal .js-copy-hover .icon {
    color: #1CC9E4;
    vertical-align: middle;
    padding-right: 5px;
    cursor: pointer;
}
.view-booking-form-modal .js-copy-hover::after {
    content: 'Copy';
    opacity: 0;
    cursor: pointer;
}
.view-booking-form-modal .js-copy-hover:hover::after {
    /* content: 'Copy'; */
    opacity: 1;
    color: #1CC9E4;
    font-size: 1rem;
    transition: opacity 0.5s ease-in-out;
}

#quick-booking-form #datepickerBookingWrapperTime,
#quick-booking-form #datepickerBookingWrapper,
#quick-booking-form #simulatorSelect {
    border-radius: 4px;
    border: unset;
    color: #000;
    background-color: rgba(222,222,222,0.2);
}

/* END PROTOTYPING */
#quick-booking-form #datepickerBookingWrapperTime,
#quick-booking-form #datepickerBookingWrapper,
#quick-booking-form #simulatorSelect .dropdown-toggle {
    padding: 6px 15px;
}
#quick-booking-form #datepickerBookingWrapperTime .hs-admin-angle-down,
#quick-booking-form #datepickerBookingWrapper .hs-admin-angle-down ,
#quick-booking-form #simulatorSelect .hs-admin-angle-down {
    color: #AAAAAA;
}
/* #endregion */

/* #region PUBLIC HOLIDAY */
.nav-tabs.bsg--tabs > .nav-link.active {
    color: #1CC9E4;
    font-weight: 700;
    border: unset;
    border-bottom: 4px solid #1CC9E4;
}
.public-holiday-modal #datepickerWrapper > input {
    padding-top: 11.5px;
    padding-bottom: 12.5px;
}

.public-holiday-modal .u-select--v2-select .dropdown-toggle {
    border-color: #7A7A7A;
}
.public-holiday-modal .holiday-datepicker {
    padding-top: 9px;
    padding-bottom: 12.5px; 
}
.admin-btn-v1 {
    font-weight: 700;
}

.admin-btn-v1:hover, .admin-btn-v1:active {
    background-color: #fff;
    color: #1CC9E4;
    font-weight: normal;
}
.admin-btn-v1::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

@media screen and (min-width: 992px) {
    table.js-datatable.promotions-manage thead tr>th:nth-child(1) {
        /* background-color: #00abcd; */
        width: 25%;
    }
}
/* #endregion */
.file-icon {
    display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100px;
    margin-right: 2px;
}
.file-icon > i {
	vertical-align: middle;
}
.pdf-document-input .button-block {
    display: inline-block;
}

#price-matrix-table tr th {
    font-weight: normal;
}

#price-matrix-table tr th:nth-child(2) {
    font-weight: bold;
}

#price-matrix-table tr [data-per-player] {
    font-weight: bold;
}

#price-matrix-table tr.active td:nth-child(1),
#price-matrix-table tr.active td:nth-child(2) {
    background-color: #92FF88;
}

/* #price-matrix-table th:first-child {
    width: 30%;
} */

.edit-booking-col .datepicker-reset > a{
    font-size: 15px;
    color: #1CC9E4;
    background-color: #fff;
    border: 1px solid #1CC9E4;
}


@media (min-width: 1655px) {
    .edit-booking-col {
        max-width: 1400px;
        flex-basis: 1400px;
    }
}

/* 
 * There's no way to disable the no result text with bootstrap-select.
 * Instead just do not display it.
 */
.venue__form .bootstrap-select.btn-group .no-results {
    display: none;
}

/* #region Weekly Report Page */
.bsg-reports .bsg-reports__header h1 {
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
}

.bsg-reports .bsg-reports__subtitle {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    /* identical to box height */
    color: #B9B9B9;
}
.bsg-reports .bsg-reports__footnote {
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
}
.report-list .report-item-row:first-child {
    font-weight: 700;
}
.report-list .report-item-row {
    margin-bottom: 20px;
}
.report-list .report-item-row span {
    display: block;
    font-size: 18px;
    min-width: 263px;
}
/* #endregion */