/*DEFAULT CSS*/
.container-adsd{
    width:23%;
    margin:1%;
    height:25vh;
    float:left;
}
.container-mpo{
    width:100%;
    padding:0.5%;
    display:inline-block;
    margin-top:1%;
    margin-bottom:1%;
}
.container-editmo{
    width:100%;
    display:inline-block;
    padding:0.5%;
    margin-top:5%;
    margin-bottom:1%;
}
.container-mpr{
    width:20%;
    float:right;
    height:auto;
    padding:0.5%;
    margin-right:5%;
}
.container-mpl{
    width:50%;
    float:left;
    height:auto;
    padding:0.5%;
}
.container-my-profile{
    max-width:70%;
    margin-top:7%;
    margin-bottom:1%;
    padding:0.5%;
    min-height:60vh;
    margin-left:15%;
    overflow-y:auto;
    display:inline-block;
}
.container-terms-change{
    width: 70%;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 15%;
    padding: 0.5%;
    display: inline-block;
    height: auto;
}
.container-terms{
    width: 70%;
    margin-left: 15%;
    margin-top:7%;
    margin-bottom: 1%;
    padding: 0.5%;
    display: inline-block;
    height: auto;
}


/* Stilizovanje za div koji sadrži uslove korišćenja */
.uslovi-koriscenja {
    width: 100%;
    height: 30vh; /* Visina 30% ekrana */
    background-color: #f4f4f4; /* Svetlo siva pozadina */
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 200;
}

.uslovi-koriscenja h2 {
    margin-top: 0;
    color: #333;
}

.uslovi-koriscenja p {
    font-size: 14px;
    color: #555;
}

#prihvati-btn {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4CAF50; /* Zelena boja */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

#prihvati-btn:hover {
    background-color: #45a049;
}

/* Dodatni stilovi za prilagodbu */
@media (max-width: 768px) {
    .uslovi-koriscenja {
        height: 40vh; /* Na manjim ekranima možemo povećati visinu */
    }
}













.container-recovery{
    width: 30%;
    margin-left: 35%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 0.5%;
    display: inline-block;
}
.container-admin-set{
    width: 70%;
    margin: 1%;
    padding: 0.5%;
    display: inline-block;
}
.container-settings{
    width: 30%;
    height: auto;
    padding: 0.5%;
    margin-left: 35%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: inline-block;
}
.btn-izmena{
    width: 10%;
    margin-bottom: 1%;
    margin-left: 55%;
}
.input-width{
    width: 30%;
    margin-left: 35%;
    margin-bottom: 1%;
}
.admin-activation-container{
    width: 50%;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 25%;
    height: auto;
}
.admin-create{
    width: 100%;
    height: auto;
    padding: 0.5%;
    margin-top: 5%;
    margin-bottom: 1%;
    display: inline-block;
}
.container-admin-create{
width: 50%;
margin-left: 25%;
margin-top: 1%;
margin-bottom: 1%;
height: auto;
padding: 0.5%;
display: inline-block;
}
.btn-width{
    width: 20%;
}
.admin-header-data{
    width: 85%;
    float: left;
    height:auto;
    margin: 1%;

}
.admin-header-image{
    width: 10%;
    height: 20vh;
    float: left;
    margin: 1%;
}
.container-admin-header{
    width:99%;
    display: inline-block;
    height: auto;
}
.container-comment{
    width: 60%;
    height: auto;
    overflow-y: auto;
    padding: 0.5%;
    margin-left: 20%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: inline-block;
}
.search-input{
    width: 50%;
}
.container-admin-details-ads-inside{
    position: absolute;
    bottom: 0%;
    left: 0%;
    height: 10vh;
    width: 100%;
    background-color: #464646d9;
}
.container-admin-details-ads{
    width: 48%;
    margin: 1%;
    height: 40vh;
    float: left;
    background-color: gray;
    position: relative;
}
.container-admin-detail-ads{
    width: 100%;
    height: 50vh;
    display: inline-block;
    overflow: auto;
}
.container-admin-profile-img{
    width: 30%;
    margin: 1%;
}
.container-admin-left{
    width: 49%;
    padding: 0.5%;
    float: left;
    height: auto;
}
.container-filter{
    width: 99%;
    height: auto;
    padding: 0.2%;
    display: inline-block;
}
.admin-table{
    width: 99%;
    height: 100%;
    margin: 0.5%;
    overflow-y: auto;
}
.container-admin-inside-l{
    width: 20%;
    float: left;
}
.container-admin-inside-r{
    width: 80%;
    float: left;
}
.container-admin-inside{
    width: 98%;
    margin: 1%;
    height: auto;
    display: inline-block;
    padding: 0.5%;
}
.container-admin-inside:hover{
    background-color: #97def136;
}
.container-admin{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    display: inline-block;
    margin-top: 10vh;
}
.btn-admin-login{
    margin-right: 15%;
    margin-bottom: 1%;
}
.admin-login-input{
    width: 70%;
    margin-left: 15%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}
.admin-container-login{
    width: 50%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: inline-block;
    height: auto;
    padding: 1%;
}
.container-cenovnik{
    width: 70%;
    margin-left: 15%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 0.5%;
}
.btn-createAds{
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    border-style: none;
    background-color: #7eecee6e;
    box-shadow: 0px 0px 5px gray;
}
.btn-createAds:hover{
    box-shadow: 0px 0px 10px gray;
}

.container-ocena{
    width: 40px;
    padding: 1%;
    margin: 1%;
}
.btn-ocena{
    margin-left: 1%;
    margin-top: 1%;
    width:5%;
    height: 5%;
    float: left;
    background-color: transparent;
    border-style: none;
}

