
html {
    background-color: black;
    overflow: hidden;
}

body {
    overflow:hidden;
}

#DevLinks {
    position:absolute;
    left:0;
    bottom:0;
    background-color:rgba(0,0,0,.5);
    color:white;
}

#Room {
    display:block;
    position:absolute;
    overflow:hidden;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    transform-style: preserve-3d;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    -webkit-perspective: 65vw;
    -moz-perspective: 65vw;
    -o-perspective: 65vw;
    perspective: 65vw;
    background-color:transparent;
    z-index:2;
}

#Room.Image {
    background-image:url(/Static/Images/Room/beach.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% 100%;
}

#Floor {
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-size:1em;
    font-size:1vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    background-color: transparent;
    z-index: 1;
    filter: blur(.13em);
}

#Floor.Hidden {
    background: -moz-radial-gradient(center, ellipse cover, #606060 0%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #606060), color-stop(100%, #000000));
    background: -webkit-radial-gradient(center, ellipse cover, #606060 0%, #000000 100%);
    background: -o-radial-gradient(center, ellipse cover, #606060 0%, #000000 100%);
    background: -ms-radial-gradient(center, circle contain, #606060 0%, #000000 100%);
    background: radial-gradient(ellipse at center, #606060 0%, #000000 100%);
}

#Floor.Hidden[data-void="radialgrey"] {
    background: -moz-radial-gradient(center, ellipse cover, #606060 0%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #606060), color-stop(100%, #000000));
    background: -webkit-radial-gradient(center, ellipse cover, #606060 0%, #000000 100%);
    background: -o-radial-gradient(center, ellipse cover, #606060 0%, #000000 100%);
    background: -ms-radial-gradient(center, circle contain, #606060 0%, #000000 100%);
    background: radial-gradient(ellipse at center, #606060 0%, #000000 100%);
}

#Floor.Hidden[data-void="radialblue"] {
    background: -moz-radial-gradient(center, ellipse cover, #617FDE 0%, #1F2E73 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #617FDE), color-stop(100%, #1F2E73));
    background: -webkit-radial-gradient(center, ellipse cover, #617FDE 0%, #1F2E73 100%);
    background: -o-radial-gradient(center, ellipse cover, #617FDE 0%, #1F2E73 100%);
    background: -ms-radial-gradient(center, circle contain, #617FDE 0%, #1F2E73 100%);
    background: radial-gradient(ellipse at center, #617FDE 0%, #1F2E73 100%);
}

#Floor.Hidden[data-void="radialred"] {
    background: -moz-radial-gradient(center, ellipse cover, #B02224 0%, #280000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #B02224), color-stop(100%, #280000));
    background: -webkit-radial-gradient(center, ellipse cover, #B02224 0%, #280000 100%);
    background: -o-radial-gradient(center, ellipse cover, #B02224 0%, #280000 100%);
    background: -ms-radial-gradient(center, circle contain, #B02224 0%, #280000 100%);
    background: radial-gradient(ellipse at center, #B02224 0%, #280000 100%);
}

#Floor.Hidden[data-void="radialgreen"] {
    background: -moz-radial-gradient(center, ellipse cover, #3CA24F 0%, #004000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #3CA24F), color-stop(100%, #004000));
    background: -webkit-radial-gradient(center, ellipse cover, #3CA24F 0%, #004000 100%);
    background: -o-radial-gradient(center, ellipse cover, #3CA24F 0%, #004000 100%);
    background: -ms-radial-gradient(center, circle contain, #3CA24F 0%, #004000 100%);
    background: radial-gradient(ellipse at center, #3CA24F 0%, #004000 100%);
}

#Floor.Hidden[data-void="lineargrey"] {
    background-image: linear-gradient(to bottom, #606060 0%, #000000 100%);
}

#Floor.Hidden[data-void="linearred"] {
    background-image: linear-gradient(to bottom, #911A1C 0%, #180006 100%);
}

#Floor.Hidden[data-void="lineargreen"] {
    background-image: linear-gradient(to bottom, #1E7228 0%, #002000 100%);
}

#Floor.Hidden[data-void="linearblue"] {
    background-image: linear-gradient(to bottom, #1E2872 0%, #000020 100%);
}

#Floor.Hidden[data-void="chromakeygreen"] {
    background:none;
    background-color:#00b140;
}

#Floor.Hidden[data-void="chromakeyblue"] {
    background:none;
    background-color:#055CAC;
}


#Floor .Floor {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #606060;
    background-image: none;
    background-repeat: repeat;
    background-position: 50% 50%;
    transform-style: preserve-3d;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    perspective: inherit;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
}


#Floor .Floor.Top {
    width:100%;
    top:0;
    bottom:auto;
    left:0;
    right:0;
    height:60%;
    background-size:25em;
}

#Floor.Hidden .Floor.Top {
    display:none;
}


#Floor .Floor.Bottom {
    width:100%;
    top:auto;
    bottom:-5%;
    left:0;
    right:0;
    height:45%;
    background-size:25em;
}

#Floor.Hidden .Floor.Bottom {
    display:none;
}

#Floor .Floor.Bottom:after {
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,.7);
}


#Floor .PortraitWarning {
    display: none;
    font-family: sans-serif;
    text-align: center;
    color: white;
    font-size: 4vw;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
}

#Floor .PortraitWarning.Above {
    top: 1em;
    bottom:auto;
}

#Floor .PortraitWarning.Below {
    top:auto;
    bottom: 3em;
}

#Menus {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events:none;
}

#Menus.Loading:before {
    content:"";
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:black;
}


#Menus .Scrim {
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:rgba(128,128,128,.5);
}

#Menus .Menu {
    display:block;
    color:white;
    position:absolute;
    font-family:sans-serif;
    font-size:1vw;
    left:0;
    right:0;
    top:0;
    bottom:auto;
    pointer-events: auto;
    background-size:auto auto;
    background-repeat:repeat;
    border-bottom:1px solid rgba(0,0,0,.3);
    transition: background-color .3s;
}


#Menus .Menu .Hint {
    display: block;
    background-color: rgba(255,255,255,.7);
    color: black;
    text-align: center;
    font-size:15px;
    line-height:1.4;
    margin-top:.4em;
}

#Menus .Menu svg {
    pointer-events:none;
}

@media screen  and (max-width:1000px) { #Menus .Menu .Hint { font-size:13px; }}
@media screen  and (max-width:800px) { #Menus .Menu .Hint { font-size:11px; }}
@media screen  and (max-width:640px) { #Menus .Menu .Hint { font-size:10px; }}



#Menus .Menu.Top {
    background-image: none;
    background-color:rgba(0,0,0,.4);
}

#Menus .Menu.Top.Urgent {
    background-color:rgba(0,0,0,.9);
}

#Menus .Menu.Splash, #Menus .Menu.Splash.Bottom {
    height: 100%;
    background-color: rgba(0,0,0,.7);
}

#Menus .Menu.Splash.Bottom {
    height: auto;
    min-height:0;
    border:none;
    box-shadow:none;
    padding-bottom:1em;
}



#Menus .Menu.Splash svg.Splash {
    width: 100%;
    height: 12em;
}

