/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Nov 30, 2023, 10:20:58 PM
    Author     : Machine
*/

*{
    margin: 0;
    padding: 0;
/*    font-family: 'Poppins', sans-serif;
    font-family: 'Mulish', sans-serif;
    font-family: 'Exo 2', sans-serif;*/
    font-family: sans-serif;
}
span span{
    font-family: unset;;
}
.header{
    min-height: 100vh;
    width: 100%;
/*    background: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner3.jpg);*/
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.header_{
    width: 100%;
/*    background: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner3.jpg);*/
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
#layer{
    background: rgba(4,9,30,0.65);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
}

#layer1{
    background: url(images/banner3.jpg);
    opacity: 0;
    background-position: center;
    background-size: cover;
}
#layer2{
    background: url(images/banner4.jpg);
    opacity: 0;
    background-position: center;
    background-size: cover;
}
#layer3{
    background: url(images/banner5.jpg);
    opacity: 0;
    background-position: center;
    background-size: cover;
}
.layer{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 1.5s;
    background-position: center;
    background-size: cover;
}
.navbar{
    z-index: 2;
    width: 100%;
    position:fixed;
}
.navbar_{
    background: rgba(4,9,30,0.8);
    z-index: 2;
    width: 100%;
    position:fixed;
}
nav{
    display: flex;
    padding: 0.25% 6%;
    justify-content: space-between;
    align-items: center;
}
nav img{
    width: 150px;
}
.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 12px;
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f24134;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: calc(100% - 24px);
}
.text-box{
    width:80%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.text-box h3{
    font-size: 36px;
}
.text-box h1{
    margin-bottom: 35px;
    margin-top: 15px;
    font-size: 62px;
}
.text-box p{
    margin:10px 0 40px;
    font-size: 16px;
    color: #fff;
}
.hero-btn-lectures{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #f24134;
    width: 150px;
    padding: 12px 34px;
    font-size: 13px;
    background: #f24134;
    position: relative;
    cursor: pointer;
    margin-top: 10px;
}
.hero-btn-lectures:hover{
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35), 0 0 5px rgba(0, 0, 0, 0.27);
    transition: 1s;
}
.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid #f24134;
    background: #f24134;
    transition: 1s;
}
.hero-btn-blog{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: #f24134;
    position: relative;
    border: 1px solid #f24134;
    cursor: pointer;
    margin-top: 15px;
}
.hero-btn2{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    background: #f24134;
    padding: 12px 14px;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    border: 3px solid #f24134;
    width: 150px;
    margin: 1% 3%;
}
.hero-btn4{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    background: #f24134;
    padding: 12px 14px;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    border: 3px solid #f24134;
    margin: 1% 2%;
}
.hero-btn3{
    min-height: 80px;
}
.hero-btn2:hover{
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.65);
    transition: 0.5s;
}

nav .fa{
    display: none;
}

