*{
    font-family: "Arial Narrow", sans-serif;
}
body {
    margin: 0;
}
h1{
    text-align: center;
}
table#rasporedSvi{
    /*display: grid;
    grid-template-columns: max-content auto;*/
    border-collapse: collapse;
    table-layout: fixed;
    grid-column: 2;
    border: black 3px solid;
    margin-bottom: 2px;
}
#rasporedSvi td{
    border: black 1px solid;
    text-align: center;
}
.popodne{
    background-color: #D9D9D9;
}
#rasporedSvi tr:first-child td{
    font-weight: bold;
    letter-spacing: 5px;
}
#rasporedSvi tr:first-child td:first-child{
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: black 2px solid;
}
#rasporedSvi td:first-child{
    white-space: nowrap;
    text-align: left;
}
#rasporedSvi td.brojcasa {
    border-bottom: black 2px solid;
    text-align: center;
}
.ucionica{
    border: 1px solid;
    margin: 0;
}
#rasporedSvi td.prvicas{
    border-left: black 2px solid;
}
#rasporedSvi tr.dno{
    border-bottom: black 2px solid;
}
#legend{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: min-content;
}
#legend h4{
    margin: 0px 0px 0.5em;
}
#legend .ucionica{
    display: inline-flex;
    padding: 2px;
}
main{
    display: grid;
    grid-template-columns: min-content auto;
}
nav{
    background-color: blue;
}
nav > ul{
    display: flex;
    flex-direction: row;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li{
    margin: 0;
    padding: 0;
}
nav li a{
    display: block;
    background-color: lightblue;
    text-align: center;
    font-size: 14pt;
    padding: 2px 10px;
    border: blue 1px solid;
    text-decoration: none;
}
a.head, a.headsvi{
    background-color: #0000fa;
    color: white;
    font-size: 16pt;
    padding: 5px 10px;
    display: inline-block;
    position: relative;
}
nav li a:hover{
    background-color: white;
    color: black;
}
.podmeni{
    display: none;
    position: absolute;
    min-width: 100px;
    z-index: 2;
}
.podmeni.otvoren{
    display: block;
}

.uc1 {background-color: #E6B8B7FF;color: #000000FF;} .uc2 {background-color: #FABF8FFF;color: #000000FF;} .uc3 {background-color: #CCC0DAFF;color: #000000FF;} .uc4 {background-color: #FF66FFFF;color: #FFFFFFFF;} .uc5 {background-color: #0070C0FF;color: #FFFFFFFF;} .uc6 {background-color: #0070C0FF;color: #000000FF;} .uc7 {background-color: #DA9694FF;color: #000000FF;} .uc8 {background-color: #000000FF;color: #FFFFFFFF;} .uc101 {background-color: #CCFF99FF;color: #000000FF;} .uc103 {background-color: #FFC000FF;color: #000000FF;} .uc104 {background-color: #66FFFFFF;color: #000000FF;} .uc105 {background-color: #E26B0AFF;color: #000000FF;} .uc106 {background-color: #002060FF;color: #FFFFFFFF;} .uc108 {background-color: #92D050FF;color: #000000FF;} .uc109 {background-color: #FF0000FF;color: #FFFFFFFF;} .uc110 {background-color: #FFFF99FF;color: #000000FF;} .uc111 {background-color: #FFFF00FF;color: #000000FF;} .uc112 {background-color: #C4D79BFF;color: #000000FF;} .uc114 {background-color: #595959FF;color: #FFFFFFFF;} .uc116 {background-color: #948B54FF;color: #000000FF;} .uc117 {background-color: #A6A6A6FF;color: #000000FF;} .uc118 {background-color: #C5D9F1FF;color: #000000FF;} .uc119 {background-color: #00B050FF;color: #FFFFFFFF;} .uc120 {background-color: #7030A0FF;color: #FFFFFFFF;} .uc130 {background-color: #FCD5B4FF;color: #000000FF;} .uc131 {background-color: #00B0F0FF;color: #000000FF;} .uc1091 {background-color: #963634FF;color: #FFFFFFFF;} .uc1092 {background-color: #808080FF;color: #FFFFFFFF;} #sedmicaNav{
    width: max-content;
}
#sedmicaNav h2, #sedmicaNav h3{
    margin: 0;
}
#skipSada {
    position: sticky;
    top: 15px;
    max-width: 300px;
    margin-bottom: 1em;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
}
#skipSada a {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    justify-self: center;
    text-decoration: none;
    padding: 5px;
    border: solid blue 1px;
    border-radius: 10px;
    background-color: lightblue;
}
.raspored{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-color: black;
    border-style: solid;
    border-width: 0px;
    margin-left: 2px;
}
.raspored .dan{
    width: 350px;
    border: black 2px solid;
    margin-left: -2px;
    position: relative;
}
#rasporedprofesora.raspored .dan {
    width: 200px;
}
.dan.popodne{
    background-color: lightgray;
}
.raspored div.dan.danas{
    background-color: lightblue;
}
.danas .proslo{
    background-color: darkblue;
    color: lightblue;
    border-color: white;
}
.danas .trenutno{
    background-color: yellow;
}
span.danaslabel {
    position: absolute;
    top: -15px;
    background: white;
    border: 1px solid;
    padding: 5px 10px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
}
.dan h3{
    text-align: center;
    margin: 0;
    padding: 1em 0;
}
.raspored .cas{
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: -1px;
    margin-bottom: -1px;
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
}
.cas .brojcasBox {
    font-size: 14pt;
    display: block;
    text-align: center;
    padding: 2em 0;
    border-right: 1px solid;
    position: relative;
}
.brojcasBox .trajanjeOd, .brojcasBox .trajanjeDo {
    display: block;
    position: absolute;
    font-size: 10pt;
    left: 50%;
    transform: translate(-50%, 0);
}
.trajanjeOd {
    top: 0;
}
.trajanjeDo {
    bottom: 0;
}
.cas h4, .cas h5{
    margin: 0;
    display: block;
    text-align: center;
}
.cas .grupa0 h4{
    font-size: 14pt;
}

