@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Light.ttf);
}

@font-face {
    font-family: 'MyLocalFont';
    src: url('/fonts/font.ttf');
}

@font-face {
    font-family: 'ExternalFont';
    src: url('https://cdn.example.com/fonts/font.ttf');
}


:root {
    /*General Design*/
    --backgroundBodyColorStar: #D7D8DC; /*Este agrega el color de fondo de la franja superior de las paginas se usa layout*/
    --backgroundBodyColorEnd: #EDEEF0; /*Este agrega el color de fondo del body de las paginas se usa layout*/
    --bodyFontFamily: 'Open Sans'; /*Este agrega el tipo de letra del body de toda la pagina*/
    --bodyFontSize: 14px; /*Este agrega el tamaño de letra del body de toda la pagina*/
    --bodyFontStyle: normal; /*Este agrega el estilo de letra del body de toda la pagina*/
    --bodyFontWeight: normal; /*Este agrega el tamaño de Negrita de letra del body de toda la pagina*/
    --bodyColor: white; /*Este agrega el solor de letra del body de toda la pagina*/
    --bodyPadding: 5% 10% 10% 10%; /*Este agrega el padding(es como un margen interno) del body de toda la pagina*/
    --backgroundColorFooter: #EDEEF0; /*Este agrega color de fondo del footer en donde esta ubicado la información de politica y privacidad de datos... layout*/
    --colorFooter: black; /*Este agrega color de letra del footer en donde esta ubicado la información de politica y privacidad de datos... layout*/
    --fontSizeFooter: 10px; /*Este agrega tamaño de letra del footer en donde esta ubicado la informacion de politica y privacidad de datos... layout*/
    --colorPoliticaYSomos: blue; /*Este agrega color de letra del footer en donde esta ubicado la informacion de politica y privacidad de datos... layout*/
    --fontSizePoliticaYSomos: 10px; /*Este agrega el tamaño de letra al recuadro donde esta la politica y privacidad de datos... layout*/
    --heightHeader: 20%; /*Este define el alto del recuadro principal de las paginas se usa layout*/
    --backgroundColorTexbox: #EDEEF0; /*Este agrega color de fondo de todos los texbox*/
    --borderTexbox: 1px solid #AEADB3; /*Este agrega borde y color de borde de todos los texbox*/
    --fontSizeTexbox: 11px; /*Este agrega tamaño de letra de todos los texbox*/
    --colorTexbox: black; /*Este agrega color de letra de todos los texbox*/
    --heightButton: 33.06px; /*Este agrega el alto de los botones*/
    --RecuadroLabel: black; /*RecuadroLabel*/
    --RecuadroTexboxBackground: #EDEEF0; /*Cambia el color de los recuadros en los Textbox*/
    --RecuadroTexboxBorder: #AEADB3; /*Cambia el color del borde en los recuadros en los Textbox*/
    --BackgroudColorcontainerCheck: #0fd3ff; /*Permite cambiar el color del fondo del check de términos y condiciones cuando se selecciona*/
    --BackgroudColorcontainerCheckHover: #0fd3ff; /*Permite cambiar el color del fondo del check de términos y condiciones cuando se pasa el mouse*/
    --BackGroudColorIndexCheck: #76AADB; /*Permite cambiar el fondo del check de términos y condiciones*/
    /*----------General Design/General Buttons Design----------*/
    --backgroundColorBtnSolicitar: #87868A; /*Este agrega el color de fondo de boton soliciar turno*/
    --backgroundColorBtnCancelar: #BF0811; /*Este agrega el color de fondo de boton cancelar turno*/
    --backgroundColorBtnAgendar: #87868A; /*Este agrega el color de fondo de boton agendar turno*/
    --backgroundColorBtnAdjuntar: #70A83B; /*Este agrega el color de fondo de boton adjuntar turno*/
    --colorBtnSolicitar: white; /*Este agrega el color de letra de boton solicitar turno*/
    --colorBtnCancelar: white; /*Este agrega el color de letra de boton cancelar turno*/
    --colorBtnAdjuntar: white; /*Este agrega el color de letra de boton adjuntar turno*/
    --colorBtnAgendar: white; /*Este agrega el color de letra de boton agendar turno*/
    --fontSizeButton: 14px; /*Este agrega el tamaño de letra de los botones agendar , cancelar , solicitar y adjunta*/
    --boxShadowButtonAdjuntar: 3px 4px 0px 1px #EDEEF0; /*Este agrega sombra y color de la sombra al boton adjuntar*/
    --borderButtonAgendar: 1px solid #87868A; /*Este agrega borde y color de borde al boton agendar*/
    --borderButtonAdjuntar: 1px solid #70A83B; /*Este agrega borde y color de borde al boton adjuntar*/
    --borderButtonSolicitar: 1px solid #87868A; /*Este agrega borde y color de borde al boton solicitar*/
    --borderButtonCancelar: 1px solid #BF0811; /*Este agrega borde y color de borde al boton cancelar*/
    --hoverBackgroundColorBtnSolicitar: #EDEEF0; /*Este agrega color de fondo al boton solicitar cuando el mouse se pone encima del boton*/
    --hoverBackgroundColorBtnCancelar: #BF0811; /*Este agrega color de fondo al boton cancelar cuando el mouse se pone encima del boton*/
    --hoverBackgroundColorBtnAgendar: #EDEEF0; /*Este agrega color de fondo al boton agendar cuando el mouse se pone encima del boton*/
    --hoverBackgroundColorBtnAdjuntar: #70A83B; /*Este agrega color de fondo al boton adjuntar cuando el mouse se pone encima del boton*/
    --hoverBoxShadowButtonAdjuntar: 3px 4px 0px 1px #70A83B; /*Este agrega sombra y color de sombra al boton adjuntar cuando el mouse se pone encima del boton*/
    --hoverBorderButtonAgendar: 1px solid #EDEEF0; /*Este agrega borde y color de borde al boton agendar cuando el mouse se pone encima del boton*/
    --hoverBorderButtonAdjuntar: 1px solid #FFFFFF; /*Este agrega borde y color de borde al boton adjuntar cuando el mouse se pone encima del boton*/
    --hoverBorderButtonSolicitar: 1px solid #EDEEF0; /*Este agrega borde y color de borde al boton solicitar cuando el mouse se pone encima del boton*/
    --hoverBorderButtonCancelar: 1px solid #FFFFFF; /*Este agrega borde y color de borde al boton cancelar cuando el mouse se pone encima del boton*/
    --hoverColorButtonAgendar: black; /*Este agrega color de letra al boton agendar cuando el mouse se pone encima del boton*/
    --hoverColorButtonSolicitar: black; /*Este agrega color de letra al boton solicitar cuando el mouse se pone encima del boton*/
    --hoverColorButtonCancelar: white; /*Este agrega color de letra al boton cancelar cuando el mouse se pone encima del boton*/
    --hoverColorButtonAdjuntar: white; /*Este agrega color de letra al boton adjuntar cuando el mouse se pone encima del boton*/
    /*Index View*/
    --backgroundContent1: #F7F7F7; /*Este agrega el color de fondo del formulario de la pagina incial index*/
    --backgroundContent2: #FFFFFF; /*Este agrega el color fondo del recuadro donde este ubicado el mapa*/
    --backgroundContent3: #FFFFFF; /*Este agrega el color fondo del recuadro donde este ubicado el mensaje aleatorio de la apgina inicial index*/
    --boxShadowContent1: none; /*Este agrega sombra al Content1 del formulario principal de la pagina index donde el cliente llena el formulario*/
    --boxShadowContent2: 4px 7px 12px rgba(0,0,0,0.3); /*Este agrega sombra al Content2 del formulario principal de la pagina index donde esta el mapa*/
    --boxShadowContent3: 0px -9px 5px -4px rgba(0,0,0,0.04); /*Este agrega sombra al Content3 del formulario principal de la pagina index donde esta el contenido aleatorio*/
    --colorContent3: black; /*Este agrega color de letra  al Content3 del formulario principal de la pagina index donde esta el contenido aleatorio*/
    --fontSizeContent3: 16px; /*Este agrega tamaño de letra  al Content3 del formulario principal de la pagina index donde esta el contenido aleatorio*/
    --colorTitleContent1: #FFFFFF; /*Este agrega color de letra del titulo Para una mejor expereiencia: del formulario principal index*/
    --fontSizeTitleContent1: 14px; /*Este agrega tamaño de letra del titulo Para una mejor expereiencia: del formulario principal index*/
    --fontFamilyTitleContent1: Open Sans; /*Este cambia el tipo de letra del titulo P"ara una mejor expereiencia:" del formulario principal index*/
    --colorSubtitleContent1: #FFFFFF; /*Este agrega color de letra del subtitulo encima del formulario principal index*/
    --fontSizeSubtitleContent1: 14px; /*Este agrega tamaño de letra del subtitulo encima del formulario principal index*/
    --fontFamilySubtitleContent1: Open Sans; /*Este cambia el tipo de letra del subtitulo encima del formulario principal index*/
    --colorDataPolicyContent1: #FFFFFF; /*Este cambia el color de letra de la reseña de politica de datos del formulario principal index*/
    --fontSizeDataPolicyContent1: 14px; /*Este cambia el tamaño de letra de la reseña de politica de datos del formulario principal index*/
    --fontFamilyDataPolicyContent1: Open Sans; /*Este cambia el tipo de fuete del titulo de la reseña de politica de datos del formulario principal index*/
    --colorCheckDataTextContent1: #FFFFFF; /*Este cambia el color del contenido que acompaña el check de aceptar terminos y condiciones del formulario principal index*/
    --fontSizeCheckDataTextContent1: 14px; /*Este cambia el tamaño del contenido que acompaña el check de aceptar terminos y condiciones del formulario principal index*/
    --fontFamilyCheckDataTextContent1: Open Sans; /*Este cambia el tipo de fuente del contenido que acompaña el check de aceptar terminos y condiciones del  formulario principal index*/
    --colorCopyrightDescription: #FFFFFF; /*Este permite cambiar el color del texto de desarrollado y comercializado por sistemas sentry S.A.S de forma individual del formulario principal index*/
    --fontSizeCopyrightDescription: 11px; /*Este permite cambiar el tamaño del texto de desarrollado y comercializado por sistemas sentry S.A.S de forma individual del formulario principal*/
    --fontFamilyCopyrightDescription: Open Sans; /*Este permite cambiar la fuente del texto de desarrollado y comercializado por sistemas sentry S.A.S de forma individual del formulario principal*/
    --colorSolicitarTurnoButton: #FFFFFF; /*Este permite cambiar el color del texto del boton de solicitar turno de forma individual del formulario principal index*/
    --fontSizeSolicitarTurnoButton: 11px; /*Este permite cambiar el tamaño del texto del boton de solicitar turno de forma individual del formulario principal*/
    --fontFamilySolicitarTurnoButton: Open Sans; /*Este permite cambiar la fuente del texto del boton de solicitar turno de forma individual del formulario principal*/
    --fontWeightTitleContent1: 800; /*Este agrega grosor de la negrita de letra del titulo Para una mejor expereiencia: del formulario principal index*/
    --colorParrafoContent1: #FFFFFF; /*Este agrega color de letra de la clase parrafoContent-1 del formulario principal en donde se colocan los pasos para ser atendido para una mejor experiencia index*/
    --fontSizeParrafoContent1: 11px; /*Este agrega tamaño de letra de la clase parrafoContent-1 del formulario principal en donde se colocan los pasos para ser atendido para una mejor experiencia index*/
    --fontSizeFirstStepContent1: 11px; /*Este agrega tamaño de letra de la clase firstStepContent-1 a la primera linea de los pasos para una mejor experiencia index*/
    --fontSizeSecondStepContent1: 11px; /*Este agrega tamaño de letra de la clase secondStepContent-1 a la segunda linea de los pasos para una mejor experiencia index*/
    --fontSizeThirdStepContent1: 11px; /*Este agrega tamaño de letra de la clase thirdStepContent-1 a la tercera linea de los pasos para una mejor experiencia index*/
    --fontFamilyFirstStepContent1: Open Sans; /*Este cambia el tipo de fuente de la clase firstStepContent-1 a la primera linea de los pasos para una mejor experiencia index*/
    --fontFamilySecondStepContent1: Open Sans; /*Este cambia el tipo de fuente de la clase secondStepContent-1 a la segunda linea de los pasos para una mejor experiencia index*/
    --fontFamilyThirdStepContent1: Open Sans; /*Este cambia el tipo de fuente de la clase thirdStepContent-1 a la tercera linea de los pasos para una mejor experiencia index*/
    --colorFirstStepContent1: #FFFFFF; /*Este cambia el color de fuente de la clase firstStepContent-1 a la primera linea de los pasos para una mejor experiencia index*/
    --colorSecondStepContent1: #FFFFFF; /*Este cambia el color de fuente de la clase secondStepContent-1 a la segunda linea de los pasos para una mejor experiencia index*/
    --colorThirdStepContent1: #FFFFFF; /*Este cambia el color de fuente de la clase thirdStepContent-1 a la tercera linea de los pasos para una mejor experiencia index*/
    --heightContent3: 15%; /*Este agrega el alto de recuadro del Content3 del formulario principal de la pagina index donde esta el contenido aleatorio*/
    --widthContent3: 100%; /*Este agrega el ancho de recuadro del Content3 del formulario principal de la pagina index donde esta el contenido aleatorio*/
    --widthContent2: 100%; /*Este agrega el ancho de recuadro del Content2 del formulario principal de la pagina index donde esta el mapa*/
    --widthContent1: 100%; /*Este agrega el ancho de recuadro del Content1 del formulario principal de la pagina index donde esta el contenido del formulario que debe ingresar el usuario*/
    --paddingContent2: 0.4%; /*Este agrega un padding de recuadro del Content2 del formulario principal de la pagina index donde esta el mapa*/
    --fontSizeMessageSliderIndex: 14px; /*Este cambia el tamaño de fuente del pasamensajes*/
    --fontFamilyMessageSliderIndex: Open Sans; /*Este cambia el tipo de fuente del pasamensajes*/
    --fontFamilyDataPolicyHypervinIndex: Open Sans; /*Este cambia el tipo de fuente del hipervinculo de datos de privacidad*/
    --fontFamilyAboutUsHypervinIndex: Open Sans; /*Este cambia el tipo de fuente del hipervinculo de quienes somos*/
    --fontSizeDataPolicyHypervinIndex: 11px; /*Este cambia el tamaño de fuente del hipervinculo de datos de privacidad*/
    --fontSizeAboutUsHypervinIndex: 11px; /*Este cambia el tamaño de fuente del hipervinculo de quienes somos*/
    --iconHorizontalPositionIndexView: 50px; /*Esta variable le permite al usuario del sistema, mover horizontalmente la imagen en forma de ícono de los mensajes configurables de la vista principal*/
    --fontFamilyFirstTextMessageTitleIndexView: Roboto; /*Esta variable le permite al usuario cambiar a voluntad el tipo de fuente del titulo de los mensajes configurables, más específicamente el texto que viene por defecto "INFORMACIÓN"*/
    --colorFirstTextMessageTitleIndexView: #808080; /*Esta variable le permite al usuario cambiar a voluntad el color del titulo de los mensajes configurables, más específicamente el texto que viene por defecto "INFORMACIÓN"*/
    --fontStyleFirstTextMessageTitleIndexView: normal; /*Esta variable le permite al usuario cambiar a volunta el estilo de la fuente del titulo de los mensajes configurables, más específicamente el texto que viene por defecto "INFORMACIÓN"*/
    --fontFamilySecondTextMessageTitleIndexView: Roboto; /*Esta variable le permite al usuario cambiar a voluntad el tipo de fuente del titulo de los mensajes configurables, más específicamente el texto que viene por defecto "DE TU INTERÉS"*/
    --colorSecondTextMessageTitleIndexView: #A3181D; /*Esta variable le permite al usuario cambiar a voluntad el color del titulo de los mensajes configurables, más específicamente el texto que viene por defecto "DE TU INTERÉS"*/
    --fontStyleSecondTextMessageTitleIndexView: italic; /*Esta variable le permite al usuario cambiar a volunta el estilo de la fuente del titulo de los mensajes configurables, más específicamente el texto que viene por defecto "DE TU INTERÉS"*/
    --fontFamilyMessageContentIndexView: Roboto; /*Esta variable le permite al usuario cambiar a voluntad el tipo de fuente del contenido de los mensajes configurables que aparecen en la vista principal*/
    --colorMessageContentIndexView: #000000; /*Esta variable le permite al usuario cambiar a voluntad el color de la fuente del contenido de los mensajes configurables que aparecen en la vista principal*/
    --backgroundColorFirstLayeringMessageIndexView: #A3181D; /*Esta variable le permite al usuario cambiar a voluntad el color de fondo de la primera capa de los mensajes configurables que aparecen en la vista principal de la aplicación*/
    --backgroundColorSecondLayeringMessageIndexView: #FFFFFF; /*Esta variable le permite al usuario cambiar a voluntad el color de fondo de la segunda capa de los mensajes configurables que aparecen en la vista principal de la aplicación*/
    /*Conference View*/
    --ColorNumeroTurno: #6EAA6F; /*Cambia el color de la letra del número de turno*/
    --ColorLetraNumeroTurno: #6EAA6F; /*Cambia el color de la letra del turno*/
    --RecuadroLetraTurno: #F4F6F4; /*Cambia el color del cuadro donde esta la letra del turno*/
    --RecuadroNumeroTurno: #F4F6F4; /*Cambia el color del cuadro donde esta el número del turno*/
    --ColorTurnoConferencia: white;
    --ColorTextoTurnoConferencia: white;
    --ChatTurnoConferenciaBackGroundColor: #EDEEF0;
    --ChatTurnoConferenciaColor: black;
    --ChatTurnoConferenciaBorder: #AEADB3;
    --ChatTextoTurnoConferenciaBackGround: #EDEEF0;
    --ChatTextoTurnoConferenciaColor: black;
    --ChatTextoTurnoConferenciaBorder: #AEADB3;
    --backgroundContent2Conferencia: #D7D8DC; /*Permite cambiar el fondo en la ventana de espera de turno content2*/
    --TitleTurnoConferenca: black; /*Cambia el color de la letra del título en el turno*/
    --colorTitleConferenceViewContent3: #000000;
    --fontFamilyTitleConferenceViewContent3: Open Sans;
    --colorMessageSliderConferenceView: #000000;
    --fontFamilyMessageSliderConferenceView: Open Sans;
    --backgroundColorMessageSliderConferenceView: #000000;
    --backgroundColorConferenceViewContent3: #000000;
    --colorDataPolicyHypervinIndex: #000000;
    --colorAboutUsHypervinIndex: #000000;
    --fontFamilyHeadquarterDetailsConferenceView: Open Sans;
    --fontFamilyLettersConferenceViewContent3: Open Sans;
    --fontFamilyNumberConferenceViewContent3: Open Sans;
    --fontFamilyButtonConferenceViewContent3: Open Sans;
    --colorLabelsConferenceViewContent4: #000000;
    --fontFamlityLabelsConferenceViewContent4: Open Sans;
    --colorTextInformationConferenceViewContent4: #000000;
    --fontFamlityTextInformationConferenceViewContent4: Open Sans;
    --fontFamilyConferenceViewContent6: Open Sans;
    /*VideoConference View*/
    --backgroundColorContent1VideoC: #76AADB; /*Cambia color de la ventana de video conferencia Content1*/
    --backgroundColorTituloVideoC: white; /*Cambia el color del título de la video conferencia content1*/
    --ColorTituloVideoC: #76AADB; /*Cambia el color de la letra del content1*/
    --titleConferenciaColor: black; /*Cambia el color de la letra del título*/
    --backgroundContenet3VideoC: white; /*Cambiar el Background del content3 videoC*/
    --backgroundContenet4VideoC: white; /*Cambia el Background del content 4 videoC*/
    --colorContent6Conferencia: black; /*Cambia el color del content 6*/
    --BorderColorCheckBox: #FFFFFF; /*Permite Cambiar el color del borde del checkbox*/
    --colorHeadquarterTextVideoConferenceViewContent1: #000000;
    --fontFamilyHeadquarterTextVideoConferenceViewContent1: Open Sans;
    --colorGroupTextVideoConferenceViewContent1: #000000;
    --fontFamilyGroupTextVideoConferenceViewContent1: Open Sans;
    --colorHoverEndButtonVideoConferenceViewContent1: #FFC133;
    --backgroundColorEndButtonVideoConferenceViewContent1: #000000;
    --fontFamilyEndButtonVideoConferenceViewContent1: Open Sans;
    --colorHoverDownloadButtonVideoConferenceViewContent1: #FFFFFF;
    --colorHoverAttachButtonVideoConferenceViewContent1: #000000;
    --backgroundColorDownloadButtonVideoConferenceViewContent1: #FFFFFF;
    --backgroundColorAttachButtonVideoConferenceViewContent1: #000000;
    --fontFamilyDownloadButtonVideoConferenceViewContent1: Open Sans;
    --fontFamilyAttachButtonVideoConferenceViewContent1: Open Sans;
    --fontFamilyTitleVideoConferenceViewContent1: Open Sans;
    --fontFamilyTurnVideoConferenceViewContent1: Open Sans;
    /*TurnoExpressModule*/
    --TurnExpressModuleTitleColor: #ca252b; /*cambia el color del titulo */
    --TurnExpressModuleTitleFontSize: 40px; /*cambia el tamaño del titulo*/
    --TurnExpressModuleTitleBackground: #C7C6C4; /*cambia el color de fondo del contenedor superior*/
    --TurnExpressModuleTitleFont: initial; /*cambia la fuente del titulo*/
    --TurnExpressModuleBodyBackground: white; /*cambia el color del body de toda la pantalla*/
    --TurnExpressModuleFormBodyBackground: #C9C8C6; /*cambia el color de fondo de la ventana de los listados y el boton*/
    --TurnExpressModuleFormBorderColor: #aaaaaa; /*cambia el color del borde de la ventana de los listados y el boton*/
    --TurnExpressModuleColorTextListaDeSedes: white; /*cambia el color del texto "Lista de sedes"*/
    --TurnExpressModuleColorTextListaDeModulos: white; /*cambia el color del texto "Lista de modulos"*/
    --TurnExpressModuleColorTextListaDeGrupos: white; /*cambia el color del texto "Lista de grupos"*/
    --TurnExpressModuleFontTextListaDeSedes: initial; /*cambia el tipo de fuente del texto "Lista de sedes"*/
    --TurnExpressModuleFontTextListaDeModulos: initial; /*cambia el tipo de fuente del texto "Lista de modulos"*/
    --TurnExpressModuleFontTextListaDeGrupos: initial; /*cambia el tipo de fuente del texto "Lista de grupos"*/
    --TurnExpressModuleFontSizeTextListaDeSedes: 25px; /*cambia el tamaño del texto "Lista de sede"*/
    --TurnExpressModuleFontSizeTextListaDeModulos: 25px; /*cambia el tamaño del texto "Lista de mdoulos"*/
    --TurnExpressModuleFontSizeTextListaDeGrupos: 25px; /*cambia el tamaño del texto "Lista de grupos"*/
    --TurnExpressModuleColorBottonConsultar: #87868A; /*cambia el color de fondo del boton Conectar*/
    --TurnExpressModuleFontSizeBottonConsultar: 18px; /*cambia el tamaño del texto del boton*/
    --TurnExpressModuleColorTextBottonConsultar: white; /*cambia el color del texto del boton*/
    --TurnExpressModuleBorderBottonConsultar: white; /*cambia el color del borde del boton*/
    --TurnExpressModuleColorTextPoliticaDePrivacidad: blue; /*cambia el color del texto politica de privacidad*/
    --TurnExpressModuleColorTextQuienesSomos: blue; /*cambia el color de texto quienes somos*/
    --TurnExpressModuleColorTextDesarrolladoYComercializado: black; /*cambia el color del texto desarrollado y comercializado*/
    --TurnExpressModuleFontTextPoliticaDePrivacidad: initial; /*cambia la fuente del texto politica de privacidad*/
    --TurnExpressModuleFontTextQuienesSomos: initial; /*cambia la fuente del texto quienes somos*/
    --TurnExpressModuleFontTextDesarrolladoYComercializado: initial; /*cambia la fuente del texto desarrollado y comercializado*/
    --TurnExpressModuleFontSizeTextPoliticaDePrivacidad: 10px; /*cambia el tamaño de la fuente del texto politica de privacidad*/
    --TurnExpressModuleFontSizeTextQuienesSomos: 10px; /*cambia el tamaño del texto quienes somos*/
    --TurnExpressModuleFontSizeTextDesarrolladoYComercializado: 10px; /* cambia el tamaño del texto desarrollado y comercializado*/
    --TurnExpressModuleContentTextInfoColor: #B5B5B5; /*cambia el color del texto informativo "lorem ipsum...." las tres lineas*/
    --TurnExpressModuleContentTextInfoFont: initial; /*cambia la fuente del texto informativo "lorem ipsum...." las tres lineas*/
    --TurnExpressModuleContentTextInfoFontSize: 35px; /*cambia el tamaño de la fuente del texto informativo "lorem ipsum..." las tres lineas*/
    --TurnExpressModuleTitleFontSizeHighResolution: 43; /*tamaño del texto del titulo para pantallas superiores a los 1600 pixeles*/
    --TurnExpressModuleFontSizeTextListaDeSedesHighResolution: 32px; /*cambia el tamaño del texto "lista de sedes" en resoluciones superiores a los 1600 pixeles*/
    --TurnExpressModuleFontSizeTextListaDeModulosHighResolution: 32px; /*cambia el tamaño del texto "lista de modulos" en resoluciones superiores a los 1600 pixeles*/
    --TurnExpressModuleFontSizeTextListaDeGruposHighResolution: 32px; /*cambia el tamaño del texto "lista de grupos" en resoluciones superiores a los 1600 pixeles*/
    --TurnExpressModuleFontSizeTextBottonConsultarHighResolution: 22px; /*cambia el tamaño del texto del boton en resoluciones superiores a los 1600px*/
    --TurnExpressModuleFontSizeTextPoliticaDePrivacidadHighResolution: 17px; /*cambia el tamaño del texto politica de privacidad en resoluciones superiores a los 1600px*/
    --TurnExpressModuleFontSizeTextQuienesSomosHighResolution: 17px; /*cambia el tamaño del texto quienes somos en resoluciones superiores a los 1600px*/
    --TurnExpressModuleFontSizeTextDesarrolladoYComercializadoHighResolution: 17px; /*cambia el tamaño del texto desarrollado y comercializado en resoluciones superiores a los 1600px*/
    --TurnExpressModuleContentTextInfoFontSizeHighResolution: 40px; /*cambia el tamaño del texto informativo en resoluciones superiores a los 1600 pixeles*/
    /*TurnoExpress*/
    --TurnExpressTitleColor: #ca252b; /*cambia el color del titulo*/
    --TurnExpressTitleFontSize: 40px; /*cambia el tamaño del texto del titulo*/
    --TurnExpressTitleFont: initial; /*cambia el tipo de fuente del titulo*/
    --TurnExpressTitleBackground: #C7C6C4; /*cambia el color de fondo de la ventana superior*/
    --TurnExpressBodyBackground: white; /*cambia el color de fondo del body de toda la pantalla*/
    --TurnExpressFormBodyBackground: #C9C8C6; /*cambia el color de fondo de la ventana inferior*/
    --TurnExpressFormBorderColor: #aaaaaa; /*cambia el color del borde de la ventana inferior*/
    --TurnExpressColorTextSede: white; /*cambia el color del texto sede */
    --TurnExpressColorTextModulo: white; /*cambia el color del texto modulo */
    --TurnExpressFontTextSede: initial; /*cambia el tipo de fuente del texto sede */
    --TurnExpressFontTextModulo: initial; /*cambia el tipo de fuente del texto modulo */
    --TurnExpressFontSizeTextSede: 32px; /*cambia el tamaño del texto sede*/
    --TurnExpressFontSizeTextModulo: 32px; /*cambia el tamaño del texto sede*/
    --TurnExpressColorButtonConsultar: #87868A; /*cambia el color de fondo del boton*/
    --TurnExpressColorTextButtonTurnoRapido: white; /*cambia el color del texto del boton*/
    --TurnExpressFontTextButtonTurnoRapido: initial; /*cambia la fuente del texto del boton*/
    --TurnExpressFontSizeTextButtonTurnoRapido: 18px; /*cambia el tamaño del texto del boton*/
    --TurnExpressBorderButtonTurnoRapido: white; /*cambia el color del borde del boton*/
    --TurnExpressColorTextPoliticaDePrivacidad: blue; /*cambia el color del texto poliica de privacidad*/
    --TurnExpressColorTextQuienesSomos: blue; /*cambia el color del texto quienes somos*/
    --TurnExpressColorTextDesarrolladoYComercializado: black; /*cambia el color del texto desarrollado y comercializado*/
    --TurnExpressFontTextPoliticaDePrivacidad: initial; /*cambia la fuente del texto politica de privacidad*/
    --TurnExpressFontTextQuienesSomos: initial; /*cambia la fuente del texto quienes somos*/
    --TurnExpressFontTextDesarrolladoYComercializado: initial; /*cambia la fuente del texto desarrollado y comercializado*/
    --TurnExpressFontSizeTextPoliticaDePrivacidad: 10px; /*cambia el tamaño del texto politica de privacidad */
    --TurnExpressFontSizeTextQuienesSomos: 10px; /*cambia el tamaño del texto quienes somos */
    --TurnExpressFontSizeTextDesarrolladoYComercializado: 10px; /*cambia el tamaño del texto desarrollado y comercializado */
    --TurnExpressContentTextInfoColor: #B5B5B5; /*cambia el color del texto informativo "lorem ipsum...." las tres lineas */
    --TurnExpressContentTextInfoFont: initial; /*cambia la fuente del texto informativo "lorem ipsum...." las tres lineas */
    --TurnExpressContentTextInfoFontSize: 35px; /*cambia el tamaño del texto informativo "lorem ipsum...." las tres lineas */
    /*turno express resoluciones superiores a 1600px*/
    --TurnExpressTitleFontSizeHighResolution: 43px; /*cambia el tamaño del texto del titulo*/
    --TurnExpressFontSizeTextSedeHighResolution: 38px; /*cambia el tamaño del texto sede*/
    --TurnExpressFontSizeTextModuloHighResolution: 38px; /*cambia el tamaño del texto modulo*/
    --TurnExpressFontSizeTextButtonTurnoRapidoHighResolution: 22px; /*cambia el tamaño del texto del boton*/
    --TurnExpressFontSizeTextPoliticaDePrivacidadHighResolution: 17px; /*cambia el tamaño del texto politica de privacidad*/
    --TurnExpressFontSizeTextQuienesSomosHighResolution: 17px; /*cambia el tamaño del texto quienes somos*/
    --TurnExpressFontSizeTextDesarrolladoYComercializadoHighResolution: 17px; /*cambia el tamaño del texto desarrollado y comercializado*/
    --TurnExpressContentTextInfoFontSizeHighResolution: 40px; /*cambia el tamaño del texto informativo*/
    /*parametrizacion semana 39.*/
    /*formulario del index de vision web*/
    --borderTexboxIndexFormulario: 1px solid #AEADB3; /*cambia el borde de los textbox del formulario del index*/
    --borderRadiusTexboxIndexFormulario: 0px; /*cambia la profundidad del borde de los textbox del formulario del index*/
    --borderRadiusContent1IndexFormulario: 0px; /*cambia la profundidad del borde del contenedor del formulario del index*/
    --boxShadowContent1IndexFormulario: 0 1px 1px 0 rgba(39,59,71,0.23); /*cambia la sombra exterior del borde del contenedor del formulario del index*/
    --borderRadiusBotonSolicitarIndexFormulario: 0px; /*cambia la profundidad del borde del boton "solicitar" en el formulario del index*/
    --marginBottomTextboxIndexFormulario: 5px; /*cambia el espacio inferior entre los input del formulario del index*/
}

