@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");

/* font-family: 'Manrope', sans-serif; */

/*
červená = #f74141
modrá = #006bff
zelená = #49ec4a
žlutá = #fffe00 + overlay
šedá = #424242
*/

:root {
  --red: #f74141;
  --blue: #006bff;
  --green: #49ec4a;
  --yellow: #fffe00;
  --gray: #424242;
}

html {
  font-family: "Manrope", sans-serif;
  background: url(pozadi_chl3.png);
  color: #ffffff;
  word-spacing: 0.5rem;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 99vh;
}

#hornipolovina,
#dolnipolovina {
  height: 0.5;
  display: flex;
}

#dolnipolovina {
  vertical-align: bottom;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  height: 98h;
  margin: auto;
}

#levytym,
#pravytym {
  width: 50%;
  border-radius: 1.25em 1.25em 0em 0em;
  position: relative;
}

#ltext,
#rtext {
  position: relative;
}

#lbg,
#rbg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  border-radius: 1.25em 1.25em 0em 0em;
}

#lbg {
  background-color: var(--red);
  mix-blend-mode: color;
}

#rbg {
  background-color: var(--blue);
  mix-blend-mode: color;
}

#tymA,
#tymB {
  text-align: center;
}

input {
  background: none;
  border-color: #ffffff;
  border-style: solid;
  border-width: 2.5px;
  caret-color: #ffffff;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

input:focus {
  border-color: #dad9d9;
  outline: none;
}

input::placeholder {
  color: #ffffff;
  opacity: 0.3;
}

button {
  background-color: #ff005a;
  color: #ffffff;
  border: none;
  font-family: "Manrope", sans-serif;
}

button:active {
  transform: scale(0.98);
}

#tymAname,
#tymBname {
  font-size: 1.75em;
  font-weight: 700;
  margin-top: 0.75em;
  text-align: center;
}

.buttons > button {
  width: 10em;
  border-radius: 0.75em;
  font-size: 1.25em;
  margin-top: 0em;
  margin-bottom: 0em;
  height: 4em;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  width: 20%;
  align-items: center;
}

.score > button {
  height: 2em;
  width: 5em;
  border-radius: 0.75em;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1em;
}

#scorehome,
#scorevisitor {
  font-size: 7em;
}

.score {
  text-align: center;
  width: 17.5%;
}

#periodbuttons > button {
  height: 2em;
  width: 5em;
  border-radius: 0.75em;
  margin-top: 1em;
  margin-bottom: 1em;
}

#timebox {
  text-align: center;
  width: 25%;
  display: grid;
  grid-template-columns: 1fr;
}

#timenadpis {
  font-size: 2.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

#caszadani > input {
  width: 80%;
  border-radius: 0.4em;
  font-size: 2.5em;
  height: 1.3em;
  text-align: center;
  margin-top: 0.75em;
}

#timedolni {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#casodpocet {
  font-size: 5em;
}

#currentperiod {
  font-size: 3em;
}

#periodnadpis {
  font-size: 2.5em;
  padding-top: 0.5em;
  padding-bottom: 0em;
}

.nums > input {
  font-size: 2.5em;
  width: 3em;
  border-radius: 1em;
  text-align: center;
}

.nums {
  display: flex;
  justify-content: space-evenly;
  margin-top: 1em;
}

.names > table {
  width: 80%;
  margin: auto;
  margin-top: 2em;
  margin-bottom: 1.5em;
  font-size: 1.5em;
  text-align: center;
  font-weight: 700;
}

.penalty {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.penalty > div {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.penalty > div > input {
  font-size: 2.5em;
  width: 6em;
  border-radius: 1em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

.modal {
  z-index: 2;
  display: none;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  position: fixed;
  color: #ffffff;
}

.modal-content {
  background-color: #37003c;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  height: 50%;
  border-radius: 5em;
  box-shadow: 0px 0px 33px 11px rgba(55, 0, 60, 0.73);
  border: none;
}

.modal-content > input {
  background: none;
  border-color: #ffffff;
  border-style: solid;
  border-width: 2.5px;
  caret-color: #ffffff85;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
}

.modal-content > table,
.modal-content > form > table {
  margin: auto;
  width: 80%;
  height: 80%;
  color: #ffffff;
  font-size: 1.5em;
}

input#cisloutkani {
  font-size: 1em;
  width: 18em;
  border-radius: 0.75em;
  text-align: center;
  height: 2em;
}

#tlacitkamodal > button {
  width: 7em;
  height: 2em;
  margin-top: 1em;
  font-size: 1em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
}

#tlacitkamodal {
  text-align: center;
}

