* {
  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  -webkit-user-select: none;
  /* prevent copy paste, to allow, change 'none' to 'text' */ }

input.form-control, textarea.form-control {
  -webkit-user-select: text; }

html, body {
  overscroll-behavior: contain;
  /* Stops rubber band effect */
  -webkit-overflow-scrolling: touch;
  /* Keeps smooth iOS scrolling */ }

#main {
  overscroll-behavior: contain;
  /* Prevents bounce on #main */ }

html, body {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  width: 100vw;
  height: 100vh; }

body {
  background: #000;
  transition: none !important; }

body.lite .hide-in-lite {
  display: none; }

.color-zone1 {
  color: #98d672; }

.color-zone2 {
  color: #79b853; }

.color-zone3 {
  color: #367a2b; }

.color-zone4 {
  color: #e59312; }

.color-zone5 {
  color: #b20000; }

.color-mode1 {
  color: #79b853; }

.color-mode2 {
  color: #367a2b; }

.color-mode3 {
  color: #eeb12d; }

.color-mode4 {
  color: #b00000; }

.color-mode5 {
  color: #ff4f4f; }

#background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url(img/background.png);
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: cover;
  background-attachment: fixed;
  top: 0;
  z-index: 0; }

body[data-id="match"] #background, body[data-id="report-shotlocation"] #background {
  background: #000; }

#vignette {
  position: absolute;
  position: fixed;
  width: 100%;
  height: 100%;
  background: -webkit-radial-gradient(center bottom, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 2; }

#main {
  position: relative;
  z-index: 1;
  overflow-x: hidden; }

#app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
  background: none;
  z-index: 1;
  top: 0; }

#homelogo {
  padding: 60px 0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 400px; }
  #homelogo img {
    max-width: 100%; }

#letsgo {
  color: #fff;
  font-size: 3em;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%; }
  #letsgo img {
    width: 200px; }

.match-mode #app {
  opacity: 0;
  display: block; }

.btn {
  transition: none !important;
  box-shadow: none !important; }

/* Form */
.btn-outline-secondary {
  color: #999;
  border-color: #999; }

#courtcontainer {
  position: absolute;
  overflow: hidden;
  /*width:768px;*/
  width: 100%;
  height: 1024px;
  /* Web App Override. This may be fine for all devices */
  width: 100%;
  bottom: 60px;
  /*background-color: #000;*/
  background-color: #b20000; }

body[data-id="report-shotlocation"] #courtcontainer {
  overflow: visible;
  top: 80px;
  height: 1988px;
  transform: scale(1); }

#hitarea {
  position: absolute;
  position: fixed;
  width: 100%;
  height: 2048px;
  /* Added 42 to match footer */
  height: 1928px;
  left: 0;
  top: 0;
  background: -webkit-linear-gradient(top, #37b34a 0%, #009345 50%); }
  #hitarea div {
    box-sizing: content-box; }

#hitarea:before, #hitarea:after {
  position: absolute;
  content: '';
  background-color: #009345;
  height: 500px;
  width: 100%;
  bottom: 100%;
  z-index: -1;
  pointer-events: none; }

#hitarea:after {
  bottom: auto;
  top: 100%; }

body[data-id="report-shotlocation"] #hitarea:before, body[data-id="report-shotlocation"] #hitarea:after {
  content: none; }

#hitarea.activesidea {
  top: auto;
  bottom: -904px; }

.deg180 #hitarea.activesidea {
  bottom: -964px; }

#hitarea.activesideb {
  top: -964px; }

.deg180 #hitarea.activesideb {
  top: -904px; }

#court {
  width: 564px;
  height: 1220px;
  padding: 0;
  border: solid 4px #fff;
  position: relative;
  margin: 0 auto;
  top: 100%;
  margin-top: -672px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%); }

.side {
  height: 610px;
  position: relative; }

#sidea {
  background: -webkit-linear-gradient(top, #0009a6 0%, #005499 100%); }

.alley {
  position: absolute;
  width: 76px;
  top: -4px;
  left: -4px;
  right: 0;
  bottom: 0; }

.alley.ad {
  left: auto;
  right: -4px; }

.singles {
  position: absolute;
  left: 68px;
  width: 420px;
  height: 610px;
  width: 428px;
  height: 614px;
  top: -4px;
  border-top: solid 4px #fff; }

.backcourt {
  position: absolute;
  width: 420px;
  height: 279px;
  left: 0;
  border: solid 4px #fff;
  border-top: none;
  border-bottom-width: 2px; }

.forecourt {
  position: absolute;
  width: 420px;
  height: 327px;
  top: 281px;
  left: 0;
  border: solid 4px #fff;
  border-top-width: 2px;
  border-bottom: none; }

#sideb .alley {
  top: 0;
  bottom: -4px; }

#sideb .alley.deuce {
  left: auto;
  right: -4px; }

#sideb .alley.ad {
  right: auto;
  left: -4px; }

#sideb .backcourt {
  border: solid 4px #fff;
  border-bottom: none;
  border-top-width: 2px;
  top: 329px;
  /*top:939px;*/ }

#sideb .forecourt {
  border: solid 4px #fff;
  border-bottom-width: 2px;
  border-top: none;
  top: 0;
  /*top:610px;*/ }

.baseline {
  width: 208px;
  height: 16px;
  float: left;
  border-right: solid 4px #fff; }

#sideb .baseline {
  position: absolute;
  bottom: 0; }

.deucecourt {
  position: absolute;
  top: -4px;
  left: -4px;
  bottom: 0;
  right: 50%;
  margin-right: -2px;
  z-index: 2; }

.deucecourt:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  background: #fff; }

.adcourt {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  z-index: 2; }

.servingdeucecourt .deucecourt.active, .servingadcourt .adcourt.active {
  background: rgba(255, 255, 255, 0.3); }

#sideb .deucecourt {
  top: 0;
  bottom: -4px; }

#sideb .adcourt {
  top: 0;
  bottom: -4px; }

#net {
  position: absolute;
  height: 40px;
  width: 658px;
  overflow: hidden;
  bottom: 0;
  left: -47px;
  z-index: 2;
  margin: -40px 0 0 0;
  background: url(img/net.png) no-repeat 0 0;
  background-size: 658px 40px; }

#zones {
  position: absolute;
  width: 100%;
  top: 964px;
  opacity: 1;
  top: 100%;
  margin-top: -58px;
  top: 50%;
  margin-top: 0;
  height: 964px;
  visibility: hidden; }

#ismatch #zones {
  visibility: visible !important; }

#zones.active {
  visibility: visible; }

#zones div {
  position: relative;
  left: 0;
  right: 0; }

#zones .pct {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
  font-size: 16px;
  left: 20px;
  top: 50%;
  transform: translateY(100%); }

#zone1 {
  height: 215px;
  background: #98d672;
  top: 0; }

#zone2 {
  height: 287px;
  background: #79b853; }

#zone3 {
  height: 116px;
  background: #367a2b; }

#zone4 {
  height: 112px;
  background: #e59312; }

#zone5 {
  height: 234px;
  background: #b20000; }

