/* ia-writer-quattro-latin-400-normal */
@font-face {
    font-family: 'iA Writer Quattro';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2) format('woff2'), 
         url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff) format('woff');
  }

/* ia-writer-quattro-latin-700-normal */
@font-face {
    font-family: 'iA Writer Quattro';
    font-style: normal;
    font-weight: 700; /* Bold weight */
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff) format('woff');
}


:root {
    --main-font:  'iA Writer Quattro', sans-serif; 
    --smaller-font-size: 0.8em;
    --main-background-color:rgba(252, 250, 242, 1.00); /* rgb(255, 253, 249); */ /* rgb(255, 250, 238);  */;
    /* --heading-background-color: linear-gradient(to bottom, rgba(220, 220, 220, 0.437), rgba(245, 245, 220, 0.21));  */
    --time-label-font-size: 14px;
    --bar-text-color: #fff;
    --main-modal-background-color: rgb(254, 251, 243);
    --lang-button-background-color: rgb(216, 216, 216);
    --login-button-background-color: #baaf6a92;
    
    --top-info-color: rgb(51, 51, 51);
    --top-info-background-color: var(--main-background-color);
    --color-primary: hsl(7, 51%, 49%); /* hsl(310, 100%, 65%); */
    --color-secondary: hsl(130, 47%, 28%); /* hsl(160, 100%, 65%); */
    
    --top-menu-background-color:   rgba(248, 245, 228, 1.00); /* #f6f3e5; */
    --input-field-background-color: rgba(188, 188, 188, 0.2); /* rgb(22, 212, 139, 0.2);*/
    --input-fields-background-color:  rgba(24, 24, 24, 0.066);/* rgba(24, 24, 24, 0.142); */
    --input-text-field-background-color: rgb(255, 255, 255); /* rgb(22, 212, 139, 0.2);*/
    --checkbox-background-color: var(--input-field-background-color);
    --input-field-text-color: rgb(66, 66, 66);
    --placeholder-color: rgba(138, 138, 138, 0.634);
    
    --overview-background-color:  rgb(243, 240, 222); /*  #f6f3e5; */ /*rgb(243, 238, 225); /*rgb(246, 239, 221);*/
    --overview-title-color: black;
    --axis-legend-color: gray;
    --overview-border-color: rgba(255, 255, 255, 0.75);
    
    
    --white-button-background-color: rgba(212, 216, 222, 0.56);
    --erase-slot-circle-color: rgba(160, 160, 158, 0.461);
    --button-font-color: rgb(55, 55, 55);
    --add-button-background-color: rgb(241, 149, 146); /* rgba(137, 185, 137, 0.91); */
    --cancel-button-background-color: rgba(162, 156, 156, 0.621);
    --normal-button-background-color: rgb(216, 216, 216);
    --create-overview-background-color: rgba(255, 255, 255, 0.908);
    --button-border-color: rgba(0, 0, 0, 0.425);
    --button-active-shadow-color: rgba(0, 0, 0, 0.134);
    
    --maybe-overlap-color-1: var(--overview-background-color);
    --maybe-overlap-color-2: rgb(255, 255, 255, 0);
}


html body {
    font-family: var(--main-font);
    background: var(--main-background-color); 
    margin-top: 0;
    /* background: linear-gradient(45deg, #de49492f, #dcb90d5d);   */
    
}

/* Hide on narrow screens */
@media (max-width: 600px) {
  .hide-on-small {
    display: none;
  }
}


/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
    :root {
        --main-background-color: rgb(0, 0, 0); 
        --login-button-background-color: lightgray;
        
        --heading-background-color: black;
        --overview-title-color: rgb(213, 213, 213);
        --top-menu-background-color:  #000000;
        --input-field-text-color: rgb(61, 55, 47);
        --input-fields-background-color: rgba(71, 71, 71, 0.606);
        --input-fields-text-color: rgb(173, 165, 153);
        --input-text-field-background-color: rgba(222, 222, 222, 0.59);
        --checkbox-background-color: var(--input-field-background-color);
        --placeholder-color: rgb(99, 99, 99);
        
        --overview-background-color: rgb(32, 32, 32);
        --axis-legend-color: darkgray;
        --overview-border-color: rgb(65, 65, 65);
        --maybe-overlap-color-1: var(--overview-background-color);
        --maybe-overlap-color-2: rgb(255, 255, 255, 0);
        --main-modal-background-color: rgb(49, 49, 49);
        --heading-background-color: linear-gradient(rgb(38, 38, 37),black);
        --erase-slot-circle-color: rgba(255, 255, 255, 0.222);
        --add-button-background-color: rgb(97, 117, 64);
        --white-button-background-color: rgba(139, 139, 139, 0.964);
        --button-font-color: rgb(0, 0, 0);
    }
}