.top-nav-inside-right{
    width: 50%;
    height: 10vh;
    padding: 1%;
    float: left;
}
.container-result{
    width: 98%;
    margin: 1%;
    padding: 0.5%;
    height: 70vh;
    overflow-y: auto;
    display: inline-block;
}
.container-fav-box-txt{
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-color: #67676755;
    padding: 0.5%;
    color: white;
    text-align: center;
}
.fav-box-image{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #cecece;
}
.container-fav-box{
    width: 30%;
    margin-left: 1.66%;
    margin-right:1.66%;
    margin-top: 1%;
    margin-bottom: 1%;
    float: left;
    height: 40vh;

}
.container-fav{
    width: 98%;
    height: 60vh;
    overflow-y: auto;
    margin: 1%;
    display: inline-block;
    
}
.ads-inside-text{
    width: 98%;
    position: absolute;
    top: 10%;
    left: 0%;
    padding: 0.5%;
    background-color: #585858b9;
    z-index: 2;
    border-radius: 0.5em;
    color: white;
    margin-left: 1%;
}
.my-ads{
    width: 30%;
    padding: 0.5%;
    float: left;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-top: 1%;
    margin-left: 2.5%;
    position: relative;
    height: 20vh;
    z-index: 1;
}
.my-profile-text{
    width: 60%;
    padding: 0.5%;
    max-height: 60vh;
    float: left;
    margin-left: 1%;
    margin-top: 1%;
    overflow-y:auto;
}
.my-favorites{
    width: 20%;
    padding: 0.5%;
    margin-left: 1%;
    margin-top: 1%;
    background-color: #7dd8f18c;
    color: black;
    text-align: center;
    float: left;
}
.my-profile-datas{
    text-align: left;
}
.my-data{
    width: 60%;
    padding: 0.5%;
    margin: 1%;
    float: left;
}
.my-image{
    width: 22%;
    height: 300px;
    margin: 1%;
    float: left;
}
.container-my-profile{
    width: 100%;
    padding: 1%;
    display: inline-block;
}
.container-centar-ads{
    width: 25%;
    float: left;
    height: 20vh;
    position: relative;
}
.container-centar-right-ads{
    width: 70%;
    float: left;
    height: 40vh;
    padding: 1%;
    margin-left: 2.5%;
    overflow-y: auto;
}
.container-centar-right{
    width: 70%;
    float: left;
    height: auto;
    padding: 1%;
    margin-left: 2.5%;
}
.container-centar-img{
    width: 25%;
    float: left;
    height: 20vh;
    padding: 1%;
}
.container-central{
    width: 80%;
    padding: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: inline-block;
    min-height: 70vh;
}
.container-confirmation{
    width: 98%;
    display: inline-block;
    padding: 0.5%;
    max-height: 60vh;
    margin-top: 1%;
    margin-bottom: 1%;
    overflow-y: auto;
}
.alert-icons{
width: 10%;
}
.alert-nav{
    width: 100%;
    height: auto;
    padding: 0.5%;
    display: flex;
    justify-content: center; /* centriranje horizontalno */
    align-items: center; /* centriranje vertikalno */
        color: white;
    justify-content: center;
}
.float-alert{
margin-top: 0%;
}
.container-new-message-circle{
    width: 1%;
}
.container-answer{
    width: 90%;
    float: right;
    background-color: #abf2f45b;
    padding: 0.5%;
    margin: 1%;
    text-align-last: left;
    font-size: 12px;
}
.container-single-message-date{
    width: 20%;
}
.container-single-message{
    width: 60%;
}
#chatId{
    height: 40px;
}
.container-new-message{
    min-width: 99%;
    float: left;
    padding: 0.2%;
    background-color: #92d3f75b;
}
.container-new-message-reply{
    min-width: 99%;
    float: left;
    padding: 0.2%;
    background-color: #abdbf45b;
}
.profileImage{
width: 40px;
height: 40px;
float: left;
}
.container-chat-reply-box{
    margin: 0.5%;
    width: 99%;
    height: auto;
}
.container-chat-reply{
    margin: 0.5%;
    width: 99%;
    height:100%;
    overflow-y: auto;
    display: inline-block;
    padding: 1%;
}
.container-new-message{
    width: 1%;
}
.container-message-text{
    width: 75%;
    float: left;
}
.container-message-img{
    width: 5%;
    height: 50px;
    margin: 0.2%;
}
.container-message{
    width: 98%;
    margin: 1%;
    margin-bottom: 2%;
    background-color: #92d3f75b;
    padding: 0.5%;
    color: black;
    display: inline-block;
}
.container-message:hover{
   background-color: #61afd85b;
}
.container-chat{
    width: 70%;
    height: 70vh;
    display: inline-block;
    padding: 0.5%;
    padding-bottom: 1%;
    overflow-y: auto;
}

.float-nav{
    width: 100%;
    height: 7vh;
    background-color: transparent;
    z-index: 3;
    position: relative;
    float: left;
    position: relative;
}
.btn-sendMessage{
    width: 20%;
    margin-top: 1%;

}

.message-input{
    width: 100%;
    height: 250px;
}
.container-messaging-btm{
    width: 100%;
    height: 45vh;
    display: inline-block;
    padding: 1%;
}
.container-messaging-up{
    width: 100%;
    height: 40vh;
    overflow-y: auto;
    display: inline-block;
    padding: 1%;
}