#Menus .Menu.Splash .Details {
    display: block;
    position: absolute;
    left: 1em;
    top: auto;
    bottom: 1.6em;
    text-align: left;
    font-size: 13px;
    color: rgba(255,255,255,.3);
}

#Menus .Menu.IntermissionWait {
    text-align:center;
}


#Menus .Menu.IntermissionWait svg.Splash {
    width: 10em;
    height: 10em;
}

#Menus .Menu svg.Wait {
    width:4em;
    height:4em;
}

#Menus .Menu.TransitionWarning svg {
    width: 100%;
    height: 50%;
}

#Menus .Menu.IEWarning svg {
    width: 100%;
    height: 50%;
}



#Menus .Menu.Bottom {
    top:auto;
    bottom:0;
    border-bottom:none;
    border-top:none;
    background-color:rgba(0,0,0,.4);
    border-top:1px solid rgba(0,0,0,.6);
    box-shadow:inset 0 .4em .4em rgba(255,255,255,.3);
    max-height:60%;
    min-height:20%;
}

#Menus .Menu.Right {
    top:0;
    bottom:0;
    right:0;
    left:auto;
    width:auto;
    height:30em;
    margin-top:auto;
    margin-bottom:auto;
    padding:.8em;
}

#Menus .Menu.Right.NextAction {
    height:30em;
    font-size:.75vw;
    border-bottom:none;
}

@media screen  and (min-width:800px) { #Menus .Menu.Right.NextAction { height:26em; }}
@media screen  and (min-width:1000px) { #Menus .Menu.Right.NextAction { height:23.5em; }}
@media screen  and (min-width:1250px) { #Menus .Menu.Right.NextAction { height:21em; }}



#Menus .Menu.Right.NextAction h2 {
    font-size:1.1em;
    margin-top:0;
    margin-bottom:.5em;
}

#Menus .Menu.Right.NextAction .Items {
    display:block;
    width:6.8em;
    border:1px solid rgba(0,0,0,.6);
    background-color:rgba(0,0,0,.35);
}

#Menus .Menu.Right.NextAction .Items .Item {
    margin-top:0;
    margin-bottom:.6em;
}

#Menus .Menu.Right.NextAction .Items .Item.Selected:before {
    display:block;
    position:absolute;
    left:6.5em;
    top:2em;
    content:"";
    width: 0; 
    height: 0; 
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent; 
    border-right:1em solid white;
}

#Menus .Menu.Right.NextAction .Items .Item.Selected:after {
    display:block;
    position:absolute;
    left:-1.5em;
    top:2em;
    content:"";
    width: 0; 
    height: 0; 
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid white;
}




#Menus .Menu .Closer {
    display:block;
    position:absolute;
    top:.5em;
    right:.5em;
    left:auto;
    width:4em;
    height:4em;
    cursor:pointer;
}


#Menus .Menu .Closer svg {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
    fill:white;
}

#Menus .Menu .Body {
    margin-left:1em;
    padding-bottom:1em;
    margin-right:1.5em;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
}

#Menus .Menu.Bottom .Body::-webkit-scrollbar {
    width: 10px;
    height: 10px; 
}

#Menus .Menu.Bottom .Body::-webkit-scrollbar-button {
  width: .5em;
  height: .5em;
}
#Menus .Menu.Bottom .Body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: .25em; }
#Menus .Menu.Bottom .Body::-webkit-scrollbar-track:hover {
    background: rgba(0, 0, 0, 0.2); }
#Menus .Menu.Bottom .Body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: .25em; }
#Menus .Menu.Bottom .Body::-webkit-scrollbar-thumb:hover {
    background: #64B5F6; }
#Menus .Menu.Bottom .Body::-webkit-scrollbar-thumb:active {
    background: #2196F3; }

#Menus .Menu.Top.Disabled {
    background-image:none;
    background-color:rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    pointer-events: none;
}

#Menus .Menu.Top.Disabled .Items .Item  {
    -webkit-filter: grayscale(0.8);
    filter: grayscale(0.8);
    opacity:.8;
}

#Menus .Menu.Top.Minimum {
    border-bottom:none;
}

#Menus .Menu.Top.Hidden {
    display:none;
}


#Menus .Menu h2 {
    text-align:center;
    position:relative;
    color:rgba(255,255,255,.7);
    font-size:24px;
    line-height:1.5;
    margin:0;
    margin-top:6px;
    vertical-align:middle;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