@media(max-width: 700px){
    .text-box h3{
        font-size: 16px;
    }
    .text-box h1{
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 32px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #f24134;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
        
    }
    .hero-btn2{
        margin: 5% 0;
    }
}
.section2{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
.section-lekcije-index{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}

h1{
    font-size: 36px;
    font-weight: 600;
}
p{
    color: #666;
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.second-row{
    margin-top: 0;
    flex-basis: 49.5%;
    display: flex;
    justify-content: space-between;
}
.row-items{
    margin-top: 2%;
    display: flex;
    justify-content: space-between;
}
.index-razred {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    border-top: 1px solid rgba(4,9,30,0.8);
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 22px;
    color: black;
}
.lekcije-index-row{
    margin-top: 2%;
    display: flex;
    justify-content: space-between; 
}
.lekcije-index-srednja-skola, .lekcije-index-osnovna-skola{
    flex-basis: 44%;
    border: 1px solid rgba(4,9,30,0.8);
}
.lekcije-index-skola{
    width: 100%;
    background: #f24134;
    padding-top: 5px;
    padding-bottom: 5px;
}
.lekcije-index-skola h3{
    text-align: center;
    color: white;
    margin: 0;
    font-size: 40px;
}
@media(max-width: 700px){
    .lekcije-index-row{
        flex-direction: column;
    }
}
.dodatni-detalji-o-casovima-row{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.dodatni-detalji-o-casovima-row-pitanja{
    flex-basis: 32%;
    
}
.dodatni-detalji-o-casovima-row-odgovori{
    flex-basis: 64%;
}
.casovi-tekst-sekcija-div{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
@media(max-width: 700px){
    .casovi-tekst-sekcija-div{
        flex-direction: column;
    }
    .dodatni-detalji-o-casovima-row{
        flex-direction: column;
    }
}
.row{
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
}
.cenovnik-sekcija-content{
    display: flex;
    justify-content: space-between;
}
.cenovnik-sekcija-element{
    flex-basis: 48%;
}
.cenovnik-tabela{
    width: 100%;
}
.cenovnik-tabela table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;
}
.cenovnik-tabela table tr{
    padding: 8px;
    border: 1px solid black;
}
.cenovnik-tabela table tr td{
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
.cenovnik-div-naslov{
    width: 100%;
}
.cenovnik-div-naslov h3{
    text-align: center;
    background:#f24134;
    color: white;
    padding: 10px;
    margin: 0;
}
@media(max-width: 700px){
    .cenovnik-sekcija-element{
        margin-bottom: 20px;
    }
}
.section2-col{
    flex-basis: 23%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 2%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}
.section2-col:hover{
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}
.section2_p{
    margin: 1% 20%;
}
@media(max-width: 940px){
    .row-items{
        margin-top: 0;
        flex-direction: column;
    }
    .second-row{
        margin-top: 3%;
    }
}
@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
    .cenovnik-sekcija-content{
        flex-direction: column;
    }
    .row-items{
        margin-top: 0;
    }
    .second-row{
        margin-top: 0;
        flex-direction: column;
    }
    .section2_p{
        margin: 2% 0%;
    }
}
.tutoring{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
.tutoring-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 1%;
    text-align: center;
}
.casovi-tekst-group{
    flex-basis:60%;
}
.casovi-tekst-sekcija-blog{
    flex-basis: 30%;
}
.casovi-tekst-sekcija-blog h3{
    text-align: left;
}
.tutoring-col img{
    width: 100%;
    border-radius: 10px;
}
.tutoring-col p{
    padding: 0;
}
.tutoring-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: center;
}
@media(max-width: 700px){
    .tutoring-col{
        margin-top: 5%;
    }
}
.blog-item{
    flex-basis: 49%;
    margin-bottom: 1%;
    text-align: center;
    position: relative;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.07);
}
.blog-item img{
    width: 100%;
}
.blog-item p{
    padding: 0;
}
.blog-item h3{
    margin-bottom: 10px;
    text-align: left;
    font-size: 18px;
    padding: 0 2%;
    margin-top: 0;
}
@media(max-width: 700px){
    .blog-item{
        margin-top: 5%;
    }
}
.date_blog {
    position: absolute;
    top: 1%;
    right: 1%;
    background-color: rgba(255, 243, 243, 0.6);
    padding: 5px;
    border: 1px solid black;
    padding: 1% 5%;
    border-radius: 10px;
}
.date_blog h3{
    margin-bottom: 0px;
    font-size: 16px;
}
.image-blog-container{
    position: relative;
    display: inline-block;
}
.blog_type {
    position: absolute;
    margin-bottom: 6.5px;
    bottom: 2%;
    left: 1.5%;
    background-color: rgba(59, 130, 246, 0.8);
    padding: 1% 5%;
    border: 1px solid black;
}
.blog_type h3{
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0px;
    color: white;
}
.blog-more{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.blog-more:hover{
    background: rgba(226,0,0,0.7);
}
.blog-more h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
}
.blog-more:hover h3{
    bottom: 49%;
    opacity: 1;
}
.testimonials{
    width: 80%;
    margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}
.casovi-tekst-sekcija{
    width: 80%;
    margin: auto;
    padding-top: 25px;
    padding-bottom: 0px;
    text-align: center;
}
.cenovnik-sekcija{
    width: 80%;
    margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}
.casovi-lista-sekcija p{
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    text-align: left;
    font: 400 0.945rem / 1.5 sans-serif;
}
.casovi-tekst-content p{
    color: black;
    text-align: left;
    font: 400 1.075rem / 1.5 sans-serif;
    padding-left: 0;
    padding-top: 0;
}
.casovi-lista-sekcija{
    width: 50%;
    margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}
.testimonials-col{
    margin-top: 25px;
    flex-basis: 44%;
    border-radius: 10px;
    text-align: center;
    background: #fff3f3;
    padding: 15px;
    cursor: pointer;
    display: flex;
}
.testimonials-col img{
    height: 40px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
}
.testimonials-col .fa, .testimonials-col .far{
    color: #f24134;
}

@media(max-width: 700px){
    .testimonials-col img{
        margin-left: 0px;
        margin-right: 15px;
    }
}
.testimonials-col p{
    padding: 0;
}
.testimonials-col h3{
    margin-top: 15px;
    text-aling: left;
}
.section1-div{
    width: 100%;
}
.section1{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
.section1-col, .section1-col2{
    flex-basis: 44%;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    text-align: left;
}
.section1-col img{
    width: 110%;
    margin: 0 auto;
    display: block;
}
.section1-col p,.section1-col2 p{
    color: #fff;
}
.section1-col2{
    border: 3px solid rgba(4,9,30,0.7);
    padding: 2% 2%;
    border-radius: 60px 0 60px 0px;
}
.section1 h1{
    color:#fff;
}
.section1-col2 h1{
    font-size: 24px;
    padding: 0 15px;
}
.casovi-naslov h3{
    font-size: 26px;
    display: inline;
    background-image: linear-gradient(to right, rgba(4, 9, 30, 1) 0%, rgba(4, 9, 30, 0.6) 100%);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 2px;
}
.casovi-naslov {
    margin-bottom: 20px;
    display: flex;
    justify-content: left;
}
.animated-text {
    transition: 1.5s ease;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.background2{
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(images/banner2.png);
    margin: 50px auto;
}
.casovi-citat{
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(images/banner2.png);
    margin: 0px auto;
    margin-top: 25px;
}
.matematika-citat{
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(images/baneri-matematike.jpg);
    margin: 0px auto;
    margin-top: 25px;
}
.fizika-citat{
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(images/baneri-fizika.jpg);
    margin: 0px auto;
    margin-top: 25px;
}
.background2, .casovi-citat, .matematika-citat, .fizika-citat{
    width: 80%;
    background-position-x: center;
    background-position-y: top;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 50px 0;
}
.background2 h1, .casovi-citat h1, .matematika-citat h1, .fizika-citat h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
    margin-left: 15px;
    margin-right: 15px;
}
@media(max-width: 700px){
    .background2 h1, .casovi-citat h1, .matematika-citat h1, .fizika-citat h1{
        font-size: 24px;
    }
    .section1-col2{
        padding: 6% 2%;
    }
}
td{
    font-size: 16px;
    height: 10px;
    padding-left: 10px;
}
@media(max-width: 700px){
    td{
        font-size: 12px;
    }
}
.footer{
    padding-top: 15px;
    padding-bottom: 15px; 
    color: white;
    font-size: 16px;
}
@media(max-width: 700px){
    .footer{
        font-size: 12px;
    }
}
.contact_form{
    padding: 10px 0;
    width: 100%;
    background: #04091e;
    display: flex;
    align-items: center;
    justify-content: center;
}
form{
    background: #fff3f3;
    display: flex;
    flex-direction: column;
    padding: 20px 0vw;
    padding-bottom: 5px;
    width: 100%;
    border-radius: 20px;
}
form h3{
    color: #000;
    font-size: 32px;
    margin-bottom: 20px;
}
form input, form textarea{
    border: 0;
    margin: 5px 10px;
    padding: 10px;
    outline: none;
    background: #fff;
    font-size: 16px;
}
form button{
    padding: 15px;
    background: #f24134;
    color: #fff;
    font-size: 18px;
    border: 0;
    outline: none;
    cursor: pointer;
    width: 200px;
    margin: 5px auto;
}
#fizika_takmicenja,#matematika_takmicenja, #matematika_prijemni,#fizika_prijemni,#fizika_redovna_nastava,#matematika_redovna_nastava {
    scroll-margin-top: 80px;
}
@media(max-width: 700px){
    #fizika_prijemni, #fizika_takmicenja, #fizika_redovna_nastava{
        margin-top: 50px;
    }
}
.welcome-section{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
.blog-item-list{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 350px;
}
@media(max-width: 700px){
    .welcome-section h1{
        font-size: 26px;
    }
}

/*.tutoring-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 1%;
    text-align: center;
}
.tutoring-col img{
    width: 100%;
    border-radius: 10px;
}
.tutoring-col p{
    padding: 0;
}
.tutoring-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: center;
}*/
.search-section{
    width: 80%;
    margin: auto;
    text-align: center;
}
.dodatni-detalji-o-casovima{
    width: 80%;
    margin: auto;
}
.search-div{
    display:flex;
    justify-content: space-between;
    border-bottom: 2px solid rgba(150,150,150,0.7);
}
.search-form{
    background: white;
    display: flex;
    flex-direction: column;
    padding: 0px;
    padding-bottom: 0px;
    width: 25%;
    border-radius: 0px;
}
@media(max-width: 700px){
    .search-form{
        width: 70%;
    }
}
.search-div input::placeholder{
    color: rgba(150,150,150,1);
}
.search-div input[type="submit"]{
}
.search-div input[type="text"]{
    flex-basis: 100%;
    padding: 0px;
    padding-top: 10px;
}
.submit-button-search{
    width: auto;
    padding: 0;
    color: #f24134;
    background: white;
    font-size: 24px;
}
a.load-more:link,
a.load-more:visited{
    text-decoration: none;
    color: inherit;
}
.load-more{
}
.load-more-div{
/*    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    background: #f24134;
    color: white;
    padding: 20px;
    border-radius: 30px;
    display: inline-block;*/
    margin-top: 20px;
    margin-bottom: 20px;
    color: blue;
    font-size: 22px;
}
.welcome-blog-description{
    width: 60%;
    margin: auto;
    font-size: 20px;
}
@media(max-width: 700px){
    .welcome-blog-description{
        width: auto;
    }
}
.bar-percent{
    height: 4px;
    width: 0%;
    background: #f24134;
}
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 12%;
    z-index: 99;
    background-color: #f24134;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    font-size: 26px;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding-top: 5px;
    padding-bottom: 5px;
}
#scrollTopBtn.show {
    display: block;
    opacity: 1;
}
.section-moj-nalog{
    width: 100%;
    margin: 0 auto;
    padding-top: 30px;
}
.section-moj-nalog p{
    padding: 0;
    color: #000;
    font-size: 14px;
    font-weight: 600;
}
.section-moj-nalog div{
    display: inline-block;
    min-width: 300px;
    margin: 0;
    margin-bottom: 40px;
    padding: 5px 10px;
    border: 0.5px solid rgba(0,0,0,0.5);
}
@media(max-width: 700px){
    .section-moj-nalog div{
        min-width: 250px;
    }
}
.section-moj-nalog div input{
    padding: 2px 0px;
    margin: 0;
}
.section-moj-nalog div input[type="submit"] {
    background: #363A4B;
    color: white;
    padding: 4%;
}
.submit-korisnik-lozinka{
    background: #363A4B;
    text-align: center;
}
.section-moj-nalog .clickable{
    background: #ffeaea;
    cursor: pointer;
}
.remove-form-elements{
    background: unset;
    display: unset;
    flex-direction: unset;
    padding: unset;
    width: unset;
    border-radius: unset;
}
.section-moj-nalog div p{
    font-weight: 400;
    font-size: 20px;
}
.section-prijemni{
    width: 90%;
    min-width: 1000px;
    margin-left: 5%;
    margin-top: 80px;
    transform: translate(0%, 0);
}
.section-prijemni a{
    text-align: center;
}
@media(max-width: 700px){
    .cenovnik-sekcija, .casovi-lista-sekcija, .casovi-tekst-sekcija, .casovi-citat, .background2, .search-section, .section1, .testimonials, 
    .section-prijemni, .section-moj-nalog, .lekcije-index-row, .section-lekcije-index, .dodatni-detalji-o-casovima, .tutoring, .section2, .text-box, .blog-item-list, .welcome-section{
        width: 94%;
    }
}
.casovi-drop-down-content {
    display: none;
    position: absolute;
    z-index: 1;
    transform: translateX(-50%);
    left: 50%;
    top: 100%;
    white-space: nowrap;
    height: 0px;
    overflow: hidden;
    transition: height 0.4s ease;
}

