body {
  margin: 0 0 0 0;
  background-color: #2d3436;
}

.schedule-Wrapper {
  width: 100%;
  height: 95vh;
  background: radial-gradient(circle, gray 0%, black 100%);
}


.schedule-box {
  width: 100%;
  height: 100%;
  /* margin: 0 auto; */
  /* margin: 4px; */
  /* border-radius: 5px; */
  /* background-color: #b2bec3; */
}


.schedule-topPanel {
  position: sticky;
  /* position: fixed; */
  top: 3%;
  left: 0;
  /* height: 100%; */
  height: 30%;
  width: 15%;
  border-radius: 5px 5px 0 0px;
  float: left;
  z-index: 2000;
}

@keyframes slide {
  from { left: 100%;}
  to { left: -100%;}
}
@-webkit-keyframes slide {
  from { left: 100%;}
  to { left: -100%;}
}

.messageBar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5%;
  padding: .4%;
  z-index: 5;
  /* background: rgb(249,249,249); */
  background: black;
  overflow: hidden;
  z-index: 2001;
}

.dateBox  {
  position: fixed;
  display: block;
  left: .5%;
  top: 0;
  min-width: 12%;
  /* height: 100%; */
  padding: .3%;
  border-radius: 5px;
  text-align: center;
  font-size: 1.5vw;
  font-weight: bold;
  background: lightgreen;
  border: 1px solid white;
  z-index: 10;
}

.scrollingText {
 position:absolute;
 top:0;
 left:0;
 /* width:100%; */
 /* height:10%; */
 font-size: 3vh;

 color: red;

 animation-name: slide;
 animation-duration: 30s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 -webkit-animation-name: slide;
 -webkit-animation-duration: 30s;
 -webkit-animation-timing-function:linear;
 -webkit-animation-iteration-count: infinite;
}

/* ## -- Calander App -- ##   {Start} */

.mobile-calendar-Btn  { display: none; }
.closeMobile-Calendar { display: none;}

.schedule-LP-calendar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 30%; */
  height: 100%;
  margin: 0 auto;
  /* background: #ff7675; */
  border-radius: 5px 0 0 0;
  /* float: left; */
}

.calanderWrapper  {
  width: 100%;
  height: 95%;
  /* background: gray; */
  margin: 0 auto;
  /* padding-top: 2%; */
  border-radius: 10px;
  border: 1px solid gray;
  background: radial-gradient(circle, gray 0%, black 100%);
}

.calanderWrapper select {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-align-last:center;
}
.calanderWrapper table {
  width: 90%;
  /* height: 100%; */
  margin: 5% auto;
  font-size: 1.5vh;
}

.calendar table,
.calendar th,
.calendar td	{
	border: 1px solid black;
}

.calendar th,
.calendar td {
  width: 10%;
  height: 12%;
  text-align: center;
  border-radius: 5px;

}


.dayTitle {
  background: white;
}

.skipDays {
  /* border: 1px solid #5b5b5e !important; */
}

.today  {
  background: lightgreen;
  color: black;
  /* color: white; */
  /* cursor: pointer; */
}

.daysActive {
  background: black;
  color: white;
  cursor: pointer;
}

.daysActive:hover {
  background: white;
  color: black;
}

.days {
  background: #565656;
}

.daysAdmin {
  background: #565656;
  cursor: pointer;
}

.daysAdmin:hover {
  background: white;
  color: black;
}




.testBox  {
  height: 100%;
  width: 20%;

  display: inline-block;

  background: black;


}





/* ## -- Calander App -- ##   {END} */

.schedule-corts-top {
  position: sticky;
  top: 3%;
  width: 80%;
  height: 30%;
  /* float: left; */
  white-space: nowrap;
  z-index: 2;
  /* background: red; */
}


.cort-title-box {
  height: 100%;
  width: 24%;
  display: inline-block;
  border-radius: 5px;
  margin-left: 10px;
  padding-top: .5%;
}