.selectIdiomasLayout {
    padding: 5px 10px !important;
    width: 200px;
    border-radius: 10px !important;
    background-color: var(--backgroundColorTexbox);
}

body, hmtl {
    font-family: var(--bodyFontFamily);
    font-size: var(--bodyFontSize);
    font-style: var(--bodyFontStyle);
    font-weight: var(--bodyFontWeight);
    color: var(--bodyColor);
    overflow-x: hidden;
    padding: 0;
}

.espacioDiv {
    margin-top: 2%;
    margin-bottom: 2%;
}

.navbar-inverse {
    border-color: var(--backgroundBodyColorStar);
    height: var(--heightHeader);
    max-height: 100%;
    height:80px;
    margin-bottom:0;
}

.containerPrincipal {
    margin: 1% 10% 10% 10%;
}

.content-1 {
    background: var(--backgroundContent1);
    padding: 25px 30px 30px;
    -webkit-box-shadow: var(--boxShadowContent1);
    -moz-box-shadow: var(--boxShadowContent1);
    box-shadow: var(--boxShadowContent1);
    width: var(--widthContent1);
    height: 100%;
    float: left;
}

p {
    margin: 0px;
}

.responsive-container-index
{
    height:auto;
    width:100%;
    margin-top:2%;
}

.responsive-container-conference {
    height: auto;
    margin-top: 50px;
}

