body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

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

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

@charset "UTF-8";
.App {
  text-align: center;
  font-size: calc(8px + 1vmin);
}

body,
.btn {
  font-size: calc(9px + 1vmin) !important;
}

body {
  background-image: url(/7e5d4ba7dd073660e355.jpg) !important;
  /* background-size: contain; */
  background-attachment: fixed;
  overflow-y: scroll;
}

/* small device */
@media (max-width: 767px) {
  .device-big {
    display: none !important;
  }
  .tab-pane {
    width: auto;
  }
  .my-pe-1 {
    padding-right: 0px !important;
  }
  .my-ps-1 {
    padding-left: 0px !important;
  }
  .my-px-1 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
  .my-px-3 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
}
/* big device */
@media only screen and (min-width: 768px) {
  .device-big,
  .tab-content > .custom-tab {
    display: block !important;
  }
  .device-small {
    display: none !important;
  }
  .tab-content {
    display: flex !important;
  }
  .tab-pane {
    width: inherit;
  }
  .my-pe-1 {
    padding-right: 0.25rem !important;
  }
  .my-ps-1 {
    padding-left: 0.25rem !important;
  }
  .my-px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  .my-px-3 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.tab-content {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.nav-tabs .nav-item .nav-link {
  background-color: #788b76;
  color: #fff;
}

.nav-tabs .nav-item .nav-link.active {
  font-weight: 700;
  color: #ffffff;
  background-color: #004603;
  border-color: #004603;
}

@media all and (min-width: 0) and (max-width: 567px) {
  body {
    background-size: cover;
    background-attachment: fixed;
  }
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(9px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.logLevelLabel {
  color: white;
  height: 2em;
  width: 5em;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 5px;
  margin-left: 5px;
}

.bg-light-gray {
  background-color: #ebebeb;
}

.logLevelLabel.undefined {
  background-color: #3c3c3c;
}

.logLevelLabel.off {
  background-color: black;
}

.logLevelLabel.error {
  background-color: maroon;
}

.logLevelLabel.warn {
  background-color: darkorange;
}

.logLevelLabel.info {
  background-color: darkblue;
}

.logLevelLabel.debug {
  background-color: darkgreen;
}

.logLevelLabel.trace {
  color: black;
  background-color: lightgray;
}

.logLevelLabel .logLabel {
  padding-top: 5px;
  text-align: center;
  display: block;
}

.treeNode {
  height: 3.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.treeNode::before {
  content: "└";
  font-size: 6em;
  position: relative;
  top: -0.3em;
}

.nodeName {
  height: 2em;
  margin-top: 1.4em;
  margin-left: 1em;
  text-align: left;
}

.title {
  text-align: center;
}

.font15 {
  font-size: calc(14px + 0.5vmin) !important;
}
.font14 {
  font-size: calc(11px + 0.4vmin) !important;
}
.font13 {
  font-size: calc(10px + 0.4vmin) !important;
}
.font12 {
  font-size: calc(9px + 0.4vmin) !important;
}
.font11 {
  font-size: calc(8px + 0.4vmin) !important;
}
.font10 {
  font-size: calc(7px + 0.45vmin) !important;
}

.text-left {
  text-align: left;
}

.my-input {
  width: 80px !important;
  text-align: center;
}

.centered-grid {
  display: grid;
  justify-content: center;
}

.inline-flex {
  display: inline-flex;
  justify-content: center;
}
.inline-grid {
  display: inline-grid;
}

.width-300 {
  width: 300px;
}

.select {
  border: solid rgb(138, 138, 138) 1px;
  border-radius: 5px;
  width: 100%;
}

.form-control {
  border-color: grey !important;
}

.react-select__menu-portal {
  z-index: 1000000;
}

.react-select__control {
  min-height: 30px !important;
}

.react-select__indicator {
  padding: 3px !important;
  width: 25px;
}

.react-select__value-container {
  padding: 2px 3px !important;
  padding-right: 0px !important;
}

@media (max-width: 767px) {
  .react-select__indicator {
    padding: 0px !important;
    width: 15px;
  }

  .react-select__value-container {
    padding: 2px 2px !important;
  }
}

.DayPickerInput {
  display: flex !important;
}

.input-label {
  position: relative;
  top: 23px;
  left: 5px;
  padding-left: 2px;
  padding-right: 2px;
  z-index: 10;
  text-align: left;
  background-color: white;
  width: max-content;
}

.navbar {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 5%;
  padding-right: 5%;
  /* border-bottom: 2px solid rgb(8, 70, 13); */
  background-color: #000000;
  box-shadow: 0 2px 2px -2px rgb(8, 70, 13);
  opacity: 0.8;
}

.navbar:hover {
  opacity: 1;
}
.navbar-light,
.navbar-brand,
.nav-link {
  /* color: white !important; */
}
.dropdown-toggle {
  color: white !important;
}

.navbar-toggler {
  background-color: rgba(166, 166, 166, 0.557) !important;
  margin: 0.25rem 0.75rem !important;
  padding: 0 0 !important;
}

.nav_bar,
.basic-navbar-nav {
  font-size: calc(9px + 1vmin) !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

.number-badge {
  background-color: rgb(255, 115, 0);
}

.badge {
  font-weight: 500 !important;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

@media only screen and (max-width: 600px) {
  .div-club {
    margin-top: -4px;
    margin-bottom: -3px;
  }
  .row {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

@media only screen and (min-width: 600px) {
  .div-club {
    margin-top: 1px;
    margin-bottom: 0px;
  }
}

.bg-black {
  background-color: black !important;
}

.btn-close {
  background-color: white !important;
}

.bg-dark-green {
  background-color: #063509 !important;
}

.bg-secondary-green {
  background-color: rgb(39, 41, 39) !important;
}

.btn-success {
  background-color: #157246 !important;
  border-color: #157246 !important;
  box-shadow: 1px 1px 2px rgba(0, 96, 5, 0.8);
}

.btn-warning {
  background-color: #52905b !important;
  border-color: #52905b !important;
  color: white !important;
  box-shadow: 1px 1px 2px rgba(0, 96, 5, 0.8);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-dark {
  background-color: #18441f !important;
  border-color: #2b7237 !important;
  box-shadow: 1px 1px 2px rgba(0, 96, 5, 0.8);
}

.btn-primary {
  background-color: #1a95c5 !important;
  border-color: #1a95c5 !important;
  box-shadow: 1px 1px 2px rgba(37, 89, 166, 0.8);
}

.bg-primary-green {
  background-color: #099fad !important;
}

.card-body {
  background-color: #ffffffe2 !important;
  /* padding: 0.2rem 0.2rem !important; */
}

.opacity-95 {
  --bs-bg-opacity: 0.95 !important;
}

.opacity-90 {
  --bs-bg-opacity: 0.9 !important;
}

.opacity-85 {
  --bs-bg-opacity: 0.85 !important;
}

.opacity-1 {
  --bs-bg-opacity: 0 !important;
}

.opacity-90a {
  opacity: 0.9 !important;
}

.no-opacity-hover:hover {
  --bs-bg-opacity: 1 !important;
  opacity: 1 !important;
}

.green-header,
.modal-header {
  background-image: url(/11b01ea8bb0ea18e81cc.jpg);
  /* background-size: contain; */
  /* background-repeat: no-repeat; */
  background-attachment: fixed;
  position: relative;
  display: flex;
  border-bottom: none !important;
}

@media all and (min-width: 0) and (max-width: 567px) {
  .modal-header,
  .green-header {
    background-size: auto;
  }
}

.green-header:before,
.modal-header:before {
  content: "";
  background-color: #063509c9 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 5px;
}

.border-radius-0,
.border-radius-0::before {
  border-radius: 0px;
  background-color: #0c1f0ec9 !important;
}

.btn-close,
.modal-title {
  z-index: 1;
  position: relative;
}

.z-index0 {
  z-index: 0;
}

.z-index1 {
  z-index: 1;
}

.live-time-header {
  transition: transform 2s ease, color 1s ease;
  color: #ffffff;
  display: inline-block;
}

.live-time-header.pop {
  transform: scale(1.35);
}

.live-time-header.green {
  color: #42b446;
}

.live-time-header.red {
  color: #a01d1d;
}

.bg-dark-dark {
  background-color: #001608;
}

.bg-light-green {
  background-color: #c4f091;
}

.modal.fade .modal-dialog {
  opacity: 0 !important;
}

.modal.fade.show .modal-dialog {
  opacity: 1 !important;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
}

.height-fit-content {
  height: fit-content;
  align-self: center
}