/*Menu Bar styling */
.fa-sport:before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fal' data-icon='racquet' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' class='svg-inline--fa fa-racquet fa-w-20 fa-3x'%3E%3Cpath fill='white' d='M615.5 59.6C560.6-17.9 433.3-19.2 332.7 52c-57.2 40.5-94.4 96-106.5 150.6-10.7 48.2-34.6 91.7-66.1 129.2-17.9-10-32.2.2-33.9 1.4L13.6 412c-14.4 10.1-18 30-7.8 44.5l29.4 41.9c9.9 14.1 29.7 18.2 44.5 7.8l112.6-78.8c9.5-6.7 13.7-17.6 13-28.4 36-13.7 73.8-21.7 112.3-21.7 31.6 0 112.3 21.8 211.5-48.4 101.8-72.2 140.6-192.8 86.4-269.3zM61.3 480l-29.4-41.8 112.6-78.8 29.4 41.9L61.3 480zm130-109.6l-9.7-13.9c18.7-21.7 34.8-44.9 47.4-69.6 11 33.1 29.1 49.8 44.4 61.5-27.6 3.9-55.2 11.5-82.1 22zm319.2-67.6c-85.6 60.6-194 62.4-238.3-.1-43.9-62-8.5-162.7 79-224.7 84.7-60 193.6-63.1 238.3 0 42 59.4 11.1 161.1-79 224.8z' class=''%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    color: #fff;
    position: relative;
    content: "";
    display: block;
    /*background-color:red;*/
    min-width: 1em;
    min-height: 1em;
    background-repeat: no-repeat;
    background-position: center;
}

#scheduleviewdata > div {
    display: inline-block;
}

#sportlist-html li a {
    margin: 0.446em;
    font-size: 12.5px;
    border: 1px solid #a09242;
    color: #a09242;
    padding: 0.7em 1em;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0.3125em;
    user-select: none;
}


    #sportlist-html li a:after {
        display: none;
    }

.fa-range:before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='golf-ball' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 416 512' class='svg-inline--fa fa-golf-ball fa-w-13 fa-3x'%3E%3Cpath fill='white' d='M416 208C416 94.2 324.7 1.8 211.3 0 97.3-1.8 2.5 89.4.1 203.4c-1.3 60.7 23.6 115.3 64 154.1V416c0 30.9 25.1 56 56 56h16c4.4 0 8 3.6 8 8v20c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12v-20c0-30.9-25.1-56-56-56-12.8 0-24 2.1-24-8v-32h192v32c0 10.1-11.2 8-24 8-30.9 0-56 25.1-56 56v20c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12v-20c0-4.4 3.6-8 8-8h16c30.9 0 56-25.1 56-56v-58.5C391.3 319.7 416 266.8 416 208zM208 48c88.2 0 160 71.8 160 160 0 52.7-25.9 99-65.5 128h-189C73.9 307 48 260.7 48 208c0-88.2 71.8-160 160-160zm48 142.9c0 18.3-14.8 33.1-33.1 33.1-14.4 0-26.3-9.3-30.9-22.1 26.3 9.4 51.5-15.2 41.9-41.9 12.8 4.6 22.1 16.5 22.1 30.9zm80 16c0 18.3-14.8 33.1-33.1 33.1-14.4 0-26.3-9.3-30.9-22.1 26.3 9.4 51.5-15.2 41.9-41.9 12.8 4.6 22.1 16.5 22.1 30.9zm-64 64c0 18.3-14.8 33.1-33.1 33.1-14.4 0-26.3-9.3-30.9-22.1 26.3 9.4 51.5-15.2 41.9-41.9 12.8 4.6 22.1 16.5 22.1 30.9z' class=''%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    color: #fff;
    position: relative;
    content: "";
    display: block;
    /*background-color:red;*/
    min-width: 1em;
    min-height: 1em;
    background-repeat: no-repeat;
    background-position: center;
}

.ui-page {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Chrome and Safari */
    -moz-backface-visibility: hidden;
}


[data-role="dialog"] .ui-content {
    top: 0px; /*your header height*/
}

/*//Kyle Taylor, [19.11.19 22:06]
quick fix*/


[data-role="dialog"] .ui-content {
    top: 0px; /*your header height*/
}


.ui-select, .ui-selectmenu {
    max-height: calc(100% - 100px);
}

.title {
    display: inline-block;
    width: 100%;
    font-size: 40px;
    text-shadow: none;
    font-weight: 400;
    z-index: 999;
    padding-left: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    max-height: 70px;
    min-height: 70px;
}

.ui-listview > li h1 {
    text-align: left;
    font-size: xx-large;
    display: inline-block;
    overflow: initial;
    white-space: initial;
}

.ui-listview > li h2 {
    text-align: left;
    font-size: larger;
    display: inline-block;
    overflow: initial;
    white-space: initial;
}

.ui-listview > li h3 {
    text-align: left;
    font-size: medium;
    display: inline-block;
    overflow: initial;
    white-space: initial;
}

.ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
    text-align: left;
    font-size: small;
    display: inline-block;
    overflow: initial;
    white-space: initial;
}

.add-court-button {
    display: inline-block !important;
    font-size: 15px !important;
    position: fixed;
    top: 20px;
    right: 20px;
}

.ui-input {
    text-shadow: none;
}

#button10 {
    font-size: 15px !important;
    position: initial;
    margin-right: 70px !important;
    float: right;
}

#button1 {
    font-size: 15px !important;
    position: initial;
    margin-right: 60px !important;
    float: right;
}

#mylinkwiz {
    font-size: 15px !important;
    position: initial;
    margin-right: 60px !important;
    float: right;
}

#button9 {
    font-size: 15px !important;
    position: initial;
    margin-right: 70px !important;
    float: right;
}

.add-court-button1 {
    display: inline-block !important;
    font-size: 15px !important;
    position: fixed;
    top: 20px;
    right: 20px;
}




#courtlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#exclusionlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#costlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#additionalitemlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#packageitemlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#tvitemlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#sportlist-list li {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 15px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    display: flex;
}

#sportlocationlist-list li {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 5px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#sporttypelist-list li {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 5px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#sportplayertypelist-list li {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 5px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#periodlist-list li {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 5px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.court-detail {
    display: inline-block;
    min-width: 14%;
}

.court-btn {
    display: inline-block;
    margin-left: 80px;
}

    .court-btn a {
        display: inline-block;
    }

.court-deletebtn {
    float: right;
}

.sport-leftbtn {
    float: left;
}

.sport-image {
    margin-bottom: 10px;
    float: left;
    max-width: 200px;
    max-height: 200px;
    min-width: 200px;
    min-height: 200px;
}

.addcourtclhide {
    display: none !important;
}

.addcourtclshow {
    display: inline-block !important;
}

#tvsetup .tvsetupimageitem {
    min-height: 150px;
    max-height: 150px;
    min-width: 150px;
    max-width: 150px;
    vertical-align: top;
    margin-top: 40px;
}

#addcourt-heading {
    display: inline-block;
    font-size: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
}

#addcourt-heading {
    display: inline-block;
    font-size: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
}




.slotlist {
    border: none;
}

.header-line {
    border-bottom: solid;
    width: 98%;
    margin-bottom: 10px;
}


.header-lineaport {
    border-bottom: solid;
    width: 40%;
    margin-bottom: 10px;
}

#court-delete {
}

#court-data {
    margin-top: 10px;
    display: block;
}

#court-name {
    font-size: 18px;
    padding: 10px 10px 5px 15px;
    text-shadow: none;
}

.addpage-name {
    font-size: 18px !important;
    padding: 10px 10px 5px 15px !important;
    text-shadow: none !important;
}

#sport-name {
    font-size: 25px;
    padding: 10px 10px 5px 15px;
    text-shadow: none;
}

#sport-emails {
    font-size: 25px;
    padding: 10px 10px 5px 15px;
    text-shadow: none;
}

#sport-arenavenue {
    display: inline-block;
    font-size: 25px;
    padding: 10px 10px 5px 15px;
    text-shadow: none;
}

.court-namediv {
    min-width: 40%;
    max-width: 40%;
}