#zone1:after, #zone2:after, #zone3:after, #zone4:after, #zone5:after {
  position: absolute;
  content: '1';
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
  font-size: 48px;
  left: 20px;
  top: 50%;
  transform: translateY(-50%); }

#zone2:after {
  content: '2';
  color: rgba(255, 255, 255, 0.5); }

#zone3:after {
  content: '3';
  color: rgba(255, 255, 255, 0.4); }

#zone4:after {
  content: '4';
  color: rgba(255, 255, 255, 0.4); }

#zone5:after {
  content: '5';
  color: rgba(255, 255, 255, 0.4); }

#court-logo, #court-logo-top {
  opacity: 0.25;
  position: absolute !important;
  top: 114.5%;
  height: 60px;
  left: 0;
  right: 0;
  background: url("../images/main-logo.svg") no-repeat;
  background-position: center;
  background-size: auto 60px; }

#court-logo-top {
  top: auto;
  bottom: 114.5%; }

#court-logo.haslogo, #court-logo-top.haslogo {
  background: none;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  top: 114.5%;
  height: auto;
  letter-spacing: 4px; }

#court-logo-top.haslogo {
  top: auto;
  bottom: 114.5%; }

.autotag #court-logo {
  height: 40px;
  background-size: auto 40px; }

.autotag #court-logo.haslogo {
  font-size: 28px;
  letter-spacing: 4px;
  height: auto; }

/* Overlays */
#overlays {
  position: fixed;
  bottom: 60px;
  right: 0;
  text-align: center;
  display: none;
  z-index: 3999;
  padding: 20px 0; }

#overlay-message {
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  bottom: 60px;
  width: 564px;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden; }

#overlay-message.pro, #overlay-message.elite, #overlay-message.normal, #overlay-message.on, #overlay-message.intent {
  visibility: visible; }

/* Serve Placement */
#placement-serve-deucecourt, #placement-serve-adcourt {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  display: flex; }
  #placement-serve-deucecourt .placement-serve-1, #placement-serve-deucecourt .placement-serve-2, #placement-serve-deucecourt .placement-serve-3, #placement-serve-deucecourt .placement-serve-4, #placement-serve-deucecourt .bg-fill, #placement-serve-adcourt .placement-serve-1, #placement-serve-adcourt .placement-serve-2, #placement-serve-adcourt .placement-serve-3, #placement-serve-adcourt .placement-serve-4, #placement-serve-adcourt .bg-fill {
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    top: 0;
    font-size: 13px;
    flex: 1; }
  #placement-serve-deucecourt .bg-fill, #placement-serve-adcourt .bg-fill {
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
    width: auto;
    left: 0;
    right: 1px;
    position: absolute; }
  #placement-serve-deucecourt .placement-serve-1::after, #placement-serve-adcourt .placement-serve-1::after {
    position: absolute;
    content: '';
    width: 1px;
    top: 4px;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); }
  #placement-serve-deucecourt .placement-serve-2, #placement-serve-adcourt .placement-serve-2 {
    z-index: 2; }
  #placement-serve-deucecourt .placement-serve-2::after, #placement-serve-adcourt .placement-serve-2::after {
    position: absolute;
    content: '';
    width: 1px;
    top: 4px;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7); }
  #placement-serve-deucecourt .placement-serve-3::after, #placement-serve-adcourt .placement-serve-3::after {
    position: absolute;
    content: '';
    width: 1px;
    top: 4px;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2; }
  #placement-serve-deucecourt .placement-label, #placement-serve-deucecourt .placement-legend, #placement-serve-adcourt .placement-label, #placement-serve-adcourt .placement-legend {
    color: #fff;
    width: 100%;
    text-align: center;
    bottom: 50px;
    position: absolute;
    font-size: 13px; }
  #placement-serve-deucecourt .placement-legend, #placement-serve-adcourt .placement-legend {
    width: 72px;
    left: -72px;
    text-align: left;
    padding-left: 10px; }
  #placement-serve-deucecourt .placement-legend-count, #placement-serve-deucecourt .placement-label-count, #placement-serve-adcourt .placement-legend-count, #placement-serve-adcourt .placement-label-count {
    bottom: 110px; }
  #placement-serve-deucecourt .placement-legend-pct, #placement-serve-deucecourt .placement-label-pct, #placement-serve-adcourt .placement-legend-pct, #placement-serve-adcourt .placement-label-pct {
    bottom: 80px; }
  #placement-serve-deucecourt .placement-legend-won, #placement-serve-deucecourt .placement-label-won, #placement-serve-adcourt .placement-legend-won, #placement-serve-adcourt .placement-label-won {
    bottom: 50px; }

/*#placement-serve-deucecourt.intent, #placement-serve-adcourt.intent{
    .placement-serve-l{
        left:-10px;
        width:82px;
        top:-20px;
    }
    .placement-serve-c{
        top:-20px;
    }
    .placement-serve-r{
        right:-20px;
        width:82px;
        top:-10px;
    }
}*/
#placement-serve-deucecourt.on, #placement-serve-deucecourt.on-8, #placement-serve-deucecourt.intent, #placement-serve-adcourt.on, #placement-serve-adcourt.on-8, #placement-serve-adcourt.intent {
  visibility: visible; }

#placement-serve-deucecourt.on .placement-serve-4, #placement-serve-adcourt.on .placement-serve-4 {
  display: none; }

/* Serve Overlays */
#overlay-serve-deucecourt, #overlay-serve-adcourt {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  background: rgba(255, 0, 0, 0.3);
  border: solid 4px #f00;
  visibility: hidden; }

#overlay-serve-deucecourt, #overlay-serve-adcourt {
  transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s; }

#overlay-serve-deucecourt.pro, #overlay-serve-adcourt.pro {
  left: 20%;
  right: 20%;
  top: 0;
  visibility: visible; }

#overlay-serve-deucecourt.elite, #overlay-serve-adcourt.elite {
  left: 25%;
  right: 25%;
  top: 0;
  visibility: visible; }

#overlay-serve-deucecourt.normal, #overlay-serve-adcourt.normal {
  left: 30%;
  right: 30%;
  top: 0;
  visibility: visible; }

/*#overlay-serve-message{
    top:-260px !important;
    left:20px !important;
    right:20px !important;
    bottom:auto;
    padding:20px 10px;
    background: rgba(0,0,0,0.3);
    border:solid 4px $success;
}*/
/* Runways */
#runways {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  visibility: hidden; }

#runways.active {
  visibility: visible; }

#runways div {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 102px;
  border-right: solid 2px rgba(255, 255, 255, 0.2);
  border-left: solid 2px rgba(255, 255, 255, 0.2); }

#runwaylc {
  left: 0;
  right: 50%;
  margin-right: 212px;
  border-left: none !important;
  width: inherit !important; }

#runwaylb {
  left: 50%;
  margin-left: -212px; }

#runwayla {
  left: 50%;
  margin-left: -106px; }

#runwayra {
  left: 50%; }

#runwayrb {
  left: 50%;
  margin-left: 106px; }

#runwayrc {
  left: 50%;
  right: 0;
  margin-left: 212px;
  border-right: none !important;
  width: inherit !important; }

#runways div:after {
  position: absolute;
  color: rgba(255, 255, 255, 0.4);
  font-size: 48px; }

