@media only screen and (max-width: 1024px) {
    #grafik-intro-mobile {
        display: block;
    }    
    #grafik-intro-desktop {
        display: none;
    }    
    #grafik-legenda-mobile {
        display: block;
    }    
    #grafik-legenda-desktop {
        display: none;
    }    
    #workshops-table-app-mobile {
        display: block;
    }    
    #workshops-table-app-desktop {
        display: none;
    }   
}

@media only screen and (min-width: 1025px) {
    #grafik-intro-mobile {
        display: none;
    }    
    #grafik-intro-desktop {
        display: block;
    }    
    #grafik-legenda-mobile {
        display: none;
    }    
    #grafik-legenda-desktop {
        display: block;
    }    
    #workshops-table-app-mobile {
        display: none;
    }    
    #workshops-table-app-desktop {
        display: block;
    }  
}

#grafik {
    padding: 5rem 3rem;
}

.availability-box-border {
    position: relative;
}

.availability-box-border:before {
    background-image: linear-gradient(90deg, var(--color-orange) 50%, var(--color-violet) 50%);
    height: 2px;
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    display: block;
    top: 0px;
}

.availability-box-border:after {
    background-image: linear-gradient(90deg, var(--color-orange) 50%, var(--color-violet) 50%);
    height: 2px;
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    display: block;
    bottom: 0px;
}

.workshop-turnus-table-header {
    width: 100%; 
    padding: 20px; 
    background-color: #000; 
    color: #fff; 
    text-align: center;

    h2 {
        padding: 0;
        margin: 0;
    }
}

.workshop-box {
    position: relative;
    width: 90%; 
    margin: 10px auto; 
    padding: 2px 6px; 
    height: 80px; 
    text-align: center;
    background-color: #fff;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}

.workshop-box a {
    color: #000;
    font-weight: 900;
}

.workshop-box a:hover {
    color: #000;
}

.class78-box {
    border: 2px solid var(--color-orange);
}

.class78-box:hover {
    background-image: linear-gradient(to right, var(--color-orange), var(--color-koral));
}

.liceum-box {
    border: 2px solid var(--color-violet);
}

.liceum-box:hover {
    background-image: linear-gradient(to right, var(--color-koral), var(--color-violet));
}

.is_full {
    filter: opacity(30%);
}


.is_full_orange {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='rgb(255, 140, 0)' /><path d='M0 99 L99 0 L100 1 L1 100' fill='rgb(255, 140, 0)' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    background-color: #fff;
}

/* https://jsfiddle.net/tyw7vkvm */
.is_full_violet {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='rgb(110, 50, 220)' /><path d='M0 99 L99 0 L100 1 L1 100' fill='rgb(110, 50, 220)' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    background-color: #fff;
}

.workshops-turnus {
    border-right: 2px solid #fff; 
    width: 100%;
}

.workshops-turnus:first-child {
    border-left: 2px solid #fff; 
}

@media (max-width: 1024px) {
    .mobile-table-fix {
        width: 100%;
    }
}


#workshops-table-app-desktop {
    img.warning-icon {
        height: 30px;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 6px;
    }
}


#workshops-table-app-mobile {
    .workshops-turnus {
        border-right:none;
        border-left:none;
        margin: 2.5rem 0;

        img.warning-icon {
            height: 5rem;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 6px;
        }
    }

    .workshop-turnus-table-header {
        position: relative;
        width: 100%; 
        padding: 4rem 2rem; 
        background-color: #000; 
        color: #fff; 
        text-align: center;
        font-size: 1.4rem;

        span {
            font-size: 3rem;
        }
    
        h2 {
            padding: 1rem 0 0;
            margin: 0px;
            line-height: 2rem;
            font-size: 4rem;
        }

        .table-header-icon {
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 7rem;
            height: 7rem;
            position: absolute;
            margin: 0 auto;
            color: #fff;
            left: 0;
            right: 0;
            bottom: -3.5rem;
        }

        .table-header-icon.closed {
            background-image: url('../../images/icon-unfold.png');
        }

        .table-header-icon.opened {
            background-image: url('../../images/icon-fold-lato.png');
        }
    }

    .workshop-box {
        width: 100%;
        padding: 7rem 0;

        a {
            font-size: 4rem;
        }
    }  
}