a {
  color: #0077ccae; /* barva odkazu */
  text-decoration: none; /* odstraní podtržení, volitelné */
}

a:visited {
  color: #541a8bbc; /* barva pro navštívený odkaz */
}

a:hover {
  color: #ff6600cf; /* barva při najetí */
  text-decoration: underline; /* volitelné zvýraznění */
}

.opacity-halved {
    opacity: 0.5;
}

.header {
    padding-left: 1em;
}

h1 {
    font-size: 130%;
    /* background: linear-gradient(45deg, var(--top-info-color), #83a256, #a97d2a,#b9ab3e); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    display: flex;
    padding: 0.4em; 
    color: grey;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: .4em;
    padding-right: .4em;
    display: flex;
    flex-direction: column;
    /*min-height: 100vh;*/
    max-width: 1000px;
  }

.app-container {
    position: static;
}

.logo-style {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.2em;
    margin-right: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.app-title {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--top-info-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1em;
  background-image: linear-gradient(
    35deg,
    var(--color-primary),
    var(--color-secondary)
  );
}

.description {
    font-size: var(--smaller-font-size);
    padding: 0.4em;
}

.share-url-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0em;
    margin-bottom: 1em;
    margin-top: 1em;
    gap: 1em;
}

.share-url-info-text {
    font-size: var(--smaller-font-size);
    background-color: var(--input-field-background-color);
    justify-content: center;
    display: flex;
    padding: 1em;
    margin-bottom: 1.5em;
}


.readonly {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 90%;
}

.bottom-menu-container {
    padding-top: 1em;
    position: relative;
    bottom: 0;
    gap: 1em;
    width: auto;
    display: flex;
    padding-top: 0px;
    justify-content: space-between;
    margin-top: 1em;
    flex-wrap: wrap;
    align-items: center;
    /* box-shadow: inset 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.10), 
                inset 0.0em 0.0em 0.5em rgba(0, 0, 0, 0.05);
 */
} 

.debug-info {
    font-size: var(--smaller-font-size);
    color: gray;
    text-align: left;
    margin: 1em;
    padding: 1em;
}

.bottom-info-text {
    font-style: italic;
}

.bottom-info-container {
    position: relative;
    bottom: 0;
    width: auto;
    display: flex;
    justify-content: center;
    padding: 1em;
}

.all-bars {
  position: relative;
  margin-top: 0.6em;
}


.creator-only-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.time-axis {
    font-size: var(--time-label-font-size);
    color: var(--axis-legend-color);
    display: flex;
    align-content: space-around;
  }
  
.time-label {
    flex-basis: 100%;
    text-align: left;
    margin-bottom: 1em;
    border-radius: 3px;
    align-content: center;
    /*background: linear-gradient(to right, white, var(--main-background-color));*/
 }

 .time-label-end {
    text-align: right;
    margin-bottom: 1em;
    border-radius: 3px;
    align-content: center;
    /*background: linear-gradient(to right, white, var(--main-background-color));*/
 }

 .time-change-button {
  background-color: var(--white-button-background-color);
  color: var(--axis-legend-color);
  /* box-shadow: none; */
  background-color: var(--input-field-background-color);
  border-radius: 1em;
  border-width: 0;
  margin-left: 2px;
  width: fit-content;
  margin-right: 2px;
}

.main-title-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;  
  box-sizing: border-box;
  overflow: hidden;
}