.cort-title-image {
  position: relative;
  width: 96%;
  height: 65%;
  /* background: white; */
  /* margin: 0 auto; */
  border-radius: 10px;
}

.cort-title-image img {
  width: 105%;
  height: 110%;
  border-radius: 2px;
}

.courtImage-Number  {
  position: absolute;
  width: 100%;
  top: 10%;
  font-size: 7vw;
  font-weight: bold;
  text-align: center;
}

.cort-title {
  width: 101%;
  height: 20%;
  background: black;
  /* border: 1px solid gray; */
  color: #FFF;
  border-radius: 4px;
}

.cort-title h1 {
  text-align: center;
  padding-top: 5%;
  font-family: Roboto;
  font-size: 1.5vw;
}




.schedule-corts-details {
  /* position: relative; */
  width: 100%;
  height: 100%;
  /* border-radius: 5px 5px 5px 5px; */
  /* padding-top: 1%; */
  /* background: #81ecec; */
  /* background: #6d6d72; */
  /* background: radial-gradient(circle, gray 0%, black 100%); */
  /* float: left; */
  overflow: auto;

  /* overflow-x: auto; */
  /* overflow-y: visible !important; */
  white-space: nowrap;
}




.schedule-LP-time {
  position: sticky;
  left: 0;
  /* width: 100%; */
  width: 18.8%;
  height: 70%;
  /* background: #00cec9; */
  border-radius: 0 0 0 5px;
  float: left;



  /* CSS Grid */
  /* background-size: 50% 5%;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px); */

 /* Css Dots */
 /* background-size: 40px 40px;
 background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); */

 /* Math Paper */
 /* background:
      linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
      linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
      linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
      linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
      linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
      linear-gradient(-90deg, #aaa 1px, transparent 1px),
      linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
      linear-gradient(#aaa 1px, transparent 1px),
      #f2f2f2;
  background-size:
      4px 4px,
      4px 4px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px; */
}


.schedule-RP-Slots {
  width: 80%;
  height: 70%;
  border-radius: 5px 5px 5px 5px;
  float: left;
  overflow-y: visible;
}


/* Time Layout */

.time-Block {
  width: 90%;
  height: 30px;
  text-align: right;
  float: left;
  margin-left: 15px;
  border: 1px solid gray;
  border-width: 1px 1px 0px 1px;
  border-radius: 5px;
  /* padding-top: 5px; */
  /* background: #000; */
  background: radial-gradient(circle, gray 0%, black 100%);

}

.time-Block:last-child {
  border-width: 1px 1px 1px 1px;
}

.time-Block-date {
  height: 85%;
  width: 49.5%;
  padding-top: 5px;
  border-radius: 5px 1 0 5px;
  text-align: center;
  font-weight: 900;
  /* background: #00b894; */
  color: #FFF;
  float: left;
}

.time-Block-time {
  height: 85%;
  /* Sean - Removed month, so increasing to 80% width */
  /* width: 50%; */
  width: 90%;
  height: 25px;
  float: left;
  margin-left: 15px;
  border: 1px solid gray;
  border-width: 1px 1px 0px 1px;
  /* border-radius: 5px; */
  /*  */
  padding-top: 5px;
  border-radius: 5px 5px 5px 5px;
  text-align: center;
  font-weight: 900;
  font-size: 1.3vw;
  /* background: lightgreen; */
  background: black;
  color: white;
  /* float: left; */
}

.blockTimeNow {
  border-bottom: 2px solid red !important;
}


.cortBookingBox {
  height: 100%;
  width: 24%;
  display: inline-block;
  /* background: blue; */
  /* float: left; */
  margin-left: 10px;
  font-size: 1.3vw;
}

.bookingItem  {
  width: 99.5%;
  height: 25px;
  float: left;
  border: 1px solid #000;
  border-width: 1px 1px 0px 1px;
  border-radius: 5px;
  padding-top: 5px;
  text-align: center;
  background: #f2f2f2;
  cursor: pointer;
}

