/*Titulos del Tema*/

.theme-orange .metismenu li.header{
    color:#FFA117;
}

.theme-cyan .metismenu li.header{
    color:#17C2D7;
}

.theme-green .metismenu li.header{
    color:#5CB65F;
}

.theme-blush .metismenu li.header{
    color:#e25985;
}

.theme-indigo .metismenu li.header{
    color:#9367B4;
}

.theme-red .metismenu li.header{
    color:#E15858;
}

.theme-orange .user-account .user-name{
    color:#FFA117;
}

.theme-cyan .user-account .user-name{
    color:#17C2D7;
}

.theme-green .user-account .user-name{
    color:#5CB65F;
}

.theme-blush .user-account .user-name{
    color:#e25985;
}

.theme-indigo .user-account .user-name{
    color:#9367B4;
}

.theme-red .user-account .user-name{
    color:#E15858;
}

/* Hide Scroll */
body::-webkit-scrollbar {
    display: none;
}

/* Auto Hide Scroll */
.sidebar-scroll{
    overflow-y: scroll;
  	mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  	mask-size: 100% 20000px;
  	mask-position: left bottom;
  	-webkit-mask-image: linear-gradient(to top, transparent,black),linear-gradient(to left, transparent 17px, black 17px);
  	-webkit-mask-size: 100% 20000px;
  	-webkit-mask-position: left bottom;
  	transition: mask-position 0.3s, -webkit-mask-position 0.3s; 
  	scrollbar-width: thin;
}

.sidebar-scroll:hover {
    -webkit-mask-position: left top;
}

@keyframes background {
  from {
    background: pink;
  }
  to {
    background: #c0d6ff;
  }
}

/* Search Bar */

.search_div{
    overflow: overlay;
}

.search_div::-webkit-scrollbar {
    display: none;
}

/* Efectos */

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
}

.fade2.show {
    opacity: 1;
    transform: scale(1);
}

@keyframes anim{
    0% {background-color: yellow;} /*Amarillo*/
   25% {background-color: orange;} /*Naranja*/
   50% {background-color: darkorange;} /*Naranja Fuerte*/
   75% {background-color: orange;} /*Otra vez naranja*/
  100% {background-color: yellow} /*Otra vez amarillo*/
}

