table th {
    font-family: 'Cinzel', serif;
    text-transform: lowercase;
}


.navbar {
    margin-top: 20px;
    margin-bottom: 40px;
    border: none;
}

.navbar .logo{
    display: block;
    margin-right: 5%;
}

.navbar img {
    height: 3em;
    padding-left: 15px;
}

.banner {
    width: 65%;
    opacity: 0.6;
    font-style: italic;
    text-align: center;
    padding-left: 50px;
}

.banner p {
    display: inline-block;
}

.banner .phnumber {
    font-size: 14px;
}

.fa-envelope {
    margin-right: 5px;
    font-size: 19px;
}

.fa-phone-alt,
.fa-map-marker-alt {
    margin-right: 5px;
    margin-left: 15px;
}

.container,
.container-fluid {
    min-height: 100vh;
}

.container-fluid {
    width: 90%;
}

.background {
    background-image: url(../img/bck.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}

.background .loginForm {
    border-radius: 5px;
    height: auto;
    width: 500px;
    padding: 20px 35px;
    text-align: center;
    background-color: #272b30;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    border: 4px solid rgba(245, 245, 245, 0.2);
}

.loginForm img {
    width: 100%;
    margin-bottom: 20px;
}

.loginForm label {
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 18px;
}

.loginForm input {
    text-align: center;
    margin: 0;
    font-weight: 600;
}

.loginForm input::placeholder {
    text-transform: lowercase;
    opacity: 0.7;
    font-weight: 400;
}

.loginForm button {
    width: auto;
}


/*-- Parents page --*/

.navigacija {
    margin-bottom: 25px;
}

.parentsTabBar {
    margin-bottom: 15px;
}

.parentsHeader {
    margin-bottom: 50px;
}

.parentsHeader>div {
    display: inline-block;
}

.parentsHeader .ucenik {
    width: auto;
    margin-right: 35px;
}

.parentsHeader .odeljenje {
    width: 70px;
    margin-right: 15px;
}

.parentsHeader .razredni {
    margin-left: 150px;
    
}
 
.studentGredes .fa-comment {
    font-size: 22px;
    margin-top: 50px;
    display: inline-block;
    opacity: 0.5;
}

.studentGredes .fa-comment:hover {
    font-size: 25px;
    opacity: 1;
}

.studentGredes .kontaktirajRoditelja {
    opacity: 0.5;
}

.prof {
    color: red;
}

.studentGredes table {
    max-width: 100%;
}

.studentGredes table .predmet {
    min-width: 180px;
    max-width: 180px;
}

.studentGredes input {
    width: 50px;
    padding: 0;
    display: inline-block;
    margin-bottom: 5px;
    background: none;
    border: 1px solid #4d4d4d;
    color: white;
    text-align: center;
}

.studentGredes input:focus {
    background: none;
    color: white;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.zakljuceno {
    border: 2px solid green;
    height: 48px;
    font-size: 22px;
}

.prosek td span {
    font-size: 22px;
}

.studentGredes .roditeljOcene {
    background: none;
}

.studentGredes .zakljucenoRoditelj {
    background: none;
}

.prosekOcena {
    text-align: center;
}

.prosekOcena label {
    color: gray;
    margin-top: 30px;
}

.prosekOcena input[type="number"] {
    width: 70px;
    color: gray;
    font-size: 20px;
}


/*-- Poruke chat box --*/

.card {
    max-width: 35rem;
}

.card-body {
    padding: 0;
}

.izaberiRoditelja {
    display: inline-block;
    width: auto;
    margin-right: 15px;
}

.iconRoditelj {
    display: inline-block;
    margin-left: 10px;
}

#chatOnline {
    display: inline-block;
    margin-right: 1px;
}

.online {
    color: rgb(55, 214, 55);
    display: inline-block;
}
.offline {
    color: rgb(206, 19, 19);
    display: inline-block;
}

.chatWindow {
    background-color: #717171;
    height: 400px;
    border-radius: 5px;
    padding: 10px;
    padding-right: 3px;
    color: white;
    overflow-y: scroll;
}

.chatPoruka {
    display: inline-block;
    width: auto;
    margin: 1px;
    padding: 8px 15px;
    clear: both;
}

.primljenePoruke {
    background-color: #272b30;
    border-radius: 25px 0 25px 25px;
    float: right;
    margin-left: 20%;
}

.poslatePoruke {
    background-color: #e9ecef;
    color: #272b30;
    border-radius: 25px 25px 25px 0;
    float: left;
    margin-right: 20%;
}

.poslatePoruke span {
    color: rgb(224, 101, 0);
}

.card-body button {
    width: 100%;
}

.card-body textarea {
    width: 100%;
    background-color: #d0d0d0;
}

/*-- Opravdanja --*/

.opravdanje {
    /* border: 1px dashed white; */
    width: 500px;
    margin-top: 15px;
    display: inline-block;
}

.opravdanje label {
    margin-top: 7px;
    margin-bottom: 5px;
}

.opravdanje span {
    font-size: 18px;
}

.opravdanje select {
    display: inline;
}

.opravdanje button {
    width: auto;margin-bottom: 5px;
    margin-left: 15px;
}

.opravdanjeWrapper {
    /* border: 1px dashed white; */
    display: flex;
}

#svaOpravdanja {
    width: 300px;
}