#runwaylc:after, #runwaylb:after, #runwayla:after, #runwayra:after, #runwayrb:after, #runwayrc:after {
  right: 35px;
  bottom: 20px; }

#runwayrc:after {
  right: auto;
  left: 35px; }

#runwaylc:after, #runwayrc:after {
  content: 'C'; }

#runwaylb:after, #runwayrb:after {
  content: 'B'; }

#runwayla:after, #runwayra:after {
  content: 'A'; }

#runways .pct {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
  font-size: 16px;
  top: auto;
  bottom: 10px;
  border: none;
  text-align: center; }

#runwaylc .pct {
  right: -3px;
  left: auto; }

#runwayrc .pct {
  left: 5px; }

/* Diamond Overlay */
#diamondoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  visibility: hidden; }

#overlay-diamond-message {
  position: absolute;
  top: 20px !important;
  left: 20px !important;
  right: 20px !important;
  bottom: auto;
  padding: 20px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: solid 4px #8cc63f; }

#diamond-outer {
  position: absolute;
  width: 296px;
  height: 296px;
  transform: scaleY(1.46);
  top: 134px;
  left: 66px; }

#diamond-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s;
  overflow: visible; }
  #diamond-inner polygon {
    fill: rgba(255, 0, 0, 0.3);
    stroke: #f00;
    stroke-width: 1px; }

#diamondoverlay.pro, #diamondoverlay.elite, #diamondoverlay.normal {
  visibility: visible; }

#diamondoverlay.pro #diamond-inner {
  /*left:12%;
  right:12%;
  top:12%;
  bottom:12%;*/
  width: 100%;
  height: 100%; }

#diamondoverlay.elite #diamond-inner {
  /*left:18%;
  right:18%;
  top:18%;
  bottom:18%;*/
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%; }

#diamondoverlay.normal #diamond-inner {
  /*left:30%;
  right:30%;
  top:30%;
  bottom:30%;*/
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%; }

.returnposition, .serveposition {
  display: none;
  position: absolute;
  font-size: 18px;
  z-index: 2999;
  width: 40px;
  height: 40px;
  border-radius: 33px;
  box-sizing: border-box !important;
  line-height: 40px;
  background: -webkit-linear-gradient(top, #0009a6 0%, #005499 100%);
  border: solid 2px #fff;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  margin: auto;
  text-align: center; }

.serveposition {
  top: 0;
  display: block;
  line-height: inherit; }

#serveposition-container {
  width: 420px;
  height: 62px;
  left: 50%;
  top: 10px;
  margin: 0 0 0 -210px;
  display: none;
  position: absolute; }

#serveposition-box {
  position: absolute;
  width: 210px;
  height: 40px;
  z-index: 4001; }

#serveposition-line {
  height: 38px;
  width: 4px;
  background: #fff;
  left: 50%;
  margin: 0 0 0 -2px;
  position: absolute; }

.servingdeucecourt .returnposition {
  top: 103.5%;
  left: 77%; }

.servingdeucecourt #btn-flip-serve {
  position: absolute;
  top: 0;
  left: -32%; }

.servingadcourt .returnposition {
  left: 73px;
  top: 103.5%;
  left: 13%; }

.servingadcourt #btn-flip-serve {
  position: absolute;
  top: 0;
  left: 114%; }

#btn-flip-return {
  display: none; }

.returnposition.active {
  opacity: .5; }

/* Serve Positions */
.deg0.servingdeucecourt .serveposition {
  left: 10%; }

.deg0.servingdeucecourt #serveposition-box {
  left: 50%; }

.deg180.servingdeucecourt #btn-flip-serve {
  position: absolute;
  top: 0;
  left: 114%; }

.deg180.servingadcourt #btn-flip-serve {
  position: absolute;
  top: 0;
  left: -32%; }

.deg0.servingadcourt .serveposition {
  left: 66%; }

.deg0.servingadcourt #serveposition-box {
  right: 50%; }

.deg180.servingdeucecourt .serveposition {
  left: 66%; }

.deg180.servingdeucecourt #serveposition-box {
  left: 0; }

.deg180.servingadcourt .serveposition {
  left: 10%; }

.deg180.servingadcourt #serveposition-box {
  left: 50%; }

.returnposition a, .serveposition a {
  color: #fff;
  text-decoration: none; }

/* Import Matches */
.match .btn-import.active {
  background-color: #8cc63f !important;
  color: #000 !important;
  text-shadow: none !important; }

/* Match Footer */
#matchfooter {
  position: fixed;
  height: 60px;
  width: 100%;
  bottom: 0;
  z-index: 10; }

#matchfooter .btn.disabled, #shotwizard-footer .btn.disabled {
  opacity: .4; }

#matchinfo {
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0; }

#btn-won {
  display: none; }

#btn-lost {
  display: none; }

#btn-unreturnable {
  display: none; }

#btn-footfault {
  display: none; }

.dot-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100; }

.dot {
  position: absolute !important;
  width: 40px;
  height: 40px;
  overflow: visible;
  border-radius: 28px;
  line-height: 40px;
  background: -webkit-linear-gradient(top, #37b34a 0%, #009345 100%);
  border: solid 2px #fff;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  z-index: 3000;
  opacity: 1;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  transform: translate(-50%, -50%); }

.dot.report {
  opacity: 1; }

.dot.transparent {
  opacity: .5; }

.showvideo.allplay .dot:not(.invisible):not(.no-video)[data-videotimestamp]::after {
  position: absolute;
  content: '1';
  text-align: center;
  color: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  display: block;
  line-height: 22px; }

.showvideo.allplay .dot:not(.invisible)[data-videotimestamp]:not(.no-video) ~ .dot:not(.invisible):not(.no-video)::after {
  content: ''; }

.dot.grow, .dot.isplaying {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2) translate(-25%, -25%);
  border-width: 1px;
  z-index: 5000; }

.dot.lost {
  background: -webkit-linear-gradient(top, #d2341f 0%, #70000a 100%); }

.dot.x, .dot.net {
  border: none !Important;
  border-radius: 0 !Important; }

.dot.x, .dot.x.net {
  background: url(img/dot-x.png) no-repeat;
  background-size: 100% 100%; }

.dot.x.net {
  background: url(img/dot-x-net.png) no-repeat;
  background-size: 100% 100%; }

.dot.footfault {
  display: none; }

.dot.grow.x {
  border-radius: 0; }

.dot a {
  color: #fff;
  text-decoration: none; }

.showvideo .dot {
  opacity: 0;
  visibility: hidden;
  z-index: -1; }

.showvideo .dot[data-videotimestamp] {
  opacity: inherit;
  visibility: inherit; }

/*.showvideo .dot:not(.final), .showvideo .dot:not(.fault), .showvideo .dot.no-video{
	opacity:0;
	visibility: hidden;
	z-index: -1;
}
*/
.showvideo .dot.final {
  /*display: block;*/
  cursor: pointer; }

#averageMPH {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
  position: absolute;
  top: 100%;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  right: 0; }

#averageMPH.expanded {
  height: 34px;
  /* Fixed height of 30px when expanded */ }

