.container {
    max-width:100%!important;
    margin: 0;
    padding: 0; 
}

svg {
    width: 25px;
}

.reservationDate {
    background: #fff;
    padding: 10px;
}

.ui-widget {
    font-family: sans-serif;
}

.reservationDate .ui-datepicker {
    border: none;
    padding: 0;
    width: 100%
}

.reservationDate .ui-widget-header {
    background: #fff;
    border: none;
    font-weight: 400;
    font-size: 20px
}

.reservationDate .ui-widget-header .ui-datepicker-next.ui-state-hover {
    background: silver;
    border: 1px solid silver
}

.reservationDate .ui-widget-header .ui-datepicker-next span {
    background: url(../images/calendarArrows.png);
    background-position: 26px 30px
}

.reservationDate .ui-widget-header .ui-datepicker-prev.ui-state-hover {
    background: silver;
    border: 1px solid silver
}

.reservationDate .ui-widget-header .ui-datepicker-prev span {
    background: url(../images/calendarArrows.png);
    background-position: 62px 30px
}

.reservationDate .ui-datepicker-calendar th {
    background: #fff;
    color: #3b3b3b;
    font-weight: 100;
    font-size: 15px;
    width: 35px;
    height: 28px;
    padding: 6px 0
}

.reservationDate .ui-datepicker-calendar td {
    background: #fff;
    width: 35px;
    height: 28px;
    padding: 0;
    border: 1px solid silver
}

