/* *{ outline: 1px solid red; }*/

.obsazenost_center {
    position: relative;
    top: 16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    background: #f7ecd8;
    padding-bottom: 6rem;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .obsazenost_center {
        top: 13rem;
    }    
}

.obsazenost_nadpis_01 {
    color: #0d4739;
    font-family: Times New Roman;
    font-size: 5rem;
    font-weight: bold;
    text-align: center;
    padding-top: 8rem;
    padding-bottom: 8rem;
    width: 50%;
}

@media only screen and (max-width: 768px) {
    .obsazenost_nadpis_01 {
        width: 95%;
    }    
}

.obsazenost_cara_horizontal {
    background: #0d4739;
    width: 30rem;
    height: 0.01rem;
}

@media only screen and (max-width: 768px) {
    .obsazenost_cara_horizontal {
        height: 0.1rem;
    }    
}

.obsazenost_cara_vertical {
    background: #0d4739;
    width: 0.01rem;
    height: 5rem;
}

@media only screen and (max-width: 768px) {
    .obsazenost_cara_vertical {
        width: 0.1rem;
    }    
}

.obsazenost_calendar_uvod {
    display: flex;                /* Aktivace flexboxu */
    justify-content: center;      /* Vycentrování položek horizontálně */
    align-items: center;          /* Vycentrování položek vertikálně */
    flex-wrap: wrap;              /* Zalamování řádků při nedostatku místa */
    gap: 6rem; 
    max-width: 90%;               /* Maximální šířka kontejneru */
    margin: 0 auto;               /* Zarovnání kontejneru na střed */
    padding-top: 3rem;            /* Horní odsazení */
    padding-bottom: 5rem;         /* Spodní odsazení */
}

@media only screen and (max-width: 768px) {
    .obsazenost_calendar_uvod {
        gap: 1rem; 
    }
}

.obsazenost_terminy {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 4rem;
    row-gap: 1rem;
    align-items: center;
    justify-items: center;
    padding: 0;
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .obsazenost_terminy {
        gap: 1rem;
}
}

/* Společné vlastnosti pro kruhy */
[class^="obsazenost_cara_kruh_"] {
    position: relative;
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: solid 3px #000000;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: 0;   /* skryje textové X */
    color: transparent;
}

@media only screen and (max-width: 768px) {
    [class^="obsazenost_cara_kruh_"] {
        font-size: 0.8rem;
        width: 45px;
        height: 45px;
    }
}

/* X v kruhu vykreslím pomocí css abych to měl vycentrované přesně urostřed*/
[class^="obsazenost_cara_kruh_"]::before,
[class^="obsazenost_cara_kruh_"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 3px;
    background: #f7ecd8;
    transform-origin: center;
}

@media only screen and (max-width: 768px) {
    [class^="obsazenost_cara_kruh_"]::before,
    [class^="obsazenost_cara_kruh_"]::after {
        width: 20px;
        height: 3px;
    }    
}

[class^="obsazenost_cara_kruh_"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

[class^="obsazenost_cara_kruh_"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Specifické vlastnosti pro každou třídu */
.obsazenost_cara_kruh_01 {
    background-color: #0d4739;
    grid-row: 1;
    grid-column: 1;
}

.obsazenost_cara_kruh_02 {
    background-color: #C8333C;
    grid-row: 1;
    grid-column: 2;
}

.obsazenost_cara_kruh_03 {
    background: linear-gradient(-45deg, #C8333C 50%, #0d4739 50%);
    grid-row: 3;
    grid-column: 2;
}

.obsazenost_cara_kruh_04 {
    background: linear-gradient(-45deg, #0d4739 50%, #C8333C 50%);
    grid-row: 3;
    grid-column: 3;
}

.obsazenost_cara_kruh_05 {
    background-color: #E0B400;
    grid-row: 1;
    grid-column: 3;
}

.obsazenost_cara_kruh_06 {
    background-color: #E67E22;
    grid-row: 1;
    grid-column: 4;
}

.obsazenost_terminy_text {
    padding-top: 0;
    margin: 0;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;    /* Včetně paddingu do šířky */
}

@media only screen and (max-width: 768px) {
    .obsazenost_terminy_text {
        font-size: 1rem;
    }
}

.obsazenost_poz1 {
    grid-row: 2;
    grid-column: 1;
}

.obsazenost_poz2 {
    grid-row: 2;
    grid-column: 2;
}

.obsazenost_poz3 {
    grid-row: 2;
    grid-column: 3;
}

.obsazenost_poz4 {
    grid-row: 2;
    grid-column: 4;
}

.obsazenost_poz5 {
    grid-row: 4;
    grid-column: 2;
}

.obsazenost_poz6 {
    grid-row: 4;
    grid-column: 3;
}

.obsazenost_calendar {
    display: block;
    width: 70%;
}

@media only screen and (max-width: 768px) {
    .obsazenost_calendar {
/*        display: flex;*/
        width: 90%;
    }    
}