.court-namedivacc {
    min-width: 20%;
    max-width: 20%;
    display: inline-block;
}

.groupdiv {
    display: inline-block;
    min-width: 100%;
    margin-top: 0px;
}

.groupdivsport {
    display: inline-block;
    min-width: 100%;
    margin-top: 10px;
}

.groupdivsport1 {
    min-width: 100%;
    margin-top: 10px;
}

.groupdivull {
    max-width: 40%;
    margin-top: 30px;
}

.groupdivulr {
    display: inline-block;
    min-width: 40%;
    margin-top: 10px;
    float: left;
    margin-left: 30px;
}

.groupdivuls {
    display: inline-block;
    min-width: 40%;
    margin-top: 10px;
    float: left;
    margin-left: 30px;
}

.groupdivfoot {
    display: inline-block;
    min-width: 100%;
    margin-top: 50px;
}

#select-court-type {
    font-size: 16px;
}


.court-leftlabel {
    width: 20% !important;
    max-width: 20% !important;
    float: left;
    margin-right: 50px !important;
}

.court-leftlabelbook {
    width: 40%;
    float: left;
    margin-right: 0px;
}

.court-leftlabeltime {
    width: 25%;
    float: left;
    margin-right: 0px;
}

.court-leftlabeltimeselect {
    float: left;
}

.court-leftlabel div {
    width: 100% !important;
    max-width: 100%;
}

#select-court-area {
    font-size: 16px;
}

.court-rightlabel {
    width: 20% !important;
    max-width: 350px !important;
    float: left;
    margin-right: 65px !important;
}

.court-rightlabelbook {
    width: 40%;
    float: left;
    margin-right: 20px;
}

.legend span {
    font-size: x-small;
    margin-right: 8px;
    margin-bottom: -5px;
}

.legend {
    margin-bottom: -9px;
    margin-left: -4px;
}

.court-rightlabel div {
    width: 100%;
    max-width: 100%;
}

.court-daysbox {
    width: auto;
    margin-right: 10px !important;
}

.court-advday {
    margin-right: 10px !important;
    display: inline-block !important;
}

    .court-advday > div {
        width: 40%;
        margin-right: 10px !important;
        display: inline-block;
    }

.court-period > div {
    width: 90%;
    margin-right: 10px !important;
}

.court-period {
    margin-right: 10px !important;
    display: inline-block !important;
}

.inputadvdays {
    display: inline-block;
}

.dateexc div {
    display: inline-block;
}

.dateexc {
    display: inline-block !important;
}

.dayselect {
    display: inline-block !important;
}

.next-step {
    width: auto;
    float: left;
    bottom: 0;
}

.view-period {
    width: auto;
    display: inline-block;
}

.add-slot {
    width: auto;
    float: right;
    bottom: 0;
}

.flipperhide {
    display: none !important;
}

.flippershow {
    font-size: 26px !important;
    right: 18px;
    top: 100px;
    position: fixed !important;
    padding: 10px !important;
    background: black;
    height: 50px !important;
}

.ui-content {
    position: absolute;
    top: 90px; /*your header height*/
    right: 0;
    bottom: 0px; /*your footer height */
    left: 0;
}




#multitimeslots, #allowguest {
}

.inputdis {
}

.slotitemscost {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    min-width: 128px;
    max-width: 128px;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}

.slotitems {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    min-width: 150px;
    max-width: 150px;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}
.slotitemscourts {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    min-width: 200px;
    max-width: 200px;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}
.slotadditems {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    width: 25em;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}

.slotdiscitems ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow {
    display: inline-block;
    background: transparent;
    border-color: transparent;
    border-width: 0px;
    border-spacing: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
    height: 120px;
    vertical-align: text-top;
}

.slotadditemother {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    width: 120px;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}

.slotadditemotheract, .slotadditemaddtime {
    display: inline-block;
    margin-left: 35px;
    width: max-content;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}

.slotitemsH {
    display: inline-block;
    width: auto;
    margin-left: 0px;
    min-width: 200px;
    max-width: 200px;
    white-space: initial;
    text-align: left;
    vertical-align: text-top;
    margin-top: 15px;
}

.slotinputs {
    display: inline-block;
    width: 18%;
    margin-left: 7px;
}

.ui-input-text {
    text-shadow: none !important;
}

.slotdivid {
    font-size: 32px;
    margin-left: 10px;
    margin-right: 5px;
}

.nmemberp {
    margin-left: 70px;
}

#addDays {
    float: right;
    display: inline-block;
    margin-right: 20px;
}

.divinline {
    display: inline-block !important;
    margin-right: 15px !important;
    float: left;
    margin-top: 10px !important;
    font-size: 22px !important;
}

.dateadd {
    width: 18%;
    display: inline-block !important;
    margin-right: 20px !important;
    float: left;
    font-size: 22px !important;
}

.dateaddbook {
    display: inline-block !important;
    margin-right: 20px !important;
    float: left;
}

.select-day-type {
    width: 30%;
    display: inline-block !important;
    position: absolute;
    margin-bottom: 10px !important;
}

.qtyadditional .ui-input-text {
    max-width: 90px;
    min-width: 90px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#schedulepopup {
    top: 50px;
    left: 50px;
}

#courtinfopopup {
    top: 50px;
    left: 50px;
    padding: 20px;
    background-color: black;
    font-size: large;
}

.popupdata {
    width: auto;
    height: auto;
}

.imgfit {
    border-radius: 8px;
    position: absolute;
    margin-left: -1px;
}


.systemaccesshide {
    display: none !important;
}

.bookitemavail {
    background: #a09242 !important;
    color: #fff !important;
}

.bookitempeak {
    background: #899719 !important;
    color: #fff !important;
}

.bookitemunavail {
    background: #111 !important;
    color: #f9f6e3 !important;
}

.bookitemsel {
    background: #1bb1ea !important;
    color: #fff !important;
}

.bookitembooked {
    background: #0094ff !important;
    color: #f9f6e3 !important;
}

.bookitemreserved {
    background: #100a65 !important;
    color: #f9f6e3 !important;
}

.bookitemcheckedin {
    background: #1d6913 !important;
    color: #f9f6e3 !important;
}

.bookitemtimeavail {
    background: #404040 !important;
    color: #fff !important;
}

.bookitemtimepeak {
    background: #899719 !important;
    color: #fff !important;
}

.bookitemtimeunavail {
    background: #111 !important;
    color: #f9f6e3 !important;
}

.bookitemtimesel {
    background: #1bb1ea !important;
    color: #fff !important;
}

.bookitemtimebooked {
    background: #0094ff !important;
    color: #f9f6e3 !important;
}

.bookitemtimereserved {
    background: #100a65 !important;
    color: #f9f6e3 !important;
}

.bookitemtimecheckedin {
    background: #1d6913 !important;
    color: #f9f6e3 !important;
}

.bookitemview {
    background: #4f4c49 !important;
    color: #fff !important;
}

.bookitemleg {
    background: #9a9696 !important;
    color: #fff !important;
}

.bookitemunavailview {
    background: #000 !important;
    color: #fff !important;
}

.bookitembookedview {
    background: #0094ff !important;
    color: #fff !important;
}

.bookitemcheckedinview {
    background: #1d6913 !important;
    color: #fff !important;
}

.bookitemselview {
    background: #a09242 !important;
    color: #fff !important;
}

.imgsportlist {
    max-height: 250px;
    float: left;
    min-width: 200px;
    max-width: 280px;
}

.testl {
    width: auto;
}

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

#popupview {
    padding: 15px 15px;
    overflow-x: auto;
    bottom: 0;
    left: 0;
}


.sortorderp1_0, .sortorderp1_1, .sortorderp1_2 {
    margin-left: 0px !important;
    min-width: 130px !important;
}

.sortorderp2_0, .sortorderp2_1, .sortorderp2_2 {
    margin-left: 5px !important;
    min-width: 0px !important;
}

.sortorder_0, .sortorder_1, .sortorder_2 {
    display: inline-block !important;
    margin-left: -55px !important;
}

