body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
  background-color: white;
  transition: background-color 0.2s ease;
}


html.theme-dark body {
    background-color: #0c1824;
}

html.theme-light body {
    background-color: white;
}

html.theme-dark #myTable {
    background-color: #0c1824;
}

html.theme-light #myTable {
    background-color: rgba(255, 255, 255, 0.9);
}

#myTable {
  background-color: rgba(255, 255, 255, 0.9);
  transition: background-color 0.2s ease;
    max-width: 650px;
  width: 100%;
  margin: 10px auto;
border-radius: 10px;
  min-height: 1000px;
}


.tit {
  font-size: 75pt;
  font-weight: 200; /* UltraLight equivalent */
  color: #009cff;
  -webkit-font-smoothing: antialiased;
}

.text {
  font-size: 12pt;
  font-weight: 200;
  color: #9c9b9b;
  line-height: 115%;
}

.textRed {
  font-size: 12pt;
  font-weight: 400;
  color: #f01717;
  line-height: 115%;
}

.textSmall {
  font-size: 9pt;
  font-weight: 300;
  color: #9c9b9b;
  line-height: 100%;
}

.blue {
  font-size: 12pt;
  font-weight: 300;
  color: #009cff;
}

.podtitul {
  font-size: 15pt;
  font-weight: 500;
  color: #009cff;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  margin: 1px;
  padding: 4px;
  line-height: 20px;
}

