body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

@charset "UTF-8";
#kt_app_wrapper {
  margin-top: 40px !important;
}

.timer {
  width: 33px;
  height: 33px;
  border-radius: 5px;
  background-color: black;
  color: rgb(241, 219, 14);
  z-index: 106;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  flex-direction: column;
}
.timer #countdown {
  font-weight: 700;
  font-size: 0.7rem;
}

.table > thead {
  vertical-align: middle;
  text-align: center;
}

.auth-info h1 {
  font-size: 1.25rem;
}

.auth-info {
  position: absolute;
  max-width: 100%;
  background-color: #0b283a;
  padding: 40px 80px;
  border-radius: 4px 4px 0 0;
  justify-content: flex-start;
  align-content: flex-end;
  text-align: start;
  display: flex;
  bottom: 0;
  left: 0;
  align-items: center;
  padding: 10px 40px;
  justify-content: flex-start;
}

.auth-logo {
  position: absolute;
  top: 10%;
  left: 10%;
  border-radius: 5px;
  padding: 3px;
  filter: drop-shadow(5px 5px 5px #ffffff);
}

.form-box {
  background-color: white;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translate(0, -50%);
  padding: 40px;
  box-shadow: 1px 1px 69px -3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 1px 69px -3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 69px -3px rgba(0, 0, 0, 0.1);
}

.my-header {
  width: 100%;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}

.auth-logo-mobile {
  height: 13vw;
  max-height: 65px;
}

.auth-bg-mobile {
  height: 130px;
}

.badge-free {
  color: rgb(255, 255, 255);
  background-color: rgb(33, 123, 170);
}

.badge-standard {
  color: rgb(255, 255, 255);
  background-color: rgb(14, 185, 114);
}

.badge-pro {
  color: rgb(255, 255, 255);
  background-color: rgb(135, 13, 206);
}

td.new-data {
  position: relative;
}
td.new-data .badge {
  position: absolute;
  top: 10px;
  right: 0;
}

#plans .plan {
  position: relative;
}
#plans .plan.free {
  border: 1px solid rgba(33, 123, 170, 0);
}
#plans .plan.free.selected {
  border: 4px solid rgb(33, 123, 170);
}
#plans .plan.standard {
  border: 1px solid rgba(14, 185, 114, 0);
}
#plans .plan.standard:not(.selected):hover {
  border: 1px solid rgba(14, 185, 114, 0.5);
}
#plans .plan.standard.selected {
  border: 4px solid rgb(14, 185, 114);
}
#plans .plan.pro {
  border: 1px solid rgba(135, 13, 206, 0);
}
#plans .plan.pro:not(.selected):hover {
  border: 1px solid rgba(135, 13, 206, 0.5);
}
#plans .plan.pro.selected {
  border: 4px solid rgb(135, 13, 206);
}
#plans .plan .badge {
  position: absolute;
  top: -12px;
}

[aria-controls=select2-year_filter-container] {
  margin-right: 20px !important;
}

.highlighted-row {
  background-color: #217aaa !important;
  color: white !important;
  --bs-table-bg-type: none !important;
}

.comparison-group {
  border: 1px solid #e3e6f0;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background: #f8f9fa;
}

.table-striped > tbody > tr.highlighted-row > *,
.table-striped > tbody > tr.highlighted-row:nth-of-type(odd) > *,
.table-striped > tbody > tr.highlighted-row:nth-of-type(even) > * {
  --bs-table-color-type: inherit !important;
  --bs-table-bg-type: #217aaa !important;
  background-color: #217aaa !important;
  color: #fff !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

#comparison-view .highlighted-row {
  background-color: #217aaa !important;
  border-color: #ffeaa7 !important;
}

#comparison-view .table-striped > tbody > tr.highlighted-row > *,
#comparison-view .table-striped > tbody > tr.highlighted-row:nth-of-type(odd) > *,
#comparison-view .table-striped > tbody > tr.highlighted-row:nth-of-type(even) > * {
  --bs-table-color-type: inherit !important;
  --bs-table-bg-type: #217aaa !important;
  background-color: #217aaa !important;
}

.comparison-separator-row {
  background-color: #f8f9fa !important;
  border-top: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.comparison-separator-row td {
  padding: 10px 0 10px 75px !important;
  font-size: 1.2rem;
  font-weight: bold;
  color: #6c757d !important;
}

div.dataTables_scrollBody {
  border-left: none !important;
}

tr.altrow {
  background-color: rgba(163, 163, 163, 0.33);
}

th.altcol,
td.altcol {
  background-color: rgba(145, 216, 255, 0.08);
}

.nav-tabs .nav-item .nav-link {
  padding: 6px 25px;
}
.nav-tabs .nav-item .nav-link i {
  color: #d7d7d7;
  font-size: 1.7rem;
}
.nav-tabs .nav-item .nav-link.active i {
  color: #217baa;
  font-size: 1.7rem;
}

.table-container {
  overflow-x: auto;
}
.table-container table#horse-comparison-head th, .table-container table#horse-comparison th {
  min-width: 170px;
}
.table-container table#horse-comparison-head th .horse-typeahead,
.table-container table#horse-comparison-head th .twitter-typeahead, .table-container table#horse-comparison th .horse-typeahead,
.table-container table#horse-comparison th .twitter-typeahead {
  margin-left: 15px;
}
.table-container table#horse-comparison-head td, .table-container table#horse-comparison td {
  text-align: center;
  vertical-align: middle;
}
.table-container table#horse-comparison-head td:first-child, .table-container table#horse-comparison td:first-child {
  text-align: left;
}

#table-container-head {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 90px;
  top: 30px;
  z-index: 100;
  background-color: #fafafa;
  padding-right: 130px;
}
#table-container-head th {
  padding: 0 !important;
}
#table-container-head .twitter-typeahead {
  margin: 0 !important;
  color: #343434 !important;
}
#table-container-head .twitter-typeahead .form-control.form-control-solid {
  margin: 0 !important;
  color: #bbbbbb !important;
}