.colum {
    padding-left: 0;
    padding-right: 0;
    height:100%;
}

.titleContent-1 {
    color: var(--colorTitleContent1);
    font-size: var(--fontSizeTitleContent1);
    font-weight: var(--fontWeightTitleContent1);
    font-family: var(--fontFamilyTitleContent1);
}

.parrafoContent-1 {
    color: var(--colorTitleContent1);
    font-size: var(--fontSizeParrafoContent1);
}

.firstStepContent-1 {
    font-size: var(--fontSizeFirstStepContent1);
    font-family: var(--fontFamilyFirstStepContent1);
    color: var(--colorFirstStepContent1);
}

.secondStepContent-1 {
    font-size: var(--fontSizeSecondStepContent1);
    font-family: var(--fontFamilySecondStepContent1);
    color: var(--colorSecondStepContent1);
}

.thirdStepContent-1 {
    font-size: var(--fontSizeThirdStepContent1);
    font-family: var(--fontFamilyThirdStepContent1);
    color: var(--colorThirdStepContent1);
}

.subtitleContent-1 {
    font-size: var(--fontSizeSubtitleContent1);
    font-family: var(--fontFamilySubtitleContent1);
    color: var(--colorSubtitleContent1);
    font-weight: var(--fontWeightTitleContent1);
}