.hawkeye-highlight .col > button:before, .hawkeye-new-highlight .col > button:before, .bolt6-highlight .col > button:before {
  content: '';
  position: relative;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* Adjust width as needed */
  height: 15px;
  /* Set a height that fits the logo */
  background: url("../images/hawkeye-logo.svg") no-repeat center;
  background-size: contain;
  z-index: 10;
  /* Places the image behind the content */
  margin-top: 2px;
  margin-bottom: 4px; }

.hawkeye-new-highlight .col > button:before {
  background-image: url("../images/hawkeye-new-logo.svg"); }

.bolt6-highlight .col > button:before {
  background-image: url("../images/bolt6-logo.png"); }

.hawkeye-only {
  display: none; }

#bigmessage {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -80px;
  font-size: 48px;
  color: #fff;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
  font-weight: bold;
  z-index: 9999;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5); }

#bigmessage.player {
  -webkit-text-stroke-color: #2BAC49; }

#bigmessage.opponent {
  -webkit-text-stroke-color: #CB1500; }

/* Scoreboard */
#scoreboard {
  position: absolute;
  position: fixed;
  left: 0;
  top: 25px;
  z-index: 3999; }

#scoreboard .panel {
  display: none; }

#match, #set, #game, #point {
  position: relative;
  left: 0;
  top: 0;
  float: left;
  clear: both;
  height: 62px;
  padding: 14px 40px 10px 10px;
  background: -webkit-linear-gradient(top, #424242 0%, black 100%);
  border: solid 1px #666666;
  border-left: none;
  border-radius: 0 16px 16px 0;
  box-sizing: content-box; }

#game {
  white-space: nowrap;
  overflow: hidden; }

#match {
  height: auto;
  padding-top: 10px;
  box-sizing: content-box; }

#scoreboard .label {
  width: 16px;
  height: 82px;
  position: absolute;
  right: 15px;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px 78px; }

#scoreboard #match .label {
  background-image: url(img/label-match.png);
  height: 120px; }

#set .label {
  background-image: url(img/label-set.png); }

#game .label {
  background-image: url(img/label-game.png); }

#point .label {
  background-image: url(img/label-point.png); }

#scoreboard .team {
  height: 30px;
  color: #ccc; }

#scoreboard #match .team {
  height: 50px; }

.trackingcolor {
  color: #4D90AD !important; }

#scoreboard .players {
  float: left;
  width: 140px;
  height: 50px;
  display: table; }

#scoreboard .player {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative; }

#scoreboard .player .playercontainer {
  width: 140px;
  max-height: 40px;
  line-height: 20px;
  overflow: hidden; }

#scoreboard .player.server:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  top: 21px;
  left: 2px; }

#scoreboard .scores {
  float: left; }

#scoreboard .total, #scoreboard .scorebtn {
  position: relative;
  float: left;
  width: 22px;
  height: 22px;
  margin: 3px 8px;
  border: solid 1px #666666;
  border-radius: 4px;
  padding: 0;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #231F20 url(img/btn-score.png) no-repeat center top;
  background-size: 21px 44px;
  cursor: pointer; }

#scoreboard #match .total, #scoreboard #match .scorebtn {
  width: 40px;
  height: 40px;
  margin: 3px 8px;
  border-radius: 7px;
  padding: 0;
  font-size: 24px;
  background: #231F20 url(img/btn-score.png) no-repeat center top;
  background-size: 42px 88px; }

#scoreboard #game .total, #scoreboard #game .scorebtn {
  cursor: default; }

#scoreboard .total {
  background: rgba(255, 255, 255, 0.1);
  cursor: default;
  border-radius: 0; }

#scoreboard .scorebtn.active {
  border-color: #fff;
  border-radius: 0; }

#scoreboard .scorebtn.disabled {
  cursor: default;
  opacity: .5; }

#scoreboard .scorebtn.won {
  background-position: center -22px; }

#scoreboard #match .scorebtn.won {
  background-position: center -44px; }

#scoreboard .scorebtn.edited:before, #scoreboard .scorebtn.flagged:before, #scoreboard .scorebtn.error:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-width: 0 8px 8px 0;
  border-style: solid;
  border-color: #ff0 transparent; }

#scoreboard .scorebtn.flagged:before {
  border-color: #0f0 transparent; }

#scoreboard .scorebtn.error:before {
  border-color: #f00 transparent; }

#scoreboard .trackingcolor .scorebtn {
  background-color: #4D90AD !important; }

body[data-id="match"].deg180 #court-logo {
  transform: rotate(180deg); }
body[data-id="match"].deg180 #zones > div:after {
  transform: rotate(180deg);
  margin-top: -32px; }
body[data-id="match"].deg180 #btn-wizard-undo {
  display: none; }

/* Shot Wizard */
#shotwizard {
  position: fixed;
  left: 60px;
  right: 60px;
  display: none;
  /**/
  bottom: 60px;
  text-align: center;
  z-index: 9000; }

#shotwizard-container {
  position: relative; }

#shotwizard-header {
  width: fit-content; }

#sw-btn-mental, #sw-btn-shot, #sw-btn-physical {
  border: none;
  font-size: 1.2em;
  background: #212529;
  color: #fff;
  border-radius: 0; }

#sw-btn-mental.active, #sw-btn-shot.active, #sw-btn-physical.active {
  color: #fff;
  background-color: #212529 !important; }

#sw-btn-shot.active {
  background-color: #1F7194 !important; }

#shotwizard-mental-bar, #shotwizard-physical-bar {
  background-color: #212529;
  display: none;
  color: #fff; }
  #shotwizard-mental-bar input[type=range], #shotwizard-physical-bar input[type=range] {
    -webkit-appearance: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto; }
  #shotwizard-mental-bar input[type=range]:focus, #shotwizard-physical-bar input[type=range]:focus {
    outline: none; }
  #shotwizard-mental-bar input[type=range]::-webkit-slider-runnable-track, #shotwizard-physical-bar input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: -webkit-linear-gradient(left, #70000a 0%, #f2c536 50%, #37b34a 100%); }
  #shotwizard-mental-bar input[type=range]::-webkit-slider-thumb, #shotwizard-physical-bar input[type=range]::-webkit-slider-thumb {
    background: #ffffff;
    -webkit-appearance: none; }
  #shotwizard-mental-bar input[type=range]:focus::-webkit-slider-runnable-track, #shotwizard-physical-bar input[type=range]:focus::-webkit-slider-runnable-track {
    background: -webkit-linear-gradient(left, #70000a 0%, #f2c536 50%, #37b34a 100%); }

#shotwizard-mental-bar .slidertxt, #shotwizard-physical-bar .slidertxt {
  font-size: 1.2em; }

.shotwizard-content {
  position: relative;
  background: -webkit-linear-gradient(top, #207498 0%, #185772 100%); }

.shotwizard-row {
  border-top: solid 1px rgba(255, 255, 255, 0.5);
  border-bottom: solid 1px rgba(0, 0, 0, 0.5);
  display: none; }

.shotwizard-row:first-child {
  display: block;
  border-top: none; }

.shotwizard-row.disabled {
  display: none !important; }

.shotwizard-row.advanced {
  border-top: solid 1px rgba(255, 255, 255, 0.2);
  border-right: solid 1px rgba(0, 0, 0, 0.3);
  border-bottom: solid 1px rgba(0, 0, 0, 0.3);
  border-left: solid 1px rgba(0, 0, 0, 0.3);
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%); }

#shotwizard-footer {
  height: 60px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 400px; }
  #shotwizard-footer button {
    height: 40px; }

