body {
    margin: 0;
    font-style: normal;
    font-family: Robo,Arial, Helvetica, sans-serif;
    font-size: 12pt;
    width: available;
}
.siroko{
    min-width: max-content;
}
header {
    background-color: blue;
    padding: 20px;
    color: white;
    overflow: auto;
}
header h1 {
    margin: 10px;
    display: inline;
}
header p{
    float: right;
    font-weight: bold;
    margin: 0 0 10px 0;
}
/** Навигација */
nav#mainnav {
    margin: 0 0 10px 0;
    display: grid;
    grid-template-columns: auto min-content;
}
nav#mainnav ul{
    padding: 0;
    margin: 0 15px;
    display: flex;
    flex-direction: row;
}
nav#mainnav .korisnik{
    grid-column: 2;
    justify-self: right;
    margin-right: 15px;
}
nav#mainnav .uloge{
    grid-column: 1;
}
nav#mainnav ul li {
    display: inline;
    width: max-content;
}
nav#mainnav li a{
    padding: 5px 10px;
    border: blue 1px solid;
    margin: 0;
    text-decoration: none;
    border-radius: 0 0 5px 5px;
    background-color: #e3e3ff;
    display: block;
}
main{
    padding: 0;
    min-height: 500px;
}
.glavnisamenijem {
    display: grid;
    grid-template-columns: 300px auto;
    width: min-content;
}
main .dobrodosli, main .obavjestenjeKutija{
    border: 1px black solid;
    max-width: 800px;
    padding: 20px;
    text-align: center;
    margin: 0 auto;
}
.glavnisamenijem nav {
    grid-column: 1;
    background-color: blue;
    color: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px 0 5px 5px;
    margin: 0 5px 0 0;
}
.glavnisamenijem nav *{
    margin: 0;
    padding: 0;
}
.glavnisamenijem nav a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 5px;
    margin-left: 10px;
}
.glavnisamenijem nav a.selected,
.glavnisamenijem nav a:hover{
    background-color: white;
    color: blue;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
#ocjeneviewapp nav h2,
#ocjeneviewapp nav h3{
    font-size: 12pt;
}
#roditeljviewapp nav ul,
#ocjeneviewapp nav ul{
    list-style: none;
}
#ocjeneviewapp nav h3{
    border-bottom: white 1px solid;
    padding-top: 6pt;
}

#ocjeneviewapp li>h3{
    margin-bottom: 0;
}
#ocjeneviewapp #ocjeneview{
    grid-column: 2;
    grid-row: 1;
}

.dugmadPanel{
    display: flex;
    flex-direction: row;
}
.dugmadPanel button{
    margin: 10px 10px 10px 0px;
    padding: 5px 25px;
}
#masovnoadd{
   /* margin: -10px 0 10px 0; */
}
.masovnoDodavanje {
    display: grid;
    grid-template-columns: max-content min-content max-content;
    border: solid 1px;
    padding: 5px 0;
    margin-top: 10px;
}
.masovnoDodavanje label,
.masovnoDodavanje select,
.masovnoDodavanje input{
    margin: 5px;
}
.masovnoDodavanje select,
.masovnoDodavanje input,
.podesavanjeMasovnog select,
.podesavanjeMasovnog input{
    font-size: 12pt;
}
.podesavanjeMasovnog label,
.masovnoDodavanje label{
    align-self: center;
}
.podesavanjeMasovnog{
    margin: 5px 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    max-width: 80vw;
}
.podesavanjeMasovnog div{
    display: flex;
    flex-direction: row;
    width: max-content;
    margin-right: 10px;
    align-content: center;
}
.podesavanjeMasovnog div label{
    margin-right: 5px;
}