.bookingItem:hover  {
  background: #addfff;
}


.bookingItem:last-child  {
  border-width: 1px 1px 1px 1px;
}

.floatRight  {
  float: right !important;
  margin-right: 5%;
}




.booked {
  background: #fb250f;
}

.booked i {
  float: left;
  margin-left: 5%;
}

.booked span {
  /* float: right; */
  /* margin-right: 5%; */
  color: black;
}

.mybooking {
  background: #f79318;
}



/* #### POP UP BOXS */
.popUp-Wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background-color:rgba(0,0,0,0.7);
}


/* Add Schedule Pop up BOx */

.addSchedule-Popup  {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 60%;
  z-index: 110;
  background: #3D3C3F;
  border-radius: 10px;
}

.addSchedule-title {
  width: 100%;
  height: 10%;
  background: #2a292b;
  border-radius: 10px 10px 0px 0px;
}

.addSchedule-title h1 {
  margin-top: 0;
  padding-top: 1%;
  text-align: center;
  color: #FFF;
}

.addSchedule-core {
  width: 95%;
  height: 80%;
  margin: 0 auto;
  background: #dfe6e9;
  border-radius: 5px;
  margin-top: 0.5%;
  padding: 1%;
}

.addSchedule-buttons  {
  width: 100%;
  height: 10%;
  background: #3D3C3F;
  padding-top: 1.5%;
  border-radius: 0px 0px 10px 10px;
}

.addSchedule-button {
  width: 20%;
  height: 50%;
  padding-top: 1%;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

#addSchedule-Accept {
  float: left;
  margin-left: 15%;
  background-color: #55efc4;
}
#addSchedule-Accept:hover{  background-color: #89ef55;  }

#addSchedule-Close {
  float: right;
  margin-right: 15%;
  background-color: #d63031;
}
#addSchedule-Close:hover { background-color: #fd5556; }



/* Add Booking Pop up Box */
.addBoking-Popup  {
  position: absolute;
  top: 2%;
  left: 25%;
  width: 50%;
  /* height: 90%; */
  z-index: 110;
  /* background: rgb(129,126,126); */
  background: radial-gradient(circle, rgba(129,126,126,1) 0%, rgba(0,0,0,1) 100%);
  border-radius: 10px;
}

.addBoking-head {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  background: #313131;
  border-radius: 10px 10px 0 0 ;
}
/* .addBoking-head span {
  color: #FFF;
  font-size: 1.5vw;
  font-weight: bold;
} */

.addBoking-head-close {
  cursor: pointer;
  /* padding: 1%; */
  margin-right: 2%;

}

.addBoking-head-close i {
  color: red;
  cursor: pointer;

  font-size: 2em;
}



.addBoking-body {
  position: relative;
  width: 100%;
  /* height: 75%; */
  /* padding-top: 2em; */
  font-size: 2vw;
  color: #FFF;
  /* text-align: center; */
}

.addBoking-body p {
  text-align: center;
  color: #FFF;
  font-size: 2vw;
}

.addBoking-body input[type="radio"] {
  color: #FFF;
  margin-left: 25%;
  cursor: pointer;
  width: 1.5vw;
  height: 1.5vw;
  /* text-align: left; */
}

.addBoking-body-info-extra {
  text-align: center;
  margin-top: 1%;
}

.addBoking-body-info-extra label {
  font-size: 1.5vw;

}

.addBoking-body-info-extra input[type="checkbox"] {
  width: 1.5vw;
  height: 1.5vw;
}


.addBoking-body-info  {
  width: 100%;
  /* height: 20%; */
  text-align: center;
  font-size: 2vw;
  color: lightgreen;
  text-shadow: 10px 10px 10px black;
}


.additionInfo {
  padding-top: .5em;
  text-align: center;
  font-size: 1.6vw;
  color: #000;
}

.additionInfo input[type="text"] {
  width: 40%;
  min-height: 20px;
  text-align: center;
  font-size: 1.5vw;
}


