*{
	color:black;
	padding: 0;
	letter-spacing: 1px;
	font-family: 'Roboto', sans-serif;
	margin:0;
	-webkit-tap-highlight-color: transparent;
	
}
p, div, span, th, td{
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
th, td{
	border: 1px solid black;
    padding: 5px;
    margin: 2px;
	width:20%;
    font-size: 12px;
    color: black;
    font-weight: bold;
}
.td-title{
	width:30%;
}
body{
	width: calc(100vw-10px);
	height: calc(100vh-10px);
}
p{
	font-size: 14px;
}

a{
	cursor: pointer;
	color: black;
	text-decoration: none;
}
a:link, a:visited {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

a:link:active, a:visited:active {
  color: black;
}

header{
	height: 160px;
	width: 100%;
	align-items:  flex-start !important;	
	box-shadow: 7px 1px 13px 1px #e0e0e0;
	border-right: none;
	border-left: none;
}
h2{
	margin:30px;
	letter-spacing: 5px;
}
.minimal-header{
	display:none;
    height: 30px;
    width: 100%;
	justify-content: center;
	align-items: center;
    background: #2a2c33;
	border-bottom:2px solid black;
}
#machine-group-wrap{
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	height: 100%;
	flex-shrink: 0;
	position:relative;
}
#machine-group{
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: row;
	height: 100%;
	flex-shrink: 0;
	position: relative;
}
#calendar-units-wrap{
	background: white;
	margin-top: -13px;
	display: flex;
	flex-direction: column;
	width: 75px;
	height: calc(100vh);
	flex-shrink:0;
}
.calendar-circle-button{
	font-size: 12px;
    color: #000;
	padding-left: 1px;
    width: 22px;
    height: 22px;
    background: #fff;
    display: flex;
    justify-content: center;
    border-radius: 30px;
    align-items: center;
    justify-self: flex-start;
	cursor:pointer
}
.calendar-circle-clear{
	background:rgb(224, 224, 224);
}
.calendar-circle-button:hover{
	background:lightgrey;
	color:white;
}
#calendar-info-wrap{
	overflow: auto;
	height: calc(100vh - 100px);
}


.calendar-machine{
	background: blue;
	display:flex;
	height: 100%;
	position:relative;
	flex-direction: column;
	flex-shrink: 0;
}