.dataPolicyContent-1 {
    font-size: var(--fontSizeDataPolicyContent1);
    font-family: var(--fontFamilyDataPolicyContent1);
    color: var(--colorDataPolicyContent1);
    font-style: italic;
}

.checkDataTextContent-1 {
    font-size: var(--fontSizeCheckDataTextContent1);
    font-family: var(--fontFamilyCheckDataTextContent1);
    color: var(--colorCheckDataTextContent1);
    margin-left: 10px;
}

.PoliticaYSomos {
    color: var(--colorPoliticaYSomos);
    font-size: var(--fontSizePoliticaYSomos);
}

.content-2 {
    background: var(--backgroundContent2);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-box-shadow: var(--boxShadowContent2);
    -moz-box-shadow: var(--boxShadowContent2);
    box-shadow: var(--boxShadowContent2);
    padding: var(--paddingContent2);
    width: var(--widthContent2);
    height: 100%;
    float: right;
    color: black;
    margin-top: 1%;
    margin-bottom: 1%;
}

.content-3 {
    background: var(--backgroundContent3);
    border-radius: var(--borderRadiusPasaMensajesInferiorIndex);
    border: var(--borderPasaMensajesInferiorIndex);
    font-weight: bold;
    color: var(--colorContent3);
    font-size: var(--fontSizeContent3);
    -webkit-box-shadow: var(--boxShadowContent3);
    -moz-box-shadow: var(--boxShadowContent3);
    box-shadow: var(--boxShadowContent3);
    padding: 1%;
    width: var(--widthContent3);
    float: left;
    text-align: center;
    line-height: 20px;
    margin-bottom: 3%;
}