#Menus .Menu.Top h2 {
    color:white;
    line-height:1.5;
    text-shadow:0 0 2px black;
}

#Menus .Menu.Top h2 a {
    position:relative;
    display:inline-block;
    font-size:.8em;
    padding-left:.5em;
    padding-right:.5em;
    line-height:1.8;
    color:white;
    text-decoration:none;
    color:black;
    background-color:rgba(255,255,255,.7);
    text-shadow:none;
}

#Menus .Menu.Top h2 a:hover {
    background-color:white;
}


#Menus .Menu.Top h2 span.minmax {
    font-size: .5em;
    vertical-align: middle;
    color:rgba(255,255,255,.7);
}

#Menus .Menu.Top.Disabled h2  {
    color:rgba(255,255,255,.8);
    text-shadow:0 0 2px rgba(0,0,0,.5);
}

@media screen  and (max-width:1000px) { #Menus .Menu h2 { font-size:20px; }}
@media screen  and (max-width:800px) { #Menus .Menu h2 { font-size:16px; }}
@media screen  and (max-width:640px) { #Menus .Menu h2 { font-size:12px; }}


#Menus .Menu h3 {
    text-align:center;
    position:relative;
    color:rgba(255,255,255,.7);
    font-size:20px;
    line-height:1.5;
    margin:0;
    margin-top:6px;
    vertical-align:middle;
}

#Menus .Menu.IntermissionWait h3 {
    color:white;
}

#Menus .Menu.Top h2 {
    color:white;
    line-height:1.5;
    text-shadow:0 0 2px black;
}

#Menus .Menu.Top.Disabled h2  {
    color:rgba(255,255,255,.8);
    text-shadow:0 0 2px rgba(0,0,0,.5);
}

@media screen  and (max-width:1000px) { #Menus .Menu h3 { font-size:18px; }}
@media screen  and (max-width:800px) { #Menus .Menu h3 { font-size:14px; }}
@media screen  and (max-width:640px) { #Menus .Menu h3 { font-size:11px; }}

#Menus .Timer {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    height:6px;
    background-color:rgba(0,0,0,.3);
}

#Menus .Bottom .Timer {
    top:auto;
    bottom:0;
}

#Menus .Timer .Progress {
    display:block;
    position:absolute;
    left:0;
    right:auto;
    top:0;
    bottom:0;
    width:auto;
    background-color:transparent;
    box-shadow:1px 1px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(255,255,255,.4);
}



#Menus .Menu .Items {
    display:block;
    padding-bottom:.5em;
    font-size:1.25em;
}

#Menus .Menu.Minimum .Items {
    display:none;
}


#Menus .Menu .Items.Center {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#Menus .Menu .Items .Item {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:6em;
    height:7.3em;
    margin:.4em;
    margin-bottom:0;
    cursor:pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    vertical-align:middle;
}

#Menus .Menu .Items .Item.Hide {
    display:none;
}

#Menus .Menu .Items .Item.Disabled {
    pointer-events:none;
    opacity:.5;
}

#Menus .Menu .Items .Item.Disabled .Icon {
    opacity:.3;
}


#Menus .Menu .Items .Item .Icon {
    display:block;
    position:relative;
    width:6em;
    height:6em;
    background-color:white;
    border-radius:50%;
    fill:white;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.30) 20%, rgba(255,255,255,.10) 40%,  rgba(0,0,0,.5)70%, rgba(0,0,0,.5)100%) ;
}

#Menus .Menu .Items .Item:hover .Icon {
    box-shadow:0 0 2px white;
}


#Menus .Menu .Items .Item:active .Icon, #Menus .Menu .Items .Item.Flash .Icon, #Menus .Menu .Items .Item.Selected .Icon {
    box-shadow:0 0 2px black, 0 0 2em rgba(255,255,255,1), inset 1px 1px 5px rgba(0,0,0,.7), 1px 1px 1px white;
}


#Menus .Menu .Items .Item.Text {
    background-color:transparent;
}


#Menus .Menu .Items .Item svg {
    display:block;
    position:absolute;
    width:60%;
    height:60%;
    left:20%;
    top:20%;
}


#Menus .Menu .Chips {
    vertical-align:middle;
}


#Menus .Menu .Cards {
    vertical-align:middle;
}

#Menus .Menu .Items .Item.Chip {
    position:relative;
    margin-left:0;
}

#Menus .Menu .Items .Icon.Chip {
    background: none;
}

#Menus .Menu .Items .Item .Chip svg {
    width:100%;
    height:100%;
    left:0;
    top:0;
}


#Menus .Menu .Items .Item span.Over {
    display:inline-block;
    color:white;
    line-height:2.3em;
    position:absolute;
    font-size:3em;
    font-weight:bold;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
}

#Menus .Menu .Items .Item.Text span.Over {
    line-height:4.1em;
    font-size:1.6em;
}
#Menus .Menu .Items .Item.Text {width:5em; margin-left:0; margin-right:0;}

#Menus .Menu .Items .Item.Text span.Over.Total {color: #80ff80;}
#Menus .Menu .Items .Item.Text span.Over.Total.Low {color: #ff8080;}
#Menus .Menu .Items .Item.Text span.Over.Total.High {color: #ff8080;}


#Menus .Menu .Items .Item span.Under {
    display:inline-block;
    color:rgba(255,255,255,1);
    text-shadow:0 0 1px black, 0 0 3px black;
    position:absolute;
    font-size:1.2em;
    font-weight:normal;
    line-height:1em;
    top:auto;
    bottom:0;
    left:-1em;
    right:-1em;
    text-align:center;
}

#Menus .Menu .Items .Item:hover span.Under {
    text-shadow:0 0 1px black, 0 0 6px white;
}

#Menus .Menu .Items .Item:active span.Under {
    color:#d0ffd0;
}