.casovi-drop-down-content-list {
    width: auto;
    background: white;
    border-radius: 10px; 
    border: 2px solid #f24134;
    display: inline-block;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
}

.casovi-drop-down-content-list a {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    background: transparent;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}
@media(max-width: 700px){
    .casovi-drop-down-content{
        position: relative;
        left: 10%;
        transform: translateX(0%);
    }
    .casovi-drop-down-content-list a{
        text-align: left;
    }
}
.indicator-casovi {
    margin-left: 2px;
    font-size: 12px;
    transition: transform 0.3s ease;
}
.odgovori-o-casovima-main{
    display: flex;
    min-height: 80%;
}
.odgovori-o-casovima-left-arrow{
    width: 5%;
    display: flex;
    justify-content: center;
    position: relative;
}
.odgovori-o-casovima-right-arrow{
    width: 5%;
    display: flex;
    justify-content: center;
    position: relative;
}
.odgovori-o-casovima-left-arrow p{
    position: absolute;
    top: 70%;
    font-size: 24px;
}
.odgovori-o-casovima-right-arrow p{
    position: absolute;
    top: 70%;
    font-size: 24px;
}
.strelica-not-clickable p{
    color: #ccc;
}
@media(max-width: 700px){
    .odgovori-o-casovima-right-arrow p{
        top: 50%;
    }
    .odgovori-o-casovima-left-arrow p{
        top: 50%;
    }
}
.strelica-clickable p{
    color: rgba(4,9,30,0.8);
    cursor: pointer;
}
.odgovori-o-casovima-content{
    width: 90%;
    overflow-x: hidden;
}
.odgovori-o-casovima{
    display:flex;
    transition: margin-left 0.5s ease;
}
.odgovori-o-casovima-element{
    width: 100%;
    height: auto;
}
.o-casovima-pitanja-select{
    background: rgba(4,9,30,0.8);
    color: white;
    transition: background 0.5s ease;
}
.o-casovima-pitanja-not-selected{
    background: transparent;
    color: black;
    transition: background 0.5s ease;
}
.o-casovima-pitanja{
    padding: 10px;
    border-top: 1px solid rgba(4,9,30,0.8);
    border-right: 1px solid rgba(4,9,30,0.8);
    border-left: 1px solid rgba(4,9,30,0.8);
    cursor: pointer;
}
.o-casovima-pitanja:last-child {
    border-bottom: 1px solid rgba(4,9,30,0.8);
}
.odgovori-o-casovima-naslov h3{
    font-size: 26px;
    display: inline;
    background-image: linear-gradient(to right, rgba(4, 9, 30, 1) 0%, rgba(4, 9, 30, 0.6) 100%);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 2px;
}
.odgovori-o-casovima-naslov {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
.odgovori-o-casovima-tekst p{
    padding-top: 0px
}
.odgovori-o-casovima-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20%;
}
.casovi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Zaobljeni ivici za oblik tačke */
    margin: 0 5px; /* Razmak između svake tačke */
}
.casovi-dot-not-selected{   
    background-color: #ccc;
}
.casovi-dot-selected{   
    background-color: rgba(4,9,30,0.8);
}
@media(max-width: 700px){
    .odgovori-o-casovima-tekst p{
        font: 400 0.955rem / 1.5 sans-serif;
    }
}