.buttonSolicitar {
    background-color: var(--backgroundColorBtnSolicitar);
    border-radius: var(--borderRadiusBotonSolicitarIndexFormulario);
    border: var(--borderButtonSolicitar);
    display: inline-block;
    cursor: pointer;
    color: var(--colorSolicitarTurnoButton) !important;
    font-size: var(--fontSizeSolicitarTurnoButton);
    width: 340px;
    height: 40px;
    font-family: var(--fontFamilySolicitarTurnoButton);
    font-weight: bold;
    padding: 3px 20px 3px 20px;
    margin-top:20px;
    text-decoration: none;
    -moz-box-shadow: var(--boxShadowButtonSolicitar);
    text-shadow: none;
    text-transform: uppercase;
    width: 100%;
    padding: 8px 0px;
}

.buttonSolicitar:hover {
    background-color: var(--hoverBackgroundColorBtnSolicitar);
    color: var(--hoverColorButtonSolicitar) !important;
    border: var(--hoverBorderButtonSolicitar);
    -moz-box-shadow: var(--boxShadowButtonSolicitar);
}

.buttonSolicitar:active {
    position: relative;
    top: 1px;
}

.buttonSolicitar:focus {
    outline:none;
}

.buttonAgendar {
    background-color: var(--backgroundColorBtnAgendar);
    border-radius: 15px;
    border: var(--borderButtonAgendar);
    display: inline-block;
    cursor: pointer;
    color: var(--colorBtnAgendar);
    font-size: var(--fontSizeButton);
    font-weight: bold;
    padding: 3px 20px 3px 20px;
    text-decoration: none;
    -moz-box-shadow: var(--boxShadowButtonAgendar);
    text-shadow: none;
    height: var(--heightButton);
    text-transform: uppercase;
    width: 90%;
}

.buttonAgendar:hover {
    background-color: var(--hoverBackgroundColorBtnAgendar);
    color: var(--hoverColorButtonAgendar);
    border: var(--hoverBorderButtonAgendar);
    -moz-box-shadow: var(--boxShadowButtonAgendar);
}

.buttonAgendar:active {
    position: relative;
    top: 1px;
}


.buttonCancelar {
    background-color: var(--backgroundColorBtnCancelar);
    border-radius: var(--conferenciaBorderRadiusBotonCancelarTurno);
    border: var(--conferenciaBorderBotonCancelarTurno);
    display: inline-block;
    cursor: pointer;
    color: var(--colorBtnCancelar);
    font-size: var(--fontSizeButton);
    font-weight: bold;
    text-decoration: none;
    -moz-box-shadow: var(--boxShadowButtonCancelar);
    text-shadow: none;
    height: var(--heightButton);
    width: 50%;
}

.buttonCancelar:hover {
    background-color: var(--hoverBackgroundColorBtnCancelar);
    color: var(--hoverColorButtonCancelar);
    border: var(--hoverBorderButtonCancelar);
    -moz-box-shadow: var(--boxShadowButtonCancelar);
}

.buttonCancelar:active {
    position: relative;
    top: 1px;
}


/* Footer */
.footer {
    width: 100%;
    text-align: center;
    height: auto;
    box-shadow: none;
}

