/* Estilos para motores Webkit y blink (Chrome, Safari, Opera... )*/

#menu::-webkit-scrollbar
{
	-webkit-appearance: none;
}

#menu::-webkit-scrollbar:vertical
{
	width: 10px;
}

#menu::-webkit-scrollbar-button:increment,#menu::-webkit-scrollbar-button
{
	display: none;
}

#menu::-webkit-scrollbar:horizontal
{
	height: 10px;
}

#menu::-webkit-scrollbar-thumb
{
	background-color: #797979;
	border-radius: 0px;
	border: 0px solid #f1f2f3;
}

#menu::-webkit-scrollbar-track
{
	border-radius: 10px;
}
/* Estilos para motores Webkit y blink (Chrome, Safari, Opera... )*/

.marco::-webkit-scrollbar
{
	-webkit-appearance: none;
}

.marco::-webkit-scrollbar:vertical
{
	width: 10px;
}

.marco::-webkit-scrollbar-button:increment,.marco::-webkit-scrollbar-button
{
	display: none;
}

.marco::-webkit-scrollbar:horizontal
{
	height: 10px;
}

.marco::-webkit-scrollbar-thumb
{
	background-color: #797979;
	border-radius: 0px;
	border: 0px solid #f1f2f3;
}

.marco::-webkit-scrollbar-track
{
	border-radius: 10px;
}
.menu0
{
	height: 25px;
	margin-bottom: 5px;
	background-color: rgba(255,255,255,0.1);
	display: flex;
	padding-left: 15px;
	padding-right: 15px;
	justify-content: space-between;
	font-weight: bold;
	cursor: pointer;
	color: #FFF;
	align-items: center;
}
.menu0:hover
{
	background-color: rgba(255,255,255,0.3);
}
.ssmenu
{
	height: 25px;
	margin-bottom: 5px;
	background-color: rgba(255,255,255,0);
	display: flex;
	padding-left: 15px;
	padding-right: 15px;
	justify-content: space-between;
	font-weight: bold;
	border-bottom: 0px solid grey;
	width: 100%;
	color: #FFF;
	align-items: center;
}
.ssmenu:hover
{
	background-color: rgba(255,255,255,0.3);
}
.submenu
{
	margin-bottom: 5px;
	background-color: rgba(255,255,255,0.1);
	display: flex;
	margin-left: 25px;
	padding-right: 0px;
	flex-direction: column;
	font-weight: bold;
	color: #FFF;
	align-items: center;
}
.pie_tabla
{
	height: 5vh;
	background-color: #2271b1;
	color: white;
	padding-right: 30px;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	text-align: right;
	justify-content: space-around;
}
td, th {
    vertical-align: middle !important;
    padding: 0.6rem 1rem !important;
    border-bottom: 1px solid !important;
    border-color: var(--color-content-border) !important;
    outline: none!important !important;
    text-align: center !important;
    font-weight: normal !important;
}
tr
{
	background-color: white !important;
	height: 35px !important !important;
}
.enlace_xx
{
width: 40px;
    height: 40px;
    border-radius: 0px 10px 10px 0px;
    z-index: 10000;
    margin-top: 0px;
    cursor: pointer;
    margin-left: 0px;
    position: relative;
    left: 0px;
    display: flex !important;
    background-color: orange;
    align-items: center;
    justify-content: center;
}
.enlace_xx:hover
{
width: 40px;
    height: 40px;
    border-radius: 0px 10px 10px 0px;
    z-index: 10000;
    margin-top: 0px;
    cursor: pointer;
    margin-left: 0px;
    position: relative;
    left: 0px;
    display: flex !important;
    background-color: darkorange;
    align-items: center;
    justify-content: center;
}
.fas:hover
{
	color: #ccc !important;
}
.aviso
{
	color: #2271b1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
}
#aviso_borrar
{
	width: 30vw;
	height: 17vh;
	transition: all 0.4s;
	position: fixed;
	right: 35vw;
	top: 35vh;
	z-index: 29000;
	display: flex;
	padding: 10px;
	background-color: #FFF;
	border: 2px solid #2271b1;
	color: #FFFFFF;
	flex-direction: column;
	justify-content: center;
}
#mascara_aviso_borrar
{
	width: 100vw;
	height: 100vh;
	transition: all 0.4s;
	position: fixed;
	right: 0vw;
	top: 0vh;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background-color: rgba(0,0,0,0.5);
}
.caja_imagen
{
	width: 20vh;
	height: 20vh;
	border: 1px solid white;
	margin: 1vh;
	background-size: 19vh;
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;
}
#contenedor_fotos
{
	display: flex;
	width: 84vw;
	overflow-y: auto;
	flex-direction: row;
	flex-wrap: wrap;
}

