* {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border:0;
    margin:0;
    padding:0;
    font-size:16px;
}
.UserButtonLoader {
    width: 30px;
    height: 30px;
    border: 5px solid rgb(255 255 255 / 16%);
    border-bottom-color: #04AA6D;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: UserButtonLoaderRotation 1s linear infinite;
}
@keyframes UserButtonLoaderRotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
table { border-collapse: collapse; }
table tr td { vertical-align:top; }
#App{/*position:relative;display:normal;position:fixed;left:0;top:30px;*/}
.Header{width:100vw;position: fixed; top: 0;height:20px;xwidth:100%;background-color:lightgreen;/*display:normal;position:fixed;left:50px;top:0;*/}
.NavigationOuter{
    /*overflow-y:scroll;overflow-x:hidden;scrollbar-width: none;position:static;top:0;bottom:0;*/
    /*position: fixed;*/
    xwidth: 250px;
    height:100vh;
    left: 0;
    right: 0;
    overflow-y: scroll;
    top: 20px;
    scrollbar-width: none;
}
.MainContentOuter {
    xposition: fixed;
    padding-top:20px;
    /*padding-left:350px;*/
    overflow-x: scroll;
    overflow-y:scroll;
    left: 0;
    xtop: 0px;
    height:100vh;
    scrollbar-width: none;
    /*overflow-y:scroll;overflow-x:scroll;scrollbar-width: none;border-top:0;border-bottom:0; min-width:90vw; float:left;width:600px;*/
    /*
  padding: 0 30px;
  overflow-y: scroll;
    */
}
.OrientationButton{vertical-align:central;font-weight:bold;font-size:40px;width:50px;height:50px;color:white;background-color:#c00;}
.SportButton { height:50px; xmargin:2px; padding:2px; background-color:lightgray;}
.SportButton.Selected { color:white;background-color:red; }
.Calendar thead tr td { text-align:center; font-weight:500;}

.CalendarButton { width:50px;height:50px;background-color:lightgray; }
.CalendarButton.Selected { color:white;background-color:red; }
.CalendarButton.Weekend {font-weight:bold;}

.SurfacesTable thead tr { text-align:center;background-color:white;position: sticky; top: 0px;xborder-right:solid 1px gray;xborder-top:solid 1px gray;xborder-bottom:solid 1px gray;width:100px; }
.SurfacesTable tbody tr td { padding-top:0px;text-align:center;xborder-left:solid 1px gray; }
.SurfacesTable tbody tr td:last-child { xborder-right:solid 1px gray; }
.TimeSlot { overflow:hidden;xborder-top:solid 1px gray;text-align:center;xwidth:100px; }
.TSTimes { display:block;font-weight:500; }

.ZoomOutHorizontal {
    background-size: cover;
    background:repeating-linear-gradient(
        to bottom,
        #ff0000,
        #ff0000 1px,
        transparent 1px,
        transparent 10px
    );
}
.ZoomInHorizontal {
    background-size:cover;
    background:repeating-linear-gradient(
        to bottom,
        #ff0000,
        #ff0000 1px,
        transparent 1px,
        transparent 5px
    );
}
.ZoomOutVertical {
    background-size: cover;
    background:repeating-linear-gradient(
        to right,
        #ff0000,
        #ff0000 1px,
        transparent 1px,
        transparent 10px
    );
}
.ZoomInVertical {
    background-size: cover;
    background:repeating-linear-gradient(
        to right,
        #ff0000,
        #ff0000 1px,
        transparent 1px,
        transparent 5px
    );
}
.AmountButton,.AmountButton,.PurchaseButton,.MyBookingsButton,.MyBookingsButton,
.MyTopupButton,.MyPaymentsButton,.MyMemberInfoButton,
.MemberName,.LogoutButton,.MembershipButton,.TopupButton,
.LoginButton,.LeagueButton,.TournamentButton,.MenuLoginButton {
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color:lightgray;
    border:solid 1px gray;
}
.UserButton,.UserButtonDisabled,.UserButtonWaiting,.LoginButton,.KeyboardButton,.AddToClassButton,.RemoveFromClassButton{
    background-color: #04AA6D;
    border: solid 10px #04AA6D;
    color: white;
    padding: 10x;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    border-radius: 10%;
}
.UserButtonDisabled {background-color: #ff0000;border: solid 10px #ff0000;}
.UserButtonWaiting {border: solid 10px #ff0000;background-color: #ff0000;xcolor: gray;animation: UserButtonBorderPulsate 2s infinite;}
@keyframes UserButtonBorderPulsate {
    0%   { background-color: rgba(255, 0, 0, 1); }
    50% { background-color: rgba(0, 255, 0, 1); }
    100%   { background-color: rgba(0, 0, 255, 1); }
}


.KeyboardButton{margin:4px;}
.xAddToClassButton,.xRemoveFromClassButton {width:50%;}
.KeyboardButton,.EditScoreButton {width: 50px;}
.MemberName{padding:2px;min-width:50px;}
.MemberName.Selected{color:white;background-color:red;}
.AmountButton{width:70px;}
.AmountButton.Selected { color:white;background-color:red; }
.EditScoreButton{height: 50px;background-color:lightgray;}
.Message { background-color:red; color:white; }