#table-wrapper,
#table-container-head {
  scrollbar-color: rgba(33, 123, 169, 0.3) transparent !important;
}

#table-wrapper::-webkit-scrollbar,
#table-container-head::-webkit-scrollbar {
  height: 5px !important;
}

#table-wrapper::-webkit-scrollbar-track,
#table-container-head::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

#table-wrapper::-webkit-scrollbar-thumb,
#table-container-head::-webkit-scrollbar-thumb {
  background: rgba(33, 123, 169, 0.5) !important;
  border-radius: 5px;
}

#table-wrapper::-webkit-scrollbar-thumb:hover,
#table-container-head::-webkit-scrollbar-thumb:hover {
  background: rgb(33, 123, 169) !important;
}

.toggle-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}
.toggle-container .vertical-toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.toggle-container .vertical-toggle-wrapper .vertical-toggle {
  position: relative;
  width: 48px;
  height: 120px;
  background: #e4e6ef;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #d1d3e0;
}
.toggle-container .vertical-toggle-wrapper .vertical-toggle .toggle-handle {
  position: absolute;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  top: 42px;
}
.toggle-container .vertical-toggle-wrapper .vertical-toggle.active-up {
  background: linear-gradient(to bottom, #90eeba 0%, #90eeba 50%, #e4e6ef 50%, #e4e6ef 100%);
  border-color: #50cd89;
}
.toggle-container .vertical-toggle-wrapper .vertical-toggle.active-up .toggle-handle {
  top: 10px;
  background: #50cd89;
  box-shadow: 0 2px 6px rgba(80, 205, 137, 0.3);
  width: 32px;
  height: 28px;
  border-radius: 5px;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.toggle-container .vertical-toggle-wrapper .vertical-toggle.active-down {
  background: linear-gradient(to bottom, #e4e6ef 0%, #e4e6ef 50%, #ff99b2 50%, #ff99b2 100%);
  border-color: #f1416c;
}
.toggle-container .vertical-toggle-wrapper .vertical-toggle.active-down .toggle-handle {
  top: 82px;
  background: #f1416c;
  box-shadow: 0 2px 6px rgba(241, 65, 108, 0.3);
  width: 32px;
  height: 28px;
  border-radius: 5px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.toggle-container .toggle-states {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: #b4b4b4;
  width: 50px;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  cursor: default;
}
.toggle-container .toggle-states #and-up.active {
  color: #3db673;
}
.toggle-container .toggle-states #and-down.active {
  color: #f1416c;
}
.toggle-container .status-display {
  padding: 12px 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: 600;
  color: #3f4254;
  min-width: 200px;
  text-align: center;
}
.toggle-container .status-value {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  margin-left: 8px;
}
.toggle-container.thin .vertical-toggle-wrapper .vertical-toggle {
  width: 8px;
  height: 52px;
}
.toggle-container.thin .vertical-toggle-wrapper .vertical-toggle .toggle-handle {
  width: 16px;
  height: 16px;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}
.toggle-container.thin .vertical-toggle-wrapper .vertical-toggle.active-up .toggle-handle {
  top: 0;
  background: #50cd89;
  width: 16px;
  height: 7px;
}
.toggle-container.thin .vertical-toggle-wrapper .vertical-toggle.active-down .toggle-handle {
  top: 100%;
  background: #f1416c;
  width: 16px;
  height: 7px;
}

.graph-horse-inputs .form-control {
  padding-left: 20px;
}

.graph-horse-input-wrapper {
  margin: 4px;
}

@media (min-width: 768px) {
  .graph-horse-inputs {
    height: 500px;
  }
}
@media (min-width: 521px) {
  #table-wrapper {
    height: auto;
    overflow-y: hidden;
  }
}
@media (max-width: 520px) {
  #table-container-head {
    visibility: hidden;
  }
}
@media (max-width: 1199px) {
  #table-container-head {
    top: 10px;
  }
}
.card.stat .card-body {
  overflow: hidden;
}

@media (min-width: 992px) {
  #kt_app_header {
    height: 0;
  }
}
.my-table-striped thead {
  font-weight: 600;
  border-bottom: 1px solid #b9b9b9;
}
.my-table-striped thead th {
  vertical-align: middle;
}
.my-table-striped tbody td:first-child {
  text-align: center;
}
.my-table-striped tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}
.my-table-striped.stat tr {
  position: relative;
}
.my-table-striped.stat tr td.action-btns {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}
.my-table-striped.stat tr td.action-btns i.action {
  color: #217aaa;
}
.my-table-striped.stat tr td.action-btns a {
  display: flex;
}
.my-table-striped.stat tr.selected {
  background-color: #217aaa !important;
  color: white !important;
}
.my-table-striped.stat tr.selected td.action-btns i.action {
  color: #ffffff;
}
.my-table-striped.stat tr.selected td.action-btns i.ki-filter {
  display: none !important;
}

input[type=radio].kifaviRadio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
input[type=radio].kifaviRadio + i {
  cursor: pointer;
  color: #babdbe;
}
input[type=radio].kifaviRadio:checked + i {
  color: #217aaa;
  font-weight: 800;
}

.table.stat td:not(:nth-child(3)),
.table.stat th:not(:nth-child(3)) {
  text-align: center;
}

.table.stat th:nth-child(3) {
  text-align: left !important;
}

h5.card-title {
  font-size: 1.4rem;
}

input#min-runs {
  border: 1px solid #dedede;
  border-radius: 4px;
  width: 68px;
  text-align: center;
  font-size: 1.2rem;
  padding: 3px 0;
}