.opravdanje .primnjenaOpravdanja {
    /* border: 1px dashed white; */
    height: auto;
    margin-top: 35px;
}

.primnjenaOpravdanja button{
    margin-left: 65px;
}

.primnjenaOpravdanja table {
    text-align: center;
    margin-top: 20px;
    width: 85%;
}

.primnjenaOpravdanja table .opcije {
    width: 130px;
}

.primnjenaOpravdanja table .opcije button {
    margin: 0;
    display: inline;
}

.opravdanjePrikaz {
    /* border: 1px dashed white; */
    width: 550px;
    margin-left: 150px;
}

.opravdanjePrikaz label {
    margin-top: 8px;
    margin-bottom: 2px;
}

.opravdanjePrikaz img {
    /* border: 1px dashed blue; */
    width: 100%;
    margin-bottom: 25px;
}

.opravdanjePrikaz button {
    width: 100%;
    display: block;
}






/*-- Profesor --*/

.profHeader #razred {
    margin-right: 10px;
}

.profHeader .prikazi {
    width: 150px;
}

.studentGredes #profZakljuceno {
    height: 48px;
    width: 80px;
    font-size: 22px;
    text-align: center;
}


/*-- Profesor otvorena vrata --*/

#otvorenaVrata {
    display: flex;
    vertical-align: top;
    padding: 15px 25px;
}

.otvorenaVrata {
    width: 350px;
    margin-right: 50px;
    height: auto;
}

.otvorenaVrata .card-body {
    padding: 20px;
}

.otvorenaVrata .card-body>div {
    display: inline-block;
    margin-bottom: 25px;
}

.otvorenaVrata select {
    width: 135px;
    margin-right: 15px;
}

.otvorenaVrata input[type="text"] {
    width: 130px;
}

.otvorenaVrataPrimljeno {
    width: 45rem;
}

.otvorenaVrataPrimljeno .card-body {
    padding: 5px 20px 10px 20px;
}

.otvorenaVrataPrimljeno .card-body>div {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
}

.otvorenaVrataPrimljeno .card-body>div>input {
    width: 140px;
}

.otvorenaVrataPrimljeno .prihvati {
    text-align: center;
}

.otvorenaVrataPrimljeno input[type="checkbox"] {
    border-radius: 5px;
    color: white;
    height: 25px;
    width: 25px;
}

.otvorenaVrataRoditelj {
    height: auto;
}

.otvorenaVrataRoditelj .izaberiProf select {
    display: inline-block;
    width: 200px;
}


/*----- Admin -----*/

.adminHeader {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

.tab_icon {
    margin-right:7px;
    color: rgb(50, 138, 50);
}

.adminHeader .headerBox {
    background-color: #32383e;
    border-radius: 8px;
    height: 150px;
    width: 180px;
    cursor: pointer;
    transition: 0.3s all ease;
}

.adminHeader .headerBox p {
    background-color: #515960;
    border-bottom: 1px solid #2c2c2d;
    font-size: 20px;
    border-radius: 8px 8px 0 0;
    padding: 5px 10px;
    margin-left: 1px;
    transition: 0.3s all ease;
}

.adminHeader .headerBox .tabWrapper {
    display: flex;
    justify-content: space-around;
}

.adminHeader .headerBox span {
    font-size: 50px;
}

.adminHeader .headerBox .ikonica {
    font-size: 80px;
}

.adminHeader .headerBox:hover {
    color: #515960;
}

.adminHeader .headerBox:hover p {
    color: #2a2a2b;
    padding-left: 20px;
    transition: 0.3s all ease;
    font-weight: 600;
}

.adminHeader .headerBox:hover span {
    color: #515960;
}

.adminHeader .headerBox:hover .ikonica {
    color: #515960;
}


/*--- Admin wrapper ---*/

.adminWrapper {
    /*border: 1px dashed whitesmoke;*/
    height: auto;
    display: flex;
    padding: 2px;
}

.adminWrapper .adminMain {
    width: 100%;
    height: auto;
    padding-left: 25px;
    margin-right: 30px;
    min-height: 70vh;
}

.adminWrapper .adminSidebar {
    /*border: 1px solid yellow;*/
    width: 270px;
    height: auto;
}


/*--- All classes ---*/










/*---- Trenutno online korisnici --*/



.onlineUsers {
    flex-basis: 250px;
}

.onlineUsers table {
    border: 1px solid black;
}

.onlineUsers table th {
    text-align: center;
}
.onlineUsers table td {
    text-align: left;
}

#comment {
    min-width: 50px;
}