.footer ul.shell-footer {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

.footer ul.shell-footer li.copyright {
    margin-right: 0;
    color: var(--colorCopyrightDescription);
    font-size: var(--fontSizeCopyrightDescription);
    font-family: var(--fontFamilyCopyrightDescription);
}

.footer ul.shell-footer li {
    color: var(--colorFooter);
    font-size: var(--fontSizeFooter);
    display: inline-block;
    margin-left: 0;
    margin-right: 25px;
}


label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

/*input[type=text], select, textarea, input[type=email] {
    width: 100%;
    padding: 10px 10px;
    resize: vertical;
    background-color: var(--backgroundColorTexbox);
    font-size: var(--fontSizeTexbox) !important;
    height: 28px;
    color: var(--colorTexbox);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    line-height: 1.5;
}*/

.form-group-sm .form-control {
    height: 40px !important;
    padding: 5px 10px;
    font-size: var(--fontSizeTexbox);
    line-height: 1.5;
    border-radius: var(--borderRadiusTexboxIndexFormulario);
    border: var(--borderTexboxIndexFormulario);
    background-color: var(--backgroundColorTexbox);
    margin-bottom: var(--marginBottomTextboxIndexFormulario);
    box-shadow: none;
}


select.input-sm, select.form-control.input-sm {
    font-size: var(--fontSizeTexbox);
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.divInputControlsDataUser {

}

.widthControlsDataUser {

}

.divParrafosContent1 {
    width: 55%;
    float: left;
    margin-top: 2%;
}

.divParrafosContent2 {
    width: 100%;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.divLogo {
    width: 60%;
    float: right;
    margin-top: -10%;
    position: static;
    margin-right: -80%;
}

.logoResponsive {
    width: 100%;
    height: auto;
}

.fontsizeCarousel {
    font-size: var(--fontSizeMessageSliderIndex);
    font-family: var(--fontFamilyMessageSliderIndex);
}

.dataPolicyHypervin {
    font-family: var(--fontFamilyDataPolicyHypervinIndex);
    font-size: var(--fontSizeDataPolicyHypervinIndex);
    color: var(--colorDataPolicyHypervinIndex);
}

    .dataPolicyHypervin:hover {
        color: var(--dataPolicyHypervinHoverColor) !important;
    }

.aboutUsHypervin {
    font-family: var(--fontFamilyAboutUsHypervinIndex);
    font-size: var(--fontSizeAboutUsHypervinIndex);
    color: var(--colorAboutUsHypervinIndex);
}

    .aboutUsHypervin:hover {
        color: var(--aboutHypervinHoverColor) !important;
    }

img.logoResponsive {
    width: 80%;
    height: 90%;
    float: right;
}

::-webkit-scrollbar {
    height: 18px;
    width: 18px;
}

::-webkit-scrollbar-corner {
    background-color: #fff;
    background-repeat: no-repeat;
    cursor: pointer;
}

::-webkit-scrollbar-corner {
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    border-radius: 9px;
    border: solid 6px #fff;
    background-color: #cbcfd1;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}

.invalid {
    background-color: red;
}


/* Create a custom checkbox */

.containerCheck {
    display: block;
    position: relative;
    padding-left: 4%;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 2px;
    line-height:20px;
}

/* Hide the browser's default checkbox */
.containerCheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.IndexCheck {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin-top: 2%;
    margin-right: 5px;
    border: 1px solid var(--BorderColorCheckBox);
    background-color: var(--BackGroudColorIndexCheck);
    border-bottom: 2px solid red;
    border-radius: 2px;
    transition: 240ms;
}


/* On mouse-over, add a grey background color */
.containerCheck:hover input ~ .IndexCheck {
    background-color: var(--BackgroudColorcontainerCheckHover);
}

/* When the checkbox is checked, add a blue background */
.containerCheck input:checked ~ .IndexCheck {
    background-color: var(--BackgroudColorcontainerCheck);
}

/* Create the checkmark/indicator (hidden when not checked) */
.IndexCheck:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerCheck input:checked ~ .IndexCheck:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerCheck .IndexCheck:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--BorderColorCheckBox);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


input:required + label {
    color: #000000;
}

input:required:focus:invalid {
    border-bottom: none;
}


#map {
    width: auto;
    height: 100%;
    min-height: 100%;
    border: lightgrey 4px solid;
    margin: 0.2% 0.2% 0.2% 0.2%;
}

.map {
    border: lightgrey 4px solid;
}


.map-control {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    font-family: 'Roboto','sans-serif';
    margin: 10px;
    padding-right: 5px;
    display: none;
}

/* Display the control once it is inside the map. */
#map .map-control {
    display: block;
}

.selector-control {
    font-size: 14px;
    line-height: 30px;
    vertical-align: baseline;
}



textarea {
    max-width: 100%;
    max-height: 100%;
    resize: none;
}

.upperCase {
    text-transform: uppercase;
}


.lowerCase {
    text-transform: lowercase;
}


.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/*Clase para la pagina conferencia en donde se muestra la información del turno antes de iniciar la conferencia*/
.content-1-Conferencia {
    background: var(--backgroundBodyColorEnd);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 0% 0% 1% 1%;
    -webkit-box-shadow: var(--boxShadowContent1);
    -moz-box-shadow: var(--boxShadowContent1);
    box-shadow: var(--boxShadowContent1);
    width: 100%;
    height: 100%;
    float: left;
}

.conference-title-1 {
    color: var(--titleConferenciaColor);
    font-size: 40px;
    font-weight: 800;
    font-family: var(--fontFamilyHeadquarterDetailsConferenceView);
    padding: 20px 0;
}

#myCarousel{
    height:100%;
    max-height:100%;
}

.carousel-inner{
    height:100%;
}

.TitleTurnoConferenca-1 {
    color: var(--titleTurnoConferenciaColor);
    font-size: 27px;
    font-weight: 800;
    text-align: center;
    margin: 2%;
}


.WidthSlicerConferencia {
    width: 100%;
    height: 100%;
    margin:0;
}

.conference-container-2 {
    /*background: var(--backgroundContent2Conferencia);
    border-radius: var(--conferenciaBorderRadiusContent2);
    border: var(--conferenciaBorderContent2);
    -webkit-box-shadow: var(--boxShadowContent2);
    -moz-box-shadow: var(--boxShadowContent2);*/
    box-shadow: var(--boxShadowContent2);
    /*padding: var(--paddingContent2);
    width: 100%;
    height: 100%;
    float: left;
    color: black;*/
}

.content-3-Conferencia {
    background: var(--backgroundColorConferenceViewContent3);
    /*border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;*/
    border-radius: var(--conferenciaBorderRadiusContenedorTurno);
    border: var(--conferenciaBorderContenedorTurno);
    -webkit-box-shadow: var(--boxShadowContent2);
    -moz-box-shadow: var(--boxShadowContent2);
    box-shadow: var(--boxShadowContent2);
    padding: var(--paddingContent2);
    width: 100%;
    height: 100%;
    min-height:221px;
    float: left;
    color: black;
    position: relative;
}

.content-4-Conferencia {
    background: var(--backgroundContenet4VideoC);
    /*border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;*/
    border-radius: var(--conferenciaBorderRadiusRecuadroInformacionTurno);
    border: var(--conferenciaBorderRecuadroInformacionTurno);
    -webkit-box-shadow: var(--boxShadowContent2);
    -moz-box-shadow: var(--boxShadowContent2);
    box-shadow: var(--boxShadowContent2);
    padding: var(--paddingContent2);
    width: 100%;
    height: 100%;
    float: left;
    color: black;
    position: relative;
}


.rowConferencia {
    position: relative;
    text-align: center;
    box-shadow: 4px 7px 12px rgba(0,0,0,0.3);
    position: absolute;
    margin-top: 10%;
    width: 49px;
    height: 49px;
    margin-left: 20%;
}


#rowConferencia:before {
    position: absolute;
    top: 15px;
    left: 15px;
    border: none
}

.ContenedorTurno {
    width:auto;
    margin-left: 10%;
    margin-right: 10%;
}

.ColorNumeroTurno {
    color: var(--ColorNumeroTurno);
    font-size: 46.97px;
    font-weight: 800;
    margin: 0;
    font-family: var(--fontFamilyNumberConferenceViewContent3);
}

.ColorLetraNumeroTurno {
    color: var(--ColorLetraNumeroTurno);
    font-size: 46.97px;
    font-weight: 800;
    margin: 0;
    font-family: var(--fontFamilyLettersConferenceViewContent3);
}

/*.RecuadroLetraTurno {
    font-size:70px;
}

.RecuadroNumeroTurno {
    font-size:70px;
}*/

.RecuadroCancelarTurno {
    width: initial;
    text-align: center;
    margin-bottom: 11%;
    margin-top: 11%;
    font-family: var(--fontFamilyButtonConferenceViewContent3);
}

.RecuadroInformacionTurno {
    width: auto;
    margin: 2% 5%;
}

.RecuadroLabel {
    font-size: 16px;
    font-weight: var(--conferenciaNegritaEnTextoDetalleDelTurno);
}

.labelsConferenceViewContent4 {
    color: var(--colorLabelsConferenceViewContent4);
    font-family: var(--fontFamlityLabelsConferenceViewContent4);
}

.RecuadroTexbox {
    background-color: #FFFFFF;
    border: 1px solid var(--RecuadroTexboxBorder);
    height: 35px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 2.5;
    padding-left: 10%;
    color: var(--colorTextInformationConferenceViewContent4);
    font-family: var(--fontFamlityTextInformationConferenceViewContent4);
}

#audio {
    display: none
}

.content-5-Conferencia {
    background: var(--backgroundColorMessageSliderConferenceView);
    border-radius: var(--conferenciaBorderRadiusPasaMensajesInferior);
    border: var(--conferenciaBorderPasaMensajesInferior);
    font-weight: bold;
    color: var(--colorMessageSliderConferenceView);
    font-size: var(--fontSizeContent3);
    -webkit-box-shadow: var(--boxShadowContent3);
    -moz-box-shadow: var(--boxShadowContent3);
    box-shadow: var(--boxShadowContent3);
    max-height:40px;
    width: var(--widthContent3);
    float: left;
    text-align: center;
    line-height: 20px;
    margin: 30px 0px;
    font-family: var(--fontFamilyMessageSliderConferenceView);
}

.content-6-Conferencia {
    color: var(--colorContent6Conferencia);
    font-size: var(--bodyFontSize);
    padding: 1%;
    width: initial;
    float: right;
    text-align: center;
    font-family: var(--fontFamilyConferenceViewContent6);
}

/*Video conferencia*/
.content-1-VideoConferencia {
    background-color: var(--backgroundColorContent1VideoC);
    -webkit-box-shadow: var(--boxShadowContent2);
    -moz-box-shadow: var(--boxShadowContent2);
    box-shadow: var(--boxShadowContent2);
    width: 100%;
    float: left;
    height: 415px;
}

