/* Diferentes variables para el funcionamiento de la barra de accesilidad, en este lugar podras encontrar el color tanto de la fuente como de los iconos, el tamaño de la barra y sus diferentes colores, entre mas propiedades que podras editar a tu gusto */
:root {
	--color--btnAC: #001e58;
	--color-fontAC: #111010;
	--color-principalAC: #070b22;
	--color-secundarioAC: #004884;
	--color-fondoAC: #fff;
	--resalto-linksAC: #ffff00;
	--color-resaltoFondoAC: #000;
	--widthContenedorAC: 220px;
	--tamanoTituloAC: 18px;
	--tamanoTextoAC: 14px;
	--tamanoIconosAC: 13px;
	--LogoContenedorAC: 60px;
	--tamanoLogoAC: 30px;
	--colorGradient1: #003ab3;
	--colorGradient2: #003ab3;
}

/* Se importa tipo de fuente para textos, Worksans es la sugerencia realizada por Mintic para aplicarse en los portales web  */
@font-face {
	font-family: 'WorkSans';
	src: url('/Style Library/AccessibilityBar/Assets/fonts/WorkSans-Regular.ttf');
}
/* Se importa los iconos proporcionados por Mintic atravez de una fuente, para luego ser utilizado mediante clases */
@font-face {
	font-family: 'govco-font';
	src: url('/Style Library/AccessibilityBar/Assets/fonts/govco-font-icons.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Contenedor Principal, podras editar la posicion de la barra a tu gusto, por ejemplo
  si deseas cambiar la posicion de la barra al lado izquierdo, es necesario cambiar 
  el valor del flex-direction a row-reverse, ademas de su translateX*/
.accessibilityBar {
	display: flex;
	align-items: flex-start;
	position: fixed;
	right: 70px;
	bottom: calc(100vh - 30vh);
	flex-direction: row;
	z-index: 999;
	transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: translateX(290px);
	height: 20px;
}
@media (max-width: 768px) {
	.accessibilityBar {
		bottom: calc(100vh - 30vh);
	}
}

/* Le eliminamos el borde al momento de enfocar con tabulación la barra de accesibilidad en general */
.accessibilityBar:focus {
	border: none !important;
}

/* Contenedor de la imagen del logo */
/* Si es deseado añadir un gradient como fondo puedes ingresar a siguiente enlace https://uigradients.com/#CoolBlues,
  en el caso de que quieras continuar con el mismo gradient y solo cambiar los colores,  puedes conseguir nuevos colores ingresando al
  siguiente enlace https://colorhunt.co/ */
.accessibilityBar__figure {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--LogoContenedorAC);
	height: var(--LogoContenedorAC);
	cursor: pointer;
	background: var(--color--btnAC);
	transition: 0.3s;
	overflow: hidden;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	margin: 0 !important;
	backdrop-filter: blur(8px);
}

/* Efecto hover para el boton de la barra de accesibilidad */
.accessibilityBar__figure:hover {
	box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px var(--colorGradient2);
}

.accessibilityBar__figure:focus {
	border-radius: none !important;
}

/* Logo de Accesibilidad */
.accessibilityBar__logo {
	width: var(--tamanoLogoAC);
	transition: 1s;
	pointer-events: none;
}

/* Efecto de rotacion en el logo de la barra de accesibilidad en el momento de pasar el cursor */
.accessibilityBar__figure:hover > .accessibilityBar__logo {
	transform: rotate(360deg);
}

/* Contenedor de las diferentes opciones y titulo de la barra de accesibilidad */
.accessibilityBar__content {
	background: #f2f2f2;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	border-radius: 10px;
	color: var(--color-fontAC);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: start;
	width: var(--widthContenedorAC);
	height: max-content;
	padding: 5px 14px 8px 14px;
	border-radius: 0px 8px 8px 8px;
}

/* Titulo principal */
.accessibilityBar__title {
	font-size: var(--tamanoTituloAC) !important;
	letter-spacing: normal !important;
	margin-top: 10px;
	margin-bottom: 15px;
	font-weight: 700;
	color: var(--color-principalAC);
	font-family: 'WorkSans';
}

/* Opciones de la barra */
.accessibilityBar__options {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: flex-start;
	row-gap: 2.5px;
	z-index: 0;
}

/* Parrafos de las opciones */
.accessibilityBar__p {
	font-size: var(--tamanoTextoAC) !important;
	letter-spacing: normal !important;
	font-family: 'WorkSans' !important;
	margin-bottom: 0px !important;
	color: var(--color-fontAC);
	transition: 0.4s;
	pointer-events: none;
}

/* Se mantiene el mismo color luego de ingresar al enlace de centro de relevo */
.accessibilityBar__p:visited {
	color: var(--color-fontAC);
}

/* Opción de la barra por individual */
.accessibilityBar__option {
	display: flex;
	align-items: baseline;
	transition: 400ms;
	opacity: 0;
	cursor: pointer;
}

/* Efecto hover de subrayado para cada opción de la barra de accesibilidad */
.accessibilityBar__option:hover .accessibilityBar__p {
	text-decoration: underline;
}

.accessibilityBar--active {
	transform: translateX(0%);
	bottom: calc(100vh - 15vh);
}

/* Contraste */
.scr_highcontrast {
	filter: invert(100%);
	background-color: #000 !important;
}

/* En caso que al activar el contraste y modo gris se pierda la barra y boton de subir descomentar linea de codigo 187-189 */

/* .scr_highcontrast .scroll-to-top,.scr_highcontrast .accesibilidadBtn{
      bottom: 8rem !important;
  } */

/* Letra para dislexicos*/

@font-face {
	font-family: 'OpenDyslexic';
	src: url('/Style Library/ScreenReaderV3/Assets/fonts/OpenDyslexic-Regular.otf');
}

.font-dyslexic {
	font-family: 'OpenDyslexic', sans-serif !important;
}

/*Letra de señas*/
@font-face {
	font-family: 'handsLanguage';
	src: url('/Style Library/ScreenReaderV3/Assets/fonts/Signalin_Nature_LSE.ttf');
}

.font-handsLanguage {
	font-family: 'handsLanguage', sans-serif !important;
}

/* Tono gris */

.scr_grayHues {
	filter: grayscale(1);
}

/* En caso que al activar el contraste y modo gris se pierda la barra y boton de subir descomentar linea de codigo 187-189 */

/* .scr_grayHues .scroll-to-top,.scr_grayHues .accesibilidadBtn{
      bottom: 8rem !important;
  } */

/* Cursor grande */
.scr_bigcursor * {
	cursor: url('/Style Library/ScreenReaderV3/Assets/images/bigcursor.svg'), auto !important;
}

.scr_bigcursor a,
.scr_bigcursor input,
.scr_bigcursor button {
	cursor: url('/Style Library/ScreenReaderV3/Assets/images/cursorPointer.svg'), auto !important;
}

/* Resaltar enlaces */
.src_highlightLink {
	background-color: var(--color-resaltoFondoAC) !important;
	color: var(--resalto-linksAC) !important;
	text-decoration: underline !important;
}

/* Animaciones */
@keyframes itemFade {
	from {
		opacity: 0;
		transform: translateX(70px);
	}

	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

/* Iconos */
.accessibilityBar__icon {
	color: var(--color-secundarioAC);
	font-size: 13px;
	font-family: 'govco-font' !important;
	margin-right: 10px;
	pointer-events: none;
}

.accessibilityBar__icon--play:before {
	content: '\ea94';
}

.accessibilityBar__icon--stop:before {
	content: '\eb37';
}

.accessibilityBar__icon--maximize:before {
	content: '\eae0';
}

.accessibilityBar__icon--minimize:before {
	content: '\eadf';
}

.accessibilityBar__icon--more_spacing:before {
	content: '\ec29';
}

.accessibilityBar__icon--less_spacing:before {
	content: '\ec2a';
}

.accessibilityBar__icon--bar_gray:before {
	content: '\e83d';
}

.accessibilityBar__icon--contrast:before {
	content: '\e803';
}

.accessibilityBar__icon--dyslexic:before {
	content: '\e96d';
}

.accessibilityBar__icon--sign-language:before {
	content: '\f2a7';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.accessibilityBar__icon--cursor:before {
	content: '\ec44';
}

.accessibilityBar__icon--reading-line:before {
	content: '\f545';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.accessibilityBar__icon--translate:before {
	content: '\ea02';
}

.accessibilityBar__icon--link:before {
	content: '\ea14';
}

.accessibilityBar__icon--restart:before {
	content: '\eb9b';
}

.accessibilityBar__icon--centro_relevo:before {
	content: '\e9b6';
}

/*TRADUCTOR STYLES*/
.head-access {
	display: flex;
	gap: 10px;
	align-items: center;
}

.translate-container {
	scale: 0.7;
	position: relative;
	width: 170px;
	height: 50px;
}

.gtranslate_wrapper {
	position: absolute;
	left: 0;
	z-index: 999;
}

.gt_float_switcher {
	border-radius: 10px;
}

.gt_float_switcher .gt_options {
	z-index: 1;
}