.titilar {
  animation-name: anim;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Menu Opciones */

.opciones{
    color: #77797c;
    line-height: 1.5;
    font-size:1em;
    font-family: initial;
}

.opciones:hover {
    color:#212834;
    text-decoration:none;
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* Columnas Visibles */

.dropdown-item.active{
    color:black;
}

/* SweetAlert*/
.swal-footer {
    text-align: center;
}

/* Boton Ir arriba*/
.ir-arriba {
	display:none;
	padding:15px;
	background:#024959;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
}

/*Fixed Header*/
.fixedHeader-floating{
    top:65px !important;
}

/*Botones Datatable*/
.dt-buttons{
	float: left;
}
.dt-buttons a{
   margin-bottom:5px;   
}
.dataTables_info{
    white-space: break-spaces !important;
  	float: left;
}
.dataTables_paginate {
  margin-bottom: 2em !important;
}

.dataTables_length{display:none;}
.cortado{white-space: break-spaces !important;}
.table.dataTable td {word-break: break-word;}

/*LeftMenu*/
#left-sidebar{
    background-image:url("../images/4.jpg");
    background-size: cover;
    box-shadow: 2px 2px 5px #999;
}

 .light_version #left-sidebar{
    background-image:url("../images/4b.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

/* Iconos Inicio */

.barcode{
    color:Gold;
    font-size:1.2em;
}

.barcode:hover{
    color:DarkOrange;
}

.tag{
    color:MediumSeaGreen;
    font-size:1.2em;
}

.tag:hover{
    color:SeaGreen;
}

.bag{
    color:#FA9E1F;
    font-size:1.2em;
}

.bag:hover{
    color:#E96D01;
}

.informacion{
    color:DeepSkyBlue;
}

.informacion:hover{
    color:#008B8B;
}

.sinstock{
    color:#E15858;
}

.sinstock:hover{
    color:red;
}

.campana{
    color:gold;
}

.campana:hover{
    color:yellow;
}

.reloj{
    color:DarkOrange;
}

.reloj:hover{
    color:	OrangeRed;
}

.iconopedido{
    color:#228B22;
}

.iconopedido:hover{
    color:	#008000;
}

.navbar-nav .dropdown-menu li.header.orange{background:linear-gradient(135deg, rgba(255,140,0,0.5) 0%, rgba(255,140,0,0.5) 100%)}
.navbar-nav .dropdown-menu li.header.orange::after{background:url("../../../assets/images/image-gallery/5.jpg") repeat scroll center bottom/cover;opacity:0.6}

.navbar-nav .dropdown-menu li.header.green{background:linear-gradient(135deg, rgba(41,232,41,0.5) 0%, rgba(255,140,0,0.5) 100%)}
.navbar-nav .dropdown-menu li.header.green::after{background:url("../../../assets/images/image-gallery/10.jpg") repeat scroll center bottom/cover;opacity:0.6}

.logout{
    color:tomato;
}

.logout:hover{
    color:red;
}

/* RMA */

#modalReparacion { overflow-y:scroll }
.patt-holder{background:#3382c0;  -ms-touch-action: none;}
.patt-wrap{position:relative; cursor:pointer;}
.patt-wrap ul, .patt-wrap li{list-style: none;margin:0;padding: 0;}
.patt-circ{position:relative;float: left;box-sizing: border-box;-moz-box-sizing: border-box;}
.patt-circ.hovered{border:3px solid #009900;}
.patt-error .patt-circ.hovered{border:3px solid #BA1B26;}
.patt-hidden .patt-circ.hovered{border:0;}
.patt-dots{background: #FFF;width: 10px;height: 10px;border-radius:5px;position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-5px;}
.patt-lines{border-radius:5px;height:10px;background:rgba(255,255,255,.7);position:absolute;transform-origin:5px 5px;-ms-transform-origin:5px 5px; /* IE 9 */-webkit-transform-origin:5px 5px;}
.patt-hidden .patt-lines{display:none;}

/* Producto Publicado */

.toggle{
  	left: 300px;
    top: 40px;
}

/* Producto Destacado */

.heart{
  position: absolute;
  height: 70px;
  width: 70px;
  background-color: #fff;
  transform: rotate(-45deg);
  border-bottom-left-radius: 100px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  left: 300px;
  top: 140px;
}
.heart::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: -50%;
  left: 0;
  border-radius: 50px;
  background-color: #fff;
}
.heart::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: -50%;
  border-radius: 50px;
  background-color: #fff;
}
.heart, .heart::before, .heart::after{
  transition: 0.6s;
  transition-delay: 0.3s;
}
.heart.forward,.heart.forward::before,
.heart.forward::after{
  background-color: #eb608c;
}
.circle {
  position: absolute;
  height: 55px;
  width: 55px;
  left: 7px;
  top: -28px;
  border-radius: 50%;
  z-index: 100;
  transition: 0.6s;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.heart.forward .circle{
  animation: move 0.6s forwards;
}
@keyframes move {
  0%{
    left: 7px;
    top: -28px;
  }
  50%{
    top: -1px;
    left: 17px;
  }
  100%{
    left: 42px;
    top: 7px;
  }
}

.heart.reverse .circle{
  animation: back1 0.6s forwards;
}
@keyframes back1 {
  0%{
    left: 42px;
    top: 7px;
  }
  50%{
    left: 17px;
    top: 1px;
  }
  100%{
    left: 7px;
    top: -28px;
  }
}

/* Letra Multicolor */

#shadowBox {
    background-color: rgba(0, 0, 0, 0.1);
    /* Black w/opacity/see-through */
}

.rainbow {
    text-align: center;
    text-decoration: underline;
    font-size: 16px;
    
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}
.rainbow:hover {
    text-decoration: underline !important;
}
.rainbow_text_animated {
    /* Fondo Multicolor
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); */
    background: -webkit-linear-gradient(transparent, transparent),
    url(../images/gold-metal-texture.jpg) repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 3s ease-in-out infinite;
    background-size: 400% 200%;
    font-weight: 900;
}

.rainbow_text_platinum {
    /* Fondo Multicolor
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); */
    background: -webkit-linear-gradient(transparent, transparent),
    url(../images/platinio.jpg) repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size:18px !important;
    animation: rainbow_animation 2s ease-in-out infinite;
    background-size: 400% 100%;
    font-weight: 900;
}

.rainbow_text_black {
    -webkit-text-fill-color: azure;
    -webkit-text-stroke: 0.5px black;
    font-size:18px !important;
    font-weight: 900;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 80% 0;
    }
}


/* Loader Lion Stock */

#myOverlay{
    position:fixed;
    height:100vh;
    width:100vw;
    background:black;
    opacity:.7;
    z-index:1200;
/*  transition: 0.5s ease;  */
    display:none;
}

#myOverlay img{
    top: 40vh;
    left: 50vw;
    z-index:3;
    position: fixed;
}

.cargando{
    top: 70vh !important;
    width: 250px;
}


/* Chechbox */

.switchBtn {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 34px;
}
.switchBtn input {display:none;}
.slide {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 5px;
    color: #fff;
}
.slide:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 78px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slide {
    background-color: LimeGreen;
    padding-left: 40px;
}
input:focus + .slide {
    box-shadow: 0 0 1px #01aeed;
}
input:checked + .slide:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    left: -20px;
}
.slide.round {
    border-radius: 34px;
}
.slide.round:before {
    border-radius: 50%;
}


/* The switch - the box around the slider */
.switchON {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 5em;
  height: 2.5em;
  user-select: none;
}