.tituloVideoConferencia {
    background-color: var(--backgroundColorTituloVideoC);
    color: var(--ColorTituloVideoC);
    padding: 4px;
    font-size: 16px;
    font-weight: bold;
    height: 25px;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--fontFamilyTitleVideoConferenceViewContent1);
    border-radius: 2px;
    margin-bottom: 1%;
    box-shadow: 0px 0px 2px #00000066;
}


.content-2-VideoConferencia {
    -webkit-box-shadow: var(--boxShadowContent2);
    -moz-box-shadow: var(--boxShadowContent2);
    box-shadow: var(--boxShadowContent2);
    width: 100%;
    float: left;
    height: 90vh;
}

.RecuadroTurnoConferencia {
    width: inherit;
    height: 150px;
    color: white;
    float: left
}

.ColorTurnoConferencia {
    color: var(--ColorTurnoConferencia);
    font-size: 40px;
    font-family: var(--fontFamilyTurnVideoConferenceViewContent1);
    text-align: center;
    font-weight: 800;
}

.ColorTextoTurnoConferencia {
    color: var(--ColorTextoTurnoConferencia);
    font-size: 16px;
    font-family: var(--bodyFontFamily);
    margin: 2%;
}

.Espacio {
    height: 2%;
    background-color: var(--backgroundBodyColorEnd);
}

.ChatTurnoConferencia {
    background-color: var(--ChatTurnoConferenciaBackGroundColor);
    color: var(--ChatTurnoConferenciaColor);
    border: 1px solid var(--ChatTurnoConferenciaBorder);
    font-size: 14px;
    font-family: var(--bodyFontFamily);
    margin: 2%;
    padding: 2%;
    height: 40%;
    float: left;
    width: 96%;
}

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text)
}

.ChatTextoTurnoConferencia {
    background-color: var(--ChatTextoTurnoConferenciaBackGround);
    color: var(--ChatTextoTurnoConferenciaColor);
    border: 1px solid var(--ChatTextoTurnoConferenciaBorder);
    font-size: 14px;
    font-family: var(--bodyFontFamily);
    margin: 2%;
    padding: 2%;
    height: 30px;
    float: left;
    border-radius: 5px;
    width: 96%;
}

.buttonAdjuntar {
    /*background-color: var(--backgroundColorAttachButtonVideoConferenceViewContent1);
    font-family: var(--fontFamilyAttachButtonVideoConferenceViewContent1);
    border: var(--borderButtonAdjuntar);
    display: inline-block;
    cursor: pointer;
    color: var(--colorBtnAdjuntar);
    font-size: var(--fontSizeButton);
    font-weight: bold;
    padding: 6px 10px 3px 10px;
    text-decoration: none;
    -moz-box-shadow: var(--boxShadowButtonAdjuntar);
    text-shadow: none;
    height: var(--heightButton);*/
    font-size: 25px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 100%;
    padding: 5px 8px;
    margin: 0;
}

.buttonAdjuntar:hover {
    /*background-color: var(--colorHoverAttachButtonVideoConferenceViewContent1);
    color: var(--hoverColorButtonAdjuntar);
    border: var(--hoverBorderButtonAdjuntar);
    -moz-box-shadow: var(--boxShadowButtonAdjuntar);*/
}

.fa-upload{
    font-family: var(--fontFamilyAttachButtonVideoConferenceViewContent1);
}

.buttonAdjuntar:active {
    position: relative;
    top: 1px;
}



.buttonDownload {
    background-color: var(--backgroundColorDownloadButtonVideoConferenceViewContent1);
    border: var(--borderButtonAdjuntar);
    display: inline-block;
    cursor: pointer;
    color: var(--colorBtnAdjuntar);
    font-size: var(--fontSizeButton);
    font-weight: bold;
    padding: 3px 10px 3px 10px;
    text-decoration: none;
    -moz-box-shadow: var(--boxShadowButtonAdjuntar);
    text-shadow: none;
    height: var(--heightButton);
    text-align: center;
    font-family: var(--fontFamilyDownloadButtonVideoConferenceViewContent1);
    line-height: 2;
}

.buttonDownload:hover {
    background-color: var(--colorHoverDownloadButtonVideoConferenceViewContent1);
    color: var(--hoverColorButtonAdjuntar);
    border: var(--hoverBorderButtonAdjuntar);
    -moz-box-shadow: var(--boxShadowButtonAdjuntar);
}

.buttonDownload:active {
    position: relative;
    top: 1px;
}

.modal-header-conference {
    background-color: var(--modalDescargaHeaderColor);
    padding: 16px 16px;
    color: #FFF;
    border-bottom: 2px dashed #337AB7;
}

.modal-dialog-conference {
    width: 100%;
    margin: 0;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.modal1 {
    top: 30%;
}

#AVmodalTurnoArchivos {
    color: black
}

.titleConferenceViewContent3 {
    color:var(--colorTitleConferenceViewContent3);
    font-family: var(--fontFamilyTitleConferenceViewContent3);
}

.endCall
{
    background-color: var(--backgroundColorEndButtonVideoConferenceViewContent1);
    font-family: var(--fontFamilyEndButtonVideoConferenceViewContent1);
}
.endCall:hover {
    background-color: var(--colorHoverEndButtonVideoConferenceViewContent1);
}

.groupTextVideoConferenceViewContent1
{
    font-family: var(--fontFamilyGroupTextVideoConferenceViewContent1);
    color: var(--colorGroupTextVideoConferenceViewContent1);
}

.headquarterTextVideoConferenceViewContent1
{
    font-family: var(--fontFamilyHeadquarterTextVideoConferenceViewContent1);
    color: var(--colorHeadquarterTextVideoConferenceViewContent1);
}
.conten {
    position: fixed;
    top: 150px;
    right:0;
}
/*notificacion de barra*/
.notEmail {
    display: none;
    position: relative;
    width: 350px;
    height: auto;
    margin-bottom: 5px;
    padding: 3px 3px;
    border: 1px solid rgba(0,0,0,0.5);
    box-sizing: border-box;
    overflow: hidden;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    -webkit-box-shadow: 9px 5px 7px 0 rgba(0,0,0,0.3);
    box-shadow: 9px 5px 7px 0 rgba(0,0,0,0.3);
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    opacity: 1;
    animation-delay: 0s;
    border-radius: 10px;
    background-color: var(--backgroundColorFirstLayeringMessageIndexView);
    border-color: var(--backgroundColorFirstLayeringMessageIndexView);
}

.mensaje_not {
    float: right;
    width: 100%;
    height: 100%;
    text-align: justify;
    font-size: 0.9em;
    color: #000000;
    margin-top: 25px;
    font-family: Roboto;
    font-size: 18px;
    background-color: var(--backgroundColorSecondLayeringMessageIndexView);
    border-radius:10px;
    padding:25px;
}

.notEmail> img {
    max-width:120px;
    position:fixed;
    margin-top:-55px;
    right: var(--iconHorizontalPositionIndexView);
}

@keyframes slideIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

a:hover
{
    text-decoration:none;
}

a:visited{
    text-decoration:none;
}

a:focus{
    text-decoration:none;
}

.card{
    height:100%;
}

.detailTurn {
    border: 1px solid #000000;
    margin: 5px 20px;
    border-radius: 20px;
}

.without-margin{
    border:unset;
}

.first-text-message-title{
    color: var(--colorFirstTextMessageTitleIndexView);
    font-family: var(--fontFamilyFirstTextMessageTitleIndexView);
    font-style: var(--fontStyleFirstTextMessageTitleIndexView);
}

.second-text-message-title {
    color: var(--colorSecondTextMessageTitleIndexView);
    font-family: var(--fontFamilySecondTextMessageTitleIndexView);
    font-style: var(--fontStyleSecondTextMessageTitleIndexView);
    margin-top: -15px;
}

.message-content {
    font-family: var(--fontFamilyMessageContentIndexView);
    color: var(--colorMessageContentIndexView);
}

.conference-tabs {
    color: #A3181D;
}

.conference-tabs:hover {
    color: #A3181D;
}

.main-container{
    min-height: 94vh;
}

.slider-message-conference-view {
    font-size: var(--conferenciaMensajesInferioresTamañoTexto) !important;
    height: 40px;
}

.aceptar-terminos-condiciones-content{
    margin-top:10px;
}

.aceptar-terminos-checkbox {
    display: inline-block;
}

.paragraph {
    display: inline;
    color: black;
}