.centered-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.add-slot-menu-container {
    font-weight: bold;
    margin-bottom: 1em;
    padding-top: 0.7em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.2em;
    border-radius: 0.5em;
    background-color: var(--top-menu-background-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.list-box {
    color: var(--input-field-text-color);
    font-family: var(--main-font);
    border: none;
    border-bottom: 1px dashed black;
    background-color: var(--input-text-field-background-color); 
    padding: 0.25em;
    padding-left: 0.5em;
    margin: 0.5em;
    border-radius: 6px;
    display: flex;
    align-items: center;
    height: 2em;
    font-size: var(--smaller-font-size);
    font-weight: 600;
}

.demo-overview {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.share-dialog {
    background: var(--main-modal-background-color);
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
    max-width: 360px;
    font-weight: normal;
}

.active-overview-container {
  position: relative;
}

.desaturated::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.05); /* Semi-transparent white */
    backdrop-filter: grayscale(75%); /* Creates grayscale effect */
    -webkit-backdrop-filter: grayscale(75%); /* Safari support */
    z-index: 10;
    border-radius: 1em;
    pointer-events: disable; 
  }
  

.text-input-field {
    font-size: 0.95em;
    border: none;
    border-bottom: 1px dashed black;
    margin-right: 0.5em;
    margin-left: 0.5em;
    font-family: var(--main-font);
    color: var(--input-field-text-color);
    background-color: var(--input-text-field-background-color);
}

.text-input-field-modal {
  font-size: 1em;
  border: none;
  border-bottom: 1px dashed black;
  margin-right: 0.5em;
  margin-left: 0.5em;
  font-family: var(--main-font);
  color: var(--input-field-text-color);
  background-color: var(--input-text-field-background-color);
}

.text-input-field-title {
    color: var(--overview-title-color);
    font-size: 1.6em;
    border: none;
    font-family: var(--main-font);
    font-weight: bold;
    text-align: left;
    padding-right: 0.2em;
    margin-left: 0.3em;
    height: 1em; 
    flex-grow: 1;
    min-height: 1.2em;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    align-self: center;
    background-color: var(--main-background-color); 
    outline: none;
    position: relative;
    padding: 0.1em 0;
    width: 100% !important;
}

.textarea-wrapper {
  position: relative;
  width: 100%;
}

.textarea-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-image: 
    repeating-linear-gradient(
      to right,
      var(--input-field-text-color) 0px,
      var(--input-field-text-color) 4px,
      transparent 4px,
      transparent 8px
    );
  background-position: left bottom;
  background-size: 100% 1.5px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.textarea-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, transparent 0%, transparent 50%, var(--main-background-color) 100%);
  pointer-events: none;
  z-index: 1;
}

.text-input-field-title:disabled {
    background-image: none;
    opacity: 0.6;
}

/* ...existing code... */


.input-wrapper {
    position: relative;
    display: inline-block;
    background: var(--input-field-background-color);
}

.input-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    border-bottom: 1px dashed black;
    width: 0; /* Výchozí šířka */
    transition: width 0.3s;
}

.input-wrapper input {
    border: none;
    outline: none;
    padding: 5px;
    background: var(--input-text-field-background-color);
}

.input-wrapper input:focus + ::after {
    width: 100%; /* Při focus podtržení rozšíříme */
}

.input-fields-container {
    background-color: var(--input-fields-background-color);
    color: var(--input-fields-text-color);
    display: inline;
    padding: 0.25em;
    padding-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 6px;
    width: auto;
    display: flex;
    align-items: center;
    height: 2em;
    border-style: solid;
    border-width: 0.0em;
    border-color: var(--axis-legend-color);
    /* box-shadow: 
      0.1em 0.1em 0.2em rgba(0, 0, 0, 0.3),  
      0.0em 0.0em 1em rgba(0, 0, 0, 0.1); */
}

.creation-info {
    font-size: var(--smaller-font-size);
    color: gray;
    text-align: left;
    /* transform: translateY(-50%); */
}

.creation-info-text {
    border-left-width: 0.1em;
    opacity: "90%";
    border-left-style: solid;
    font-size: var(--smaller-font-size);
    color: var(--axis-legend-color);
    text-align: left;
    margin: 1em;
    padding: 0.5em;
    padding-top: 0em;
    padding-bottom: 0em;
}

.overview-container {
  position: relative;
  padding-left: 1em;
  padding-right: 1.3em;
  text-align: center;
  justify-content: center;
  margin-bottom: 1.5em;
  z-index: 0;
  padding-bottom: .4em;
  background-color: var(--overview-background-color);
  border-radius: 1em;
  /* 
  border-style: solid;
  border-width: 0.2em;
  border-color: var(--overview-border-color); */
  /* box-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.10), 
  0.0em 0.0em 0.5em rgba(0, 0, 0, 0.05); */
}

