:root {
  --background-color: #fbfffb;
  --border-shadow: #c4c4c4;
  --darker-green: rgb(131, 201, 134);
  --darkerer-green: rgb(113, 179, 116);
  --judges-color: rgb(255, 179, 0);
  --handlers-color: rgb(25, 118, 210);
  --handlers-color-darker: #3F51B5;
  --handlers-women-color: rgb(236, 64, 122);
  --purple: rgb(186, 104, 200);
}

.dn {
  display: none !important;
}

.hrKacristiky {
  max-width: 65%;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 50px;
}

.kacristikyWrapper {
  max-width: 1280px;
  /* background-color: var(--background-color); */
  margin: auto;
}

.mainHeader {
  color: var(--darkerer-green);
}

.nadpis {
  font-size: 55px;
  margin: auto;
  text-align: center;
  padding: 30px;
  font-weight: 600;
}

.basic-table {
  border-spacing: 0;
  width: 85%;
  margin: auto;
  table-layout: fixed;
  border-collapse: separate;
  min-width: 315px;
}

.basic-table th {
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center;
  color: white;
  border: 1px;
  background-color: #4fb854;
}

.basic-table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

.basic-table tr:first-child th:last-child {
border-top-right-radius: 6px;
}

.basic-table tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

.basic-table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

.basic-table td {
  border: 1px solid #ddd;
  padding: 7px;
  text-align: right;
}


/* .timeSegment {
  display: block;
}

.timeGeneral {
  display: block;
} */

.switchingButton {
  width: fit-content;
  padding: 15px;
  margin: auto;
  text-align: center;
}

.switchingButton button {
  margin: auto 5px auto 5px;
  width: 120px;
  height: 35px;
  border-radius: 15px;
  font-weight: bold;
  color: white;
}

.switchingButton button:hover {
  border: 2px solid rgb(175, 175, 175) !important;
}

button.switchingButtonSelected {
  border: 2px solid grey !important;
}

@media only screen and (max-width: 1050px) {
  .nadpis {
      font-size:50px;
  }

  .bar-graph-text {
    transform: rotateZ(-90deg);
    bottom: -30px !important;
    font-size: 11px;
    width: fit-content;
    text-align: center;
  }

  .bar-graph-row {
    height:20px !important;
  }

  .bar-graph-description {
    /* top: 45px !important; */
    font-size: 11px;
  }

  .hrKacristiky {
    margin-top: 70px;
    margin-bottom: 20px;
  }
}

.bar-graph {
  width: 100%;
  max-width: 800px;
  height: 150px;
  display: flex;
  justify-content: space-between;
  border:1px solid lightgray;
  margin: auto;
}

.bar-graph-column {
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}

.bar-graph-column div {
  width: 100%;
}

.bar-graph-text {
  position: absolute;
  bottom: -20px;
}

.bar-graph-row {
  height:30px;
}

.bar-graph-row div {
  height:100%;
  width: 100%;
}

.bar-graph-row-wrapper div {
  display:flex;
}

.bar-graph-row-wrapper {
  transform:rotateY(180deg);
}

.bar-graph-description {
  text-align: center;
  margin: auto;
}

.bar-graph-description>div:nth-child(2) {
  display: flex;
  justify-content: center;
  margin: auto;
}

.bar-graph-description>div:nth-child(2) div {
  width: fit-content;
  padding: 0px 10px 0px 10px;
}

/* test */

.bar-graph:hover ~ .bar-graph-row-wrapper {
  display: block;
}

.bar-graph-wrapper  {
  height: fit-content;
  position: relative;
  display: flex;
  align-items: end;
  padding-bottom: 20px;
}

.bar-graph-wrapper div {
  width: 100%;
}

.bar-graph-description {
  /* position: absolute; */
  /* width: 100%; */
  /* display: flex; */
  /* left: 50%; */
  /* transform:translateX(-50%); */
  top: 35px;
  max-width: min(800px, 100%);
}

.bar-graph-description div {
  padding-bottom: 5px;
}

.bar-graph-description-bar {
  display: flex;
}

.bar-graph-description-wrapper {
  padding-bottom:5px;
}

.reversed.bar-graph-description .bar-graph-description-bar, .reversed.bar-graph-description > div:nth-child(2) {
  flex-direction: row-reverse;
}

/* .bar-graph-column:hover + .bar-graph-description {
  display: block;
} */

/* testend */

/* general */
.generalTiles {
  text-align: center;
  color: white;
  display: grid;
  grid-template-columns: 450px 450px;
  row-gap: 20px;
  column-gap: 10px;
  width: fit-content;
  margin: auto;
}

.generalTiles > div {
  background-color: var(--darker-green);
  height: 200px;
  border-radius: 10px;
}

.generalTiles img {
  height: 100px;
}

.generalInfoWithImage {
  display: grid;
  grid-template-columns: auto auto;
}

.generalInfoHead {
  font-size: 43px;
  font-weight: 800;
  padding: 15px;
}
.generalInfoWithImage div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 38px;
  font-weight: 600;
}