.calendar-units-popup{
	position: relative;
    display: none;
    width: 75px;
    background: #2a2c33;
    height: 33px;
    overflow-x: hidden;
    left: 80px;
    border: 1px solid white;
    margin-top: -35px;
    top: 13px;
    font-size: 10px;
    color: white;
    justify-content: center;
    align-items: center;
}
#calendar-wrap{
	display: flex;
	margin-bottom:30px;
	flex-direction: column;
	justify-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	align-items: flex-start;
	width: 97%;
	/* box-shadow: 1px 1px black; */
	border-radius: 10px;
	background: #abb5ca;
	border:1px solid lightgrey;
	height: calc(100vh - 35px);
}
#calendar-line{
	border-bottom: 1px solid red;
    width: 100vw;
    height: 0px;
    position: relative;
	z-index:5;
}
.calendar-title{
	height: 50px;
}
.calendar-order{
    width: 100%;
    position: absolute;
    border-radius: 10px;
    top: 0px;
    cursor: grab;
    opacity: .5;
    /* border-bottom: 1px solid #0000; */
    /* border: 1px solid #808080; */
    box-shadow: -2px 4px 6px -2px #0000006b;
	/* border-bottom:1px solid transparent; */
}
.calendar-order:hover{
	opacity: .8;
}
.calendar-units{
	background: white;
	width: 100%;
	overflow-x: hidden;
	border-bottom:1px solid white;
	border-right:1px solid #2a2c33;
	flex-direction: column;
	flex-shrink: 0;
	overflow-x: hidden;
	z-index:5;
}
.calendar-units p:hover{
	color:#2a2c33 !important;
	font-weight: bold;
}
.calendar-bar, .calendar-units, .calendar-order{
	height:25px;
}
.calendar-departments{
	margin: 5px;
    color: #fff;
    border-radius: 50px;
    border: 2px solid #fff;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    font-size: 12px;
	cursor:pointer;
	background: #41494c;
    align-items: center;
}
.calendar-tools{
	margin-right: 9px;
    width: 25px;
    height: 25px;
    border: 1px solid #41494c;
    padding-left: 1px;
}
.calendar-departments:hover{
	background:black;
}
.calendar-bar:hover{
	background: #94c6ff;
}
.calendar-bar, .calendar-title{
	width: 200px;
    border-right: 1px solid #80808029;
    border-bottom: 1px solid #80808029;
    flex-direction: row;
    flex-shrink: 0;
	background: #7b8898;
    display: flex;
    padding-left: 5px;
    align-items: center;
}
#calendar-actual{
	display:flex;
	justify-content: center;
	align-items: center;
	width:75px;
	background: #465975;
	border:1px solid #465975;
	color:white;
	height: 100%;
	cursor:pointer;
}
.calendar-text-info{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin:3px 10px;
}
#calendar-tools{
	padding: 3px 5px;
	width:100%;
	height:30px;
	display: flex;
	background:#465975;
	justify-content: flex-end;
	align-items: center;
}
#calendar-title-wrap{
	display: flex;
	justify-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	align-items: center;
	position:relative;
	width: auto;
	flex-shrink: 0;
	color:white;
	background: white;
	height: 50px;
}
.header-popup-up{
	color:black;
	font-size: 18px;
	font-weight: bold;
	margin:30px 0px 10px 0px;
	letter-spacing: 5px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-popup-down{
	color:black;
	font-size: 15px;
	font-weight: bold;
	margin:5px 0px 30px 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-popup-link{
	color:black;
	font-size: 12px;
	font-weight: bold;
	margin:40px 0px 30px 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
h3{
	color:grey;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 15px;
}

label{
	background: #eef4fb;
	font-size: 14px;
	width: 100%;
	display: flex;
	color:grey;
	justify-content: flex-start;
	align-items: center;
	padding-top: 7px;
	padding-left: 15px;
	height: 100%;
	cursor: text;
	transition: background 0s, color .3s, height .3s, font-size .3s;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

input{
	background: #eef4fb;
	border: none;
	width: 100%;
	height: 0px;
	font-size: 18px;
	padding-left: 15px;
	border-bottom: 2px solid grey;
	transition: height .3s;
}

textarea:focus, input:focus, select:focus{
    outline: none;
    border-bottom: 2px solid rgba(29,131,253,1);
}

button:focus{
    outline: none;
}
button:hover{
	background: #4545ff;
}
button{
	cursor: pointer;
	background: rgba(29,131,253,1);
	border: none;
	border-radius:50px;
	height: 50px;
	font-size: 18px;
	width:220px;
	padding: 15px;
	color:white;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}
.camera-button{
	display: none !important;
}
.camera-button-layout{
	cursor: pointer;
	background: rgba(29,131,253,1);
	border: none;
	border-radius:50px;
	height: 50px;
	font-size: 18px;
	width:220px;
	color:white;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}
.camera-button-layout:hover{
	background: #4545ff;
}
select{
	background: #eef4fb;
	border: none;
	width: calc(100% + 15px);
	height: 45px;
	font-size: 18px;
	/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d)*/
	border-bottom: 2px solid grey;
	margin-bottom: 14px;
	padding: 5px;
}
.form-view-ref{
	margin: 5px;
	color:#6e81a4;
	cursor:pointer;
}
.form-view-ref:hover{
	color:black;
}
#code-wrap, #input-wrap, #camera-wrap, #form-wrap, #attach-wrap, #message-wrap, #items-wrap, #revision-wrap, #update-wrap, #pallet-wrap{
	display: none;
	justify-content: center;
	align-items: center;
	z-index:3;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:#07052f61;
}
.order-wrap, .calendar-wrap{
	display: none;
	justify-content: center;
	align-items: center;
	z-index:5;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:#07052f61;
}
#camera-display{
	display:none;
	cursor:pointer;
}
#code-center, #input-center, #camera-center, #pallet-center, .calendar-center{
	width: 40vw;
	height: 40vw;
	opacity: 1;
	background:white;
	border-radius:20px;
	justify-content: center;
	align-items: center;
	flex-direction: column;    
	box-shadow: 1px 1px 10px 4px grey;
}
#order-table-grades{
	width:20%; 
	margin-left:auto; 
	margin-right:auto;
	
}
.order-table-grades tr td{
	font-size:15px;
	width:12%;
	height: 20px;
}
.order-table-grades tr th{
	font-size:15px;
	width:12%;
	height: 20px;
}
#order-center{
	width: 80vw;
	height: 90vh;
	opacity: 1;
	background:white;
	border-radius:20px;
	overflow: auto;
	justify-content: center;
	align-items: center;
	flex-direction: column;    
	box-shadow: 1px 1px 10px 4px grey;
}
#render-center{
	width: 40vw;
    height: 40vw;
    opacity: 1;
    background: white;
    border-radius: 20px;
    /* display: flex; */
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    box-shadow: 1px 1px 10px 4px grey;
    overflow-y: auto;
}
#camera{ 
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius:20px;
}