input#horse {
  padding-left: 25px;
}

#horse-dropdown {
  position: absolute;
  z-index: 1;
  width: 95%;
}

.tt-menu {
  background-color: #f3f3f3;
  padding: 5px;
  border: 1px solid #dbdbdb;
  border-radius: 0 0 6px 6px;
  width: 100%;
}
.tt-menu .tt-suggestion.tt-selectable.tt-cursor, .tt-menu .tt-suggestion.tt-selectable:hover {
  background-color: #217aaa;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

input:focus::-webkit-input-placeholder {
  font-size: 0.9rem;
}

input:focus::-moz-placeholder {
  font-size: 0.9rem;
}

input:focus:-ms-input-placeholder {
  font-size: 0.9rem;
}

input:focus:-moz-placeholder {
  font-size: 0.9rem;
}

span.twitter-typeahead {
  width: 100%;
}

#filter-form {
  max-width: 460px;
}

.card {
  overflow: auto;
}

.table-container {
  position: relative;
  width: 100%;
  overflow: scroll;
  height: 60vh;
}
.table-container table.scrollable-x thead th {
  position: sticky;
  top: -1px;
  z-index: 2;
  background-color: #ffffff;
  vertical-align: middle;
}
.table-container table.scrollable-x thead th:first-child {
  left: -1px;
  z-index: 3;
}
.table-container table.scrollable-x tbody {
  overflow: scroll;
}
.table-container table.scrollable-x tr > :first-child {
  background-color: #fafafa;
  position: sticky;
  left: -1px;
  padding-left: 5px;
}
.table-container table.scrollable-x tr.hrow td:first-child {
  position: sticky;
  left: -1px;
  padding-left: 5px;
  background-color: rgb(255, 252, 183);
}
.table-container table.scrollable-x tr.altrow > :first-child {
  background-color: rgb(208, 208, 208);
  position: sticky;
  left: -1px;
  padding-left: 5px;
}
.table-container table.scrollable-x tr.altrow.hrow td:first-child {
  position: sticky;
  left: -1px;
  padding-left: 5px;
  background-color: rgb(255, 252, 183);
}
.table-container table.scrollable-x tr:last-child,
.table-container table.scrollable-x th:last-child,
.table-container table.scrollable-x td:last-child {
  padding-right: 5px;
}
.table-container table.scrollable-x#horse-comparison-head span.twitter-typeahead, .table-container table.scrollable-x#horse-comparison span.twitter-typeahead {
  width: 95%;
}
.table-container table.scrollable-x#horse-comparison-head .compare-icon, .table-container table.scrollable-x#horse-comparison .compare-icon {
  display: none;
  color: white;
}
.table-container table.scrollable-x#horse-comparison-head .compare-icon i, .table-container table.scrollable-x#horse-comparison .compare-icon i {
  font-size: 2rem;
}
.table-container table.scrollable-x#horse-comparison-head .compare-text, .table-container table.scrollable-x#horse-comparison .compare-text {
  display: flex;
}
.table-container table.scrollable-x#horse-comparison-head .compare-tooltip, .table-container table.scrollable-x#horse-comparison .compare-tooltip {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -200px;
  transition: all 500ms;
  padding: 5px 20px;
  color: white;
  background-color: #217aaa;
  width: 215px;
  height: 100%;
  text-align: left;
  align-items: center;
}
.table-container table.scrollable-x#horse-comparison-head .compare-tooltip.active, .table-container table.scrollable-x#horse-comparison .compare-tooltip.active {
  left: 0;
}
.table-container table.scrollable-x#horse-comparison-head .compare-tooltip.active i.ki-duotone.ki-right, .table-container table.scrollable-x#horse-comparison .compare-tooltip.active i.ki-duotone.ki-right {
  transform: rotate(180deg);
}
.table-container table.scrollable-x#horse-comparison-head .compare-tooltip i.ki-duotone.ki-right, .table-container table.scrollable-x#horse-comparison .compare-tooltip i.ki-duotone.ki-right {
  color: white;
  position: absolute;
  right: 0;
  transition: all 750ms;
  font-size: 1.3rem;
}
.table-container table.scrollable-x#horse-comparison-head .comp-table-row, .table-container table.scrollable-x#horse-comparison .comp-table-row {
  height: 60px !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc_disabled {
  cursor: pointer;
  position: sticky;
  padding-right: 26px;
  background-color: #ffffff;
}

div.dataTables_wrapper div.dataTables_processing {
  z-index: 2;
}

.apexcharts-title-text {
  font-weight: 600 !important;
  color: #121212 !important;
  font-size: 1.25rem !important;
}

#compare_horse_selector {
  position: absolute;
  top: 0px;
  right: 9px;
  width: 60%;
}

.card.myChart .chart-container-outer,
.card.myChart2 .chart-container-outer,
.card.myChart3 .chart-container-outer {
  overflow-x: scroll;
  padding-bottom: 50px;
  padding-top: 5px;
}

