#wrap_kuvien_lisays{
    display: flex;
    gap:20px;
    align-items: center;
    justify-content: space-between;
    margin:10px auto;
    padding: 15px 3%;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: rgba(126, 121, 121, 0.6);
}

#wrap_kuvien_lisays button{ margin:0px;}

#wrap_kuvien_lisays input[type='file']{ display: none; }

#wrap_kuvien_lisays #label_valitse{
    width:auto;
    position: relative;
    height:50px;
    line-height: 50px;
    font-size:17px;
    font-weight: 500;
    background-color:azure;
    padding: 0px 20px 0px 50px;
    border-radius: 25px;
    color:rgba(70,70,70,1.00);
}

#wrap_kuvien_lisays #label_valitse:before{
    position: absolute;
    top:0px;
    bottom:0px;
    margin: auto 0px;
    left:10px;
    content:"";
    width:35px;
    height: 35px;
    background-image: url("https://cnt.ravintolat.online/imgs2/upload-cloud.svg");
    background-size:30px 30px;
    background-position: center;
    background-repeat: no-repeat;
}

#wrap_kuvien_lisays #btn_lataa{ display: none; }

#right_slice .contentti #wrap_all_images {
    display: flex;
    width:100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#right_slice .contentti #wrap_all_images .wrap {
    display: flex;
    flex-wrap: wrap;
    width:95%;
    min-width: 95%;
    max-width: 95%;
    height: auto;
    min-height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:15px;
}

#right_slice .contentti #wrap_all_images .wrap .slide {
    display: flex !important;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width:320px;
    height:auto;
    min-height: 50px;
    max-height: 520px;
    align-self: stretch;
    overflow: visible;
    padding: 10px 5px;
    background-color: rgba(237,231,232,1.00);
    border-radius: 12px;
}


#right_slice .contentti #wrap_all_images .wrap .slide .imagewrap {
    display: flex;
    width:100%;
    height: auto;
    aspect-ratio:16/9;
    align-items: center;
    justify-content: center;
    border:1px solid white;
}

#right_slice .contentti #wrap_all_images .wrap .slide .imagewrap video,
#right_slice .contentti #wrap_all_images .wrap .slide .imagewrap img {
    width: 95%;
    height: auto;
    max-height: 200px;
    border-radius: 12px;
}

#right_slice .contentti #wrap_all_images .wrap .slide .kaytossa,
#right_slice .contentti #wrap_all_images .wrap .slide .eikaytossa{
    position: absolute;
    top: 10px;
    right:10px;
    z-index: 99;
    padding: 10px;
    font-size:14px;
    font-weight: 500;
    clip-path: circle();
}

#right_slice .contentti #wrap_all_images .wrap .slide .mainosid {
   padding: 10px 0% 3px 0%;
   font-size: 20px;
    font-weight: 600;
    width: 95%;
    margin:0px auto;
    box-sizing: border-box;
  line-height: 25px;
    text-align: left;
    color:rgba(85,85,85,1.00);   
}

#right_slice .contentti #wrap_all_images .wrap .slide .infoselite {
    padding: 5px 0%;
   font-size: 15px;
    font-weight: 800;
    width: 95%;
    margin:0px auto;
    box-sizing: border-box;
  line-height: 20px;
    text-align: left;
    color:rgba(85,85,85,1.00); 
}

#right_slice .contentti #wrap_all_images .wrap .slide .kaytossa{
     background-color:rgba(89,234,32,1.00);   
}

#right_slice .contentti #wrap_all_images .wrap .slide .eikaytossa{
     background-color:rgba(209,38,65,1.00);   
}

#right_slice .contentti #wrap_all_images .wrap .slide .listwrap{
    position: relative;
    display: flex;
    width: 95%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:5px 0px;
    border:1px solid rgba(22,22,22,0.2);
    border-radius: 12px;
    padding: 5px;
    margin: 15px auto;
    box-sizing: border-box;
}

#right_slice .contentti #wrap_all_images .wrap .slide .listwrap:before{
    top: 0px;
    left:0px;
    position: absolute;
    content:"Käytössä näytöissä : ";
    translate: 20px -10px;
    color:black;
    background-color: rgba(237,231,232,1.00);
    font-weight: 600;
    font-size: 13px;
}

#right_slice .contentti #wrap_all_images .wrap .slide .listwrap p {
    position: relative;
    width:95%;
    font-size: 14px;
    height:40px;
    line-height: 40px;
    margin:0;
    padding: 0px 20px 0px 50px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.1s;
    color:rgba(93,93,93,1.00);
    background-color: rgba(222,222,222,0.0);
    border-bottom:1px solid rgba(174,174,174,1.00);
}