#shotwizard.won .shotwizard-row .active {
  background: #8cc63f; }

#shotwizard.lost .shotwizard-row .active, .lost.btn-check:checked + .btn-dark {
  background: #bb2d3b;
  border-color: #bb2d3b; }

/* Mode */
.mode {
  display: inline; }

.mode svg {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }

#stoplight-red, #stoplight-yellow, #stoplight-green {
  width: 42px;
  height: 42px;
  border-radius: 21px;
  background: -webkit-linear-gradient(top, #70000a 0%, #d2341f 100%); }

#stoplight-yellow {
  background: -webkit-linear-gradient(top, #e99b23 0%, #f2c536 100%);
  margin: 7px 0; }

#stoplight-green {
  background: -webkit-linear-gradient(top, #165233 0%, #37b34a 100%); }

.stoplight-float {
  float: left; }

.stoplight-float div {
  display: block; }

.stoplight-float.last div:last-child {
  margin-top: 58px; }

/* Reports */
.btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle,
.btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show > .btn-dark.dropdown-toggle,
.showshotdirection #btn-shotdirection, .showvideo #btn-video, .showflagged #btn-flagged, .showfavorites #btn-favorites, .showhelp #btn-help,
.btn-check:checked + .btn-outline-dark {
  background-color: #8cc63f;
  border-color: #8cc63f;
  box-shadow: none;
  text-shadow: 1px 1px 1px black; }

.organized-row .btn-check:checked + .btn-dark {
  background-color: #ccc;
  border-color: #ccc;
  text-shadow: none;
  color: #000; }

#reportbuttons {
  margin: 0 auto;
  width: 580px; }

.reportbutton {
  height: 80px;
  line-height: 60px;
  white-space: normal; }

#vchart {
  width: 100%;
  height: 380px;
  border: solid 1px #fff; }

#vchart .vblock {
  text-align: center;
  height: 138px;
  width: 20%;
  float: left;
  position: relative; }

#vchart .vblock.header {
  border-bottom: solid 1px #fff;
  display: table;
  height: 60px; }

#vchart .vblock.header .title {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  color: #fff; }

#vchart .vbar-positive, #vchart .vbar-negative {
  clear: left;
  padding-top: 20px; }

#vchart .vbar-negative {
  padding-top: 0;
  padding-bottom: 20px; }

#vchart .vbar-positive .vblock {
  vertical-align: bottom;
  border-bottom: solid 2px #fff; }

#vchart .vbar-negative .vblock {
  vertical-align: top; }

#vchart .vblock.equals {
  border: none; }

#vchart .vblock.equals div {
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: 10px;
  width: 50px;
  left: 50%;
  margin-left: -25px; }

#vchart .vbar-negative .vblock.equals div {
  bottom: auto;
  top: 10px; }

.vbar {
  opacity: 0;
  margin: 0 20px;
  position: absolute;
  left: 15px;
  right: 15px; }

.vbar .label {
  display: block;
  padding: 10px 0; }

#vchart .vbarvalue {
  position: absolute;
  bottom: 10px;
  left: 15px;
  right: 15px;
  font-size: 18px;
  text-align: center;
  color: #fff; }

#vchart .vbar-positive .vbar {
  background: -webkit-linear-gradient(left, #37b34a 0%, #009345 100%);
  border-radius: 10px 10px 0 0;
  border: solid 2px #fff;
  border-bottom: none;
  bottom: 0; }

#vchart .vbar-negative .vbar {
  background: -webkit-linear-gradient(left, #d2341f 0%, #70000a 100%);
  border-radius: 0 0 10px 10px;
  border: solid 2px #fff;
  border-top: none;
  top: 0; }

#hchart {
  border: solid 1px #fff;
  min-height: 398px;
  overflow: hidden; }

#charts {
  position: relative; }

.setupmenu {
  overflow: visible; }

#hchart #overview, #hchart #details {
  padding: 0;
  width: 100%;
  min-height: 100px;
  position: relative; }

#hchart #details {
  left: 100%;
  position: absolute; }

#hchart .hblock {
  text-align: center;
  padding: 5px 20px 14px;
  display: block;
  position: relative; }

#hchart .header {
  text-align: center;
  margin-bottom: 5px; }

#hchart .hbar-positive, #hchart .hbar-negative {
  width: 50%;
  height: 30px;
  position: relative;
  left: 50%;
  border-left: solid 1px #fff;
  margin-top: -30px; }

#hchart .hbar-negative {
  left: 0;
  top: 0;
  border-left: none;
  border-right: solid 1px #fff;
  margin-top: 0; }

.hbar {
  opacity: 0;
  margin: 0;
  position: absolute;
  height: 100%; }

#hchart .hbarvalue {
  position: absolute;
  padding-top: 2px;
  left: 20px;
  font-size: 16px;
  text-align: left; }

#hchart .hbar-negative .hbarvalue {
  left: auto;
  right: 20px;
  text-align: right; }

#hchart .hbar-negative .hbar {
  background: -webkit-linear-gradient(top, #d2341f 0%, #70000a 100%);
  border-radius: 10px 0 0 10px;
  border: solid 1px #fff;
  border-right: none;
  right: 0; }

#hchart .hbar-positive .hbar {
  background: -webkit-linear-gradient(top, #37b34a 0%, #009345 100%);
  border-radius: 0 10px 10px 0;
  border: solid 1px #fff;
  border-left: none;
  left: 0; }

#hchart #closedetails {
  position: absolute;
  top: 8px;
  right: 16px; }

#overview .hblock.ngen {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border-top: solid 1px rgba(255, 255, 255, 0.4);
  /*border-bottom:solid 1px rgba(0,0,0,.4);*/ }

#overview .hblock.ngen:first-child {
  border-top: solid 1px rgba(255, 255, 255, 0); }

#overview .hblock.ngen:active {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%) !important; }

#details .hblock {
  padding-bottom: 16px;
  /*border-bottom:solid 1px #fff;
  margin-bottom:12px;*/ }

#details .header {
  margin-bottom: 8px;
  font-style: italic;
  padding-top: 12px; }

#details .header {
  margin-top: 6px;
  font-size: 20px; }

#detailsbars {
  margin: 20px 0; }

#detailsbars .header {
  font-size: 16px; }

#detailsbars .header.divider {
  margin-top: 30px;
  border-top: solid 1px #fff; }

#detailsbars .header .small {
  font-size: 12px; }

#detailsbars .hbar-positive, #detailsbars .hbar-negative {
  height: 20px;
  width: 44%;
  border: none;
  margin-left: 16px;
  width: 46%;
  position: relative;
  left: 50%;
  margin-top: 0; }

#detailsbars .hbar-negative {
  margin-left: 16px;
  margin-right: 0;
  left: 0;
  top: 0; }

#detailsbars .hbarvalue {
  font-size: 14px;
  padding-top: 0;
  left: 6px;
  top: -1px; }