.courtcard {
    display: inline-block;
    border: black;
    /*border-style: solid;*/
    border-radius: 10px;
    padding-top: 25px;
    padding-left: 10px;
    padding-bottom: 10px;
    /*width: 400px;*/
    margin: 2px;
    /*height: 120px;*/
    padding-right: 10px;
    float: left;
    background: #111;
    color: white;
}

.availcourtcard {
    display: inline-block;
    border: black;
    border-style: solid;
    border-radius: 10px;
    padding-top: 25px;
    padding-left: 10px;
    padding-bottom: 10px;
    width: 400px;
    margin: 2px;
    height: 120px;
    padding-right: 10px;
    float: left;
    background: #f9f6e3;
    color: #111;
}

.courtcardview {
    display: inline-block;
    border: black;
    /*border-style: solid;*/
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    /*width: 400px;*/
    margin: 2px;
    /*height: 120px;*/
    padding-right: 10px;
    float: left;
    background: #111;
    color: white;
}

.courtcardcheckin {
    display: inline-block;
    border: black;
    /*border-style: solid;*/
    border-radius: 10px;
    padding-top: 7px;
    padding-left: 10px;
    padding-bottom: 10px;
    /*width: 400px;*/
    margin: 2px;
    /*height: 120px;*/
    padding-right: 10px;
    float: left;
    background: #111;
    color: white;
}

.availcourtcardview {
    display: inline-block;
    border: black;
    border-style: solid;
    border-radius: 10px;
    padding-top: 25px;
    padding-left: 10px;
    padding-bottom: 10px;
    width: 400px;
    margin: 2px;
    height: 120px;
    padding-right: 10px;
    float: left;
    background: #f9f6e3;
    color: #111;
}

.viewcourtsheader {
    margin-top: -20px;
    margin-bottom: 0px;
}

.costnamelabel > div {
    display: inline-block;
    width: 40%;
}

#bookingpopup-popup {
    top: 15% !important;
    left: 15% !important;
    max-width: 70% !important;
    min-width: 50% !important;
    width: 50%;
    max-height: 50% !important;
    min-height: 40% !important;
    height: 40%;
}

#cartpopup-popup {
    top: 15% !important;
    left: 15% !important;
    max-width: 70% !important;
    min-width: 50% !important;
    width: 50%;
    max-height: 50% !important;
    min-height: 40% !important;
    height: 40%;
}

.lbinput div {
}

#selectedslots {
    display: inline-block;
    float: right;
    margin-top: -35px;
    padding-top: 7px;
    margin-bottom: -7px
}

#bookingtemplate-html {
    display: inline-block;
    padding: 10px 15px;
    width: 95%;
}

#cartpopup {
    height: 100%;
}

.player-leftlabel {
    display: inline-block;
    width: 32% !important;
    float: left;
    margin-top: 15px;
}

    .player-leftlabel input {
        text-shadow: none;
    }

.player-rightlabel {
    display: inline-block;
    width: 32% !important;
    float: left;
    margin-right: 10px !important;
}

.courtimgpopupsport {
    display: inline-block;
    float: right;
    margin-right: 15px;
    width: 30%;
}

    .courtimgpopupsport img {
        width: 90%;
    }

.courtimgpopup {
    display: inline-block;
    float: left;
    margin-left: 15px;
    width: 30%;
    margin-top: 43px;
}

.playertable {
    border-style: solid;
    border-color: #a09242;
    border-width: thin;
}

.totaltable {
    border-style: solid;
    border-color: #a09242;
    text-align: center;
    vertical-align: central;
    border-width: thin;
}

.courtimgpopup img {
    width: 20%;
}

#cartdata {
    font-size: large;
    float: right;
    margin-right: 40px;
    margin-top: 27px;
}

.cartdiv {
    display: inline-block;
}

.bookdiv {
}

#carttotal {
    float: right;
}

.locationlishow {
    display: block;
}

.locationlihide {
    display: none;
}

.controlshow {
    display: inherit;
}

.controlhide {
    display: none;
}


.datedate {
    display: inline-block;
}

.dateday {
    display: none;
}

.daydate {
    display: none;
}

.dayday {
    display: inline-block;
}

.onlymember {
    display: none;
}



.dateinput {
    width: 200px;
    display: inline-block !important;
    position: absolute;
}

.courtperioditem {
    min-width: 95%;
    max-width: 98%;
}

#cardcontainer {
    display: block;
    width: 10000000px;
    width: max-content;
}

.cardcont {
    width: 100%;
}


#checkinimg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: -webkit-fill-available;
}

#viewtable {
    table-layout: fixed
}

    #viewtable td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


#viewtablecheckin {
    table-layout: fixed
}

#bookingtablehtml td {
    border-width: thin;
    padding: 3px 8px;
}

#bookingtablehtml {
    border-collapse: separate;
    border-spacing: 0 5px;
}

#viewtablecheckin td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lightbuttontrue {
    background-color: white !important;
    color: black !important;
    float: left;
    text-shadow: none !important;
    padding: 8px 10px;
    margin: 5px 6px;
}

.lightbuttonfalse {
    background-color: black !important;
    color: white !important;
    float: left;
    text-shadow: none !important;
    padding: 8px 10px;
    margin: 5px 6px;
}

.lightbuttonNULL {
    background-color: #a09242 !important;
    color: black !important;
    float: left;
    text-shadow: none !important;
    padding: 8px 10px;
    margin: 5px 6px;
}

.lightbuttontrue > h5 {
    margin: 0px 0px 0px 0px;
}

.lightbuttonfalse > h5 {
    margin: 0px 0px 0px 0px;
}

#showplayer2 > h4 {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 12px;
}

#showplayer3 > h4 {
    display: inline-block;
    margin-right: 30px;
}

#showplayer4 > h4 {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 12px;
}

#showplayer5 > h4 {
    display: inline-block;
    margin-right: 30px;
}

#lightcontroltable td {
    padding: 0px 0px;
    margin: 0px 0px;
}

.lightbuttonall {
    padding: 0px 15px;
    margin: 15px 0px;
    display: inline-block;
}


.flipper {
    color: #333;
    display: block;
    font-size: 28px !important;
    line-height: 100%;
    padding: 0;
    margin: 0;
    height: 1.7em;
}

    .flipper.flipper-invisible {
        font-size: 0px !important;
    }

.flipper-group {
    position: relative;
    white-space: nowrap;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}

    .flipper-group label {
        position: absolute;
        color: #fff;
        font-size: 12px;
        top: 100%;
        line-height: 1em;
        left: 30%;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        text-align: center;
        padding-top: .5em;
    }

.flipper-digit {
    white-space: nowrap;
    position: relative;
    padding: 0;
    margin: 0;
    display: inline-block;
    float: left;
    height: 1.2em;
    overflow-y: hidden;
}

    .flipper-digit span {
        font-size: 25px;
    }

.flipper-delimiter {
    white-space: nowrap;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    color: #fff;
    min-width: .1em;
    white-space: nowrap;
    display: block;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    line-height: 1em;
}

.digit-face {
    display: block;
    visibility: hidden;
    position: relative;
    border-radius: 0.1em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    box-sizing: border-box;
    text-align: center;
}

.digit-next {
    display: block;
    position: relative;
    border-radius: 0.1em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    height: 1.2em;
    background: #fff;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    box-sizing: border-box;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.digit-top {
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    background: #fff;
    padding-top: 0.1em;
    padding-bottom: 0;
    padding-left: 0.1em;
    padding-right: 0.1em;
    border-top-left-radius: 0.1em;
    border-top-right-radius: 0.1em;
    box-sizing: border-box;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0s linear, -webkit-transform 0s linear;
    transition: transform 0s linear, background 0s linear;
    transition: transform 0s linear, background 0s linear, -webkit-transform 0s linear;
    -webkit-transform-origin: 0 0.6em 0 !important;
    transform-origin: 0 0.6em 0 !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    z-index: 20;
}

    .digit-top.r {
        transition: background 0.2s linear, -webkit-transform 0.2s linear;
        transition: transform 0.2s linear, background 0.2s linear;
        transition: transform 0.2s linear, background 0.2s linear, -webkit-transform 0.2s linear;
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        background: #cccccc;
    }