#ocjeneOverlay{
    grid-column: 2;
    grid-row: 1;
    background-color: rgba(255,255,255,0.5);
    height: 100%;
    z-index: 100;
}
.ocjenaaddwin {
    width: 500px;
    padding: 10px;
    background-color: white;
    border: solid black 1px;
    position: fixed;
    top: 0;
    right: 0;
    display: grid;
    grid-template-columns: 50% 50%;
}
.windugme, button {
    color: black;
    font-weight: bold;
    padding: 10px 10px;
    border: blue 1px solid;
    margin: 0 10px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #e3e3ff;
    display: block;
    width: max-content;
    text-align: center;
    justify-self: center;
}
button:disabled{
    background-color: #f6f4ff;
    color: #b5b5b5;
}
.ocjenaaddwin .windugme{
    grid-row: 2;
    justify-self: center;
    width: 150px;
}
.ocjenadugmadcont {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -1px;
    right: 36px;
    margin-top: 6px;
    justify-content: center;
}
.ocjenadetail button {
    padding: 5px 10px;
    margin: 0 auto 5px;
    position: absolute;
}
.promjeniDugme{
    top: 5px;
    right: 35px;
}
.obrisiDugme{
    bottom: 0;
    right: 5px;
}

.ocjenaaddkontrolestack{
    grid-column: 1/3;
    grid-row: 1;
    display: grid;
    grid-template-columns: max-content auto;
    font-size: 12pt;
    row-gap: 10px;
    margin-bottom: 10px;
}
.ocjenaaddkontrolestack select,
.ocjenaaddkontrolestack input,
.ocjenaaddkontrolestack textarea,
.ocjenaaddkontrolestack label{
    font-size: 12pt;
}
.ocjenaaddkontrolestack label{
    font-weight: bold;
    margin-right: 0.5em;
}
.dodajOcjenuDug{
    align-self: center;
    margin-right: 5px;
    margin-left: 5px;
    padding: 5px 10px;
    font-size: 16pt;
    color: black;
    border: black solid 1px;
    background-color: #e3e3ff;
    display: block;
    text-decoration: none;
    justify-self: right;
}
.ucenikInfo .dodajOcjenuDug {
    grid-column: 2;
    grid-row: 1/4;
}






#ocjeneview .ucenikOcjene{
    display: grid;
    grid-template-columns: 200px auto;
    border: black solid 1px;
}
.ucenikOcjene.nijeredovan{
    background-color: #FFAAAA;
}
.predmetInfo{
    display: grid;
}
.predmetInfo h3{
    margin: 0 0 0 10px;
    align-self: center;
}
.ucenikInfo {
    display: grid;
    grid-template-columns: 50px auto;
    grid-template-rows: 1fr 1fr 1fr;
    font-weight: bold;
    font-size: 14pt;
}
.ucenikInfo .rbr{
    grid-column: 1;
    grid-row: 1/4;
    align-self: center;
    font-size: 14pt;
    font-weight: bold;
    justify-self: center;
}
.ucenikInfo .ime,
.ucenikInfo .imeRoditelja,
.ucenikInfo .prezime{
    margin: .3em 0;
    align-self: center;
}
.ucenikInfo .ime{
    grid-column: 2;
    grid-row: 3;
}
.ucenikInfo .imeRoditelja{
    grid-column: 2;
    grid-row: 2;
}
.ucenikInfo .prezime{
    grid-column: 2;
    grid-row: 1;
}
.ucenikOcjene .ocjenearea{
    grid-column: 2;
    display: flex;
    flex-direction: row;
}

.IUTRGrupa {
    display: grid;
    grid-template-rows: auto 1fr 1fr 1fr;
    grid-template-columns: auto auto auto auto auto;
    border: solid black;
    border-width: 0 3px 0 0;
}
.IUTRGrupa h4{
    grid-column: 1/6;
    margin: 5px 0;
    text-align: center;
}
.IUTRGrupa .teoretskeOcjene,
.IUTRGrupa .vjezbeOcjene,
.IUTRGrupa .praksaOcjene{
    display: flex;
    flex-direction: row;
}
.IUTRGrupa .teoretskeOcjene,
.IUTRGrupa div.zakljucnaТ,
.IUTRGrupa .zakljucnaТP
{
    grid-row: 2;
}
.IUTRGrupa .vjezbeOcjene,
.IUTRGrupa div.zakljucnaВ,
.IUTRGrupa .zakljucnaВP
{
    grid-row: 3;
}
.IUTRGrupa .praksaOcjene,
.IUTRGrupa div.zakljucnaП,
.IUTRGrupa .zakljucnaПP
{
    grid-row: 4;
}
.IUTRGrupa .teoretskeOcjene,
.IUTRGrupa .vjezbeOcjene,
.IUTRGrupa .praksaOcjene
{
    grid-column: 1;
}
.IUTRGrupa .zakljucnaТ,
.IUTRGrupa .zakljucnaВ,
.IUTRGrupa .zakljucnaП{
    grid-column: 2;
}
.IUTRGrupa .ocjena.obrisana{
    background: linear-gradient(to bottom right, white, white 48%, red 48%, red 52%, white 52%);
}
.IUTRGrupa .ocjena.zakljucnaO{
    grid-column: 4;
}
.IUTRGrupa .zakljucnaТP,
.IUTRGrupa .zakljucnaВP,
.IUTRGrupa .zakljucnaПP{
    grid-column: 3;
}
.IUTRGrupa .zakljucnaТP,
.IUTRGrupa .zakljucnaВP,
.IUTRGrupa .zakljucnaПP{
    grid-column: 3;
}
.IUTRGrupa .ocjena.zakljucnaOP{
    grid-column: 5;
}
.IUTRGrupa .ocjena.zakljucnaO,
.IUTRGrupa .ocjena.zakljucnaOP{
    grid-row: 2/5;
    height: auto;
}