.addBoking-foot {
  width: 100%;
  /* height: 20%; */
  color: #FFF;
}

.addBoking-button {
  width: 80%;
  margin: 2% auto;
  padding: 1%;
  margin-top: 5%;
  border-radius: 5px;
  text-align: center;
  font-size: 2vw;
  font-weight: 400;
  color: #FFF;
  background: radial-gradient(circle, rgba(19,181,0,1) 0%, rgba(38,73,23,1) 100%);
  cursor: pointer;
}

.addBoking-body img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 4vw;
  /* height: 5%; */
  /* padding-bottom: 20px; */
  /* border: 1px solid black; */
}


.addBoking-button:hover {
  background: rgb(55,231,34);
  background: radial-gradient(circle, rgba(55,231,34,1) 0%, rgba(59,122,32,1) 100%);
}

.addBoking-foot input[type="checkbox"] {
  margin-left: 30%;
}

.addBoking-body-admin {
  width: 100%;
  /* background: red; */
  padding-bottom: .2em;
  padding-top: .2em;
}
.bookingAdminButton {
  /* position: absolute; */
  width: 90%;
  margin: 0 auto;
  padding: 1%;
  /* background: white; */
  background: radial-gradient(circle, rgb(253, 59, 28) 0%, rgb(82, 2, 2) 100%);
  /* color: black; */
  border-radius: .25em;
  text-align: center;
  cursor: pointer;
  /* border: 3px solid red; */

}


/* Confirm Booking Pop up Box */

.confirm-Pop  {
  position: absolute;
  top: 30%;
  left: 25%;
  width: 50%;
  height: 50%;
  z-index: 120;
  background: #FFF;
  -webkit-box-shadow: 4px 4px 5px 6px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 4px 5px 6px rgba(0,0,0,0.75);
  box-shadow: 4px 4px 5px 6px rgba(0,0,0,0.75);
  border-radius: 5px;
}

.confirm-data-wrapper {
  margin: 0 auto;
  margin-top: 15%;
  height: 50%;
  width: 90%;

}
.confirm-data {
  width: 80%;
  height: 100%;
  text-align: center;
  font-size: 2.5vw;
  /* background-color: blue; */

  float: left;
}
.confirm-data p {
  margin-block-end: 1px;
  margin-block-start: 1px;

}




.checkmark {
  float: left;
  font-family: arial;
  color: green;
  font-weight: 300;
  font-size: 6vw;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}

.confirm-button {
  width: 25%;
  height: 12%;
  padding-top: 2%;
  margin: 0 auto;
  text-align: center;
  font-size: 3vw;
  color: #FFF;
  background: #2a292b;

  cursor: pointer;
}

.confirm-button:hover {
  background-color: green;
  color: #000;
}





.hiddenData { display: none; }

/* >>> User / Settings MENU <<< */

.userMenu {
  width: 70%;
  height: 60%;
  background: radial-gradient(gray, black);
  margin: 0 auto;
  margin-top: 10%;
  /* background: #FFF; */
  border: 1px solid #000;
  border-radius: 10px;

}

.userMenu h1 {
  text-align: center;
  color: white;
  font-size: 2.5vw;
}

.userMenu-body  {
  width: 90%;
  height: 60%;
  margin: 0 auto;
  border-radius: 10px;
  background: gray;
  padding: 1%;
  text-align: center;
  font-size: 2vw;
}

.userMenu-body span {
  color: white;
}

.userMenu-foot  {
  width: 100%;
  height: 20%;
}

.userMenu-button  {
  width: 18%;
  height: 35%;
  margin-top: 0.75%;
  margin-left: 4%;
  padding: 1%;
  padding-top: 2.5%;
  float: left;
  border-radius: 10px;
  border: 1px solid #000;
  background: #68ef85;
  text-align: center;
  font-size: 2vw;
  cursor: pointer;
}

.userMenu-button:hover  { background-color: lightgray;  }

#btn-Logout { background: red;  }
#btn-Logout:hover { background: #ff4545;  }









