/* *{box-sizing: content-box;} */
.polje-sredina {
    grid-area: main;
    width: auto;
    height: auto;
    min-height: 50vh;
    /* max-width: 80%; */
    
}
.poruka{
    font-size: 2rem;
    font-weight: 800;
}
#divLista{
    /* background-color: aqua; */
}
.aOglas{
    text-decoration: none;
    color: unset;
    cursor: pointer;
}
.divOglas{
    /* background-color: brown; */
    border-bottom: 1px solid silver;
    display: grid;
    grid-template-areas:    "slika strucnaspr datum"
                            "slika naslov prazno"
                            "slika firma firma";
    gap: 0px;
    margin: 10px 0;
}
.divSlika{
    grid-area: slika;
}
.imgSlikaFrm{
    border-radius: 5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}
.spnNaslovOgl{
    grid-area: naslov;
    font-size: 1.3em;
    font-weight: 800;
}
.spnDatumObj{
    grid-area: datum;
}
.spnStrucnaSpr{
    grid-area: strucnaspr;
}
.divFirma{
    grid-area: firma;
}
.divFirma span:first-child{
    font-size: 1em;
    font-weight: 600;

}
.divFirma span:nth-child(2){
    font-size: 0.8em;
    font-weight: 300;
    margin-left: 15px;
}
.divDetaljiOgl{
    position: fixed;
    display: none;
    border: 2px solid whitesmoke;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
    top: 50%;
    left: 50%;
    padding: 10px;
    box-sizing: border-box;
}
.divDetaljiOgl-prikaz{
    display: block;
}
#spnDugmeIzlaz{
    position: absolute;
    right: 1px;
    top:1px;
    font-size: 1em;
    background-color: black;
    color: white;
    border-radius: 50%;
    font-weight: 900;
    padding: 0px 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 15;
}
#divDetaljiSadrzaj{
    display: grid;
    gap: 5px;
}
#divFirma{
    display: grid;
    margin-bottom: 15px;
}
#divFirma img{
    grid-area: slika;
}
#spnNazivFirme{
    display: block;
    font-weight: 700;
    font-size: 1.1em;
    grid-area: naziv;
}
#spnGradFirme{
    display: block;
    grid-area: grad;
}
#spnKontaktTel{
    display: block;
    font-size: 1.1em;
    grid-area: telefon;
}
#spnKontaktEmail{
    display: block;
    font-size: 1.1em;
    grid-area: email;
}
#divSadrzajOglasa{
    display: grid;
    grid-template-areas:    "datum prazno datumVaz"
                            "naslov naslov naslov"
                            "strucnaSpr strucnaSpr mesto"
                            "trazimo trazimo trazimo"
                            "nudimo nudimo nudimo"
                            "iskustvo radnoVreme radnoVreme"
                            "plata duzina duzina"
                            ;
}
span{
    font-weight: 600;
}

#spnNaslovOgl{
    grid-area: naslov;
    font-size: 1.4em;
    font-weight: 700;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
#spnNaslovOgl::before{
    content: attr(lbl);
    position: absolute;
    top: -12px;
    font-weight: 300;
    font-size: 0.6em;
    font-style:oblique;
    text-shadow: none;
}
#spnMestoZap{
    grid-area: mesto;
    position: relative;
}
#spnMestoZap::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.7em;
    font-style:oblique;
    text-shadow: none;
}
#spnStrucnaSprema{
    grid-area: strucnaSpr;
    position: relative;
}
#spnStrucnaSprema::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnIskustvo{
    grid-area: iskustvo;
    position: relative;
}
#spnIskustvo::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnTrazimo{
    grid-area: trazimo;
    position: relative;
}
#spnTrazimo::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnNudimo{
    grid-area: nudimo;
    position: relative;
}
#spnNudimo::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnRadnoVreme{
    grid-area: radnoVreme;
    position: relative;
}
#spnRadnoVreme::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnPlata{
    grid-area: plata;
    position: relative;
}
#spnPlata::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnDuzinaPosla{
    grid-area: duzina;
    position: relative;
}
#spnDuzinaPosla::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnDatumObjave{
    grid-area: datum;
    position: relative;
}
#spnDatumObjave::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
#spnDatumVazenja{
    grid-area: datumVaz;
    position: relative;
}
#spnDatumVazenja::before{
    content: attr(lbl);
    position: absolute;
    top: -13px;
    font-weight: 300;
    font-size: 0.8em;
    font-style:oblique;
    text-shadow: none;
}
@media screen and (max-width:480px){
    .divOglas{
        grid-template-columns: 4.1em auto 5em;
        grid-template-rows: 1.5em 3em 1.5em;
    }
    .imgSlikaFrm{
        width: 4em;
    }
    .spnNaslovOgl{
        font-size: 1.1em;
    }
    .divDetaljiOgl{
        width: 98%;
        height: 500px;
        margin-left: -49%;
        margin-top: -250px;
    }
    #divDetaljiSadrzaj{
        display: grid;
    }
    #divFirma{
        grid-template-areas:    "slika naziv"
                                "slika naziv"
                                "slika grad"
                                "slika telefon"
                                "slika email";
    }
    #divFirma img{
        width: 6em;
    }
    #divSadrzajOglasa{
        grid-template-rows:1fr auto 1fr auto auto 1fr 1fr;
        row-gap: 20px;
        column-gap: 10px;
    }
}
@media screen and (min-width:481px) and (max-width:768px){
    .divOglas{
        grid-template-columns: 6.2em auto 5em;
        grid-template-rows: 1.5em 3em 1.5em;
    }
    .imgSlikaFrm{
        width: 6em;
    }
    .divDetaljiOgl{
        width: 98%;
        height: 500px;
        margin-left: -49%;
        margin-top: -250px;
    }
    #divDetaljiSadrzaj{
        width: 100%;
        height: 100%;
        grid-template-columns: 30% auto;
    }
    #divFirma{
        grid-template-areas:    "slika"
                                "naziv"
                                "grad"
                                "telefon"
                                "email";
    }
}
@media screen and (min-width:769px){
    .divOglas{
        grid-template-columns: 7em auto 7em;
        grid-template-rows: 1.5em 3em 1.5em;
    }
    .imgSlikaFrm{
        width: 6em;
    }
    .divDetaljiOgl{
        width: 800px;
        height: 500px;
        margin-left: -400px;
        margin-top: -250px;
    }
    #divFirma{
        grid-template-areas:    "slika"
                                "naziv"
                                "grad"
                                "telefon"
                                "email";
        grid-template-rows: auto auto auto auto 1fr;
    }
    #divDetaljiSadrzaj{
        width: 100%;
        height: 100%;
        grid-template-columns: 30% auto;
        gap: 10px;
    }
}