/* PLACEHOLDER */
::-webkit-input-placeholder {
	font-size: 10px;
	font-color:black;
	letter-spacing: 1.5px;
}

:-moz-placeholder {
	font-size: 10px;
	font-color:black;
	letter-spacing: 1.5px;
}

::-moz-placeholder {
	font-size: 10px;
	font-color:black;
	letter-spacing: 1.5px;
}

:-ms-input-placeholder {
	font-size: 10px;
	font-color:black;
	letter-spacing: 1.5px;
}

/* SCROLL BAR */

::-webkit-scrollbar {
  height:  0px;
  width:  0px;
  border-radius: 10px;
  background: transparent;
  transition: 1s;

}
 
::-webkit-scrollbar-track {
	background: transparent;
}
 

/* ELEMENTOS BASICOS PARA FLEX */

/* Centra los elementos interno de los display flex */
.sign-content{
	display: flex;
	width: 100%;
	position:sticky;
	bottom: 0;
	z-index:5;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(29,131,253,1);
    padding-top: 20px;
    padding-bottom: 10px;
	color:white;
}
.sign-development{
	font-size: 10px;
	letter-spacing: 2px;
	margin-bottom: 5px;
	color:white !important;
}
.sign-development:active,.sign-development:visited{
	color:white;
} 

.sign-development:hover{
	color:blue;
}
.login-form{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
}
.login-input{
	height: 50px;
	font-size:15p !important;
}
.fl-center{
	display: flex;
	justify-content: center;
	align-items: center;
}
.fl-center-btn{
	margin-left: -30px;
}
.fl-center-top{
	display: flex;
	justify-content: center;
	align-items: flex-start;

}

/* Flex grow central cuando se necesite */
.fl-space{
	flex-grow: 2;
}

/* Organiza en forma de fila los elementos internos */
.fl-r{
	display: flex;
	flex-direction: row;
}

/* Organiza en forma de columnas los elementos internos */
.fl-c{
	display: flex;
	flex-direction: column;	
}

/* Extiende al maximo de ancho y largo al elemento segun su padre */
.fl-p-full{
	width:100%;
	height:100%;
}
.fl-p-stretch{
	width:100%;
	height:100%;
	align-items: stretch !important;
}
.fl-p-stretch-t{
	width:100%;
	height:100%;
	justify-content: stretch !important;
}
#message-input{
	height: 50px;width:100%;
}
.message-render-wrap{
	display: flex; overflow:hidden;
}

.messages-render, .items-render{
	flex-grow:2; width:90%; overflow:auto; z-index:2;
}
.message-info{
	width:100%;padding:15px 0; 
}
.message-autor{width:100%; height:30px;}
.message-text{width:100%; height:auto;}