.overview-container:hover {
  filter: brightness(1.02);
  /* box-shadow: 2px 0px 0em rgba(0, 0, 0, 0.15),
              2px 2px 0.3em rgba(0, 0, 0, 0.35);  
  border-bottom: 2.5px solid var(--button-border-color);
  border-right: 1px solid var(--button-border-color);
  
  transform: translateY(-2px); 
  top: 2.5px;
  right: 2px;*/
}

.top-info-container {
    position: relative;
    top: 0;
    display: flex;
    width: 100%;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    justify-content: space-between;
    background-color: var(--top-info-background-color);
    overflow-wrap: break-word;
    flex-wrap: wrap;
    align-content: center;
    margin-bottom: 0.2em;
    align-items: center;
}

/* COMMENTED OUT: CSS for one-row slot layout
.user-slot-row {
  position: relative;
  width: 100%;
  height: 2.2em;
  margin-bottom: 4px;
  text-overflow: ellipsis;
}
*/

.slot-container {
    position: static;
    display: flex;
}


.swipe-hover-element {
  position: relative;
  display: inline-block; /* Důležité pro zachování rozměrů vnitřního .bar elementu */
  width: auto; /* Přizpůsobí se šířce obsahu */
}

.swipe-hover-element .hover-content {
  position: absolute;
  top: 0;
  /* right: -40px;  */
  height: 100%;
  display: flex;
  align-items: center;
}

/* Ujistíme se, že .bar si zachová svou šířku */
.swipe-hover-element .bar {
  display: inline-block;
}

/* For desktop hover effect */
@media (hover: hover) {
  .swipe-hover-element:hover {
    /* background-color: rgba(0, 0, 0, 0.02); */
  }
}

/* You can add animation for swipe feedback */
.swipe-hover-element.swiping {
  transition: transform 0.2s, opacity 0.2s;
}

.erase-button-container {
  position: absolute;
  top: 0;
  right: -40px;
  height: 100%;
  display: flex;
  align-items: center;
}

.bar-wrapper {
  position: relative;
  display: inline-block;
}


.section {
  position: static;
}

.erase-button {
  position: absolute;
  padding: 0;
  padding-bottom: 0.4em;
  width: 1.2em;
  right: -1.3em;
  top: 0.4em;
  cursor: pointer;
  text-align: center;
  border-radius: 1em;
  border: none;
  border-bottom: 1px var(--button-border-color) solid;
  border-right: 0.5px var(--button-border-color) solid;
  height: 1.2em;
  background: var(--erase-slot-circle-color);
  color: white;
  font-size: 1em;
  z-index: 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.176); 
  line-height: 1.1em; /* Adjust line-height to move text slightly up */
}

.erase-button:hover {
  /* transform: scale(1.05) translate(-0.1em, -0.1em); */
  filter: brightness(1.2);
 /*  border-bottom: 0.1em solid var(--button-border-color);
  border-right: 0.1em solid var(--button-border-color); */
}

.info-bar-button {
  position: absolute;
  align-items: bottom;
  padding: 0;
  width: 1.2em;
  right: -1.4em;
  bottom: -0.2em;
  text-align: center;
  border-radius: 10px;
  height: 1.2em;
  border: none;
  background: lightblue;
  color: rgb(255, 255, 255);
  font-size: 1em;
  z-index: 0;
}

.color-minimenu {
  display: flex;
  flex-direction: row;
  gap: 0.2em;
  margin-right: 0.1em;
}

.color-minimenu input {
  display: flex;
  width: 1em;
}


.color-reset-button {
  padding: 0.2em;
  padding-bottom: 0.7em;
  width: 1.3em;
  align-items: center;
  text-align: center;
  border-radius: 2em;
  height: var(--smaller-font-size);
  border: none;
  background: var(--erase-slot-circle-color);
  color: rgb(255, 255, 255);
  font-size: 0.6em;
  z-index: 0;
  /* box-shadow: 1px 1px 0px black; */
}


.select-option {
    color: "blue";
    font-size: 1.2em;
    font-family: var(--main-font);
    background-color: "lightgray";
    padding: "4px";
    
}