.IUTRGrupa div.ocjena{
    border-width: 0 1px 0 0;
    margin: 0;
}
.IUTRGrupa .teoretskeOcjene,
.IUTRGrupa .vjezbeOcjene,
.IUTRGrupa .praksaOcjene{
    border: solid black;
    border-width: 1px 0 0 0;
}



.ocjenearea .ocjena{
    width: 40px;
    /*height: 57px;*/
    padding: 3px 0 0 0;
    display: grid;
    grid-template-rows: 11pt auto;
    justify-items: center;
    border: black solid 1px;
    margin: -1px 0 0 -1px;
    position: relative;
    background-color: white;
}
.ocjenearea .zakljucnabackground{
    grid-column: 2 / 6;
    grid-row: 2 / 5;
    color: #C00000;
    background-color: #ffE0E0;
    border: black solid 1px;
    margin: 0 -1px -1px -1px;
}
.ocjenearea .ocjena.zakljucnaO,
.ocjenearea .ocjena.zakljucnaТ,
.ocjenearea .ocjena.zakljucnaП,
.ocjenearea .ocjena.zakljucnaВ{
    color: #C00000;
    background-color: #ffE0E0;
    border-width: 1px;
    margin: 0 0 -1px -1px;
}
div.tromesecje .ocjena.zakljucnaO,
div.tromesecje .ocjena.zakljucnaТ,
div.tromesecje .ocjena.zakljucnaП,
div.tromesecje .ocjena.zakljucnaВ,
div.tromesecje .ocjena.zakljucnaOP,
div.tromesecje .ocjena.zakljucnaТP,
div.tromesecje .ocjena.zakljucnaПP,
div.tromesecje .ocjena.zakljucnaВP
{
    background-color: #ffC0C0;
}
.ocjenearea .ocjena.zakljucnaOP,
.ocjenearea .ocjena.zakljucnaТP,
.ocjenearea .ocjena.zakljucnaПP,
.ocjenearea .ocjena.zakljucnaВP{
    color: blue;
    background-color: #ffD0D0;
    border-width: 1px;
    margin: 0 0 -1px -1px;
}
.ocjena .vrsta{
    font-size: 11pt;
}
.ocjena .vrijednostOcjene{
    font-weight: bold;
    font-size: 24pt;
    align-self: center;
    grid-row: 2;
}
.IUTRGrupa.zaglavlje .ocjena{
    grid-template-rows: auto;
    background-color: transparent;
    width: auto;
    grid-template-columns: auto auto;
}
.IUTRGrupa.zaglavlje .vrijednostOcjene{
    grid-row: 1;
    align-self: center;
    color: black;
    margin: 0 5px;
}
.IUTRGrupa.sklopljeno .teoretskeOcjene,
.IUTRGrupa.sklopljeno .vjezbeOcjene,
.IUTRGrupa.sklopljeno .praksaOcjene,
.ishod1sklopljen .ishod1 .teoretskeOcjene,
.ishod1sklopljen .ishod1 .vjezbeOcjene,
.ishod1sklopljen .ishod1 .praksaOcjene,
.ishod2sklopljen .ishod2 .teoretskeOcjene,
.ishod2sklopljen .ishod2 .vjezbeOcjene,
.ishod2sklopljen .ishod2 .praksaOcjene,
.ishod3sklopljen .ishod3 .teoretskeOcjene,
.ishod3sklopljen .ishod3 .vjezbeOcjene,
.ishod3sklopljen .ishod3 .praksaOcjene,
.ishod4sklopljen .ishod4 .teoretskeOcjene,
.ishod4sklopljen .ishod4 .vjezbeOcjene,
.ishod4sklopljen .ishod4 .praksaOcjene,
.ishod5sklopljen .ishod5 .teoretskeOcjene,
.ishod5sklopljen .ishod5 .vjezbeOcjene,
.ishod5sklopljen .ishod5 .praksaOcjene,
.ishod6sklopljen .ishod6 .teoretskeOcjene,
.ishod6sklopljen .ishod6 .vjezbeOcjene,
.ishod6sklopljen .ishod6 .praksaOcjene,
.ishod7sklopljen .ishod7 .teoretskeOcjene,
.ishod7sklopljen .ishod7 .vjezbeOcjene,
.ishod7sklopljen .ishod7 .praksaOcjene,
.ishod8sklopljen .ishod8 .teoretskeOcjene,
.ishod8sklopljen .ishod8 .vjezbeOcjene,
.ishod8sklopljen .ishod8 .praksaOcjene,
.ishod9sklopljen .ishod9 .teoretskeOcjene,
.ishod9sklopljen .ishod9 .vjezbeOcjene,
.ishod9sklopljen .ishod9 .praksaOcjene{
    display: none;
}
.ishod1sklopljen .ishod1 .zakljucnaТP,
.ishod1sklopljen .ishod1 .zakljucnaВP ,
.ishod1sklopljen .ishod1 .zakljucnaПP,
.ishod2sklopljen .ishod2 .zakljucnaТP,
.ishod2sklopljen .ishod2 .zakljucnaВP,
.ishod2sklopljen .ishod2 .zakljucnaПP,
.ishod3sklopljen .ishod3 .zakljucnaТP,
.ishod3sklopljen .ishod3 .zakljucnaВP,
.ishod3sklopljen .ishod3 .zakljucnaПP,
.ishod4sklopljen .ishod4 .zakljucnaТP,
.ishod4sklopljen .ishod4 .zakljucnaВP,
.ishod4sklopljen .ishod4 .zakljucnaПP,
.ishod5sklopljen .ishod5 .zakljucnaТP,
.ishod5sklopljen .ishod5 .zakljucnaВP,
.ishod5sklopljen .ishod5 .zakljucnaПP,
.ishod6sklopljen .ishod6 .zakljucnaТP,
.ishod6sklopljen .ishod6 .zakljucnaВP,
.ishod6sklopljen .ishod6 .zakljucnaПP,
.ishod7sklopljen .ishod7 .zakljucnaТP,
.ishod7sklopljen .ishod7 .zakljucnaВP,
.ishod7sklopljen .ishod7 .zakljucnaПP,
.ishod8sklopljen .ishod8 .zakljucnaТP,
.ishod8sklopljen .ishod8 .zakljucnaВP,
.ishod8sklopljen .ishod8 .zakljucnaПP,
.ishod9sklopljen .ishod9 .zakljucnaТP,
.ishod9sklopljen .ishod9 .zakljucnaВP,
.ishod9sklopljen .ishod9 .zakljucnaПP{
   grid-column: 2;
}
.ishod1sklopljen .ishod1 .zakljucnaOP,
.ishod2sklopljen .ishod2 .zakljucnaOP,
.ishod3sklopljen .ishod3 .zakljucnaOP,
.ishod4sklopljen .ishod4 .zakljucnaOP,
.ishod5sklopljen .ishod5 .zakljucnaOP,
.ishod6sklopljen .ishod6 .zakljucnaOP,
.ishod7sklopljen .ishod7 .zakljucnaOP,
.ishod8sklopljen .ishod8 .zakljucnaOP,
.ishod9sklopljen .ishod9 .zakljucnaOP{
   grid-column: 4;
}
.ocjena .ocjenadetail{
    padding: 0 16px;
    position: absolute;
    width: 300px;
    min-height: 100px;
    border: solid 1px black;
    top: 100%;
    background-color: white;
    z-index: 50;
    display: none;
}
.ocjenearea div.ocjena.odabrana {
    background-color: lightblue;
}
.odabrana .ocjenadetail {
    display: block;
}
.closebutton {
    border: 1px solid black;
    font-size: 16pt;
    padding: 3px 7px;
    cursor: default;
}
.ocjenadetail .closebutton{
    position: absolute;
    right: -1px;
    top: -1px;
}
.error{
    color: red;
}


