body {
    font-family:Arial;
    font-size:17px;
    line-height:normal;
}

/* Mora se podesiti Google Chrom  tako da briše coocije svaki put kada se odjavi iz Browsera*/

/* Ovo je kao pozadina*/
.modalOdmah{
    /*display:none;*/
    position:fixed;
    z-index:-1;
    /*z-index:1;  Ovo je da bi pozadina bila preko svega*/
    left:0;
    top:0;
    height:100%;
    width:100%;
    /*overflow:auto;*/
    background-color:rgba(225, 226, 224, 0.63);
}

/*   modal kada se poziva sa ekrana npr dugme */ 
.modal{
    display:none;
    position:fixed;
    z-index:1;  /*Ovo je da bi pozadina bila preko svega*/
    left:0;
    top:0;
    height:100%;
    width:100%;
    overflow:auto;
    background-color:rgba(225, 226, 224, 0.63);
}

/* A ovo je kao prozor modalni   */
.modal-content{
    /*----CENTAR-------*/
    position: fixed;
    top:10%;
    left: 50%;
    transform: translate(-50%, -10%);
    /*----------------*/
    /*border: 1px solid black;*/
    background-color:white;
    border-radius: 10px 10px 10px 10px;
    margin: 10% auto;   /*Odvajamo od vrha*/
    /*padding:20px;       /* odvajmo od ivice ovog contenta ali sam ukinuo kada sam napravio header pa sam tamo definisao padding*/
    width:50%;
    box-shadow: 0 5px 8px black,0 5px 8px black ;
    animation-name:modalopen;  /* poziva donji keyframe koji usporava i polako se pojavljuje*/
    animation-duration:2s;
}

@keyframes modalopen{
    from{opacity:0}
    to{opacity:1}
}

.modal-header{
    background: linear-gradient(0deg, white, rgba(9, 126, 170, 0.84));
    color:#f7f6f6;
    margin: 0;
    padding:5px;
    border-radius: 10px 10px 0 0;
}

.modal-footer{
    background: linear-gradient(0deg, rgba(9, 126, 170, 0.84), white);
    color:#f7f6f6;
    border-radius: 0 0 10px 10px;
}

/*  x - ić*/
.closeBtn{
    color:#ccc;
    float:right;
    top:0;
    font-size: 30px;
}

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

}