/* CSS declarations go here */

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 0;
  margin: 0;

  font-size: 14px;
}

.selectOptions .select2 {
  width: 100% !important;
}

.bootstrap-tagsinput .label {
  font-size: 100%;
}

.bootstrap-tagsinput {
  width: 100%;
}

.block {
  display: block;
}

.centered {
  text-align: center;
}

.container {
  margin: 0 auto;
  background: transparent;
}

.row {
  margin-top: 0px;
  margin-bottom: 0px;
}

.navbar {
  background: transparent;
  border: 0px;
  margin-top: 50px;
  margin-bottom: 30px;
}

.navbar-nav {
  margin-top: 12px;
}

.nav li a {
  padding-left: 2px;
  padding-right: 2px;
}

.nav.nav-pills > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.tab-content {
  padding: 10px 0px;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}

.ContentListElement {
  background: rgba(255, 255, 255, 1);
  border: solid 1px #cccccc;
  border-radius: 8px;
  border-width: 1px;
  margin-bottom: 8px;
  padding: 8px;
}

.ContentListElement span {
  word-wrap: break-word;
}

.dropdown-menu {
  left: auto;
  right: 0px;
  max-height: 220px;
  overflow: auto;
}

.dropdown-menu > .active > a {
  color: #000000;
  background: #e7e7e7;
}

.dropdown-menu a:hover {
  color: #000000;
  background: #e7e7e7;
}

header {
  background: #ffffff;
  padding: 10px 15px 15px 15px;
  position: relative;
  border-style: Solid;
  border-color: #cccccc;
  border-color: rgba(204, 204, 204, 1);
}

.menu-item {
  font-size: 14px;
  color: #000000;
  text-transform: uppercase;
}

.dropdown-menu > li > a.active {
  font-weight: bold;
}

.brand-logo img {
  width: 2em;
  background: transparent;
}

.brand-logo-mini img {
  width: 1.2em;
  background: transparent;
}

.resimg {
  height: 120px;
}

h1 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}

input {
  box-sizing: border-box;
  font-size: 1em;
}

input:focus {
  outline: 0;
}

.delete {
  float: right;
  font-weight: bold;
  background: none;
  font-size: 1em;
  border: none;
  position: relative;
}

.checkedItem {
  color: #888;
}

.checkedItem .text {
  text-decoration: line-through;
}

.privateItem {
  background: #eee;
  border-color: #ddd;
}

.smallMargin {
  margin: 10px;
}

.hide-completed,
.not-reactive {
  float: right;
}

.toggle-private {
  margin-left: 5px;
}

.ButtonTextStyle {
  font-size: 29px;
  line-height: 42.91px;
  color: #838383;
  font-weight: bold;
  text-transform: uppercase;
}

.ButtonSize {
  width: 100%;
  height: 86px;
  border-width: 1px;
  border-radius: 8px;
  margin-top: 30px;
}

.ButtonFloatRight {
  float: right;
}

.sc_on {
  background: #58b957;
  background: rgba(88, 185, 87, 1);
  border-style: Solid;
  border-color: #48af46;
  border-color: rgba(72, 175, 70, 1);
}

.sc_off {
  background: #db524b;
  background: rgba(219, 82, 75, 1);
  border-style: Solid;
  border-color: #d63d34;
  border-color: rgba(214, 61, 52, 1);
  border-width: 1px;
  border-radius: 8px;
}

.sc_test {
  background: #3e8acc;
  background: rgba(62, 138, 204, 1);
  border-style: Solid;
  border-color: #307dbf;
  border-color: rgba(48, 125, 191, 1);
  border-width: 1px;
  border-radius: 8px;
}

.testActive {
  border-color: #ff4500;
  border-width: 3px;
}

.testActiveText {
  color: #fc98f2;
}

.bt_disabled {
  background: #6f6f6f;
  border-color: #606060;
}

.txt_disabled {
  color: #8f8f8f;
}

.TimerTitle {
  background: #3e8acc;
  background: rgba(62, 138, 204, 1);
  border-style: Solid;
  border-color: #3e8acc;
  border-color: rgba(62, 138, 204, 1);
  border-width: 1px;
  width: 100%;
  height: 37px;
  border-radius: 8px 8px 0px 0px;
  padding: 4px 10px;
  margin-top: 30px;
}