#Menus .Menu .Items .Item.Disabled span.Under {
    text-shadow:none;
    color:rgba(255,255,255,.7);
}

#Menus .Menu .Items .Item span.Under .Sub {
    display:inline-block;
    vertical-align:bottom;
    margin-left:.3em;
    font-size:.8em;
    line-height:1.6;
    padding-left:.2em;
    padding-right:.2em;
    color:black;
    background-color:rgba(255,255,255,.9);
    border-radius:50%;
    text-shadow:none;
}

@media screen and (max-width:800px) { #Menus .Menu .Items .Item span.Under { font-size: 1.3em; }}
@media screen and (max-width:640px) { #Menus .Menu .Items .Item span.Under { font-size: 1.4em; }}


#Menus .Menu .Items .Icon.Clear .Icon{ background-color:#c00000; }
#Menus .Menu .Items .Icon.Cancel .Icon{ background-color:#c00000; }

#Menus .Menu .Items .Icon.Stand .Icon { background-color:#c00000; }
#Menus .Menu .Items .Icon.Stand .Icon svg { left:14%; }

#Menus .Menu .Items .Icon.Double .Icon { background-color:#008080;}
#Menus .Menu .Items .Icon.Double .Icon svg { left:18%; }

#Menus .Menu .Items .Icon.Hit .Icon { background-color:green; }
#Menus .Menu .Items .Icon.Hit .Icon svg { left:16%; }

#Menus .Menu .Items .Icon.Yes .Icon { background-color:green; }
#Menus .Menu .Items .Icon.No .Icon { background-color:#c00000; }

#Menus .Menu .Items .Icon.Rebet .Icon { background-color:#800080; }

#Menus .Menu .Items .Icon.Replace .Icon { background-color:#e08000; }
#Menus .Menu .Items .Icon.AllIn .Icon { background-color:#2D3816; }

#Menus .Menu .Items .Icon.Split .Icon { background-color:#800080; }

#Menus .Menu .Items .Icon.Min .Icon { background-color:#303080; }
#Menus .Menu .Items .Icon.Min .Icon svg { width:50%; left:22%; top:22%; }

#Menus .Menu .Items .Icon.Max .Icon { background-color:#706030; }

#Menus .Menu .Items .Icon.Fold .Icon { background-color:#c00000; }
#Menus .Menu .Items .Icon.Check .Icon { background-color:#e08000; }
#Menus .Menu .Items .Icon.Call .Icon { background-color:#303080; }
#Menus .Menu .Items .Icon.Raise .Icon { background-color:green; }

#Menus .Menu .Items .Icon.Surrender .Icon { background-color:#303080; }
#Menus .Menu.Action .Items .Icon.Surrender { margin-left:2em; }

#Menus .Menu .Items .Icon.HalfPot .Icon { background-color:#a0a000; }
#Menus .Menu .Items .Icon.FullPot .Icon { background-color:#800080; }

#Menus .Menu .Items .Icon.CheckFold .Icon { background-color:#c00000; }
#Menus .Menu .Items .Icon.CallCheck .Icon { background-color:#e08000; }
#Menus .Menu .Items .Icon.CallCheck .Icon svg { left:16%; }


#Menus .Menu .Items .Icon.CallAny .Icon { background-color:green; }


#Menus .Menu .Items .Icon.Fullscreen .Icon svg { width:90%; height:90%; left:4%; top:4%; }

#Menus .Menu .Items .Icon.Network .Icon svg { fill:#800000; }


#Menus .Menu .Items .Icon.Done {
    margin-right:2em;
}

#Menus .Menu .Items .Icon.Done .Icon {
    background-color: green;
    border: 1px solid black;
    -webkit-animation: w-pulsate 2s 2s linear infinite alternate, w-grow 0.5s 6s linear infinite alternate;
    -moz-animation: m-pulsate 2s 2s linear infinite alternate, m-grow 0.5s 6s linear infinite alternate;
    animation: pulsate 2s 2s linear infinite alternate, grow 0.5s 6s linear infinite alternate;
}


@-webkit-keyframes w-pulsate {
    0% { border-color:black}
    25% { border-color: white; }
    50% { border-color: black;}
    75% { border-color: white; }
    100% { border-color: black; }
}

@-moz-keyframes m-pulsate {
    0% { border-color:black}
    25% { border-color: white; }
    50% { border-color: black;}
    75% { border-color: white; }
    100% { border-color: black; }
}

@keyframes pulsate {
    0% { border-color:black}
    25% { border-color: white; }
    50% { border-color: black;}
    75% { border-color: white; }
    100% { border-color: black; }
}


@-webkit-keyframes w-grow {
    0% { transform:scale(1);}
    50% { transform:scale(1.1); }
    100% { transform:scale(1); }
}

@-moz-keyframes m-grow {
    0% { transform:scale(1);}
    50% { transform:scale(1.1); }
    100% { transform:scale(1); }
}

@keyframes grow {
    0% { transform:scale(1);}
    50% { transform:scale(1.1); }
    100% { transform:scale(1); }
}


#Menus .Menu .Items .Icon.Done.Disabled .Icon {
    animation:none;
}


#Menus .Menu .Sidebets {
    display:block;
    font-size:1.4em;
}

@media screen  and (max-width:800px) { #Menus .Menu .Sidebets { font-size:1.6em; }}
@media screen  and (max-width:640px) { #Menus .Menu .Sidebets { font-size:1.8em; }}


#Menus .Menu .Sidebets.Full {
    margin-top:.2em;
    margin-bottom:.1em;
}

#Menus .Menu.Disabled .Sidebets.Full {
    opacity:.5;
}