#detailsbars .hbar-negative .hbarvalue {
  right: 6px; }

#detailsbars .hbar {
  height: 20px;
  border: solid 1px #fff !important; }

#detailsbars .hbar-positive .hbar {
  border-radius: 0 5px 5px 0; }

#detailsbars .hbar-negative .hbar {
  border-radius: 5px 0 0 5px; }

#winner-block, #forcing-block, #unforced-block, #forced-block {
  text-align: center;
  height: 22px;
  display: block;
  position: relative;
  margin-bottom: 10px;
  /*border:solid 1px #fff;*/ }

#winner-block {
  background: url(img/report-pattern-winner-icon.svg) no-repeat center center;
  background-size: 16px; }

#forcing-block {
  background: url(img/report-pattern-forcing-icon.svg) no-repeat center center;
  background-size: 16px; }

#unforced-block {
  background: url(img/report-pattern-unforcederror-icon.svg) no-repeat center center;
  background-size: 16px; }

#forced-block {
  background: url(img/report-pattern-forcederror-icon.svg) no-repeat center center;
  background-size: 16px; }

#detailskey {
  border-top: solid 1px #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center; }

#detailskey div {
  display: inline;
  margin-right: 16px;
  padding-left: 20px; }

#detailskey div:last-child {
  margin-right: 0; }

#winner-key {
  background: url(img/report-pattern-winner-icon.svg) no-repeat center left;
  background-size: 16px; }

#forcing-key {
  background: url(img/report-pattern-forcing-icon.svg) no-repeat center left;
  background-size: 16px; }

#unforced-key {
  background: url(img/report-pattern-unforcederror-icon.svg) no-repeat center left;
  background-size: 16px; }

#forced-key {
  background: url(img/report-pattern-forcederror-icon.svg) no-repeat center left;
  background-size: 16px;
  margin-right: 0; }

.orangish {
  color: #f93 !important; }

#report-title {
  text-align: center; }

.pattern-checkboxes label:before {
  content: '';
  background: url(img/report-pattern-winner-icon.svg) no-repeat;
  background-size: 14px;
  padding-left: 20px !important;
  position: relative;
  top: 3px; }

.pattern-checkboxes label.fault:before {
  background: url(img/report-pattern-fault-icon.svg) no-repeat;
  background-size: 14px; }

.pattern-checkboxes label.forcing:before {
  background: url(img/report-pattern-forcing-icon.svg) no-repeat;
  background-size: 14px; }

.pattern-checkboxes label.unforcederror:before {
  background: url(img/report-pattern-unforcederror-icon.svg) no-repeat;
  background-size: 14px; }

.pattern-checkboxes label.forcederror:before {
  background: url(img/report-pattern-forcederror-icon.svg) no-repeat;
  background-size: 14px; }

.pattern-checkboxes label.inplay:before {
  background: url(img/report-pattern-inplay-icon.svg) no-repeat;
  background-size: 14px; }

.dot.report {
  width: 20px;
  height: 20px;
  position: absolute;
  background: none;
  border: none;
  border-radius: none;
  z-index: 6;
  /*transition: width .35s ease-in-out;
  transition: height .35s ease-in-out;
  transition: margin .35s ease-in-out;*/ }

.dot.report:after {
  position: absolute;
  content: '';
  background: url(img/report-pattern-winner-icon.svg) no-repeat center center;
  background-size: 18px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /*transition: background-size .35s ease-in-out;*/ }

.dot.report.unforcederror:after {
  background: url(img/report-pattern-unforcederror-icon.svg) no-repeat center center;
  background-size: 18px;
  z-index: 7; }

.dot.report.forcing:after {
  background: url(img/report-pattern-forcing-icon.svg) no-repeat center center;
  background-size: 22px;
  z-index: 5; }

.dot.report.fault:after {
  background: url(img/report-pattern-fault-icon.svg) no-repeat center center;
  background-size: 18px;
  z-index: 4; }

.dot.report.forcederror:after {
  background: url(img/report-pattern-forcederror-icon.svg) no-repeat center center;
  background-size: 22px;
  z-index: 4; }

.dot.report.inplay:after {
  background: url(img/report-pattern-inplay-icon.svg) no-repeat center center;
  background-size: 18px;
  z-index: 2; }

.won-lost .dot.report.inplay.pointwon:after {
  background: url(img/report-pattern-inplay-won-icon.svg) no-repeat center center;
  background-size: 18px;
  z-index: 2; }

.won-lost .dot.report.inplay.pointlost:after {
  background: url(img/report-pattern-inplay-lost-icon.svg) no-repeat center center;
  background-size: 18px;
  z-index: 2; }

.dot.report.final {
  z-index: 8; }

.showfavorites .dot:not(.favorite), .showflagged .dot:not(.flagged) {
  opacity: 0;
  visibility: hidden;
  z-index: -1; }

.dot.report.favorite, .dot.report.flagged {
  z-index: 9; }

.dot.report.favorite:before, .dot.report.flagged:before {
  position: absolute;
  content: '';
  background: url("img/report-pattern-favorite.svg") no-repeat center;
  background-size: 24px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; }

.zoom-out .dot.report.favorite:before, .zoom-out .dot.report.flagged:before {
  background-size: 14px; }

.dot.report.flagged:before {
  background-image: url("img/report-pattern-flagged.svg"); }

.dot.report.forcederror.favorite:before, .dot.report.forcing.favorite:before, .dot.report.forcederror.flagged:before, .dot.report.forcing.flagged:before {
  position: absolute;
  content: '';
  background: url("img/report-pattern-favorite-triangle.svg") no-repeat center;
  background-size: 26px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0 !important; }

.zoom-out .dot.report.forcederror.favorite:before, .zoom-out .dot.report.forcing.favorite:before, .zoom-out .dot.report.forcederror.flagged:before, .zoom-out .dot.report.forcing.flagged:before {
  background-size: 12px; }

.dot.report.forcederror.flagged:before, .dot.report.forcing.flagged:before {
  background-image: url("img/report-pattern-flagged-triangle.svg"); }

.showvideo.allplay .dot.final:not(.invisible) ~ .dot.report.final {
  z-index: 6; }

#patternheader {
  min-height: 58px;
  text-align: center;
  z-index: 4000; }

#patternfooter {
  z-index: 4000;
  height: 40px; }

#pattern-video-containment {
  position: fixed;
  top: 85px;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: -1;
  border: solid 1px #f00;
  text-align: center; }

#pattern-video {
  position: fixed;
  max-width: 1000px;
  width: 95%;
  margin: 0;
  z-index: 1000; }

#pattern-video.hide-me {
  visibility: hidden;
  opacity: 0; }

#pattern-video #videoPlayer.minimized {
  height: 0;
  overflow: hidden;
  padding: 0; }

/*#pattern-video.click-me{
	opacity:0.001;
	position:fixed;
	z-index: 10000;
	width:44px;
	height:38px;
	left:auto !important;
	top:auto !important;
	bottom:11px !important;
	right:58px !important;
	overflow: hidden;
}
#pattern-video.click-me #videoPlayer{
	overflow: hidden;
}
#pattern-video.click-me iframe{
	position:absolute;
	top:-250px;
	left:-250px;
	width:400px;
	height:400px;
}*/
#video-handle {
  background-image: linear-gradient(#3c3c3c, #111111);
  border: solid 1px #333;
  cursor: move; }