.reservationDate .ui-datepicker-calendar td a {
    text-align: center;
    background: none;
    border: none
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-week-end {
    background-color: #ebebeb
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-unselectable {
    background: #fff
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-unselectable .ui-state-default {
    background: #fff;
    text-align: center;
    border: none
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-today {
    background-color: rgba(251,180,76,.6)
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-today a {
    color: #3b3b3b
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-current-day {
    background-color: #000;
}

.reservationDate .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: none;
    color: #fff
}

.timetableWrap {
    position:relative;
}

.timetableWrap .courtSelection {
    width: 100%
}

.timetableWrap .courtSelection .tab {
    float: left;
    font-size: 16px;
    line-height: 35px;
    padding: 0 20px;
    border: 1px solid #d8d8d8;
    border-bottom: none;
    width: 32%;
    margin-top: 6px;
    cursor: pointer;
    color: gray
}

.timetableWrap .courtSelection .tab:last-child {
    border-left: none
}

.timetableWrap .courtSelection .tab.active {
    border-top: 6px solid #49ce3c;
    margin-top: 1px;
    color: #000;
    font-size: 18px
}

.timetableWrap .courtSelection .tab.closed {
    background: rgba(58,152,216,.16)
}

.timetableWrap .courtSelection .tab.closed:hover {
    background: rgba(58,152,216,.3)
}

.timetableWrap .courtSelection .tab.open {
    background: rgba(218,171,102,.21)
}

.timetableWrap .courtSelection .tab.open:hover {
    background: rgba(218,171,102,.3)
}

.timetableWrap .timeTable table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 0
}

.timetableWrap .timeTable table tr:hover {
    background-color: #f2f1f1
}

.timetableWrap .timeTable table td {
    border: 1px solid #d8d8d8;
    border-color: rgb(5 5 5 / 6%);
    padding: .05em;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    position: relative;
}

.timetableWrap .timeTable table td.ordered {
    background: url(/images/ordered-icon.png) no-repeat center
}

.timetableWrap .timeTable table td.ordered:hover {
    background-color: #ebebeb;
    cursor: pointer
}

.timetableWrap .timeTable table td.available:hover,.timetableWrap .timeTable .selected.available {
    background-color: var(--wc-blue);
    cursor: pointer;
    color: #fff;
}

.timetableWrap .timeTable .selected.available svg {
    color:#fff;
}

.timetableWrap .timeTable table.open {
    background-color: #fff;
}

.timetableWrap .timeTable table.closed {
    background-color: #e6f1ff
}

.timetableWrap .timeTable table td.reserve {
    background-color: #f6d8ce
}

.timetableWrap .timeTable table td.reserved {
    background-color: #f6d8ce;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer
}

.timetableWrap .timeTable table td div.reserved {
    background-color: #f6d8ce;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer
}

.timetableWrap .timeTable table td.disabled {
    background-color: #f6d8ce;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer
}

.timetableWrap .timeTable table td.incard {
    background-color: #d8f6ce
}

.timetableWrap .timeTable table td.inprogress {
    background-color: #f5f6ce;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer
}

.timetableWrap .timeTable table td.subscriber {
    background-color: #d6eaf8;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer
}

.timetableWrap .timeTable table td.training {
    background-image: url(/images/ball.png);
    background-repeat: no-repeat;
    background-position: right top
}

.timetableWrap .timeTable table td.cancel {
    border-left: none;
    padding: 7px 11px;
    cursor: pointer;
}

.timetableWrap .timeTable table td.discount {
    border: 2px solid #ffa500!important
}

.timetableWrap .timeTable table td.time {
    width: 20%
}

.timetableWrap .timeTable table.open tr:hover {
}

.timetableWrap .timeTable table.open td {
    border-color: rgb(5 5 5 / 6%);
}

.timetableWrap .timeTable table.closed {
    background-color: rgba(58,152,216,.09)
}

.timetableWrap .timeTable table.closed tr:hover {
    background-color: rgba(58,152,216,.16)
}

.timetableWrap .timeTable table.closed td {
    border-color: rgba(58,152,216,.16)
}

.reservePlace .overlay {
    background:#0000004d;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:none;
}

/* KEYFRAMES */

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}



.spinner-box {
  width: 100%;
  height: 160px;
  display: block;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  position: absolute;
  top: 33px;
  z-index: 9;
  display:none;
}

/* SPINNING CIRCLE */

.leo-border-1 {
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin3D 1.8s linear 0s infinite;
}


/* ALTERNATING ORBITS */

.circle-border {
  width: 90px;
  height: 90px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #FF9800;
  background: linear-gradient(0deg, rgb(255 255 255 / 10%) 33%, #fff 100%);
  animation: spin .8s linear 0s infinite;
  margin: 0 auto;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #1d263000;
  border-radius: 50%;
}

.cart {
    background: #fff;
    padding: 0;
    height: max-content;
}
.groundPlace--title svg,.groundPlace--title--firstChild svg {
    width: 16px;
}


.groundPlace--title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.groundPlace--title--firstChild {
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    gap: 6px;
    padding: 1px 6px;
}


.orderedTimesWrap table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 2rem;
}

.orderedTimesWrap table th {
    background-color: #3a98d8
}

.orderedTimesWrap table td {
    /* border: 1px solid silver; */
    padding: 7px 5px 7px 7px;
}

.orderedTimesWrap table td:first-child {
    border-right: 0
}

.orderedTimesWrap table td.cancel {
    border-left: none;
    cursor: pointer;
    background: #aa0000;
    display: flex;
    justify-content: center;
    height: 42px;
    align-items: center;
    width: 100%;
    padding: 0 4px;
}
.orderedTimesWrap table td.cancel svg {
    display: flex;
    /* width: 19px; */
    color: #ffffff;
    transform: scale(0.8);
}

.orderedTimesWrap table td.first {
    border-left: none;
    background: none
}

span#totalPrice {
    display: flex;
    flex-direction: row;
    /* gap: 6px; */
    font-weight: 600;
    color: #fff;
}

.totalPrice svg {
    width: 25px;
}

.totalPriceHolder .totalPriceWrap {display: flex;justify-content: space-between;padding: 10px;align-items: center;}

.totalPriceHolder .totalPriceWrap a.submitRezervation {
    display: inline-block;
    background: var(--wc-blue);
    color: #fff;
    line-height: 35px;
    padding: 0 35px;
    text-decoration: none;
    font-size: 18px;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    background-clip: padding-box;
}

.boxShadow {
    /*box-shadow: 1px 1px 5px rgb(0 0 0 / 9%);*/
    /* margin-bottom: 9px; */
    /* border-radius: 5px; */
}

span.badge {
    background: #000;
    padding: 4px 7px;
    color: #fff;
    border-radius: 7px;
    font-size: 13px;
}
span.date_time_slot {
    font-size: 15px;
}

a.ui-state-default.ui-state-hover {
    background: var(--wc-blue)!important;
    color: #fff;
}

.selected-slots {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

span.date_time_slot {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 7px;
}

.selected-slots svg {
    width: 16px;
    color: #2ea2cc;
    fill: #2ea2cc;
}
tr.row--slot {
    border: solid 1px #efefef;
    border-right: 0;
    border-left: 0;
}

.totalPriceHolder {
    background: #000;
}

@media(max-width:767px){
    .timeTable svg {
        display:none;
    }
    .reservePlace--wrap {
        padding:0!important;
    }
}

@media(max-width:597px){
    .groundPlace--title--firstChild {
        font-size:12px;
    }
    span.hours-avail {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }   
    .hours-avail .dash{
        display:none;
    }
}

@media(max-width:450px){
    
    .groundPlace--title{
            font-size: 12px;
    }
}

td.reservedSlot.available svg {
    width: 21px;
    color: #2abb9b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display:block!important;
}

.timetableWrap .timeTable table td.available:hover svg {
    color:#fff;
}

.disabled {
    pointer-events: none;
    opacity: 0.8;
}

.empty_cart {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}
.empty_cart svg {
    width: 45px;
    margin: 15px 10px 15px 0;
    /* opacity: 0.4; */
}

.heading {
    padding: 7px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
}