.Menu-Right {
  position: absolute;
  top: 35%;
  right: 0;
  width: 2.5%;
  height: 10%;
  padding-top: 4%;
  background: #000;
  color: #FFF;
  text-align: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  font-size: 16px;
  font-size: 1vw;
  cursor:pointer;
  -webkit-border-top-left-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  transform: translateZ(100px);
  box-shadow: -5px 5px 20px;
  z-index: 105;
}







/* >>> Club Select MENU <<< */

.clubMenu {
  margin: 5% auto;
  width: 90%;
  background: white;
  border-radius: .25em;
  padding: .2em;

}

.clubMenu-Head {
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
  padding: 2%;
  background: white;
  border-radius: .15em .15em 0 0;
}
.clubMenu-Body {
  background: radial-gradient(gray, black);
  width: 100%;
  /* margin: 0 auto; */
  border-radius: .1em;
}

.clubMenu-Body h3 {
  text-align: center;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-top: 2em;
  color: white;
  font-size: 2vw;
}


.clubMenu-Foot {
  width: 100%;
  background: #201e1e;
  border-radius: 0 0 .25em .25em;

  padding: 1em 0 1em 0;
}

.clubMenu-Btn {
  width: 20%;
  margin: 0 auto;
  /* margin-top: .2em; */
  padding: 1.2%;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  background: green;
  border: 1px solid black;
  border-radius: .25em;
  cursor: pointer;

}

.clubMenu-Data {
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  text-align-last: center;
  height: 40vh;
  overflow-y: auto;
}


.clubMenu-ClubBox {
  width: 50%;
  margin: 0 auto;
  margin-bottom: 1em;
  background: white;
  padding: 1%;
  border-radius: .25em;
  text-align: center;
  font-size: 1vw;
}

.clubMenu-ClubBox:hover {
  background: lightgreen;
}

.clubMenu-ClubBox span {
  width: 100%;
}

.clubMenu-ClubBox img {
  width: 100%;
  max-height: 15vh;
  margin: 0 auto;
  border-radius: .2em;
}

.noAccess:hover {
  background: #f76767;
}


/* >>> View Booking MENU <<< */

#view-Booking {
  /* display: block; */
}

.booking-View {
  width: 30%;
  margin: 10% auto;
  border-radius: .35em;
  background: white;
}
.booking-View-Head {
  width: 100%;
  font-size: 2em;
  text-align: center;
  padding: 1% 0 1% 0;
  background: #3e3c3c;
  border-radius: .1em .1em 0 0;
}
.booking-View-Body {
  width: 100%;
  text-align: center;
}

.booking-View-Body span {
    color: green;
}


.booking-View-Foot {
  width: 100%;
  background: #201e1e;
  border-radius: 0 0 .25em .25em;
}

.booking-View-Btn {
  display: inline-block;
  width: 20%;
  padding: 1%;
  margin-left: 18%;
  margin-bottom: 2%;
  margin-top: 2%;
  border-radius: .25em;
  font-size: 1em;
  text-align: center;
  background: gray;
  cursor: pointer;
}

#closeBookingView { background: lightgreen; }
#deleteBooking { background: red; }


/* ########################## */
/* >>> Admin Booking MENU <<< */
/* ########################## */


#addBokingAdmin-PopupBox {
  /* display: none; */
}

#dailyOccurence { display: none;}
#weeklyOccurence { display: block;}
#monthlyOccurence { display: none;}
#todayOccurence { display: none;}


.adminBoking-Popup {
  width: 80%;
  margin: 1% auto;
  border: 2px solid black;
  border-radius: .25em;
}

.adminBoking-Head {
  width: 100%;
}
.adminBoking-Title {
  position: relative;
  width: 100%;
  font-size: 2em;
  text-align: center;
  background: #2e2f2e;
  color: white;
  padding: .5em 0 .5em 0;
}
.adminBoking-TopMenu {
  width: 100%;
  background: #d4d4d4;
  display: inline-block;
  border-bottom: 1px solid black
}