.digit-top2 {
    visibility: hidden;
    position: absolute;
    height: 50%;
    left: 0;
    right: 0;
    background: #cccccc;
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear;
    line-height: 0em !important;
    top: 50% !important;
    bottom: auto !important;
    padding-top: 0;
    padding-bottom: 0.1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    border-bottom-left-radius: 0.1em;
    border-bottom-right-radius: 0.1em;
    overflow: hidden;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0s linear, -webkit-transform 0s linear;
    transition: transform 0s linear, background 0s linear;
    transition: transform 0s linear, background 0s linear, -webkit-transform 0s linear;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    -webkit-transform-origin: 0 0 0 !important;
    transform-origin: 0 0 0 !important;
    z-index: 20;
}

    .digit-top2.r {
        visibility: visible;
        transition: background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
        transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s;
        transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        background: #fff;
    }

.digit-bottom {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    background: #fff;
    height: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    line-height: 0em;
    padding-top: 0;
    padding-bottom: 0.1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    border-bottom-left-radius: 0.1em;
    border-bottom-right-radius: 0.1em;
    box-sizing: border-box;
    text-align: center;
    transition: none;
}

    .digit-bottom.r {
        transition: background 0.2s linear;
        background: #cccccc;
    }

.flipper-digit:after {
    content: "";
    position: absolute;
    height: 2px;
    background: rgba(0, 0, 0, 0.5);
    top: 50%;
    display: block;
    z-index: 30;
    left: 0;
    right: 0;
}

.sportlistcard {
    float: left;
    min-height: 310px;
    min-width: 350px;
    max-width: 350px;
}

#selectplyerno {
    margin-top: 12px;
}

    #selectplyerno > label > div {
        display: inline-block;
    }

/*Range booking option 2 css*/

#schedulerange2 .title {
    display: none;
}

#schedulerange2 div[data-role="content"] {
    top: -40px;
}



#schedulerange2 #range2headtable tr td {
    text-align: center;
    padding: 5px;
}

#schedulerange2 .ui-input-text {
    border-radius: 0px !important;
}

#schedulerange2 .bkitem, #schedulerange2 .ui-corner-all {
    border-radius: 0px !important;
}

#checkinrange2view .ui-input-text {
    border-radius: 0px !important;
}

#checkinrange2view .bkitem, #checkinrange2view .ui-corner-all {
    border-radius: 0px !important;
}

#range2headtable tr td h1 {
    text-align: center;
    padding: 0px;
    margin: 0px;
}

#range2headtable tr td h2 {
    text-align: center;
    padding: 0px 0px 15px 0px;
    margin: 0px;
}

#range2headtable tr td p {
    text-align: center;
    padding: 0px;
}

#range2headtable .inrangeplus, #range2headtable .inrange, #range2headtable .inrangesingle, #range2headtable .inrangeplussuite {
    border: solid;
    margin: 25px auto;
    width: 100%;
    position: relative;
}

#checkinrange2bookpopup .optionsuiteselect, #checkinrange2bookpopup .optionsuitetimeselect {
    width: 22px;
    height: 22px;
}

#range2headtable .locheader {
    height: 80px;
    background-color: black;
    color: white;
}

    #range2headtable .locheader h2 {
        background-color: black;
        color: white;
        margin: 0px 0px;
        padding: 10px 0px 0px 0px;
    }

    #range2headtable .locheader h3 {
        background-color: black;
        color: white;
        margin: 0px 0px;
        padding: 0px 0px 10px 0px;
    }

#range2headtable .locdetails {
    margin: 0px 0px;
    padding: 10px 15px 0px 0px;
    text-align: left
}

    #range2headtable .locdetails h3 {
        text-align: left;
        margin-left: 25px;
    }

#range2headtable .locfooter {
    font-size: 22px;
    text-decoration-line: none;
    height: 40px;
}

    #range2headtable .locfooter a {
        text-decoration: none;
        color: black;
    }

#select-time-range2-menu li a {
    text-align: center;
    background: black;
    color: white;
}

#range2headtable .bottombuttonleft {
    width: 140px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 15px;
}

#range2headtable .bottombuttonright {
    width: 140px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 15px;
}

#range2headtable .Bbottombuttonright {
    width: 140px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 15px;
}

#range2headtable .Bbottombuttonleft {
    width: 140px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 15px;
}

#range2headtable .button30mindiv {
    width: 240px;
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .buttononehourdiv {
    width: 240px;
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .buttononehourhalfdiv {
    width: 240px;
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .buttontwohourdiv {
    width: 240px;
    /*float: left;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .button30mindivsel {
    width: 240px;
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .buttononehourdivsel {
    width: 240px;
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .buttononehourhalfdivsel {
    width: 240px;
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .rangeavail, #checkinrange2view .rangeavail, #tvviewleg .rangeavail {
    background-color: lightgray;
    color: black !important;
}

#range2headtable .rangeavailrpk, #tvviewleg .rangeavailrpk {
    background-color: deepskyblue;
    color: black !important;
}

#range2headtable .rangeavailrpk1, #tvviewleg .rangeavailrpk1 {
    background-color: blue;
    color: black !important;
}

#range2headtable .rangebooked, #checkinrange2view .rangebooked {
    background-color: #f20093;
    color: white !important;
}

#range2headtable .rangebookedhwe, #checkinrange2view .rangebookedhwe, #tvviewleg .rangebookedhwe {
    background-color: black;
    color: white !important;
}

#range2headtable .rangecheckedin, #checkinrange2view .rangecheckedin {
    background-color: navy;
    color: white !important;
}

#range2headtable .rangeunavail, #checkinrange2view .rangeunavail, #tvviewleg .rangeunavail {
    background-color: black;
    color: white !important;
}

#tvviewleg .rangebooked {
    background-color: navy;
    color: white !important;
}

#tvviewleg .rangecheckedin {
    background-color: green;
    color: white !important;
}

#checkinviewrangedata2 .bookitemviewrange2, .bookitemsuiteviewrange2 {
    background-color: lightgray;
    color: black !important;
}

#checkinviewrangedata2 .bookitemunavailviewrange2 {
    background-color: black;
    color: white !important;
}

#checkinviewrangedata2 .bookitembookedviewrange2 {
    background-color: #f20093;
    color: white !important;
}

#checkinviewrangedata2 .bookitembookedhweviewrange2 {
    background-color: black;
    color: white !important;
}

#checkinviewrangedata2 .bookitemreservedviewrange2 {
    background-color: black;
    color: white !important;
}

#checkinviewrangedata2 .bookitemcheckedinviewrange2 {
    background-color: navy;
    color: white !important;
}



#tvviewslots .bookitemavailtv {
    background-color: lightgray;
    color: black !important;
}

#tvviewslots .bookitemunavailtv {
    background-color: black;
    color: white !important;
}

#tvviewslots .bookitembookedtv {
    background-color: navy;
    color: white !important;
}

#tvviewslots .bookitembookedhwetv {
    background-color: black;
    color: white !important;
}

#tvviewslots .bookitemreservedtv {
    background-color: black;
    color: white !important;
}

#tvviewslots .bookitemcheckedintv {
    background-color: green;
    color: white !important;
}


#viewtablecheckinrange2 tr td li {
    border-radius: 0px;
}

#range2headtable .rangeitemavailrpk {
    background-color: deepskyblue;
    color: black !important;
}

#range2headtable .rangeitemavailtouchrpk {
    background-color: blue;
    color: white !important;
}

#range2headtable .rangeitemavailtouchrpksel {
    background-color: #f20093;
    color: black !important;
}

#range2headtable .rangeitemavailrpksel {
    background-color: #f20093;
    color: black !important;
}

#range2headtable .rangeitemsuiteavailrpk {
    background-color: deepskyblue;
    color: black !important;
}

#range2headtable .rangeitemsuiteavailtouchrpk {
    background-color: blue;
    color: white !important;
}

#range2headtable .rangeitemsuiteavailtouchrpksel {
    background-color: #f20093;
    color: black !important;
}

#range2headtable .rangeitemsuiteavailrpksel {
    background-color: #f20093;
    color: black !important;
}

#range2headtable .rangeitemsuiteunavail {
    background-color: black;
    color: white !important;
}

#range2headtable .rangeitemavail {
    background-color: lightgray;
    color: black !important;
}

#range2headtable .rangeitemunavail {
    background-color: black;
    color: white !important;
}

#range2headtable .rangeitemavailsel {
    background-color: green;
    color: black !important;
}

#range2headtable .buttontwohourdivsel {
    width: 240px;
    /*float: left;*/
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    color: black;
}

#range2headtable .button30min {
    background-image: url(./images/hourglass--v2.gif);
    background-repeat: no-repeat;
    border: none;
    margin-top: 35px;
    background-size: contain;
}

#range2headtable .button30mindiv .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: lightgrey;
    color: black;
    padding: 5px;
}