#Menus .Menu .Sidebets.Center {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#Menus .Menu .Sidebets span.Button {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:auto;
    height:1.6em;
    line-height:1.6em;
    min-width:5em;
    cursor:pointer;
    padding:0 .6em 0 .6em;
    background-color:rgba(255,255,255,.5);
    border:1px solid rgba(0,0,0,.3);
    margin-right:.5em;
    margin-bottom:1.1em;
    border-radius:.2em;
    color:rgba(0,0,0,.9);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    transition:all .1s;
}

#Menus .Menu .Sidebets span.Button .Text {
    display:inline-block;
    line-height:1em;
}


#Menus .Menu .Sidebets span.Button:hover {
    background-color:rgba(255,255,255,.5);
    box-shadow:0 0 2px rgba(0,0,0,.8);
}

#Menus .Menu .Sidebets span.Button:active {
    background-color:rgba(0,0,0,.2);
    color:white;
    box-shadow:-1px -1px 2px rgba(0,0,0,.5), 1px 1px 1px rgba(255,255,255,.7);
}

#Menus .Menu .Sidebets span.Button.Selected {
    background-color:#008000;
    box-shadow:-1px -1px 1px rgba(0,0,0,.6), 1px 1px 1px rgba(255,255,255,.7);
    color:white;
}

#Menus .Menu .Sidebets span.Under {
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:auto;
    top:100%;
    font-size:.8em;
    line-height:1.2em;
    color:#80ff80;
    background-color:rgba(0,0,0,.5);
}

#Menus .Menu .Sidebets span.Under.Low { color:#ff8080;}
#Menus .Menu .Sidebets span.Under.High { color:#ff8080;}

#Menus .Menu.Info {
    background-color:transparent;
    background-image:none;
    border:none;
    right:auto;
    min-height:0;
    box-shadow:none;
}

#Menus .Menu.Chat {
    background-color:transparent;
    background-image:none;
    border:none;
    right:0;
    left:auto;
    min-height:0;
    box-shadow:none;
}

#Menus .Menu.Chat input {
    display:inline-block;
    border:none;
    background-color:rgba(255,255,255,.5);
    outline:none;
    font-size:2.5em;
    line-height:1em;
    vertical-align:bottom;
    padding:.617em .5em .617em 1em;
    border-radius:2.4em;
    width:7em;
    transition: width .3s ease-in;
}

#Menus .Menu.Chat input::-webkit-input-placeholder {
    color:black;
}

#Menus .Menu.Chat input:focus {
    width:10em;
    width:30vw;
    background-color:rgba(255,255,255,.8);
}

#Menus .Menu.Chat input:focus::-webkit-input-placeholder {
    color:rgba(0,0,0,.2);
}


#Menus .Menu.Chat .Items {
    display:inline-block;
    vertical-align:bottom;
}


#Menus .Menu.Info:before, #Menus .Menu.Chat:before {
    content: '';
    background-image: none;
}

#Menus .Menu.Info, #Menus .Menu.Chat {
    font-size:6px;
}

@media screen  and (min-width:800px) { 
    #Menus .Menu .Items { font-size:1.2em; }
    #Menus .Menu .Items .Item { margin-right:.6em; }
}
@media screen  and (min-width:1000px) {
    #Menus .Menu .Items { font-size:1em; }
    #Menus .Menu .Items .Item { margin-right:.8em; }
}
@media screen  and (min-width:1250px) {
    #Menus .Menu .Items { font-size:.9em; }
    #Menus .Menu .Items .Item { margin-right:1em; }
}

@media screen { #Menus .Menu.Info .Items, #Menus .Menu.Chat .Items { font-size:5.7px; }}
@media screen  and (min-width:800px) { #Menus .Menu.Info .Items, #Menus .Menu.Chat .Items { font-size:7px; }}
@media screen  and (min-width:1000px) { #Menus .Menu.Info .Items, #Menus .Menu.Chat .Items { font-size:8px; }}


#Menus .Menu.Info .Item, #Menus .Menu.Chat .Item {
    padding:0;
    height:6em;
}

#Menus .Menu.Info .Item .Icon, #Menus .Menu.Chat .Item .Icon {
    box-shadow:none;
    background-color:rgba(255,255,255,.4);
    fill:rgba(0,0,0,.6);
}

#Menus .Menu.Info .Item .Icon:hover, #Menus .Menu.Chat .Item .Icon:hover {
    background-color:rgba(255,255,255,.7);
    fill:rgba(0,0,0,.8);
}


#Menus .Menu.Info .Items .Item span.Under, #Menus .Menu.Chat .Items .Item span.Under {
    display:none;
}

#Menus .Menu.Emoticons .Categories {
    display:inline-block;
    padding:.1em;
    margin-bottom:.5em;
    min-height:4em;
    background-color:rgba(0,0,0,.4);
}

#Menus .Menu.Emoticons .Icons {
    display:block;
    min-height:8em;
}


#Menus .Menu.Emoticons .Emoticon {
    display:inline-block;
    width:4em;
    min-width:32px;
    height:4em;
    min-height:32px;
    cursor:pointer;
    background-color:transparent;
}

#Menus .Menu.Emoticons .Emoticon.Selected {
    background-color:rgba(255,255,255,.8);
}


#Menus .Menu.Emoticons svg {
    position:relative;
    width:90%;
    left:5%;
    top:5%;
    height:90%;
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    pointer-events:none;
}

#Menus .Menu.Emoticons .Emoticon:hover svg {
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
}

#Menus .Menu.Emoticons .Emoticon:active svg {
    -webkit-filter: none;
    filter: none;
}

#Menus .Menu.Emoticons .Categories svg {
    fill:rgba(255,255,255,0.4);
    pointer-events:none;
}

#Menus .Menu.Emoticons .Categories .Emoticon:hover svg {
    fill:rgba(255,255,255,1);
}

#Menus .Menu.Emoticons .Categories .Emoticon:active svg, #Menus .Menu.Emoticons .Categories .Emoticon.Selected svg {
    fill:black;
}