footer {
    text-align: center;
}
.hidden {
    display: none;
}
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: grid; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 99999;
}
#overlay.hidden {
    display: none;
}
#loadstatus{
    color: white;
    min-height: 240px;
    width: 300px;
    grid-template-rows: 200px auto;
    align-self: center;
    justify-self: center;
}
#loadstatus p{
    margin: 0;
    padding: 5px 0;
    text-align: center;
    font-weight: bold;
}
.spinningthing{
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-image: url("/loading.png");
    background-position: center;
    background-size: cover;
    -webkit-animation: 3s linear infinite spin;
    animation: 3s linear infinite spin;
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);}
}
div.editable-c {
    display: grid;
    grid-template-columns: 1fr auto;
}
.editable-c select{
    grid-row: 1;
    grid-column: 1;
}
.editable-c input{
    grid-row: 1;
    grid-column: 1;
    display: none;
}
.editable-c button{
    margin: 0 0 0 10px;
    padding: 0 10px;
    grid-row: 1;
    grid-column: 2;
}
.editable-c.edit input{
    display: block;
}
.grupica .obicneOcjene {
    display: flex;
    grid-row: 2;
    grid-column: 1;
    border: solid black;
    border-width: 1px 0 0 0;
}
.grupica.sklopljen .obicneOcjene {
    display: none;
}
.grupica {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto 1fr;
    border: solid black;
    border-width: 0 1px 0 0;
}
.grupica h5 {
    grid-column: 1/4;
    grid-row: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    min-width: max-content;
}
.ocjenearea .grupica div.opsta {
    grid-row: 2;
    grid-column: 2;
    color: #C00000;
    background-color: #ffE0E0;
    border-top-width: 1px;
}
.ocjenearea .grupica div.popravljena {
    grid-row: 2;
    grid-column: 3;
    color: blue;
    background-color: #ffE0E0;
    border-top-width: 1px;
}
.ocjenearea .grupica.grupica.sklopljen div.popravljena {
    grid-column: 2;
}


