﻿

:root {
    --color-gris: #efefef;
    --color-gris-oscuro: #dadada;
    --color-blanco: #ffffff;
    --color-naranja: #f0ad4e;
    --background-image-url: url("/Images/Cliente/HomeFondoImagen.png");
    --background-menu: var(--color-gris);
    --opacidad-sidebar: "";
    --opacidad-sidebar-desplegable: "";
    --color-desplegable: "";
    --background-inicio: "";
    --background-color-inicio: "";
    --padding-logo-menu: "";

    --color-primario: #3F5765;
    --color-secundario: #f29b01;
    --color-texto: #3F5765;

}

.global-vars {
    --color-gris: #efefef;
    --color-gris-oscuro: #dadada;
    --color-blanco: #ffffff;
    --color-naranja: #f0ad4e;
    --background-image-url: url("/Images/Cliente/HomeFondoImagen.png");
    --background-menu: var(--color-gris);
    --color-sombra-menu: #c1bcbcba;
    --sombra-icono:drop-shadow(1px 1px 0px rgba(0,0,0,.1));
    --sombra-icono-relleno:drop-shadow(3px 3px 7px rgba(0,0,0,.2));
}

.color-web-defecto{
    --color-primario: #3F5765 !important;
    --color-secundario: #f29b01 !important;
    --color-texto: #3F5765 !important;
}

.dentro-inicio {
    --opacidad-sidebar: 0.9;
    --opacidad-sidebar-desplegable: 0;
    --color-desplegable: none;
    --background-inicio: var(--background-image-url);
    --background-color-inicio: var(--color-gris-oscuro);
}

.fuera-inicio {

    --opacidad-sidebar: 1;
    --opacidad-sidebar-desplegable: 1;
    --color-desplegable: var(--color-gris);
    --background-inicio: "";
    --background-color-inicio: var(--color-gris-oscuro);
}

.icono-menu-plegado {
    background: white none repeat scroll 0% 0%;
    width: 105%;
    box-shadow: rgba(193, 188, 188, 0.73) 0px -4px 5px, rgba(193, 188, 188, 0.73) 0px 4px 5px, rgba(193, 188, 188, 0.73) 1px 0px 0px;
}

.contenedor-header{
    height:50px;
}

.contenedor-header-iconos{
    height:100%;
}

.contenedor-header-lista{
    height:100%;
}

.subcontenedor-header-iconos{
    display:flex;
    flex-direction:row;
    padding:7px 0px 7px 45px;
}

.header-item {
    margin: 0px 10px 0px 10px;
    min-width: max-content;
}

.header-contenedor-iconos{
    display:flex;
    flex-direction:row;
}

.header-icon-item{
       width:22px;
       margin:0 5px;
}

.b-left {
    padding-left: 30px;
    border-left: 1px solid #004f7530;
}

.b-right {
    padding-right: 20px;
    border-right: 1px solid #004f7530;
}

.cadena-conexion{
    position:fixed;
    z-index:1;
}

.contenedor-header-item{
    height:100%;
}

.modalPopup {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}