.Timer {
  background: #ffffff;
  background: rgba(255, 255, 255, 1);
  border-style: Solid;
  border-color: #3e8acc;
  border-color: rgba(62, 138, 204, 1);
  border-width: 1px;
  width: 100%;
  height: 49px;
  border-radius: 0px 0px 8px 8px;
  text-align: center;
  padding: 5px;
}

.TimerTitleText {
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
  color: rgb(255, 255, 255);
}

.TimerText {
  font-family: "Lato", sans-serif;
  font-size: 30px;
  line-height: 26px;
  color: #231f20;
  color: rgb(35, 31, 32);
}

.logedoutElements {
  margin: 50px;
}

.register {
  background: #75c8d6;
  border-style: Solid;
  border-color: #307dbf;
  border-color: rgba(48, 125, 191, 1);
}

.login {
  background: #75c8d6;
  border-style: Solid;
  border-color: #48af46;
  border-color: rgba(72, 175, 70, 1);
}

.modalheader {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-width: 1px;
}

.divider-below {
  border-bottom: 2px dotted #ffffff;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.Game {
  font-family: "Lato", sans-serif;
}

.active_Game {
  background: #7d7daf;
  color: white;
}

.no-height {
  height: 0;
  overflow-y: visible;
}

.hasRole {
  background: #58b957;
  background: rgba(88, 185, 87, 1);
  border-style: Solid;
  border-color: #48af46;
  border-color: rgba(72, 175, 70, 1);
  color: #ffffff;
}

.hasNotRole {
  background: #f2ae43;
  background: rgba(242, 174, 67, 1);
  border-style: Solid;
  border-color: #f0a324;
  border-color: rgba(240, 163, 36, 1);
  color: #ffffff;
}

.base64-image-container {
  position: relative;
}

.base64-image-change-button {
  position: absolute;
  left: 8px;
  top: 8px;
  opacity: 0.3;
}

.base64-image-container:hover .base64-image-change-button {
  opacity: 1;
}

.app-top-nav {
  background-color: #47476b;
  color: #e1ffff;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100;
}

.app-top-nav .toggle-btn {
  padding: 12px;
}

.app-top-nav ul {
  list-style: none;
  padding: 4px;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 2px;
  margin-right: 400px;
  width: 250px;
  font-weight: bold;
  text-align: left;
}

.app-top-nav li {
  margin: 7px;
  cursor: pointer;
}

.shape {
  padding-right: 30px;
}

.base64-image-container {
  margin-top: 46px;
}

.base64-image-change-button {
  left: 0px !important;
  top: -45px !important;
}

.disabled {
  background-color: lightgray !important;
}

.bold {
  font-weight: 800;
}

.smallGray {
  font-size: 12px;
  color: #8f8f8f;
}

.game-match {
  zoom: 0.8;
  -moz-transform: scale(0.8);
  /* Firefox */
  overflow: auto;
  padding: 0px 8px;
}

.game-match.games {
  max-height: calc(100vh - 440px);
}

.game-match::-webkit-scrollbar {
  width: 5px;
}

.game-match::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.game-match::-webkit-scrollbar-thumb {
  background: #888;
}

.game-match::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.matchHeatmapDisplay {
  background-color: #fff;
}

.matchHeatmapDisplay .map-header img.logo,
.matchHeatmapDisplay .map-header img.psa {
  width: 100%;
}

@media (max-width: 768px) {
  .matchHeatmapDisplay .map-header img.logo,
  .matchHeatmapDisplay .map-header img.psa {
    width: 100px;
  }
}

.matchHeatmapDisplay #heatmapHitsPlayer1,
.matchHeatmapDisplay #heatmapHitsPlayer2 {
  width: 100%;
  zoom: 0.63;
  /* -moz-transform: scale(0.630); */
  position: relative;
}

.heatmapholder {
  height: 100%;
}

.matchHeatmapDisplay canvas {
  outline: solid 8px #000000;
  /* outline-offset: -8px; */
  margin: auto;
  display: flex;
}