/* ELEMENTO DE BOTON AUXILIAR */
.aux-button-wrap-container{
	position: fixed;
	bottom: 30px;
	right: 15px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	width: 30px;
	flex-direction: column;
	height: 100%;
	z-index: 5;
}
.aux-button-wrap-container-left{
	position: fixed;
	bottom: 30px;
	left: 30px;
	align-items: flex-start;
	display: flex;
	justify-content: flex-end;
	width: 30px;
	flex-direction: column;
	height: 100%;
	z-index: 5;
}
.check-comments{
	width: 20px;
    height: 20px;
    border-radius: 30px;
    background: #f00;
    position: absolute;
    top: -5px;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    left: 34px;
    font-weight: bold;
}
.aux-button-wrap{
	right: 31px;
	bottom: 30px;
	background: #00008d;
	width: 200px;
	height: 40px;
	border-radius: 30px;
	margin-top: 10px;
	z-index: 5;
	color:white;
	cursor: pointer;
	transition: .5s;
	box-shadow:  -1px 1px 4px 1px #949494;
}
.aux-button-wrap-pallet-number{
	width: 30px; height:30px; margin-left:30px;  cursor:pointer; border-radius:30px; border:2px solid white; background: #000048;
}
.aux-button-wrap-pallet{
	width: 200px;
    height: 60px;
    border-radius: 100px;
	right: 31px;
	bottom: 30px;
	background: #00008d;
	z-index: 5;
	color:white;
	transition: .5s;
	box-shadow:  -1px 1px 4px 1px #949494;
}
.aux-button-wrap-pallet p{
	font-size:20px;
}
.aux-notification-info{
	position: absolute;
    top: -5px;
    right: -8px;
    padding: 5px 8px;
    background: #f9f9f9;
    border: 2px solid #00008d;
    font-size: 10px;
    font-weight: bold;
    border-radius: 30px;
}

.aux-button-wrap-circle{
	position:relative;
	/* right: 30px;
	bottom: 30px; */
	background: #00008d;
	width: 50px;
    height: 50px;
	border-radius: 30px;
	margin-top: 10px;
	z-index: 5;
	color:white;
	cursor: pointer;
	transition: .5s;
	box-shadow:  -1px 1px 4px 1px #949494;
}
.aux-button-wrap-circle .aux-inside{
	font-size: 25px;
}
#aux-info-button-toggle{
	color:grey;
	width: 200px;
	cursor:pointer;
}
.aux-info-wrap{
	right: 31px;
	bottom: 30px;
	background: #d4d4d4;
	width: 200px;
	height: 25px;
	border-radius: 30px;
	margin-top: 10px;
	z-index: 5;
	color:white;
	transition: .5s;
	box-shadow:  -1px 1px 4px 1px #949494;
}
.aux-inside{
	color:white;
	letter-spacing: 2px;
	font-weight: bold;
	transition: .5s;
}
.aux-inside i{
	color:white;
}
.aux-button-wrap input{
	height: 100%;
    background: transparent;
	font-weight: bold;
    border: none;
	cursor:pointer;
	padding: 0;
	letter-spacing: 2px;
	font-size: 14px;
}
.aux-button-wrap:hover{
	width: 200px;
	background: #4444ff;
}
/* Clase para los autoinputs */
.autoinput, .autohardinput, button{
	margin:15px;
}
.autohardinput{
	width:80%;
	margin-bottom: 10px;
}
.autoinput{
	justify-content: flex-start !important;
	width:80%;
	height: 60px;
}
.autoselect{
	margin-top: 12px;
	width:80%;
}

/* Clase que esconde los elementos dejando un espacio para el frontend sirve para arreglar la organizacion de inputs*/
.hidden{
	visibility: hidden;
}
/* Clase de elemento principal luego de body */
.app{
}