.container-messaging{
    width: 50%;
    height: auto;
    margin: 1%;
    padding: 1%;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.container-comments{
    width: 80%;
    max-height: 40vh;
    overflow-y: auto;
    margin-left: 10%;
    padding: 1%;
    text-align-last: left;
}
.btn-termin{
    width: 50%;
    border-style: none;
    border-radius: 1em;
    background-color: #75bae9;
    color: white;
    padding: 1%;
    margin: 1%;
}
.btn-termin:hover{
    background-color: #5492bb;
}
.btn-termin:active{
    box-shadow: 0px 0px 5px gray;
}
.container-reserve{
    width: 80%;
    padding: 0.5%;
    display: inline-block;
}
.btn-nav{
    width: 100%;
    height: 100%;
    font-size: 10px;
    background-color: transparent;
}

.top-nav-inside{
    width: 7%;
    height: 50px;
    float: right;
}
.top-nav{
    width: 80%;
    display: inline-block;
    padding: 0.5%;
    margin-bottom: 1%;
}
.carousel-image{
    width: 90%;
    height: 500px;
}
.container-carousel{
    width: 80%;
    margin-left: 10%;
    padding: 0.5%;
}

.container-details-top{
    width: 80%;
    margin-left: 10%;
    padding: 0.5%;
    display: block;
}
.container-details{
    width: 80%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: inline-block;
    padding: 0.5%;
}
.container-ads-ocena{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #0000000f;
color: white;
}
.container-ads-img{
    width: 100%;
    height: 70%;
}
.container-ads{
    width: 23%;
    min-height: 50vh;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    height: 50vh;
    float: left;
    position: relative;
    background-color: #eaeaea;
    line-height: 5px;

}
.container-ads:hover{
    background-color: white;
}
.btn-naslovna{
    background-color: #00000078;
    color: rgb(255, 255, 255);
    font-weight: bold;
}
.cover-image-inside{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(128, 128, 128, 0);
    padding: 0.5%;
}
.container-cover-image{
    width: 25%;
    height: 30vh;
    float: left;
    margin-top: 0.2%;
    margin-bottom: 0.2%;
    position: relative;
    z-index: 1;
}

.container-ostalo{
    width: 70%;
    margin-left: 15%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 1%;
    text-align: center;
}

.form-error-text{
    background-color: rgba(255, 0, 0, 0.537);
    color: white;
    box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.444);
}
.container-dodaj-oglas-naslov{
    width: 100%;
    background-color: #0000007e;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 1;
}
.container-dodaj-oglas{
    width: 70%;
    height: 110vh;
    margin-left: 15%;
    padding: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    background-image: url("../assets/wallpaper-2.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.btn-dodaj-oglas{
    width: 50%;
    margin-top: 1%;
    margin-bottom: 1%;
    background-color: #8a4a9c;
    color: white;
    border-style: none;
    padding: 1%;
    border-radius: 0.5em;
}
.container-hapAdd-description{
    width: 70%;
    margin-bottom: 1%;
    margin-top: 1%;
    height: auto;
    display: inline-block;
    text-align: left;
    padding: 1%;
}

.container-hapAdd-image-text{
    width: 80%;
    padding: 1%;
    position: absolute;
    top: 30%;
    left: 10%;
    background-color: #0000006a;
    color: white;
    box-shadow: 0px 0px 10px #0000006a;
}
.container-hapAdd-image{
    width: 70%;
    margin-left: 15%;
    margin-bottom: 1%;
    margin-top: 1%;
    height: auto;
    position: relative;
}

#resultsads{
    display: block;
    width: 50%;
    text-align: center;
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 25%;
    color: rgb(91, 91, 91);
    font-weight: bolder;
    background-color: #ffffff;
    max-height: 30vh;
    overflow-y: scroll;
}
.ads-btn{
    float: right;
    margin-right: 15%;
    margin-top: 1%;
    margin-bottom: 1%;

}
.addAdsInput-cena{
    width: 25%;
    margin-right: 15%;
    margin-top: 1%;
    float: right;
}
.mapContainerText{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00000089;
    color: white;
    width: 100%;
    height: 8%;
    z-index: 2;
    text-align-last: left;
}
#mapContainer {
    width: 70%;
    height: 300px;
    margin-left: 15%;
    margin-top: 1%;
    margin-bottom: 1%;
    position: relative;
    z-index: 1;
}
.addAdsInput{
    width: 70%;
    margin-left: 15%;
    margin-top: 1%;
}
.container-add-ads{
    width: 70%;
    height: auto;
    margin-top: 1%;
    margin-bottom: 1%;
    display: inline-block;
    padding: 1%;
    display: inline-block;
}
.container-60-inside-l{
    width: 50%;
    margin-left: 25%;
    padding: 0.5%;
    display: inline-block;
}
.container-60{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 1%;
    margin-bottom: 1%;
    text-align: justify;
    line-height: 30px;
    height:auto;
}
.link-hover:hover{
    background-color: #00000014;
}
.link-hover{
    width: 80%;
    margin-left: 10%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    padding-left: 3%;
}
.error{
    color: red;
    float: left;

}
.container-login {
    width: 30%;
    padding: 1%;
    height: auto;
    display: inline-block;
    margin-top: 5%;
}
.container-inset-1{
    width: 50%;
    height: auto;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 1%;
    display: inline-block;
}
.success{
    font-weight: bold;
    font-size: 30px;
    color: #589bd9;
    text-align: center;
    margin-top: 5%;
}
.container-inset{
    width: 100%;
    height: auto;
    margin-top: 10vh;
    display: inline-block;
}
.container-error{
    justify-content: center;
    width: 70%;
    height: auto;
    margin-left: 15%;
    background-color: #ffffff;
    color: #ca0c0c;
    text-align: center;
    position: absolute;
    top: 35%;
    left: 0%;
    z-index: 3;
    font-weight: bold;
    padding: 2%;
    box-shadow: 0px 0px 20px black;
}
.btn-colab{
    width: 25%;
    background-color: #73a7d7;
    color: white;
    border-style: none;
    border-radius: 0.2em;
    flex: 1;
    padding: 1%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
}
.btn-colab1{
    width: 25%;
    background-color: #73a7d7;
    color: white;
    border-style: none;
    border-radius: 0.2em;
    flex: 1;
    padding: 1%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
}
.btn-colab1:hover{
    background-color: #589bd9;
}
.btn-colab:hover{
    background-color: #589bd9;
}
.container-collab-right{
    width:70%;
    height: 35vh;
    float: left;
    justify-content: space-between;
}
.container-collab-txt{
    position: absolute;
    width: 100%;
    top: 20%;
    left: 0%;
    color: white;
    font-style: 24px;
    font-weight: bold;
    background-color: #07070740;
    padding: 1%;
    text-align: center;
}
.container-collab-img{
    width: 30%;
    height: 35vh;
    position: relative;
    float: left;
}
.container-collab{
    width: 80%;
    height: auto;
    margin-left: 10%;
    display: inline-block;
    padding-top: 0.2%;
    padding-bottom: 0.2%;
    margin-top: 1%;
    margin-bottom: 1%;
}
.container-scroolable-mobile{
    display: none;
}
.scrolable-text{
    text-align: left;
}
.container-scroolable-inside{
    width: 30%;
    height: 100%;
    margin-left: 1.66%;
    margin-right: 1.66%;
    float: left;
    display: block;
}
.container-scroolable{
    width: 80%;
    margin-left: 10%;
    margin-bottom: 1%;
    height: 40vh;
    overflow-x: auto;
    overflow-y: hidden;
    display: inline-block;
}
.container-hidden-inside-texting{
    width: 30%;
    margin-left: 1.66%;
    margin-right: 1.66%;
    height: 100%;
    float: left;
    display: block;
}

.container-hidden-main{
    width: 80%;
    height: 10%;
    text-align: left;
    font-size: 20px;
    margin-left: 10%;
    padding: 0.5%;
    opacity: 0;
    
    display: inline-block;
}
.container-hidden-main-visible{
    opacity: 1;  
}
.container-hidden-inside-text2{
    position: absolute;
    top: 80%;
    left: 0%;
    color: white;
    font-size: 16px;
    background-color: #00000075;
    width: 90%;
    margin-left: 5%;
    text-align: center;
}
.container-hidden-inside-text1{
    position: absolute;
    top: 10%;
    left: 0%;
    color: white;
    font-size: 20px;
    background-color: #000000b1;
    width: 90%;
    margin-left: 5%;
    text-align: center;
    padding: 1%;
}
.container-hidden-inside
    {
        width: 30%;
        margin-left: 1.66%;
        margin-right: 1.66%;
        height: 100%;
        float: left;
        position: relative;
        opacity: 0.9;
    }
    .container-hidden-inside:hover{
        opacity: 1;
    }