/* big screens */
@media (min-width: 1281px) {
  .matchHeatmapDisplay canvas {
    zoom: 0.604;
    /* -moz-transform: scale(0.604); */
  }
}

/* ipad */
@media (max-width: 768px) and (min-width: 768px) {
  .matchHeatmapDisplay canvas {
    zoom: 0.95;
    -moz-transform: scale(0.95);
    /* Firefox */
  }
}

/* big screen in fullscreen mode */
@media (min-width: 1281px) and (display-mode: fullscreen) {
  .matchHeatmapDisplay canvas {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    /* Firefox */
  }
}

/* Ipad pro */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #infopane {
    padding-top: 20px;
    overflow: auto;
  }

  .heatmapHitsPlayer {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .matchHeatmapDisplay canvas {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    /* Firefox */
  }
}

/** iphone 6/7/8 plus **/
@media (max-width: 414px) and (min-width: 376px) {
  #infopane {
    padding-top: 20px;
    overflow: auto;
  }

  .heatmapHitsPlayer {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .matchHeatmapDisplay canvas {
    zoom: 0.88;
    -moz-transform: scale(0.88);
    /* Firefox */
  }
}

/* screens larger than ipad */
@media (max-width: 1281px) and (min-width: 1025px) {
  .matchHeatmapDisplay canvas {
    zoom: 0.554;
    -moz-transform: scale(0.554);
    /* Firefox */
  }
}

/* iphone 6/7/8 */
@media (max-width: 375px) {
  #infopane {
    padding-top: 50px;
    padding-bottom: 50px;
    overflow: hidden;
  }

  .heatmapHitsPlayer {
    padding-top: 40px;
  }

  .matchHeatmapDisplay canvas {
    zoom: 0.88;
    margin-bottom: 3px;
  }
}

/* iphone 6/7/8 */
@media (max-width: 320px) {
  #infopane {
    padding-top: 50px;
    padding-bottom: 50px;
    overflow: hidden;
  }

  .heatmapHitsPlayer {
    padding-top: 40px;
  }

  .matchHeatmapDisplay canvas {
    zoom: 0.84;
    margin-bottom: 3px;
  }
}

/* iphone 5/SE */
@media only screen and (max-width: 640px) and (max-height: 1136px) {
  .game-match.games {
    max-height: none;
  }
}

@media (max-width: 1281px) and (display-mode: fullscreen) {
  .matchHeatmapDisplay canvas {
    zoom: 0.727;
    -moz-transform: scale(0.727);
    /* Firefox */
  }
}

/* firefox */
@-moz-document url-prefix() {
  .matchHeatmapDisplay canvas {
    width: 60%;
    outline: solid 2px #000;
  }

  #infopane {
    margin-top: 50px;
  }
}

.matchHeatmapDisplay .heatmapholder {
  background-color: #ededee;
}

.playerHeatmapHolder {
  height: 100%;
}

/* fix bootstrap modal title to allow right close button on the same line */
.modal-title {
  display: inline-block;
}

.alert a {
  color: #337ab7;
}

.pointer {
  cursor: pointer;
}

/** court page styling */

.response-value {
  height: 34px !important;
  font: inherit;
  margin-bottom: 0px !important;
}

.border-bottom {
  border-bottom: 1px solid;
}

.fit-space .form-control,
.fit-space .help-block {
  margin-bottom: 3px;
  margin-top: 3px;
}

.row .fit-space,
.fit-space .form-group {
  margin-bottom: 3px;
  margin-top: 3px;
  padding: 0px;
}

.fit-space [class^="col"] {
  padding: 0px 2px;
  margin: 0px;
}

.fit-form-row {
  margin-top: 3px;
  margin-bottom: 3px;
}

#courtsSelector {
  height: 32px;
  padding: 0.5em 1em 0.5em;
}

.actionButton {
  transition: all 0.2s ease-out;
}
.actionButton:hover {
  background-color: #bababa;
}

.actionButton:active {
  background-color: #00a267;
}

img[name="icon2"] {
  max-width: 150px;
}

.playlistControlsHover:hover {
  transform: scale(1.2);
  text-decoration: none;
}