.day-container {
    text-align: center;
    padding-top: 0.4em;
    padding-bottom: 1em;
    border-radius: 3px;
    position: relative;
}

.day-text {
    font-size: 1.1em;
    font-weight: bold;
    padding-top: 0.3em;
    margin-top: 0.3em;
    border-top-style: solid;
    border-top-color: var(--erase-slot-circle-color);
    border-top-width: 0.05em;
}

.add-button {
  display: flex; /* Enables flexbox */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Centers text and icon horizontally */
  gap: 0.3em; /* Adds spacing between the icon and text */
  width: auto;
  height: 3.5em;
  color: var(--button-font-color);
  background-color: var(--add-button-background-color);
  text-align: center;
  border-radius: 1.5em;
  margin: 3px;
  align-content: center;
  font-family: var(--main-font);
  align-self: center;
  margin-bottom: 0.9em;
  border-bottom-width: 3px;
  border-right-width: 2px;
  border-left-width: 0px;
  border-top-width: 0px;
  font-weight: bold;
  border-color: var(--button-border-color);
 /*  box-shadow: 4px 4px 5em rgba(0, 0, 0, 0.05),
              1px 1px 0.3em rgba(0, 0, 0, 0.2); */
  padding-right: 1em;
}

.add-button:active {
  border-color: var(--button-active-shadow-color); /* nebo barvu, kterou chceš při stisku */
  border-width: 0em;
}

.cancel-button {
    width: 6em;
    height: 3em;
    color: var(--button-font-color);
    background-color: var(--cancel-button-background-color);
    text-align: center;
    border-radius: 16px;
    margin: 3px;
    align-content: center;
    border-bottom-width: 3px;
    border-right-width: 2px;
    border-left-width: 0px;
    border-top-width: 0px;
    font-weight: bold;
    border-color: var(--button-border-color);
/*     box-shadow: 4px 4px 5em rgba(0, 0, 0, 0.05),
                1px 1px 0.3em rgba(0, 0, 0, 0.2);
 */    padding-right: 1em;
    padding-left: 1em;
}

.cancel-button:active {
    border-color: var(--button-active-shadow-color); /* nebo barvu, kterou chceš při stisku */
    border-width: 0em;
}

.expiry-date-infotext {
    font-size: var(--smaller-font-size);
    width: auto;
    color: red;
    opacity: 0.6;
    text-align: right;
    padding-left: 1em;
    padding-right: 0em;
    padding-top: 1em;
    margin: 0em;
}

.no-expiry-date-infotext {
    font-size: var(--smaller-font-size);
    text-align: right;
    width: auto;
    color: gray;
    padding-right: 0em;
    padding-top: 0.4em;
    margin: 0em;
}