#right_slice .contentti #wrap_all_images .wrap .slide .listwrap p:last-of-type {
    border-bottom:0;
}

#right_slice .contentti #wrap_all_images .wrap .slide .listwrap p:before {
    position: absolute;
    top:0px;
    bottom:0px;
    margin: auto 0px;
    left:5px;
    content:"";
    width:30px;
    height: 30px;
    background-image: url("https://cnt.ravintolat.online/imgs2/computer-display-screen.svg");
    background-size:22px 22px;
    background-position: center;
    background-repeat: no-repeat;
}

#right_slice .contentti #wrap_all_images .wrap .slide .listwrap p:hover {
    background-color: rgba(222,222,222,0.8);
}

#right_slice .contentti #wrap_all_images .wrap .slide .btnwrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color:rgba(242,242,242,0.69);
    border-radius: 55px;
    padding:10px 10px;
    gap:5px 5px;
    width: 94%;
    height: auto;
    box-sizing: border-box;
}

#right_slice .contentti #wrap_all_images .wrap .slide button.lisaabtn,
#right_slice .contentti #wrap_all_images .wrap .slide button.rotatebtn,
#right_slice .contentti #wrap_all_images .wrap .slide button.ajasta_btn,
#right_slice .contentti #wrap_all_images .wrap .slide button.poistabtn {
    font-size:12px;
    margin:0px 0px;
    text-wrap:nowrap;
}

#right_slice .contentti #wrap_all_images .wrap .slide button.ajasta_btn{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding:0px 12px;
}

#right_slice .contentti #wrap_all_images .wrap .slide button.ajasta_btn img{
    margin: auto;
    filter:invert();
    width:20px;
    height: 20px;
}

#right_slice .contentti #wrap_all_images .wrap .slide button.poistabtn {
    background-color:rgba(212,13,13,1.00);
    color:white;
}

#right_slice .contentti #wrap_all_images .wrap .slide button.rotatebtn{
    display: flex;
    width:45px;
    min-width: 45px;
    height:45px;
    align-items: center;
    justify-content: center;
    padding:0px 0px;
    box-sizing: border-box;
    background-size:32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-color:rgba(228,228,228,1.00);
    background-image: url("https://cnt.ravintolat.online/imgs2/rotate-right.svg");
}


#oioi{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    width:50%;
    max-width: 500px;
    margin: auto;
    height:50vh;
    max-height: 500px;
    border-radius: 15px;
    background-color: rgba(229,234,237,1.00);
    display: flex;
    translate: 0px 200%;
    transition: all 0.2s;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 8px black, 0px 0px 20px black;
    gap: 15px 0px;
    z-index: 888;
}

#oioi select[name='valitsenaytto']{
    width:90%;
    
    height:50px;
    line-height: normal;
    -webkit-appearance:none;
    padding: 0px 25px;
    border-radius: 15px;
    box-sizing: border-box;
    background-color:rgba(212,212,212,1.00);
    background-image:linear-gradient(0deg, rgba(212,212,212,1.00) 10%, rgba(236,236,236,1.00) 90% );
}

#oioi #closebtnsx{
    position: absolute;
    top:20px;
    right:20px;
    display: flex;
    width:35px;
    height: 35px;
    background-color:red;
    color:white;
    padding: 2px 0px 0px 1px;
    box-sizing: border-box;
    box-shadow: inset -1px -11px 8px rgba(161,13,16,1.00), inset 0px 4px 4px rgba(234,233,236,0.85), 0px 5px 2px rgba(22,22,22,0.2);
    font-size: 20px;
    font-weight: 400;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    z-index: 899;
    transition: all 0.1s;
    cursor: pointer;
}

#oioi #closebtnsx:hover{
    translate: 0px 2px;
    box-shadow: inset -1px -11px 8px rgba(161,13,16,1.00), inset 0px 4px 4px rgba(234,233,236,0.85), 0px 1px 1px rgba(22,22,22,0.2);
}

#oioi input[name='mainosid']{ display:none; }

/* Ajastukset...*/

#muuta_ajatustuksia{
    position: fixed;
    display: none;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    margin:auto;
    width:90%;
    height: 95vh;
    height: 95svh;
    gap:10px 0px;
    box-sizing: border-box;
    padding: 50px 5%;
    background-color: rgba(209,215,219,1.00);
    border-radius: 15px;
    z-index: 1200;
    box-shadow: 0px 0px 5px black;
}