.adminBoking-Title-User {
  position: absolute;
  left: 0;
  padding-top: .4em;
  padding-left: .4em;
  color: gray;
}

.adminBoking-Title-User span { color: white; }


.adminBoking-TopMenu h1 {
  float: left;
  width: 20%;
  font-size: 2vw;
  text-align: center;
  /* margin: auto; */
  /* padding: 15px; */
}

.adminBoking-BookingName {
  width: 60%;
  /* display: inline-block; */
  float: left;
  /* padding-top: 10px; */
  /* padding-left: 5%; */
  /* height: 6.5vw; */
  padding: .5em 0 0 0;
}



.adminBoking-BookingName input {
  /* height: 25px; */
  width: 60%;
  font-size: 1.5vw;
  /* margin-top: 10px; */
  margin-left: 20px;
  padding: 2%
  /* margin: 2% 0 2% 20% ; */
}


.adminBoking-URL {
  width: 100%;
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid black;
}
.adminBoking-URL h1 {
  float: left;
  width: 20%;
  font-size: 1vw;
  text-align: center;
}
.adminBoking-URL input {
  display: inline-block;
  margin: auto;
  width: 35%;
  margin-top: .5%;
  font-size: 1vw;
}

.adminBoking-BookingStyle {
  width: 100%;
  display: inline-block;
  text-align: center;
  /* padding-top: 1%; */
  border-bottom: 1px solid black;
}

.adminBoking-BookingStyle h1 {
  float: left;
  width: 20%;
  font-size: 2vw;
  text-align: center;
  /* margin: auto; */
  /* padding: 15px; */
  }

.adminBoking-BookingStyle input[type="checkbox"] {
  /* zoom: 2; */
  width: 1.5vw;
  height: 1.5vw;
  margin-top: -2em;
}

.adminBoking-Color {
  /* width: 20%; */
  float: left;
  font-size: 1.5vw;
  text-align: center;
  padding-top: 1.5%;
  /* color: white; */
}

.adminBoking-Icon {
  float: left;
  width: 15%;
  font-size: 1.5vw;
  padding-top: 1.5%;
  /* color: white; */
}

.adminBoking-Icon i {
  background: #efefef;
  padding: 1%;
  border: 1px solid black;
  border-radius: .15em;
  cursor: pointer;
  color: black;
}

.adminBoking-BarOpen {
  float: left;
  width: 15%;
  font-size: 1.5vw;
  padding-top: 1.5%;
  /* color: white; */
}

.adminBoking-KitchenOpen {
  float: left;
  width: 15%;
  font-size: 1.5vw;
  padding-top: 1.5%;
  /* color: white; */
}


.adminBoking-BookingStyle input,
.adminBoking-BookingStyle i{
  display: inline-block;
}

.adminBoking-Body {
  width: 100%;
  background: #d4d4d4;
  padding-top: .5em;
}

.adminBoking-Body-Courts  {
  width: 30%;
  /* margin: 0 auto; */
  padding: 0.5%;
  background: black;
  color: white;
  margin-left: 1.5%;
  margin-top: 1.5%;
  font-size: 2vw;
  text-align: center;
  /* border-radius: .25em; */
  border: 1px solid black;
  float: left;
  cursor: pointer;
}

.adminBoking-Body-Title {
  width: 100%;
  text-align: center;
  font-size: 2vw;
}


.adminBoking-Body-BookingTime {
  width: 100%;
  background: #d4d4d4;
  display:inline-block;
  border-bottom: 1px solid black;
}

.adminBoking-Body-BookingTime h1 {
  /* padding: 10px; */
  font-size: 2vw;
  text-align: center;
  width: 20%;
  float: left;
  /* margin: auto; */
}

.adminBoking-Body-BookingTime input[type="time"] {
  /* zoom: 1.5; */
  font-size: 1.5vw;
  /* width: 30%; */
  /* height: 1.5vw; */
  /* margin-top: -2em; */
}

.adminBoking-Body-BookingTime select {}