@media only screen and (max-width: 1050px) {
  .generalInfoHead {
      font-size:35px;
  }

  .generalInfoWithImage div {
    font-size:28px;
    width: 100%;
  }

  .generalTiles > div {
    height: 180px;
  }

  .generalInfoWithImage {
    justify-items: center;
  }

  .generalTiles {
    grid-template-columns: minmax(300px, 400px);
    /*transform: scale(0.8);*/
  }

  .generalTiles img {
    height: 80px;
  }

  .bar-graph-wrapper {
    padding-bottom: 40px;
  }
}


/* judges */

.judgesHeader {
  color: var(--judges-color);
}

.flagdesc {
  opacity: 0;
  position: absolute;
  left: 50%;
  background-color: var(--judges-color);
  transform: translateX(-50%);
  border-radius: 4px;
  color: white;
  top: -25px;
  padding: 5px;
}

.flags {
  position: relative;
  display: inline-block;
  padding-right: 5px;
}

img:hover + .flagdesc {
  opacity: 1;
}

.flagsWrapper {
  max-width: 850px;
  margin: auto;
  text-align: center;
}

.subheader {
  margin: auto;
  text-align: center;
  padding: 50px 15px 50px 15px;
  font-size: 25px;
  font-weight: 500;
}

.judgesDetailTableBig {
  max-width: 1100px;
}

.judgesDetailTable th, .judgesDetailTableBig th {
  background-color: #FFB300;
}

.switchingButton.judges button {
  background-color: var(--judges-color);
  border: 2px solid var(--judges-color);
}

.judgesDetailTable, .judgesDetailTableBig {
  width: 100%;
}

.judgesTablesWrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 40px;
}

@media only screen and (max-width: 1050px) {
  .judgesTablesWrapper {
    grid-template-columns: auto;
  }

  .judgesDetailTable, .judgesDetailTableBig {
    max-width: max(85%, 560px);
    /* font-size:15px; */
    font-size: 11px;
    table-layout: initial;
  }

  .judgesDetailTable td:nth-child(1), .judgesDetailTable th:nth-child(1) {
    width: 40%;
  }

  .judgesDetailTable td:nth-child(2), .judgesDetailTable th:nth-child(2) {
    width: 20%;
  }

  .judgesSwitcher .subheader:not(.first) {
    padding: 50px 15px 0px 15px;
  }
}

.tableAboveHeader th {
  background-color: initial;
  padding-bottom: 0px;
}

.tableAboveHeader img {
  vertical-align: bottom;
}

/* handlers */

.handlersHeader {
  color: var(--handlers-color);
}

.switchingButton.handlers button {
  background-color: var(--handlers-color);
  border: 2px solid var(--handlers-color);
}

.handlersGeneral, .dogsGeneral {
  display: grid;
  /* grid-template-columns: min-content auto min-content; */
  grid-template-columns: 20% 60% 20%;
  align-items:center;
  padding-bottom: 50px;
}

.handlersGeneralTable th:nth-child(1) {
  background-color: var(--handlers-color);
}

.handlersGeneralTable th:nth-child(2) {
  background-image: repeating-linear-gradient(90deg, var(--handlers-color) 0%, var(--handlers-women-color) 101%);
}

.handlersGeneralTable th:nth-child(3) {
  background-color: var(--handlers-women-color);
}

.handlersGeneralTable {
  max-width: 800px;
}

/* .handlersDivided th:nth-child(3) {
  background-color: var(--handlers-color);
}

.handlersDivided th:nth-child(2) {
  background-image: repeating-linear-gradient(90deg, var(--handlers-color) 0%, var(--handlers-women-color) 200%);
}

.handlersDivided th:nth-child(3) {
  background-image: repeating-linear-gradient(90deg, var(--handlers-color) -100%, var(--handlers-women-color) 101%);
} */

.handlersDivided th {
  background-image: none !important;
  background-color: var(--handlers-color) !important;
}

.handlersGrid {
  display: grid;
  grid-template-columns: auto auto;
}

.handlersGeneralTable td {
  text-align: center;
}

.handlersGeneral div, .dogsGeneral div {
  height: fit-content;
}

.handlersGeneral div:first-child, .dogsGeneral div:first-child {
  text-align: right;
}

.boldUpperHeader {
  font-weight: 800;
  padding: 0px;
  padding-top: 60px;
}

.boldUpperHeader ~ .subheader {
  padding-top: 10px;
}

.handlers .subheader {
  padding-bottom: 20px;
}

.big-graph-zeny {
  background-color: var(--handlers-women-color);
}

.big-graph-muzi {
  background-color: var(--handlers-color-darker);
}

.bar-grap-outer-wrapper {
  margin: auto;
  text-align: center;
}

.bar-grap-outer-wrapper:not(.last) {
  margin-top: 100px;
}

.bar-grap-outer-wrapper h2 {
  padding-bottom:20px;
}