#range2headtable .buttononehour {
    background-image: url(./images/hourglass--v2.gif);
    background-repeat: no-repeat;
    border: none;
    margin-top: 35px;
    background-size: contain;
}

#range2headtable .buttononehourhalf {
    background-image: url(./images/hourglass--v2.gif);
    background-repeat: no-repeat;
    border: none;
    margin-top: 35px;
    background-size: contain;
}

#range2headtable .buttononehourdiv .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: lightgrey;
    color: black;
    padding: 5px;
}

#range2headtable .buttononehourhalfdiv .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: lightgrey;
    color: black;
    padding: 5px;
}

#range2headtable .buttontwohourdivsel .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: black;
    color: white;
    padding: 5px;
}

#range2headtable .button30mindivsel .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: black;
    color: white;
    padding: 5px;
}

#range2headtable .buttononehourdivsel .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: black;
    color: white;
    padding: 5px;
}

#range2headtable .buttononehourhalfdivsel .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: black;
    color: white;
    padding: 5px;
}

#range2headtable .buttontwohourdiv .ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
    height: 270px;
    text-align: center;
    font-size: x-large;
    background-color: lightgrey;
    color: black;
    padding: 5px;
}

#range2headtable .buttontwohour {
    background-image: url(./images/hourglass--v2.gif);
    background-repeat: no-repeat;
    border: none;
    margin-top: 35px;
    background-size: contain;
}

#range2headtable .buttonballsdiv {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    height: 345px;
    text-align: center;
    font-size: x-large;
    background-color: lightgrey;
    color: black;
}

#range2headtable .courtperiodpackageitemm {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: x-large;
    background-color: blue;
    color: white;
    padding: 20px;
    border: 2px solid black;
    height: 100%;
}

#range2headtable .choosebay {
    display: inline-block;
    margin-top: 12px;
}

#range2headtable #chosentimes {
    margin-bottom: 0px;
    margin-top: 5px;
}

.bucketballs {
    content: url(./images/bucketballs.jpg);
    max-width: 240px;
    max-height: 240px;
}

#range2headtable .coltwo {
    margin-left: 100px;
}

#range2headtable .buttonballsdivsel {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    height: 345px;
    text-align: center;
    font-size: x-large;
    background-color: black;
    color: white;
}

#range2headtable .courtperiodpackageitemmsel {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: x-large;
    background-color: #f20093;
    color: white;
    padding: 20px;
    border: 2px solid black;
    height: 100%;
}

#schedulerange2 .flippershow {
    font-size: 26px !important;
    right: 18px;
    top: 0px;
    position: fixed !important;
    padding: 10px !important;
    background: black;
    height: 50px !important;
}

#range2headtable #rangebookingtotals tr td {
    text-align: left;
    vertical-align: top;
    margin-top: 40px;
}

#range2headtable #rangebookingplayers tr td {
    text-align: left;
}

#range2headtable #bookingrange2 {
    text-align: left;
}

#range2headtable .timeleftbutton a, #range2headtable .timerightbutton a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

    #range2headtable .timeleftbutton a:hover, #range2headtable .timerightbutton a:hover {
        background-color: #ddd;
        color: black;
    }

#range2headtable .timeleftbutton {
    background-color: black;
    color: white;
    font-size: xxx-large;
    text-decoration: none;
    margin-right: 20px;
}

#range2headtable .timeinputbutton {
    width: 200px;
    display: inline;
    height: 20px;
    font-size: x-large;
    text-decoration: none;
    color: white;
}

#range2headtable .timerightbutton {
    background-color: black;
    color: white;
    font-size: xxx-large;
    text-decoration: none;
    margin-left: 20px;
}


#range2headtable input.dw-tt-date-picker {
    width: auto;
    border: none;
    background-color: transparent;
    color: white;
    font-size: 22px;
    cursor: pointer;
}

.datetimerange2 .ui-focus {
    box-shadow: none !important;
}

.datetimerange2 .ui-shadow {
    box-shadow: none !important;
}

.datetimerange2 {
    background-color: black;
    color: white;
    margin: 25px auto;
    width: 440px;
    padding: 25px 20px;
}

    .datetimerange2 .ui-select {
        background-color: black;
        border: none;
        color: white;
    }

        .datetimerange2 .ui-select a {
            border-color: black !important;
            box-shadow: none !important;
        }

    .datetimerange2 .dw-tt-date div {
        background-color: black;
        border: none;
        color: white;
        width: 20vw;
    }

.dw-tt-selectrange2 {
    color: white;
}


.datetimerange2 .dw-tt-select {
    margin-top: 10px;
}

#schedulerange2 .bottomrow td {
    border-bottom-color: gray;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

#schedulerange2 .rangebookcost {
    width: 100%;
    border-color: gray;
    border-style: solid;
    border-width: thin;
    padding: 7px;
}

#schedulerange2 .booktotal {
    font-size: medium;
    font-weight: 600;
    width: 200px;
    text-align: right !important;
}

#schedulerange2 .booktotaldesc {
    font-size: large;
    font-weight: 600;
}

#schedulerange2 .balltotaldesc {
}

#schedulerange2 .baytotaldesc {
    border-bottom-color: gray;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

#schedulerange2 #rangebookingplayers .ui-corner-all {
    margin: 0px 25px;
}

#schedulerange2 .rangebookingplayerstable {
    border-color: gray;
    border-style: solid;
    border-width: thin;
    width: 95%;
}