.container-hidden{
    width: 80%;
    height: 35vh;
    margin-left: 10%;
    margin-top: 1%;
    margin-bottom: 1%;
    opacity: 1;
    display: inline-block;
}
.container-visible {
    opacity: 1;
}
.index-form-btn{
    width: 50%;
    margin-bottom: 10%;
}
.index-form-btn:hover{
box-shadow: 0px 0px 10px white;
border-radius: 0.3em;
}
.more-link-img{
    width: 8%;
}








.item {
    width: 7%; /* prilagodi širinu po potrebi */
    margin-bottom: 20px; /* razmak između redova */
    text-align: center; /* centriranje teksta */
}
.img-index {
    width:100%; /* ili bilo koja vrednost koja ti odgovara */
    margin-bottom: 10px; /* razmak između redova */
}
.item:hover{
    text-shadow: 0px 0px 5px rgb(104, 213, 223);
}
.container-index-kategories{
    width: 80%;
    padding: 0.5%;
    margin-left: 10%;
    margin-top: 2%;
    margin-bottom: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
}
#results{
    display: block;
    width: 30%;
    margin-left: 42%;
    text-align: center;
    z-index: 3;
    position: absolute;
    top: 70%;
    color: rgb(91, 91, 91);
    font-weight: bolder;
    background-color: #ffffff;
    max-height: 30vh;
    overflow-y: scroll;
}
.btn-index-search{
    width: 10%;
    height: 7vh;
    border-style: none;
    background-color: transparent;

}
.index-selection{
    width: 30%;
    margin-left: 10%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 1%;
    border-style: solid;
    display: inline-block;
  
}
.index-select-mob{
    display: none;
}
.index-top-text{
    width: 70%;
    height: auto;
    position: absolute;
    top: 11%;
    left: 15%;
    text-align: justify;
    display: block;
    color: white;
    background-color: #6f6f6f50;
    padding: 1%;
    font-size: 26px;
}
.index-mob{
    display: none;
}
.index-select{
    width: 30%;
    display: block;
}
.index-top-inside{
    position: absolute;
    width: 60%;
    top: 45%;
    left: 20%;
    z-index: 3;
    padding: 2%;
    background-color: rgba(245, 245, 245, 0.468);
    display: inline-block;
}