.podtitul.selected {
  background-color: #0094ff;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px;
  margin: 1px;
}
/* Color variants for specific menus */
.podtitul.selected-orange  { background-color: #ff9500;}
.podtitul.selected-green   { background-color: #4ece97; }
.podtitul.selected-purple  { background-color: #b894de; }
.podtitul.selected-red     { background-color: #f65c28; }

.podtitul[data-color="orange"]:hover { border: 1px solid #ff9500; color: #ff9500;}
.podtitul[data-color="green"]:hover  { border: 1px solid #4ece97; color: #4ece97;}
.podtitul[data-color="purple"]:hover { border: 1px solid #b894de; color: #b894de;}
.podtitul[data-color="red"]:hover    { border: 1px solid #f65c28;  color: #f65c28;}

.podtitul.selected[data-color]:hover {
    color: #ffffff;
}

.podtitul:hover {
    border: 1px solid #0094ff;
    padding: 4px;
    border-radius: 5px;
    margin: 1px;
}


.podtitulOrange {
    font-weight: 200;
  font-size: 14pt; /* Use whole numbers for font sizes */
  color: #ff9500;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  margin: 1px;
  padding: 2px;
  line-height: 1.5; /* Adjust line height as needed */
}

.podtitulOrange:hover {
    border: 1px solid #ff9500; /* Change border properties as needed */
    padding: 2px; /* Change padding as needed */
    border-radius: 5px;
    margin: 1px;
}
.podtitulOrange.selected {
border-color: #ff9500;
background-color:  #ffe2b5;
color:#ffffff;
}

.smallBold {
  font-size: 9pt;
  font-weight: 400;
  color: #9c9b9b;
  line-height: 100%;
  margin-top: -1px;
}

.podtitulMensi {
  font-size: 10pt;
  font-weight: 300;
  color: #9c9b9b;
}

.small {
  font-size: 12pt;
  font-weight: 200;
  color: #9c9b9b;
  line-height: 125%;
}

.smallBlue {
  font-size: 12pt;
  font-weight: 300;
  color: #009cff;
  line-height: 125%;
}

/* LINKS */
a {
  font-size: 12pt;
  font-weight: 300;
  color: #9c9b9b;
  text-decoration: none;
}

a:hover {
  color: #009cff;
  text-decoration: underline;
}

/* QUOTES */
.citatTit {
  font-size: 17pt;
  font-weight: 300;
  font-style: italic;
  color: #9c9b9b;
}

.citat {
  font-size: 13pt;
  font-weight: 300;
  font-style: italic;
  color: #9c9b9b;
}

.citatPodpis {
  font-size: 8pt;
  font-weight: 300;
  font-style: italic;
  color: #9c9b9b;
}

/* OTHER TEXT TYPES */
.bodky {
  font-size: 8pt;
  font-weight: 300;
  color: #9c9b9b;
}

.rating {
  font-size: 11pt;
  font-weight: 300;
  color: #9c9b9b;
  line-height: 80%;
}

.red {
  font-size: 10pt;
  font-weight: 300;
  color: #f86767;
  line-height: 100%;
}

.rmr {
  font-size: 10pt;
  font-weight: 300;
  color: #9c9b9b;
}

.alert {
  font-size: 12pt;
  font-weight: 400;
  color: #f32b2b;
}

.up-arrow {
    color: #009cff;
  }

  .down-arrow {
    color: red;
  }

.iframe1 {
    display:block;
    width: 140px;
    height: 20px;
    margin: 0 auto;
}

.iframe2 {
    display:block;
    width: 195px;
    height: 18px;
    margin: 0 auto;
}

#newsFeed {
  position: fixed;
  bottom: 0px;
  z-index: 99;
  border: none;
  outline: none;
  cursor: pointer;
  display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}

/*   .background-transition {
transition: background-color 1s ease-in-out;
} */

.ratings {
    position: relative;
    top: -10px;
    left: 10px;
      font-weight: 300;
   font-size:9pt; color:#9c9b9b; line-height: 5%;
    display:block;
  width: 140px;
  height: 20px;
  margin: 0 auto;
  }

  .iframe-container {
  width: 400px;
  height: 600px;
  overflow: hidden;
}
.webNews {
  width: 100%;
  height: 100%;
  border: 0;
/*   overflow: hidden;
  scrollbar-width: none;  */
}
/*
.webNews::-webkit-scrollbar {
  display: none;
}
*/
.loginWeb {
  width: 100%;
  height: 100%;
  border: 0;
}

.solid-line {
border-bottom: 2px solid #9c9b9b; /* Adjust the thickness and color as needed */
width: 100%; /* Adjust the width as needed */
margin-top: 3px; 
margin-bottom: 3px; 
}

hr {
border: none;
border-bottom: 1px dotted #9c9b9b;

/* color: #fff;
background-color: #fff;*/
height: 5px;
width: 100%;
}

body {
  margin-top: 0;
  padding-top: 0;
  background-color: #080f25; 
  transition: background-color 0.3s ease-in-out;
}

.switch-label {
  display: inline-block;
  margin-right: 8px;
  font-size: 10pt;
  font-weight: 300;
  color: #009cff;
}

.switch {
position: relative;
display: inline-block;
width: 40px; /* Adjust the width as desired */
height: 24px; /* Adjust the height as desired */
border-radius: 20px; /* Make it rounded */
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cdcdcd; /* Grey when off */
-webkit-transition: .4s;
transition: .4s;
border-radius: 11px; /* Make it rounded */
}

.slider:before {
position: absolute;
content: "";
height: 18px; /* Adjust the handle size as desired */
width: 18px; /* Adjust the handle size as desired */
left: 3px; /* Adjust the handle position as desired */
bottom: 3px; /* Adjust the handle position as desired */
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #009cff; /* #009cff when on */
}

input:checked + .slider:before {
transform: translateX(16px); /* Adjust the handle position as desired */
}

.container {
display: flex;
align-items: center;
justify-content: center;

}

body, html {
margin: 0;
padding: 0;
height: 100%;
}

.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

#video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

  /* Hide the video on mobile devices */
  @media (max-width: 767px) {
      .video-container {
          display: none;
      }
      #audio-control {
          display: none;
      }
      #grid-control {
        display: none;
    }
    #vid-control {
      display: none;
  }
      .progress-bar {
          display: none;
      }
         #sidebar {
          display: none;
      }

        #sidebar-toggle {
          display: none;
      }
      /* #mobile {
          display: block;
      } */
  }

  .dotted-line {
    position:relative;
    left:0px;
    border-bottom: 1px dotted #9c9b9b; /* Adjust the thickness and color as needed */
    width: 100%; /* Adjust the width as needed */
    margin-top: 3px; 
    margin-bottom: 3px; 
    }

  .vertical-lineTop {
    position:relative;
    top:0px;
    border-right: 1px dotted #9c9b9b; /* Adjust the thickness and color as needed */
    height: 108%; /* Adjust the height as needed */
    margin-left: 5px; 
    display: block; /* Ensure the <p> element behaves like a block element */
    }

  .vertical-line {
border-right: 1px dotted #9c9b9b; /* Adjust the thickness and color as needed */
height: 100%; /* Adjust the height as needed */
margin-left: 5px; 
display: block; /* Ensure the <p> element behaves like a block element */
}




.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: none;
}

.progress {
  height: 100%;
  background-color: #009cff;
  width: 0;
}
.percentage {
          position: relative;
          top: 5px; /* Adjust as needed */
          /* left: 5px; */
          float:right;
          padding-right:5px;
          /* transform: translateX(-50%); */
         color:#009cff;
           font-weight: 300;
         background-color:#0092FF;
         border-radius: 3px;font-weight:bold; padding: 1px 3px 1px 3px;color:white;font-size:10px;
      }
      #hiddenContentFooter {
  display: none; /* Initially hidden */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

#hiddenContentFooter.show {
  display: block; /* Ensure it takes up space when shown */
  opacity: 1;
  max-height: 500px; /* Adjust based on the expected height of the content */
}

.rating-reminder {
  display: none; /* Initially hide the reminder */
  position: fixed;
  top: 100px;
  left: 50px; /* Adjusted to place the reminder on the left side */
/*     background-color: #ff9500;*/
  border: 0px solid #fff;
  padding: 10px;
  border-radius: 8px;
/*   box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8)
}
.rating-reminder2 {
  display: none; /* Initially hide the reminder */
  position: fixed;
  top: 18px;
  left: 50px; /* Adjusted to place the reminder on the left side */
/*     background-color: #ff9500;*/
  border: 0px solid #fff;
  padding: 10px;
  border-radius: 8px;
/*   box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8)
}
#ratingFrame {
  display: none; /* Initially hide the iframe */
  width: 151px;
  height:81px;
  border: none; /* Remove iframe border */
}

#ratingFrame2 {
  display: none; /* Initially hide the iframe */
  width: 151px;
  height:81px;
  border: none; /* Remove iframe border */
}

.close-button {
  display: none; /* Initially hidden */
  position: absolute;
  bottom: 10px; /* Align to the bottom */
  right: 10px; /* Align to the right */
  cursor: pointer;
  width: 14px;
  height: 14px;
  background-color: transparent;
  background-image: url('img/ios-close.svg'); /* Set background image */
  background-size: cover; /* Ensure the image covers the button */
  border: none;
}