.login-section{
    min-height: 80vh;
}
.register-log-in-form{
    width: 35%;
    margin: 0 auto;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35), 0 0 5px rgba(0, 0, 0, 0.27);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.register-log-in-form input{
    background: transparent;
    border: 1px solid #777;
    margin: -3px 10px;
    margin-bottom: 8px;
    color: white;
}
.register-log-in-form div{
    margin-bottom: 8px;
    margin: -3px 10px;
    color: white;
}
.register-log-in-form div input{
    background: transparent;
    margin: 0px 0px;
    color: white;
    width: 50px;
}
.register-log-in-form h3{
    color: white;
    margin: 30px 0;
}
.register-log-in-form p{
    color: white;
}
@media(max-width: 700px){
    .register-log-in-form {
        width: 90%;
    }
}
.section-spisak-prijemnih{
    min-height: 80vh;
    margin: 20px auto;
}
.section-spisak-prijemnih div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media(max-width: 700px){
    .section-spisak-prijemnih{
        width: 94%;
    }
}
.switch {
    position: relative;
    display: flex;
    width: 34px;
    height: 20px;
    margin: 5px 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    transition: 0.4s;
    border-radius: 20px;
}
.slider-green{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transition: 0.4s;
    border-radius: 20px;
    background: #ccc;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 2.5px;
    bottom: 2.5px;
    background-color: #888;
    transition: 0.4s;
    border-radius: 50%;
}
.slider-green:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 2.5px;
    bottom: 2.5px;
    background-color: #888;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider-green:before {
    background-color: green;
    transform: translateX(14px);
}
input:checked + .slider:before {
    background-color: #f24134;
    transform: translateX(14px);
}
.log-in-register-button{
    margin: 5px 10px;
    margin-top: 15px;
    width: calc(100% - 20px);
    height: 40px;
    padding: 0;
    color: #04091e;
    border-radius: 20px;
    background: white;
}
.prijemni-spisak-fakulteta{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 100px;
    margin-left: 60px;
}
.fakultet-item{
    padding: 0.8% 1.1%;
    font-size: 24px;
    margin-bottom: 5px;
    margin-right: 15px;
    transition: 0.5s;
    box-shadow: none;
    text-decoration: none;
    color: #363A4B;
    border: 1px solid #363A4B;
}
.fakultet-item:hover{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35), 0 0 5px rgba(0, 0, 0, 0.27);
}
@media(max-width: 700px){
    .fakultet-item{
        padding: 0.5% 2%;
        font-size: 20px;
        margin-right: 5px;
    }
}
.fakultet-item-selected{
    color: white;
    background: #363A4B;
}
.section-spisak-prijemnih h3{
    width: 60%;
    font-size: 30px;
    font-weight: 400;
    margin: 50px 0;
}
.section-spisak-prijemnih a {
    display: inline-block;
    background: #f24134;
    text-decoration: none;
    color: white;
    padding: 0.75% 0.75%;
    margin: 3px 0px;
    font-size: 19px;
}
.section-korisnik-menu{
    width: 80%;
    margin: 0 auto;
}
.section-korisnik-menu form div{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.korisnik-menu{
    background: white;
    padding: 0;
    margin: 85px 0px;
}
@media(max-width: 700px){
    .section-spisak-prijemnih h3{
        font-size: 25px;
        font-size: 20px;
        width: 70%;
    }
    .section-korisnik-menu{
        width: 94%;
    }
}
.hero-btn5{
    width: auto;
    padding: 0.2% 2.5%;
    color: #000;
    background: #ffeaea;
    margin: 0 25px;
    margin-left: 0px;
    transition: 0.5s;
}
.korisnik-menu-selected{
    color: #f24134;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35), 0 0 5px rgba(0, 0, 0, 0.27);
    
}
.hero-btn5:hover{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35), 0 0 5px rgba(0, 0, 0, 0.27);
}
.prijemni-section{
    max-width: 1000px;
    min-height: 80vh;
    margin-bottom: 40px;
}
@media(max-width: 1650px){
    .prijemni-section{
        max-width: 850px;
    }
}
@media(max-width: 1450px){
    .prijemni-section{
        max-width: 650px;
    }
}
.prijemni-naslov{
    width: 80%;
    margin-left: 25px;
}
.prijemni-naslov h1{
    text-align: center;
    font-size: 32px;
}
.prijemni-inside{
    width: 80%;
    margin-top: 40px;
    margin-left: 25px;
    position: relative;
    scroll-margin-top: 70px;
}
.prijemni-inside img{
    width: 400px;
    margin: 0 auto;
}
.prijemni-uputstvo{
    border: 1px solid #777;
}
.prijemni-uputstvo p{
    color: black;
    padding: 10px 10px;
    font-size: 15.5px;
}
.ponudjeni_odgovori_span{
    margin-right: 25px;
    white-space: nowrap;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 15px;
}
.ponudjeni_odgovori_tacno{
    color: green;
}
.ponudjeno_slovo{
    font-weight: 600;
}
.ponudjeno_slovo_tacno{
    border: 1px solid green;
    padding: 4px;
}
.label-switcher{
    color: #000; margin-left: 40px; white-space: nowrap;
}
.label-switcher2{
    margin-left: -5px; 
    white-space: nowrap;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.submit-komentar{
    width: 220px;
    padding: 5px;
    color: white;
    background: green;
    border-radius: 10px;
    display: none;
}
.textarea-komentar{
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.07);
    margin: 0;
    overflow-y: auto;
    height: 80px;
}
.komentar{
    border-radius: 10px;
    background: white;
    display: inline-block;
    max-width: 400px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.07);
    padding: 5px 10px;
    margin: 5px 0;
    position: relative;
}
.komentar h3{
    padding: 0;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
}
.komentar p{
    padding: 0;
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
}
.komentar em{
    padding: 0;
    color: #777;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 12px;
}
.komentar-obrisati{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    right: -30px;
    cursor: pointer;
}
.komentar-obrisati::after {
    content: "Обришите ваш коментар";
    position: absolute;
    bottom: -30px; /* Postavi udaljenost teksta ispod ikone */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Pozadina za bolju čitljivost */
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.komentar-obrisati:hover::after {
    opacity: 1;
}
.sacuvani-zadaci-section{
    width: 80%;
    margin: 0 auto;
}
.button-nalog{
    display: inline-block;
    text-decoration: none;
    color: black;
    border: 1px solid #fff;
    padding: 6px 26px;
    font-size: 13px;
    background: #fff3f3;
    position: relative;
    cursor: pointer;
    margin-bottom: 30px;
    margin-top: 5px;
}
.button-nalog:hover{
    border: 1px solid black;
    transition: 1s;
}
.block-zadatak img{
    width: 400px;
}
.show-all-solutions{
    color: #000; margin-left: 40px; white-space: nowrap;
}
.saved-task{
    font-size: 15px;
}
@media(max-width: 700px){
    .prijemni-naslov h1{
        font-size: 22px;
    }
    .prijemni-uputstvo p{
        font-size: 14px;
    }
    .show-all-solutions{
        font-size: 12px;
    }
    .prijemni-inside{
        font-size: 14px;
        width: 95%;
    }
    .saved-task{
        font-size: 12px;
    }
    .switch-div span{
        font-size: 12px;
    }
    .hero-btn5{
        width: 200px;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }
    .section-moj-nalog div p{
        font-size: 14px;
    }
    .new-password{
        padding-left: 45px;
    }
    .sacuvani-zadaci-section{
        width: 95%;
    }
    .fakultet-title-account{
        font-size: 16px;
    }
    .new-password div input[type="submit"] {
        min-width: 250px;
    }
}

.section-prijemni-content{
    max-width: 1560px;
    min-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.spisak-prijemnih-ispita{
    width: 17%;
}
.prijemni-ispit-core{
    width: 77.3%;
    min-height: 80vh;
}
.prijemni-list{
    display: inline-block;
    background: white;
    text-decoration: none;
    color: #363A4B;
    border: 1px solid #363A4B;
    padding: 1.75% 0%;
    padding-left: 3%;
    margin: 3px 0px;
    font-size: 19px;
    width: 100%;
    margin-bottom: 20px;
}
.prijemni-ispit-core h3{
    width: 60%;
    font-size: 30px;
    font-weight: 400;
    margin: 0 auto;
}
.prijemni-selected{
    color: white;
    background: #363A4B;
}
.switch-div{
    display: flex;
    vertical-align: middle;
    margin-right: 25px;
    color: #363A4B;
    border-radius: 20px;
    margin-bottom: 2px;
    font-size: 15px;
    padding-right: 5px;
}
.switch-divs{
    position: absolute;
    top: 0;
    right: -150px;
    transform: translate(50%, 0%);
}
.save-button-zadatak{
    position: absolute;
    top: 0;
    left: -40px;
    transform: translate(50%, 0%);
}
.inline-block-zadatak{
    position: absolute;
    top: 0;
    right: -350px;
    font-size: 13px;
    transform: translate(50%, 0%);
}
.level-of-understanding{
    background: #363A4B;
    color: white;
    text-align: center;
    font-size: 13px;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
    width: 300px;
}
.level-of-understanding1{
    display: flex;
    justify-content: center;
    border-radius: 20px 20px 0 0;
}
.level-of-understanding2{
    border-radius: 0 0 20px 20px;
    border-left: 1px solid #363A4B;
    border-right: 1px solid #363A4B;
    border-bottom: 1px solid #363A4B;
    color: #3C447C;
}
.hover-text {
    position: absolute;
    top: 100%; /* Ispod ikone */
    left: 50%;
    transform: translateX(-50%);
    background: #363A4B;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.save-button-zadatak div:hover .hover-text {
    opacity: 1;
    visibility: visible;
}

.block-zadatak{
    width: calc(100% - 50px);
    background: #fff3f3;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.05);
    margin: 20px auto;
    padding: 5px 25px;
}
.block-zadatak h3{
    padding: 0;
    color: black;
    text-align: left;
    font-weight: 400;
    font-size: 20px;
    width: 100%;
}
.block-zadatak p{
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0;
    color: black;
    text-align: left;
    font-weight: 400;
    font-size: 14px;
}
.block-zadatak-div{
    transition: 0.5s ease;
    overflow-y: hidden;
    width: 100%;
}
.postupak{
    max-height: 0px;
}
.pitanja{
    max-height: 0px;
}
.section-korisnik-content{
    display:flex;
    justify-content: space-between;
    max-width: 1440px;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 120px;
    margin-bottom: 60px;
}
.korisnik-menu-list{
    width: 15%;
    display: flex;
    flex-direction: column;
}
.korisnik-page{
    width: 80%;
}
.korisnik-menu-list-element{
    display: flex;
    width: 100%;
    color: #363A4B;
    background: white;
}
.korisnik-menu-list-element a{
    text-decoration: none; /* Uklanja podvlačenje i druge dekoracije */
    color: inherit; /* Koristi boju teksta roditeljskog elementa (opciono) */
    font-size: inherit;
    width: 100%;
    padding: 4%;
    text-align: center;
}
.menu-selected{
    background: #363A4B;
    color: white;
}
.menu-odjavi-se{
    background: #363A4B;
    color: white;
    border-radius: 15px;
    margin-top: 55vh;
    margin-bottom: 5vh
}
.radius-top{
    border-top: 1px solid #363A4B;
    border-left: 1px solid #363A4B;
    border-right: 1px solid #363A4B;
    border-radius: 15px 15px 0 0;
}
.radius-bottom{
    border-bottom: 1px solid #363A4B;
    border-left: 1px solid #363A4B;
    border-right: 1px solid #363A4B;
    border-top: 1px solid #363A4B;
    border-radius:  0 0 15px 15px;
}
.radius{
    border-top: 1px solid #363A4B;
    border-left: 1px solid #363A4B;
    border-right: 1px solid #363A4B;
}
.korisnik-ime-title{
    width: 100%;
    text-align: center;
    color: white;
    background: #363A4B;
}
.korisnik-ime-title h3{
    font-size: 56px;
    padding: 3%;
}
.korisnik-page-core{
    display: flex;
    justify-content: space-between;
}
.korisnik-page-core-element{
    flex-basis: 45%;
    margin-top: 30px;
}
.korisnik-page-core-element h3{
    font-size: 26px;
    margin:0;
    padding: 0;
    text-align: left;
}
.korisnik-podrska p{
    text-align: center;
    color: black;
}
.korisnik-zadaci-class{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.korisnik-zadaci-fakultet{
    flex-basis: 10%;
}
.korisnik-zadaci-fakultet-element{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.korisnik-zadaci-datum{
    flex-basis: 12%;
}
.korisnik-zadaci-zadaci{
    flex-basis: 78%;
    
}
.korisnik-zadaci-inside{
    border: 1px solid #363A4B;
    padding: 3%;
    padding-right: 0%;
}
.korisnik-zadaci-fakultet-element:first-child{
    border-top: 1px solid #363A4B;
}
.korisnik-zadaci-datum-element{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.korisnik-zadaci-zadaci-element{
}
.korisnik-class{
    background: white;
    color: #363A4B;
    border: 1px solid #363A4B;
    border-top: none;
    height: 40px;
    cursor: pointer;
}
.border-top{
    border-top: 1px solid #363A4B;
}
.selected-item{
    background: #363A4B;
    color: white;
    
}
a.zadatak-korisnik:link,
a.zadatak-korisnik:visited{
    text-decoration: none;
    color: inherit;
}
.zadatak-korisnik{
    position: relative;
}
.zadatak-broj {
    position: relative;
}
.zadatak-broj:hover + .hover-text {
    opacity: 1;
    visibility: visible;
}
.zadatak-razumevanje-2 {
    border: 3px solid #FF0000; /* Crvena */
    border-radius: 50%;
    padding: 0.25%;  
}

.zadatak-razumevanje-3 {
    border: 3px solid #FFFF00; /* Žuta */
    border-radius: 50%;
    padding: 0.25%;  
}

.zadatak-razumevanje-4 {
    border: 3px solid #00FF00; /* Zelena */
    border-radius: 50%;
    padding: 0.25%;
}
.box-tekst {
    border: none;
    padding-left: 0;
    height: 40px;
    width: 200px;
    text-align: center;
}
.box-tekst-small{
    border: none;
    padding-left: 0;
    height: 40px;
    width: 50px;
    text-align: center;
}

.box-red {
    background: red;
}
.box-pink {
    background: #fff3f3;
}

.box-color-white {
    color: white;
}
.box-color-red{
    color: red;
}
.cursor-pointer{
    cursor: pointer;
}
.red-in-box {
    background: #f24134;
    color: white;
    text-align: center;
    display: flex; /* Koristi flexbox */
    justify-content: center; /* Centriraj horizontalno */
    align-items: center; /* Centriraj vertikalno */
    width: 150px;
    height: 25px;
    margin: 0;
    padding: 0;
    font-size: 18px;
}
.row-tabela{
    display: inline-block; width: 1050px; border-bottom: 4px solid #ffeaea;
}
.tabela-vreme{
    height:25px; display: flex; justify-content: center; align-items: center; background: #f24134; color: white;
}
.select-profesor-1{
    background: #363A4B;
    color: white;
    padding: 5px 10px;
    width: 150px;
}
.select-profesor-2{
    background: #363A4B;
    color: white;
    padding: 5px 10px;
    width: 350px;
}
.zakazani_cas{
    max-width: 900px;margin-bottom: 20px; border-radius: 25px;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
.zadaci-width{
    width: 800px;
}
.zadaci-max-width{
    width: 1024px;
}
@media(max-width: 1400px){
    .zadaci-width{
        width: 600px;
    }
    .zadaci-max-width{
        width: 800px;
    }
}