.index-top{
    width: 100%;
    height: 90vh;
    position: relative;
    background-image: url('../assets/animals.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position:right  bottom;
    z-index: 1;
}
.footer-icons{
    width: 15%;
    margin-left: 5%;
    margin-right: 5%;
    float: left;
}
.footer-section-left-icons{
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
    padding: 1%;
    display: inline-block;
}
.footer-img{
    width: 50%;
    margin-left: 5%;
}
.footer-section-center{
    width: 40%;
    height: 100%;
    float: left;
    display: block;
}
.footer-section-left{
    width: 30%;
    height: 100%;
    float: left;
}
.container-header-image-text{
    opacity: 1;
    position: absolute;
    top: 20%;
    text-shadow: 0px 0px 20px black;
    background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.3702731092436975) 30%, rgba(0,0,0,0.375875350140056) 68%, rgba(255,255,255,0) 100%);
    font-size: 14px;
    width: 100%;
    
}
.container-header-image{
    width: 70%;
    height: 100%;
    float: left;
    background-image: url('../assets/pets1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    opacity: 1;
    position: relative;
    text-align: center;
    display: block;
}
.container-logo{
    width: 20%;
    height: 100%;
    float: left;
    background-image: url('../assets/HAP.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.logo-image{
    width: 20%;
    float: left;
    max-height: 10%;
}

.container-header-nav{
    width: 10%;
    height: 90% !important;
    background-color: transparent;
    position: absolute;
    display: inline-block;

}
.header-icon{
    width: 15%;
    margin-top: 10%;
}
.container-header-icons{
    width: 55%;
    height: 10vh;
    background-color: transparent;
    float: left;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative; /* Ovo je važno za pozicioniranje tooltip-a */
    padding: 20px;
}
.container-main{
    width: 98%;
    /*display: flex;
    flex-direction: column;*/
    margin-left: 1%;
    margin-top: 1%;
    padding: 0.1%;
    display: block;
}
header{
    position: fixed; /* Fiksira header */
    top: 0; /* Postavlja ga na vrh stranice */
    left: 0; /* Poravnava ga levo */
    width: 100%; /* Širina header-a */
    background-color: white; /* Pozadina header-a */
    z-index: 1000; /* Osigurava da bude iznad ostalih elemenata */
}
.header-container{
    width: 100%;
    height: 10vh;
    display: inline-block;
}
footer{
    position: relative;
}
.container-footer{
width: 100%;
height: auto;
display: inline-block;
}





/*Landscape*/
@media (min-width: 769px) and (max-width:1080px){
    .admin-container-login{
        width: 50%;
        margin-top: 1%;
        margin-bottom: 1%;
        display: inline-block;
        height: auto;
        padding: 1%;
    }
    .container-ads{
       line-height: 10px;
    }
    
    .top-nav-inside-right{
        width: 50%;
        height: 10vh;
        padding: 1%;
        float: left;
    }
    .btn-oceni{
        width: 8%;
        height: 8vh;
    }
   

    .my-favorites{
        width: 40%;
        float: left;
        margin-left: 5%;
    }
    .my-profile-text{
        width:98%;
        padding: 0.5%;
        max-height: 60vh;
        float: left;
        margin-left: 1%;
        margin: 1%;
        overflow-y:auto;
    }

.container-index-kategories{
    margin-top: 2%;
}

}





























































/*FONTS*/


.playpen-sans {
  font-family: "Playpen Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}





.macondo-regular {
    font-family: "Macondo", cursive;
    font-weight: 400;
    font-style: normal;
  }
  







.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }

  /* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 300 to 700*/


  




























































/*CSS ZA MOBILNE UREDJAJE*/


@media (max-width: 768px){
    .container-adsd{
    width:100%;
    margin:1%;
    height:30vh;
    float:left;
}
    .container-mpr{
    width:50%;
    float:right;
    height:auto;
    padding:0.5%;
    margin-right:25%;
    margin-bottom:2%;
}
.container-mpl{
    width:100%;
    float:left;
    height:auto;
    padding:0.5%;
}
    .container-my-profile{
    max-width:100%;
    margin-top:25%;
    margin-bottom:1%;
    padding:0.5%;
    min-height:70vh;
    margin-left:0%;
    overflow-y:auto;
}
    .container-terms-change{
        width: 100%;
        margin-top: 1%;
        margin-bottom: 1%;
        margin-left: 0%;
        padding: 0.5%;
        display: inline-block;
        height: auto;
    }
    .container-terms{
        width: 100%;
        margin-left: 0%;
        margin-top:25%;
        margin-bottom: 1%;
        padding: 0.5%;
        display: inline-block;
        height: auto;
    }
    .container-recovery{
        width: 98%;
        margin-left: 1%;
        margin-top: 1%;
        margin-bottom: 1%;
        padding: 0.5%;
        display: inline-block;
    }
    .container-settings{
        width: 100%;
        height: auto;
        padding: 0.5%;
        margin-left: 0%;
        margin-top: 1%;
        margin-bottom: 1%;
        display: inline-block;
    }
    .btn-izmena{
        width: 50%;
        margin-bottom: 1%;
        margin-left: 25%;
        margin-top: 2%;
    }
    .input-width{
        width: 98%;
        margin-left: 1%;

    }
    .admin-activation-container{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }
    .admin-create{
        width: 100%;
        height: auto;
        padding: 0.5%;
        margin-top: 8%;
        margin-bottom: 1%;
    }
    .container-admin-create{
        width: 98%;
        margin: 1%;
        }
    .btn-width{
        width: 46%;
    }
    .admin-header-data{
        width: 98%;
        float: left;
        height: auto;
        margin: 1%;
    
    }
    .container-admin-header{
        width:98%;
        display: inline-block;
        height: auto;
    }
    .admin-header-image{
        width: 50%;
        height: 20vh;
        margin-left: 25%;
    }
    .container-comment{
        width: 100%;
        height: auto;
        overflow-y: auto;
        padding: 0.5%;
        margin-left: 0%;
        margin-top: 1%;
        margin-bottom: 1%;
        display: inline-block;
    }
    .search-input{
        width: 70%;
    }
    .btn-modal{
        width: 98%;
       
    }
    .container-admin-details-ads-inside{
        position: absolute;
        bottom: 0%;
        left: 0%;
        height: 10vh;
        width: 100%;
        background-color: #464646d9;
    }
    
    .container-admin-details-ads{
        width: 98%;
        margin: 1%;
        height: 30vh;
        float: left;
        background-color: gray;
    }
    .container-admin-left{
        width: 99%;
    }
    .container-admin-inside-l{
        width: 98%;
        float: left;
        margin: 1%;
    }
    .container-admin-inside-r{
        width: 98%;
        margin: 1%;
        float: left;
    }
    .btn-admin-login{
        width: 70%;
        margin-right: 15%;
        margin-bottom: 1%;
        margin-top: 1%;
    }
    .admin-login-input{
        width: 70%;
        margin-left: 15%;
        margin-top: 1.5%;
        margin-bottom: 1.5%;
    }
    .admin-container-login{
        width: 100%;
    }
    .container-cenovnik{
        width: 100%;
        margin-left: 0%;
    }
    .btn-ocena{
        margin-left: 1.5%;
        margin-top: 2%;
        width:13.5%;
        height: 5%;
        float: left;
        background-color: transparent;
        border-style: none;
    }
    .top-nav-inside-right{
        width: 100%;
        height: 10vh;
        padding: 1%;
        float: left;
    }

    .container-result{
        width: 100%;
        margin-top: 1%;
        margin-bottom: 1%;
        margin-left: 0%;
        margin-right: 0%;
        padding: 0.5%;
        height: 63vh;

    }
    .container-centar-ads{
        width: 48%;
        margin: 1%;
        float: left;
        height: 20vh;
    }
    .container-centar-img{
        width: 70%;
        margin-left: 15%;
        float: left;
        height: 30vh;
        padding: 1%;
    }
    .container-fav-box{
        width: 48%;
        margin-left: 1%;
        margin-right:1%;
        margin-top: 1%;
        margin-bottom: 1%;
        float: left;
        height: 30vh;
    
    }
    .container-fav{
        height: 65vh;    
    }
    .my-ads{
        width: 46%
    }
    .my-profile-text{
        width: 100%;
        padding: 0.5%;
        max-height: 60vh;
        float: left;
        margin-left: 0%;
        margin-top: 1%;
        overflow-y:auto;
    }
    .my-favorites{
        width: 80%;
        margin-left: 10%;
    }
    .my-profile-datas{
        text-align: center;
    }
    .container-my-profile{
        width: 100%;
        padding: 1%;
        display: inline-block;
        text-align: center;
    }
    .my-data{
        width: 98%;
        padding: 0.5%;
        margin: 1%;
        float: none;
    }
    .my-image{
        width: 70%;
        height: 270px;
        margin: 1%;
        margin-right: 15%;
        margin-left: 15%;
        float: left;
    }
    .container-centar-right-ads{
        width: 100%;
        float: left;
        margin-left: 0%;
    }
    .container-central{
        width: 100%;
        padding: 0.5%;
    }
    .th-ime{
        min-width: 50vw !important;
        font-size: 10px;
    }
    .container-confirmation{
        width: 98%;
        display: inline-block;
        padding: 0.5%;
        height: 70vh;
        margin-top: 1%;
        margin-bottom: 1%;
        overflow-y: auto;
        overflow-x: scroll;
        padding: 0.5%;
    }
    .alert-nav{
        width: 100%;
        height: auto;
        padding: 0.5%;
        display: flex;
        justify-content: center; /* centriranje horizontalno */
        align-items: center; /* centriranje vertikalno */
        color: white;
        justify-content: center;
    }
    .float-alert{
        margin-top: 0%;
    }
    .btn-sendMessage{
        width: 96%;
        margin-top: 1%;
    }
    .message-input{
        width: 100%;
        height: 250px;
    }
    .container-new-message{
        min-width: 99%;
        float: left;
        padding: 0.2%;
        background-color: #92d3f75b;
    }
    .container-chat-reply{
        margin: 0.5%;
        width: 99%;
        height:65%;
    }
    .profileImage{
        width: 40px;
        height: 40px;
        float: left;
        }
    
    .container-message-img{
        width: 14%;
    }
    .container-chat{
        width: 100%;
        height: 75vh;
    }
   
    .float-nav{
        width: 100%;
        height: 5vh;
        background-color: transparent;
        z-index: 3;
        position: relative;
        float: left;
    }
    .alert-icons{
        width: 20%;
    }


    .container-messaging{
        width: 98%;
        margin: 1%;
        padding: 1%;
        display: inline-block;
    }
    .btn-termin{
        width: 98%;
        margin-top: 1%;
        margin-bottom: 1%;
    }
    .container-comments{
        width: 100%;
        margin-left: 0%;
    }
    .btn-nav{
        width: 100%;
        height: 100%;
        font-size: 10px;
        background-color: transparent;
    }
    .top-nav-inside{
        width: 20%;
        height: 100%;
        float: right;
        margin-right: 0%;
        margin-left: 0%;
    }
    .top-nav{
        width: 100%;
    }
    .carousel-image{
        width: 100%;
        height: 300px;
    }
    .container-carousel{
        width: 100%;
        margin-left: 0%;
    }
    .container-details-top{
        width: 98%;
        margin-left: 1%;
        padding: 0.5%;
        display: block;
    }
    .container-details{
        width: 100%;
    }
  
    .container-ads{
        width: 98%;
        height: 50vh;
        margin-top: 15%;
    }
    
    .container-cover-image{
        width: 90%;
        height: 30vh;
        float: left;
        margin-top: 0.2%;
        margin-bottom: 0.2%;
        margin-left: 5%;
        margin-right: 5%;
        position: relative;
        z-index: 1;
    }
    .container-ostalo{
        width: 100%;
        margin-left: 0%;
    }

    .container-dodaj-oglas{
        width: 100%;
        margin-left: 0%;
        background-position:right;
    }
    .container-hapAdd-description{
        width: 100%;
    }
    .container-hapAdd-image-text{
        width: 100%;
        padding: 1%;
        position: absolute;
        top: 20%;
        left: 0%;
        background-color: #0000006a;
        color: white;
        box-shadow: 0px 0px 10px #0000006a;
    }
    .container-hapAdd-image{
        width: 100%;
        margin-left: 0%;
        margin-bottom: 1%;
        margin-top: 1%;
        height: auto;
        position: relative;
    }
    #resultsads{
        display: block;
        width: 90%;
        text-align: center;
        z-index: 3;
        position: absolute;
        top: 35%;
        left: 5%;
        color: rgb(91, 91, 91);
        font-weight: bolder;
        background-color: #ffffff;
        max-height: 30vh;
        overflow-y: scroll;
    }
    .ads-btn{
        float: right;
        width: 50%;
        margin-right: 0%;

    
    }
    .addAdsInput-cena{
        width: 50%;
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 1%;
        float: right;
    }
    #mapContainer {
        width: 100%;
        margin-left: 0%;
    }
    .addAdsInput{
        width: 100%;
        margin-left: 0%;
    }
    .container-add-ads{
        width: 100%;
    }
    .container-60-inside-l{
        width:98%;
        margin-left: 1%;
        margin-right: 1%;
    }
    .container-60{
        width: 100%;
        min-height: 100vh;
        margin-left: 0%;
        padding:1%;
        overflow-y: auto;
    }
    .container-login{
        width: 100%;
    }
    .container-inset-1{
        width: 100%;

    }
    .container-error{
        justify-content: center;
        width: 98%;
        height: auto;
        margin-left: 1%;
        background-color: #ffffff;
        color: #ca0c0c;
        text-align: center;
        position: absolute;
        top: 35%;
        left: 0%;
        z-index: 3;
        font-weight: bold;
        padding: 1%;
    }
    .btn-colab{
        width: 46%;
        background-color: #73a7d7;
        color: white;
        border-style: none;
        border-radius: 0.2em;
        flex: 1;
        padding: 1%;
        margin-left: 2%;
        margin-right: 2%;
        float: left;
    }
    .btn-colab1{
        width: 46%;
        background-color: #73a7d7;
        color: white;
        border-style: none;
        border-radius: 0.2em;
        flex: 1;
        padding: 1%;
        height: 3.6vh;
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 2%;
        float: left;
    }
    .container-collab-right{
        width:100%;
        margin-left: 0%;
        height: 35vh;
        justify-content: space-between;
    }
    
    
    .container-collab-txt{
        position: absolute;
        width: 100%;
        top: 20%;
        left: 0%;
        color: white;
        font-style: 24px;
        font-weight: bold;
        background-color: #07070740;
        padding: 1%;
        text-align: center;
    }
    .container-collab-img{
        width: 100%;
        height: 35vh;
        margin-left: 0%;
        position: relative;
    }
    .container-collab{
        width: 100%;
        margin-left: 0%;
    }

    .container-scroolable-mobile{
        width: 98%;
        margin: 1%;
        height: auto;
        display: block;
        padding: 2%;
    }

    .container-scroolable{
        display: none;
    }
  
    .container-hidden-inside-texting{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 5%;
        height: auto;
        line-height: 20px;
        float: left;
        display: block;
        overflow-wrap: break-word; /* Omogućava prelamanje reči */
        white-space: normal;
        overflow-x: auto;
    }
    .container-hidden-main{
        width: 100%;
        height: 10%;
        text-align: left;
        font-size: 16px;
        margin-left: 0%;
        padding: 0.5%;
        margin-top: 5%;
    }
    .container-hidden-inside-text2{
        position: absolute;
        top: 50%;
        left: 0%;
        color: white;
        background-color: #000000b8;
        min-width: 100%;
        margin-left: 0%;
        word-wrap: break-word;
        text-align: center;
        padding: 1%;
        overflow-wrap: break-word; /* Omogućava prelamanje reči */
         white-space: normal;
         padding: 0%;
    }
    .container-hidden-inside-text1{
        position: absolute;
        top: 20%;
        left: 0%;
        color: white;
        font-size: 20px;
        background-color: #000000a1;
        width: 90%;
        margin-left: 5%;
        text-align: center;
        padding: 1%;
        font-size: 14px;
        padding: 0%;
    }
    .container-hidden-inside
        {
            width: 60%;
            height: 100%;
            float: none;
            position: relative;
            display: inline-block;
        }
    
    .container-hidden{
        width: 100%;
        height: 20vh;
        margin: 0%;
        overflow-x: auto; /* Omogućava horizontalno skrolovanje */
        white-space: nowrap;
    }
    .index-form-btn{
        float: right;
    }
  
   
    .item {
        width: 10%; /* prilagodi širinu po potrebi */
        margin-bottom: 20px; /* razmak između redova */
        margin: 5%;
        text-align: center; /* centriranje teksta */
    }
    .img-index {
        width:100%; /* ili bilo koja vrednost koja ti odgovara */
        margin-bottom: 10px; /* razmak između redova */
    }
    .container-index-kategories{
        width: 98%;
        padding: 0.5%;
        margin-left: 1%;
        padding: 0.2%;
    }
    #results{
        display: block;
        width: 70%;
        margin-left: 1%;
        text-align: center;
        z-index: 3;
        position: absolute;
        top: 60%;
        color: rgb(55, 55, 55);
        font-weight: bolder;
        background-color: #ffffff;
        max-height: 30vh;
        overflow-y: scroll;
    }
    .btn-index-search{
        width: 30%;
        margin-top: 1%;
        margin-bottom: 1%;
        float: right;
    }
    .index-selection{
        width: 98%;
        margin-left: 1%;
        margin-top: 1%;
        margin-bottom: 1%;
        padding: 1%;
        border-style: solid;
        display: inline-block;
      
    }

    .index-select-mob{
        width: 98%;
        margin: 1%;
        display: block;
    }
    .index-top-text{
        width: 98%;
        height: auto;
        position: absolute;
        top: 20%;
        left: 1%;
        font-size: 18px;
        text-align: left;
    }
    .index-mob{
        display: block;
    }
    .index-top-inside{
        width: 98%;
        left: 1%;
        top: 62%;

    }
    .index-select{
        display: none;
    }
 
    .index-top{
        width: 100%;
        height: 50vh;
        position: relative;
        margin-top: 1%;
    }
    .footer-section-left{
        width: 50%;
        height: 100%;
        float: left;
    }
    .footer-section-center{
        display: none;
    }
    .container-logo{
        width: 80%;
    }
    .container-header-image{
        display: none;
    }
 
    .btn-search-nav{
        min-width: 70%;
        margin-top: 5%;
        margin-right: 10%;
        background-color: transparent;
        border-style: none;
    }
    #toggleBtn {
        position: absolute;
        top: 20px;
        right: 20px;
        min-width: 30%;
        max-height: 40%;
        background-color: blue;
        border-style: none;
    }
    .container-header-nav{
        width: 20%;
        float: left
    }
    .header-icon{
        width: 15%;
        margin-top: 20%;
    }
    .container-header-icons{
        display: none;
    }
   
}








