.bezOblikaNastave .vjezbeOcjene,
.bezOblikaNastave .praksaOcjene{
    display: none;
}
.bezOblikaNastave .IUTRGrupa{
    grid-template-rows: auto 80px;
    border-width: 0 1px 0 2px;
}
.bezOblikaNastave .IUTRGrupa:first-of-type{
    border-left-width: 3px;
}
.bezOblikaNastave div.ocjena{
    border-bottom-width: 1px;
    margin-bottom: -1px;
}

.bezOblikaNastave .teoretskeOcjene{
    grid-row: 2/4;
    /*display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;*/
}

.kod {
    font-family: "Consolas", "Menlo", "Courier", monospace;
}
#pregledipralvjenjekodova ul {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

/* The Modal (background) */
#modal-container {
    /*display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 200; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-window {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    position: relative;
    max-width: 700px;
}
#modal-window-content {

}

/* The Close Button */
#modal-container .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 5px;
    top: 5px;
}
#modal-dugmad {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    width: max-content;
}
#modal-dugmad li {

}
#modal-dugmad li a {
    padding: 10px 0px;
    border: blue 1px solid;
    margin: 0 10px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #e3e3ff;
    display: block;
    width: 150px;
    text-align: center;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#kopiranjedialog{
    width: 400px;
    padding: 10px;
    background-color: white;
    border: solid black 1px;
    display: grid;
    grid-template-columns: 50% 50%;
}
#kontrolekopiranja{
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
}
#kopiranjedialog h3{
    grid-column: 1/3;
    margin-top: 0px;
    text-align: center;
}
#kontrolekopiranja label{
    font-weight: bold;
}
#brIshodOcjena, #brTromOcjena{
    margin-bottom: 1em;
}
#kopiranjedialog button{
    width: 70%;
}
#kontrolekopiranja p{
    margin: 0 0 0.5em 0;
}
.toolbar{
    display: flex;
    flex-direction: row;
    margin: 5px 0;
}
div.toolbar button{
    margin: 0 5px 0 0;
}