.mask {
    -webkit-mask-size: cover;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.mask-pedidos,
.mask-presupuestos,
.mask-operadores,
.mask-anuncios,
.mask-mensajes,
.mask-ayuda,
.mask-descargas,
.mask-herramientas,
.mask-simsa,
.mask-borrarFichero{
    filter:var(--sombra-icono);
    width:20px;
    height:20px;
}

.borrarFichero{
    -webkit-mask-image:url("/Images/PapeleraEliminarActivada.svg");
    mask-image:url("/Images/PapeleraEliminarActivada.svg");
    background-color:var(--color-primario);
}

.ayuda {
    -webkit-mask-image: url("/Images/Ayuda.svg");
    mask-image: url("/Images/Ayuda.svg");
    background-color: var(--color-texto);
}

.mensajes{
    -webkit-mask-image:url("/Images/Conversaciones.svg");
    mask-image:url("/Images/Conversaciones.svg");
    background-color:var(--color-texto);
}

.anuncios{
   -webkit-mask-image:url("/Images/Anuncios.svg");
    mask-image:url("/Images/Anuncios.svg");
    background-color:var(--color-texto);
}

.operadores{
    -webkit-mask-image:url("/Images/Operadores.svg");
    mask-image:url("/Images/Operadores.svg");
    background-color:var(--color-texto);
}

.presupuestos{
    -webkit-mask-image:url("/Images/Presupuestos.svg");
    mask-image:url("/Images/Presupuestos.svg");
    background-color:var(--color-texto);
}

.pedidos{
    -webkit-mask-image:url("/Images/Pedidos.svg");
    mask-image:url("/Images/Pedidos.svg");
    background-color:var(--color-texto);
}

.descargas{
    -webkit-mask-image:url("/Images/LaNube.svg");
    mask-image:url("/Images/LaNube.svg");
    background-color:var(--color-texto);
}

.showroom {
    -webkit-mask-image: url("/Images/Showroom.svg");
    mask-image: url("/Images/Showroom.svg");
    background-color: var(--color-texto);
}
.herramientas{
    -webkit-mask-image:url("/Images/Configuración.svg");
    mask-image:url("/Images/Configuración.svg");
    background-color:var(--color-texto);
}

.simsa{
    -webkit-mask-image:url("/Images/Simsa.svg");
    mask-image:url("/Images/Simsa.svg");
    background-color:var(--color-secundario);
}

.mask-youtube{
    width:22px;
    height:22px;
}
.youtube-icon{
    mask-image:url("/Images/youtube.svg");
}

.mask-vimeo{
    width:22px;
    height:22px;
}
.vimeo-icon{
    mask-image:url("/Images/vimeo.svg");
    
}

.mask-instagram {
    width: 22px;
    height: 22px;
}

.instagram-icon {
    mask-image: url("/Images/instagram.svg");
}

.color-texto{
    color:var(--color-texto);
}
.color-primario{
    color:var(--color-primario);
}
.color-secundario{
    color:var(--color-secundario);
}
.background-secundario{
    background-color:var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;

}
.background-primario{
    background-color:var(--color-primario)!important;
    border-color:var(--color-primario) !important;
}

.background-secundario:hover,
.background-secundario:active,
.background-secundario:hover,
.background-secundario:focus{
    background-color: var(--color-secundario) !important;
    border-color:var(--color-secundario) !important;
    filter:brightness(.95);
}

imgResize {
    height: 100px;
    width: 100px;
    object-fit: contain;
}

* {
    font-family: "Roboto";
}

.flechaDesplegable {
    padding-left: 5px;
    width: 25px;
}

.mi-sidebar {
    position: relative;
    box-shadow: 6px 6px 15px rgba(0,0,0,.2);
    margin-left:3px;
}

.mi-sidebar:after {
    content: '';
    opacity: var(--opacidad-sidebar);
    background-color: var(--background-menu) !important;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.color-texto-menu li a {
    color:var(--color-texto) !important;
}

.sidebar-menu > li {
    background: none;
}

.sidebar-menu{
    overflow:visible;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span{
    margin:0px
}
/*.logo-mini {
    padding: 30px 0px 30px 0px;
}*/
#imgLogoPequenyo{
    margin:0px !important;
}
.item-principal {
    text-transform: uppercase;
}

.enlace-principal {
    display:flex !important;
    padding-bottom: 0px !important;
}
.enlace-principal:hover > div{
    transform:scale(1.2,1.2);
}
.padding-left:active,
.enlace-principal:active{
    font-weight:normal;
}

/*.item-secundario{
    text-transform:capitalize;
    padding-left:0px !important;
    margin-top:-5px !important; 
}*/

.skin-black .sidebar-menu > li > .treeview-menu {
    background: var(--color-desplegable) !important;
}

.treeview-menu.menu-open::after {
    content: '';
    opacity: var(--opacidad-sidebar-desplegable);
    background: var(--background-menu) !important;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


.treeview > a > span {
    background: var(--color-desplegable) !important;
}



.padding-menu:hover{
    box-shadow: 0px -4px 5px var(--color-sombra-menu), 0px 4px 5px var(--color-sombra-menu), 1px 0px 0px var(--color-sombra-menu);
    width:101.4%;
    background-color:red;
}

.padding-menu:hover  a{
    font-weight: bold;
    letter-spacing:.3px;
}




.contenedor-logo {
    background-color: var(--color-blanco) !important;
    padding: var(--padding-logo-menu) !important;
}


.wrapper-background {
    background-image: var(--background-inicio);
    background-size: 100%;
    background-position-x: center;
    background-color: var(--background-color-inicio);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header-background {
    box-shadow: 6px 6px 15px rgba(0,0,0,.2);
}
.header-background::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    background-color:var(--color-gris);
    opacity:var(--opacidad-sidebar);

}
.header-nombre-usuario {
    z-index:2;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-left: 1px solid #004f7530 !important;
    margin-top: 5%;
    background:none !important;
    color:black !important;
    height: 70%;
}

.header-nombre-usuario:hover,
.header-nombre-usuario:focus{
    font-weight:bold;
}


.header-nombre-usuario:active {
    color:#000000a8 !important;
}
.enlace-sin-fondo {
    background: none !important;
    border-left:none !important;
}

.escalar:hover,
.escalar:focus,
.enlace-sin-fondo:hover .escalar,
.enlace-sin-fondo:focus .escalar{
    transform:scale(1.2,1.2);
}


.escalar:active,
.enlace-sin-fondo:active .escalar{
    transform:scale(1,1);
}

.items-menu-lateral li a{
    font-size:13px;
}

.header-menu-usuario {
    z-index: 1;
    width: 180px !important;
    margin-right: 10px;
}

.no-borders{
    border:0px !important;
}


.user-menu{
    height:50px;
}

.user-menu:hover{
}

.shadow {
    filter: drop-shadow(5px 5px 5px #22222282);
}

.padding-left{
    padding-left:10px;
}



.padding-left > span{
    vertical-align:middle;
    font-size:13px;
}



.h-100{
    height:100%;
}


.item-alignment-middle{
    display:flex;
    justify-content:center;
    align-items:center;
}

.bold{
    font-weight:bold;
}

.p-5{
    padding:5px;
}

.d-flex{
    display:flex;
}

.footer-text{
    font-size:11px;
    font-family:Roboto;
    color:black;
}

.footer-link:hover{
    text-decoration:underline;
    font-weight:normal;
}