/* popup modal */

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6); 
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .modal-container {
        background: var(--main-modal-background-color);
        padding: 20px;
        border-radius: 8px;
        min-width: 300px;
        max-width: 360px;
        font-weight: normal;
    }

    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 0.3em;
        margin: 1em 0;
        background-color: var(--input-field-background-color);
        border-radius: 1em;
        padding-bottom: 1em;
        padding-top: 1em;
    }

    .radio-text {
      align-items: center;
    }

    .radio-option {
        align-items: center;
        padding: 0.5em;
        padding-right: 1.5em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        margin: 4px 0;
    }
    
    .radio-option label {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        cursor: pointer;
    }
    
    .radio-label {
        margin-left: 8px;
        font-size: 14px;
    }
    
    .radio-option input[type="radio"] {
        cursor: pointer;
    }


    .modal-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 0.1em;
    }

    .bottom-modal-container {
        padding-left: 0.2em;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .bottom-modal-legend {
      gap: 0.6em;
      display: flex;
      opacity: 0.6;
      font-size: 0.8em;
      align-content: center;
      align-self: center;
    }

    .loading-spinner {
        display: flex;
        justify-content: center;
        padding: 20px;
    }

    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

/* = End of popup modal = */

/* = Loading screen = */


.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: --var(--main-background-color);
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-container {
  text-align: center;
}

.loading-text {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #555;
}

/* = End of loading screen = */

.erase-overview-button {
    width: auto;
    height: 2em;
    color: rgb(231, 231, 231);
    background-color: rgba(165, 165, 165, 0.832);
    text-align: center;
    border-radius: 16px;
    margin: 2px;
    align-content: center;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-right-width: 1px;
    border-left-width: 0px;
    font-family: var(--main-font);
    /* width: 8em;
    height: 3em;
    text-align: center;
    border-radius: 12px;
    margin: 3px;
    align-content: center;
    box-shadow: 1px 1px 0px black;
    font-family: 'Courier New', Courier, monospace, sans-serif;
    font-weight: bold; */
}

.ntf-button {
    width: auto;
    /* height: 2em; */
    color: black;
    background-color: rgb(221, 221, 221);
    text-align: center;
    border-radius: 16px;
    margin: 2px;
    align-content: center;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-right-width: 1px;
    border-left-width: 0px;
    font-family: var(--main-font);
}

.create-overview-button {
    width: auto;
    height: 3em;
    color: var(--button-font-color);
    background-color: var(--create-overview-background-color);
    text-align: center;
    border-radius: 16px;
    margin: 2px;
    padding-right: 1em;
    padding-left: 1em;
    align-content: center;
    border-top-width: 0px;
    border-bottom-width: 4px;
    border-right-width: 3px;
    border-left-width: 0px;
    font-weight: bold; 
}

.white-button {
  display: flex; /* Enables flexbox */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Centers text and icon horizontally */
  gap: 0.4em; /* Adds spacing between the icon and text */
  width: auto;
  height: auto;
  color: var(--button-font-color);
  background-color: var(--white-button-background-color);
  text-align: center;
  border-radius: 16px;
  margin: 2px;
  margin-right: 0.5em;
  padding: 0.5em;
  align-content: center;
  border-bottom-width: 3px;
  border-right-width: 2px;
  border-left-width: 0px;
  border-top-width: 0px;
  font-weight: bold;
  border-color: var(--button-border-color);
  /* box-shadow: 4px 4px 5em rgba(0, 0, 0, 0.05),
              1px 1px 0.3em rgba(0, 0, 0, 0.2); */
  padding-right: 1em;
  padding-left: 1em;
}

.white-button:active {
  border-color: var(--button-active-shadow-color); /* nebo barvu, kterou chceš při stisku */
  border-width: 0em;
}

.request-ntf-button {
    width: auto;
    height: 2em;
    color: black;
    background-color: rgb(221, 221, 221);
    text-align: center;
    border-radius: 16px;
    margin: 2px;
    align-content: center;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-right-width: 1px;
    border-left-width: 0px;
    font-family: var(--main-font);
}

.mini-info {
    font-size: 10px;
    text-align: center;
    color: gray;
}

.header-container {
  /*box-shadow: 0 41px 57px rgba(214, 208, 192, 1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
  padding: 0.2em;
  background: rgb(255, 255, 255, 0.05);
  border-bottom-color: var(--normal-button-background-color);
  border-width: 2px;
  border-color: var(--overview-background-color);
  border-bottom-style: solid;
/*  box-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.10),   Darker and sharper close shadow 
   0.0em 0.0em 0.5em rgba(0, 0, 0, 0.05); */
  border-top-style: none;
}


/* = avatar = */

figure {
    display: block;
  }
  
  .avatar {
    display: inline-block;
    margin: 0;
    vertical-align: center;
    height: 2rem;
    width: 2rem;
  }
  
  .avatar img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    z-index: 1;
  }

.login-button-text-in {
    padding-left: 2em;
    display: inline;
    align-items: center;
    justify-content: left;
}

.login-button-text-out {
  padding-left: 0em;
  display: inline;
  align-items: center;
  justify-content: left;
}

.bar-container {
    position: relative;
    align-self: stretch;
    flex: 1;
    flex-grow: 1;
    flex-basis: 0;
    background-color: white;
    
}

.notification-container {
    position: relative;
    display: flex;
    justify-content: end;
    padding-right: 0;
}

.notification-subcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar {
    position: relative;
    border-radius: 5px;
    margin: 3px;
    align-items: stretch;
    text-overflow: ellipsis; /* Hide text that does not fit */
}


.bar.overlap {
    position: absolute; 
    isolation: isolate;
    filter: saturate(1.3);
    z-index: 20;
    transform: translateY(-0.4em) translateX(-0.4em);
    height: 100%; 
    width: 100%;
    border-style: dashed; 
    border-width: 0.25em; 
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-top: 0em;
    padding-bottom: 0em;
}