/* POPUP */
.popup-general{
    top: 0;
	left:0;
	display: none;
	position: absolute;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #00000045;
	z-index:10;
}
.popup-general-cnt{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 70%;
	height: 90%;
	background: white;
	box-shadow: 1px 1px 80px 0px #0000002e;
}
.popup-exit, .attach-exit{
	background: #464646;
	width: 30px;
	border-radius: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin:3px;
	box-shadow: 0px 0px 7px 2px #52525282;
	position: absolute;
	bottom: calc((50vh + 45%) - 35px);
	left: calc((50vw + 35%) + 10px);
	z-index:11;
	padding-left: 1px;
	cursor:pointer;
}
.popup-exit i, .attach-exit i{
	color: white;
	font-size: 20px
}
.popup-exit:hover{
	background: #a1a1a1;
}
.order-exit i{
	color: white;
	font-size: 20px
}
.order-exit:hover{
	background: #a1a1a1;
}
.order-table{
	margin-left:auto; 
	margin-right:auto;
}
.order-table tr td{
	font-size:15px;
	width: 12% !important;
	font-weight: 300;
}
.order-table tr th{
	font-size:15px;
	width: 12% !important;
}
.order-table-8 tr td{
	font-size:15px;
	width: 12% !important;
	font-weight: 300;
}
.order-table-8 tr th{
	font-size:15px;
	width: 12% !important;
}
.table-order-header{
	text-align: start;
	font-size: 16px !important;
	width: 17% !important;
}
.table-order-title{
	background: rgba(29,131,253,1);
    font-weight: 500;
    color: white !important;
}
.table-order-d{
	height:20px;
	font-weight: 300;
}
.table-order-header-8{
	text-align: start;
	font-size: 16px !important;
}
.table-order-d-8{
	height:20px;
}
.order-exit{
	background: #464646;
	width: 30px;
	border-radius: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin:3px;
	box-shadow: 0px 0px 7px 2px #52525282;
	position: absolute;
	bottom: calc((50vh + 45%) - 35px);
	left: calc((50vw + 40%) + 10px);
	z-index:11;
	padding-left: 1px;
	cursor:pointer;
}
/* ELEMENTOS DE LOS MENUS */


/* MENU DE LA IZQUIERDA */
.left-menu{
	/*display: flex;*/
	display: none;
	justify-content: flex-start;
	position: fixed;
	top:0;
	left:0;
	width: 0%;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
	background: rgb(213 232 255);
	transition:.5s;

	z-index: 10;
}

.link-left-content{
	font-size: 15px;
	width: 100%;
	margin: 5px;
	margin-top:0px !important;
	z-index: 4;
}
.link-space{
	height: 3px;
	width: 100%;
}
.link-left:visited, .link-left:active{
	color:black;
}
.link-left{
	background: rgb(213 232 255);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 50px;
	padding-left: 15px;
	color:rgba(29,131,253,1);
	/*border-bottom: 3px solid white;*/
}
.link-left:hover{
	font-weight: bold;
	background-color: rgb(188, 218, 255);
}
.link-left.active{
	font-weight: bold;
	color:rgba(29,131,253,1);
	border-left: 5px solid rgba(29,131,253,1);
	background: rgb(186 217 255);
	padding-left: 10px;
}
.active:visited, .active:active{
	color:rgba(29,131,253,1);
}

/* ELEMENTOS QUE SE ESCONDEN DEL MENU DE LA IZQUIERDA*/

/* wrap de iconos y logo de la empresa */
.toggle-top{
	width: 100%;
    position: sticky;
	padding: 20px;
    top: 0px;
	z-index:5;
	background:rgba(29,131,253,1);
}
.logo-picture{
	width: 187px;
    margin-left: 191px;
    margin-top: -42px;
    /* filter: drop-shadow(-11px -20px 44px #00009B); */
    position: relative;
    z-index: 0;
}
/* logo de la empresa */
.toggle-logo{
	height:60px;
	width:140px;
	margin-right: 25px;
	/*background: rgba(29,131,253,1);*/
	border: 1px solid rgba(29,131,253,1);
}
/* iconos */
.toggle-icon{
	width:60px;
	justify-content: flex-start;
	height:100%;
}
/* icono*/
.toggle-icon-button{
	display: flex;
  	justify-content: center;
  	align-items: center;
	cursor:pointer;
	margin-left:20px;
	width:40px; 
	height: 40px;
	z-index:6;
	/*background: rgba(29,131,253,1);*/
}
.toggle-icon-button i{
	font-size: 25px;
	color:rgba(29,131,253,1);
	z-index:6;
}
.toggle-icon-button i:hover{
	color:blue;
}
.toggle-icon i{
	font-size: 25px;
	color:rgb(255, 255, 255);
}
.toggle-icon i:hover{
	color:rgb(138, 191, 255)
}
/* ELEMENTOS PARA DESVANECIMIENTO ANIMADO */
.m-a-1, .m-a-2{
	transition: .5s;
}
.m-a-1{
	opacity: 0.0;
}