.asterisk {
    font-size: 20px;
    /*border-bottom-right-radius: 9px;*/
    /*border-top-right-radius: 9px;*/
    background-color: var(--backgroundColorTexbox);
    /*border: none;*/
    box-shadow: inset 0 -1px 0 #ddd;
    border: var(--borderTexboxIndexFormulario);
    height: 40px;
    border-left: none;
    box-shadow: none;
}

.asterisk-conditions {
    font-size: 20px;
    display: inline;
}

.nav-controls-videoconference {
    font-size: 20px;
    box-shadow: none;
    height: 100%;
}

.jitsiHeight {
    min-height:90vh;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.modal-videoconference-configuration {
    background-color: var(--backgroundColorTextTitleAudioVideoModalConfiguration);
    overflow-y: hidden !important;
}

.grecaptcha-badge {
    visibility: collapse !important;
}

.footer-row{
    width:100%;
    margin:0;
}

.footer-item{
    padding-top: 5px;
    padding-bottom: 5px;
}

.icon-configuration-audio-video-conference {
    font-size: 25px;
    color: #000000;
    padding-right:0;
}

.modal-footer {
    justify-content: center;
}

.button-configuration-audio-video-conference {
    width: 40px;
    box-shadow: none;
    padding: 0;
}

.close-download-modal {
    width: var(--modalDescargaBottonCancelWidth);
    font-size: 12px;
    height: 30px;
    background-color: var(--modalDescargaBottonCancelColor);
    border-radius: var(--modalDescargaBottonCancelBorderRadius);
    border: var(--modalDescargaBottonCancelBorder);
    color: var(--modalDescargaBottonCancelColorText);
}

.close-download-modal:hover {
    background-color: var(--modalDescargaBottonCancelColorHover);
    color: var(--modalDescargaBottonCancelColorTextHover);
    border: var(--modalDescargaBottonCancelBorderHover);
}

.download-button-icon-modal{
    font-size:20px;
    cursor:pointer;
}

input[type="checkbox"]:checked:after, .checkbox input[type="checkbox"]:checked:after, .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: var(--checkboxCheckedBackgroundColor) !important;
    border-color: var(--checkboxCheckedBorderColor) !important;
}

input[type="checkbox"]:focus:after, .checkbox input[type="checkbox"]:focus:after, .checkbox-inline input[type="checkbox"]:focus:after {
    border-color: #BF211B;
}

input[type="checkbox"]:after, .checkbox input[type="checkbox"]:after, .checkbox-inline input[type="checkbox"]:after {
    border: var(--checkboxBorderColor) !important;
    background-color: var(--checkboxBackgroundColor) !important;
}

.card-collapse{
    border: none;
}

.subtitle-conference-card {
    font-size: var(--conferenciaTamañoTextoSubtitulo) !important;
    color: var(--conferenciaColorTextoSubtitulo) !important;
}

.assigned-turn {
    font-size: 64px;
    color: #7C7C7C;
    font-weight: 800;
}

.conference-shared-style{
    padding: 10px 0;
}

.conference-container-cancel-button {
    margin-top: 30px;
}

.separator{
    border-right: 1px solid gray;
}

.turn-information-container{
    padding-bottom:20px;
}

.controls-nav-container {
    height: 10vh;
    background-color: var(--videoConferenciaNavbarBackground);
}

.nav-item{
    margin:0;
    padding:0;
}

.btn:focus, .btn.focus{
    outline:none !important;
    box-shadow:none !important;
}

ul.nav {
    height:100%;
}

.nav > li > a{
    padding:5px 8px;
}

.ml-auto {
    width: var(--videoConferenciaHeaderTamañoLogo);
}

#conference-description-group {
    padding-right: 10%;
    padding-left: 10%;
    color: var(--conferenciaColorTextoGrupo) !important;
    font-size: var(--conferenciaTamañoTextoGrupo) !important;
}

.turn-express-videoconference-view {
    padding: 0;
    margin: 0;
    height: 100vh;
}

.company-text-color {
    color: #BF211B;
}

.bg-company-color {
    background-color: #BF211B;
}

.text-black {
    color: #000000;
}

.welcome-title-container {
    margin-top: 2%;
}

.welcome-subtitle-container {
    margin-bottom: 2%;
}

#configuration_modal_content {
    border: none;
    box-shadow: none;
    background-color: var(--backgroundColorTextTitleAudioVideoModalConfiguration);
}

#staticBackdropLabel {
    color: var(--colorTextTitleAudioVideoModalConfiguration);
    font-weight: unset;
}

#configuration_modal_header {
    border-bottom: none;
}

#subtitle_configuration_modal_body {
    color: var(--colorTextSubtitleAudioVideoModalConfiguration);
}

#configuration_modal_footer {
    border: none;
    background-color: var(--conferenciaModalBackgroundColorDispositivos) !important;
}

#icon_configuration_modal {
    width: 30%;
    margin: 20px 0px;
}

.button-enter-videoconference {
    width: 70px;
    box-shadow: none;
    padding: 0;
}

.container-fluid, #video_configuration_container, #audio_configuration_container {
    padding: 0;
}

.swal2-popup {
    font-size: 15px !important;
}

.swal-button--cancel {
    background-color: var(--swalBottonCancelColor);
    border-radius: var(--swalBottonCancelBorderRadius);
    border: var(--swalBottonCancelBorder);
    width: var(--swalBottonCancelWidth);
    color: var(--swalBottonCancelColorText);
}

.swal-button--cancel:hover {
    background-color: var(--swalBottonCancelColorHover);
    border: var(--swalBottonCancelBorderHover);
    color: var(--swalBottonCancelColorTextHover);
}

.swal-button--confirm {
    background-color: var(--swalBottonConfirmColor);
    border-radius: var(--swalBottonConfirmBorderRadius);
    border: var(--swalBottonConfirmBorder);
    width: var(--swalBottonConfirmWidth);
    color: var(--swalBottonConfirmColorText);
}

.swal-button--confirm:hover {
    background-color: var(--swalBottonConfirmColorHover);
    border: var(--swalBottonConfirmBorderHover);
    color: var(--swalBottonConfirmColorTextHover);
}

.swal-button--danger {
    background-color: var(--swalBottonDangerColor);
    border-radius: var(--swalBottonDangerBorderRadius);
    border: var(--swalBottonDangerBorder);
    width: var(--swalBottonDangerWidth);
    color: var(--swalBottonDangerColorText);
}

.swal-button--danger:hover {
    background-color: var(--swalBottonDangerColorHover);
    border: var(--swalBottonDangerBorderHover);
    color: var(--swalBottonDangerColorTextHover);
}

input[type="radio"]:checked:after, .radio input[type="radio"]:checked:after, .radio-inline input[type="radio"]:checked:after {
    border-color: #BF211B;
}

input[type="radio"]::before, .radio input[type="radio"]::before, .radio-inline input[type="radio"]::before {
    background-color: #BF211B;
}

/*Media Query*/
@media screen and (max-width:767px) {
    .conference-view-message {
        margin-top: 30px;
    }

    .separator {
        border-right: none !important;
        border-bottom: 1px solid gray;
    }

    .turn-information-container {
        padding: 0px 25px;
    }

    #seek-bar {
        margin-left: 5px !important;
    }
}

@media screen and (max-width:375px){
    .nav > li > a {
        padding: 5px 2px !important;
    }
}

@media screen and (max-width: 1300px){
    .conten{
        display:none;
    }
}


/*modal de configuracion de dispositivos*/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 380px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
    background-color: var(--videoConferenciaModalConfiguracionBodyColor)
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

#modalDispositivos .modal-header {
    border-bottom-color: var(--videoConferenciaModalConfiguracionHeaderColor);
    background-color: var(--videoConferenciaModalConfiguracionHeaderColor);
}

.sourceDispositivos {
    color: var(--videoConferenciaListaDispositivosTextColor);
    width: 350px;
    height: 38px;
    background-color: var(--videoConferenciaListaDispositivosBackgroundColor);
    border-radius: 4px;
    padding: 8px;
}

.modal-header {
    float: left!important;    
}

.dropdown-item {
    font-size: 15px;
    color: var(--videoConferenciaDropdownTextColor);
}

.dropdown-menu {
    background-color: var(--videoConferenciaDropdownBackgroundColor);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--videoConferenciaDropdownTextColorHover);
}

.dataTables_scrollHeadInner, table.no-footer {
    width: 100%;
}

.vision-quality-container {
    width: 100vw;
    height: 100vh;
}