@media screen and ( max-width: 768px ) {
    #schedulerange2 #range2headtable .rangelegend {
        text-align: left;
        display: inline;
        margin-right: 15px;
    }

    #range2headtable #rangebookingtotals tr td {
        text-align: left;
        vertical-align: top;
        margin-top: 0px;
    }

    .datetimerange2 .dw-tt-date div {
        background-color: black;
        border: none;
        color: white;
        width: 74vw;
    }

    #schedulerange2 .booktotal {
        font-size: medium;
        font-weight: 600;
        width: inherit;
        text-align: right !important;
    }

    #range2headtable .coltwo {
        margin-left: 0px;
    }

    #schedulerange2 div[data-role="content"] {
        top: -30px;
        padding-left: 6px;
    }

    .datetimerange2 {
        background-color: black;
        color: white;
        margin: 25px auto;
        width: 350px;
        padding: 25px 30px;
    }

    div [data-role="page"] > div[data-role="content"] {
        position: absolute !important;
        top: 35px !important;
        left: 0px !important;
        right: 0px !important;
    }

    #timeRangeSliderdiv {
        margin-top: 10px;
    }

    #filtergroup {
        margin-top: -38px;
    }

    #bookinghistory-html {
        margin-top: 75px !important
    }

    .title {
        display: inline-block;
        width: 100%;
        font-size: 20px;
        text-shadow: none;
        font-weight: 600;
        z-index: 999;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        max-height: 45px;
        min-height: 45px;
    }

    #bookingrange .title {
        display: inline-block;
        width: 100%;
        font-size: 20px;
        text-shadow: none;
        font-weight: 600;
        z-index: 999;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        max-height: 57px;
        min-height: 57px;
    }

    #booking .title {
        padding-bottom: 10px;
    }

    #span-booking {
        float: left;
    }

    #span-bookinghistory {
        float: left;
    }

    .sport-image {
        margin-bottom: 10px;
        float: left;
        max-width: 10em;
        max-height: 10em;
        min-width: 10em;
        min-height: 10em;
    }

    h2 {
        display: block;
        font-size: 1.0em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    h1 {
        display: block;
        font-size: 1.1em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    #schedule .add-court-button1 {
        font-size: 11px !important;
        margin-right: 35px;
    }

    #button10 {
        font-size: 14px !important;
        position: initial;
        margin-right: 30px !important;
        float: right;
    }

    #button1 {
        font-size: 14px !important;
        position: initial;
        margin-right: 20px !important;
        float: right;
    }

    #button9 {
        font-size: 14px !important;
        position: initial;
        margin-right: 30px !important;
        float: right;
    }

    #bookingrange #button9 {
        font-size: 12px !important;
        position: fixed;
        top: 26px !important;
        left: 90px;
    }

    #bookingrange #button1 {
        font-size: 12px !important;
        position: fixed;
        top: 26px !important;
        left: -12px;
    }

    #selectplyerno {
        margin-top: 60px;
    }

        #selectplyerno > label > div {
            display: block;
        }

    #booking .add-court-button1 {
        font-size: 11px !important;
        float: left;
        margin-right: 18px;
        margin-top: 30px;
        left: 10px !important;
        position: absolute;
    }

    /*#booking .flipper {
        font-size: 22px !important;
        right: 0px !important;
        top: 1px !important;
        margin-right: 12px !important;
        position: fixed !important;
        padding: 15px !important;
        background: midnightblue !important;
    }*/

    #booking .player-rightlabel {
        display: inline-block;
        width: 95% !important;
        float: left;
        margin-left: 2px !important;
    }

    #bookinghistory .player-rightlabel {
        display: inline-block;
        width: 95% !important;
        float: left;
        margin-left: 2px !important;
    }

    #booking .player-leftlabel {
        display: inline-block;
        width: 95% !important;
        float: left;
        margin-top: 15px;
    }

    #bookinghistory .player-leftlabel {
        display: inline-block;
        width: 95% !important;
        float: left;
        margin-top: 15px;
    }

    #booking #membersearch2 > label {
        font-size: 9px;
    }

    #booking #membersearch2 {
        padding-left: 3px !important;
    }

    #booking #membersearch3 > label {
        font-size: 9px;
    }

    #booking #membersearch3 {
        padding-left: 3px !important;
    }

    #booking #membersearch4 > label {
        font-size: 9px;
    }

    #booking #membersearch4 {
        padding-left: 3px !important;
    }

    #booking #membersearch5 > label {
        font-size: 9px;
    }

    #booking #membersearch5 {
        padding-left: 3px !important;
    }

    #showplayer2 > h4 {
        display: inline-block;
        margin-right: -5px;
        margin-bottom: 8px;
    }

    #showplayer3 > h4 {
        display: inline-block;
        margin-right: -5px;
        margin-top: 22px !important;
        margin-bottom: 8px !important;
    }

    #showplayer1 > h4 {
        margin-bottom: 55px !important;
    }

    #schedulepopup {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        width: 300px !important;
        min-height: 400px;
        left: 20px !important;
    }

    #courtinfopopup {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        width: 300px !important;
        min-height: 400px;
        left: 20px !important;
        padding: 20px;
        background-color: black;
        font-size: large;
    }

    #dialogbooking {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        width: 300px !important;
        min-height: 400px;
        left: 20px !important;
    }

    #showplayer4 > h4 {
        display: inline-block;
        margin-right: -5px;
        margin-bottom: 8px;
    }

    #showplayer5 > h4 {
        display: inline-block;
        margin-right: -5px;
    }

    #buddielistchk2lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #buddielistchk3lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #buddielistchk4lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #buddielistchk5lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #bookingtemplate-html {
        display: inline-block;
        padding: 10px 2px;
        width: 95%;
    }

    #booking #friendsearch2 {
        padding-left: 3px !important;
    }

    #booking #friendsearch3 {
        padding-left: 3px !important;
    }

    #booking #friendsearch4 {
        padding-left: 3px !important;
    }

    #booking #friendsearch5 {
        padding-left: 3px !important;
    }

    #booking #friendsearch2 > label {
        font-size: 9px;
    }

    #booking #friendsearch3 > label {
        font-size: 9px;
    }

    #booking #friendsearch4 > label {
        font-size: 9px;
    }

    #booking #friendsearch5 > label {
        font-size: 9px;
    }

    #schedule .ui-mini {
        font-size: 9.5px;
    }

    #booking .courtimgpopup {
        display: none;
    }

    #booking .ui-mini {
        font-size: 9px;
    }

    #selectedslots {
        display: inline-block;
        float: right;
        margin-top: -20px;
        padding-top: 6px;
        margin-bottom: -4px;
    }

    #select-player-no-button {
        min-width: 100px;
        max-width: 100px;
    }



    .court-leftlabeltimeselect {
    }

    .court-leftlabelbook {
        float: none;
        width: auto;
        margin-right: 20px !important;
    }

    .court-leftlabeltime {
        width: 25%;
        float: left;
        margin-right: 0px;
    }

    .court-rightlabelbook {
        float: none;
        width: auto;
        margin-right: 20px !important;
    }

    .dateaddbook {
        display: inline-block !important;
        margin-right: 20px !important;
        float: left;
        width: 60%;
    }


    .sportlistcard {
        float: left;
        min-height: 280px;
        min-width: 300px;
        max-width: 300px;
    }

    .ui-listview > li h1 {
        text-align: left;
        font-size: xx-large;
        display: inline-block;
        overflow: initial;
        white-space: initial;
    }

    .ui-listview > li h2 {
        text-align: left;
        font-size: larger;
        display: inline-block;
        overflow: initial;
        white-space: initial;
    }

    .ui-listview > li h3 {
        text-align: left;
        font-size: medium;
        display: inline-block;
        overflow: initial;
        white-space: initial;
    }

    .ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
        text-align: left;
        font-size: small;
        display: inline-block;
        overflow: initial;
        white-space: initial;
    }

    #bookinghistory #membersearchedit2 > label {
        font-size: 9px;
    }

    #bookinghistory #membersearchedit2 {
        padding-left: 3px !important;
    }

    #bookinghistory #membersearchedit3 > label {
        font-size: 9px;
    }

    #bookinghistory #membersearchedit3 {
        padding-left: 3px !important;
    }

    #bookinghistory #membersearchedit4 > label {
        font-size: 9px;
    }

    #bookinghistory #membersearchedit4 {
        padding-left: 3px !important;
    }

    #bookinghistory #membersearchedit5 > label {
        font-size: 9px;
    }

    #bookinghistory #membersearchedit5 {
        padding-left: 3px !important;
    }

    #showplayeredit2 > h4 {
        display: inline-block;
        margin-right: -5px;
        margin-bottom: 8px;
    }

    #showplayeredit3 > h4 {
        display: inline-block;
        margin-right: -5px;
        margin-top: 22px !important;
        margin-bottom: 8px !important;
    }

    #showplayeredit1 > h4 {
        margin-bottom: 55px !important;
    }

    #schedulepopupedit {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        width: 300px !important;
        min-height: 400px;
        left: 20px !important;
    }

    #dialogbookingedit {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        width: 300px !important;
        min-height: 400px;
        left: 20px !important;
    }

    #showplayeredit4 > h4 {
        display: inline-block;
        margin-right: -5px;
        margin-bottom: 8px;
    }

    #showplayeredit5 > h4 {
        display: inline-block;
        margin-right: -5px;
    }

    #buddielistchkedit2lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #buddielistchkedit3lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #buddielistchkedit4lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #buddielistchkedit5lbl {
        font-size: 8px;
        overflow-wrap: break-word;
        max-width: 48px;
    }

    #bookinghistory #friendsearchedit2 {
        padding-left: 3px !important;
    }

    #bookinghistory #friendsearchedit3 {
        padding-left: 3px !important;
    }

    #bookinghistory #friendsearchedit4 {
        padding-left: 3px !important;
    }

    #bookinghistory #friendsearchedit5 {
        padding-left: 3px !important;
    }

    #bookinghistory #friendsearchedit2 > label {
        font-size: 9px;
    }

    #bookinghistory #friendsearchedit3 > label {
        font-size: 9px;
    }

    #bookinghistory #friendsearchedit4 > label {
        font-size: 9px;
    }

    #bookinghistory #friendsearchedit5 > label {
        font-size: 9px;
    }

    #bookinghistory .ui-mini {
        font-size: 9.5px;
    }

    #bookinghistory .courtimgpopup {
        display: none;
    }

    #bookinghistory #button1 {
        font-size: 11px !important;
        float: right !important;
        margin-top: 0px !important;
    }

    #bookinghistory #button9 {
        font-size: 11px !important;
        float: right !important;
        margin-top: 25px;
    }


    #bookinghistory #bookinginfo {
        padding-top: 13px !important;
    }

    #booking .flippershow {
        font-size: 25px !important;
        right: 0px;
        top: 145px;
        position: fixed !important;
        padding: 10px;
        background: black;
        height: 47px !important;
    }

    #bookingrange .flippershow {
        font-size: 25px !important;
        right: 2px;
        top: 0px;
        position: fixed !important;
        padding: 10px;
        background: black;
        height: 47px !important;
    }
}