/* MENU DE LA DERECHA */
/* ESTE MENU ESTA DETERMINADO POR EL ANCHO DEL MENU DE LA IZQUIERDA (250px) */

/* elemento principal de menu de la derecha */
.right-menu{
	position: absolute;
	justify-content: flex-start;
	align-items: flex-start;
	width:100%;	
	height: auto !important; 
	top:0;
	left:0;
	transition:.5s;
}

.top-header{
	height: 65%;
	width: calc(100% - 30px);
	margin-left: 15px;
	border-bottom:2px solid #d3e1e48f;
}
.toggle-wrap-button{
	justify-content: flex-start;
	width: 90px;
	transition: .5s;
}
.bottom-header{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - 30px);
	height: 35%;
	overflow-x: overlay;
	margin-left: 10px;
	padding-right: 10px;
	flex-shrink: 0;
}

.link-header{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	cursor:pointer;
	height: calc(100% - 10px);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 5px;
	border-bottom: 5px solid transparent;
	color:rgb(75, 75, 75) !important;
}
.profile-img{
	width: 60px;
	height: 60px;
	margin-left: 10px;
	border-radius: 100px;
	background: #eef4fb;
}
.profile-name{
	margin-left: 20px;
}
.profile-info{
	display:flex;
	width:100%;
	font-size: 10px;
	letter-spacing: 3px;
}
.profile-info-p{
	letter-spacing: 3px;
	margin-right: 5px;
}
.profile-icon{
	border-radius: 100px;
	background:#94c6ff;
	width: 40px;
	height: 40px;
	display: flex;
	cursor:pointer;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
}
.profile-icon-accent{
	background: #ff9292 !important;
}
.profile-icon-accent:hover{
	background: #fd6b6b !important;
	transition: .5s;
}
.profile-icon:hover{
	background: #4545ff;
}
.profile-icon i{
	font-size:18px;
	color:white;
}
.profile-image:hover{

	z-index:5;
}
.link-header:hover{
	color:black !important;
	font-size:17px;
}
.link-header.active{
	color:black !important;
	border-bottom: 3px solid rgba(29,131,253,1);
	font-weight: bold;
}

.right-menu:hover::-webkit-scrollbar-thumb {
  transition:1s;
  background-color: #a9a9a95c;
  border-radius: 60px;
}


/* ELEMENTO DE FORMA Y A DE AUTOTOGGLE */