#Menus .Menu.Phrases .Body span {
    display: inline-block;
    font-size:16px;
    cursor: pointer;
    padding: .5em .5em .5em .5em;
    margin-right: .5em;
    margin-bottom: .3em;
    border: 1px solid rgba(0,0,0,.2);
    color:rgba(0,0,0,.8);
    border-radius: .6em;
    background-color:rgba(255,255,255,.7);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

#Menus .Menu.Phrases .Body span:hover {
    color:rgba(0,0,0,1);
    background-color:rgba(255,255,255,.8);
    box-shadow: 1px 1px 1px rgba(0,0,0,.6);
}

#Menus .Menu.Phrases .Body span:active {
    border: 1px solid rgba(0,0,0,.5);
    background-color:rgba(255,255,255,1);
    box-shadow: 0 0 10px rgba(255,255,255,1);
}

@media screen  and (max-width:1000px) { #Menus .Menu.Phrases .Body span { font-size:13px; }}
@media screen  and (max-width:640px) { #Menus .Menu.Phrases .Body span { font-size:11px; }}


#Menus .Menu.Dev { height: 60%; }
#Menus .Menu.Help {height:60%;}
#Menus .Menu.History { height: 60%; }
#Menus .Menu.SitOut { min-height:0; }
#Menus .Menu.Notes { height: 60%; }

.Message {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: .3em .7em .3em .7em;
    width: auto;
    min-width: 5em;
    max-width: 10em;
    text-align: center;
    height: auto;
    background-color: #FEE16C;
    font-size: 10px;
    font-family: sans-serif;
    color: white;
    background-image: linear-gradient(to bottom, #60ff60 0%, #00d000 100%);
    border: .5em solid rgba(255,255,255,.5);
    background-clip: padding-box;
    background-origin: padding-box;
    border-radius: .5em;
    transform-style: preserve-3d;
    perspective: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    z-index:101;
}

@media screen  and (min-width:800px) { .Message { font-size:12px; }}
@media screen  and (min-width:1000px) { .Message { font-size:16px; }}


.Message.Chat {
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
}

.Message.Text {
    color:white;
    font-size:12px;
    font-weight:bold;
    text-shadow:0 0 3px black;
    background-image:none;
    background-color:transparent;
    border:none;
    padding:0;
}

@media screen  and (min-width:800px) { .Message.Message.Text { font-size:16px; }}
@media screen  and (min-width:1000px) { .Message.Message.Text { font-size:20px; }}


.Message.Svg {
    background-image:none;
    background-color:transparent;
    border:none;
    padding:0;
    width:40px;
    height:40px;
    min-width:0;
    max-width:none;
    z-index:102;
}

@media screen  and (min-width:800px) { .Message.Message.Svg { width:55px; height:55px; }}
@media screen  and (min-width:1000px) { .Message.Message.Svg { width:70px; height:70px; }}

.Message svg {
    width:3em;
    height:3em;
    display:block;
    margin-right:auto;
    margin-left:auto;
}

.Message.Svg svg {
    width:100%;
    height:100%;
}

.Message.Svg div {
    color:white;
    width:200%;
    margin-left:-50%;
    text-align:center;
    font-size:12px;
    font-weight:bold;
    text-shadow:0 0 3px black;
    background-image:none;
    background-color:transparent;
    border:none;
    padding:0;
}


.Message.Winner {
    color:#FAEF95;
    background-image:linear-gradient(to bottom, #00c000 0%,  #008000 100%);
    border:1px solid white;
    padding:.5em .5em .5em .5em;
    width:auto;
    min-width:3em;
    max-width:10em;
    border-radius:.2em;
}


.Message.Info {
    color:black;
    background-image:linear-gradient(45deg, #FAEF95 0%,  #F8DC4A 100%);
    border:none;
    padding:1em 1em 1em 1em;
    width:auto;
    min-width:3em;
    max-width:10em;
    border-radius:0;
    border-radius:.2em;
    border-top-right-radius:1.2em;
}

.Message.Info:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  height:0;
  width:0;
  border-width: 0 .8em .8em 0;
  border-style: solid;
  border-color: rgba(0,0,0,.2) transparent;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.Message.System {
    color:white;
    background-image:linear-gradient(to bottom, #60ff60 0%,  #00a000 100%);
    border:.5em solid rgba(255,255,255,.5);
}


.Message.Error {
    color:white;
    background-color:#e04040;
    background-image:linear-gradient(to bottom, #ff6060 0%,  #d00000 100%);
}

.Message.Warning {
    color:black;
    background-color:#FEE16C;
    background-image:linear-gradient(to bottom, #E9C70A 0%,  #C69F2A 100%);
}

.Message.Chat {
    color:white;
    background-color:rgb(7, 86, 152);
    background-image:linear-gradient(rgb(46, 136, 196), rgb(7, 86, 152));
    border:none;
    border-radius:.5em;
    padding:1em;
    z-index:103;
}
.Message.Chat:after {
    content: "";
    position: absolute;
    bottom: -1em;
    left: 1em;
    border-width: 1em 0 0 1em;
    border-style: solid;
    border-color: #075698 transparent;
    display: block;
    width: 0;
    height:0;
}

#DevText {
    display:inline-block;
    position:absolute;
    background-color:#808080;
    background-color:rgba(0,0,0,.5);
    color:yellow;
    padding:.3em;
    font-size:1em;
    font-family:sans-serif;
}


#Menus .Status {
    display:block;
    position:absolute;
    left:auto;
    right:8px;
    top:7px;
    bottom:auto;
    z-index:200;
    text-align:right;
}

#Menus .Status .TableCountdown {
    display:inline-block;
    background-color:#808080;
    background-color:rgba(0,0,0,.4);
    color:rgba(255,255,255,.8);
    border:1px solid rgba(255,255,255,.8);
    padding-left:.6em;
    padding-right:.6em;
    font-size:17px;
    margin-bottom:.3em;
    line-height:1.3em;
    font-family:sans-serif;
    border-radius:.2em;
    box-shadow:0 0 2px black;
}

#Menus .Status .TableCountdown.Warning {
    background-color:black;
    color:yellow;
    border-color:yellow;
}

#Menus .Status .TableCountdown.Critical {
    background-color:#c00000;
    color:white;
    border-color:white;
}

#Menus .Status .TableCountdown.Over {
    background-color:#ffffff;
    color:black;
    border-color:black;
}

#Menus .Status .StatusMsg {
    display:inline-block;
    color:rgba(255,255,255,.7);
    font-size:13px;
    line-height:1.1em;
    font-family:sans-serif;
    text-shadow:0 0 2px black;
}

#Menus .Status .StatusMsg.Changed {
    display:inline-block;
    color:rgba(255,255,255,1);
    text-shadow:0 0 5px #ff0000;
    transition: color 1s, text-shadow 1s;
}