.bar-graph-description>div:nth-child(1) {
  font-weight: 800;
}

@media only screen and (max-width: 1050px) {
  .handlersGeneralTable {
    font-size: 11px;
  }

  .handlersGeneral {
    grid-template-columns: auto;
  }

  .handlersGeneral div:first-child, .handlersGeneral div:nth-child(3) {
    display:none;
  }

  .handlersGrid {
    grid-template-columns: auto;
  }

  .bar-grap-outer-wrapper {
    margin-top: 50px;
  }

  .boldUpperHeader {
    padding-top: 0px;
  }
}

/* dogs */

.dogsHeader {
  color: #EC407A;
}

.big-graph-psi {
  background-color: var(--handlers-color-darker);
}

.big-graph-feny {
  background-color: var(--handlers-women-color);
}

.switchingButton.dogs button {
  background-color: var(--handlers-women-color);
  border: 2px solid var(--handlers-women-color);
}

.dogsGeneralTable th:nth-child(1) {
  background-color: var(--handlers-color);
}

.dogsGeneralTable th:nth-child(2) {
  background-image: repeating-linear-gradient(90deg, var(--handlers-color) 0%, var(--handlers-women-color) 101%);
}

.dogsGeneralTable th:nth-child(3) {
  background-color: var(--handlers-women-color);
}

.dogsGeneralTable td {
  text-align: center;
}


.dogSummaryBreeds h3 {
  text-align: center;
}

.dogsDetailTable tr th {
  background-color: var(--handlers-women-color);
}

.breedsTablesContainer {
  display: grid;
  justify-content: center;
  margin: auto;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dogSummaryBreeds h3 {
  padding-bottom: 15px;
  padding-top: 30px;
}

.dogsDetailTable {
  max-width: 650px;
}

.dogSummaryBreeds {
  padding-bottom: 40px;
  box-shadow: 1px 1px 5px gray;
  padding: 25px;
  padding-bottom: 50px;
}

.breedsTablesContainer .dogsDetailTable {
  width: 100%;
  table-layout: initial;
  min-width: min(100%, 450px)
}

.breedsTablesContainer .dogsDetailTable td:nth-child(2), .dogsDetailTable td:nth-child(1) {
  text-align: center;
}

.shuffleButtonContainer {
  display: flex;
  /*border: 1px solid black;*/
  border-radius: 15px;
  width: fit-content;
  cursor: pointer;
  margin-left: 50px; /* redo */
  padding: 5px;
  background-color: var(--darker-green);
  margin:auto;
  margin-bottom:30px;
}

.shuffleButtonContainer .shuffleButton {
  padding: 2px 10px 2px 10px;
  border-radius: 10px;
}

.shuffleButtonActive {
  background-color: var(--background-color);
}

.dogsSwitcher  .shuffleButtonContainer {
  background-color: var(--handlers-women-color);
}

.dogsTablesHeader {
  margin: auto;
  text-align: center;
  font-size: 50px;
  font-weight: 600;
  color: var(--handlers-women-color);
}

.dogSummaryBreeds .shuffleButton:not(.shuffleButtonActive) {
  color: white;
}

@media only screen and (max-width: 1050px) {
  .dogsGeneralTable {
    font-size: 11px;
  }

  .dogsGeneral {
    grid-template-columns: auto;
  }

  .dogsGeneral > div:first-child, .dogsGeneral > div:nth-child(3) {
    display:none;
  }
  .dogsDetailTable {
    font-size: 11px;
  }

  .breedsTablesContainer {
    grid-template-columns: 1fr;
    gap: unset;
    justify-content: unset;
  }
  
  .dogSummaryBreeds {
    padding-bottom: 40px;
    box-shadow: 1px 1px 5px gray;
    padding: unset;
    padding-top: 25px;
    padding-bottom: 50px;
  }
}


/* in time */

.timeHeader {
  color: black;
}

.big-graph-A {
  background-color: #3f51b5;
}

.big-graph-J {
  background-color: #039be5;
}

.big-graph-ZkA {
  background-color: #ffca28;
}

.big-graph-DIS {
  background-color: #ff6161;
}

.big-graph-TB {
  background-color: #FFB266;
}

.big-graph-CLEAN {
  background-color: #00C361;
}

.lineGraph {
  margin: auto;
  display: block;
  border: 1px solid lightgrey;
  width: 100%;
  max-width: 780px;
  /* height: 300px; */
}

.line-graph-wrapper {
  padding-bottom: 40px;;  
}

.line-graph-wrapper-header {
  font-size: 25px;
}

.line-graph-wrapper {
  text-align: center;
}

.line-graph-wrapper h2 {
  padding-bottom: 20px;
}

.invisibleRect {
  opacity: 0;
}

.line-graph-months .invisibleRect:hover {
  opacity: 0.1;
}

#monthsDesc {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  max-width: 230px;
  align-content: center;
  /* padding: 10px; */
  margin: auto;
  height: 30px;
}