@media screen and (orientation: landscape){
  
    .admin-container-login{
        width: 50%;
        margin-top: 1%;
        margin-bottom: 1%;
        display: inline-block;
        min-height: auto;
        padding: 1%;
    }
    .btn-nav{
        width: 100%;
        height: 100%;
        font-size: 10px;
        background-color: transparent;
    }
    .container-centar-right{
        width: 50%;
    }
    .container-centar-ads{
        width: 48%;
        height: 40vh;
        margin: 1%;
        float: left;
    }
    .container-centar-right-ads{
        width: 100%;
        float: left;
        height: auto;
        padding: 1%;
        margin-left: 0%;
        overflow-y: auto;
    }
    .container-centar-img{
        width: 25%;
        float: left;
        height: 40vh;
        padding: 1%;
    }
    .my-profile-text{
        width: 100%;
    }
    .my-ads{
        height: 40vh;
    }
}
















































@media (min-width: 769px) and (max-width:1080px){
   
   
   
    .btn-nav{
        width: 100%;
        height: 100%;
        font-size: 10px;
        background-color: transparent;
    }
   
    .btn-colab1{
        width: 30%;
        background-color: #73a7d7;
        color: white;
        border-style: none;
        border-radius: 0.2em;
        flex: 1;
        padding: 1%;
        margin-left: 1%;
        margin-right: 2%;
        margin-top: 2%;
        float: left;
    }
    

    
  .container-chat{
    height: 100vh;
    margin-bottom: 5%;
  }
   
    .btn-nav{
        width: 100%;
        height: 100%;
        font-size: 10px;
        background-color: transparent;
    }
    .carousel-image{
        width: 100%;
        height: 300px;
    }
    .addAdsInput-cena{
        width: 25%;
        margin-right: 15%;
        margin-top: 1%;
        float: right;
    }
    #mapContainer {
        width: 70%;
        height: 400px;
        margin-left: 15%;
        margin-top: 1%;
        margin-bottom: 1%;
        position: relative;
        z-index: 1;
    }
    .container-60-inside-l{
        width:100%;
        height: auto;
        margin-left: 20%;
        margin-right: 20%;
    }
    .container-60{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        text-align: center;
    }
    .container-login{
        width: 80%;
    }
    .container-inset-1{
        width: 80%;
        padding: 1%;
    }
    .btn-colab{
        font-size: 12px;
        margin-top: 1%;
        width: 30%;
        margin-left: 1%;
        margin-right: 1%;
    }
    .container-collab{
        height: 80vh;
    }
    .container-scroolable-inside{
        height: 85vh;
    }
    .container-scroolable{
        width: 80%;
        margin-left: 10%;
        margin-bottom: 1%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        display: inline-block;
    }


    .index-top-text{
        width: 70%;
        height: auto;
        position: absolute;
        top: 11%;
        left: 15%;
        text-align: justify;
        display: block;
        color: white;
        background-color: #6f6f6f50;
        padding: 0.1%;
        font-size: 20px;
    }
    .container-hidden-inside-text2{
        position: absolute;
        top: 50%;
        left: 0%;
        color: white;
        font-size: 14px;
        background-color: #000000b8;
        width: 90%;
        text-align: center;
    }
    .container-hidden-inside-text1{
        position: absolute;
        top: 10%;
        left: 0%;
        color: white;
        font-size: 14px;
        background-color: #00000076;
        width: 90%;
        margin-left: 5%;
        text-align: center;
        padding: 1%;
    }
    .container-hidden-inside
        {
            width: 30%;
            margin-left: 1.66%;
            margin-right: 1.66%;
            background-color: gold;
            height: 100%;
            float: left;
            position: relative;
        }
       
}







































