.systemControlsPosition {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 500px;
  z-index: 30;
}

@media only screen and (max-width: 700px) {
  .systemControlsPosition {
    width: 95%;
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 30;
  }
}

.playControlTooltipTarget .playControlTooltip {
  visibility: hidden;
}

.playControlTooltipTarget:hover .playControlTooltip {
  visibility: visible;
}

.redOnInvalid:invalid {
  border: none;
  outline: 2px solid red;
  border-radius: 5px;
}

.spinnerSmall {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.scaleOnHover:hover {
  transform: scale(1.05);
  text-decoration: none;
}

.scaleOnHover:active {
  transform: scale(0.95);
}

/* Chrome, Safari, Edge, Opera */
input.regularTextField::-webkit-outer-spin-button,
input.regularTextField::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].regularTextField {
  -moz-appearance: textfield;
}

.switchSelected {
  background-color: #75C8D6;
  color: #ffffff;
}

.shepherd-header {
  border: none;
}

.pulseLoader {
  width: 4em;
  height: 4em;
  border-radius: 4em;
  background-color: #ccc;
  outline: 1px solid transparent;
  animation: pulseanim 1.2s ease-in-out infinite;
}

@keyframes pulseanim {
  0% { transform: scale(0); opacity: 0.8;}
  100% { transform: scale(1); opacity: 0;}
}

.black-link, .black-link:visited, .black-link:hover, .black-link:active, .black-link:focus, .black-link:link {
  color: black;
  text-decoration: none;
}

.unset-bootstrap-link, .unset-bootstrap-link:visited, .unset-bootstrap-link:hover, .unset-bootstrap-link:active, .unset-bootstrap-link:focus, .unset-bootstrap-link:link {
  color: inherit;
  text-decoration: none;
}

.link, .link:hover, .link:visited, .link:active, .link:focus, .link:link {
  color: #5447FF;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.tw-w.sm {
  width: 20rem;
}

.tw-w-md {
  width: 28rem;
}

.tw-w-lg {
  width: 32rem;
}

.tw-w-xl {
  width: 36rem;
}

.tw-w-2xl {
  width: 42rem;
}

.tw-w-3xl {
  width: 48rem;
}

.tw-w-4xl {
  width: 56rem;
}

@media (width >= 48rem) {
  .md\:tw-w.sm {
    width: 20rem;
  }
  .md\:tw-w-md {
    width: 28rem;
  }
  .md\:tw-w-lg {
    width: 32rem;
  }
  .md\:tw-w-xl {
    width: 36rem;
  }
  .md\:tw-w-2xl {
    width: 42rem;
  }
  .md\:tw-w-3xl{
    width: 48rem;
  }
  .md\:tw-w-4xl{
    width: 56rem;
  }
  .md\:tw-w-5xl{
    width: 64rem;
  }
  .md\:tw-w-6xl{
    width: 72rem;
  }
  .md\:tw-w-7xl{
    width: 80rem;
  }
}

@media (width >= 64rem) {
  .lg\:tw-w-3xl{
    width: 48rem;
  }
  .lg\:tw-w-4xl{
    width: 56rem;
  }
  .lg\:tw-w-5xl{
    width: 64rem;
  }
  .lg\:tw-w-6xl{
    width: 72rem;
  }
  .lg\:tw-w-7xl{
    width: 80rem;
  }
}

@media (width >= 80rem) {
  .xl\:tw-w-3xl{
    width: 48rem;
  }
  .xl\:tw-w-4xl{
    width: 56rem;
  }
  .xl\:tw-w-5xl{
    width: 64rem;
  }
  .xl\:tw-w-6xl{
    width: 72rem;
  }
  .xl\:tw-w-7xl{
    width: 80rem;
  }
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}