/* Hide default HTML checkbox */
.switchON .cb {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.toggle {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #373737;
  border-radius: 0.1em;
  transition: 0.4s;
  text-transform: uppercase;
  font-weight: 700;
  overflow: hidden;
  box-shadow: -0.3em 0 0 0 #373737, -0.3em 0.3em 0 0 #373737,
    0.3em 0 0 0 #373737, 0.3em 0.3em 0 0 #373737, 0 0.3em 0 0 #373737;
}

.toggle > .left {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #f3f3f3;
  color: #373737;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: right;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(206, 206, 206);
  transform-origin: center left;
  transform: rotateY(90deg);
}

.left::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.toggle > .right {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #f3f3f3;
  color: rgb(206, 206, 206);
  right: 1px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: left;
  transform: rotateX(10deg) rotateY(-45deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.right::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(206, 206, 206);
  transform-origin: center right;
  transform: rotateY(-90deg);
}

.right::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.switchON input:checked + .toggle > .left {
  transform: rotateX(10deg) rotateY(45deg);
  color: rgb(206, 206, 206);
}

.switchON input:checked + .toggle > .right {
  transform: rotateX(10deg) rotateY(0deg);
  color: #487bdb;
}


/* Switch AFIP */

.switch-holder {
  display: flex;
  padding: 10px 20px;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
}

.switch-label {
  padding: 0 0px 0 0px
}

.switch-label i {
  margin-right: 5px;
}

.switch-toggle {
  height: 40px;
}

.switch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -2;
}

.switch-toggle input[type="checkbox"]+label {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  margin: 0;
  cursor: pointer;
  box-shadow: inset -8px -8px 15px rgba(255, 255, 255, .6),
        inset 10px 10px 10px rgba(0, 0, 0, .25);
}

.switch-toggle input[type="checkbox"]+label::before {
  position: absolute;
  content: 'OFFLINE';
  font-size: 13px;
  text-align: center;
  line-height: 25px;
  top: 8px;
  left: 8px;
  width: 55px;
  height: 25px;
  border-radius: 20px;
  background-color: #eeeeee;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
        3px 3px 5px rgba(0, 0, 0, .25);
  transition: .3s ease-in-out;
}

.switch-toggle input[type="checkbox"]:checked+label::before {
  left: 50%;
  content: 'ONLINE';
  color: #fff;
  background-color: #00b33c;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
        3px 3px 5px #00b33c;
}

/* DataList */

input[name="productName[]"] {
  font-size: 18px;
  padding: 5px;
  height: 35px;
  width: 380px;
  max-width: 100%;
}

input[name="cliente"] {
  font-size: 18px;
  padding: 5px;
  height: 35px;
  width: 300px;
}

/* Imagen Lista de Productos */

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}


/* Modal Content (image) */
.modal-content-foto {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content-foto, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close-foto {
  position: absolute;
  top: 55px;
  right: 55px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-foto:hover,
.close-foto:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Ranking Ventas */

.anychart-credits-text{display:none;}.anychart-credits-logo{display:none;}


/* Valores Tablero */

.valores{
    font-size:2em;
}

/* Alerta Toast */

.ocultartoast{
    margin-right: -350px
}

#linkRMA {
  visibility: hidden;
  position: fixed;
  z-index: 2000;
  right: 2.5%;
  bottom: 5%;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
  max-width: 310px;
  width: 310px;
  background-color: #ffffff;
  opacity: 1;
}

#linkRMA.mostrar {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 4.6s;
  animation: fadein 0.5s, fadeout 0.5s 4.6s;
}
 
@-webkit-keyframes fadein {
  from {right: 0; opacity: 0;} 
  to {right: 2.5%; opacity: 1;}
}
 
@keyframes fadein {
  from {right: 0; opacity: 0;}
  to {right: 2.5%; opacity: 1;}
}
 
@-webkit-keyframes fadeout {
  from {right: 2.5%; opacity: 1;} 
  to {right: 0; opacity: 0;}
}
 
@keyframes fadeout {
  from {right: 2.5%; opacity: 1;}
  to {right: 0; opacity: 0;}
}

#linkRMA.cerrar {
  /* visibility: visible; */
  -webkit-animation: fadeout 0.5s 4.8s;
  animation: fadeout 0.5s 4.8s;
}
 
@-webkit-keyframes fadeout {
  from {right: 2.5%; opacity: 1;} 
  to {right: 0; opacity: 0;}
}
 
@keyframes fadeout {
  from {right: 2.5%; opacity: 1;}
  to {right: 0; opacity: 0;}
}

@media only screen and (max-width : 900px) {
    #myOverlay img{
        left: 25vw;
    }
    
    .fixedHeader-floating{
        top:50px !important;
    }
  
  	.dataTables_info{
  		float: none;
	}
    
    #left-sidebar-nav{
        font-weight: bold;
    }
    
    .valores{
        font-size:1.4em;
    }
    
    .heart{
        left: 60%;
        top: 70px;
    }
  
  	.modal-content-foto {
        width: 100%;
    }
}
}