#comment:hover .fa-comment {
    font-size: 20px;
}

.fa-comment {
    transition: 0.2s;
    cursor: pointer;
}




/*---- Tabelarni prikaz korisnika --*/

.adminListaKorisnika {
    /* border: 1px dashed green; */
    overflow: hidden;
}

.adminListaKorisnika .left {
    /* border: 1px dashed blue; */
    float: left;
    min-width: 55%;
}

.adminListaKorisnika .left table {
    background: #32383e;
    text-align: center;
}

.adminListaKorisnika .right {
    /* border: 1px dashed blue; */
    width: 33%;
    float: left;
    margin-left: 100px;
}

.adminListaKorisnika .right h3 {
    text-align: center;
}

.adminListaKorisnika .right label {
    margin-top: 5px;
    margin-bottom: 2px;
}

.adminListaKorisnika .right input[type="radio"] {
    height: 20px;
    width: 20px;
    display: inline-block;
    margin-top: 15px;
}

.adminListaKorisnika .right div button[type="button"] {
    width: 49%;
    margin-top: 35px;
    display: inline-block;
}

.detaljiRoditelja,
.detaljiUcitelja,
.detaljiProfesora,
.detaljiAdmina,
.detaljiDirektora {
    display: none;
}

.tabelaRoditelji,
.tabelaUcitelji,
.tabelaProfesori,
.tabelaAdmini,
.tabelaDirektori {
    display: none;
}

table .headline {
    background: #24282c;
    text-align: center;
    text-transform: lowercase;
}

table .adminOpcije {
    width: 100px;
}

table .adminOpcije .fas {
    display:inline-block;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s;
    font-size: 18px;
}

table .adminOpcije .fas:hover {
    opacity: 1;
}

table .adminOpcije .fa-trash-restore {
    margin-right: 10px;
}

table .adminOpcije .fa-trash-restore:hover {
    color: rgb(197, 50, 24);
}

table .adminOpcije .fa-user-edit:hover {
    color: rgb(18, 179, 45);
}






/*--- Unesi novog Korisnika ---*/

.unesiNovoKorisnika {
    /*border: 1px solid white;*/
    width: 760px;
    margin-top: 20px;
    overflow: hidden;
    padding-top: 10px;
}

.unesiNovoKorisnika .status {
    margin-bottom: 50px;
}

.unesiRoditelja,
.unesiUcitelja,
.unesiProfesora,
.unesiAdmina,
.unesiDirektora {
    /*border: 1px dashed white;*/
    display: none;
}

.unesiRoditelja label,
.unesiUcitelja label,
.unesiProfesora label,
.unesiAdmina label,
.unesiDirektora label {
    margin-top:7px;
    margin-bottom: 2px;
}

.unesiRoditelja .left, 
.unesiRoditelja .right {
    display: inline-block;
    width: 350px;
    margin-bottom: 20px;
} 

.unesiRoditelja .right {
    float: right;
}

.right .razred-odeljenje div{
    width: 47%;
    display: inline-block;
    margin-right: 15px;
}

.unesiRoditelja button[type="button"],
.unesiUcitelja button[type="button"],
.unesiProfesora button[type="button"],
.unesiAdmina button[type="button"],
.unesiDirektora button[type="button"] {
    display: block;
    width: 100%;
    clear: both;
}

.showUcitelj, 
.showProfesor {
    display:none;
}

/*-- UNESI UCITELJA --*/

.unesiUcitelja .razred-odeljenje div{
    width: 48%;
    display: inline-block;
    margin-bottom: 25px;
}

/*-- UNESI PROFESORA --*/

.unesiProfesora .razred-odeljenje div{
    width: 48%;
    display: inline-block;
}