.bookingTimeLabel {
  display: inline-block;
  margin: auto;
  width: 35%;
  padding-top: 1.5%;
  font-size: 1.5vw;
  text-align: center;
}


/* >>> MIDDLE BODY - HOLDS REOCCURENCE PATTEN */
.bookingPatten-Wrapper  {
  width: 100%;
  background: #d4d4d4;
  display:inline-block;
  border-bottom: 1px solid black;
  }

.bookingPatten-Wrapper h1 {
  /* padding: 10px; */
  font-size: 2vw;
  text-align: center;
  width: 20%;
  float: left;
  /* margin: auto; */
}

.adminBoking-Body-BookingPatten {
  width: 25%;
  font-size: 1.5vw;
  text-align: left;
  padding-bottom: 1.5%;
  display: inline-block;
  padding-top: 20px;
  float: left;
  margin-left: 5%;
}

.adminBoking-Body-BookingPatten h1 {
  padding: 10px;
  font-size: 2vw;
  text-align: center;
  width: 20%;
  /* float: left; */
  margin: auto;
}

.adminBoking-Body-BookingPatten input {
  margin-left: 10%;
  width: 1.5vw;
  height: 1.5vw;
}

.adminBoking-Body-BookingPattenControl  {
  position: absolute;
  display: inline-block;
  padding-top: 20px;
  width: 40%;
  font-size: 1.5vw;
  /* padding: .4em; */
  /* float: left; */
}

.adminBoking-Body-BookingPattenControl label {

}

.adminBoking-Body-BookingPattenControl input {
  /* margin-left: 10%; */
  width: 3vw;
  height: 1.5vw;
  font-size: 1.5vw;
}

/* >>> BOTTEM BODY - HOLDS DATE RANGE */
.adminBoking-Body-Range {
  width: 100%;
  display: inline-block;
  text-align: center;
  /* padding-top: 1%; */
  border-bottom: 1px solid black;
  }

  .adminBoking-Body-Range input {
    /* margin-left: 10%; */
    /* width: 3vw; */
    /* height: 1.5vw; */
    font-size: 1.5vw;
  }

.adminBoking-Body-Range h1 {
  /* padding: 0 0 0 2em; */
  float: left;
  /* padding: 10px; */
  width: 20%;
  font-size: 2vw;
  text-align: center;
}

.rangeStart {
  position: relative;
  display: inline-block;
  width: 30%;
  /* top: -3em; */
  /* margin-left: 4em; */
  font-size: 1.5vw;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  float:left;
}

.rangeEnd  {
  position: relative;
  display: inline-block;
  width: 45%;
  /* top: -.2em; */
  font-size: 1.5vw;
  padding-top: 20px;
  text-align: left;
  float:left;

}

.rangeEnd label {
  display: inline-block;
  width: 25%;
  text-align: left;
}


/* >>> FOOTER - HOLDS BUTTONS */
.adminBoking-Foot {
  width: 100%;
  background: gray;
  padding: 1em 0 1em 0;
  border-radius: 0 0 .25em .25em;
}

.adminBoking-Btn {
  width: 25%;
  display: inline-block;
  margin-left: 4.5%;
  padding: 1%;
  border-radius: .25em;
  font-size: 2vw;
  text-align: center;
  background: black;
  color: white;
  cursor: pointer;
}

#adminBooking-Ok {
  background: Green;
  box-shadow: 10px 10px 10px black;
}

#adminBooking-Cancel {
  /* background: lightgreen; */
  box-shadow: 10px 10px 10px black;
}

#adminBooking-Remove {
  background: Red;
  box-shadow: 10px 10px 10px black;
}

.selectIcon-Pop {
  display: none;
  position: absolute;
  z-index: 5100;

  width: 20%;
  padding: .5%;

  background: white;
  border: 1px solid black;
  /* border-radius: .25em; */
  font-size: 2em;
}

.selectIcon-Pop i {
  padding: 1%;
  cursor: pointer;
  border-radius: .25em;

}