#sched-typ-buttonsm a {
    border-radius: 13px !important;
    font-size: 16px !important;
    min-width: 25px;
    background-color: #cfcfcf;
    color: black;
}

#sched-loc-buttons {
}

#sched-typ-buttons {
}

.areabtnunsel, .typebtnunsel {
}

.areabtnsel, .typebtnsel {
    color: #e9dd8d !important;
    background-color: #292a2b !important;
    border-color: #e9dd8d !important;
}


/*a.bookitemtimeavail {
    background-color: #404040 !important;
    border-radius: 10px !important;
    border: 1px solid #000 !important;
    height: 48px;
    font-family: 'Raleway',sans-serif;
    width: 247px;
    font-weight: 300 !important;
    color: #fff !important;
    font-size: 16px;
    margin: 0 0px 20px;
    padding: 1px;
    text-align: left;
    padding-left: 54px;
    line-height: 60px;
}
a.bookitemtimesel {
    background-color: #1bb1ea !important;
    border-radius: 10px !important;
    border: 1px solid #000 !important;
    height: 48px;
    font-family: 'Raleway',sans-serif;
    width: 247px;
    font-weight: 300 !important;
    color: #fff !important;
    font-size: 16px;
    margin: 0 0px 20px;
    padding: 1px;
    text-align: left;
    padding-left: 54px;
    line-height: 60px;
}*/

/*a.bookitemtimeavail:before {
    content: "1st";
    position: absolute;
    display: block;
    background: #333;
    left: 0;
    top: 0;
    width: 45px;
    height: 50px;
    text-align: center;
    line-height: 60px;
}

a.bookitemtimeavail:after {
        content: "book";
        position: absolute;
        display: block;
        background: #333;
        right: 0;
        top: 0;
        width: 45px;
        height: 50px;
        text-align: center;
        line-height: 60px;
        background-image: url(data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-right' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-right fa-w-10 fa-3x'%3E%3Cpath fill='%23ffffff' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' class=''%3E%3C/path%3E%3C/svg%3E);
        color: #fff;
        background-repeat: no-repeat;
        background-size: 15px;
        background-position: center 20px;
        font-size: 10px;
        line-height: 20px;
        font-weight: 200;
    }*/

.legenditem {
}

.dw-tt-date {
    display: inline-block;
    align-items: center;
}

.dw-tt-select {
    display: inline-block;
    align-items: center;
    width: 70%;
    font-size: 18px;
}

.dw-tt-date div {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.dw-tt-select {
    background-color: #f6f6f6;
    border-color: #666666;
    color: #0d0d0d;
    border-radius: 1.3125em;
}

    .dw-tt-select div {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        background-color: #cfcfcf;
        border-radius: 22px;
    }


    .dw-tt-select a {
        background-color: transparent !important;
        border-color: #666666 !important;
        color: #0d0d0d !important;
    }

input.dw-tt-date-picker {
    width: auto;
    border: none;
    background-color: transparent;
    font-size: 22px;
    cursor: pointer;
}

input.dw-tt-time-picker {
    width: auto;
    border: none;
    background-color: transparent;
    font-size: 22px;
    cursor: pointer;
}

    input.dw-tt-time-picker :before {
        margin-left: 15px;
    }

.booktext {
    font-size: xx-large;
    display: block;
    margin-bottom: 0px;
    margin-top: -20px;
}

.datetext {
    font-size: large;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}





#schedulecourttimelistm .bookitemtimemmavail {
    background-image: url('../img/ot69970_created.svg');
    background-repeat: no-repeat;
    background-size: cover;
    /*background-color: #fff;
    background-color: #f20093;
    background-color: #40d4e8;*/
    color: #000 !important;
}

#schedulecourttimelistm .bookitemtimemavail {
    /*background-image: url('../img/ot69970_created.svg');
    background-repeat: no-repeat;
    background-size: cover;*/
    background-color: #2dd23a;
    color: #000 !important;
}

#schedulecourttimelistm .bookitemtimempeak {
    /*background-image: url(./img/AvailableBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #fff;
    color: #000 !important;
}

#schedulecourttimelistm .bookitemtimemunavail {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: black;
    color: #fff !important;
}

#schedulecourttimelistm .bookitemtimemsel {
    background-image: url();
    /*background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #bfa655;
    color: #000 !important;
}

#schedulecourttimelistm .bookitemtimembooked {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #cfcfcf;
    color: #000 !important;
}

#schedulecourttimelistm .bookitemtimemreserved {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #cfcfcf;
    color: #000 !important;
}

#schedulecourttimelistm .bookitemtimemcheckedin {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #cfcfcf;
    color: #000 !important;
}

.stbayslot {
}

#backbutton {
    position: fixed;
    padding: 20px;
    top: 20px;
    left: 25px;
    background-color: black;
    border-color: white;
    height: 70px;
    width: 90px;
    color: white;
    border-radius: 10px;
}

#checkinbookloginreturn {
    font-size: xx-large;
    background: black;
    color: white;
    border-color: white;
    text-decoration: unset;
    border-width: 1px;
    padding: 2px 8px 2px;
    border-style: solid;
    border-radius: 10px;
}

#checkinbookloginrangereturn {
    font-size: xx-large;
    background: black;
    color: white;
    border-color: white;
    text-decoration: unset;
    border-width: 1px;
    padding: 2px 8px 2px;
    border-style: solid;
    border-radius: 10px;
}

#checkinview .is-countdown {
    border: none;
    background-color: black;
    font-size: large;
    text-align: center;
}

.rangechecksmulti label.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-icon-left.ui-checkbox-off {
    display: inline-block;
    background-color: #cfcfcf;
    color: #000 !important;
    border-radius: 14px;
    border-color: black;
}

.rangechecksmulti label.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-icon-left.ui-checkbox-on {
    display: inline-block;
    background-color: black;
    color: white !important;
    border-radius: 14px;
}

.rangechecks label.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-icon-left.ui-checkbox-off {
    display: inline-block;
    background-color: #cfcfcf;
    color: #000 !important;
    border-radius: 14px;
    border-color: black;
}

.rangechecks label.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-icon-left.ui-checkbox-on {
    display: inline-block;
    background-color: black;
    color: white !important;
    border-radius: 14px;
}

.selbayslot {
}

.tchbayslot {
}

.unavbay {
}

#adverts {
    margin-top: -70px;
}

#bookingrange .ui-corner-all {
    -webkit-border-radius: 0.3125em !important /*{global-radii-blocks}*/;
    border-radius: 0.3125em !important /*{global-radii-blocks}*/;
    margin: 5px 25px;
}

.booktotal {
    font-size: medium;
    font-weight: 600;
    width: 200px;
    text-align: right !important;
}

.booktotaldesc {
    font-size: large;
    font-weight: 600;
}