.unesiProfesora > select {
    margin-bottom: 25px;
}

/*-- UNESI ADMINA --*/

.unesiAdmina button[type="button"] {
    margin-top: 25px;
}

/*-- UNESI DIREKTORA --*/

.unesiDirektora button[type="button"] {
    margin-top: 25px;
}




/*--- PREDMETI ---*/

.predmetiWrapper {
    /* border: 1px dashed white; */
    height: auto;
    display: flex;
}

.predmetiWrapper .predmeti {
    /* border: 1px dashed blue; */
    height: auto;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-right: 20px;
}

.predmetiWrapper .predmeti .iconObrisi,
.predmetiWrapper .predmeti .iconDodaj {
    color: #717171;
    cursor: pointer;
    transition: 0.3s;
}

.predmetiWrapper .predmeti .iconObrisi:hover {
    color: rgb(136, 22, 22);
}

.predmetiWrapper .predmeti .iconDodaj:hover {
    color: rgb(9, 134, 9);
}

.predmetiWrapper .sidebar {
    /* border: 1px dashed green; */
    height: auto;
    width: 20%;
}

.sidebar .nerasporedjenoOsoblje h5 {
    margin-bottom: 25px;
    text-align: center;
}

.sidebar .nerasporedjenoOsoblje table {
    margin-bottom: 25px;
}

.predmeti .razred {
    /* border: 1px dashed blue; */
    height: auto;
    width: 220px;
    display: inline-block;
    margin: 15px;
}

.razred table {
    background: #32383e;
}

.predmetiWrapper .sidebar .unesiPredmet {
    background: #32383e;
    padding: 25px 20px;
    border-radius: 7px;
}

.unesiOdeljenje div {
    width: 70px;
    display: inline-block;
    margin-right: 25px;
}

.sidebar .unesiPredmet button {
    width: 100%;
    margin-top: 25px;
}


/*---- Razredi ----*/

.izaberiPrikaz {
    margin-bottom: 35px;
    /* border: 1px solid white; */
    display: flex;
}

.izaberiPrikaz .menu div,
.izaberiPrikaz .dodaj div {
    width: auto;
    display: inline-block;
    margin-right: 15px;
}

.izaberiPrikaz button {
    margin-bottom: 3px;
    margin-right: 50px;
    width: 100px;
}


.izaberiPrikaz .dodaj .dodajStaresinu {
    display: none;
}

.dodaj .dodajStaresinu label {
    margin-bottom: 7px;
}

.dodaj .dodajStaresinu button {
    width: 100px;
}

.izaberiPrikaz .dodajStaresinu button {
    display: inline;
}

.dodaj .dodajStaresinu select {
    display: inline-block;
    width: 200px;
    margin: 0;
}

.dodaj .dodajStaresinu button {
    width: 150px;
    display: inline-block;
    margin-top: 0;
    margin-left: 20px;
}

.razredi .odeljenja {
    height: auto;
    width: 31%;
    margin: 0;
    margin-bottom: 20px;
}

.razredi .odeljenja  table {
    text-align: center;
    background: #32383e;
}

.odeljenja  table .head {
    background: #24282c;
    text-align: center;
}

.odeljenja .staresina {
    background: #32383e;
}

.odeljenjaDetaljno table {
    width: 500px;
    margin-right: 300px;
}






/*
Aca dodao
*/


/* style for date */
.onePost {
    background: #32383e;
    border-radius: 7px;
    padding-bottom: 1px;
    margin-bottom: 25px;
    text-align: center;
}

.onePost .header {
    background: #515960;
    height: auto;
}
.sadrzaj {
    padding: 15px
     50px 0 50px;
    text-align: left;
} 

.post-date {
    margin-bottom: 5px;
    display: inline-block;
    color: rgb(183, 214, 224);
}

.title-post {
    margin-top: 20px;
    
}

.post-body {
    margin-bottom: 20px;
}

.onePostView {
    background: #32383e;
    border-radius: 7px;
    padding: 5px 30px 20px 30px;
}



/* style for pagination links (buttons) */

.pagination-links {
    margin: 30px 0;
}

.pagination-links strong {
    padding: 8px 13px;
    margin: 5px;
    background: #f4f4f4;
    border: 1px #ccc solid;
    border-radius: 3px;
    color: black;
}

a.pagination-link {
    padding: 8px 13px;
    margin: 5px;
    background: #f4f4f4;
    border: 1px #ccc solid;
    border-radius: 3px;
    color: black;
}





.footer {
    font-family: 'Cinzel', serif;
}