.selectIcon-Pop i:hover {
  background: lightgreen;
}


.selectCourts-Pop {
  display: none;
  position: absolute;
  z-index: 5100;

  width: 60%;
  max-height: 60%;
  padding: .5em;
  background: white;
  border: 1px solid black;
  /* border-radius: .25em; */
  font-size: 1.5vw;
  overflow-y: auto;
  box-shadow: 10px 20px 35px;
}

.courtSelect-ALL  {
  width: 45%;
  /* margin: 0 auto; */
  padding: 1%;
  /* margin-right: 2%; */
  border-radius: .2em;
  text-align: center;
  float:left;
  font-size: 2vw;
  background: #3d3e3d;
  color:white;
  cursor: pointer;
}

.courtSelect-OK {
  width: 45%;
  /* margin: .2em auto; */
  padding: 1%;
  border-radius: .2em;
  text-align: center;
  float:right;
  font-size: 2vw;
  background: lightgreen;
  cursor: pointer;
}

.courtSelect-AdminBooking {
  display: inline-block;
  width: 20%;
  margin-left: .2em;
  margin-top: .2em;
  padding: 1%;
  font-size: 1.5vw;
  border-radius: .2em;

  text-align: center;

  background: #c2c2c7;

}

.courtSelect-AdminBooking input {
  margin: 0 auto;
  /* zoom: 2; */
  width: 1.5vw;
  height: 1.5vw;
}



/* >>>>>>>>> Sport Selection Pop-Up */
/* #sportSelect-Menu { display: block; } */
.sportMenu {
  width: 60%;
  margin: 10% auto;
  padding-bottom: .3%;
  border-radius: .4em;
  background: white;
}
.sportMenu-Head {
  width: 100%;
  padding: .5em 0 .5em 0;
  font-size: 4vw;
  font-weight: bold;
  text-align: center;
  border-radius: .2em .2em 0 0;
}
.sportMenu-Body {
  width: 99%;
  margin: 0 auto;
  padding: 3em 0 3em 0;
  background: radial-gradient(gray, black);
}
.sportMenu-Body select {
  display: block;
  width: 50%;
  font-size: 2.5vw;
  /* height: 40px; */
  margin: 0 auto;
  border-radius: .2em;
  text-align-last: center;
}
.sportMenu-Foot {
  width: 99%;
  margin: 0 auto;
  background: #201e1e;
  padding: .2em 0 .2em 0;
  border-radius: 0 0 .2em .2em;
}
.sportMenu-Btn  {
  width: 30%;
  margin: .5em auto;
  padding: 1%;
  font-size: 1em;
  text-align: center;
  border-radius: .2em;
  background: red;
  cursor: pointer;
}


.refresh-Button {
  position: absolute;
  right: 1.7%;
  top: 5.2%;
  width: 30px;
  height: 30px;
  padding: 1%;
  border-radius: .25em;
  font-size: 1.5em;
  text-align: center;
  color: lightgreen;
  background: black;
  z-index: 5;
  cursor: pointer;

  -webkit-box-shadow: 0px 0px 10px 2px rgba(245,245,245,1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(245,245,245,1);
  box-shadow: 0px 0px 10px 2px rgba(245,245,245,1);
}

.SportChange-Button {
  position: absolute;
  right: 1.7%;
  bottom: 5.2%;
  width: 30px;
  height: 30px;
  padding: 1%;
  border-radius: .25em;
  font-size: 1.5em;
  text-align: center;
  color: cyan;
  background: black;
  z-index: 5;
  cursor: pointer;

  -webkit-box-shadow: 0px 0px 10px 2px rgba(245,245,245,1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(245,245,245,1);
  box-shadow: 0px 0px 10px 2px rgba(245,245,245,1);
}


.loadingSpinn {
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}

.StoploadingSpinn {
  -webkit-animation:spin 4s linear 1;
  -moz-animation:spin 4s linear 1;
  animation:spin 4s linear 1;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


















/* // */