@media screen and ( max-width: 768px ) {


    .booktext {
        font-size: x-large;
        display: block;
        margin-top: 10px;
    }

    .tablesaw-stack tbody tr {
        display: block;
        width: 100%;
        border-bottom: none !important;
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

    .legcss {
        margin: 0px 0px !important;
        height: 30px;
    }

    .legcssspan {
        margin: 0px 0px 0px 0px !important;
    }

    #rtdlegend {
        max-width: 260px;
    }

        #rtdlegend #imgtwo {
            margin-left: 26px !important;
        }
}

.legcssspan {
    margin: 10px 6px 0px 6px;
}

.legcss {
    margin: 0px 6px;
    height: 30px;
}

#checkinviewrangedata .bookitemviewrange {
    background-image: url('../img/ot69970_created.svg');
    background-repeat: no-repeat;
    background-size: cover;
    /*background-color: #fff;
    background-color: #f20093;
    background-color: #40d4e8;*/
    color: #000 !important;
}

#checkinviewrangedata .bookitemStandardviewrange {
    /*background-image: url('../img/ot69970_created.svg');
    background-repeat: no-repeat;
    background-size: cover;*/
    background-color: #2dd23a;
    color: #000 !important;
}

#checkinviewrangedata .bookitempeakviewrange {
    /*background-image: url(./img/AvailableBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #fff;
    color: #000 !important;
}

#checkinviewrangedata .bookitemunavailviewrange {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: black;
    color: #fff !important;
}

#checkinviewrangedata .bookitemselviewrange {
    background-image: url();
    /*background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #bfa655;
    color: #000 !important;
}

#checkinviewrangedata .bookitembookedviewrange {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #cfcfcf;
    color: #000 !important;
}

#checkinviewrangedata .bookitemreservedviewrange {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #cfcfcf;
    color: #000 !important;
}

#checkinviewrangedata .bookitemcheckedinviewrange {
    /*background-image: url(./img/UnavailBay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;*/
    background-color: #bfa655;
    color: #000 !important;
}

.tvviewtable {
    display: inline-block;
    border: black;
    /*border-style: solid;*/
    border-radius: 10px;
    padding-top: 7px;
    padding-left: 10px;
    padding-bottom: 10px;
    /*width: 400px;*/
    margin: 2px;
    /*height: 120px;*/
    padding-right: 10px;
    float: left;
    background: #111;
    color: white;
}

.courtcardcheckinrange {
    display: inline-block;
    border: black;
    /*border-style: solid;*/
    border-radius: 10px;
    padding-top: 7px;
    padding-left: 10px;
    padding-bottom: 10px;
    /*width: 400px;*/
    margin: 2px;
    /*height: 120px;*/
    padding-right: 10px;
    float: left;
    /*background: #111;*/
    color: white;
}

#exclusionperiodlist .sametime {
    background-color: #cfcfcf;
    color: #000 !important;
}

@media screen and (max-width: 768px) {
    #addexclusion .title {
        max-height: 70px;
        min-height: 70px;
    }

    .selectionexcl {
        display: grid;
    }

    .selectionexclchild {
        width: 80% !important;
        max-width: 80% !important;
    }

    .daysgrid {
        display: grid;
    }

    .slotinputs {
        display: block;
        width: 60% !important;
        max-width: 60% !important;
    }

    .exclname {
        width: 80% !important;
        max-width: 80% !important;
    }

    #exclusionlist .court-detail {
        display: grid !important;
    }

    #exclusionlist .title {
        max-height: 58px;
        min-height: 58px;
    }

    #exclusionlist #button1 {
        margin-top: 0px;
    }

    #exclusionlist #button10 {
        margin-top: 25px;
    }
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

    .ui-state-default a,
    .ui-state-default a:link,
    .ui-state-default a:visited,
    a.ui-button,
    a:link.ui-button,
    a:visited.ui-button,
    .ui-button {
        color: #454545;
        text-decoration: none;
    }

        .ui-state-hover,
        .ui-widget-content .ui-state-hover,
        .ui-widget-header .ui-state-hover,
        .ui-state-focus,
        .ui-widget-content .ui-state-focus,
        .ui-widget-header .ui-state-focus,
        .ui-button:hover,
        .ui-button:focus {
            border: 1px solid #cccccc;
            background: #ededed;
            font-weight: normal;
            color: #2b2b2b;
        }

            .ui-state-hover a,
            .ui-state-hover a:hover,
            .ui-state-hover a:link,
            .ui-state-hover a:visited,
            .ui-state-focus a,
            .ui-state-focus a:hover,
            .ui-state-focus a:link,
            .ui-state-focus a:visited,
            a.ui-button:hover,
            a.ui-button:focus {
                color: #2b2b2b;
                text-decoration: none;
            }

.ui-visual-focus {
    box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.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 #003eff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

    .ui-icon-background,
    .ui-state-active .ui-icon-background {
        border: #003eff;
        background-color: #ffffff;
    }

    .ui-state-active a,
    .ui-state-active a:link,
    .ui-state-active a:visited {
        color: #ffffff;
        text-decoration: none;
    }

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
}

.ui-widget {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
    top: 100px !important;
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0;
    }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 2px;
        width: 1.8em;
        height: 1.8em;
    }

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

    .ui-datepicker .ui-datepicker-prev {
        left: 2px;
    }

    .ui-datepicker .ui-datepicker-next {
        right: 2px;
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 1px;
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 1px;
    }

    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
    }

        .ui-datepicker .ui-datepicker-title select {
            font-size: 1em;
            margin: 1px 0;
        }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 45%;
    }

    .ui-datepicker table {
        width: 100%;
        font-size: .9em;
        border-collapse: collapse;
        margin: 0 0 .4em;
    }

    .ui-datepicker th {
        padding: .7em .3em;
        text-align: center;
        font-weight: bold;
        border: 0;
    }

    .ui-datepicker td {
        border: 0;
        padding: 1px;
    }

        .ui-datepicker td span,
        .ui-datepicker td a {
            display: block;
            padding: .2em;
            text-align: right;
            text-decoration: none;
        }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

        .ui-datepicker .ui-datepicker-buttonpane button {
            float: right;
            margin: .5em .2em .4em;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            width: auto;
            overflow: visible;
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: left;
            }

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_444444_256x240.png);
}

.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon {
    width: 16px;
    height: 16px;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

    .ui-datepicker-multi .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em;
    }

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}

    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 2px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-prev:hover {
        right: 1px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next:hover {
        left: 1px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-buttonpane {
        clear: right;
    }

        .ui-datepicker-rtl .ui-datepicker-buttonpane button {
            float: left;
        }

            .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
            .ui-datepicker-rtl .ui-datepicker-group {
                float: right;
            }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }

#body button.jQKeyboardBtn.ui-button-colspan-0 {
    width: 85px;
}


#body button.jQKeyboardBtn {
    line-height: 4.55em;
}


/* Container DIV - automatically generated */
.simply-scroll-container {
    width: 98vw;
    position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
    width: 98vw;
}


.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .simply-scroll-list li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .simply-scroll-list li img {
            border: none;
            display: block;
        }



.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {
    width: 98vw;
    height: 200px;
    margin-bottom: 1em;
}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
    width: 98vw;
    height: 200px;
}


.simply-scroll .simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    width: 500px;
    height: 200px;
}


#bookingtablehtml .ui-input-text.ui-body-b.ui-corner-all.ui-state-disabled.ui-shadow-inset {
    background-color: white !important;
    opacity: 0.4 !important;
    color: black
}

#bookingtablehtml .ui-input-text.ui-body-a.ui-corner-all.ui-state-disabled.ui-shadow-inset {
    background-color: white !important;
    opacity: 0.4 !important;
    color: black
}

#bookingtablehtml input#PlayerName1 {
    font-weight: 800 !important;
}

#bookingtablehtml input#PlayerMem1 {
    font-weight: 800 !important;
}

#bookingtablehtml input#PlayerPhone1 {
    font-weight: 800 !important;
}

#bookingtablehtml input#PlayerEmail1 {
    font-weight: 800 !important;
}