/* Titulo de forma autowrap*/
.single-dispatch-items{
	margin-left:10px;
	align-items: flex-start;
}
.form-name{
	font-size:16px;
	cursor: pointer;
	margin-bottom: 10px;
}
.form-icon-wrap{
	margin-right: 15px;
	height:100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.form-icon{
	cursor:pointer;
	width: 40px;
	height: 40px;
	border-radius: 30px;
	background: rgba(29,131,253,1);
}
.form-icon:hover{
	background: blue;
}
.form-icon.active{
	background: lightgreen;
}
.form-button{
	background: rgb(160 204 255);
	height: 60px;
	border-radius: 10px;
	width: 82%;
	margin-top: 20px;
	padding-top:0;
	cursor:pointer;
}
.form-button:hover{
	background: blue;
}
.form-button span i{
	color:white;
}
.form-button span{
	color:white;
	font-weight: normal;
	font-size: 20px; 
}
.form-icon i{
	width:100%;
	font-size: 16px;
	color: white;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Elemento que sostiene el titulo y el arrow de las formas autotoggle */
.form-wrap{
	margin-top: 30px;
	cursor: pointer;
}
.form-h-input{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: none;
	width: 100%;
	height: 40px;
	padding-left: 15px;

	border-bottom: 2px solid grey;
	font-size: 18px;
	margin:5px;
	margin-top:0px;
	font-size: 16px;
	background: #f2f6ff;

}

.form-color-picker{
	width:100%;
	height:30px;
	border-radius:30px;
	cursor:pointer;
	background:#f77474
}
.form-color-picker-text{
	margin-bottom: 5px;
	color: grey;
}

/* ELEMENTO DE BARRA DE CORREO */

.info-wrap{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow: overlay;
	white-space:  nowrap;
}
.info-wrap-top{
	width:220px;
	display: flex;
	font-weight: row;
	margin-right: 15px;
}
.info-sep{
	margin-right: 10px;
	margin-left: 5px;

}
.info-bar-search{
	width: 97%;
    height: 60%;
    border: none;
    background: white;
    /* margin: 30px; */
    border-radius: 10px;
    border: 1px solid lightblue;
    font-size: 15px;
}
.info-bar-search:focus{
	border:1px solid blue;
}
.info-wrap-bottom{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow: overlay;
	white-space:  nowrap;
}
.info-bar-idle{
	background: #dedede !important;
}
.info-bar-item{
	width: 200px !important; height:100px !important; background:#ececf3 !important; cursor:none;
}
.info-bar, .info-bar-item{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 50px;
	background: #eef4fb;
	cursor:pointer;
	margin-bottom: 4px;
	z-index:1;	
	font-size: 14px;
	transition: .1s;
	padding-left:10px;
	border: 1px solid #c2c2c2;
	border-radius: 10px;
}
.info-bar-popup{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 90%;
	margin-left:4%;
	height: 50px;
	background: #eef4fb;
	cursor:pointer;
	margin-bottom: 4px;
	z-index:1;	
	font-size: 14px;
	transition: .1s;
	padding-left:10px;
}
.info-bar:hover{
	box-shadow: 0 1px 17px 0px #41579638;
	/*background: #f1f2f4;*/
	z-index:3;
	font-size: 15px;
	transition: .1s;
}
.info-bar:hover.info-icon{
	width: 25px;
	height: 25px;
}
.pic-user{
	margin-left: 0px !important;

}
canvas{
	z-index:1px !important;
}
canvas:hover{
	z-index: 5px !important;
}
.info-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	font-size: 18px;
	margin-left: -7px;
	border-radius: 30px;
	border: 1px solid #c3c3c3;
	transition: .2s;
	background: #f6f8ff;
	z-index: 1;
}
.info-icon-item{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	font-size: 18px;
	margin: 3px;
	border-radius: 30px;
	border: 1px solid #c3c3c3;
	transition: .2s;
	background: #f6f8ff;
	z-index: 1;
}
.info-top{
	height: 50%;
}
.info-number{
	font-size: 15px;
    font-weight: bold;
}
.info-icon:hover{
	background: white;
	z-index: 6;
	transition: .2s;
	box-shadow: 0px 0px 20px 1px #8081a521;
}
.info-text{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
	margin-right: 5px;
	white-space: nowrap;
}
.info-text-long{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color:grey;
	overflow-x: overlay;
    white-space: nowrap;
	height: 40px;
	
}
.info-text-long p{
	color:grey;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;

}

.info-by{
	margin-right: 10px;
	margin-left: 20px;
	width: 150px;
}
.info-by-mini{
	margin-left: 20px;
	width: 58px;
}
.info-icons-left{
	padding-left: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* TABS ELEMENT (ELEMENTOS DE LA DERECHA -EL MENU DE NAVEGACION RAPIDO- */
.tabs-cnt{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column; 
	margin-bottom: 30px;
	margin-top: 15px;
	width: 60px;
	margin-right: 15px;
}
.tabs-bar{
	justify-content: flex-start;
	align-items: flex-start;

}
.tabs-icon{
	height: 70px;
	width: 50px;
	background: transparent;
}
.tabs-logic{
	width: 90%;
}
.tabs-info{
	display: flex;
	justify-content: flex-start;
	align-items: center; 
	width: 50px;
	height: 50px;
	margin-bottom: 5px;
	z-index: 3;
	white-space: nowrap;
	overflow: overlay;
	cursor: pointer;
	font-size: 10px;
	padding: 2px;
	margin-top: -12px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding-right: 10px;
	
	padding-left: 10px;
}
.tabs-hidden{
	display: none;
	overflow: overlay;
	white-space: nowrap;
	width: 100%;
}
.tabs-user{
	color:white;
	
	font-weight: bold;
}
.tabs-info{

}
.tabs-title{
	color:white;

}
.tabs-info-icon{
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:white !important;
	margin-right: 10px;
	border-radius: 30px;
	font-size: 14px;
    font-weight: bold;
	background:#6287f1;
	overflow: overlay;
	white-space: nowrap;
	/*box-shadow: 1px 1px 9px 1px #1e1d6f;*/
	box-shadow: 0px 0px 8px -12px #797979;
}
.tabs-info-icon-active{
	box-shadow: 0px 0px 12px -2px #05039a;
}
/* aplicado en js */
.tabs-info:hover{
/*	background: #eaf0f7;
	box-shadow: 0 1px 17px 0px #41579638;
	width: 300px;*/
}
.tabs-description{

	padding-right: 10px;
	color:white;
	width: 90%;
	white-space: nowrap;
	overflow: overlay;
	font-size: 10px;
}
/*USING info-bar too*/
.input-bar{
	width:100%; margin-top:10px; height: auto;
	flex-wrap: wrap;
	padding: 10px 0 10px 10px;
}
.input-bar-select{
	height: 37px !important;
}
#dev_validation, #est_validation{
	width:1px;
	padding:0;
}
.input-bar-select-big{
	height: 37px !important;
	font-size:12px; background: white; 
	padding: 4px !important; 
	border-radius: 5px; 
	/* box-shadow: 0px 2px 5px 0px #dbdbdb;  */
	margin: 3px; width:  100px;
	border: 1px solid lightgrey;
	width: 250px !important;
}
.input-bar-alert{
	border: 1px solid blue !important;
}
.input-bar-text{
	font-size:12px; background: white; 
	padding: 4px !important; 
	height: 30px;margin: 10px;
	width: 150px !important; 
	border-radius: 5px; 
	/* box-shadow: 0px 2px 5px 0px #dbdbdb;  */
	margin: 3px; width:  100px;
	border: 1px solid #bfddff;
}
.input-bar-text:hover{
	background: #f1f1f1;
}
.input-small{
	width: 60px !important;
}
.input-large{
	width: 150px !important;
	flex-direction: row;
}
/*MEDIA FOR 900PX FOR BARS*/
@media only screen and (max-width: 800px) {
.tabs-logic{
		width: 80%;
	}
.info-wrap{
	flex-direction: column;
	height: 100%;
	align-items:  flex-start;
	justify-content: center;
}
.info-sep{
	display: none;
}
.input-bar-text{
	width: 45%;
}

.info-text-long{
	display: none;
}
.info-wrap-bottom, .info-wrap-top{
	height: 40%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.info-text{
	margin-left: 20px;
	color:grey;
}
}
/*MEDIA FOR 700PX FOR INPUTS AND FORMS*/

@media only screen and (max-width: 700px) {
  .fl-wrap{
	flex-direction: column !important;	
  }
  .profile-info{
	flex-direction: column;
	font-size: 8px;
  }
  .profile-name{
	margin-left: -25px;
  }
  .profile-info-p{
  	letter-spacing: 1.5px;
  }
  .profile-img{
  	margin-left: -15px;
  }
  .profile-icon{
  	margin-right:  3px;
  }
  .profile-img{
  	display: none;
  }
  .toggle-icon-button{

  	margin-left: 7px;
  }

  .link-header{
  	font-size: 14px;
  }
  /* aplicado en js */
/*  .icon-wrap{
  	flex-direction: column;
  }
  .icon-row{
  	margin-top: 2px;
  	margin-bottom: 2px;

  }*/
  
}

@media only screen and (max-width: 500px) {
	.tabs-logic{
		width: 70%;
	}
	.info-icon{
		width: 25px;
		height: 25px;
	}
	.info-icon i{
		font-size: 14px;
	}
	.info-icons-left{
		padding-left: 5px;
	}
}