html, body{
    background-color: #d2dbdf;
}

body{
    padding-top:90px;
}

.con-navbar {
    margin: 0 0 0 80px !important;
}

#contenedor-main { 
}

#contenedor-body {
    
}


ul.navbar-nav{
    padding:0;
}



#contenedor-menu {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    right:0;
    z-index: 1030;
    height:80px;
    width:100%;
    background: var(--bs-cyan);
    color: #aaa;
}

#contenedor-menu.contenedor-menu-admin {
    background: var(--bs-red);
}

a{
    color: var(--bs-secondary);
    text-decoration: none;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

a:hover{
    color: var(--bs-primary);
}


a.menu-opcion{
    text-align:center;
    padding:15px 10px 0 10px;
    display:block;
    

    border: 3px solid transparent;
    color: var(--bs-secondary );
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


#dragandrophandler
{
border:2px dotted #0B85A1;
width:400px;
color:#92AAB0;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}

a.menu-opcion:hover, a.menu-opcion:active {
    color: var(--bs-primary);
}         

a.menu-opcion.selected{
    color: var(--bs-primary);
}

.avatar img{
    width: 40px;
    height:40px;
    border-radius:50%;
    margin: 10px 0 0 0;
}

.avatar .emoji{
    position:relative;
    height:52px;
    width:40px;
}

.emoji{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.avatar .emoji > div{
    top: 13px;
    /* left:17px; */
    position:absolute;
    font-size:20px !important;
     
    font-weight:500;
}


.pie-chart {
	position: absolute;
	width: 52px;
	height: 52px;
	margin: 0;
    z-index: 1;
    left:12px;
    top:4px;
}

#puntajes .pts, #pre_puntajes .pts, .pre_puntajes .pts{
    border-radius:6px;
    display: inline-block;
    width:50px;
    text-align:center;
    margin-right:8px;
    font-weight:bold;
    overflow:hidden;
}

.img150{
    width:150px !important;
    height:150px !important;
}

.tab-body{
    border-top: none;
    border-radius: 0 5px 5px 5px;
    border-color: var(--bs-teal);
}

.div_error{
    margin-top:5px;
    padding:5px 15px;
    border:1px solid red;
    border-radius:10px;
    background: black;
    color: #ff00ff;
}

#puntajes .pts-titulo, #prepuntajes .pts-titulo, .prepuntajes .pts-titulo{
    width:100%;
    font-size:12px;
    padding: 3px 0 2px 0;
}
#puntajes .pts-numero, #pre_puntajes .pts-numero, .pre_puntajes .pts-numero{
    width:100%;
    padding: 0 0 2px 0;
    opacity:.8;
}

#downline{
    border:1px solid white;
    border-radius: 8px;
    background:white;
    padding: 0 15px !important;
    overflow:auto;
    height: calc( 100vh - 140px );
    min-height: calc( 100vh - 140px );
    margin: -15px -15px -15px -15px !important;
}

.btn .contador{
    position:absolute !important;
    top: 10px !important;
    right:10px;
    display: block;
    font-size: 16px;
}

.btn .elipsis{
    font-size: 8px;
    padding:0;
}

.btxn:xhover .contador{
    color: var(--bs-primary);
    background: white;
}

a.mini{
    font-size: 10px;
}

#mascara{
    border:2px dotted red;
    position:absolute;
    width:140px;
    top:60px;
    height:160px;
    border-radius:50%;
    z-index:2;
    margin-left: calc( 50% - 70px );
}

.foto_producto{
    width:100px; 
    height:100px; 
    margin: 0 10px;
}

#login-form, #login-form > .row{
    padding:0 3em;
}

.grayscale {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  opacity:0.3;
}

#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:white; 
    text-align:center;
    z-index:100;
}
#lightbox img {
    margin-top:100px;
}

.vertical-center {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
}

.center-btn {
    position:relative;
    top:42%;
}

.switch-evento{
    zoom:2; 
    position:absolute; 
    bottom:22px; 
    right:10px;
}

.switch-factura{
    zoom:2; 
    display:inline-block;
}

@media (max-width: 767px) {
    #login-form, #login-form > .row{
        padding:0;
    }   

    .switch-evento{
        bottom:2px; 
        right:4px;
        zoom:1.5; 
    }
    
    #lightbox img {
        width:100%;
        margin-top:100px;
    }


    .foto_producto{
        width:50px; 
        height:50px; 
        margin: 0;
    }

    .con-navbar {
        margin: 0 !important;
        padding-bottom: 80px !important;
    }

    #downline{
        height: calc( 100vh - 65px );
        min-height: calc( 100vh - 65px );
    }


    #contenedor-menu {
        right: 0;
        top: auto;
        height:65px;
        width:auto;
        text-align:center;
    }    

    a.menu-opcion{
        text-align:center;
        padding:10px;
        font-size:20px;
        display:inline-block;
    }   

    a.menu-opcion:not(:first-child):hover, a.menu-opcion:not(:first-child):active {
        border-left: 3px solid transparent;
        border-bottom: 3px solid #13D3B3;
    }         
    
    a.menu-opcion:not(:first-child).selected{
        border-left:none;
        border-bottom: 3px solid var(--bs-primary);
    }
    
    .avatar img{
        margin: 0 0 10px 0;
        left:18px;
        top:27px;
    }

    .avatar .emoji{
        height:30px;
    }
    
    .avatar .emoji > div{
        left: 0;
        top: -12px;
    }

    
    .pie-chart {
        left:12px;
        top:21px;
    }

    a.menu-opcion > svg{
        margin-top:0;
        display:inline-block;
    }   
}

.upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
    display: none;
}
.upload-demo.ready .upload-demo-wrap {
    display: block;
}
.upload-demo.ready .upload-result {
    display: inline-block;    
}
.upload-demo-wrap {
    width: 100%;
    height: auto;
    margin: 0 auto;
}


/*********************************  DOWNLINE ********************************/


.link {
    fill: none;
    stroke: var(--bs-gray-500);
}

.link_bg {
    fill: var(--bs-gray-500);
}


.compra_si { fill: #5dbc1a; }
.compra_no { fill: #a9a9a9; }
.num_bg    { fill: var(--bs-marine) }


.card.boton{
    cursor:pointer;
}

.card.boton:hover{
    background:var(--bs-gray-200);
}

table[productos] tr[producto]:not(:last-child) > td{
    border-bottom: 1px solid var(--bs-gray-300);
}

table[productos] td{
    padding:15px;
}

.opaco{
    opacity:.6;
}
.opaco td{
    background:var(--bs-gray-200);
}

#heatmap{
    white-space: nowrap;
}

.heatmap_columna{
    width: auto; 
    display:inline-block;
    border-radius: 3px;
    text-align: center;
    cursor:pointer;
    padding:0 1px;
    margin:0px;
    border:1px solid transparent;
    background-color: var(--bs-gray-100)
}

.heatmap_columna p{
    font-size: 0.8rem;
    display:inline-block;
}

.heatmap_columna:hover{
    border:1px solid var(--bs-teal);
    background-color: var(--bs-teal);
    color:white;
    box-shadow: 0 0 0 0px var(--bs-teal);
}

.heatmap_columna.selected{
    border:1px solid var(--bs-teal);
    background-color: var(--bs-teal);
    color:white;
    padding:0 2px;
    cursor:default;
}

.heatmap_columna:hover .heatmap_dia{
    box-shadow: 0 0 0 3px var(--bs-teal);
}

.heatmap_dia{
    width:20px;
    height:20px;
    margin-bottom:3px;
    display:block;
    border-radius: 3px;
}