/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30. 4. 2021, 14:52:30
    Author     : JiriF
*/

/* ---------- Main box ---------- */

#body #mainbox .content {
    margin-bottom: 10px;
}

@media
only screen and (min-width: 1380px) {
    #body #mainbox .content {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
        grid-template-rows: auto minmax(min-content, max-content);
    }
    
    #body #mainbox .content #teacher {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    #body #mainbox .content #timetable {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    
    #body #mainbox .content #photo {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
}

@media
only screen and (max-width: 1380px) {
    #body #mainbox .content {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
    }
    
    #body #mainbox .content #teacher {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    #body #mainbox .content #timetable {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    
    #body #mainbox .content #photo {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
}

/* Class teacher */

#body #mainbox #teacher {
    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-minor-dark);
    margin-bottom: 5px;
    
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    justify-items: center;
}

#body #mainbox #teacher span.teacher,
#body #mainbox #teacher span.teacher a {
    color: var(--color-major-middle);
    font-size: 12pt;
}

#body #mainbox #teacher span.teacher {
    text-align: center;
}

#body #mainbox #teacher > span.teacher.m::before {
    content: "Třídní učitel: ";
}

#body #mainbox #teacher > span.teacher.z::before {
    content: "Třídní učitelka: ";
}

/* Class photo */

#body #mainbox #photo {
    margin: 5px;
    
    display: grid;
}

#body #mainbox #photo > img {
    width: 100%;
    
    align-self: center;
}

/* Timetable */

#body #mainbox #timetable {
    margin: 5px;
    
    overflow-x: auto;
}

/* Scrollbar for Chrome, Safari and Opera */
#body #mainbox #timetable::-webkit-scrollbar {
    /*display: none;*/
    height: 5px;
}

#body #mainbox #timetable::-webkit-scrollbar-track {
    background: var(--color-minor-dark);
}

#body #mainbox #timetable::-webkit-scrollbar-thumb {
    background: var(--color-major-dark);
}

/* Scrollbar (hidden) for IE, Edge and Firefox */
#body #mainbox #timetable {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#body #mainbox #timetable table {
    height: 100%;
    width: 100%;
    font-size: 16pt;
    table-layout: fixed;
}

/*
@media
only screen and (min-width: 630px) {
    #body #mainbox #timetable table {
        font-size: 16pt;
    }
}

@media
only screen and (max-width: 630px) {
    #body #mainbox #timetable table {
        
    }
}
*/

#body #mainbox #timetable table tr:first-of-type th:first-of-type {
    visibility: hidden;
}

#body #mainbox #timetable table th {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--color-major-dark);
    color: white;
    border: 2px solid var(--color-minor-light);
    text-align: center;
}

#body #mainbox #timetable table td {
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
    border: 5px solid var(--color-minor-light);
    border-radius: 30px 30px 30px 30px;
    text-align: center;
}

#body #mainbox #timetable table th,
#body #mainbox #timetable table td {
    width: 75px;
}

#body #mainbox #timetable table td.filled {
    background-color: var(--color-major-middle);
}

#body #mainbox #timetable table td.empty {
    background-color: var(--color-minor-dark);
}