@media only screen and (orientation: landscape) and (max-width: 1080px) {
   
  
   
    .message-input{
        height: 150px;
    }

    .btn-nav{
        width: 100%;
        min-height: 100%;
        font-size: 10px;
        background-color: transparent;
    }
   
    .container-cover-image{
        width: 25%;
        height: 30vh;
        float: left;
        margin-top: 0.2%;
        margin-bottom: 0.2%;
        position: relative;
        z-index: 1;
    }
   

    .addAdsInput-cena{
        width: 35%;
        margin-right: 15%;
        margin-top: 1%;
        float: right;
    }
    .container-inset{
        height: auto;
    }
    .container-60-inside-l{
        width: 50%;
        height: auto;
        margin-left: 25%;
        margin-right: 15%;
        display: inline-block;
    }
   
    .container-60{
        height: auto;
    }
    .container-collab{
        min-height: 90vh;
    }
    .container-scroolable-inside{
        min-height: 100%;
    }
    .container-scroolable{
        min-height: 90vh;
        
    }
    .container-login{
        width: 70%;
    }
    .container-inset-1{
        width: 60%;
        padding: 1%;
    }
    .container-hidden{
        min-height: 40vh;
    }

    .container-header-image-text{
        opacity: 1;
        position: absolute;
        top: 1%;
        text-shadow: 0px 0px 20px black;
        background-color: #00000044;
        font-size: 10px !important;
    }
    .index-top-inside{
        position: absolute;
        width: 80%;
        top: 55%;
        left: 10%;
        z-index: 3;
        padding: 2%;
        background-color: rgba(245, 245, 245, 0.468);
        display: inline-block;
    }
    .alert-nav{
        width: 100%;
        margin-left: 0%;
        height: auto;
        padding: 0.5%;
        padding-bottom: 1%;
        display: inline-block;
        color: white;
        justify-content: center;
    }
   
}
























