.card.myChart #legend-1 .wave .dot {
  background-color: #0000f0;
}
.card.myChart #legend-2 .wave .dot {
  background-color: #ffc90e;
}
.card.myChart #legend-3 .wave .dot {
  background-color: #ffb2b2;
}
.card.myChart #legend-4 .legend-color {
  background-color: #ff6384;
}
.card.myChart #legend-5 .legend-color {
  background-color: #000000;
}
.card.myChart #legend-6 .legend-color {
  background-color: #f7a01e;
}
.card.myChart .wave {
  width: 50px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.card.myChart .dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
}
.card.myChart .dot:nth-child(1) {
  left: 0;
  top: 8px;
}
.card.myChart .dot:nth-child(2) {
  left: 3px;
  top: 11px;
}
.card.myChart .dot:nth-child(3) {
  left: 6px;
  top: 13px;
}
.card.myChart .dot:nth-child(4) {
  left: 9px;
  top: 14px;
}
.card.myChart .dot:nth-child(5) {
  left: 12px;
  top: 13px;
}
.card.myChart .dot:nth-child(6) {
  left: 15px;
  top: 11px;
}
.card.myChart .dot:nth-child(7) {
  left: 18px;
  top: 8px;
}
.card.myChart .dot:nth-child(8) {
  left: 21px;
  top: 5px;
}
.card.myChart .dot:nth-child(9) {
  left: 24px;
  top: 3px;
}
.card.myChart .dot:nth-child(10) {
  left: 27px;
  top: 2px;
}
.card.myChart .dot:nth-child(11) {
  left: 30px;
  top: 3px;
}
.card.myChart .dot:nth-child(12) {
  left: 33px;
  top: 5px;
}
.card.myChart .dot:nth-child(13) {
  left: 36px;
  top: 8px;
}

.card.myChart2 #legend-1 .legend-color {
  border: 2px solid #0000f0;
}
.card.myChart2 #legend-2 .legend-color {
  background-color: #ffd956;
  border: 2px solid #ffc90e;
}
.card.myChart2 #legend-3 .legend-color {
  background-color: #e5e5e5;
  border: 2px solid #dcdcdc;
}

.card.myChart3 #legend-1 .legend-color {
  border: 2px solid #7f7ff7;
}
.card.myChart3 #legend-2 .legend-color {
  background-color: #ffd956;
  border: 2px solid #ffc90e;
}
.card.myChart3 #legend-3 .legend-color {
  background-color: #e5e5e5;
  border: 2px solid #dcdcdc;
}
.card.myChart3 #legend-4 .legend-color {
  background-color: #ffffff;
  border: 2px solid #ffb2b2;
}
.card.myChart3 #legend-5 .legend-color {
  background-color: #818181;
  border: 2px solid #4b4b4b;
}

#reset-filters {
  margin-right: -15px;
}

.chart-container {
  width: 100%;
  max-width: 100%;
  height: 580px;
}
.chart-container .chart-container-inner {
  height: 530px;
}

.legend-container {
  text-align: center;
  padding: 6px 17px;
  border-radius: 5px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 30px auto 5px;
}
.legend-container.light-bg {
  background-color: rgba(0, 0, 0, 0.02);
}
.legend-container .legend {
  display: inline-block;
}
.legend-container .legend:not(:last-child) {
  margin-right: 20px;
}
.legend-container .legend .legend-text {
  font-size: 0.9rem;
  line-height: 1.1rem;
  color: #595959;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  text-align: start;
}
.legend-container .legend .legend-color {
  width: 50px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}
.legend-container .legend .legend-color.thin {
  height: 35px;
  border-radius: 2px;
  width: 7px;
}

form.remove-favourite i {
  font-size: 1.5rem;
}

.favourites {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}
.favourites i {
  color: var(--bs-text-danger);
  font-size: 1.25rem;
}
.favourites.add i {
  color: rgb(211, 211, 211);
}
.favourites:hover i {
  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
}
.favourites .favourite-message {
  display: none;
  position: absolute;
  bottom: -15px;
  transform: translateX(-50%);
  font-size: 0.75rem;
}

.table.my-horses button {
  margin-bottom: 2px;
}

.new-data-badge {
  position: absolute;
  top: -12px;
  right: -10px;
}

.zoom-buttons {
  position: absolute;
  top: 90px;
  right: -25px;
}

.age-badge {
  background-color: #110016;
  color: #ffffff;
}

.age-badge-1 {
  background-color: #eaded7;
  color: #1f1f1f;
}

.age-badge-2 {
  background-color: #e4cba8;
  color: #1f1f1f;
}

.age-badge-3 {
  background-color: #fcd7ba;
  color: #1f1f1f;
}

.age-badge-4 {
  background-color: #ffd966;
  color: #1f1f1f;
}

.age-badge-5 {
  background-color: #ffffb2;
  color: #1f1f1f;
}

.age-badge-6 {
  background-color: #d9ff99;
  color: #1f1f1f;
}

.age-badge-7 {
  background-color: #aaff80;
  color: #1f1f1f;
}

.age-badge-8 {
  background-color: #73ff66;
  color: #1f1f1f;
}

.age-badge-9 {
  background-color: #47ff4d;
  color: #1f1f1f;
}

.age-badge-10 {
  background-color: #00ff59;
  color: #1f1f1f;
}

.age-badge-11 {
  background-color: #00ff8c;
  color: #1f1f1f;
}

.age-badge-12 {
  background-color: #00ffcc;
  color: #1f1f1f;
}

.age-badge-13 {
  background-color: #80ffe6;
  color: #1f1f1f;
}

.age-badge-14 {
  background-color: #99e6ff;
  color: #1f1f1f;
}

.age-badge-15 {
  background-color: #66b3ff;
  color: #ffffff;
}

.age-badge-16 {
  background-color: #3366ff;
  color: #ffffff;
}

.age-badge-17 {
  background-color: #0040ff;
  color: #ffffff;
}

.age-badge-18 {
  background-color: #4000ff;
  color: #ffffff;
}

.age-badge-19 {
  background-color: #8000ff;
  color: #ffffff;
}

.age-badge-20 {
  background-color: #bf00ff;
  color: #ffffff;
}

.age-badge-21 {
  background-color: #a926c8;
  color: #ffffff;
}

.age-badge-22 {
  background-color: #873196;
  color: #ffffff;
}

.age-badge-23 {
  background-color: #5e1f65;
  color: #ffffff;
}

.age-badge-24 {
  background-color: #351831;
  color: #ffffff;
}

.age-badge-25 {
  background-color: #29001d;
  color: #ffffff;
}

.color-badge {
  background: rgba(255, 255, 255, 0);
  color: #2c2c2c;
}