.left {
    text-align: left;
    flex: 1;
    margin-left: 0.3em;
    font-weight: bold;
    color: white;
   /*  z-index: 2; */
  }
  
.center {
    text-align: center;
    flex: 1;
    min-width: 90%;
  }
  
.right {
    text-align: right;
    flex: 1;
    font-weight: bold;
    margin-right: 0.3em;
    color: white;
    /* z-index: 2; */
  }

.start-overlap {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(to right, var(--maybe-overlap-color-1), var(--maybe-overlap-color-2));
    mix-blend-mode: revert;
}

.end-overlap {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(to left, var(--maybe-overlap-color-1), var(--maybe-overlap-color-2));
    mix-blend-mode:revert;
}

.winner-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 0.8em;
  color: green;
  /* position: absolute;  */
  /* bottom: -2em;  */
  left: 0; /* Anchor to the left edge */
  width: auto; /* Ensure full width */
  align-content: center;
}


.polling-ended-container {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  background-color: white;
  border-radius: 3em;
}

.check-box {
    margin-right: 0.2em;
}

.not-logged {
    text-align: left;
    padding-top: 1em;
    padding-left: 8px;
    padding-bottom: 1em;
}

label {
    padding-left: 0.2em;
  }


.bar-text {
    display: flex;
    align-items: center;  
    color: var(--bar-text-color);
    font-size: var(--smaller-font-size);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-weight: bold;
}


.intersect-time {
    display: flex;
    align-items: center;
    color: gray;
    justify-content: center;
    padding: 0.5em;
    font-size: 0.7em;
    font-weight: bold;
}

/* = Outlook and calendar = */

input::placeholder {
  color: var(--placeholder-color);
  opacity: 1; 
}



.round-settings-container {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.future-setting-subcomponent {
    padding: 0.5em;
    background-color: var(--input-field-background-color);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    padding: 1em;
    margin-bottom: 1em;
    flex-direction: column;
}

.expiry-setting-subcomponent {
    padding: 0.5em;
    background-color: var(--input-field-background-color);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    flex-direction: column;
}

.datepicker {
    position: relative;
    width: 18em;
    margin: 0.5em;
  }
  
  .input-wrapper {
    display: flex;
    padding: 0.5em;
    border-radius: 0.5em;
    width: fit-content;
  }
  
  .input-wrapper input {
    flex-grow: 1;
    padding: 0.5em;
    width: 70%;
    font-size: var(--main-font-size);
    font-family: var(--main-font);
    border: 1px solid #ccc;
    border-radius: 0.2em 0 0.2em 0;
    cursor: pointer;
    border-bottom-color: --var(--input-field-text-color);
    border-bottom-style: dashed;

  }
  
  .input-wrapper button {
    padding: 8px 12px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 0 0 0;
    cursor: pointer;
  }
  
.width-1em {
  width: 1em;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex {
  display: flex;
}

.underline {
  text-decoration: underline;
}

.flex-wrap-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
  
  .flex-wrap-center > div {
    margin: 0.5em;}
  
  .calendar-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .calendar-icon {
    font-size: 1.2em;
    color: var(--input-field-text-color);
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  
  .calendar-icon:hover {
    color: var(--input-field-text-color);
} 

  .calendar {
    margin-top: -0.8em;
    margin-left: -0.5em;
    border: 1px solid var(--axis-legend-color);
    padding: 0.3em;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--main-modal-background-color);
    border: 1px solid #ccc;
    border-radius: 0.7em;
    box-shadow: 0 0em 3em rgba(0,0,0,0.4);
    z-index: 3;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
    font-size: 0.9em;
    background: var(--input-field-background-color);
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
  }
  
  .header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
  }
  
  .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  
  .day-name {
    padding: 8px 0;
    font-weight: bold;
    font-size: var(--smaller-font-size);
  }
  
  .dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 1px;
    background-color: var(--input-field-text-background-color);
    padding: 4px;
    border-radius: 0.3em;
  }
  
  .date {
    padding: 2px 0;
    text-align: center;
    font-size: var(--smaller-font-size);
    cursor: pointer;
    border-radius: 4px;
  }
  
  .date:hover {
    background: #e0e0e0;
  }
  
  .date.empty {
    background: none;
    cursor: default;
  }
  
  .date.selected {
    background: #3498db;
    color: white;
  }
  
  .date.today {
    font-weight: bold;
    border: 1px solid #3498db;
  }
  
  .calendar .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 5px;
  }
  
  .calendar .dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
  }
  
  .calendar .date {
    text-align: center;
    padding: 5px;
    cursor: pointer;
  }
  
  .calendar .date:hover {
    background-color: #f0f0f0;
  }
  
  .calendar .date.empty {
    background-color: transparent;
    cursor: default;
  }

  .calendar .date.unclickable {
    opacity: 0.3;
    background-color: transparent;
    cursor: disabled;
  }
  
  .calendar .date.selected {
    background-color: #007bff;
    color: white;
  }
  
  .calendar .date.today {
    border: 1px solid #007bff;
  }


  /* color picker */

  .color-picker {
    position: relative;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  

  .color-picker-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 2rem;
    font-size: 1rem;
    text-align: center;
  }

  
  .color-picker-input:focus { /* Remove default focus styles */
    outline: none;
    border-color: #000;
  }
  
  .color-picker-input[type="color"] {
    background-color: transparent;
    appearance: none; 
    border: none;
    width: 100%;
    height: 1rem;
    border-radius: 2rem;
    cursor: pointer;
  }
  
  .color-picker-input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  
  .color-picker-input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
  }
  