.click-me #video-handle {
  display: none; }

.hasvideo {
  display: inline-block;
  width: 20px;
  height: 14px;
  background: url(img/icon-hasvideo.png) no-repeat;
  margin-right: 8px; }

#resync-container .ui-slider-switch {
  width: 9em; }

#shot-list .sync-list-link {
  text-align: left; }

#shot-list .active {
  background: #8cc63f; }

#shot-list .edited {
  border: solid 1px #8cc63f; }

#shot-list .edited-bg > span {
  background-color: #8cc63f; }

#wonlostbasicselector {
  display: none; }

.basic #vchart .vbar-positive .vbar, .basic #hchart .hbar-positive .hbar {
  background: #8cbe00; }

.basic #vchart .vbar-negative .vbar, .basic #hchart .hbar-negative .hbar {
  background: #d2341f; }

.basic #hchart {
  /*box-shadow:none;*/ }

.orangish .ui-btn-active {
  background: #F93 !important; }

#btn-screenshot.btn {
  background: url(img/btn-camera-icon.png) no-repeat center 0;
  background-size: 50px 100px;
  font-size: 10px;
  position: relative;
  margin-left: 4px;
  text-transform: uppercase;
  height: 10px;
  padding-top: 26px;
  display: inline-block;
  color: #fff;
  /*margin:10px auto 0;*/
  overflow: hidden; }

#btn-screenshot:active {
  background-position: center -65px; }

#morefilters {
  position: fixed;
  bottom: 60px;
  left: 0;
  text-align: center;
  display: none;
  z-index: 3999;
  padding: 20px 0; }

#filtertext {
  display: block;
  padding: 0 20px;
  color: #fff; }

.sync-list-link {
  position: relative; }

.sync-list-link.highlight:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background-color: #8cc63f; }

#bookmark-list {
  /*.teaser{
      max-height: 60px;
      overflow: hidden;
      position: relative;
      border:solid 1px #000;
      border-top:none;
  }
  .teaser::after{
      content: '\f0d7';
      font-family: "Font Awesome 5 Pro"; 
      font-weight: 900;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      text-align: center;
      position: absolute;
      width:60px;
      height:15px;
      line-height:15px;
      transform: translateX(-30px);
      left:50%;
      top:44px;
      background:rgba(40,40,40,0.8);
      border-radius: 10px 10px 0 0;
      z-index: 3;
      border:solid 1px #222;
      border-bottom:none;
  }*/ }
  #bookmark-list .btn-edit .fa-check, #bookmark-list .tb-bookmark-name, #bookmark-list .ta-bookmark-description, #bookmark-list .tox-tinymce {
    display: none; }
  #bookmark-list .bookmark.editing .btn-edit .fa-check, #bookmark-list .bookmark.editing .tb-bookmark-name, #bookmark-list .bookmark.editing .ta-bookmark-description, #bookmark-list .bookmark.editing .tox-tinymce {
    display: inherit; }
  #bookmark-list .bookmark.editing .btn-edit .fa-pencil, #bookmark-list .bookmark.editing .btn-bookmark, #bookmark-list .bookmark.editing .txt-bookmark-description {
    display: none; }
  #bookmark-list .bookmark.editing .collapse {
    display: block; }

/* Bookmark Tabs */
/* Default (non-active) state for the badge */
#bookmark-tabs {
  /* Style non-active tab buttons */
  /* Optional: Add hover effect for non-active tabs */
  /* Default (non-active) state for the badge */
  /* Active state for the badge */ }
  #bookmark-tabs .nav-link:not(.active) {
    color: #999;
    /* Customize text color */ }
  #bookmark-tabs .nav-link:not(.active):hover {
    color: #ccc;
    /* Darker shade on hover */ }
  #bookmark-tabs .nav-link .badge {
    color: #fff;
    background-color: #37b34a;
    opacity: 0.6; }
  #bookmark-tabs .nav-link.active .badge {
    color: #fff;
    /* White text, or another color that suits the active tab */
    background-color: #37b34a;
    opacity: 1; }

/* Numeric Report */
#nchart-table {
  width: 100%;
  border: solid 1px #fff; }

#nchart-table th {
  padding: 20px 5px 10px;
  font-size: 20px;
  font-style: italic; }

#nchart-table td {
  padding: 3px 5px;
  width: 20%;
  text-align: center; }

#nchart-table td:first-child {
  text-align: right;
  width: 40%; }

#nchart-table td:last-child {
  text-align: left;
  width: 40%; }

#nchart .small {
  font-size: 12px;
  font-style: italic; }

/* More Filters */
.morefilter-row, .organized-row {
  margin: 6px 10px;
  text-align: left; }

.morefilter-row.disabled {
  display: none; }

/* Tutorials */
.tutorials .active {
  background: -webkit-linear-gradient(top, #37b34a 0%, #165233 100%); }

#videoContainer {
  background: url(img/video-poster.png) no-repeat;
  background-size: 640px 360px;
  display: inline-block;
  margin: 10px 0 0 20px;
  width: 640px;
  height: 360px; }

#popupModesOverview {
  width: 370px;
  height: 400px; }

/* Dot Direction Line */
.direction-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  pointer-events: none; }

svg.connector {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  pointer-events: none; }

/*.showshotdirection svg.connector{
	visibility: visible;
}*/
.showshotdirection .direction-container {
  visibility: visible; }

svg.connector.won line {
  stroke: #95d243;
  opacity: 1; }

svg.connector.lost line {
  stroke: #d1331f;
  opacity: 1; }