.color-badge-fekete {
  background: #0e0e0e;
  color: #999999;
}

.color-badge-pej,
.color-badge-zoldlabu-pej,
.color-badge-sg-pej,
.color-badge-p-pej,
.color-badge-t-pej,
.color-badge-tü-pej,
.color-badge-ppej,
.color-badge-tpej,
.color-badge-tüpej {
  background: #c0764b;
  color: #503220;
}

.color-badge-vilagospej,
.color-badge-vpej,
.color-badge-v-pej {
  background: #dba28a;
  color: #8d695a;
}

.color-badge-sotetpej,
.color-badge-spej,
.color-badge-s-pej {
  background: #5e4130;
  color: #bd896b;
}

.color-badge-gesztenyepej,
.color-badge-gpej,
.color-badge-g-pej {
  background: #a7461a;
  color: #af7f68;
}

.color-badge-fako,
.color-badge-ifako,
.color-badge-i-fako {
  background: #d0bb9c;
  color: #726b60;
}

.color-badge-szurke {
  background: #efefef;
  color: #a7a7a7;
}

.color-badge-sotetszurke,
.color-badge-sszurke,
.color-badge-s-szurke {
  background: #cccccc;
  color: #777777;
}

.color-badge-sarga,
.color-badge-bsarga,
.color-badge-b-sarga,
.color-badge-tsarga,
.color-badge-t-sarga,
.color-badge-tuzott-sarga {
  background: #aa6943;
  color: #583927;
}

.color-badge-vilagossarga,
.color-badge-v-sarga,
.color-badge-vsarga {
  background: #d38254;
  color: #966244;
}

.color-badge-sotetsarga,
.color-badge-s-sarga,
.color-badge-ssarga {
  background: #774a2f;
  color: #38251a;
}

.horse-description {
  font-size: 0.9rem;
  color: #222222;
  padding-left: 20px;
  border-left: 1px solid #dbdbdb;
}

.failure-report-button {
  width: 34px;
  height: 34px;
  overflow: hidden;
  flex-wrap: nowrap;
  text-wrap: nowrap;
  padding: 6px 6px 6px 7px !important;
  transition: all 300ms ease-in-out;
  align-items: center;
  background-color: lightgray;
  color: white;
}
.failure-report-button:hover {
  width: 130px;
  background-color: #ffc700;
}
.failure-report-button i {
  margin: 0;
  color: white;
  transition: all 300ms ease-in-out;
  font-size: 1.6rem;
}
.failure-report-button span {
  margin-left: 5px;
  color: white;
}

@media (max-width: 1500px) {
  .auth-logo {
    left: 7%;
  }
}
@media (max-width: 1390px) {
  .legend-container .legend {
    margin-bottom: 3px;
  }
}
@media (min-width: 992px) {
  .filters-container {
    border-right: 1px solid #eeeeee;
  }
}
@media (max-width: 767px) {
  .form-box {
    right: 50%;
    top: 140px;
    transform: translate(50%, 0);
    padding: 0;
    box-shadow: 1px 1px 69px -3px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 1px 1px 69px -3px rgba(0, 0, 0, 0);
    -moz-box-shadow: 1px 1px 69px -3px rgba(0, 0, 0, 0);
  }
  #compare_horse_selector {
    top: 40px;
    right: 9px;
    width: 80%;
  }
  #table-wrapper table#horse-comparison-head .comp-table-row td,
#table-wrapper table#horse-comparison .comp-table-row td {
    vertical-align: middle;
    text-align: center;
  }
  #table-wrapper table#horse-comparison-head .comp-table-row td:first-child,
#table-wrapper table#horse-comparison .comp-table-row td:first-child {
    text-align: left;
  }
  .chart-container {
    width: 1100px;
    max-width: 1100px;
    height: 550px;
  }
  .legend-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .legend-container .legend-text {
    max-width: 90%;
  }
}
@media (max-width: 620px) {
  .my-table-striped.stat tr {
    position: relative;
  }
  .my-table-striped.stat tr td.action-btns {
    display: flex;
    position: absolute;
    right: -150px;
    align-items: center;
    text-align: center;
    width: 80px !important;
    height: 100% !important;
    background-color: #217aaa !important;
    transition: all 500ms;
    gap: 20px;
    line-height: 2rem;
  }
  .my-table-striped.stat tr td.action-btns i.action {
    color: #ffffff;
  }
  .my-table-striped.stat tr.selected td.action-btns {
    background-color: white !important;
  }
  .my-table-striped.stat tr.selected td.action-btns i.action {
    color: #217aaa !important;
  }
  .my-table-striped.stat tr:hover td.action-btns {
    right: 0px;
  }
  .legend-container {
    text-align: start;
  }
  .legend-container .legend {
    display: block;
    margin-right: 0;
  }
  .legend-container .legend .legend-color.thin {
    margin: 0 28px 0 20px;
  }
  .zoom-buttons {
    top: 200px;
  }
}
@media (max-width: 600px) {
  table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc_disabled {
    padding-right: 10px;
    font-size: 0.95rem !important;
  }
  .table:not(.table-bordered) td,
.table:not(.table-bordered) th,
.table:not(.table-bordered) tr {
    font-size: 0.95rem;
  }
  .text-nowrap {
    white-space: normal !important;
  }
  html.compact-view .table > :not(caption) > * > * {
    padding: 0.2rem 0.5rem;
  }
}
@media (max-width: 575px) {
  .table.my-horses button {
    padding: 6px !important;
  }
}
@media (max-width: 520px) {
  .app-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .card .card-body {
    padding: 2rem 1.2rem;
  }
  .table-container table.compare-span tbody {
    font-size: 1.2rem;
  }
  .table-container table.scrollable-x tr > :first-child {
    width: 60px;
  }
  .table-container table#horse-comparison.scrollable-x tr > :first-child {
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .table-container table#horse-comparison.scrollable-x th:first-child {
    min-width: 60px;
    width: 60px;
  }
  .table-container table#horse-comparison.scrollable-x th .horse-typeahead,