iframe.devFrame {
    border:none;
    width:100%;
    height:100%;
    overflow:auto;
}

ul.HistoryList {
    font-size:15px;
    padding:0;
    margin:0;
    padding-bottom:4em;
}

ul.HistoryList li {
    list-style-type:none;
    margin:0;
    line-height:1.5;
}

ul.HistoryList li span {
    display:inline-block;
    vertical-align:bottom;
}

ul.HistoryList li div {
    display:inline-block;
    vertical-align:bottom;
}


ul.HistoryList li.Svg span {
    vertical-align:middle;
}


ul.HistoryList li.Svg div {
    width:2em;
    height:2em;
    margin-left:.5em;
    vertical-align:middle;
}

ul.HistoryList li.Svg div svg {
    width:100%;
    height:100%;
}


ul.HistoryList li.Chat div {
    display:inline-block;
    position:relative;
    margin-left:1.5em;
    color:white;
    background-color:rgb(7, 86, 152);
    background-image:linear-gradient(rgb(46, 136, 196), rgb(7, 86, 152));
    border:none;
    border-radius:.5em;
    padding:1em;
}

ul.HistoryList li.Chat div:after {
    content: "";
    position: absolute;
    bottom: .5em;
    left: -1em;
    border-width: 0 0 1em 1em;
    border-style: solid;
    border-color: #1163A4 transparent;
    display: block;
    width: 0;
}

ul.HistoryList li.Chat div svg {
    width:3em;
    height:3em;
}

ul.HistoryList li.Info  { display:none; }
ul.HistoryList li.Info  { display:none; }

#Menus .Menu.GameEnded h2 {
    font-size:5vw;
    line-height:1;
}

#Menus .Menu.GameEnded .Notice {
    background-color:rgba(0,0,0,.7);
    color:#ffff80;
    font-size:16px;
    padding:1em;
    margin-right:2em;
    margin-left:2em;
    text-align:center;
    border-radius:.4em;
}

#Menus .Menu.GameEnded .Notice a {
    color:#ffff80;
    font-weight:bold;
    text-decoration:underline;
}

.Menu.GameEnded .Rank {
    padding:0;
    margin:0;
    font-size:1.8vw;
    margin:.2em auto .2em auto;
    border-top:.1em solid white;
    padding-top:.3em;
}

.Menu.GameEnded .Rank tr.Winner {
    color:#ffff00;
    font-weight:bold;
}

.Menu.GameEnded .Rank td {
    padding-right:.5em;
}

#Menus .Announce {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    text-align:center;
    padding-top:20%;
}



#Menus .Announce span {
    color:#FFFF50;
    font-family:sans-serif;
    font-size:10vw;
    text-shadow:1px 1px 3px rgba(0,0,0,.6);
}

.AvatarCategories {
    display:inline-block;
    margin:0;
    padding:0;
    padding:.5em;
    margin-bottom:.4em;
    background-color:rgba(0,0,0,.4);
}

.AvatarCategories li {
    display:inline-block;
    margin:0;
    font-size:1.2em;
    font-weight:bold;
    padding:.5em 1em .5em 1em;
    background-color:transparent;
    cursor:pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.AvatarCategories li.Selected {
    background-color:white;
    color:black;
}



.AvatarList {
    display:none;
    background-color:rgba(255,255,255,.5);
    overflow-x:auto;
    overflow-y:hidden;
    white-space : nowrap;
}

.AvatarList.Selected {
    display:block;
}

.AvatarList img {
    display:inline-block;
    vertical-align:top;
    text-align:left;
    width:10em;
    height:10em;
    cursor:pointer;
    border:3px solid black;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.AvatarList img:hover { border-color:rgba(255,165,0, .5) }
.AvatarList img:active { border-color:orange; }
.AvatarList img.Selected { border-color:orange; }

#Menus .Notes .Body {
    font-size:1em;
}

#Menus .Notes .SidePanel {
    display:block;
    color:white;
    font-size:1em;
    position:absolute;
    width:auto;
    top:1em;
    left:0;
    width:14em;
    bottom:3em;
    padding:.5em;
    box-sizing: border-box;         /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box;    /* For Firefox                          */
    -webkit-box-sizing: border-box; /* For Safari                           */
}

#Menus .Notes .SidePanel h3 {
    font-size:1.6em;
    margin-top:0;
}

#Menus .Notes .SidePanel .Image {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:6em;
    height:6em;
    background-size:100% 100%;
    background-repeat:no-repeat;
}