.boton_vr
{
	width: 20vh;
	height: 20vh;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.boton_vr:hover
{
	width: 20vh;
	height: 20vh;
	background-color: rgba(255,255,255,.5);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.cuerpo_etiquetas
{
	display: flex;
	flex-wrap: wrap;
}
.caja_notificacion
{
	z-index: 30000;
	position: absolute;
	bottom: -10px;
	display: flex;
	width: 25vw;
	height: 18vh;
	margin: 20px;
	padding: 20px;
	align-items: center;
	transition: all 1s;
	opacity: 0;
}
.caja_info
{
	cursor: pointer;
	display: flex;
	width: 18vw;
	height: 14vh;
	margin: 20px;
	padding: 20px;
	align-items: center;
}
.caja_info:hover
{
	filter: brightness(80%);
}
.icono_pago
{
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
}
.pago_ko
{
	background-color: red;
}
.pago_espera
{
	background-color: orange;
}
.pago_ok
{
	background-color: darkred;
}
.pago_procesando
{
	background-color: blue;
}
.pago_nuevo
{
	background-color: blue;
}
.pago_noexiste
{
	background-color: #ddd;
}
.boton_lista_pedidos
{
	width: 90px;
	height: 30px;
	display: flex;
	align-items: center;
	border-radius: 5px;
	color: white;
	/* text-align: center; */
	justify-content: center;
}
.caja_foto_upload
{
	width: 250px;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.caja_foto_upload:hover
{
	background-color: rgba(0,0,0,0.6);
}
.pantalla_contenedora
{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-size: cover;
	padding: 0px;
	display: flex;
	justify-content: space-between;
}
.pantalla_lateral
{
	height: 100vh;
	width: 16vw;
	background-color: rgba(0,0,0,0.7)
}
.pantalla_logo
{
	padding: 10px;
	width: 16vw;
	background-color: white;
	display: flex;
	align-items: center;
	height: 16.9vh;
}
.pantalla_menu
{
	margin-top: 10px;
	padding: 20px;
	height: 90vh;
	width: 16vw;
	overflow-y: auto;
}
.pantalla_cuerpo
{
	overflow: hidden;
	height: 100vh;
	width: 84vw;
	background-color: rgba(0,0,0,0.4);
}
/* modificar selector checkbox */
/* Formateamos el label que servirá de contenedor */
.switch
{
	position: relative;
	display: inline-block;
	width: 50px;
	height: 25px;
}

/* Ocultamos el checkbox html */
.switch input
{
	display: none;
}

/* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */
.slider
{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Pintamos la perilla de control o slider usando el selector before */
.slider:before
{
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Cambiamos el color de fondo cuando el checkbox esta activado */
input:checked + .slider
{
	background-color: #0799ef;
}

/* Deslizamos el slider a la derecha cuando el checkbox esta activado */
input:checked + .slider:before
{
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */
.slider.round
{
	border-radius: 34px;
}

.slider.round:before
{
	border-radius: 50%;
}
/* modificar selector checkbox */

.sys-nav-style_33 {
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    line-height: 0.9!important;
    font-weight: 300;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    border-radius: 0.3em;
    padding: 0.8em 1.1em;
    background: #f1f1f1;
    border-color: transparent;
    color: var(--color-content-text)!important;
    box-shadow: 0 0em 0em rgb(0 0 0 / 20%);
}
.sys-nav-style_33 :hover {
    background: #dddbdb;
}