.table-container table#horse-comparison.scrollable-x th .twitter-typeahead {
    margin-left: 10px;
  }
  .table-container table#horse-comparison.scrollable-x .form-control {
    font-size: 1rem;
  }
  .table-container table#horse-comparison.scrollable-x .compare-icon,
.table-container table#horse-comparison.scrollable-x .compare-tooltip {
    display: flex;
  }
  .table-container table#horse-comparison.scrollable-x .compare-text {
    display: none;
  }
}
@media (max-width: 420px) {
  .my-header {
    padding-left: 10px;
  }
  .auth-bg-mobile {
    height: 100px;
  }
  .app-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .card .card-body,
.card .card-footer {
    padding: 2rem 1rem;
  }
  table.compare-span tbody {
    font-size: 1rem;
  }
  .card .card-footer {
    font-size: 1.25rem;
  }
  .table#data-table-5 > :not(caption) > * > *,
.table#data-table-8 > :not(caption) > * > * {
    padding: 0.75rem 0.2rem;
  }
}
@media (max-width: 400px) {
  table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc_disabled {
    padding-right: 5px;
    font-size: 0.8rem !important;
  }
  .table:not(.table-bordered) td,
.table:not(.table-bordered) th,
.table:not(.table-bordered) tr {
    font-size: 0.8rem;
  }
  html.compact-view .table > :not(caption) > * > * {
    padding: 0.2rem 0.5rem;
  }
}
/* HORSE */
#horse_info td {
  text-align: right;
}

#horses .hidden {
  display: none;
}
#horses .faded {
  color: #bbbbbb !important;
  font-weight: normal;
}
#horses .highlighted {
  font-weight: bold !important;
}
#horses th {
  text-align: right;
}
#horses td {
  text-align: right;
}
#horses .altrow {
  background-color: #f8f8f8;
}
#horses .hrow {
  background-color: rgb(255, 252, 183);
}
#horses .info-val {
  font-weight: bold;
}
#horses .twitter-typeahead {
  width: 100%;
}
#horses .horse_typeahead {
  padding-left: 28px;
}
#horses .card {
  margin-bottom: 24px;
}

/* ERRORS */
.err-unk {
  color: red !important;
}

.err-tme {
  color: blue !important;
}

.err-dpl {
  color: orange !important;
}

.err-flt {
  color: gray !important;
}

.err-inv {
  color: magenta !important;
}

.err-unk-bg {
  background: red !important;
  color: white !important;
}

.err-tme-bg {
  background: blue !important;
  color: white !important;
}

.err-dpl-bg {
  background: orange !important;
}

.err-flt-bg {
  background: gray !important;
  color: white !important;
}

.err-inv-bg {
  background: magenta !important;
  color: white !important;
}

/*!
 * Cropper.js v1.6.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2023-09-17T03:44:17.565Z
 */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.cropper-container img {
  backface-visibility: hidden;
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.3333333333%;
  left: 0;
  top: 33.3333333333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.3333333333%;
  top: 0;
  width: 33.3333333333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.upload-image-container {
  width: 200px;
  height: 200px;
  position: relative;
}
.upload-image-container label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: solid 1px rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s;
}
.upload-image-container input {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.upload-image-container img {
  width: 100%;
  height: 100%;
  border: solid 1px rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}
.upload-image-container:hover label {
  opacity: 1;
}

.card #horse_info {
  color: black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

.profile-cards-container .card {
  margin-bottom: 1.25rem !important;
}
.profile-cards-container .card .card-body {
  padding: 2.25rem !important;
}
.profile-cards-container .card .card-body .row {
  margin-bottom: 1.75rem !important;
}

html.compact-view .table > :not(caption) > * > * {
  padding: 0.2rem 0.75rem;
}
html.compact-view .table > :not(caption) > * > * {
  padding: 0.25rem 0.75rem;
}
html.compact-view .table.gy-5 th,
html.compact-view .table.gy-5 td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
html.compact-view .card.myChart .chart-container-outer,
html.compact-view .card.myChart2 .chart-container-outer,
html.compact-view .card.myChart3 .chart-container-outer {
  padding-bottom: 0px;
}
html.compact-view .table-container {
  height: auto;
}
html.compact-view .table-container table.scrollable-x#horse-comparison-head .comp-table-row,
html.compact-view .table-container table.scrollable-x#horse-comparison .comp-table-row {
  height: auto !important;
}
html.compact-view .table-container {
  height: auto;
}
html.compact-view .table .symbol > img {
  width: 30px;
  height: 30px;
}
html.compact-view .profile-cards-container .card {
  margin-bottom: 1.25rem !important;
}
html.compact-view .profile-cards-container .card .card-body {
  padding-bottom: 1rem !important;
}
html.compact-view .profile-cards-container .card .card-body .row {
  margin-bottom: 0.2rem !important;
}
html.compact-view .card .card-header {
  min-height: 50px;
}
@media (max-width: 767px) {
  html.compact-view .table-container {
    height: 70vh;
  }
}
@media (min-width: 1200px) {
  html.compact-view .profile-cards-container .card {
    margin-bottom: 1.5rem !important;
  }
}

.extra-tooltip {
  display: none;
}

html.extra-tooltips .extra-tooltip {
  display: flex;
  justify-content: center;
  align-items: center;
}
html.extra-tooltips .tooltip-inner {
  max-width: 330px !important;
}