#Menus .Notes .SidePanel .Mute {
    display:block;
    margin-left:auto;
    margin-right:auto;
    font-size:1.5em;
    width:6em;
    line-height:1.5;
    margin-top:.5em;
    color:black;
    background-color:rgba(255,255,255,.7);
    border:1px solid black;
    text-align:center;
    box-shadow:inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.5);
    cursor:pointer;
    margin-top:1em;
}

#Menus .Notes .SidePanel .Mute:active {
    background-color:rgba(255,255,255,.8);
    box-shadow:inset -1px -1px 1px rgba(255,255,255,.5), inset 1px 1px 1px rgba(0,0,0,.5);
}

#Menus .Notes .SidePanel .Mute.Enabled {
    background-color:rgba(255,255,255,.9);
    box-shadow:inset -1px -1px 1px rgba(255,255,255,.5), inset 1px 1px 1px rgba(0,0,0,.5);
}



#Menus .Notes .SidePanel .Colors {
    display:block;
    position:relative;
    width:100%;
    margin-top:1em;
}

#Menus .Notes .SidePanel .Colors span {
    display:inline-block;
    margin:0;
    padding:0;
    background-color:transparent;
    width:32%;
    margin-right:1%;
    height:3em;
    line-height:3;
    box-sizing: border-box;         /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box;    /* For Firefox                          */
    -webkit-box-sizing: border-box; /* For Safari                           */
    text-align:center;
    cursor:pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#Menus .Notes .SidePanel .Colors span:hover {
    box-shadow:inset .1em .1em .1em rgba(0,0,0,.7), inset -.1em -.1em .1em rgba(255,255,255,.7);
}

#Menus .Notes .SidePanel .Colors span:active {
    box-shadow:inset .2em .2em .2em rgba(0,0,0,.7), inset -.2em -.2em .2em rgba(255,255,255,.7);
}


#Menus .Notes .SidePanel .Colors span.Enabled {
    box-shadow:inset .2em .2em .2em rgba(0,0,0,.5), inset -.2em -.2em .2em rgba(255,255,255,.5);
}


#Menus .Notes .SidePanel .Colors span.none {
    background-color:rgba(255,255,255,.3);
    width:98%;
    margin-bottom:1%;
}

#Menus .Notes .SidePanel .Colors span.purple { background-color:#9900CC; }
#Menus .Notes .SidePanel .Colors span.blue { background-color:#0000FF; }
#Menus .Notes .SidePanel .Colors span.green { background-color:#33CC33; }
#Menus .Notes .SidePanel .Colors span.yellow { background-color:#FFFF00; }
#Menus .Notes .SidePanel .Colors span.orange { background-color:#FF9900; }
#Menus .Notes .SidePanel .Colors span.red { background-color:#FF0000; }

#Menus .Notes .Tabs {
    display:block;
    position:absolute;
    width:auto;
    top:.5em;
    bottom:3em;
    left:15em;
    right:2.5em;
}

#Menus .Notes .Tabs div {
    display:inline-block;
    font-size:2em;
    line-height:1.5;
    padding-left:.5em;
    padding-right:.5em;
    margin-right:1em;
    cursor:pointer;
    color:white;
    border:1px solid rgba(255,255,255,.4);
    background-color:rgba(0,0,0,.6);
}


#Menus .Notes .Tabs div:hover {
    color:black;
    background-color:rgba(255,255,255,.6);
}

#Menus .Notes .Tabs div.Selected {
    background-color:rgba(255,255,255,.9);
    color:black;
}

#Menus .Notes .TabContent {
    display:none;
    position:absolute;
    width:auto;
    top:4em;
    left:15em;
    right:2.5em;
    bottom:2em;
    padding:.5em;
    box-sizing: border-box;         /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box;    /* For Firefox                          */
    -webkit-box-sizing: border-box; /* For Safari                           */
}

#Menus .Notes .TabContent.Selected {
    display:block;
}

#Menus .Notes .TextArea textarea {
    display:block;
    color:black;
    font-size:1.5em;
    background-color:rgba(255,255,255,.85);
    position:absolute;
    resize: none;
    width:auto;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:.5em;
    box-sizing: border-box;         /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box;    /* For Firefox                          */
    -webkit-box-sizing: border-box; /* For Safari                           */
}

#Menus .Notes span.NotePlayer {
    font-size:1.5em;
    margin-right:.5em;
}

#Menus .Notes select {
    font-size:1.5em;
    margin-right:.5em;
}

#Menus .Notes .Report textarea {
    display:block;
    color:black;
    font-size:1.5em;
    background-color:rgba(255,255,255,.85);
    position:relative;
    resize: none;
    width:auto;
    top:0;
    left:0;
    width:100%;
    height:5em;
    padding:.5em;
    box-sizing: border-box;         /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box;    /* For Firefox                          */
    -webkit-box-sizing: border-box; /* For Safari                           */
}

#Menus .Notes .Report select {
    font-size:1.5em;
    margin-right:.5em;
}

#Menus .Notes .Report label {
    font-size:2em;
    margin-right:1em;
}


#Menus .Notes .Report .ReportBtn {
    display:inline-block;
    font-size:1.5em;
    padding-left:1em;
    padding-right:1em;
    width:auto;
    line-height:1.5;
    margin-top:.5em;
    color:black;
    background-color:rgba(255,255,255,.7);
    border:1px solid black;
    text-align:center;
    box-shadow:inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.5);
    cursor:pointer;
    margin-top:1em;
}

#Menus .Notes .Report .ReportBtn:active {
    background-color:rgba(255,255,255,.8);
    box-shadow:inset -1px -1px 1px rgba(255,255,255,.5), inset 1px 1px 1px rgba(0,0,0,.5);
}

#Menus .Notes .Report .ReportBtn.Enabled {
    background-color:rgba(255,255,255,.9);
    box-shadow:inset -1px -1px 1px rgba(255,255,255,.5), inset 1px 1px 1px rgba(0,0,0,.5);
}