/*TABLETI*/
@media (max-width: 1024px) and (min-width: 768px){
    
    .container-my-profile{
    max-width:70%;
    margin-top:20%;
    margin-bottom:1%;
    padding:0.5%;
    min-height:60vh;
    margin-left:15%;
    overflow-y:auto;
}
   
    .container-terms{
        width: 100%;
        margin-left: 0%;
        margin-top:15%;
        margin-bottom: 1%;
        padding: 0.5%;
        display: inline-block;
        height: auto;
    }
  .top-nav-inside{
   width: 10%;
  }

    .container-centar-right-ads{
        width: 70%;
        float: left;
        height: 55vh;
        padding: 1%;
        margin-left: 15%;
        overflow-y: auto;
    }
    .container-centar-ads{
        width: 48%;
        margin: 1%;
        float: left;
        height: 20vh;
    }
    .container-centar-img{
        width: 25%;
        float: left;
        height: 15vh;
        padding: 1%;
    }
    .container-fav-box{
        width: 30%;
        margin-left: 1.66%;
        margin-right:1.66%;
        margin-top: 1%;
        margin-bottom: 1%;
        float: left;
        height: 30vh;
    
    }

    
    .container-messaging-btm{
        height: auto;
    }
    .btn-sendMessage{
        width: 30%;
        margin: 1%;
    }
    .message-input{
        width: 100%;
        height: 150px;
    }
    .profileImage{
        width: 40px;
        height: 40px;
        float: left;
        }
  
        .float-nav{
            width: 50%;
            height: 5vh;
            background-color: transparent;
            z-index: 3;
            position: relative;
            float: left;
        }
    .float-alert{
        margin-top: 0%;
    }
    .alert-nav{
        width: 100%;
        margin-left: 0%;
        height: auto;
        padding: 0.5%;
        padding-bottom: 1%;
        display: inline-block;
        color: white;
        justify-content: center;
    }
    
 
    .container-messaging{
        width: 80%;
        height: 55vh;
        margin: 1%;
        margin-left: 10%;
        margin-right: 10%;
        padding: 1%;
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    .btn-nav{
        width: 100%;
        height: 100%;
        font-size: 10px;
        background-color: transparent;
    }
 
    .container-ads{
        width: 48%;
        height: 45vh;
    
    }
 
    .container-dodaj-oglas{
        width: 98%;
        margin-left: 1%;
    }
    .container-cover-image{
        width: 25%;
        height: 20%;
        float: left;
        margin-top: 0.2%;
        margin-bottom: 0.2%;
        position: relative;
        z-index: 1;
    }
    #resultsads{
        display: block;
        width: 70%;
        text-align: center;
        z-index: 3;
        position: absolute;
        top: 50%;
        left: 25%;
        color: rgb(91, 91, 91);
        font-weight: bolder;
        background-color: #ffffff;
        max-height: 30vh;
        overflow-y: scroll;
    }
    #resultsads{
        display: block;
        width: 50%;
        text-align: center;
        z-index: 3;
        position: absolute;
        top: 33%;
        left: 25%;
        color: rgb(91, 91, 91);
        font-weight: bolder;
        background-color: #ffffff;
        max-height: 30vh;
        overflow-y: scroll;
    }
    .container-add-ads{
        width: 100%;
    }
    .container-60-inside-l{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
    .container-60{
        width: 100%;
        margin-left: 0%;
        padding:1%;
        overflow-y: hidden;
    }
    .container-login{
        width: 80%;
    }
    .container-inset-1{
        width: 70%;
    }
    .index-selection{
        width: 40%;
    }
    .index-top-inside{
        width: 80%;
        left: 10%;
    }
    .container-collab-img{
        height: 70%;
    }
    .container-collab{
        width: 100%;
        margin-left: 0%;
        height: 20vh;
    }
    .container-scroolable-inside{
        height: 30vh;
    }
    .container-scroolable{
        height: 30vh;
        width: 100%;
        margin-left: 0%;
    }
    .container-hidden{
        width: 100%;
        margin-left: 0%;
        height: 17vh;
    }
    .index-select-mob{
        width: 98%;
        margin: 1%;
        display: block;
    }
    .container-header-image-text{
        opacity: 1;
        position: absolute;
        top: 1%;
        text-shadow: 0px 0px 20px black;
        background-color: #00000044;
        
    }
    .btn-search-nav{
        min-width: 50%;
        margin-top: 5%;
        margin-right: 10%;
        background-color: transparent;
        border-style: none;
    }
    #toggleBtn {
        position: absolute;
        top: 20px;
        right: 20px;
        min-width: 10%;
        height: 50%;
        background-color: transparent;
        border-style: none;
    }

    .header-icon{
        width: 30%;
        margin-top:5%;

    }
    .container-header-icons{
        width: 40%;
        height: auto;
        padding: 0.1%;
    }
 

}

























































/*SIDE NAV*/
.nav-icon-search{
    width: 40%;
    padding-top: 10%;
}
.btn-search-nav{
    width: 30%;
    margin-top: 0%;
    background-color: transparent;
    border-style: none;
}

.closeBtn {
    background-color: transparent;
    color: rgb(255, 255, 255);
    font-weight: bolder;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}
.menu-icon{
    width: 80%;
    height: 100%;
    margin-left: 10%;
}
#toggleBtn {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 70%;
    height: 50%;
    background-color: transparent;
    border-style: none;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -250px; /* Sakrij sidebar sa desne strane */
    width: 250px;
    height: 100%;
    background-color: #81d7ea;
    color: rgb(0, 0, 0);
    padding: 20px;
    transition: right 0.3s ease; /* Animacija za slajd */
}

.sidebar.open {
    right: 0; /* Prikazivanje sidebar-a */
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    margin: 15px 0;
}

ul li a {
    color: white;
    text-decoration: none;
}