@media (max-width: 768px) {
  html.extra-tooltips .tooltip-inner {
    max-width: 80% !important;
  }
}
html[data-bs-theme=dark] .table thead,
html[data-bs-theme=dark] #horses .altrow {
  background: #494949;
}
html[data-bs-theme=dark] .table-container table.scrollable-x thead th,
html[data-bs-theme=dark] .table-container table.scrollable-x tr > :first-child {
  background-color: #595959;
  color: #c1c1c1;
}
html[data-bs-theme=dark] .card #horse_info,
html[data-bs-theme=dark] .table thead .text-muted,
html[data-bs-theme=dark] tbody {
  color: #c1c1c1;
}
html[data-bs-theme=dark] .my-table-striped tbody tr:nth-child(even) {
  background-color: #333333;
}
html[data-bs-theme=dark] table.dataTable thead > tr > th.sorting,
html[data-bs-theme=dark] table.dataTable thead > tr > th.sorting_asc,
html[data-bs-theme=dark] table.dataTable thead > tr > th.sorting_desc,
html[data-bs-theme=dark] table.dataTable thead > tr > th.sorting_asc_disabled,
html[data-bs-theme=dark] table.dataTable thead > tr > th.sorting_desc_disabled,
html[data-bs-theme=dark] table.dataTable thead > tr > td.sorting,
html[data-bs-theme=dark] table.dataTable thead > tr > td.sorting_asc,
html[data-bs-theme=dark] table.dataTable thead > tr > td.sorting_desc,
html[data-bs-theme=dark] table.dataTable thead > tr > td.sorting_asc_disabled,
html[data-bs-theme=dark] table.dataTable thead > tr > td.sorting_desc_disabled {
  background-color: #1c1c1c;
}
html[data-bs-theme=dark] .horse-description {
  color: #c1c1c1;
  border-left: 1px solid #3d3d3d;
}
html[data-bs-theme=dark] p.for-sale {
  background-color: #493838;
  border: 1px solid #935b5b;
}
html[data-bs-theme=dark] .btn.btn-warning {
  color: black !important;
}
html[data-bs-theme=dark] .btn.btn-warning i {
  color: black !important;
}
html[data-bs-theme=dark] .btn.btn-warning:hover {
  color: white !important;
}
html[data-bs-theme=dark] .btn.btn-warning:hover i {
  color: white !important;
}

.delete-image,
.delete-video {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: white;
  padding: 8px;
  font-size: 1.2rem !important;
  border-radius: 50%;
  z-index: 1;
}
.delete-image.active,
.delete-video.active {
  color: white;
  background-color: red;
}

.delete-video {
  bottom: 12px;
  right: 6px;
}

.zoom-video {
  position: absolute;
  top: 12px;
  right: 6px;
  background-color: blue;
  color: white;
  padding: 8px;
  font-size: 1.2rem !important;
  border-radius: 50%;
  z-index: 1;
}
.zoom-video.active {
  color: blue;
  background-color: white;
}

.video-container {
  height: -moz-fit-content;
  height: fit-content;
  transition: all 250ms;
}
.video-container.active {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.video-player {
  border: 2px solid #ffffff;
  border-radius: 5px;
}

img.for-sale-tape {
  width: 120px;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
}

.sale-details {
  display: none;
}
.sale-details.active {
  display: flex;
  flex-direction: column;
}
.sale-details.active .input-wrapper {
  display: none;
}
.sale-details.active .input-wrapper.active {
  display: flex;
}

p.for-sale {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ff8c8c;
  background-color: #fdbaba;
}

.fa-tag {
  font-size: 1.2rem;
  color: rgb(253, 244, 118) !important;
  text-shadow: -1px 1px rgb(255, 103, 103);
  font-size: 1.7rem !important;
}
.fa-tag.abs {
  position: absolute;
  top: -2px;
  right: -11px;
  font-size: 1.2rem !important;
}

.badge-danger {
  background-color: var(--bs-danger);
  color: var(--bs-danger-inverse);
}

.status-badge-1 {
  background-color: #ffee00;
  color: #292929;
}

.status-badge-2 {
  background-color: #d1f5d9;
  color: #a9dfb5;
  border: 1px solid #a9dfb5;
}

.status-badge-3 {
  background-color: #1485ee;
  color: #ebebeb;
}

.status-badge-4 {
  background-color: #ecb8b8;
  color: #e95f5f;
  border: 1px solid #e95f5f;
}

.status-badge-5 {
  background-color: #d9edff;
  color: #64a5e1;
  border: 1px solid #a3c5e5;
}

.status-badge-6 {
  background-color: #ac0c0c;
  color: #ebebeb;
}

.status-badge-7 {
  background-color: #67c03b;
  color: #ebebeb;
}

.request-status-badge-1 {
  background-color: #ffee00;
  color: #292929;
}

.request-status-badge-2 {
  background-color: #1485ee;
  color: #ebebeb;
}

.request-status-badge-3 {
  background-color: #ecb8b8;
  color: #e95f5f;
  border: 1px solid #e95f5f;
}

.request-status-badge-4 {
  background-color: #d9edff;
  color: #64a5e1;
  border: 1px solid #a3c5e5;
}

.request-status-badge-5 {
  background-color: #d9edff;
  color: #64a5e1;
  border: 1px solid #e95f5f;
}

.request-status-badge-6 {
  background-color: #d1f5d9;
  color: #a9dfb5;
  border: 1px solid #a9dfb5;
}

.request-status-badge-7 {
  background-color: #67c03b;
  color: #ebebeb;
}

.request-status-badge-8 {
  background-color: #ac0c0c;
  color: #ebebeb;
}

.js-cookie-consent.cookie-consent {
  position: fixed;
  min-width: 330px;
  background-color: #f99446;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px 8px 0 0;
  padding: 15px 0;
}
.js-cookie-consent.cookie-consent .cookie-consent__message {
  color: white;
}

.video-thumbnails {
  display: flex;
  overflow: auto;
  cursor: grab;
}
.video-thumbnails .video-thumbnail .video-thumbnail-inner {
  width: 175px;
  height: 85px;
  background-color: #373737;
  border-radius: 5px;
}
.video-thumbnails .video-thumbnail .video-thumbnail-inner img {
  position: absolute;
  top: 5px;
  right: 2px;
  height: 14px;
}
.video-thumbnails .video-thumbnail .video-thumbnail-inner .video-title {
  color: #fff;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-style: italic;
  font-family: "Exo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
}
.video-thumbnails .video-thumbnail .video-thumbnail-inner .video-number {
  color: #fff;
  font-size: 4.2rem;
  font-style: normal;
  font-family: "Exo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  position: absolute;
  left: 4px;
  top: 4px;
  line-height: 4.2rem;
}
.video-thumbnails .video-thumbnail .video-thumbnail-inner .video-duration {
  position: absolute;
  font-size: 0.9rem;
  color: #fff;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
}
.video-thumbnails .video-thumbnail:not(:last-of-type) {
  padding: 0 5px 0 0;
}

i.load-video {
  font-size: 2rem;
  color: #ffffff;
  background-color: #217baa;
  transition: all 200ms ease-in-out;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-clip: padding-box;
  cursor: pointer;
}
i.load-video:hover {
  font-size: 3rem;
}
i.load-video.lg {
  padding: 3px;
  font-size: 6rem;
}
i.load-video.lg:hover {
  font-size: 8rem;
}

#kt_app_sidebar .menu-item .menu-link {
  padding: 0.2rem 1rem;
  color: #DBDFE9 !important;
}