/* Základní styl tlačítka - nyní zapuštěný */
.button {
  color: var(--button-font-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  width: auto;
  height: 3.2em;
  margin: 0.3em;
  font-family: var(--main-font);
  font-weight: bold;
  text-align: center;
  border-radius: 2em;
  padding: 1em 1em;
  border: none;
  border-bottom: 3px solid var(--button-border-color);
  border-right: 2px solid var(--button-border-color);
  background-color: var(--white-button-background-color);
  /* box-shadow:  inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);  
  box-shadow: 2px 2px 0em rgba(0, 0, 0, 0.1);*/
  transition: all 0.2s ease;
  position: relative;
}

/* Na hover tlačítko "vyskočí" ven */
.button:hover {
  /* box-shadow: 2px 0px 0em rgba(0, 0, 0, 0.15),
              2px 2px 0.3em rgba(0, 0, 0, 0.35);  */
  /* transform: translateY(-2px) translateX(-1px); */
  filter: brightness(1.1); 
}

/* Styl při stisknutí tlačítka */
.button:active {
/*   box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.405),
              inset 1px 1px 1px rgba(0, 0, 0, 0.15); */
  border-color: var(--button-active-shadow-color);
  border-width: 0em;
  filter: brightness(0.8);
  margin-right: 5px;
  transform: translateY(0);
}

/* Tlačítka podle typu */

/* Bílá varianta tlačítka */
.button--white {
  background-color: var(--white-button-background-color);
  color: var(--button-font-color);
}

.button--ntf {
  background-color: #D6CFA6;
  color: var(--button-font-color);
}

.spacer {
  flex-grow: 1;
}

.button--select {
  background-color: #D6CFA6;
  color: var(--button-font-color);
}

/* Tlačítko pro přidání slotu */
.button--add {
  background-color: var(--add-button-background-color);
  color: var(--button-font-color);
  padding-left: 1.2em;
  padding-right: 1.2em;
  margin-bottom: 0.9em;
}

.button--login {
  display: flex;
  background-color: var(--login-button-background-color);
  color: var(--button-font-color);
  flex-direction: row;
  justify-content: center;
  padding-left: 0;
  padding-right: 1em;
  align-items: center;
  width: 100%;
  height: 3.2em;
  border-radius: 16px;
  font-weight: bold;
}

/* Sekundární tlačítko (např. "Zrušit") */
.button--cancel {
  background-color: var(--cancel-button-background-color);
  color: var(--button-font-color);
}

.button--lang {
  background-color: var(--lang-button-background-color);
}


.buttons-div {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

/* Tlačítko pro mazání nebo reset */
.button--danger {
  background-color: rgba(165, 165, 165, 0.832);
  color: rgb(231, 231, 231);
  border-bottom: 2px solid var(--button-border-color);
  border-right: 1px solid var(--button-border-color);
}