#podesavanjebox{
    width: 65vw;
}
#podesavanjebox #pravoStatus{
    font-weight: bold;
}
#podesavanjebox #pravoStatus.granted{
    color: blue;
}
#podesavanjebox #pravoStatus.denied{
    color: red;
}
#podesavanjebox #notifSettings{
    display: grid;
    grid-template-columns: max-content min-content;
    margin-bottom: 20px;
}
#rasporedapp.glavnisamenijem {
    width: 100%;
}
#podesiPanel label {
    font-weight: bold;
}
#podesiPanel #odObrisi,
#podesiPanel #doObrisi{
    display: inline-block;
    padding: 0;
}
#rasporedInput #rasinput {
    width: 100%;
    height: 20em;
    margin: 10px 0;
}
#rasporedInput {
    margin: 0 10px;
}
#rasporedInput #inpRasBtn,
#rasporedInput #sendBtn{
    width: 150px;
}
#rasporedBrisanje #spisakOdjeljenja {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}
#spisakOdjeljenja ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#spisakOdjeljenja .razredCheck {
    font-weight: normal;
    font-size: 12pt;
}
#spisakOdjeljenja h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
}
#spisakOdjeljenja li {
    margin-bottom: 1em;
}
#spisakOdjeljenja ul {
    margin-top: 1.2em;
}
#nepopravljenebox>ul{
    margin: 0;
    padding: 0;
}
#nepopravljenebox ul li{
    font-weight: bold;
    font-size: larger;
    background-color: blue;
    color: white;
    margin: 5px;
    padding: 5px 5px 0 10px;
    border-radius: 10px;
    list-style: none;
}
#nepopravljenebox ul li li{
    font-weight: normal;
    font-size: initial;
    border-bottom: none;
    background-color: transparent;
    color: black;
    padding: 0;
    border-radius: 0px;
}
#nepopravljenebox ul ul{
    background-color: lightblue;
    padding: 5px;
    margin: 5px -5px 0 0;
}
@media only screen and (max-width: 800px) {
    .modal-window{
        position: fixed;
        top:40vh;
        margin: 0;
        width: 90vw;
    }
    .dodajOcjenuDug{
        padding: 0 5px;
        font-size: 12pt;
    }
    body{
        min-width: auto;
    }
    .glavnisamenijem.odabran nav{
        display: none;
    }
    .predmetInfo,
    .ucenikInfo{
        font-size: 14pt;
        display: inline-flex;
        margin-top: 25px;
    }
    .ucenikInfo span{
        padding-left: 5px;
    }
    #roditeljviewapp #ocjeneview,
    #ocjeneviewapp #ocjeneview,
    #ocjeneOverlay,
    .glavnisamenijem .glavnasekcija{
        grid-column: 1/3;
    }
    #ocjeneview .ucenikOcjene{
        grid-template-rows: auto auto;
        grid-template-columns: none;
    }
    .ucenikOcjene .ocjenearea{
        grid-row: 2;
        grid-column: 1;
        border-top: black solid 1px;
    }
    .ocjenearea .ocjena{
        height: 35px;
        width: 20px;
    }
    .ocjena .vrijednostOcjene{
        font-size: 13pt;
    }

    header p{
        float: none;
        margin: 0;
    }
    nav#mainnav ul{
        flex-direction: column;
    }
    nav#mainnav{
        grid-template-columns: auto auto;
    }
    header h1{
        margin: 0;
        padding: 0;
    }
    .IUTRGrupa.samoopste .ocjena{

    }
    .ocjenaaddwin{
        position: relative;
        width: 94vw;
        top: 0;
        left: 0;
    }
    .ocjenaaddkontrolestack {
        display: flex;
        flex-direction: column;
    }
    .toolbar{
        flex-direction: column;
    }
    div.toolbar button{
        margin: 0 0 5px 0;
    }
    .podesavanjeMasovnog{
        flex-direction: column;
    }
}