#kt_app_sidebar .menu-item .menu-link:hover {
  padding: 0.2rem 1rem;
  color: var(--bs-primary-inverse);
}

#video-title-container {
  display: none;
}

#language-form button.langButton {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  margin: 3px;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
}
#language-form button.langButton:hover {
  background-color: aliceblue;
}

#language-form-login {
  position: absolute;
  top: 10px;
  right: 10px;
}
#language-form-login button.langButton {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  margin: 3px;
  padding: 5px;
  border-radius: 5px;
}
#language-form-login button.langButton:hover {
  background-color: aliceblue;
}
#language-form-login button.langButton:hover img {
  filter: grayscale(0);
}
#language-form-login button.langButton img {
  filter: grayscale(0.6);
  border: 4px solid rgba(0, 0, 0, 0);
  box-sizing: content-box;
}
#language-form-login button.langButton img.active {
  border: 4px solid #217baa;
  filter: none;
}

@media (max-width: 767px) {
  #language-form-login {
    top: -25px;
    right: 0px;
  }
}
@media (min-width: 1200px) {
  .profile-cards-container .card {
    margin-bottom: 2.5rem !important;
  }
}
@media (max-width: 767px) {
  .upload-image-container {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .cropper-modal > div {
    height: 98vh;
  }
}
@media (max-width: 767px) {
  .myChart3[data-labels="1"] .chart-container,
.myChart3[data-labels="2"] .chart-container,
.myChart3[data-labels="3"] .chart-container,
.myChart3[data-labels="4"] .chart-container,
.myChart3[data-labels="5"] .chart-container,
.myChart3[data-labels="6"] .chart-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 400px) {
  .myChart3[data-labels="3"] .chart-container {
    width: 400px !important;
    max-width: 400px !important;
  }
}
@media (max-width: 500px) {
  .myChart3[data-labels="4"] .chart-container {
    width: 500px !important;
    max-width: 500px !important;
  }
}
@media (max-width: 600px) {
  .myChart3[data-labels="5"] .chart-container {
    width: 600px !important;
    max-width: 600px !important;
  }
}
@media (max-width: 700px) {
  .myChart3[data-labels="6"] .chart-container {
    width: 700px !important;
    max-width: 700px !important;
  }
}
@media (max-width: 800px) {
  .myChart3[data-labels="7"] .chart-container {
    width: 800px !important;
    max-width: 800px !important;
  }
}
@media (max-width: 900px) {
  .myChart3[data-labels="8"] .chart-container {
    width: 900px !important;
    max-width: 900px !important;
  }
}
@media (max-width: 1000px) {
  .myChart3[data-labels="9"] .chart-container {
    width: 1000px !important;
    max-width: 1000px !important;
  }
}
@media (max-width: 1000px) {
  .myChart3[data-labels="10"] .chart-container {
    width: 1100px !important;
    max-width: 1100px !important;
  }
}
@media (max-width: 1200px) {
  .myChart3[data-labels="11"] .chart-container {
    width: 1200px !important;
    max-width: 1200px !important;
  }
}
@media (max-width: 1200px) {
  .myChart3[data-labels="12"] .chart-container {
    width: 1200px !important;
    max-width: 1200px !important;
  }
}
@media (max-width: 1300px) {
  .myChart3[data-labels="13"] .chart-container {
    width: 1300px !important;
    max-width: 1300px !important;
  }
}
@media (max-width: 1400px) {
  .myChart3[data-labels="14"] .chart-container {
    width: 1400px !important;
    max-width: 1400px !important;
  }
}
@media (max-width: 1500px) {
  .myChart3[data-labels="15"] .chart-container {
    width: 1600px !important;
    max-width: 1600px !important;
  }
}
.myChart3[data-labels="16"] .chart-container {
  width: 1700px !important;
  max-width: 1700px !important;
}

.myChart3[data-labels="17"] .chart-container {
  width: 1700px !important;
  max-width: 1700px !important;
}

.myChart3[data-labels="18"] .chart-container {
  width: 1800px !important;
  max-width: 1800px !important;
}

.myChart3[data-labels="19"] .chart-container {
  width: 1900px !important;
  max-width: 1900px !important;
}