/* Curved Lines
svg.connector.won path{
	stroke:#95d243;
	opacity:1;
}
svg.connector.lost path{
	stroke:#d1331f;
	opacity:1;
}*/
/* Common */
label.validation-error {
  background: #bb2d3b;
  padding: 10px;
  color: #fff; }

.redbtn {
  background: -webkit-linear-gradient(top, #d2341f 0%, #70000a 100%); }

.greenbtn {
  background: -webkit-linear-gradient(top, #37b34a 0%, #165233 100%); }

.hide {
  display: none !important; }

.invisible {
  opacity: 0;
  visibility: hidden;
  z-index: -1 !important;
  /*visibility:hidden !important;*/ }

.d-none-important {
  display: none !important; }

.go-away {
  visibility: hidden !important;
  top: 100%;
  left: 100%; }

.secondary-tooltip {
  --bs-tooltip-bg: var(--bs-secondary); }

.rotate-45 {
  transform: rotate(45deg); }

/* Effects */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.3, 0.3);
    opacity: 0.0; }
  50% {
    opacity: .4; }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0.0; } }
.pulse {
  -webkit-animation: pulse .3s linear 1; }

.animated-icon {
  transition: transform 0.5s; }

/* AUTOTAG */
.autotag .returnposition {
  border: solid 2px #fff !important;
  width: 22px;
  height: 22px;
  width: 30px;
  height: 30px;
  line-height: 26px;
  font-size: 18px; }
.autotag .dot.grow {
  transform: scale(1) translate(-25%, -25%); }
.autotag #ismatch {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; }
  .autotag #ismatch #video-container {
    width: 100% !important;
    position: relative;
    flex-grow: 1;
    order: 1; }
  .autotag #ismatch #courtcontainer {
    width: 100% !important;
    height: 100% !important;
    position: relative;
    flex-grow: 1;
    order: 2; }
  .autotag #ismatch #matchfooter {
    flex-grow: 0;
    flex-shrink: 0;
    height: 60px;
    position: relative;
    order: 3; }
  .autotag #ismatch #hitarea {
    height: 1064px; }
    .autotag #ismatch #hitarea div {
      box-sizing: border-box;
      border: none; }
  .autotag #ismatch #hitarea.activesideb {
    top: -532px; }
  .autotag #ismatch #hitarea.activesidea {
    bottom: -532px; }
  .autotag #ismatch .dot {
    border: solid 2px #fff !important;
    width: 22px;
    height: 22px;
    line-height: 18px;
    font-size: 14px; }
  .autotag #ismatch .dot.x, .autotag #ismatch .dot.net {
    border: none !important; }
  .autotag #ismatch #court {
    height: 63.69294605809129%;
    width: 315px; }
    .autotag #ismatch #court .side:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 12.847222222%;
      width: 0.69444444%;
      background: #fff; }
    .autotag #ismatch #court .side:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 12.847222222%;
      width: 0.69444444%;
      background: #fff; }
  .autotag #ismatch #court:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.69444444%;
    background: #fff;
    z-index: 1; }
  .autotag #ismatch #court:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0.69444444%;
    background: #fff;
    z-index: 1; }
  .autotag #ismatch .side {
    height: 50% !important;
    width: 100%; }
    .autotag #ismatch .side .alley {
      width: 12.847222222%;
      left: 0;
      top: 0;
      bottom: 0; }
    .autotag #ismatch .side .alley.deuce {
      left: auto;
      right: 0; }
    .autotag #ismatch .side .alley:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0.6514658%;
      background: #fff; }
    .autotag #ismatch .side .singles {
      width: auto;
      border: none;
      left: 12.847222222%;
      right: 12.847222222%;
      top: 0;
      height: 100%; }
      .autotag #ismatch .side .singles .forecourt {
        width: 100%;
        height: 53.74592834%; }
        .autotag #ismatch .side .singles .forecourt .adcourt {
          top: 0;
          bottom: 0;
          left: 50%;
          right: 0;
          margin: 0; }
        .autotag #ismatch .side .singles .forecourt .adcourt:after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 0.9345794392523364%;
          background: #fff; }
        .autotag #ismatch .side .singles .forecourt .deucecourt {
          top: 0;
          bottom: 0;
          left: 0;
          right: 50%;
          margin: 0; }
        .autotag #ismatch .side .singles .forecourt .deucecourt:after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          width: 0.9345794392523364%;
          background: #fff; }
      .autotag #ismatch .side .singles .forecourt:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.212121212121212%;
        background: #fff; }
      .autotag #ismatch .side .singles .backcourt {
        width: 100%;
        height: 46.25407166%; }
    .autotag #ismatch .side .singles:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0.6514658%;
      background: #fff; }
    .autotag #ismatch .side .singles:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0.9345794392523364%;
      height: 3.5%;
      background: #fff; }
  .autotag #ismatch #sidea .alley:before {
    bottom: auto;
    top: 0; }
  .autotag #ismatch #sidea .singles:before {
    bottom: auto;
    top: 0; }
  .autotag #ismatch #sidea .singles:after {
    bottom: auto;
    left: 50%;
    top: 0; }
  .autotag #ismatch #sidea .forecourt {
    bottom: 0;
    top: auto; }
  .autotag #ismatch #sidea .forecourt:before {
    bottom: auto;
    top: 0; }
  .autotag #ismatch #sidea #net {
    left: -7.11805555555555%;
    width: 114.2361111111111%;
    height: 6.514657980456026%;
    margin: 0;
    background-size: 100%; }
  .autotag #ismatch #zones {
    bottom: 0;
    height: 100%; }
    .autotag #ismatch #zones div:after {
      font-size: 36px; }
    .autotag #ismatch #zones #zone1 {
      height: 11.15145228215768%; }
    .autotag #ismatch #zones #zone2 {
      height: 14.88589211618257%; }
    .autotag #ismatch #zones #zone3 {
      height: 6.016597510373444%; }
    .autotag #ismatch #zones #zone4 {
      height: 5.809128630705394%; }
    .autotag #ismatch #zones #zone5 {
      height: 12.13692946058091%; }
  .autotag #ismatch #scoreboard {
    top: 45%; }

body[data-id="report-shotlocation"] #courtcontainer.zoomout {
  transform: scale(0.47);
  width: 212.77%;
  left: -56.38%;
  top: -470px !important; }
body[data-id="report-shotlocation"] .zoomout .direction-container {
  top: 0 !important; }

@media (min-width: 768px) {
  body[data-id="match"].web #app, body[data-id="report-sync"].web #sync {
    max-width: 768px !important;
    height: 1024px !important;
    margin-left: auto;
    margin-right: auto; }

  body.deg180.autotag #ismatch {
    /*#video-container{
        //top:60px;
        order: 3;
    }
    #matchfooter{
        order: 1;
    }*/
    /*#scoreboard{
        //top:410px !important;
    }*/ }
    body.deg180.autotag #ismatch #hitarea.activesideb {
      top: auto;
      bottom: 0; }
    body.deg180.autotag #ismatch #hitarea.activesidea {
      top: auto; } }
@media (min-width: 1024px) {
  body[data-id="match"].web #app, body[data-id="report-sync"].web #sync {
    max-width: 1024px !important;
    height: 1366px !important;
    margin-left: auto;
    margin-right: auto; }

  .autotag #ismatch #court {
    width: 438px; }
  .autotag #ismatch #hitarea {
    height: 1480px; }
  .autotag #ismatch #hitarea.activesideb {
    top: -740px; }
  .autotag #ismatch #hitarea.activesidea {
    bottom: -740px; }
  .autotag #ismatch .dot {
    width: 30.7px;
    height: 30.7px; }

  body[data-id="report-shotlocation"] #courtcontainer.zoomout {
    transform: scale(0.64);
    top: -280px !important;
    width: 156.25% !important;
    left: -28.13%; } }
/* Video.js Player
Move the control bar below the player */
/*.video-js .vjs-control-bar {
    position: relative !important;
}
.video-js {
    margin-bottom: 40px !important;
}*/
/*#video-row {
    min-height: 0;
}
#video-row .col {
    min-height: 0;
}
#collapseVideos.collapse.show {
    height: auto !important;
}
#collapseVideos.collapse:not(.show) {
    display: none !important;
}*/
.vjs-control-bar {
  background-color: rgba(43, 51, 63, 0.4) !important; }

.vjs-play-progress .vjs-time-tooltip {
  display: none !important; }

.vjs-current-time {
  display: block !important;
  position: relative !important;
  opacity: 1 !important; }

.vjs-control-bar, .vjs-volume-control {
  /*top: 100% !important;*/ }

/*.embed-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}*/