#barvaA,
#barvaB,
#barvaA2,
#barvaB2 {
  font-size: 1em;
  width: 18em;
  border-radius: 0.75em;
  text-align: center;
  height: 2em;
  background: none;
  border-color: #ffffff;
  border-style: solid;
  border-width: 2.5px;
  caret-color: #ffffff85;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
}

option {
  background-color: #1a1f34;
  color: #ffffff;
}

#HR1,
#HR2,
#CR1,
#CR2 {
  font-size: 0.75em;
  width: 18em;
  border-radius: 0.75em;
  text-align: center;
  height: 1.5em;
}

#vymazat {
  width: 12rem;
  height: 4rem;
  font-size: 1.5rem;
  margin-top: 5rem;
  border-radius: 1rem;
}

#zaznam {
  width: 12rem;
  height: 4rem;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  border-radius: 1rem;
}

#fileUpload,
#fileUpload2 {
  font-size: 1.5rem;
  border: none;
  border-radius: 0.5rem;
}

#commercialbreak > table {
  margin-top: 2rem;
  font-size: 1.25rem;
  width: 90%;
}

#com1,
#com2,
#com3,
#com4 {
  background-color: #f74141;
  width: 3rem;
  height: 2rem;
}

#modalgolyc {
  height: 80%;
}

#zbut {
  width: 12rem;
  height: 4rem;
  font-size: 1.5rem;
  margin-top: 5rem;
  border-radius: 1rem;
}

#zaznamA,
#zaznamB {
  border: #ffffff 1px solid;
  width: 100%;
  border-collapse: collapse;
}

#zaznamA td,
#zaznamB td {
  border: #ffffff 1px solid;
  text-align: center;
}

#zaznamA tr:first-child,
#zaznamB tr:first-child {
  background-color: #ffffff;
  color: #1a1f34;
}

#zaznamA button#X,
#zaznamB button#X {
  background-color: #f74141;
  width: 100%;
  height: 3em;
}

#zaznamA button#S,
#zaznamB button#S {
  background-color: #168fff;
  width: 95%;
  height: 3em;
}

#askBut {
  width: 7em;
  height: 2em;
  margin-top: 1em;
  font-size: 1em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
}

#askDatac > table > tbody > tr#tlacitkamodal > td {
  width: 50%;
}

#askDatac > table {
  font-size: 2rem;
}

.penalty > div:nth-child(1) {
  position: relative;
}

.penalty > div > input[type="button"] {
  position: absolute;
  left: 3rem;
  background: none;
  font-size: 3.5rem;
  border: none;
  width: 4rem;
  height: 3.5rem;
  line-height: 3.5rem;
}

#zasobnikc {
  overflow: none;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(85, 85, 85, 0.733) fff;
}

#zasobnikc.modal-content {
  width: 90%;
  color: #ffffff;
  height: 75%;
}

form {
  display: inherit;
}

.modal-content > form > table td {
  padding-top: 1rem;
}

#modalzapas input[type="radio"] {
  position: absolute !important;
  visibility: hidden;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#modalzapas input[type="radio"]:checked + label {
  background-color: #ffffff;
  color: #1a1f34;
  font-weight: 700;
}

#modalzapas label {
  border-radius: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

#modalzapas label:hover {
  cursor: pointer;
  background-color: #ffffff85;
  color: #1a1f34;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media screen and (max-width: 1440px) {
  .penalty > div > input[type="button"] {
    left: -0.5rem;
  }
  #caszadani > input {
    font-size: 2em;
    height: 1.5em;
  }
  #casodpocet {
    font-size: 4.2em;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1750px) {
  .penalty > div > input[type="button"] {
    left: 0rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .penalty > div > input[type="button"] {
    left: 0rem;
  }
  .buttons > button {
    width: 9em;
    height: 3.3em;
    font-size: 1.1em;
  }

  #com1,
  #com2,
  #com3,
  #com4 {
    width: 2.7rem;
  }
  #commercialbreak > table {
    font-size: 1.1rem;
  }
  #timedolni {
    grid-template-columns: 1fr;
  }
  .penalty > div > input {
    margin-left: 0;
    margin-right: 0;
    width: 4.5em;
  }
}

@media screen and (max-width: 1880px) {
  .modal-content {
    width: 80%;
    height: 70%;
  }
}

/*
červená = #f74141
modrá = #168fff
zelená = #6cc644
žlutá = #C69027
šedá = #666666
*/