[data-theme=lymbio-light] {
    color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(96% 0.007 247.896);
  --color-base-300: oklch(86% 0.022 252.894);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: #5447FF;
  --color-primary-content: #eae8ff;
  --color-secondary: #FF00BB;
  --color-secondary-content: #ffffff;
  --color-accent: #00BAFF;
  --color-accent-content: #002e40;
  --color-neutral: oklch(27% 0.006 286.033);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(76% 0.14 231.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(69% 0.17 162.48);
  --color-success-content: oklch(0% 0 0);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(0% 0 0);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(0% 0 0);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1.0rem;
  --size-selector: 0.21875rem;
  --size-field: 0.21875rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

.border-base {
  border-color: var(--color-base-300);
  border-width: var(--border);
  border-radius: var(--radius-box);
  border-style: solid;
}

.tw-group:hover .group-hover\:bg-primary{
  --tw-bg-opacity: 1;
  background-color: var(--color-primary);
}

.tw-group:hover .group-hover\:text-primary-content{
  color: var(--color-primary-content);
}

.tw-group:hover .group-hover\:bg-base-100 {
  --tw-bg-opacity: 1;
  background-color: var(--color-base-100);
}

.tw-group:hover .group-hover\:bg-base-200 {
  --tw-bg-opacity: 1;
  background-color: var(--color-base-200);
}

.tw-group:hover .group-hover\:bg-base-300 {
  --tw-bg-opacity: 1;
  background-color: var(--color-base-300);
}

.tw-group:hover .group-hover\:tw-scale-105 {
  scale: 105%;
}

.tw-group:hover .group-hover\:tw-scale-110 {
  scale: 110%;
}

.tw-group:hover .group-hover\:tw-block {
  display: block;
}

.tw-group2:hover .group2-hover\:tw-block {
  display: block;
}

.tw-group2:hover .group2-hover\:tw-visible {
  visibility: visible;
}

.tw-group3:hover .group3-hover\:tw-block {
  display: block;
}

.tw-group3:hover .group3-hover\:tw-visible {
  visibility: visible;
}

.tw-group:hover .group-hover\:tw-hidden {
  display: none;
}

.tw-group:hover .group-hover\:tw-visible {
  visibility: visible;
}

.tw-overflow-x-clip {
  overflow-x: clip;
}

.tw-grow {
  flex-grow: 1;
}

.tw-shrink-0 {
  flex-shrink: 0;
}

.tw-shrink {
  flex-shrink: 1;
}

.scrollbar-sm {
  scrollbar-color: var(--color-base-200) var(--color-base-100);
  scrollbar-width: thin;
}

.tippy-box[data-theme~="primary"] {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-radius: var(--radius-field);
}

.tippy-box[data-theme~='primary'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--color-primary);
}
.tippy-box[data-theme~='primary'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--color-primary);
}
.tippy-box[data-theme~='primary'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--color-primary);
}
.tippy-box[data-theme~='primary'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--color-primary);
}

.sidebar-show-more {
  border: solid var(--color-base-300);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}

.stroke-base-300 {
  stroke: var(--color-base-300);
}

.bg-endless-blue {
  background: #88FFFF;
  background: linear-gradient(45deg, rgba(136, 255, 255, 1) 0%, rgba(0, 186, 255, 1) 50%, rgba(84, 71, 255, 1) 100%);
}

.bg-the-boom {
  background: #FF00BB;
  background: linear-gradient(45deg, rgba(255, 0, 187, 1) 0%, rgba(0, 186, 255, 1) 100%);
}

.bg-the-cosmopolitan {
  background: #FF00BB;
  background: linear-gradient(45deg, rgba(255, 0, 187, 1) 0%, rgba(136, 255, 255, 1) 100%);
}

.markdown ul {
  list-style-type: disc; 
  list-style-position: outside;
  padding-left: 32px;
}

.markdown ul > li::marker {
  color: var(--color-base-300);
}

.markdown ol > li::marker {
  font-weight: bold;
}

.markdown ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 32px;
}

.markdown a {
  color: var(--color-primary);
}

.markdown h1 {
  font-size: 1.5rem;
  font-weight: bold;
}

.markdown h2 {
  font-size: 1.25em;
  font-weight: bold;
}

.markdown h3 {
  font-size: 1.0em;
  font-weight: bold;
}

.markdown h4 {
  font-size: 1.0em;
}

.tw-w-unset{
  width: unset;
}

.drag-none {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

td, th {
  padding: unset;
}

.no-backdrop::backdrop {
  display: none;
}