.grupa0, .grupa1, .grupa2{
    display: grid;
    align-items: center;
    justify-content: center;
}
.cas .grupa0{
    grid-column: 2/4;
    grid-template-columns: auto;
}
.grupa1, .grupa2{
    grid-template-rows: auto;
}
.grupa2{
    border-left: 1px solid;
}
.cas  .ucionica{
    position: absolute;
    align-self: end;
    justify-self: right;
    border-bottom: 0;
    border-right: 0;
    padding: 0 5px;
}
.cas .grupaname{
    position: absolute;
    align-self: start;
    justify-self: left;
    border-bottom: 1px solid;
    border-right: 1px solid;
    padding: 0 5px 2px 5px;
}
.cas .period{
    position: absolute;
    align-self: end;
    justify-self: left;
    padding: 0 5px;
    font-size: 0.8em;
}

h2 a{
    text-decoration: none;
}

#promjeneBtn {
    background-color: lightblue;
    color: blue;
    font-size: 12pt;
    padding: 5px 10px;
    margin: 50px 0;
}
#promjene {
    margin-top: -50px;
}
#podesavanjeViseProf{
    margin: 5px;
    display: grid;
    grid-template-columns: min-content 50px min-content 50px min-content;
    grid-template-rows: auto auto;
}
#podesavanjeViseProf button{
    font-size: 16pt;
    justify-self: center;
    align-self: center;
}
#podesavanjeViseProf #spisakProfesora{
    grid-row: 1/3;
}
#podesavanjeViseProf #dodajBtn{
    grid-column: 2;
    grid-row: 1;
}
#podesavanjeViseProf #ukloniBtn{
    grid-column: 2;
    grid-row: 2;
}
#podesavanjeViseProf #odabraniProfesori{
    grid-column: 3;
    grid-row: 1/3;
}
#podesavanjeViseProf #goreBtn{
    grid-column: 4;
    grid-row: 1;
}
#podesavanjeViseProf #doljeBtn{
    grid-column: 4;
    grid-row: 2;
}
#podesavanjeViseProf #podesiVisBtn{
    grid-column: 5;
    grid-row: 1/3;
}
#otvoriPanelViseProf{
    margin: 15px;
}

@media only screen and (max-width: 600px) {
    #rasporedprofesora.raspored .dan {
        width: 350px;
    }
}
@page {
    size: A4 landscape;
    margin: 0;
}
@media print {

    .raspored .dan {
        width: 56mm;
    }
    nav, #sedmicaNav, #skipSada, .danaslabel, #promjeneBtn, #promjene {
        display: none;
    }
    body{
        margin:6mm;
    }
    .danas, .danas .proslo{
        background-color: unset;
        color: black;
    }
    .cas .grupa0 h4{
        font-size: 12pt;
    }
    .cas .grupa1 h4, .cas .grupa2 h4{
        font-size: 10pt;
    }
    .dan h3{
        padding: 0.5em 0;
    }
    .cas .brojcasBox {
        font-size: 12.5pt;
        padding: 2em 0;
    }
    #rasporedprofesora .cas .brojcasBox {
        padding: 1em 0;
    }
    .brojcasBox .trajanjeOd, .brojcasBox .trajanjeDo {
        font-size: 9pt;
    }
    .cas .ucionica, .cas .grupaname {
        font-size: 10pt;
    }
    .raspored div.dan.danas{
        background-color: unset;
    }
    .raspored div.danas.popodne, .raspored div.popodne {
        background-color: #D9D9D9;
    }
    .danas .trenutno{
        background-color: unset;
    }
}