/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 19 feb. 2021, 8:38:02
    Author     : Stikets
*/

/*Popup twinies*/

#popup_creador_twinies{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 13 !important; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
#popup_creador_twinies #popup_content_twinies{
    height: auto;
    background: rgb(255, 255, 255);
    position: absolute;
    left: 50%;
    top: 51%;
    opacity: 0;
    transition: 0.5s;
    -webkit-transform: translate(-50%,-51%);
    -ms-transform: translate(-50%,-51%);
    transform: translate(-50%,-51%);
    /* max-height: 80%; */
    /* max-width: 100%; */
    z-index: 92;
    position: fixed;
    /* padding: 15px; */
    overflow: auto;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    padding: 10px 15px;
    width: 45vw;
    min-width: 900px;
/*    height: 95vh;*/
    overflow: hidden;
}

#popup_creador_twinies #popup_fons_twinies{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    cursor: pointer;
}

/* The Close Button */
#popup_creador_twinies #tancar_popup_twinies:before{
    text-align: center;
    content: "\00d7";
    font-size: 40px;
    color: #d3d3d3;
    width: 25px;
    line-height: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
}

#popup_creador_twinies #tancar_popup_twinies:hover:before,
#popup_creador_twinies #tancar_popup_twinies:focus:before {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}






/*Popup delete twinies*/




.showElement {
    display: flex !important;
}
#popup_delete_twinies{
    display: none;
    /* width: 100%; 
    justify-content: center;
    align-items: center;
    margin-top: 20px;*/
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    background: white;
    transition: 1s;
    opacity: 1;
}
#box_message{
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}
.text_delete_twinie{
    font-size: 16px;
    color: #666666;
    
    text-align: justify;
}
#div_buttons{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}
.button_delete_twinie{
    cursor: pointer;
    display: inline-block;
    border: 2px solid #005898;
    color: #005898;
    font-size: 18px;
    padding: 6px 20px;
    text-decoration: none;
    background-color: white;
    border-radius: 20px;
    font-weight: 600;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
    margin-bottom: 15px;
}
.button_accept {
    background-color: #ea8027;
    
    border: 2px solid #ea8027;
    color: white;
}
.button_delete_twinie:hover {
    background-color: #005898;
    color: white;
}
.button_accept:hover {
    color: #ea8027;
    background-color: white;
}


/* maquetacions twinie amb cos*/

.cos-cara-switch {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
        /*margin-top: 10px;*/
    top: 2vw;
    left: 1vw;
    z-index: 1;
}
.cos-cara-switch img {
    height: 45px;
    width: 45px;
}
.hidePopup{
    display:none
}
#seleccionar_cos,#seleccionar_cara{
    cursor: pointer;
}

#seleccionar_cos, #seleccionar_cara{
    padding: 2px;
    margin-bottom: 7px;
    background-color: rgb(238,238,238);
    border-radius: 10%;
    border:1px solid transparent;
}
#seleccionar_cos:hover, #seleccionar_cara:hover{
    border:1px solid #666;
}
.opcio_seleccionada {
    border:1px solid #666 !important;
}
p.nom-twinie {
    text-align: left;
    font-size: 1.7em;
    font-weight: bold;
    margin: 0px 0px 0px 3px;
    color: #065999;
}
.txt_submit{
    margin-top: 0px !important;
}

/*#cboxContent, #cboxLoadedContent{
    height:auto !important;
}*/

#bt_press_body{
    background: rgba(0, 0, 0, 0) url(/templates/stikets/img/icones/banners/Product_Arrow_LEFT_A.png) no-repeat scroll 50% 50% / 100% 100% !important;
    width: 11px;
    height: 20px;
    transform: rotate(180deg);
}
#bt_press_face{
    background: rgba(0, 0, 0, 0) url(/templates/stikets/img/icones/banners/Product_Arrow_LEFT_A.png) no-repeat scroll 50% 50% / 100% 100% !important;
    width: 11px;
    height: 20px;
}
a.nxt_cos {
    position: absolute;
    top: 10vw;
    right: 20px;
    cursor:pointer;
    z-index: 1;
}
a.prev_cos{
    position: absolute;
    top: 10vw;
    left: 20px;
    cursor:pointer;
    z-index: 1;
}


@media (max-width: 990px){
    a.nxt_cos{
        top: 18vh;
        right: 12px;
    }
    a.prev_cos{
        top: 18vh;
    }
    #popup_creador_twinies #popup_content_twinies{
        width: 92vw;
        padding: 1vh 5px;
        max-height: 85vh;
        min-width: 0;
    }
    #popup_creador_twinies #tancar_popup_twinies:before{
        right: 1vh;
        top: 1vh;
        font-size: max(2vh, 40px);
    }
    .cos-cara-switch {
        top: 2vh;
        left: 1vh;
    }
    #popup_creador_twinies #popup_fons_twinies{ 
        cursor: none;
    }
}