#muuta_ajatustuksia {
    
    h4{ margin: 5px 0px; }
    
    #lisaawrap{
        display:flex;
        width:100%;
        height: auto;
        gap:0px 5px;
        background-color: rgba(240,240,240,0.70);
        border-radius: 100px;
    }
    
    #lisaawrap select{
        display: flex;
        width: auto;
        min-width: 200px;
        box-sizing: border-box;
        padding: 0px 25px;
        height: 45px;
        margin: auto;
        border:1px solid rgba(196,196,196,1.00);
        font-size: 18px;
        font-family: Arial;
        font-weight: 500;
        -webkit-appearance:none;
        background-color:rgba(212,212,212,1.00);
        border-radius: 25px;
    }
    
    #closebtn2sx{
        position: absolute;
        top:25px;
        right: 25px;
        display:flex;
        width: auto;
        height: 40px;
        line-height: 40px;
        border-radius: 25px;
        background-color:rgba(230,230,230,1.00);
        color:rgba(28,27,27,1.00);
        padding: 0px 15px;
        font-weight: 900;
    }
    
    input[type='text']{ display: none; }
    input[type='radio']{ display: none; }
    
    .hori_sli{
        display:flex;
        width:100%;
        height:40px;
        gap:3px 5px;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        background-color:rgba(240,240,240,0.70);
        padding: 0px 10px;
        border-radius: 25px;
        justify-content: center;
    }
    
    .hori_sli label{
        display: flex;
        background-color:rgba(228,229,229,1.00);
        color: rgba(48,48,48,1.00);
        border-radius: 100px;
        width:100%;
        height: auto;
        gap:0px 4px;
        font-size: 12px;
        font-weight: 400;
        align-items: center;
        justify-content: center;
        line-height: normal;
        padding: 5px 14px;
        box-shadow: inset 0px -10px 5px rgba(22,22,21,0.1);
        box-sizing: border-box;
    }
    
    #p_ma:checked ~ .hori_sli label:nth-of-type(1),
    #p_ti:checked ~ .hori_sli label:nth-of-type(2),
    #p_ke:checked ~ .hori_sli label:nth-of-type(3),
    #p_to:checked ~ .hori_sli label:nth-of-type(4),
    #p_pe:checked ~ .hori_sli label:nth-of-type(5),
    #p_la:checked ~ .hori_sli label:nth-of-type(6),
    #p_su:checked ~ .hori_sli label:nth-of-type(7){
        background-color: blue;
        color:white;
    }
    
    #ajastuslista{
        display: flex;
        width: 100%;
        flex-direction: column;
        gap:3px 0px;
        box-sizing: border-box;
    }
    
    #ajastuslista #ajastukset_ma,
    #ajastuslista #ajastukset_ti,
    #ajastuslista #ajastukset_ke,
    #ajastuslista #ajastukset_to,
    #ajastuslista #ajastukset_pe,
    #ajastuslista #ajastukset_la,
    #ajastuslista #ajastukset_su {
        display: none;
        flex-direction: column;
        background-color:rgba(238,238,238,1.00);
        padding: 20px;
        gap:3px 0px;
        box-sizing: border-box;
        border-radius: 20px;
    }
    
    #p_ma:checked ~ #ajastuslista #ajastukset_ma,
    #p_ti:checked ~ #ajastuslista #ajastukset_ti,
    #p_ke:checked ~ #ajastuslista #ajastukset_ke,
    #p_to:checked ~ #ajastuslista #ajastukset_to,
    #p_pe:checked ~ #ajastuslista #ajastukset_pe,
    #p_la:checked ~ #ajastuslista #ajastukset_la,
    #p_su:checked ~ #ajastuslista #ajastukset_su{ 
        display: flex;
    }
    
    #ajastuslista #ajastukset_ma .rivi,
    #ajastuslista #ajastukset_ti .rivi,
    #ajastuslista #ajastukset_ke .rivi,
    #ajastuslista #ajastukset_to .rivi,
    #ajastuslista #ajastukset_pe .rivi,
    #ajastuslista #ajastukset_la .rivi,
    #ajastuslista #ajastukset_su .rivi {
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height:40px;
        margin: 0px 0px;
        background-color:white;
        padding: 0px 20px;
        box-sizing: border-box;
        color:black;
        border-radius: 20px;
    
}
    
    #ajastuslista #ajastukset_ma .rivi:after,
    #ajastuslista #ajastukset_ti .rivi:after,
    #ajastuslista #ajastukset_ke .rivi:after,
    #ajastuslista #ajastukset_to .rivi:after,
    #ajastuslista #ajastukset_pe .rivi:after,
    #ajastuslista #ajastukset_la .rivi:after,
    #ajastuslista #ajastukset_su .rivi:after{
        position: absolute;
        top:0px;
        bottom:0px;
        right: 10px;
        width: auto;
        height:30px;
        line-height: 30px;
        background-color: red;
        color:white;
        content:"Poista";
        border-radius: 25px;
        padding: 0px 15px;
        box-sizing: border-box;
        margin: auto 0px;
        
    }
    
}