/*Archivo CSS para personalizar los botones creados*/

.dx { /*Se personalizan los divs que ayudan a mover los botones*/
	position: absolute; /*Para que el boton sea movible su posisción debe ser absoluta*/
	z-index: 1;         /*Los botones estan una capa arriba que el fondo*/
}

.dxheader { /*Se personaliza la pestaña mediante la cual se arrastran los botones ("CLick para mover") */
	padding: 4px;              /*Un margen de 4 pixeles para el texto*/
	cursor: move;              /*Para que cuando el mouse pase por encima de la pestaña se vuelva una cruz para mover al objeto*/
	z-index: 2;                /*La pestaña se encuentra 2 capas por encima del fondo*/
	background-color: #2196F3; /*Color de la pestaña en azul*/
	color: #fff;               /*Color del texto*/
	visibility: hidden;        /*Se inicializa oculta, cuando se presiona el boton "mover" se hace visible y cuando se presiona el boton "posicionar" se vuelve a ocultar*/
	text-align: center; 		 /*El contenido del div se centra*/
}

.dxfooter { /*Se personaliza la pestaña mediante la cual se borran los botones ("Borrar boton") */
	padding: 4px;                /*Un margen de 4 pixeles para el texto*/
	cursor: pointer;             /*Para que cuando el mouse pase por encima de la pestaña se vuelva como si se tratara de un boton*/
	z-index: 2;                  /*La pestaña se encuentra 2 capas por encima del fondo*/
	background-color: FireBrick; /*Color de la pestaña en rojo*/
	color: #fff;                 /*Color del texto*/
	visibility: hidden;          /*Se inicializa oculta, cuando se presiona el boton "mover" se hace visible y cuando se presiona el boton "posicionar" se vuelve a ocultar*/
	text-align: center; 		 /*El contenido del div se centra*/
}

/* Los siguientes estilos fueron tomados de los disenadores en su plataforma de Zeplin */

.botonCreado { /* Incluye a todo el boton (semaforo, cuadro de texto, menu, etc) */
	width: 220px;
	height: 46px;
	cursor: default;
    position: relative;
}

.buttonBar { /* Barra que incluye al semaforo y al cuadro de texto */
	width: 220px;
	height: 36px;
}

.buttonTemplate { /* Es el div donde va colocado el semaforo */
	width: 36px;
	height: 46px;
	padding: 0 0 3px;
	position: relative;
	display: inline-block;
	z-index: 1;
}

.buttonBg { /* Parte rectangular del semaforo */
	width: 36px;
	height: 36px;
	padding: 3px;
	border-radius: 2px;
	background-color: #9a9ba6;
}

.buttonTriangle { /* Parte triangular del semaforo  */
	width: 16px;
	height: 10px;
}
        
.ic_status_graph { /* Imagen del semaforo */
	width: 30px;
	height: 30px;
	padding: 4px;
	object-fit: contain;
}
        
.im_bubbletip { /* Imagen del triangulo del semaforo */
	width: 11px;
	height: 6px;
	object-fit: contain;
}
        
.buttonShadow { /* Sombras en el semaforo */
	width: 16px;
	height: 34px;
	border-radius: 2px;
	-webkit-filter: blur(3px);
	filter: blur(3px);
	background-color: rgba(45, 66, 188, 0.31);
	position: absolute;
	top: 12;
	left: 15;
	z-index: -1;
}
        
.buttonText { /* Cuadro de texto del boton */
	width: 180px;
	height: 36px;
	border-radius: 2px;
	padding: 0 0 3px;
	background-color: #f3f3f5;
	position: relative;
	display: none;
	top: -9px;
}
        
.buttonName { /* Estilo del texto */
	width: 75.2px;
	height: 18px;
	font-family: NimbusSansDOT-Regu;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.13;
	letter-spacing: normal;
	color: #181f62;
 	position: absolute;
 	top: 10;
	left: 10;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
        
.buttonPlus { /* Boton con el + para expandir el menu */
	width: 19.5px;
	height: 20px;
	font-family: NimbusSansDOT;
	font-size: 24px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #181f62;
	position: absolute;
 	top: 6;
	right: 10;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	cursor: pointer;
}
        
.buttonPlus:hover { /* Cambia el color del + cuando se pasa el mouse sobre el */
	color: #fa6100;
}
        
.buttonBar:hover .buttonText { /* Para que el cuadro de texto solo se muestre cuando se pase el mouse por encima del semaforo */
	display: inline-block !important;
}

.buttonBar:hover .botonCreado { /* Cambia el tamaño del boton para que se pueda expandir el menu */
	height: 311px !important;
}

.sidenav { /*Personaliza la barra de menu*/
    width: 180px;
    height: 190px;
    border-radius: 2px;
    padding: 0;
    border: solid 1px #e4e4e7;
    background-color: #ffffff;
}

.sidenav button { /*Personaliza los botones de la barra de navegación*/
	background-color: #ffffff;
	color: #181f62;
	padding: 13px 0px 0px 15px;
	cursor: pointer;          /*El cursor se pone como si fuera a dar click a un link*/
	width: 180px;
	display: block;           /*Hace que sea visible*/  
	height: 35px;
	text-decoration: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    border: none;
    text-align: left;
}

.sidenav button:hover { /*Personaliza al boton cuando se pasa el mouse sobre el*/
	color: #fa6100;               /*Color del texto blanco*/
	text-decoration: underline;
}

.fa-caret-down { /*Personaliza el caracter especial de triangulo invertido*/
	float: right;       /*Lo coloca a la derecha*/
	padding-right: 8px; /*Lo separa 8 pixeles de la derecha*/
}

.dropdown-container { /*Personaliza el contenedor de las opciones de la tendencia*/
	display: none;             /*Las oculta hasta que se presione el boton para abrir las opciones*/
	background-color: #f3f3f5; /*Color gris claro*/
}

.dropdown-container button { /*Personaliza los botones de la seleccion de la tendencia*/
	background-color: #f3f3f5; /*Color gris oscuro*/
}

.problemLabel { /*Personaliza los botones de la seleccion de la tendencia*/
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #8c8fb1;
    background-color: #ffffff;
    cursor: default;
    width: 165px;
    height: 20px;
    -webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
    padding: 13px 0px 0px 15px;
    border-top: solid 1px #e4e4e7;
    margin-top: 13px;
}

.buttonMenu { /* Div donde se coloca el menu */
	position: absolute;
    right: 0;
}