` o `
```
```html
Cabecera no mobile
Contenido
```
```html
Contenido 1
Contenido 2
Contenido 3
```
## Ejemplos
```html_example
```
```html_example
Contenido 1
Contenido 2
Contenido 3
```
```html_example
Cabecera no mobile
Contenido
```
```html_example
Contenido 1
Contenido 2
Contenido 3
```
# Javascript
Para iniciar el componente automáticamente debe declararse el atributo `data-accordion` en el padre.
# Modificadores
### Acordeón contenido visible: `data-active` en el desplegable
### Asignar activo
Se debe indicar mediante el atributo ` data-active` en el padre.
Se coloca el modificador en un desplagable `
` de esta manera.
```html_example
```
### Múltiple
Se debe indicar mediante el atributo `data-multiple` en el padre para que varios contenedores se puedes abrir a la vez.
```html_example
Cabecera 1
Contenido 1
Cabecera 2
Contenido 2
Cabecera 3
Contenido 3
```
*/
.accordion--process-xs .accordion__item {
border-top: 1px solid #EBEEF5;
border-bottom: 1px solid #EBEEF5;
padding: 0 24px; }
@media (min-width: 768px) {
.accordion--process-xs .accordion__item {
padding: 0;
border-top: none;
border-bottom: none; } }
.accordion--process-xs .accordion__item.active {
border-top: 3px solid #3E4A50;
border-bottom: 3px solid #3E4A50; }
.accordion--process-xs .accordion__item:focus-within {
box-shadow: inset 0 0 0 3px #3E4A50; }
.accordion--process-xs .accordion__header {
padding: 24px 0;
color: #191B1C; }
.accordion--process-xs .accordion__header:hover {
color: #191B1C; }
.accordion--process-xs .accordion__body {
padding-bottom: 16px; }
@media (max-width: 575.98px) {
.accordion--process-xs {
margin-left: -25px;
margin-right: -25px; } }
[data-accordion-item-body] {
display: none; }
[data-accordion-item-header] .pictoDSL,
[data-accordion-item-header] .icon {
will-change: transform;
transform: rotate(0deg);
transition-property: transform;
transition-duration: 0.166s;
transition-delay: 0s;
transition-timing-function: ease-out; }
[data-accordion-item].active [data-accordion-item-body] {
display: block; }
[data-accordion-item].active [data-accordion-item-header] .pictoDSL,
[data-accordion-item].active [data-accordion-item-header] .icon {
transform: rotate(180deg); }
[data-accordion-item].active [data-accordion-item-header] .pictoDSL-plus-16,
[data-accordion-item].active [data-accordion-item-header] .icon--plus-16 {
transform: rotate(135deg); }
[data-accordion-item].active [data-accordion-item-header].accordion--light .icon {
transform: rotate(0deg);
color: #191B1C;
background-color: #EFF3FF; }
[data-accordion-item].active [data-accordion-item-header].accordion--light .icon--plus-16 {
transform: rotate(90deg);
content: "\e928"; }
[data-accordion-item].active [data-accordion-item-header].accordion--light .icon--plus-16:before {
transform: rotate(90deg);
content: "\e928"; }
[data-accordion-item] [data-accordion-item-header].accordion--light .icon {
color: #191B1C;
background-color: #EFF3FF;
border-radius: 4px;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer; }
[data-accordion-item] .process-heading__title {
line-height: 27px; }
[data-accordion-item] .process-heading__line {
width: 32px;
margin-top: 2px; }
[data-accordion-item] [data-accordion-item-header].accordion--light:hover .icon {
background-color: #D9E4FF; }
[data-accordion-item] [data-accordion-item-header].accordion--light:hover .icon {
box-shadow: inset 0 0 0 4px #AFB5C8; }
/*md
# Select
## Descripción
El bloque `.select` representa un elemento de selección de opciones que agrupa por un lado el control nativo de formulario, la etiqueta y el icono,
y por otro, una carátula generada por funcionalidad que recibe el aspecto visual y que comunica la interacción con el control nativo.
Se compone de los siguientes elementos:
* `label`: etiqueta HTML `
` del control.
* `select`: control de formulario, etiqueta HTML ``.
* `.select__custom-select`: carátula que agrupa el elemento que despliega y el menú desplegable.
* `.select__expand-button`: elemento que agrupa al `.select__label` y al `.icon` y que recibe la interacción que despliega o pliega la lista de opciones.
* `.select__label`: elemento que representa la etiqueta del componente generado y que recibe programáticamente el contenido del label nativo.
* `.icon`: icono del desplegable.
* `.select__custom-select-menu`: menú de opciones generadas programáticamente.
* `.select__custom-option`: cada una de las opciones generadas a partir de los option nativos.
Y tiene los siguientes modificadores:
* `.select--is-error`: indica que el control tiene un valor erróneo.
* `.select--disabled`: indica que el control está deshabilitado. Debe ir de la mano con el atributo HTML `disabled`, aplicado al select nativo.
### Variaciones según atributos HTML
* `selected`: aplicado a un option nativo, indica que hay un valor inicial seleccionado.
* `multiple`: aplicado al select nativo, indica que se puede seleccionar más de una opción.
* `disabled`: aplicado al select nativo, indica que el elemento está deshabilitado. Debe ir de la mano con la clase modificadora `.select--disabled`.
* `data-search="data-search"`: se aplica al div con clase `.select`. A partir de este atributo, se generará el select predictivo: input text y toda la funcionalidad para el filtrado de búsqueda.
* `data-search-no-results="No hay resultados para "`: se aplica al div con clase `.select`. A partir de este atributo, se genera el div que se muestra cuando no hay resultados que coincidan con la búsqueda.
* `data-account-simple`: aplicado al select nativo, indica que el select de cuenta muestra directamente las cuentas con el icono amarillo, sin textos divisorios ni cuentas recientes con icono azul.
* `data-link`: aplicado al select nativo, indica que el select de cuenta muestra un bloque con enlaces antes de las cuentas seleccionables. Requiere de un div adicional en la estructura.
## Estructura
El siguiente etiquetado es la **estructura generada** por javascript:
```html
Básico con título flotante
```
## Javascript
Para iniciar el componente automáticamente debe declararse el atributo `data-select` en el elemento con la clase `.select`.
Esto construye la estructura citada anteriormente, enlazada con el select y options
Si fuera necesario inicializar el componente una vez cargado el DOM, hay que crear una nueva instancia con `new BkComponents.Select(selector)`,
donde selector será la etiqueta del DOM sobre la que se quiere inicializar el componente (con clase `.select`, atributo `data-select`, ID, etc).
## Modificadores
A continuación se exponen algunas de las variantes obtenidas a partir de los modificadores, que se podrán combinar entre sí para obtener más variantes.
### Básico
```html_example
Básico con título flotante
Option 1
Option 2
Option 3
Option 4
```
### Con opción seleccionada al inicio
Se debe indicar mediante el atributo `selected` en la etiqueta option nativa que corresponda.
```html_example
Con opción seleccionada al inicio
Option 1
Option 2
Option 3
Option 4
```
### Básico con error
Se debe indicar mediante la clase `.select--is-error` en el componente.
```html_example
```
### Múltiple
Se debe indicar mediante el atributo `multiple` en la etiqueta select nativa.
```html_example
Múltiple
Option 1
Option 2
Option 3
Option 4
```
### Disabled
Se debe indicar mediante el atributo `disabled` en la etiqueta select nativa.
```html_example
Disabled
Option 1
Option 2
Option 3
Option 4
```
### Opción con icono
```html_example
Opciones con icono
Español
Catalán
Inglés
```
### Desplaza el siguiente contenido
Esta opción estará disponible hasta que se libere la nueva versión con el dropdown generado en el body.
Con esto se soluciona el problema del overflow cuando el elemento está contenido en una etiqueta con overflow="hidden"
```html_example
Desplaza el siguiente contenido
Option 1
Option 2
Option 3
Option 4
```
### Select predictivo
```html_example
Select predictivo
Option 1
Option 2
Option 3
Option 4
```
### Select de cuenta simple
```html_example
Origen
Contabilidad
Pago proveedores
Recibos nodomiciliados
Recibos domiciliados
Nóminas
```
### Select de cuenta con enlaces
```html_example
Por refactorizar
Contabilidad
Pago proveedores
Recibos nodomiciliados
Recibos domiciliados
Nóminas
```
### Select de grupo con título y link
```html_example
Por refactorizar
Contabilidad
Pago proveedores
Recibos nodomiciliados
Recibos domiciliados
Nóminas
```
### Select de grupo sin título y sin link
```html_example
Por refactorizar
Contabilidad
Pago proveedores
Recibos nodomiciliados
Recibos domiciliados
Nóminas
```
*/
.select__custom-select:focus {
box-shadow: 0 0 0 4px rgba(160, 173, 184, 0.16); }
.select {
font-family: "BK-Sans";
font-size: 14px;
color: #5c6780;
position: relative; }
.select.select--is-error .select__error {
display: block; }
.select.select--is-error .select__expand-button {
border: 1px solid #DB2A21; }
.select.select--disabled .select__expand-button {
border: 1px solid rgba(175, 181, 200, 0.2);
cursor: not-allowed; }
.select.select--disabled .select__expand-button:focus {
outline: none !important; }
.select.select--disabled .select__expand-button .select__selected-option {
color: #5c6780;
opacity: 0.6; }
.select.select--disabled .select__expand-button .select__label,
.select.select--disabled .select__expand-button .icon {
opacity: 0.6;
color: #5c6780; }
.select.select--disabled .select__expand-button.select--has-content .select__label,
.select.select--disabled .select__expand-button.select--has-content .icon {
opacity: 0.6;
color: #5c6780; }
.select.select--position-static .select__custom-select-menu {
position: static;
transform: translateY(0); }
.select .select__label {
position: absolute;
left: 16px;
top: 50%;
transform: translate(0, -50%);
transition: top .123s; }
.select.select--has-content {
position: relative; }
.select.select--has-content .select__label {
line-height: normal;
display: block;
font-weight: 900;
text-transform: uppercase;
color: #191B1C;
position: absolute;
top: 10px;
font-size: 12px;
transform: translate(0, 0);
letter-spacing: 1px; }
.select.select--has-content .select__selected-option {
line-height: normal;
bottom: 6px;
transform: translate(0, 0); }
.select .ss-wrapper {
height: 100%;
width: 100%;
float: left;
display: block; }
.select .ss-content {
display: block;
height: 100%;
position: relative;
width: 100%;
overflow: auto;
padding-right: 0 !important; }
.select label,
.select select {
position: absolute;
left: -9999px; }
.select__expand-button {
width: 100%;
border: 1px solid #AFB5C8;
background-color: #FFF;
border-radius: 4px;
height: 60px;
line-height: 60px;
padding: 0 16px;
position: relative;
cursor: pointer;
box-sizing: border-box; }
.select__expand-button:focus {
box-shadow: 0 0 0 4px #f0f2f3;
outline: none; }
.select__expand-button .icon {
position: absolute;
right: 16px;
top: 50%;
transform: translate(0, -50%); }
.select__expand-button.select--has-content {
position: relative;
line-height: normal; }
.select__expand-button.select--has-content .select__label {
display: none; }
.select__update .select__custom-select .select__expand-button {
min-height: 85px; }
.select__update .select__custom-select .select__expand-button:focus {
box-shadow: 0 0 10px 3px #EBEEF5; }
@media (max-width: 991.98px) {
.select__update .select__custom-select .select__expand-button {
min-height: auto;
height: 47px; } }
.select__update.select__update--editheight .select__expand-button {
min-height: auto;
height: 47px; }
.select__selected-option {
position: absolute;
bottom: 50%;
transform: translate(0, 50%);
left: 16px;
right: 50px;
color: #5c6780;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.select__custom-select--open .select__expand-button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: transparent; }
.select__custom-select--open .select__expand-button .icon {
transform: rotate(-180deg);
top: 30%; }
.select__custom-select-menu {
position: absolute;
width: 100%;
margin: 0;
border-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: 1px solid #AFB5C8;
background-color: #FFF;
z-index: 100;
height: 194px;
padding: 0;
padding-right: 24px;
top: 116px; }
.select__custom-select-menu.select__custom-select-menu--no-scroll {
padding-right: 0;
max-height: 360px; }
.select__custom-select-menu .select__custom-option {
min-height: 64px;
padding: 16px;
border-bottom: 1px solid #EBEEF5;
position: relative;
cursor: pointer; }
.select__custom-select-menu .select__custom-option:hover {
background-color: #F7FAFF;
outline: none; }
.select__custom-select-menu .select__custom-option:focus {
border: 1px solid #AFB5C8 !important;
background-color: #FFF !important;
box-shadow: 0 0 0 4px rgba(160, 173, 184, 0.16);
color: #191B1C; }
.select__custom-select-menu .select__custom-option.select__custom-option--active .select__name-info__selected {
position: absolute;
background-color: #B5F0EF;
display: flex;
align-items: center;
justify-content: center;
color: #191B1C; }
.select__custom-select-menu .select__custom-option.select__custom-option--active .select__name-info--yellow .select__name-info__selected {
background: #FEE997; }
.select__custom-select.select__custom-select--open .wrapper-select__search {
padding-top: 8px;
height: 56px;
background-color: #FFF;
box-shadow: 0px 9px 9px 3px #EBEEF5; }
.wrapper-select__search {
position: absolute;
top: 60px;
right: 0px;
bottom: 0;
left: 0;
z-index: 111; }
@media (max-width: 991.98px) {
.select--dropdown {
max-width: 320px; } }
.select--dropdown .wrapper-select__search {
top: 32px; }
.select--dropdown .wrapper-select__search {
padding-top: 0 !important;
padding-bottom: 6px; }
.select--dropdown .select__search {
box-shadow: none !important;
border-radius: 4px;
margin: 4px 8px; }
.select--dropdown .wrapper-select__search + .select__custom-select-menu {
top: 85px; }
.select--dropdown .wrapper-select__search.d-none + .select__custom-select-menu {
top: 37px !important; }
.select__account-links {
top: 60px; }
.select__account-links + .wrapper-select__search {
top: 196px; }
@media (max-width: 991.98px) {
.select__account-links + .wrapper-select__search {
top: 164px; } }
.select--group .select__custom-option {
height: 48px !important;
min-height: auto !important; }
@media (min-width: 992px) {
.select--group .select__custom-option {
height: 64px !important; } }
.select--group.select .select__account-alias {
margin-top: 0; }
.select--group .select__account-links + .wrapper-select__search {
top: 132px; }
@media (max-width: 991.98px) {
.select--group .select__account-links + .wrapper-select__search {
top: 116px; } }
.select--group .select__account-links + .wrapper-select__search + .select__custom-select-menu {
top: 188px;
height: 238px; }
@media (max-width: 991.98px) {
.select--group .select__account-links + .wrapper-select__search + .select__custom-select-menu {
top: 172px; } }
.select--group.select--group-empresas .select__name-info {
background-color: #FEE997; }
.select--group.select--group-empresas .select__custom-option--active .select__name-info {
background-color: #FED430; }
@media (max-width: 991.98px) {
.select--group .select__name-info {
top: inherit !important; } }
.select__account-links + .wrapper-select__search + .select__custom-select-menu {
top: 252px;
height: 168px; }
@media (max-width: 991.98px) {
.select__account-links + .wrapper-select__search + .select__custom-select-menu {
top: 220px; } }
.wrapper-select__search + .select__search[hidden="true"] + .select__custom-select-menu {
position: static; }
.select--search .select__custom-select--open .wrapper-select__search + .select__custom-select-menu {
height: 156px;
padding-top: 16px;
z-index: 999; }
.select__expand-button + .select__custom-select-menu {
top: 60px; }
.select.select--search .select__custom-select-menu .select__custom-option {
min-height: 48px;
padding: 8px 16px;
display: flex;
align-items: center; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.select.select--search .select__custom-select-menu .select__custom-option {
height: 48px; } }
.select.select--search .select__custom-select-menu .select__custom-option.select__custom-option--active {
background: transparent;
color: #191B1C; }
.select.select--search .select__custom-select-menu .select__custom-option.select__custom-option--active:after {
font-family: 'BK-icons';
content: '\e90c';
color: #191B1C;
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
position: absolute;
right: 8px;
top: 50%;
transform: translate(0, -50%); }
.select[data-select] .select__custom-select-menu.select__custom-select-menu--no-scroll .select__custom-option.select__custom-option--active:after {
right: 8px; }
.select[data-select] .select__custom-select-menu .select__custom-option.select__custom-option--active {
background: transparent;
color: #191B1C; }
.select[data-select] .select__custom-select-menu .select__custom-option.select__custom-option--active:after {
font-family: 'BK-icons';
content: '\e90c';
color: #191B1C;
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%); }
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--active {
background-color: transparent; }
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--active [class^="img-bank-"],
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--active [class*="img-bank-"] {
background-image: none; }
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--active [class^="img-bank-"]:after,
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--active [class*="img-bank-"]:after {
font-family: 'BK-icons';
content: '\e90c';
color: #191B1C;
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
top: 50%;
text-indent: 0; }
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--oneline {
display: flex;
align-items: center; }
@media (max-width: 991.98px) {
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--oneline .img-bank {
top: 0px; } }
.select.select--account .select__custom-select-menu .select__custom-option.select__custom-option--oneline[hidden="true"] {
display: none; }
.select.select--account.select--no-icon .select__custom-select-menu .select__custom-option.select__custom-option--active {
background-color: #EBEEF5; }
.select .select__custom-select-menu .select__custom-option.select__custom-option--active {
background-color: #EBEEF5; }
.select--account.select--no-icon.select--border .select__custom-select--open .select__expand-button {
z-index: 0; }
.select--account.select--no-icon .select__custom-select-menu .ss-content {
width: 100%;
padding-right: 0 !important; }
.select--account.select--no-icon .select__custom-select-menu.select__custom-select-menu--no-scroll {
padding-right: 0; }
.select--account.select--no-icon .select__custom-select-menu.select__custom-select-menu--no-scroll .ss-content {
width: 100%;
padding-right: 0; }
.select--account.select--no-icon .select__custom-select-menu.select__custom-select-menu--no-scroll .select__custom-option:last-of-type {
padding-bottom: 0; }
@media (max-width: 991.98px) {
.select--account.select--no-icon .select__custom-select-menu .select__custom-option {
display: block; } }
.select--account.select--no-icon .select__custom-select-menu .select__custom-option.select__custom-option--active {
background-color: #EBEEF5; }
.select--account.select--no-icon .select__custom-select-menu .select__custom-option.select__custom-option--active .select__account-number {
color: #191B1C; }
@media (max-width: 991.98px) {
.select--account.select--no-icon .select__custom-select-menu .select__custom-option.select__custom-option--active .select__account-number {
display: block;
letter-spacing: 0; } }
.select--account.select--no-icon .select__custom-select-menu .select__custom-option.select__custom-option--active .select__account-saldo {
color: #191B1C; }
@media (max-width: 991.98px) {
.select--account.select--no-icon .select__custom-select-menu .select__custom-option.select__custom-option--active .select__account-saldo {
display: block; } }
.select.select--search.select-check .select__custom-select-menu.select__custom-select-menu--no-scroll {
padding-right: 0;
height: auto; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option {
padding-left: 58px; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option:hover, .select.select--search.select-check .select__custom-select-menu .select__custom-option:focus {
outline: none; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option:before {
content: '';
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid rgba(104, 112, 126, 0.6);
background-color: #FFF;
position: absolute;
left: 18px;
color: transparent;
text-align: center; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option:after {
font-family: 'BK-icons';
content: "\e9c3";
font-size: 0;
position: absolute;
height: 14px;
width: 14px;
border-radius: 3px;
top: 17px;
left: 23px;
text-align: center;
line-height: initial;
right: auto;
transform: none; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option.select__custom-option--active {
color: #191B1C;
background-color: transparent; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option.select__custom-option--active:after {
background-color: #FF821C; }
.select.select--search.select-check .select__custom-select-menu .select__custom-option.select__custom-option--active.select__custom-option--active-allchecked:after {
content: "\e9ca";
background-color: transparent;
font-size: 14px;
color: #FF821C;
left: 23px;
transform: none; }
.select.select--search.select-check.select--no-border .select__custom-option {
border: none; }
.select.select--search.select-check.select--no-border .select__search {
border: none; }
.select__error {
position: absolute;
top: 102%;
color: #DB2A21;
font-weight: bold;
font-size: 13px;
text-align: right;
width: 100%;
display: none; }
.select__error.select__error--position-rel {
top: auto;
position: relative;
margin-top: -13px; }
.select__link {
width: 100%;
margin-top: 7px; }
.select__link a {
font-weight: bold;
font-size: 13px;
text-align: right;
float: right;
color: #191B1C; }
.select__icon {
vertical-align: middle; }
.select--no-border .select__custom-select--open .select__expand-button {
border: 1px solid #AFB5C8; }
.select--no-border .select__custom-select-menu {
border: none;
box-shadow: 0 9px 9px 3px #EBEEF5; }
.select--no-border .select__custom-option {
border-bottom: none; }
.select--search .select__custom-select-menu {
border-top: none; }
.select--search .wrapper-select__search {
border-right: 1px solid #AFB5C8;
border-left: 1px solid #AFB5C8; }
.select--search.select--no-border .wrapper-select__search {
border-right: none;
border-left: none; }
.select--account .select__account-links + .select__search {
margin-top: 0; }
.select__search {
position: relative;
padding: 12px 57px 12px 16px;
background-color: #EFF3FF;
margin: 0 8px;
height: 48px;
border-radius: 4px; }
.select__search-input {
width: 100%;
height: 100%;
border: none;
color: #5c6780;
background: transparent; }
.select__search-input:focus {
outline: none; }
.select__search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%); }
.select__search-no-results {
height: 180px;
padding: 24px; }
.data-search-no-results__label {
color: #191B1C; }
@media (max-width: 991.98px) {
.select--figures .select__expand-button {
height: 75px; } }
@media (max-width: 991.98px) {
.select--figures .wrapper-select__search {
top: 75px; } }
@media (max-width: 991.98px) {
.select--figures .select__custom-select-menu {
top: 131px; } }
.select--figures .select__selected-option {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap; }
@media (max-width: 991.98px) {
.select--figures .select__selected-option {
display: block; } }
.select--figures .select__custom-option {
display: flex;
justify-content: space-between; }
@media (max-width: 991.98px) {
.select--figures .select__custom-option {
flex-direction: column; } }
.select--figures .select__selected-info {
font-weight: 700;
color: black;
margin-right: 16px; }
@media (max-width: 991.98px) {
.select--figures .select__selected-info {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 0;
display: block; } }
.select .select__custom-option:last-of-type {
margin-bottom: 16px; }
@media (max-width: 991.98px) {
.select--account.select--account-saldo .select__name-info,
.select--account.select--account-saldo .img-bank {
position: relative;
top: 12px; } }
.select--account.select--bizum .select__account-alias {
margin-top: 4px; }
@media (max-width: 1199.98px) {
.select--account.select--bizum .select__account-alias {
margin-top: 2px; } }
.select--account.select--bizum .select__custom-select-menu--no-scroll .select__account-icon {
right: 16px; }
.select--account.select--bizum .select__account-icon {
position: absolute;
bottom: 16px;
right: 8px; }
.select--account.select--bizum .select__account-icon span:last-child {
margin-left: 8px; }
.select--account.select--favorita-confianza .select__custom-option {
padding: 8px 16px;
line-height: inherit;
color: #191B1C; }
.select--account.select--favorita-confianza .select__custom-option .select__account-icon {
position: absolute;
bottom: 14px;
right: 0; }
.select--account.select--favorita-confianza .select__custom-option .select__account-icon span:last-child {
margin-left: 8px; }
.select--account.select--favorita-confianza .select__custom-option .select__account-icon .icon--starFill-16:before {
content: "\e96f";
color: #FED430; }
@media (max-width: 767.98px) {
.select--account.select--favorita-confianza .select__custom-option .select__account-icon {
right: 16px;
position: absolute;
top: 12px; } }
@media (max-width: 767.98px) {
.select--account.select--favorita-confianza.select--dropdown .select__custom-select-menu--no-scroll .select__account-icon {
right: 16px;
position: absolute;
top: 14px; } }
.select--account.select--favorita-confianza.select--dropdown .select__account-alias {
margin-top: 8px; }
@media (max-width: 767.98px) {
.select--account.select--favorita-confianza.select--dropdown .select__account-icon {
right: 0;
position: absolute;
top: 14px; } }
@media (max-width: 575.98px) {
.select--account.select--favorita-confianza.select--dropdown .select__account-number {
letter-spacing: -.4px !important; } }
@media (max-width: 991.98px) {
.select--account.select--favorita-confianza.select--dropdown .select__account-number {
letter-spacing: 0; } }
@media (min-width: 992px) {
.select--account.select--favorita-confianza.select--dropdown .select__account-number {
letter-spacing: 1px; } }
.select--account .select__custom-option {
padding: 8px 16px;
border-bottom: none;
color: #191B1C;
border: 1px solid transparent; }
.select--account .select__custom-no-name-info {
line-height: 18px; }
.select--account .select__custom-no-name-info .select__account-alias {
margin-top: 6px; }
.select--account .select__custom-no-name-info .select__account-saldo {
bottom: 10px; }
.select--account .select__account-number {
font-size: 12px;
color: #5c6780; }
@media (max-width: 575.98px) {
.select--account .select__account-number {
letter-spacing: -.03em; } }
.select--account .select__account-selected {
color: #5c6780;
line-height: 75px;
font-size: 14px; }
.select--account.select--combinado .select__name-info {
background-color: #FEE997; }
.select--account .select__name-info {
font-size: 14px;
height: 48px;
width: 48px;
background-color: #D3F6F5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #191B1C;
float: left;
margin-right: 16px; }
@media (max-width: 991.98px) {
.select--account .select__name-info {
height: 32px;
width: 32px;
margin-right: 8px;
position: relative;
top: 8px; } }
.select--account .select__name-info--yellow {
background-color: #FEE997; }
.select--account .select__name-info--grey {
background-color: #EFF3FF; }
.select--account .select__name-info--divisa {
color: #5c6780;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin-left: 40px; }
@media (min-width: 576px) {
.select--account .select__name-info--divisa {
position: absolute;
bottom: 14px;
right: 16px; } }
@media (max-width: 991.98px) {
.select--account.select--combinado .wrapper-select__search {
top: 75px; } }
@media (max-width: 991.98px) {
.select--account.select--combinado .wrapper-select__search + .select__custom-select-menu {
top: 131px; } }
@media (max-width: 991.98px) {
.select--account.select--combinado .select__custom-select-menu {
top: 75px; } }
@media (max-width: 991.98px) {
.select--account.select--combinado .select__expand-button {
height: 75px; } }
.select--account.select--combinado .select__custom-option--active .select__name-info {
background-color: #FED430; }
.select--account.select--combinado .select__account-selected {
display: flex;
justify-content: space-between; }
@media (max-width: 991.98px) {
.select--account.select--combinado .select__account-selected {
display: block; }
.select--account.select--combinado .select__account-selected span {
display: block; } }
.select--account.select--combinado .select__account-selected .select__selected-info {
font-weight: bold;
color: #191B1C; }
.select--account .select__custom-option--active .select__name-info {
background-color: #B5F0EF;
position: relative;
text-indent: -9999px; }
.select--account .select__custom-option--active .select__name-info.select__name-info--grey {
background-color: #D9E4FF; }
.select--account .select__custom-option--active .select__name-info:after {
font-family: 'BK-icons';
content: '\e90c';
color: #191B1C;
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
top: 50%;
text-indent: 0; }
.select--account .select__custom-option--active .select__name-info--yellow {
background-color: #FED430; }
.select--account .select__name-section {
font-size: 14px;
color: #191B1C; }
.select--account .select__account-int {
font-size: 14px;
color: #191B1C;
padding: 0 0 0 16px; }
.select--account .select__custom-option + .select__account-int {
padding-top: 16px; }
.select--account .select__custom-select-menu {
height: 280px;
padding-top: 16px; }
.select--account .select__custom-select.select__custom-select--open .wrapper-select__search {
padding-top: 8px;
background-color: #FFF;
height: 56px;
box-shadow: 0px 9px 9px 3px #EBEEF5; }
.select--account .select__search {
color: #191B1C;
border: none;
overflow-y: hidden;
z-index: 1;
background-color: #EFF3FF;
margin: 0 8px;
height: 48px;
border-radius: 4px; }
.select--account .select__search-input {
color: #191B1C;
font-size: 14px; }
.select--account .select__search-input::-webkit-input-placeholder {
/* WebKit browsers */
color: #191B1C; }
.select--account .select__search-input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #191B1C; }
.select--account .select__search-input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #191B1C; }
.select--account .select__search-input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #191B1C; }
.select--account .select__custom-select-menu {
border: none;
box-shadow: 0 9px 9px 3px #EBEEF5;
z-index: 999; }
.select--account .select__custom-select-menu .select__custom-option.select__custom-option--active:after {
display: none; }
.select--account .select__custom-select--open .select__expand-button {
border-bottom: 1px solid #AFB5C8;
margin-bottom: 0;
z-index: 2; }
.select--account .select__custom-select.select__custom-select--open {
box-shadow: 0 0 10px 3px #EBEEF5;
position: relative;
z-index: 2; }
.select--account .select__account-links {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #FFF;
box-shadow: 0 0 10px 3px #EBEEF5;
position: absolute;
top: 60px;
padding-top: 8px; }
.select--account .select__account-links .select__account-link {
width: 100%;
font-size: 0.875rem;
color: #191B1C;
padding: 8px 16px;
line-height: 13px;
border-bottom: none;
color: #191B1C;
height: 64px; }
@media (max-width: 991.98px) {
.select--account .select__account-links .select__account-link {
height: 48px; } }
@media (max-width: 575.98px) {
.select--account .select__account-links .select__account-link {
height: auto; } }
.select--account .select__account-links .select__account-link:focus, .select--account .select__account-links .select__account-link:hover {
background-color: #F7FAFF; }
.select--account .select__account-links .select__account-link .icon {
font-size: 24px;
min-width: 48px;
width: 48px;
height: 48px;
line-height: 48px;
background-color: #FF821C;
color: #FFF;
margin-right: 16px; }
@media (max-width: 991.98px) {
.select--account .select__account-links .select__account-link .icon {
font-size: 16px;
min-width: 32px;
width: 32px;
height: 32px;
line-height: 32px; } }
@media (max-width: 991.98px) {
.select--account .select__account-links .select__account-link .icon {
margin-right: 4px; } }
.select--account.select--border .select__custom-select.select__custom-select--open,
.select--account.select--border .select__search,
.select--account.select--border .select__custom-select-menu {
box-shadow: none; }
.select--account.select--border .select__account-links,
.select--account.select--border .wrapper-select__search,
.select--account.select--border .select__custom-select-menu {
border-right: 1px solid #AFB5C8;
border-left: 1px solid #AFB5C8; }
.select--account.select--border .select__custom-select-menu {
border-bottom: 1px solid #AFB5C8; }
.select__saldo-selected {
float: right;
font-weight: bold;
color: #191B1C;
font-size: 14px; }
@media (max-width: 991.98px) {
.select__saldo-selected {
float: none;
display: block; } }
@media (max-width: 991.98px) {
.select--account-saldo.select--no-icon .select__custom-option .select__account-saldo {
margin-left: auto; } }
@media (max-width: 991.98px) {
.select--account-saldo .select__custom-option .select__account-alias {
height: 18px;
line-height: 18px;
position: static;
margin-top: 0; }
.select--account-saldo .select__custom-option .select__account-number {
height: 18px;
line-height: 18px; } }
.select--account-saldo .select__custom-select-menu--no-scroll .select__account-saldo {
right: 16px; }
.select--account-saldo .select__account-saldo {
font-size: 12px;
font-weight: bold;
line-height: 22px;
color: #5c6780;
position: absolute;
right: 8px;
bottom: 9px; }
@media (max-width: 991.98px) {
.select--account-saldo .select__account-saldo {
position: static;
margin-left: 40px; } }
.select--account-saldo .ss-content [style="padding-right:16px"] .select__account-saldo {
right: 0; }
.select__divisa-import {
display: flex;
justify-content: space-between;
position: relative;
border: 1px solid #AFB5C8;
border-radius: 4px;
width: 100%;
max-height: 60px; }
.select__divisa-import .select__divisa-import__input-container {
flex-grow: 1; }
.select__divisa-import .select__divisa-import__input {
border: 1px solid transparent;
margin-top: -1px;
margin-left: -1px; }
.select__divisa-import .select__divisa-import__input label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 16px;
width: 100%; }
@media (max-width: 991.98px) {
.select__divisa-import .select__divisa-import__input input {
width: 100%; } }
.select__divisa-import .select__divisa-import__input.input--has-focus {
outline: none;
border: 1px solid #AFB5C8;
border-radius: 4px;
z-index: 1; }
.select__divisa-import .select__divisa-import__input--is-error,
.select__divisa-import .select__divisa-import__input--is-error.input--has-focus {
border: 1px solid #DB2A21; }
.select__divisa-import .select__divisa-import__input--is-error.input--has-focus {
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.1); }
.select__divisa-import .select__divisa-import--is-error .input--has-focus {
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.1) !important; }
.select__divisa-import .select__divisa-int {
font-size: 14px;
line-height: 24px;
color: #191B1C;
padding: 6px 0 6px 17px; }
.select__divisa-import.select__list-tlf .select__icon {
padding: 0 8px 0 0; }
.select__divisa-import.select__list-tlf .select--no-flag .select__custom-select {
width: 92px; }
.select__divisa-import.select__list-tlf .select__custom-select {
position: static;
width: 122px; }
.select__divisa-import.select__list-tlf .select__selected-option {
padding-right: 0 !important; }
.select__divisa-import.select__list-tlf .select__expand-button {
padding: 0 0 0 16px;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center; }
.select__divisa-import.select__list-tlf .select__expand-button .icon {
position: static;
right: 35px;
transform: none; }
.select__divisa-import.select__list-tlf .select__expand-button:hover span.icon.icon--arrow-down-16.icon--24 {
right: 35px; }
.select__divisa-import.select__list-tlf .select__custom-select-menu .select__custom-option {
padding: 0 0 0 16px;
display: flex;
justify-content: start;
align-items: center; }
.select__divisa-import .select__divisa-import__list-divisas .wrapper-select__search {
margin: 0 -1px; }
.select__divisa-import .select__divisa-import__list-divisas .select__custom-select-menu .select__custom-option {
padding: 0 0 0 16px;
display: flex;
justify-content: start;
align-items: center; }
.select__divisa-import .select__custom-option {
font-size: 14px;
color: #5c6780;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 50px;
width: 100%;
border-bottom: 1px solid #EBEEF5; }
.select__divisa-import .select__expand-button {
border: 1px solid transparent;
background: transparent; }
.select__divisa-import .select__expand-button:focus {
margin-top: -1px;
border: 1px solid #AFB5C8;
border-radius: 4px;
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.16);
outline: none; }
@media (max-width: 991.98px) {
.select__divisa-import .select__expand-button {
padding: 0 16px 0 11px; } }
.select__divisa-import .select--divisa-import .wrapper-select__search {
margin: 0 -1px; }
.select__divisa-import .select--divisa-import--is-error .input--has-focus {
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.1); }
.select__divisa-import .select--divisa-import--is-error .select__error {
display: block; }
.select__divisa-import .select--divisa-import--is-error .select__expand-button {
border: 1px solid #DB2A21; }
.select__divisa-import .select__custom-select--open .select__expand-button {
margin-top: -1px;
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.16);
border: 1px solid #AFB5C8;
border-radius: 4px; }
.select__divisa-import .select__list-tlf .select__custom-select--open .select__expand-button {
position: relative; }
.select__divisa-import .select--divisa-import--is-error .select__custom-select--open .select__expand-button {
border: 1px solid #DB2A21;
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.1); }
.select__divisa-import .select__search-div {
position: absolute;
left: -1px;
right: -1px;
top: 96%;
padding-top: 10px;
border: 1px solid #AFB5C8;
border-top: none; }
.select__divisa-import .select__search-div .select__search {
position: relative;
border: none; }
.select__divisa-import .select__search-input:focus {
border: none;
box-shadow: none; }
.select__divisa-import .select--has-content {
position: static;
margin-top: -1px;
margin-right: -1px; }
.select__divisa-import .select--has-content .select__label {
display: none; }
.select__divisa-import .select--has-content .select__selected-option {
position: static;
padding-right: 24px;
line-height: inherit; }
.select__divisa-import .select--has-content .select__selected-option .select__icon {
margin-right: 10px; }
.select__divisa-import .select--has-content .select__custom-select-menu {
width: calc(100% + 2px);
top: 198%;
left: -1px;
right: -1px; }
.select__divisa-import.select__list-tlf .select__divisa-import__input {
margin-left: 1px; }
.select__divisa-import .select__list-tlf .select__divisa-import__input {
margin-left: 1px; }
.select__divisa-import.select__divisa-import--empresas {
background: #FFF; }
.select__divisa-import.select__divisa-import--empresas .select__custom-select-menu {
border: none;
box-shadow: 0 10px 20px 0 rgba(107, 112, 126, 0.15); }
.select__divisa-import.select__divisa-import--empresas .select__custom-option {
border-bottom: none; }
.select__divisa-import.select__divisa-import--empresas .select__search-div {
border: none;
box-shadow: 0 10px 20px 0 rgba(107, 112, 126, 0.15);
border-bottom: 1px solid #D9E4FF; }
.select__divisa-import.select__divisa-import--empresas .select__search-input {
height: 28px;
line-height: 28px; }
.select__divisa-import--is-error {
border: 1px solid #DB2A21; }
.select__divisa-import--is-error .select__divisa-import__input.input--has-focus {
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.1) !important;
border: 1px solid #DB2A21; }
.select__divisa-import.select__divisa-import--is-error .select__custom-select--open .select__expand-button {
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.1) !important;
border: 1px solid #DB2A21; }
.select__divisa-import--disabled {
border: 1px solid #D9E4FF; }
.select__divisa-import--disabled .select--disabled .select__expand-button {
border: 1px solid transparent; }
.select--links.select--search-acc .select__custom-select-menu {
margin-top: 0; }
.select--links .select__expand-button {
margin-bottom: 8px; }
.select--search-acc .select__custom-option[hidden="true"] {
display: none; }
.select--search .select__custom-option[hidden="true"] {
display: none !important; }
.select--account-without-icons .select__name-info {
display: none; }
.select__custom-option--secure-icon:before {
font-family: 'BK-icons';
content: '\e99c';
color: #191B1C;
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
position: absolute;
right: 18px;
top: 50%;
transform: translate(0, -50%); }
.select--dropdown .select__dropdown {
color: #191B1C;
display: flex;
border: none;
background: transparent;
height: 32px;
padding: 0; }
.select--dropdown .select__dropdown:hover {
color: #5c6780; }
.select--dropdown .select__label {
left: 16px;
letter-spacing: 1px; }
.select--dropdown .select__label:hover {
color: #5c6780; }
.select--dropdown .select__expand-button .icon {
right: 16px; }
.select--dropdown .select__account-selected {
font-size: 12px;
letter-spacing: 1px;
line-height: 16px;
color: #191B1C; }
.select--dropdown .select__account-selected:hover {
color: #5c6780; }
.select--dropdown.select--has-content .select__selected-option {
font-size: 12px;
letter-spacing: 1px;
line-height: 16px;
left: 16px; }
.select--dropdown.select--has-content .select__label {
display: none; }
.select--dropdown .select__custom-select {
font-size: 12px;
line-height: 16px; }
.select--dropdown .select__custom-select:hover {
color: #5c6780; }
.select--dropdown .select__custom-select:focus {
box-shadow: none; }
.select--dropdown .select__custom-select.select__custom-select--open {
box-shadow: none; }
.select--dropdown .select__custom-select.select__custom-select--open .select__expand-button {
border-bottom: none;
background-color: #FFF; }
.select--dropdown .select__custom-select.select__custom-select--open .select__expand-button .icon {
top: 18%;
right: 16px; }
.select--dropdown .select__custom-select-menu .select__custom-option {
font-size: 0.875rem; }
.select--dropdown .select__custom-select-menu .select__custom-option.select__custom-option--active {
background-color: #F7FAFF; }
.select--nowrap .select__label {
line-height: normal;
margin-right: 45px; }
.select--nowrap .select--has-content .select__label {
margin-right: 0px;
right: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.select .select__account-alias {
margin-top: 4px; }
.select .ss-scroll {
right: 0; }
.select .ss-scroll:after {
background-color: #D9E4FF; }
.wrapper-select-icon .select__label {
left: 54px !important; }
.wrapper-select-icon .select__selected-option {
display: flex;
flex-direction: column;
justify-content: center;
height: 46px; }
.wrapper-select-icon .select__selected-option .select__icon {
max-height: inherit;
padding-right: 10px; }
.wrapper-select-icon .select__selected-option .select__search-item {
position: absolute;
top: 23px;
left: 38px; }
.select__custom-option .select__icon-bandera {
margin-right: 18px; }
.select-thin.select--has-content .select__selected-option {
bottom: 6px !important;
font-size: 12px;
color: #191B1C; }
.select-thin .select__label {
font-size: 12px; }
.select-thin .select__expand-button {
height: 32px;
width: 85%; }
.select-thin .select__expand-button .icon--arrow-down-16,
.select-thin .select__expand-button .icon--arrow-up-16,
.select-thin .select__expand-button .icon--search-16 {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
right: 6px; }
.select-thin .select__custom-select--open .select__expand-button {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; }
.select-thin .select__custom-select--open .select__expand-button .icon--arrow-down-16,
.select-thin .select__custom-select--open .select__expand-button .icon--arrow-up-16 {
transform: rotate(-180deg);
top: 24%; }
.select-thin .select__custom-select--open .select__expand-button .icon--search-16 {
transform: none;
top: 23%; }
.select-thin .select__expand-button + .select__custom-select-menu {
top: 40px !important; }
.select-thin .wrapper-select__search {
top: 40px; }
.select-thin .select__custom-select-menu {
top: 96px; }
/*md
# Cookies
Es un elemento que aparece en la parte inferior de la página con posición fixed y que contiene la información relativa a las cookies. Debe ir contenido en un div con el id `divCookie`, que a su vez englobará un `container` con un párrafo y un botón de cerrar.
Debe ir acompañado de ``.
```html_example
Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de cookies
Cerrar aviso de cookies
```
*/
#divCookie {
position: fixed;
bottom: 0;
width: 100%;
line-height: 1.69;
background-color: #F7FAFF;
z-index: 1031;
font-weight: bold; }
#divCookie .container {
position: relative;
padding: 32px 24px 16px; }
@media (min-width: 768px) {
#divCookie .container {
padding: 24px 60px 16px 24px; } }
@media (min-width: 992px) {
#divCookie .container {
padding: 16px 60px 16px 16px; } }
#divCookie .container p {
font-size: 0.875rem;
margin: 0; }
#divCookie .container .close {
position: absolute;
right: 8px;
top: -22px;
z-index: 1; }
/*md
#Content Box
Content box son cajas que pueden englobar texto, iconos e imágenes.
* Si no incluyen icono o imagen, llevarán la clase `content-box--no-square`.
* Cuando lleve icono, hay que añadir la clase `content-box--icon`.
* Cuando tengan un titular sobre fondo de color, contendrán la clase `content-box--text`.
`content-box--cyan`, `content-box--yellow`, `content-box--orange` y `content-box--gray-business` determinan el color de `content-box__square` y de `section-heading__line`.
`content-box__square` es el cuadrado de color que aparece encima de `content-box`. Este cuadrado contiene bien el icono, bien `content-box__inner-text` dentro del cual se escribe el texto.
A continuación varios ejemplos en los que se pueden ver diferentes estructuras.
## Ejemplos
```html_example
Depósito Online2
0,10% TAE
0,10% TIN
Depósito a 12 meses Desde 6.000 € hasta 1.000.000€ Disponiblidad inmediata
```
```html_example
Tarjeta de crédito
Asociada a tu cuenta pensión y sin cuota.
2 del territorio nacional.
```
```html_example
Hipoteca Fija
Si quieres pagar siempre lo mismo
Hasta
10 años
1,75%
anual
2 | TAE desde 2,98%
Hasta
20 años
2,25%
anual
3 | TAE desde 3,15%
```
```html_example
Exposición máx. en el mercado de renta variable
```
```html_example
```
```html_example
Conservador
BK Renta fija Corto Plazo
Para perfiles conservadores que deseen invertir en activos monetarios y de renta fija de duración media inferior a 2 años.
Su composición de Renta Fija y Renta Variable (máximo 20%) busca retornos estables a largo plazo
BK Inversión Monetario FP
Para perfiles más conservadores, invierte 100% en activos monetarios y renta fija de duración media inferior al año.
Primera perfil conservador Segunda perfil conservador Tercera perfil conservador
```
*/
.content-box.content-box_no-square .content-box__content {
padding: 40px; }
@media (max-width: 767.98px) {
.content-box.content-box_no-square .content-box__content {
padding: 24px; } }
.content-box.content-box_cyan .content-box__square,
.content-box.content-box_cyan .section-heading__line {
background-color: #B5F0EF; }
.content-box.content-box_cyan .content-box__category {
background-color: #B5F0EF; }
.content-box.content-box_green .content-box__square,
.content-box.content-box_green .section-heading__line {
background-color: #007A68; }
.content-box.content-box_orange .content-box__square,
.content-box.content-box_orange .section-heading__line {
background-color: #FF821C; }
.content-box.content-box_yellow .content-box__square,
.content-box.content-box_yellow .section-heading__line {
background-color: #FED430; }
.content-box.content-box_yellow .content-box__category {
background-color: #FED430; }
.content-box.content-box_bkj-yellow .content-box__square,
.content-box.content-box_bkj-yellow .section-heading__line {
background-color: #FFE700; }
.content-box.content-box_bkj-yellow .content-box__category {
background-color: #FFE700; }
.content-box.content-box_bkj-turquoise .content-box__square,
.content-box.content-box_bkj-turquoise .section-heading__line {
background-color: #37ECC7; }
.content-box.content-box_bkj-turquoise .content-box__category {
background-color: #37ECC7; }
.content-box.content-box_bkj-blue .content-box__square,
.content-box.content-box_bkj-blue .section-heading__line {
background-color: #08C3FF; }
.content-box.content-box_bkj-blue .content-box__category {
background-color: #08C3FF; }
.content-box.content-box_bkj-red .content-box__square,
.content-box.content-box_bkj-red .section-heading__line {
background-color: #FF4169; }
.content-box.content-box_bkj-red .content-box__category {
background-color: #FF4169; }
.content-box.content-box_gray .content-box__square,
.content-box.content-box_gray .section-heading__line {
background-color: #5c6780; }
.content-box.content-box_gray_business .content-box__square,
.content-box.content-box_gray_business .section-heading__line {
background-color: #4B575D; }
.content-box.content-box_gray_business .content-box__category {
background-color: #4B575D; }
.content-box.content-box_gray_business .pictoDSL_white {
color: #FFF; }
.content-box.content-box_icon .content-box__square {
width: 72px;
height: 72px; }
.content-box.content-box_icon .content-box__square .pictoDSL,
.content-box.content-box_icon .content-box__square .icon {
display: block;
width: 100%;
height: 100%;
line-height: 72px;
font-size: 56px;
text-align: center; }
@media (min-width: 768px) {
.content-box.content-box_icon .content-box__square {
width: 80px;
height: 80px; }
.content-box.content-box_icon .content-box__square .pictoDSL,
.content-box.content-box_icon .content-box__square .icon {
line-height: 80px; } }
.content-box.content-box_text .content-box__square {
position: relative;
width: 152px;
height: 152px; }
.content-box.content-box_text .content-box__inner-text {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
font-size: 1.25rem;
font-family: "BK-Text"; }
.content-box.content-box_image .content-box__square {
width: 164px;
height: 164px;
margin: 0 0 -140px; }
.content-box.content-box_image .content-box__content {
z-index: 3;
padding: 8px 16px 16px;
margin-left: 40px;
min-height: 115px; }
@media (min-width: 768px) {
.content-box.content-box_image .content-box__square {
margin: 0 0 -24px 24px; }
.content-box.content-box_image .content-box__content {
z-index: 1;
padding: 64px 40px 40px;
margin-left: 0;
height: auto; } }
@media (min-width: 1200px) {
.content-box.content-box_image .content-box__square {
margin: 0 0 -40px 40px;
width: 240px;
height: 240px; } }
.content-box.content-box_separator .content-box__content__title {
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 1px solid #EBEEF5; }
.content-box.content-box_check {
cursor: pointer; }
.content-box.content-box_check .icon[class*="-check-"] {
display: none; }
.content-box.content-box_check .content-rank .content-rank_bar:before {
background-color: #5c6780; }
.content-box.content-box_check.content-box_checked {
position: relative; }
.content-box.content-box_check.content-box_checked .icon[class*="-check-"] {
display: block;
position: absolute;
background: #FF821C;
color: #FFF;
border-radius: 50%;
height: 40px;
width: 40px;
top: -20px;
right: 20px; }
.content-box.content-box_check.content-box_checked .icon[class*="-check-"]:before {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%; }
.content-box.content-box_check.content-box_checked .content-rank .content-rank_bar:before {
background-color: #FF821C; }
.content-box.content-box_check:focus .content-box__content {
box-shadow: inset 0 0 0 4px #3E4A50; }
.content-box .content-box__content--height-auto {
height: auto; }
.content-box__descriptor-image {
transform: translateY(24px);
max-width: 134px;
height: auto; }
@media (min-width: 576px) {
.content-box__descriptor-image {
max-width: 108px; } }
@media (min-width: 992px) {
.content-box__descriptor-image {
transform: translateY(32px);
max-width: 144px; } }
@media (min-width: 1200px) {
.content-box__descriptor-image {
transform: translateY(40px);
max-width: 176px; } }
.content-box__descriptor-background {
width: 46px;
height: 46px;
background-color: #FF821C; }
@media (min-width: 576px) {
.content-box__descriptor-background {
width: 36px;
height: 36px; } }
@media (min-width: 992px) {
.content-box__descriptor-background {
width: 48px;
height: 48px; } }
@media (min-width: 1200px) {
.content-box__descriptor-background {
width: 56px;
height: 56px; } }
.content-box__descriptor {
display: flex;
align-items: flex-end; }
.content-box__descriptor-title {
font-size: 16px;
line-height: 24px;
color: #191B1C;
text-transform: uppercase; }
.content-box--descriptor .content-box__content {
margin-left: 24px;
padding: 24px; }
@media (min-width: 992px) {
.content-box--descriptor .content-box__content {
margin-left: 32px; } }
@media (min-width: 1200px) {
.content-box--descriptor .content-box__content {
margin-left: 40px;
padding: 24px 40px 24px; } }
.content-box.content-box--footer-cyan.content-box--no-square .content-box__content {
padding: 0; }
.content-box.content-box--footer-cyan.content-box--no-square .content-box__content .content-box__body {
padding: 50px 40px 10px; }
.content-box.content-box--footer-cyan.content-box--no-square .content-box__content .content-box__footer {
padding: 20px 40px 20px;
background-color: #D3F6F5; }
.content-box__descriptor-background--yellow {
background-color: #FED430; }
.content-box__descriptor-background--cyan {
background-color: #B5F0EF; }
.content-box__descriptor-background--bkj-yellow {
background-color: #FFE700; }
.content-box__descriptor-background--bkj-turquoise {
background-color: #37ECC7; }
.content-box__descriptor-background--bkj-blue {
background-color: #08C3FF; }
.content-box__descriptor-background--bkj-red {
background-color: #FF4169; }
.content-box__content__title {
font-family: "BK-Text";
margin-bottom: 8px;
font-size: 1.25rem; }
@media (min-width: 1200px) {
.content-box__content__title {
font-size: 1.5rem; } }
.content-box__content__subtitle {
font-family: "BK-Sans";
margin-bottom: 16px;
font-size: 1rem; }
.content-box__content__data {
font-size: 0.875rem;
border-top: 1px solid #EBEEF5;
padding: 8px 0; }
.content-box__content__data:last-child {
border-bottom: 1px solid #EBEEF5; }
/* para WEM - Vilt - quitar en REFACTOR */
.content-image__wide {
background-color: #B5F0EF;
width: 100%;
height: auto;
margin-bottom: -25px;
margin-top: -58px; }
.content-image__wide img {
width: 100%;
height: auto; }
@media (min-width: 1200px) {
.content-image__wide {
width: 1140px;
height: auto; } }
/* BEM */
.content-image--wide {
background-color: #B5F0EF;
width: 100%;
height: auto;
margin-bottom: -25px;
margin-top: -58px; }
.content-image--wide img {
width: 100%;
height: auto; }
@media (min-width: 1200px) {
.content-image--wide {
width: 1140px;
height: auto; } }
.product-features.fix .content-box__image-header img {
top: -32px; }
.product-features .card-opacity {
opacity: .3; }
/* FIN BEM */
.content-box-video.content-box-video--active.active, .content-box-video.content-box-video--active:active {
box-shadow: 0 6px 30px 0 rgba(92, 103, 128, 0.15);
background-color: #FFF;
color: #191B1C;
font-weight: bold; }
.content-box-video .content-box-video__content {
padding: 16px;
cursor: pointer; }
.content-box-video .content-box-video__content .active, .content-box-video .content-box-video__content:hover {
box-shadow: 0 6px 30px 0 rgba(92, 103, 128, 0.15);
background-color: #FFF;
color: #191B1C;
font-weight: bold; }
.content-box-video .content-box-video__content span {
margin-right: .5rem; }
.content-box-video .content-box-video__content .content-box-video__value a {
min-width: 60px; }
.content-box-video .content-box-video__content .content-box-video__value span {
margin-right: 4px; }
.content-box-video .content-box-video__content .content-box-video__value span:nth-child(3) {
text-transform: uppercase;
margin-left: 16px; }
@media (max-width: 1199.98px) {
.content-box-video .content-box-video__content .content-box-video__value span:nth-child(3) {
display: block;
margin-left: 0px; } }
@media (max-width: 991.98px) {
.content-box-video .content-box-video__content .content-box-video__value span:nth-child(3) {
margin-left: 16px;
display: inline-block; } }
@media (max-width: 767.98px) {
.content-box-video .content-box-video__content .content-box-video__value span:nth-child(3) {
margin-left: 0px;
display: block; } }
.content-box-video .content-box-video__content .content-box-video__price span {
margin-right: 0px; }
.content-box-video__list.flex-wrap li {
width: 100%; }
@media (min-width: 992px) {
.content-box-video__list.flex-wrap li {
width: 50%; } }
.content-rank {
padding-top: 38px; }
.content-rank_bar {
position: relative;
width: 100%;
border-radius: 3px;
height: 6px;
background-color: #EBEEF5; }
.content-rank_bar:before {
content: "";
position: absolute;
left: 0;
width: 40%;
height: 100%;
background-color: #FF821C;
border-radius: 3px; }
.content-rank_bar:after {
content: "0%";
position: absolute;
top: -38px;
min-width: 28px;
left: 0;
padding: 5px 9px;
box-sizing: border-box;
background-color: #191B1C;
color: #FFF;
font-size: 12px;
transform: translateX(0%);
white-space: nowrap; }
.content-rank_bar.content-rank_bar_0:before {
width: 0%; }
.content-rank_bar.content-rank_bar_0:after {
content: "0%";
left: calc(0% - 18px - 18px); }
.content-rank_bar.content-rank_bar_10:before {
width: 10%; }
.content-rank_bar.content-rank_bar_10:after {
content: "10%";
left: calc(10% - 28px - 18px); }
.content-rank_bar.content-rank_bar_25:before {
width: 25%; }
.content-rank_bar.content-rank_bar_25:after {
content: "25%";
left: calc(25% - 28px - 18px); }
.content-rank_bar.content-rank_bar_30:before {
width: 30%; }
.content-rank_bar.content-rank_bar_30:after {
content: "30%";
left: calc(30% - 28px - 18px); }
.content-rank_bar.content-rank_bar_50:before {
width: 50%; }
.content-rank_bar.content-rank_bar_50:after {
content: "50%";
left: calc(50% - 28px - 18px); }
.content-rank_bar.content-rank_bar_75:before {
width: 75%; }
.content-rank_bar.content-rank_bar_75:after {
content: "75%";
left: calc(75% - 28px - 18px); }
.content-rank_bar.content-rank_bar_100:before {
width: 100%; }
.content-rank_bar.content-rank_bar_100:after {
content: "100%";
left: calc(100% - 28px - 18px); }
.content-rank_legend {
font-size: 13px;
line-height: 22px;
color: #5c6780;
padding-top: 4px; }
.content-box_cyan .content-rank .content-rank_bar:before {
background-color: #B5F0EF; }
.content-box_cyan .content-box__desc {
background-color: #B5F0EF; }
.content-box_yellow .content-rank .content-rank_bar:before {
background-color: #FED430; }
.content-box_yellow .content-box__desc {
background-color: #FED430; }
.content-box_bkj-yellow .content-rank .content-rank_bar:before {
background-color: #FFE700; }
.content-box_bkj-yellow .content-box__desc {
background-color: #FFE700; }
.content-box_bkj-turquoise .content-rank .content-rank_bar:before {
background-color: #37ECC7; }
.content-box_bkj-turquoise .content-box__desc {
background-color: #37ECC7; }
.content-box_bkj-blue .content-rank .content-rank_bar:before {
background-color: #08C3FF; }
.content-box_bkj-blue .content-box__desc {
background-color: #08C3FF; }
.content-box_bkj-red .content-rank .content-rank_bar:before {
background-color: #FF4169; }
.content-box_bkj-red .content-box__desc {
background-color: #FF4169; }
.content-box__category {
position: absolute;
top: -24px;
background-color: #FF821C;
padding: 3px 6px;
font-size: 0.875rem; }
.content-box__image-header {
height: 7.2rem; }
.content-box__image-header img {
transition: all 0.166s ease-out;
width: 80%;
margin: 0 auto;
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%); }
.content-box__image-header img:hover {
top: -2rem; }
.content-box__carousel__container.row {
margin: 0; }
/*BEM*/
.content-box {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
z-index: 2;
/**** Partnet ****/
/** doble nomenclatura por causa del gestor para PARTNET **/ }
.content-box.content-box--strech {
height: auto; }
.content-box img {
width: 100%;
height: auto; }
.content-box img.flag {
margin-right: 16px;
width: 28px; }
.content-box.content-box--no-square .content-box__content {
padding: 40px; }
@media (max-width: 767.98px) {
.content-box.content-box--no-square .content-box__content {
padding: 24px; } }
.content-box.content-box--cyan .content-box__line,
.content-box.content-box--cyan .content-box__line-45,
.content-box.content-box--cyan .content-box__square,
.content-box.content-box--cyan .section-heading__line,
.content-box.content-box--cyan .content-box__square div:before, .content-box.content-box_cyan .content-box__line,
.content-box.content-box_cyan .content-box__line-45,
.content-box.content-box_cyan .content-box__square,
.content-box.content-box_cyan .section-heading__line,
.content-box.content-box_cyan .content-box__square div:before {
background-color: #B5F0EF; }
.content-box.content-box--cyan .content-box__category, .content-box.content-box_cyan .content-box__category {
background-color: #B5F0EF; }
.content-box.content-box--orange .content-box__line,
.content-box.content-box--orange .content-box__line-45,
.content-box.content-box--orange .content-box__square,
.content-box.content-box--orange .section-heading__line,
.content-box.content-box--orange .content-box__square div:before, .content-box.content-box_orange .content-box__line,
.content-box.content-box_orange .content-box__line-45,
.content-box.content-box_orange .content-box__square,
.content-box.content-box_orange .section-heading__line,
.content-box.content-box_orange .content-box__square div:before {
background-color: #FF821C; }
.content-box.content-box--green .content-box__line,
.content-box.content-box--green .content-box__line-45,
.content-box.content-box--green .content-box__square,
.content-box.content-box--green .section-heading__line,
.content-box.content-box--green .content-box__square div:before, .content-box.content-box_green .content-box__line,
.content-box.content-box_green .content-box__line-45,
.content-box.content-box_green .content-box__square,
.content-box.content-box_green .section-heading__line,
.content-box.content-box_green .content-box__square div:before {
background-color: #007A68; }
.content-box.content-box--yellow .content-box__line,
.content-box.content-box--yellow .content-box__line-45,
.content-box.content-box--yellow .content-box__square,
.content-box.content-box--yellow .section-heading__line,
.content-box.content-box--yellow .content-box__square div:before, .content-box.content-box_yellow .content-box__line,
.content-box.content-box_yellow .content-box__line-45,
.content-box.content-box_yellow .content-box__square,
.content-box.content-box_yellow .section-heading__line,
.content-box.content-box_yellow .content-box__square div:before {
background-color: #FED430; }
.content-box.content-box--yellow .content-box__category, .content-box.content-box_yellow .content-box__category {
background-color: #FED430; }
.content-box.content-box--bkj-yellow .content-box__line,
.content-box.content-box--bkj-yellow .content-box__line-45,
.content-box.content-box--bkj-yellow .content-box__square,
.content-box.content-box--bkj-yellow .section-heading__line,
.content-box.content-box--bkj-yellow .content-box__square div:before {
background-color: #FFE700; }
.content-box.content-box--bkj-yellow .content-box__category {
background-color: #FFE700; }
.content-box.content-box--bkj-turquoise .content-box__line,
.content-box.content-box--bkj-turquoise .content-box__line-45,
.content-box.content-box--bkj-turquoise .content-box__square,
.content-box.content-box--bkj-turquoise .section-heading__line,
.content-box.content-box--bkj-turquoise .content-box__square div:before {
background-color: #37ECC7; }
.content-box.content-box--bkj-turquoise .content-box__category {
background-color: #37ECC7; }
.content-box.content-box--bkj-blue .content-box__line,
.content-box.content-box--bkj-blue .content-box__line-45,
.content-box.content-box--bkj-blue .content-box__square,
.content-box.content-box--bkj-blue .section-heading__line,
.content-box.content-box--bkj-blue .content-box__square div:before {
background-color: #08C3FF; }
.content-box.content-box--bkj-blue .content-box__category {
background-color: #08C3FF; }
.content-box.content-box--bkj-red .content-box__line,
.content-box.content-box--bkj-red .content-box__line-45,
.content-box.content-box--bkj-red .content-box__square,
.content-box.content-box--bkj-red .section-heading__line,
.content-box.content-box--bkj-red .content-box__square div:before {
background-color: #FF4169; }
.content-box.content-box--bkj-red .content-box__category {
background-color: #FF4169; }
.content-box.content-box--gray .content-box__square,
.content-box.content-box--gray .section-heading__line {
background-color: #5c6780; }
.content-box.content-box--gray-business .content-box__square,
.content-box.content-box--gray-business .section-heading__line,
.content-box.content-box--gray-business .content-box__square div:before, .content-box.content-box_gray-business .content-box__square,
.content-box.content-box_gray-business .section-heading__line,
.content-box.content-box_gray-business .content-box__square div:before {
background-color: #4B575D; }
.content-box.content-box--gray-business .content-box__square .icon,
.content-box.content-box--gray-business .section-heading__line .icon,
.content-box.content-box--gray-business .content-box__square div:before .icon, .content-box.content-box_gray-business .content-box__square .icon,
.content-box.content-box_gray-business .section-heading__line .icon,
.content-box.content-box_gray-business .content-box__square div:before .icon {
color: #FFF; }
.content-box.content-box--gray-business .content-box__category, .content-box.content-box_gray-business .content-box__category {
background-color: #4B575D; }
.content-box.content-box--gray-business .icon, .content-box.content-box_gray-business .icon {
color: #FFF; }
.content-box.content-box--gray-dark .content-box__square,
.content-box.content-box--gray-dark .section-heading__line,
.content-box.content-box--gray-dark .content-box__square div:before, .content-box.content-box_gray-dark .content-box__square,
.content-box.content-box_gray-dark .section-heading__line,
.content-box.content-box_gray-dark .content-box__square div:before {
background-color: #191B1C; }
.content-box.content-box--gray-dark .content-box__square .icon,
.content-box.content-box--gray-dark .section-heading__line .icon,
.content-box.content-box--gray-dark .content-box__square div:before .icon, .content-box.content-box_gray-dark .content-box__square .icon,
.content-box.content-box_gray-dark .section-heading__line .icon,
.content-box.content-box_gray-dark .content-box__square div:before .icon {
color: #FFF; }
.content-box.content-box--gray-dark .content-box__square .content-box__category,
.content-box.content-box--gray-dark .section-heading__line .content-box__category,
.content-box.content-box--gray-dark .content-box__square div:before .content-box__category, .content-box.content-box_gray-dark .content-box__square .content-box__category,
.content-box.content-box_gray-dark .section-heading__line .content-box__category,
.content-box.content-box_gray-dark .content-box__square div:before .content-box__category {
background-color: #191B1C; }
.content-box.content-box--gray-dark.content-box_icon .content-box__square .pictoDSL,
.content-box.content-box--gray-dark.content-box_icon .content-box__square .icon, .content-box.content-box_gray-dark.content-box_icon .content-box__square .pictoDSL,
.content-box.content-box_gray-dark.content-box_icon .content-box__square .icon {
color: #FFF; }
.content-box.content-box--icon .content-box__square {
width: 72px;
height: 72px; }
.content-box.content-box--icon .content-box__square .pictoDSL,
.content-box.content-box--icon .content-box__square .icon {
display: block;
width: 100%;
height: 100%;
line-height: 72px;
font-size: 56px;
text-align: center; }
@media (min-width: 768px) {
.content-box.content-box--icon .content-box__square {
width: 80px;
height: 80px; }
.content-box.content-box--icon .content-box__square .pictoDSL,
.content-box.content-box--icon .content-box__square .icon {
line-height: 80px; } }
@media (min-width: 992px) {
.content-box.content-box--icon .content-box__square {
width: 88px;
height: 88px;
font-size: 64px; }
.content-box.content-box--icon .content-box__square .pictoDSL,
.content-box.content-box--icon .content-box__square .icon {
line-height: 88px; } }
@media (min-width: 1200px) {
.content-box.content-box--icon .content-box__square {
width: 96px;
height: 96px; }
.content-box.content-box--icon .content-box__square .pictoDSL,
.content-box.content-box--icon .content-box__square .icon {
line-height: 96px; } }
@media (min-width: 768px) {
.content-box.content-box--icon .process-number--lg {
min-width: 96px;
height: 96px;
line-height: 96px; } }
.content-box.content-box--text .content-box__square {
position: relative;
width: 152px;
height: 152px; }
.content-box.content-box--text .content-box__inner-text {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
font-size: 1.25rem;
font-family: "BK-Text"; }
.content-box.content-box--image .content-box__square {
width: 164px;
height: 164px;
margin: 0 0 -140px; }
.content-box.content-box--image .content-box__content {
z-index: 3;
padding: 8px 16px 16px;
margin-left: 40px;
min-height: 115px; }
@media (min-width: 768px) {
.content-box.content-box--image .content-box__square {
margin: 0 0 -24px 24px; }
.content-box.content-box--image .content-box__content {
z-index: 1;
padding: 64px 40px 40px;
margin-left: 0;
height: auto; } }
@media (min-width: 1200px) {
.content-box.content-box--image .content-box__square {
margin: 0 0 -40px 40px;
width: 240px;
height: 240px; } }
.content-box.content-box--separator .content-box__content__title {
margin-bottom: 24px;
border-bottom: 1px solid #EBEEF5; }
.content-box.content-box_image_highlights .section-heading__description {
margin-top: 0; }
.content-box.content-box_image_highlights .content-box__square {
margin: 0 0 24px 0;
background: none;
position: relative;
width: 100%;
display: inline-table; }
@media (max-width: 767.98px) {
.content-box.content-box_image_highlights .content-box__square {
margin: 0 0 16px 0; } }
.content-box.content-box_image_highlights .content-box__square img {
width: 70%;
height: 100%; }
@media (max-width: 991.98px) {
.content-box.content-box_image_highlights .content-box__square img {
width: 75%; } }
@media (max-width: 767.98px) {
.content-box.content-box_image_highlights .content-box__square img {
width: 85%; } }
.content-box.content-box_image_highlights .content-box__square div {
position: relative; }
.content-box.content-box_image_highlights .content-box__square div:before {
content: '';
width: 56px;
height: 56px;
position: absolute;
bottom: 0;
left: 70%; }
@media (max-width: 991.98px) {
.content-box.content-box_image_highlights .content-box__square div:before {
left: 75%;
width: 40px;
height: 40px; } }
@media (max-width: 767.98px) {
.content-box.content-box_image_highlights .content-box__square div:before {
left: 85%;
width: 48px;
height: 48px; } }
.content-box.content-box_image_highlights .content-box__content {
box-shadow: none;
padding: 0 15px 0 0; }
.content-box.content-box_image_highlights .content-box__content > div:first-child {
margin-bottom: 14px; }
.content-box.content-box_image_highlights .content-box__content .section-heading {
padding: 0; }
@media (max-width: 767.98px) {
.content-box.content-box_image_highlights .content-box__content {
flex: initial;
margin-left: 0; } }
.content-box.content-box--small-square .section-heading__description {
margin-top: 0; }
.content-box.content-box--small-square .content-box__square {
margin: 0 0 24px 0;
background: none;
position: relative;
width: 100%;
display: inline-table; }
@media (max-width: 767.98px) {
.content-box.content-box--small-square .content-box__square {
margin: 0 0 16px 0; } }
.content-box.content-box--small-square .content-box__square img {
width: 70%;
height: 100%; }
@media (max-width: 991.98px) {
.content-box.content-box--small-square .content-box__square img {
width: 75%; } }
@media (max-width: 767.98px) {
.content-box.content-box--small-square .content-box__square img {
width: 85%; } }
.content-box.content-box--small-square .content-box__square div {
position: relative; }
.content-box.content-box--small-square .content-box__square div:before {
content: '';
width: 56px;
height: 56px;
position: absolute;
bottom: 0;
left: 70%; }
@media (max-width: 991.98px) {
.content-box.content-box--small-square .content-box__square div:before {
left: 75%;
width: 40px;
height: 40px; } }
@media (max-width: 767.98px) {
.content-box.content-box--small-square .content-box__square div:before {
left: 85%;
width: 48px;
height: 48px; } }
.content-box.content-box--small-square .content-box__content {
box-shadow: none;
padding: 0 15px 0 0; }
.content-box.content-box--small-square .content-box__content > div:first-child {
margin-bottom: 14px; }
.content-box.content-box--small-square .content-box__content .section-heading {
padding: 0; }
@media (max-width: 767.98px) {
.content-box.content-box--small-square .content-box__content {
flex: initial;
margin-left: 0; } }
.content-box__content--tel {
display: flex;
flex-wrap: wrap;
border-top: none;
margin: 0; }
.content-box__square {
z-index: 2;
margin: 0 0 -24px 24px; }
@media (min-width: 1200px) {
.content-box__square {
margin: 0 0 -40px 40px; } }
.content-box__content {
padding: 64px 24px 24px;
box-shadow: 0 10px 20px 0 rgba(92, 103, 128, 0.15);
background-color: #FFF;
flex: 1 0 auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between; }
@media (min-width: 1200px) {
.content-box__content {
padding: 64px 40px 40px; } }
.content-box__content .section-heading {
position: relative;
padding-bottom: 16px; }
.content-box__content .section-heading .features {
font-size: 56px; }
.content-box__content .section-heading__title {
font-size: 1rem;
position: relative; }
.content-box__content .section-heading__description {
margin-top: 0; }
.content-box__content .section-heading__line {
position: absolute;
bottom: 0; }
@media (min-width: 768px) {
.content-box__content .section-heading__title {
font-size: 1.25rem; }
.content-box__content .section-heading__description {
margin-top: 8px; } }
@media (min-width: 992px) {
.content-box__content .section-heading__title {
font-size: 1.5rem; } }
.content-box__content .data--featured {
font-size: 2rem;
font-weight: 100; }
.content-box__content .data_featured {
font-size: 2rem;
font-weight: 100; }
.content-box-simple {
padding: 16px;
height: 93px;
color: #191B1C;
flex-direction: row; }
@media (min-width: 576px) {
.content-box-simple {
padding: 24px;
height: 120px; } }
.content-box-simple__link:focus {
box-shadow: 0 0 0 4px #EBEEF5;
outline: 1px solid #AFB5C8; }
.content-box-simple--line {
border: 1px solid #AFB5C8;
box-shadow: none; }
.content-box-simple__texto {
font-size: 14px;
line-height: 20px;
padding: 0; }
.content-box-simple__texto:hover {
color: #4B575D; }
@media (min-width: 576px) {
.content-box-simple__texto {
font-size: 20px;
line-height: 24px;
padding: 0 40px 0 24px; } }
.content-box-simple__texto span {
font-weight: 900;
display: block; }
.content-box-simple__cuadradro {
min-width: 72px;
height: 72px;
background-color: #EBEEF5;
display: none; }
@media (min-width: 576px) {
.content-box-simple__cuadradro {
display: flex; }
.content-box-simple__cuadradro img {
max-width: 100%;
width: auto; } }
.content-box-simple__cuadradro.content-box-simple__cuadradro--yellow {
background-color: #F7C70B; }
.content-box-simple__cuadradro.content-box-simple__cuadradro--bluefourth {
background-color: #C3F3F2; }
.content-box-simple--without .content-box-simple__cuadradro {
display: none; }
.content-box-simple--without .content-box-simple__texto {
padding: 0 8px 0 0; }
.content-box-simple--flag .content-box-simple__cuadradro {
background-color: transparent; }
.content-box-simple__detail {
color: #FF821C; }
.content-box__content-title {
font-family: "BK-Text";
margin-bottom: 16px;
font-size: 1.25rem; }
@media (min-width: 1200px) {
.content-box__content-title {
font-size: 1.5rem; } }
.content-box__content-subtitle {
font-family: "BK-Sans";
margin-bottom: 16px;
font-size: 1rem; }
.content-box__mini-text {
display: inline-block;
font-size: 14px;
line-height: 24px; }
.content-box__mini-text .bold {
font-weight: 900; }
.content-box__footer .btn--rounded {
position: absolute;
bottom: 0;
right: 32px;
will-change: opacity;
transform: translate(0, 50%);
transition-property: all;
transition-duration: 0.166s;
transition-delay: 0s;
transition-timing-function: ease-out; }
.content-box__footer .btn--rounded span {
will-change: transform;
transition-property: transform;
transition-duration: 0.166s;
transition-delay: 0s;
transition-timing-function: ease-out; }
.content-box__footer .btn--rounded.opened {
background-color: #191B1C;
border-color: #191B1C; }
.content-box__footer .btn--rounded.opened span {
transform: rotate(135deg); }
.content-box__footer .btn_rounded {
position: absolute;
bottom: 0;
right: 32px;
will-change: opacity;
transform: translate(0, 50%);
transition-property: all;
transition-duration: 0.166s;
transition-delay: 0s;
transition-timing-function: ease-out; }
.content-box__footer .btn_rounded span {
will-change: transform;
transition-property: transform;
transition-duration: 0.166s;
transition-delay: 0s;
transition-timing-function: ease-out; }
.content-box__footer .btn_rounded.opened {
background-color: #191B1C;
border-color: #191B1C; }
.content-box__footer .btn_rounded.opened span {
transform: rotate(135deg); }
.content-box__footer .text-link {
line-height: 36px; }
.content-box__content-data {
font-size: 0.875rem;
border-top: 1px solid #EBEEF5;
padding: 8px 0; }
.content-box__content-data:last-child {
border-bottom: 1px solid #EBEEF5; }
.content-image {
background-color: #B5F0EF;
width: 100%;
height: auto;
margin-bottom: -25px;
margin-top: -58px; }
.content-image img {
width: 100%;
height: auto; }
@media (min-width: 768px) {
.content-image {
width: 408px;
height: 408px; } }
@media (min-width: 992px) {
.content-image {
width: 374px;
height: 374px; } }
@media (min-width: 1200px) {
.content-image {
width: 457px;
height: 457px; } }
.content-box-video {
color: #191B1C; }
.content-box-video.active {
box-shadow: 0 6px 30px 0 rgba(92, 103, 128, 0.15);
background-color: #FFF;
color: #191B1C;
font-weight: bold; }
.content-box-video:focus {
box-shadow: inset 0 0 0 4px #3E4A50 !important; }
.content-box-video.content-box-video__content {
padding: 16px; }
.content-box-video.content-box-video__content.active, .content-box-video.content-box-video__content:hover {
box-shadow: 0 6px 30px 0 rgba(92, 103, 128, 0.15);
background-color: #FFF;
color: #191B1C;
font-weight: bold; }
.content-rank {
margin-top: 38px; }
.content-rank.content-rank-no-boxes {
margin-top: 0px; }
.content-rank.content-rank-no-boxes .content-rank_bar:after {
content: "";
display: none; }
.content-rank--bar {
position: relative;
width: 100%;
border-radius: 3px;
height: 6px;
background-color: #EBEEF5; }
.content-rank--bar:before {
content: "";
position: absolute;
left: 0;
width: 40%;
height: 100%;
background-color: #FF821C;
border-radius: 3px; }
.content-rank--bar:after {
content: "10%";
position: absolute;
top: -38px;
min-width: 28px;
left: calc(40% - 28px - 18px);
padding: 5px 9px;
box-sizing: border-box;
background-color: #191B1C;
color: #FFF;
font-size: 12px; }
.content-rank--bar.content-rank--bar--10:before {
width: 10%; }
.content-rank--bar.content-rank--bar--10:after {
content: "10%";
left: 0; }
.content-rank--bar.content-rank--bar--25:before {
width: 25%; }
.content-rank--bar.content-rank--bar--25:after {
content: "25%";
left: calc(25% - 28px - 18px); }
.content-rank--bar.content-rank--bar--30:before {
width: 30%; }
.content-rank--bar.content-rank--bar--30:after {
content: "30%";
left: calc(30% - 28px - 18px); }
.content-rank--bar.content-rank--bar--50:before {
width: 50%; }
.content-rank--bar.content-rank--bar--50:after {
content: "50%";
left: calc(50% - 28px - 18px); }
.content-rank--bar.content-rank--bar--75:before {
width: 75%; }
.content-rank--bar.content-rank--bar--75:after {
content: "75%";
left: calc(75% - 28px - 18px); }
.content-rank--bar.content-rank--bar--100:before {
width: 100%; }
.content-rank--bar.content-rank--bar--100:after {
content: "100%";
left: calc(100% - 28px - 18px); }
.content-rank--legend {
font-size: 13px;
line-height: 22px;
color: #5c6780;
padding-top: 4px; }
.content-box--cyan .content-rank .content-rank--bar:before {
background-color: #B5F0EF; }
.content-box--cyan .content-box__category {
background-color: #B5F0EF; }
.content-box--cyan .content-box__desc {
background-color: #B5F0EF; }
.content-box--yellow .content-rank .content-rank--bar:before {
background-color: #FED430; }
.content-box--yellow .content-box__category {
background-color: #FED430; }
.content-box--yellow .content-box__desc {
background-color: #FED430; }
.content-box--gray .content-rank .content-rank--bar:before {
background-color: #5c6780; }
.content-box--gray .content-box__category {
background-color: #5c6780; }
.content-box--gray .content-box__desc {
background-color: #5c6780; }
.content-box--bkj-yellow .content-rank .content-rank--bar:before {
background-color: #FFE700; }
.content-box--bkj-yellow .content-box__category {
background-color: #FFE700; }
.content-box--bkj-turquoise .content-rank .content-rank--bar:before {
background-color: #37ECC7; }
.content-box--bkj-turquoise .content-box__category {
background-color: #37ECC7; }
.content-box--bkj-blue .content-rank .content-rank--bar:before {
background-color: #08C3FF; }
.content-box--bkj-blue .content-box__category {
background-color: #08C3FF; }
.content-box--bkj-red .content-rank .content-rank--bar:before {
background-color: #FF4169; }
.content-box--bkj-red .content-box__category {
background-color: #FF4169; }
.content-box__category {
position: absolute;
top: -24px;
background-color: #FF821C;
padding: 3px 6px;
font-size: 0.875rem; }
.content-box__image-header {
height: 7.2rem; }
.content-box__image-header img {
transition: all 0.166s ease-out;
width: 80%;
margin: 0 auto;
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%); }
.content-box__image-header img:hover {
top: -2rem; }
.content-box__carousel-container.row {
margin: 0; }
/* quitar cuando Anca modifique sus páginas */
.process__body .content-box__content .section-heading .section-heading__title {
font-size: 16px;
color: #191B1C;
font-weight: 900; }
.content-box--category {
align-items: flex-start; }
.content-box--category .content-box__content {
margin-top: 24px;
width: 100%; }
.content-box__category-tag {
background-color: #FF821C;
font-size: 0.875rem;
margin-bottom: 0;
padding: 0 8px;
height: 24px;
position: absolute;
top: 0;
z-index: 999;
line-height: 24px; }
.content-box--cyan .content-box__category-tag {
background-color: #B5F0EF; }
.content-box--cyan .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #B5F0EF; }
.content-box--yellow .content-box__category-tag {
background-color: #FED430; }
.content-box--yellow .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #FED430; }
.content-box--gray .content-box__category-tag {
background-color: #5c6780; }
.content-box--gray .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #5c6780; }
.content-box--bkj-yellow .content-box__category-tag {
background-color: #FFE700; }
.content-box--bkj-yellow .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #FFE700; }
.content-box--bkj-turquoise .content-box__category-tag {
background-color: #37ECC7; }
.content-box--bkj-turquoise .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #37ECC7; }
.content-box--bkj-blue .content-box__category-tag {
background-color: #08C3FF; }
.content-box--bkj-blue .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #08C3FF; }
.content-box--bkj-red .content-box__category-tag {
background-color: #FF4169; }
.content-box--bkj-red .content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #FF4169; }
.content-box--clean {
padding: 16px;
background-color: #FFF;
min-width: 360px;
position: absolute;
height: auto;
top: 38px;
left: 0;
right: 0;
box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.15); }
.content-box--no-shadow .content-box__content {
box-shadow: none; }
.content-box--nopadding .content-box__square {
margin: 0 0 25px 0; }
.content-box--nopadding .content-box__content {
padding: 0; }
.content-box--paddingbottom40 {
padding-bottom: 40px; }
.content-box.content-box--img75 img {
width: 75px;
height: 75px; }
.content-box.content-box--img68 img {
width: 68px;
height: 68px;
margin-right: 8px; }
.content-box__content--padding-242440 {
padding: 24px; }
@media (min-width: 576px) {
.content-box__content--padding-242440 {
padding: 24px 24px 40px; } }
.content-box__content--padding-24 {
padding: 24px; }
@media (min-width: 576px) {
.content-box--border-right {
border-right: 1px solid #EBEEF5; } }
.content-box--padding-right-16 {
padding-right: 16px; }
.content-box.content-box--iconfont {
height: 121px;
text-align: center; }
@media (min-width: 576px) {
.content-box.content-box--iconfont {
height: 165px; } }
.content-box.content-box--iconfont .content-box__content {
padding: 31px 16px 16px; }
@media (min-width: 576px) {
.content-box.content-box--iconfont .content-box__content {
padding: 64px 16px 16px; } }
.content-box.content-box--image .content-box--marginLeft40 .content-box__content {
margin-left: 0; }
.content-box.content-box--image .content-box__block-image {
position: relative;
width: 232px; }
.content-box.content-box--image .content-box__block-image .content-box__block-image--img {
width: 176px;
height: 176px;
z-index: 0;
margin: 0 0 -40px; }
.content-box.content-box--image .content-box__block-image .content-box__square {
width: 56px;
position: absolute;
right: 0;
height: 56px;
bottom: 0;
z-index: -1;
margin: auto; }
.content-box--marginLeft40 {
margin-left: 32px; }
@media (min-width: 576px) {
.content-box--marginLeft40 {
margin-left: 40px; } }
.content-box__line {
height: 3px;
width: 100%; }
.content-box__line-45 {
width: 45px; }
.content-box--noheight {
height: auto; }
.content-box.content-box--aside .content-box__square {
width: 50px;
height: 50px;
margin: 0 16px 0 0;
text-align: center; }
.content-box.content-box--aside .content-box__square .icon {
line-height: 50px; }
.content-box.content-box--aside .content-box--marginLeft66 {
margin-left: 66px; }
.content-box.content-box--aside .content-box-simple {
height: auto; }
.content-box__desc {
margin-bottom: 1rem;
display: inline-block;
padding: 0 .5rem;
background-color: #FF821C; }
.content-box--news .content-box__content {
padding: 24px 40px 40px 40px; }
.content-box--news .section-heading__title {
line-height: 32px;
margin-top: 24px; }
.destacado-privada {
padding: 24px; }
@media (min-width: 576px) {
.destacado-privada {
padding: 24px 40px 24px 24px; } }
@media (min-width: 576px) {
.destacado-privada__title {
margin-left: 16px; } }
.video {
position: relative;
/**** Partnet ****/
/** doble nomenclatura por causa del gestor para PARTNET **/ }
@media (min-width: 768px) {
.video .video__background-text {
font-weight: 900;
font-size: 160px;
line-height: 200px;
color: #F7FAFF;
position: absolute;
z-index: 0;
right: 0;
text-align: right;
top: -110px; } }
@media (min-width: 1200px) {
.video .video__background-text {
font-size: 180px; } }
@media (min-width: 768px) {
.video.video__background--greyblack {
padding-top: 100px;
background: #f1f1f1;
background: -moz-linear-gradient(left, #f1f1f1 40%, #333333 40%);
background: -webkit-linear-gradient(left, #f1f1f1 40%, #333333 40%);
background: linear-gradient(to right, #f1f1f1 40%, #333333 40%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#333333', GradientType=1);
color: #FFF; } }
.video .video__container {
position: relative;
height: 153px; }
.video .video__container:before {
content: '';
display: block;
position: absolute;
width: 144px;
height: 144px;
left: -24px;
bottom: -24px; }
@media (min-width: 576px) {
.video .video__container {
height: 220px; }
.video .video__container:before {
bottom: -20px;
left: 0;
width: 144px;
height: 144px; } }
@media (min-width: 768px) {
.video .video__container {
height: 172px; }
.video .video__container:before {
bottom: -20px;
left: 0;
width: 144px;
height: 144px; } }
@media (min-width: 992px) {
.video .video__container {
height: 235px; }
.video .video__container:before {
bottom: -40px;
width: 215px;
height: 215px; } }
@media (min-width: 1200px) {
.video .video__container {
height: 290px; }
.video .video__container:before {
width: 263px;
height: 263px; } }
.video .video__container .video__container__player__image-wrapper {
overflow: hidden; }
.video .video__container .video__container__player {
background-color: #B5F0EF;
z-index: 1;
position: absolute;
right: 0;
width: 272px;
height: 100%; }
.video .video__container .video__container__player.video__container__player_full-size {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1100;
width: auto; }
.video .video__container .video__container__player.video__container__player_full-size .video__container__controls .video__container__controls__play,
.video .video__container .video__container__player.video__container__player_full-size .video__container__controls .video__container__controls__pause {
bottom: 24px; }
.video .video__container .video__container__player.video__container__player_full-size .video__container__controls .video__container__controls__bottom-bar {
height: 96px;
line-height: 96px; }
.video .video__container .video__container__player.video__container__player_full-size .video__container__controls .video__container__controls__timeline {
bottom: 0; }
.video .video__container .video__container__player.video__container__player_full-size .video__container__controls .video__container__controls__timeline:hover {
height: 8px;
bottom: 0; }
.video .video__container .video__container__player iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
.video .video__container .video__container__player img {
width: auto;
height: 100%; }
.video .video__container .video__container__player img.oculto {
opacity: 0; }
.video .video__container .video__container__player img.visible {
opacity: 1;
position: relative; }
.video .video__container .video__container__player img.visible-movil {
opacity: 1; }
@media (min-width: 576px) {
.video .video__container .video__container__player {
width: 305px; } }
@media (min-width: 992px) {
.video .video__container .video__container__player {
width: 415px; } }
@media (min-width: 1200px) {
.video .video__container .video__container__player {
width: 515px; } }
.video .video__container .video__container__player .video__container__controls .video__container__controls__play,
.video .video__container .video__container__player .video__container__controls .video__container__controls__pause {
position: absolute;
right: 24px;
bottom: -24px;
z-index: 3; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__bottom-bar {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 48px;
line-height: 48px;
overflow: hidden;
color: #FFF; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__bottom-bar .video__container__controls__bottom-bar__mask {
will-change: transform;
transition-property: transform;
transition-duration: 0.116s;
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: rgba(25, 27, 28, 0.4);
transform: translate(0, 100%);
padding-left: 16px; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__bottom-bar button {
color: #FFF;
width: 32px; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__bottom-bar .video__container__controls__timer {
font-size: 12px;
color: #FFF;
margin-left: 8px; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__timeline {
position: absolute;
bottom: -4px;
left: 0;
height: 4px;
width: 100%;
cursor: pointer;
z-index: 2;
will-change: opacity;
transition-property: all;
transition-duration: 0.166s;
transition-delay: 0s;
transition-timing-function: linear; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__timeline:hover {
height: 8px;
bottom: -8px; }
.video .video__container .video__container__player .video__container__controls .video__container__controls__timeline .video__container__controls__current {
height: 100%;
width: 0%;
background-color: #FF821C; }
.video .video__container .video__container__player:hover .video__container__controls__bottom-bar .video__container__controls__bottom-bar__mask {
transform: translate(0, 0); }
.video.video_yellow .video__container:before {
background-color: #FED430; }
.video.video_green .video__container:before {
background-color: #007A68; }
.video.video_cyan .video__container:before {
background-color: #B5F0EF; }
.video.video--gray-business .video__container:before {
background-color: #4B575D; }
.video.video--gray-dark .video__container:before, .video.video_gray-dark .video__container:before {
background-color: #191B1C; }
.video.video_negro .video__container:before {
background-color: #191B1C; }
.video.video_bkj-yellow .video__container:before {
background-color: #FFE700; }
.video.video_bkj-turquoise .video__container:before {
background-color: #37ECC7; }
.video.video_bkj-blue .video__container:before {
background-color: #08C3FF; }
.video.video_bkj-red .video__container:before {
background-color: #FF4169; }
.video.video_negro-second .video__container:before {
background-color: #191B1C; }
.video .video__right-side {
display: flex;
flex-direction: column;
justify-content: center; }
.video .video__title {
font-family: "BK-Text";
line-height: 1.25; }
.video.video--background-small .video__background-text {
font-size: 120px;
text-align: left;
left: 0;
top: -90px; }
.video.video--background-small .video__title {
margin-top: 40px; }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Modal
## Descripción
El bloque `.modal` representa un componente que tiene la función de ventana emergente, puede contener todo tipo de contenido.
Se compone de los siguientes elementos:
Botón de activación:
* `.launch-modal`: Clase que identifica al botón del modal.
* `data-target="modal"`: Atributo que asigna el botón al modal, su valor debe ser el mismo que el del "Id".
La propia modal:
* `id="modal"`: id con el que se referencia al enlace que debe activar el modal.
* `data-close-backdrop="true"`: Atributo referente al estado del background que cubre todo el contenido de la página.
* `arialabelby="idTituloDeLaModal"`: Su valor debe ser el mismo que el id del heading o título de la modal.
* `.modal__backdrop`: Etiqueta que genera el background que cubre todo el contenido de la página.
* `.modal__content`: Contenido del modal.
* `.modal__content__header`: Cabecera del contenido del modal.
* `.modal__close-button`: Botón que cierra y desactiva el modal.
* `.modal__content__header__title`: Título de la cabecera del contenido del modal.
* `.modal__content__body`: Cuerpo del contenido del modal, va acompañado por el componente `.ss-container` y `ss-container` ya que así tendrá un scroll personalizado si el contenido desborda el modal.
* `.modal__content__footer`: Pie del contenido del modal.
* `.modal__content__message`: Sección que puede mostrar otro contenido como un mensaje de alerta, se muestra con una sección que se superpone al modal.
## Estructura
#### Botón Modal
```html
Modal
```
#### Modal
```html
Comisiones:
Ningún depósito o IPF tiene comisiones.
Tipos de interés
Los tipos de interés de las IPFs varían en función de los plazos escogidos. Para ver los tipos de interés vea
nuestro catálogo de depósitos.
Si contrata un depósito con Renovación automática, el tipo de interés que se aplicará al nuevo depósito será
el vigente para el mismo plazo un día hábil antes de la fecha efectiva de la renovación.
```
### Ejemplo modal simple
```html_example
Modal
Comisiones:
Ningún depósito o IPF tiene comisiones.
Tipos de interés
Los tipos de interés de las IPFs varían en función de los plazos escogidos.
```
### Ejemplo modal con política de privacidad
```html_example
Modal
Comisiones:
Ningún depósito o IPF tiene comisiones.
Tipos de interés
Los tipos de interés de las IPFs varían en función de los plazos escogidos. Para ver los tipos de interés vea
nuestro catálogo de depósitos.
Si contrata un depósito con Renovación automática, el tipo de interés que se aplicará al nuevo depósito será
el vigente para el mismo plazo un día hábil antes de la fecha efectiva de la renovación.
Liquidación
Los intereses netos que muestra el simulador están colocados suponiendo que la liquidación del depósito se
realiza al vencimiento y ya descuentan la retención.
En los depósitos a plazo inferior a un año, el método utilizado para el cálculo de interés es el método lineal
que responde a la siguiente fórmula:
Intereses netos = (Capital * ti nominal *días)/36500
En los años bisiestos, el cálculo de los intereses se hará con base 36600.
En los depósitos a plazos superiores a un año, según la circular 4.91 del Banco de España norma 5, para el
cálculo de intereses se ha aplicado el método financiero que responde a la siguiente fórmula:
Intereses netos = Capital * (1+i)ˆn - Capital
i es el TAE/100
Cancelación anticipada
Puede solicitarse por Internet en cualquier momento.
Forma de cancelación: indica el tipo de interés nominal de cancelación definido para ese producto, siendo posibles
los siguientes valores:
Normal: el depósito se cancelará en función de la evolución de los tipos en mercado.
Tipo fijo único: existe un tipo de interés fijo (por ejemplo: 0,25%) que se aplicará a la cancelación durante
toda la vida del depósito.
Tipo fijo por tramos: se aplicará un tipo de interés diferente en función de la vida del depósito.
Ejemplo para un depósito a 1 año:
desde inicio hasta 6 meses: 0,25%
desde 6 meses hasta vencimiento: 1%
Tipo variable único: se aplicará un diferencial (por ejemplo, -1%) que habrá que restar al tipo de interés
vigente del depósito hasta el momento de la cancelación.
Tipo variable por tramos: se aplicará un diferencial distinto en función de la vida del depósito. Este diferencial
se restará al tipo de interés vigente del depósito en el momento de la cancelación.
Ejemplo para un depósito a 1 año:
desde inicio hasta 6 meses: -1%
desde 6 meses hasta vencimiento: -0,25%
tipo de interés/diferencial en cancelación: en función de la forma de cancelación definida para el producto
nos muestra el tipo de interés o el diferencial recomendado.
Liquidación: el cálculo de la liquidación de intereses netos que se muestra anteriormente se hará siempre que
la liquidación se haga al vencimiento del depósito y ya se descuenta la retención fiscal.
```
## Modificadores para IE en Modales pequeñas (max-height:350px)
En modales pequeñas ponemos el modificador modal__content--small.
``` html
```
En modales pequeñas/medianos con contenidos que cambian en altura (tipo: botones que despliega contenido dentro del modal),
el modificador "modal__content--small-limited" da altura fija al contenido.
``` html
```
Cuando necesitas mostrar un texto legal o el mensaje de confimación de un formulario dentro del modal tienes una opción:
* `.modal__message`: Este elemento contiene todo el contenido que aparece como si fuera un segundo modal.
* `.modal__message-show`: Este elemento es el que tiene la funcionalidad de activar el `.modal__message`, es recomendable que sea un `Modal
Información sobre el uso de datos de carácter personal
1. ¿Quién es el responsable del tratamiento?
2. ¿Con qué finalidades tratamos sus datos?
3. ¿Cuáles son las bases legítimas para el tratamiento de sus datos?
4. ¿Quiénes recibirán sus datos?
5. ¿Durante cuánto tiempo trataremos sus datos?
6. ¿Qué derechos le amparan en relación al tratamiento de sus datos?
7. ¿Dónde puede obtener más información sobre el tratamiento de sus datos?
enlace .
Cerrar
```
## Javascript
Se añadira el script `` para que el componente tenga funcionalidad.
*/
.modal {
position: fixed;
z-index: 1050;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none; }
.modal.opened {
display: block; }
.modal .container {
height: 100%; }
.modal .container .row:not(.flex-table__rows) {
height: 100%; }
.launch-modal:focus {
border: 1px solid #191B1C; }
.modal--opened {
display: block; }
.message_opened .modal__content__message,
.message_opened .modal__message,
.modal--message-opened .modal__content__message,
.modal--message-opened .modal__message {
display: flex; }
.confirmation_opened .call-me__form__message,
.confirmation_opened .call-me__message,
.modal--confirmation-opened .call-me__form__message,
.modal--confirmation-opened .call-me__message {
display: block; }
.modal__container,
.modal__row {
height: 100%; }
.modal__backdrop {
background-color: rgba(43, 49, 51, 0.6);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0; }
.modal__content {
background-color: #FFF;
position: absolute;
padding: 40px 40px;
max-height: 90%;
min-height: 240px;
width: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
flex-direction: column; }
@media (max-width: 767.98px) {
.modal__content {
left: 0;
position: fixed;
bottom: 0;
transform: translate(0);
top: auto;
max-height: 92%; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.modal__content {
height: 560px; }
.modal__content.modal__content--small {
height: auto;
max-height: 350px; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.modal__content.modal__content--auto-height-IE {
height: auto; } }
.modal__content.modal__content--small-limited {
height: 430px; }
.modal__content.modal__content--small-limited .modal__footer {
height: 50px; }
.modal__content.modal__content--small-limited .modal__body {
height: calc(100% - 50px); }
.modal__content.modal__content-cookies {
padding: 40px; }
.modal__content.modal__content-cookies .btn--primary {
margin-right: 24px; }
.modal__content.modal__content-cookies .btn--primary:focus {
margin-left: 5px; }
@media (max-width: 767.98px) {
.modal__content.modal__content-cookies {
padding: 16px; }
.modal__content.modal__content-cookies .modal__content__body__switch-btn {
justify-content: flex-start !important; } }
.modal__content--firma {
padding: 40px 24px; }
@media (max-width: 767.98px) {
.modal__content--firma {
height: 504px; } }
.modal__content--carousel {
padding: 40px 0; }
@media (max-width: 991.98px) {
.modal__content--carousel {
padding: 24px; } }
.modal__content--carousel .carousel__pagination {
position: relative;
z-index: 100;
transform: none;
left: 0; }
.modal__close-button {
position: absolute;
right: 24px;
top: -24px;
z-index: 1; }
.modal__close-button .icon {
line-height: 20px; }
.modal__content__header__title,
.modal__title {
font-family: "BK-Text"; }
.modal__content__body,
.modal__body {
flex-direction: column;
display: flex;
background: white;
font-size: 0.875rem;
z-index: 4;
overflow: hidden;
height: auto; }
.modal__content__body.ss-container,
.modal__body.ss-container {
display: flex;
position: relative;
height: 80%; }
.modal__content__body.ss-container .ss-content,
.modal__body.ss-container .ss-content {
display: block; }
.modal__content__footer {
margin-top: 5px; }
.modal__content__message,
.modal__message {
flex-direction: column;
display: none;
background: white;
font-size: 0.875rem;
position: absolute;
left: 34px;
top: 40px;
bottom: 40px;
right: 34px;
height: 90%;
overflow: hidden;
z-index: 5; }
.modal__content__message .btn,
.modal__message .btn {
width: 100%; }
.modal__content__message .ss-container,
.modal__message .ss-container {
margin-bottom: 16px;
display: flex;
position: relative;
height: 67%; }
.message__title,
.modal__message-title {
font-family: "BK-Text"; }
.modal__image {
position: relative;
padding: 40px;
height: auto;
min-height: 240px;
width: 100%;
transform: translate(-45%, -50%);
top: 50%;
left: 50%;
display: flex;
flex-direction: column-reverse;
background: white; }
.modal__image img {
position: absolute;
top: 0;
left: 0;
z-index: -1; }
.modal__body--image {
min-height: 268px; }
.modal__body--image .select__custom-select-menu {
height: 128px; }
@media (min-width: 992px) {
.modal__body--image .select__custom-select-menu {
height: 144px; } }
.modal__image__claim {
color: white; }
.modal-filtro {
position: fixed;
z-index: 1050;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none; }
.modal-filtro.opened {
display: block; }
.modal-filtro .action-bar--filter {
position: fixed;
bottom: 42px;
width: 104px;
left: 50%;
margin-left: -52px; }
@media (max-width: 991.98px) {
.modal-filtro .action-bar--filter {
bottom: 24px; } }
.modal-filtro__backdrop {
background-color: #FFF;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0; }
.modal-filtro--opened {
display: block; }
.modal-filtro__content {
background-color: #FFF;
position: relative;
padding: 42px;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
flex-direction: column; }
@media (max-width: 991.98px) {
.modal-filtro__content {
padding: 24px; } }
.modal-filtro__content__body {
background: white;
font-size: 0.875rem; }
.modal-filtro__content__body.ss-container {
display: flex;
position: relative;
height: 80%; }
.modal-filtro__content__body.ss-container .ss-content {
display: block;
padding: 0 4px; }
@media (max-width: 991.98px) {
.modal-filtro__content__body.ss-container .ss-content {
padding-right: 0 !important; } }
.modal-filtro__content__body.ss-container .ss-scroll {
right: -16px; }
@media (max-width: 991.98px) {
.modal-filtro__content__body.ss-container .ss-scroll {
right: -9999px; } }
.modal-filtro__content__body .filter {
width: 97%;
justify-content: center;
display: flex; }
.modal-filtro__content__body .filter .filter--selector {
margin: 0;
width: 100% !important; }
.modal-filtro__content__body .filter .filter--selector .filter__selector--with-searcher {
margin: 0; }
.modal-filtro__content__body .filter .filter--selector .filter__selector--with-searcher .filter__selector-searcher {
padding-left: 0; }
.modal-filtro__content__body .filter .filter--selector .filter__selector--with-searcher .filter__selector-searcher .filter__selector-searcher-icon {
left: 16px; }
.modal-filtro__content__body .filter .filter--selector .filter__selector-content .ss-content {
padding-right: 0 !important; }
.modal-filtro__content__body .filter .filter--selector .filter__selector-option {
margin-left: 0; }
.modal-filtro__content__body .filter .filter__content {
width: 100% !important;
margin-right: 0; }
.modal-filtro__content__body .filter .input-rounded {
margin: 0; }
.modal-filtro__content__body .filter .input-rounded--search {
margin: 8px 0 8px 0;
width: 100%; }
.modal-filtro__content__body .filter .input-rounded--search .input-rounded__icon {
left: 8px; }
.modal-filtro__content__body .filter .input-rounded--search .input-rounded__input {
padding-left: 30px; }
.filters ul {
display: flex; }
.filters li {
flex: 1 0 auto; }
.filters .filters__element {
width: 100%;
height: 56px;
line-height: 56px;
color: #191B1C;
background-color: #EBEEF5;
padding-left: 24px;
text-align: left;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent; }
.filters .filters__element:hover {
color: #191B1C;
background-color: #F7FAFF; }
.filters .filters__element:focus {
border-bottom: 3px solid #191B1C;
color: #191B1C;
background-color: #EBEEF5; }
.filters .filters__element.filters__element_active {
color: #191B1C;
border-bottom-color: transparent;
border-top-color: #FF821C;
background-color: #FFF; }
.filters .filters__element.filters__element_active:focus {
border-top: 3px solid #3E4A50;
background-color: #EBEEF5;
border-bottom-color: transparent;
border-top-color: #191B1C; }
.filters.tabs .filters__element {
color: #191B1C;
background-color: #EBEEF5;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent; }
.filters.tabs .filters__element.filters__element--regular-font {
font-size: 1rem; }
.filters.tabs .filters__element:hover {
color: #191B1C;
background-color: #F7FAFF; }
.filters.tabs .filters__element:focus {
border-bottom: 3px solid #191B1C;
color: #191B1C;
background-color: #EBEEF5; }
.filters.tabs .filters__element.filters__element_active {
color: #191B1C;
border-bottom-color: transparent;
border-top-color: #FF821C;
background-color: #FFF; }
.filters.tabs .filters__element.filters__element_active:focus {
border-top: 3px solid #3E4A50;
background-color: #EBEEF5;
border-bottom-color: transparent;
border-top-color: #191B1C; }
@media (max-width: 767.98px) {
.filters {
overflow: hidden;
overflow-x: auto; }
.filters li {
flex: 1 0 226px; } }
@media (max-width: 991.98px) {
.filters.filters--large {
overflow: hidden;
overflow-x: auto; }
.filters.filters--large li {
flex: 1 0 226px; } }
.filter__boxes {
position: relative;
padding-top: 60px;
align-items: stretch; }
.filter__boxes.filter__boxes_truncated {
overflow: hidden;
height: 1140px; }
@media (min-width: 768px) {
.filter__boxes.filter__boxes_truncated {
height: 770px; } }
@media (min-width: 992px) {
.filter__boxes.filter__boxes_truncated {
height: 870px; } }
@media (min-width: 1200px) {
.filter__boxes.filter__boxes_truncated {
height: 800px; } }
.filter__boxes--no-image {
padding-top: 0; }
.filter__boxes__show-all {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFF 60%);
background-repeat: repeat-x;
padding-top: 160px;
height: 248px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2; }
.tabs ~ .filter__boxes {
align-items: normal;
padding-top: 40px; }
.filter__additional-info {
padding: 8px 16px;
min-height: 32px;
font-size: 0.75rem;
line-height: 16px;
background: #F7FAFF;
border-radius: 4px; }
.filter__additional-info p {
margin-bottom: 0; }
.pika-single {
z-index: 9999;
display: block;
position: relative;
color: #333;
background: #FFF;
border: none;
*zoom: 1; }
.pika-single.is-hidden {
display: none; }
.pika-single.is-bound {
position: absolute;
box-shadow: 0 3px 9px 1px rgba(43, 49, 53, 0.16); }
.pika-single:before {
content: " ";
display: table; }
.pika-single:after {
content: " ";
display: table;
clear: both; }
.pika-lendar {
float: none;
width: 100%;
box-shadow: none;
padding: 24px; }
.pika-title {
position: relative;
text-align: center;
margin-bottom: 16px; }
.pika-label {
display: inline-block;
*display: inline;
position: relative;
z-index: 9999;
overflow: hidden;
margin: 0;
padding: 5px 3px;
font-size: 0.75rem;
line-height: 1.33;
font-weight: 700;
background-color: #FFF;
color: #FF821C;
text-transform: uppercase;
z-index: 0; }
@media (max-width: 575.98px) {
.empresas-theme .pika-single {
width: 100%; } }
.empresas-theme .pika-label {
color: #191B1C; }
.empresas-theme .pika-button {
font-size: 12px; }
.empresas-theme .pika-title {
margin-bottom: 0; }
.empresas-theme .pika-lendar {
padding: 24px; }
@media (min-width: 768px) {
.empresas-theme .pika-lendar {
width: 360px; } }
@media (min-width: 992px) {
.empresas-theme .pika-lendar {
width: 305px; } }
@media (min-width: 1200px) {
.empresas-theme .pika-lendar {
width: 365px; } }
@media (max-width: 575.98px) {
.empresas-theme .pika-lendar {
max-width: 320px;
box-shadow: none;
padding: 24px; } }
.pika-title select {
cursor: pointer;
position: absolute;
z-index: 9998;
margin: 0;
left: 0;
top: 5px;
filter: alpha(opacity=0);
opacity: 0; }
.pika-prev,
.pika-next {
display: block;
cursor: pointer;
position: relative;
outline: none;
border: 0;
padding: 0;
width: 20px;
height: 30px;
text-indent: 20px;
white-space: nowrap;
overflow: hidden;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: 75% 75%;
*position: absolute;
*top: 0; }
.pika-prev:hover,
.pika-next:hover {
opacity: 1; }
.pika-prev,
.is-rtl .pika-next {
float: left;
*left: 0; }
.pika-next,
.is-rtl .pika-prev {
float: right;
*right: 0; }
.empresas-theme .pika-prev::before,
.empresas-theme .pika-next::before {
color: #191B1C; }
.pika-prev::before,
.pika-next::before {
color: #FF821C;
text-indent: 0;
font-family: "BK-icons";
content: "\e966";
position: absolute;
rotate: translate(0, -50%);
width: 24px;
height: 24px;
font-size: 1.25rem; }
.pika-prev::before {
transform: translateY(-50%) rotate(180deg);
top: 50%;
left: 0; }
.pika-next::before {
transform: translateY(-78%);
top: 50%;
right: 0; }
.pika-prev.is-disabled,
.pika-next.is-disabled {
cursor: default;
opacity: 0.2; }
.pika-select {
display: inline-block;
*display: inline; }
.pika-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 0; }
.pika-table-intranet td {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
border: 0;
margin: 0;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 13px;
border-radius: 0;
text-align: center;
vertical-align: middle;
color: #191B1C; }
.pika-table th,
.pika-table td {
width: 14.285714285714286%;
padding: 0;
position: relative;
height: 40px; }
.pika-table th {
padding-bottom: 0;
color: #5D6B72;
font-size: 11px;
font-weight: bold;
line-height: 1.33;
font-weight: bold;
text-align: center; }
.pika-button {
cursor: pointer;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
border: 0;
margin: 0;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 13px;
border-radius: 50%;
text-align: center;
color: inherit; }
.pika-week {
font-size: 0.75rem; }
.empresas-theme .is-today .pika-button {
color: #191B1C;
background: #EBEEF5; }
.is-today .pika-button {
color: #191B1C;
font-weight: bold;
background: #EBEEF5; }
.empresas-theme .is-selected {
background-color: transparent; }
.empresas-theme .is-selected .is-startrang .pika-button,
.empresas-theme .has-event .pika-button, .empresas-theme .is-selected .pika-button {
background: #FED430;
font-weight: bold;
color: #191B1C; }
.is-selected.is-endrange button {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.is-selected.is-endrange .pika-button:hover:hover {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important; }
.is-selected .is-startrang .pika-button,
.has-event .pika-button, .is-selected .pika-button {
color: #191B1C;
background: #A4EAE9;
border-radius: 50%;
font-weight: bold; }
.has-event .pika-button {
background: #005da9;
box-shadow: inset 0 1px 3px #0076c9; }
.empresas-theme .is-inrange .pika-button {
background-color: #FEE997; }
.empresas-theme .is-inrange .pika-button:hover {
background-color: #FEE997;
font-weight: bold;
border-radius: none;
width: 100%; }
.is-inrange .pika-button {
background: #D3F6F5;
color: #191B1C;
border-radius: 0;
width: 100%; }
.is-inrange .pika-button:hover {
background: #D3F6F5;
color: #191B1C;
border-radius: 0;
width: 100%;
font-weight: bold; }
.is-disabled .pika-button {
background: #FFF; }
.empresas-theme .is-startrange {
background: #FFF;
background: -moz-linear-gradient(left, #FFF 50%, #FED430 50%, #FEE997 50%);
background: -webkit-linear-gradient(left, #FFF 50%, #FED430 50%, #FEE997 50%);
background: linear-gradient(to right, #FFF 50%, #FEE997 50%, #FEE997 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$white', endColorstr='$bk-amarillo-25', GradientType=1); }
.empresas-theme .is-startrange .pika-button {
background-color: #FED430;
font-weight: bold; }
.is-startrange {
background: #FFF;
background: -moz-linear-gradient(left, #FFF 50%, #2989d8 50%, #D3F6F5 50%);
background: -webkit-linear-gradient(left, #FFF 50%, #2989d8 50%, #D3F6F5 50%);
background: linear-gradient(to right, #FFF 50%, #2989d8 50%, #D3F6F5 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$white', endColorstr='$bk-azul-25', GradientType=1); }
.is-startrange .pika-button {
color: #191B1C;
background: #A4EAE9;
box-shadow: none;
font-weight: bold;
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.empresas-theme .is-endrange {
background: #FFF;
background: -moz-linear-gradient(right, #FFF 50%, #FED430 50%, #FEE997 50%);
background: -webkit-linear-gradient(right, #FFF 50%, #FED430 50%, #FEE997 50%);
background: linear-gradient(to left, #FFF 50%, #FEE997 50%, #FEE997 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$white', endColorstr='$bk-amarillo-25', GradientType=1); }
.empresas-theme .is-endrange .pika-button {
background-color: #FED430; }
.is-endrange .pika-button {
color: #191B1C;
background: #A4EAE9;
box-shadow: none; }
.is-endrange .pika-button:hover {
background: #A4EAE9;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.is-disabled .pika-button {
pointer-events: none;
cursor: default;
color: #999;
opacity: 0.3; }
.is-outside-current-month .pika-button {
color: #999;
opacity: 0.3; }
.is-selection-disabled {
pointer-events: none;
cursor: default; }
.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button:hover {
background: #A4EAE9; }
.empresas-theme .pika-button:hover,
.empresas-theme .pika-row.pick-whole-week:hover .pika-button:hover {
background: #FED430; }
.pika-table abbr {
border-bottom: none;
text-decoration: none; }
/*ESTILOS FROM - TO PIKADAY*/
.pikaday--from-to .is-inrange {
background-color: #EBEEF5; }
.pikaday--from-to .is-inrange .pika-button {
background-color: #EBEEF5; }
.pikaday--from-to .is-startrange {
box-shadow: inset 20px 0px 0px 0px #FFF; }
.pikaday--from-to .is-endrange {
box-shadow: inset -20px 0px 0px 0px #FFF; }
.datepicker--from-to {
border: 1px solid #AFB5C8;
border-radius: 4px; }
.datepicker--from-to.form__group {
min-height: auto;
padding: 0; }
.datepicker--from-to .input {
border: none;
width: 50%;
padding-right: 0; }
.datepicker--from-to .input .input__control {
padding: 15px 0px 0px 15px; }
.datepicker--from-to .input--is-error {
border-radius: 4px; }
.datepicker--from-to .icon {
color: #5c6780;
margin: 18px 5px 0px 5px; }
@media (min-width: 1200px) {
.datepicker--from-to .icon {
margin: 15px 8px 15px 8px; } }
.input[data-input] .format_date[type=date] {
color: #FFF; }
.input[data-input].input--has-content .format_date[type=date], .input[data-input].input--has-focus .format_date[type=date] {
color: #5c6780; }
.format_date[type=date] {
-webkit-appearance: none; }
.format_date[type=date]::-webkit-clear-button {
-webkit-appearance: none;
display: none; }
@media (max-width: 575.98px) {
.calendar-container {
position: absolute;
left: -24px;
right: -24px; } }
.calendar-container .pika-lendar {
float: none;
width: 100%;
box-shadow: none;
padding: 24px; }
@media (max-width: 575.98px) {
.calendar-container .pika-single.is-bound {
position: relative !important; } }
.calendar-container .pika-title {
padding: 0 12px;
margin-bottom: 0; }
.calendar-container .pika-label {
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
line-height: 16px;
text-align: center; }
.calendar-container .pika-button {
font-size: 12px; }
.calendar-container .is-startrange button {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.calendar-container .is-endrange button {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.calendar-container .pika-select {
display: none; }
/*md
# Spinner
## Descripción
El componenete spinner nos indica que estamos esperando a que una acción se de por finalizada.
Se compone de los siguientes elementos:
* `.spinner`: clase para utilizar el componente.
Y tiene los siguientes modificadores:
* `.spinner--small` Spinner de tamaño 20x20
* `.spinner--blue` Spinner de color azul cyan
* `.spinner--orange` Spinner de color naranja
* `.spinner--white` Spinner de color blanco
## Estructura
```html
```
## Modificadores
### Spinner small
Spinner de tamño 20x20
```html_example
```
### Spinner Orange
Spinner de color naranja de la variable $bk-naranja
```html_example
```
### Spinner Blue
Spinner de color azul de la variable $bk-azul-100-100
```html_example
```
### Spinner white
Spinner de color azul de la variable $white
```html_example
```
*/
@keyframes spinner-rotation {
0% {
transform: rotate(0deg); }
50% {
transform: rotate(180deg); }
100% {
transform: rotate(360deg); } }
@keyframes waiting-scale {
0%,
80%,
100% {
transform: scale(0); }
40% {
transform: scale(1); } }
.spinner {
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
margin: 10px auto;
border: 2px solid transparent;
animation: spinner-rotation 1s infinite linear;
border-color: #2CDE73 #2CDE73 #2CDE73 transparent; }
.spinner.spinner_small {
width: 20px;
height: 20px; }
.spinner.spinner_orange {
border-color: #F76900 #F76900 #F76900 transparent; }
.spinner.spinner_white {
border-color: #FFF #FFF #FFF transparent; }
.spinner.spinner_blue {
border-color: #B5F0EF #B5F0EF #B5F0EF transparent; }
.spinner.spinner_bkj-yellow {
border-color: #FFE700 #FFE700 #FFE700 transparent; }
.spinner.spinner_bkj-turquoise {
border-color: #37ECC7 #37ECC7 #37ECC7 transparent; }
.spinner.spinner_bkj-blue {
border-color: #08C3FF #08C3FF #08C3FF transparent; }
.spinner.spinner_bkj-red {
border-color: #FF4169 #FF4169 #FF4169 transparent; }
.spinner.spinner_bkj-black {
border-color: #191B1C #191B1C #191B1C transparent; }
.waiting {
text-align: center;
height: 40px;
line-height: 40px;
font-size: 40px; }
.waiting div {
background-color: #FF821C;
height: 12px;
width: 12px;
display: inline-block;
animation: waiting-scale 1.6s infinite ease-in-out both; }
.waiting .waiting__rect2 {
animation-delay: -1.4s; }
.waiting .waiting__rect3 {
animation-delay: -1.2s; }
.spinner {
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
margin: 10px auto;
border: 2px solid transparent;
animation: spinner-rotation 1s infinite linear;
border-color: #2CDE73 #2CDE73 #2CDE73 transparent; }
.spinner.spinner--medium {
height: 33px;
width: 33px; }
.spinner.spinner--small {
width: 20px;
height: 20px; }
.spinner.spinner--orange {
border-color: #F76900 #F76900 #F76900 transparent; }
.spinner.spinner--white {
border-color: #FFF #FFF #FFF transparent; }
.spinner.spinner--blue {
border-color: #B5F0EF #B5F0EF #B5F0EF transparent; }
.spinner.spinner--black {
border-color: #191B1C #191B1C #191B1C transparent; }
/*md
# Cookies
Es un elemento que aparece en la parte inferior de la página con posición fixed y que contiene la información relativa a las cookies. Debe ir contenido en un div con el id `divCookie`, que a su vez englobará un `container` con un párrafo y un botón de cerrar.
Debe ir acompañado de ``.
```html_example
Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de cookies
Cerrar aviso de cookies
```
*/
#divCookie {
position: fixed;
bottom: 0;
width: 100%;
line-height: 1.69;
background-color: #F7FAFF;
z-index: 1031;
font-weight: bold; }
#divCookie .container {
position: relative;
padding: 32px 24px 16px; }
@media (min-width: 768px) {
#divCookie .container {
padding: 24px 60px 16px 24px; } }
@media (min-width: 992px) {
#divCookie .container {
padding: 16px 60px 16px 16px; } }
#divCookie .container p {
font-size: 0.875rem;
margin: 0; }
#divCookie .container .close {
position: absolute;
right: 8px;
top: -22px;
z-index: 1; }
/*md
# Botones NO BEM
Estos botones están en desuso
*/
.btn {
/** doble nombre por requisitos WEM */ }
.btn.btn_rounded {
min-width: 0;
width: 48px;
padding: 0; }
.btn.btn_rounded [class*="pictoDSL-"] {
display: block; }
.btn.btn_rounded-small {
min-width: 0;
width: 32px;
height: 32px;
padding: 0; }
.btn.btn_rounded-small:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #191B1C; }
.btn.btn_rounded-small [class*="pictoDSL-"] {
display: block; }
.btn.btn_block {
width: 100%; }
.btn [class*="pictoDSL-"] {
height: 100%;
width: 46px;
line-height: 46px;
font-size: 24px; }
.btn.btn_medium {
padding: 0 18px;
min-width: 120px;
width: auto;
font-size: 12px;
height: 32px;
line-height: 32px; }
.btn.btn_medium.btn_rounded {
min-width: 0;
width: 32px;
height: 32px;
padding: 0; }
.btn.btn_small {
padding: 0 18px;
min-width: 120px;
font-size: 12px;
height: 28px;
line-height: 28px;
text-align: center; }
.btn.btn_small [class*="pictoDSL-"] {
width: 28px;
line-height: 28px; }
.btn.btn_small.btn_rounded {
min-width: 0;
width: 28px;
height: 28px;
padding: 0; }
.btn.btn_tiny {
padding: 0 18px;
min-width: auto;
font-size: 12px;
height: 28px;
line-height: 28px; }
.btn.btn_tiny [class*="pictoDSL-"] {
width: 26px;
line-height: 26px;
font-size: 16px; }
.btn.btn_disabled {
background-color: #EBEEF5;
color: #AFB5C8;
border: none;
cursor: default;
pointer-events: none; }
.btn.btn_disabled[class*='secondary'] {
color: #5c6780;
background-color: transparent;
border: 1px solid #AFB5C8; }
.btn.btn_primary {
color: #191B1C;
background-color: #FF821C;
border: 1px solid #FF821C; }
.btn.btn_primary:hover, .btn.btn_primary:active:focus {
color: #191B1C;
background-color: #F76900; }
.btn.btn_primary.btn_disabled {
background-color: #EBEEF5;
color: #AFB5C8;
border: none;
cursor: none; }
.btn.btn_primary[disabled] {
background-color: #EBEEF5;
color: #AFB5C8;
border: none;
cursor: none; }
.btn.btn_secondary {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FF821C; }
.btn.btn_secondary:hover, .btn.btn_secondary:active:focus {
color: #191B1C;
background-color: #F76900; }
.btn.btn_secondary.btn_disabled {
color: #5c6780;
background-color: transparent;
border: 1px solid #AFB5C8; }
.btn.btn_secondary[disabled] {
color: #5c6780;
background-color: transparent;
border: 1px solid #AFB5C8;
cursor: none; }
.btn.btn_dark {
color: #FFF;
background-color: #191B1C;
border: 1px solid #191B1C; }
.btn.btn_dark:hover, .btn.btn_dark:active:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #F76900; }
.btn.btn_dark:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #191B1C; }
.btn.btn_dark[disabled] {
color: #AFB5C8;
background-color: #EBEEF5;
border: 1px solid #EBEEF5;
cursor: default;
pointer-events: none; }
.btn.btn_negative {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF; }
.btn.btn_negative:hover, .btn.btn_negative:active:focus {
color: #5c6780;
background-color: #FFF;
border: 1px solid #FFF; }
.btn.btn_gray-dark {
color: #FFF;
background-color: #191B1C;
border: 1px solid #191B1C; }
.btn.btn_gray-dark:hover, .btn.btn_gray-dark:active:focus {
color: #191B1C;
background-color: #FFF;
border: 2px solid #191B1C; }
.btn.btn_inverse {
color: #FFF;
background-color: #191B1C;
border: 2px solid #FF821C; }
.btn.btn_inverse:hover, .btn.btn_inverse:active:focus {
color: #5c6780;
background-color: #FFF;
border: 2px solid #FFF; }
.btn.btn_light {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF; }
.btn.btn_light:hover, .btn.btn_light:active:focus {
color: #191B1C;
background-color: #F7FAFF;
border: 1px solid #F7FAFF; }
.btn.btn_purple {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF; }
.btn.btn_purple:hover, .btn.btn_purple:active:focus {
color: #191B1C;
background-color: #EFF3FF;
border: 1px solid #EFF3FF; }
.btn.btn_purple:focus {
background-color: #FFF;
color: #191B1C;
border: 1px solid #191B1C;
box-shadow: 0 0 0 1px #FF821C; }
.btn.btn_purple.btn_disabled, .btn.btn_purple:disabled {
color: #AFB5C8;
background-color: #EBEEF5; }
.btn.btn_purple.btn_disabled:hover, .btn.btn_purple.btn_disabled:focus, .btn.btn_purple:disabled:hover, .btn.btn_purple:disabled:focus {
cursor: default;
border: 1px solid #FFF;
box-shadow: none; }
.btn.btn_purple-icon {
text-transform: none;
background-color: #FFF;
color: #191B1C;
border: 1px solid #FFF;
padding-left: 16px;
padding-right: 16px;
margin-right: 16px;
height: 28px;
line-height: 28px; }
.btn.btn_purple-icon .icon {
margin-right: 4px; }
.btn.btn_purple-icon:hover {
color: #191B1C;
background-color: #EFF3FF;
border: 1px solid #EFF3FF; }
.btn.btn_purple-icon:focus {
border: 1px solid #EFF3FF; }
.btn.btn_purple-icon.btn_disabled {
background-color: #EBEEF5;
color: #AFB5C8;
border: none; }
.btn.btn_purple--no-border {
background-color: #FFF;
color: #191B1C; }
.btn.btn_purple--no-border:hover, .btn.btn_purple--no-border:active:focus {
color: #191B1C;
background-color: #EFF3FF;
border: 1px solid #EFF3FF; }
.btn.btn_purple--no-border:focus {
background-color: #FFF;
color: #191B1C;
border: 1px solid #191B1C;
box-shadow: 0 0 0 1px #FF821C; }
.btn.btn_partner {
color: #FFF;
border: 1px solid #F76900;
background-color: #191B1C; }
.btn.btn_partner:hover {
background-color: #F76900;
color: #191B1C;
border: 1px solid #F76900; }
.btn.btn_partner:focus {
background-color: #F76900;
color: #191B1C;
border: 1px solid #191B1C;
box-shadow: 0 0 0 1px #FFF; }
.btn.btn_square {
border-radius: 0;
min-width: 0;
height: 2.5rem;
text-align: left;
padding: 0 18px;
line-height: 2.5rem; }
.btn.btn_square .icon--16 {
float: left;
margin-right: 12px;
line-height: 2.5rem;
font-size: 22px; }
.btn.no_width, .btn.no--width {
min-width: 0; }
.btn.btn_icon {
text-align: left;
min-width: auto;
padding-left: 16px;
padding-right: 16px; }
.btn.btn_icon [class^="icon--"] {
line-height: 28px; }
.btn.btn_icon [class*="pictoDSL-"] {
float: right;
margin-left: 12px; }
.btn.btn_small.btn_icon, .btn.btn_medium.btn_icon {
padding-left: 12px;
padding-right: 8px; }
.btn.btn_small.btn_icon [class^="icon--"], .btn.btn_medium.btn_icon [class^="icon--"] {
line-height: 22px; }
.btn.btn_small.btn_icon [class*="pictoDSL-"], .btn.btn_medium.btn_icon [class*="pictoDSL-"] {
margin-left: 6px; }
.btn.btn_tiny.btn_icon {
padding-left: 10px;
padding-right: 14px; }
.btn.btn_tiny.btn_icon [class^="icon--"] {
line-height: 20px; }
.btn.btn_tiny.btn_icon [class*="pictoDSL-"] {
margin-left: 0; }
.btn.btn_icon-left {
text-align: center;
min-width: auto;
padding-left: 16px;
padding-right: 16px; }
.btn.btn_icon-left [class^="icon--"] {
line-height: 22px;
margin-right: 8px; }
.btn.btn_icon-left [class*="pictoDSL-"] {
float: right;
margin-left: 12px; }
.btn.btn_small.btn_icon-left, .btn.btn_medium.btn_icon-left {
padding-left: 12px;
padding-right: 18px; }
.btn.btn_small.btn_icon-left [class^="icon--"], .btn.btn_medium.btn_icon-left [class^="icon--"] {
line-height: 12px;
margin-right: 8px; }
.btn.btn_small.btn_icon-left [class*="pictoDSL-"], .btn.btn_medium.btn_icon-left [class*="pictoDSL-"] {
margin-left: 6px; }
.btn.btn_loading, .btn.btn--loading {
position: relative; }
.btn.btn_loading.btn_loading_disabled, .btn.btn_loading.btn--loading-disabled, .btn.btn--loading.btn_loading_disabled, .btn.btn--loading.btn--loading-disabled {
color: transparent !important;
pointer-events: none;
cursor: default; }
.btn.btn_loading.btn_loading_disabled:after, .btn.btn_loading.btn--loading-disabled:after, .btn.btn--loading.btn_loading_disabled:after, .btn.btn--loading.btn--loading-disabled:after {
font-family: 'BK-icons';
content: '\e992';
width: 24px;
height: 24px;
line-height: 24px;
font-size: 24px;
color: #FF821C;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
animation: btnLoadingRotation 1s infinite linear; }
.btn.btn--toggle {
color: #191B1C;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
padding: 0;
text-decoration: none;
background-color: transparent;
border-radius: 0;
padding: 0;
display: inline-block;
height: auto;
line-height: 48px;
min-width: auto;
text-align: Left;
width: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none; }
@media (min-width: 768px) {
.btn.btn--toggle {
color: #FFF;
background-color: #FF821C;
border: 1px solid #FF821C;
display: inline-block;
border-radius: 32px;
padding: 0 24px;
font-size: 12px;
height: 48px;
min-width: 185px;
text-align: center;
width: auto; } }
.btn.btn--toggle > span {
display: inline-block; }
@media (min-width: 768px) {
.btn.btn--toggle > span {
display: none; } }
.btn.btn--32 {
height: 32px;
line-height: 32px; }
@keyframes btnLoadingRotation {
0% {
transform: translate(-50%, -50%) rotate(0deg); }
100% {
transform: translate(-50%, -50%) rotate(360deg); } }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Textarea
## Descripción
El textarea representa un elemento de entrada de texto multilínea. Se basa en el componente input, por lo que la estructura es la misma cambiando la etiqueta `
```
### Textarea con contador de caracteres
```html
```
## Javascript
Para iniciar el componente automáticamente debe declararse el atributo `data-input` en el elemento con la clase `.input`.
```html_example
Textarea
```
## Modificadores
### Has Content
Si se inicia mediante Javascript, éste se encarga de añadir y quitar la clase.
```html_example
Textarea
```
### Has Focus
Si se hace foco sobre el input, se añade la clase `.input--has-focus` y se quita en el evento blur.
Para `.input__group`, se añade además la clase `.input__group--has-focus` a este elemento.
```html_example
Textarea has focus
```
### Is Error, Is Warning, Is Success
Se puede indicar mediante `.input--is-error`, `.input--is-warning` y `.input--is-success` el estado de validación del control.
```html_example
Textarea has focus and is error
```
```html_example
Textarea has focus and is warning
```
```html_example
Textarea has focus and is success
```
### Is Disabled
```html_example
Textarea is disabled
```
### Expandible
```html_example
Textarea
```
## Variaciones
### Límite de caracteres
```html_example
```
*/
textarea.input__control {
min-height: 104px;
resize: none;
overflow: hidden;
padding-top: 24px; }
.input--expandible textarea.input__control {
min-height: 0; }
.input--expandible.input--has-focus, .input--expandible.input--has-content {
min-height: 104px; }
.textArea {
border: 1px solid transparent;
display: flex;
display: -ms-flexbox;
flex-direction: column; }
.textArea__wrapper {
border-radius: 4px;
width: auto;
max-height: 108px;
min-height: 62px;
background-color: white;
border: 1px solid #AFB5C8;
position: relative;
padding: 26px 8px 8px 16px; }
.textArea__container {
min-height: 24px;
max-height: 72px;
-webkit-user-select: none;
display: flex;
position: relative;
flex-direction: column; }
.textArea__container .ss-scroll {
right: -8px; }
.textArea__label {
position: absolute;
z-index: 1;
top: 30px;
transform: translate(0, -50%);
transition: all 0.166s ease-out;
color: #5c6780;
-webkit-touch-callout: none;
user-select: none;
pointer-events: none;
font-size: 14px; }
.textArea--has-content .textArea__label {
color: #191B1C;
font-size: 12px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 0.1;
transform: translate(0, -107%); }
.textArea__content {
font-size: 14px;
line-height: 24px;
white-space: pre-wrap;
color: #5c6780;
margin-bottom: 0; }
.textArea__content:focus {
outline: none;
border: 0 solid transparent; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.textArea__content br {
line-height: 25px;
display: block; } }
.textArea__content:empty:before {
content: attr(placeholder); }
.textArea__charNum {
color: #191B1C;
font-size: 14px;
line-height: 24px;
text-align: right; }
.textArea--error {
border-color: #DB2A21; }
.textArea--error .text-overload {
background-color: #FFB5B1;
color: #191B1C;
padding: 4px 0 3px;
line-height: 24px; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.textArea--error .text-overload {
line-height: 25px; } }
.textArea--focus {
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.16); }
.textArea--focus.textArea--error {
box-shadow: 0 0 0 4px rgba(219, 42, 33, 0.16); }
.textArea--disabled .textArea__label,
.textArea--disabled .textArea__container,
.textArea--disabled .textArea__charNum {
opacity: 0.6;
pointer-events: none;
color: #AFB5C8 !important; }
.textArea--disabled .textArea__wrapper {
border: 1px solid rgba(175, 181, 200, 0.6); }
.textArea--disabled .textArea--focus {
box-shadow: none; }
.textArea__placeholder.textArea__disabled .textArea__label {
opacity: 0.6;
pointer-events: none;
color: #AFB5C8; }
.textArea__placeholder.textArea__disabled .textArea__container span {
opacity: 0.6;
pointer-events: none; }
.textArea__placeholder .textArea__label {
color: #191B1C;
font-size: 12px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 0.1;
transform: translate(0, -107%); }
.textArea__placeholder .textArea__content {
height: 0;
min-height: 0;
margin: 0; }
.textArea__placeholder .textArea__container {
overflow: hidden; }
.textArea__placeholder .textArea__container span {
font-size: 14px;
line-height: 24px; }
.textArea__placeholder .ss-scroll {
display: none; }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Tooltip
## Descripción
El tooltip es un elemento que sirve para mostrar mensajes o advertencias, funciona como un mensaje oculto que se muestra al pasar por encima en un elemento.
Se compone de los siguientes elementos:
* El bloque `.tooltip` representa el contenedor del componente, dentro del cual tendremos el elemento visual inicial junto con el elemento emergente `.tooltip__text`.
* El elemento `.tooltip__text` representa el mensaje que se va a mostrar.
* El atributo `[data-position="bottom"]` posiciona el elemento, tiene 4 opciones: bottom, top, left, right. El script recoloca el elemento emergente hacia el lado opuesto si éste no fuera visible en pantalla.
Y tiene los siguientes modificadores:
* `.tooltip--dark`: Cambia el color del texto y el background del mensaje.
## Estructura
```html
Mostrar ayuda
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloremque iure pariatur consequatur, temporibus suscipit molestias magni animi quaerat minus doloribus, laboriosam itaque ullam dolorem unde, necessitatibus illo quidem ipsa!
```
## Posiciones
#### Arriba
```html_example
Mostrar ayuda
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloremque iure pariatur consequatur, temporibus suscipit molestias magni animi quaerat minus doloribus, laboriosam itaque ullam dolorem unde, necessitatibus illo quidem ipsa!
```
#### Derecha
```html_example
Mostrar ayuda
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloremque iure pariatur consequatur, temporibus suscipit molestias magni animi quaerat minus doloribus, laboriosam itaque ullam dolorem unde, necessitatibus illo quidem ipsa!
```
#### Abajo
```html_example
Mostrar ayuda
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloremque iure pariatur consequatur, temporibus suscipit molestias magni animi quaerat minus doloribus, laboriosam itaque ullam dolorem unde, necessitatibus illo quidem ipsa!
```
#### Izquierda
```html_example
Mostrar ayuda
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloremque iure pariatur consequatur, temporibus suscipit molestias magni animi quaerat minus doloribus, laboriosam itaque ullam dolorem unde, necessitatibus illo quidem ipsa!
```
## Variantes
#### Dark
```html_example
Mostrar ayuda
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et doloremque iure pariatur consequatur, temporibus suscipit molestias magni animi quaerat minus doloribus, laboriosam itaque ullam dolorem unde, necessitatibus illo quidem ipsa!
```
## Javascript
Para iniciar el componente automáticamente debe declararse el atributo `data-tooltip` en el elemento con la clase `.tooltip` y añadir este script: ``
*/
.tooltip {
position: relative;
cursor: pointer; }
.tooltip .tooltip__text {
font-size: 0.875rem;
line-height: 1.5;
text-align: left;
background-color: #EBEEF5;
color: #191B1C;
padding: 4px 8px 4px;
-ms-width: max-content;
-webkit-width: max-content;
-moz-width: max-content;
width: max-content;
max-width: 272px;
position: absolute;
display: none;
z-index: 1000; }
@media all and (-ms-high-contrast: none) {
.tooltip .tooltip__text {
width: 272px !important; } }
@supports (-ms-ime-align: auto) {
.tooltip .tooltip__text {
width: 272px !important; } }
.tooltip .tooltip--with-border {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #5c6780;
width: 20px;
height: 20px;
font-size: 0.75rem;
color: #5c6780; }
.tooltip--dark .tooltip__text {
background-color: #191B1C;
color: #FFF; }
.tooltip-intranet {
font-size: 0.875rem;
line-height: 1.5;
text-align: left;
background-color: #EBEEF5;
color: #191B1C;
padding: 4px 8px 4px;
width: 100px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 100px;
position: absolute;
text-transform: none;
pointer-events: none;
z-index: 99999; }
@media (min-width: 576px) {
.tooltip-intranet {
width: 200px;
max-width: 200px; } }
.tooltip--rounded .tooltip__text {
background-color: #191B1C;
color: #FFF;
border-radius: 4px;
padding: 4px 8px 4px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: none;
max-width: 272px;
transform: translateX(100px); }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Notificación (texto).
## Descripción
Componente action box, muestra un menu de acciones al activarlo con un icono, se suele utilizar junto con el componente process en su versión mobile.
Se compone de los siguientes elementos:
* `[data-action-box]`: Atributo que inicia el componente.
* `.action-box`: Clase principal del componente.
* `.action-box__button`: Botón que activa el menú de acciones del componente con un evento onclick/focus.
* `.action-box__content`: Menú de acciones del componente.
* `.action-box__item`: Items/Enlaces del menú de acciones del componente.
* `.action-box--process`: Variación para cuando este integrado en el process.
## Estructura
#### Action Box
```html
```
## Ejemplos.
#### Action box siempre visibile
```html
```
```html_example
```
#### Action box visibile en mobile
```html
```
```html_example
```
## Variación
#### Sin icono
```html
```
```html_example
```
# Javascript
Para iniciar el componente automáticamente debe declararse un script llamado: action-box.js
Ejemplo del script: ``
*/
.action-box {
position: relative; }
.action-box__content {
position: absolute;
right: 8px;
top: 45px;
min-width: 200px;
padding: 16px 8px;
background-color: #EBEEF5;
box-shadow: 0 10px 20px 0 rgba(92, 103, 128, 0.15);
z-index: 10;
border-radius: 4px; }
.action-box__content:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #EBEEF5 transparent;
position: absolute;
bottom: 100%;
right: 14px; }
.action-box__content.action-box__content--second {
position: relative;
right: unset !important;
top: unset !important;
background-color: transparent;
box-shadow: none;
padding: 0;
min-width: auto;
left: unset !important;
margin-left: unset !important; }
.action-box__item {
color: #5c6780;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 24px;
display: block;
font-family: "BK-Sans";
letter-spacing: 2px; }
.action-box__item:hover {
color: #5c6780; }
.action-box__item:focus {
border: 4px solid #AFB5C8;
border-radius: 2px;
background-color: #EFF3FF;
padding-left: 12px;
padding-right: 12px;
line-height: 38px;
color: #191B1C; }
.action-box__item:focus:hover {
color: #191B1C; }
.action-box__item:last-of-type {
margin-bottom: 0; }
.action-box__button {
display: flex;
justify-content: center;
align-items: center;
background: #EFF3FF;
align-self: center; }
@media (min-width: 992px) {
.action-box__button {
background: #FFF; } }
.action-box--arrow-top .action-box__content:before {
position: absolute;
bottom: 100%;
right: calc(50% - (20px / 2)); }
.action-box--arrow-right .action-box__content:before {
position: absolute;
bottom: 100%;
left: 14px; }
.action-box--position-top .action-box__content {
bottom: 45px;
top: initial; }
.action-box--process .action-box__content {
top: 80px; }
.action-box--dropdown-links .action-box__content {
background-color: #F7FAFF;
padding: 24px 40px 0;
min-width: 220px; }
@media (min-width: 576px) {
.action-box--dropdown-links .action-box__content {
min-width: 550px; } }
.action-box--dropdown-links .action-box__content:before {
border-color: transparent transparent #F7FAFF transparent; }
.action-box--dropdown-links .action-box--no-padding-left {
padding-left: 0; }
.action-box--dropdown-links .action-box__item {
margin-bottom: 20px;
font-size: 12px;
letter-spacing: 1px;
display: table;
padding: 2px; }
.action-box--slim .action-box__content {
background-color: #FFF;
padding: 16px 8px;
min-width: 136px;
border-radius: 4px;
box-shadow: 0 10px 20px 0 rgba(25, 27, 28, 0.15); }
.action-box--slim .action-box__content:before {
content: none; }
.action-box--slim .action-box__content.action-box__content-opened {
right: 0px;
left: initial;
bottom: initial;
transform: translateX(0px); }
.action-box--slim-header {
display: flex;
align-items: center;
font-size: 0.75rem;
margin-left: 12px;
margin-right: 24px; }
.action-box--slim-header .action-box__content {
background-color: #FFF;
color: #5c6780;
padding: 16px 8px;
min-width: auto;
border-radius: 4px;
box-shadow: 0 10px 20px 0 rgba(25, 27, 28, 0.15); }
.action-box--slim-header .action-box__content:before {
content: none; }
@media (max-width: 991.98px) {
.action-box--slim-header .action-box__content {
margin-top: -210px; } }
.action-box--slim-header .action-box__item {
color: #5c6780; }
.action-box--slim-header .action-box__item:focus {
color: #FFF;
background-color: #3E4A50;
border: 3px solid #3E4A50; }
@media (min-width: 992px) {
.action-box--slim-header {
margin-right: 0; } }
.action-box--slim-header .action-box__item--selected {
color: #191B1C; }
.action-box__item {
font-size: 12px;
text-transform: none;
padding-left: 13px;
padding-right: 13px;
line-height: 40px;
margin-bottom: 0;
min-height: 40px;
letter-spacing: 1px;
white-space: nowrap;
border: 3px dotted transparent;
cursor: pointer; }
.action-box__item:hover {
background-color: #EFF3FF;
color: #191B1C;
border-radius: 4px; }
@media (min-width: 992px) {
.action-box__item {
font-size: 0.75rem; } }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Paginación numérica
## Descripción
El bloque `.pagination` representa un componente que crea automáticamente una paginación numérica del número que sea de páginas (div).
Se compone de los siguientes elementos:
Las propias páginas (div) cada una con la clase `.page`.
```html
Lorem ipsum 1
Lorem ipsum dolor sit amet, id graecis eligendi vivendum sit. Ea soleat putent eloquentiam sea. Et tota harum voluptua
mei. An sit suas legendos, per euismod appetere facilisis in, id debet percipit constituto pro.
```
El bloque con los números de páginas que se rellena automáticamente `.number-pagination` y que debe incluir los dos botones con clase `.anterior` y `.siguiente`.
El primer número y el último sirve como "accesos directos" a esos contenidos.
```html
```
Es necesario incluir un script para initializar la paginación:
```html
```
### Ejemplo paginación
```html_example
```
## Javascript
Se añadira el script `` para el funcionamiento del componente.
*/
.number-pagination {
padding-top: 40px;
padding-bottom: 40px;
display: flex;
justify-content: center; }
@media (min-width: 992px) {
.number-pagination {
padding-top: 64px;
padding-bottom: 64px; } }
.number-pagination__contain {
display: flex; }
.number-pagination__button,
.number-pagination__icon {
width: 40px;
height: 40px;
color: #191B1C;
display: flex;
justify-content: center; }
.number-pagination__button:hover,
.number-pagination__icon:hover {
background-color: #EBEEF5;
color: #191B1C;
cursor: pointer; }
.number-pagination__button:focus,
.number-pagination__icon:focus {
cursor: pointer; }
.number-pagination__button.disabled,
.number-pagination__icon.disabled {
color: #AFB5C8;
cursor: default; }
.number-pagination__button.disabled:hover, .number-pagination__button.disabled:focus,
.number-pagination__icon.disabled:hover,
.number-pagination__icon.disabled:focus {
background-color: white;
color: #AFB5C8; }
.number-pagination__puntos--disabled {
width: 40px;
color: #191B1C;
cursor: default; }
.number-pagination__button--active {
background-color: #FED430;
cursor: default; }
.number-pagination__button--active:hover {
cursor: default;
background-color: #FED430; }
.pagination .page {
display: none; }
.pagination .page--active {
display: block; }
/*md
# CRM MESSAGES
Mensajes comerciales de venta cruzada, se pueden utilizar en las páginas del área privada.
El container del componente es crm-messages. Se ha utilizado utilidades para que el componente sea lo más ajustable y flexible posible
cumpliendo todas las casuísticas
## Tipos
Según la situación puede poseer imagen o icono y a su vez botón o text-link:
* Cuando lleve icono se necesitará *crm-messages crm-messages--icon
* Cuando lleve imagen se necesitará*crm-messages crm-messages--image
* Dentro de .crm-messages__picture elegiremos insertar una imagen
o bien un icono.
* Dentro del .crm-messages__container insertaremos el texto y
el botón o text-link
## Ejemplo de cada tipo
### Con imagen y botón
```html_example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur tellus turpis.
Más información
```
### Con icono y botón
```html_example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus turpis.
Más información
```
### Con imagen y text-link
```html_example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus turpis.
```
### Con icono y text-link
```html_example
```
*/
.crm-messages {
background-color: #B5F0EF;
width: 100%;
display: flex;
flex-direction: row; }
.crm-messages__text {
margin-top: 8px;
margin-bottom: 8px; }
.crm-messages__picture {
display: none; }
.crm-messages__container {
flex-grow: 1;
padding: 24px;
display: flex;
flex-direction: row;
font-size: 0.875rem; }
.crm-messages__container strong {
font-size: 16px; }
@media (max-width: 767.98px) {
.crm-messages__container strong {
font-size: 14px; } }
.crm-messages__button {
margin: 0 auto;
font-size: 0.75rem;
align-self: center; }
.crm-messages--icon .crm-messages__picture {
display: flex;
padding-left: 1rem;
padding-top: 2rem; }
.crm-messages--image {
display: block; }
@media (min-width: 768px) {
.crm-messages__picture {
display: none; }
.crm-messages--icon .crm-messages__container {
display: flex;
flex-direction: row;
justify-content: space-between; }
.crm-messages--icon .crm-messages__picture {
display: flex;
align-self: center;
padding-left: 1.5rem;
padding-top: 0rem; }
.crm-messages--icon .crm-messages__container {
display: flex;
justify-content: space-between;
flex-direction: row; }
.crm-messages--image {
display: flex; } }
@media (min-width: 992px) {
.crm-messages__picture {
display: flex;
justify-content: center;
align-items: center; }
.crm-messages--icon .crm-messages__picture {
display: flex;
padding-left: 1.5rem; }
.crm-messages--icon .crm-messages__container {
display: flex;
flex-direction: row;
justify-content: space-between; } }
@media (min-width: 1200px) {
.crm-messages__picture {
display: block;
max-width: 100%; } }
.crm-messages--rounded.crm-messages {
border-radius: 4px; }
.crm-messages--rounded .crm-messages__container {
padding: 16px; }
@media (min-width: 992px) {
.crm-messages--rounded .crm-messages__container {
padding: 24px 40px 24px 16px; } }
.crm-messages--rounded .crm-messages__text {
margin-top: 8px;
margin-bottom: 16px; }
@media (min-width: 992px) {
.crm-messages--rounded .crm-messages__text {
margin-bottom: 8px; } }
.crm-messages--rounded .crm-messages__picture {
padding-left: 16px;
padding-top: 24px; }
@media (min-width: 768px) {
.crm-messages--rounded .crm-messages__picture {
display: flex;
padding-left: 0;
padding-top: 0; } }
.crm-messages--rounded .crm-messages__picture img {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px; }
@media (min-width: 768px) {
.crm-messages--rounded.crm-messages--icon .crm-messages__picture {
padding-left: 16px;
padding-top: 0; } }
@media (min-width: 768px) {
.crm-messages--rounded.crm-messages--icon.crm-messages--4-columns .crm-messages__picture {
padding-left: 0;
padding-top: 0; } }
.crm-messages--4-columns {
padding: 16px; }
@media (min-width: 992px) {
.crm-messages--4-columns {
padding: 24px; } }
.crm-messages--4-columns .crm-messages__container {
padding: 0 0 0 16px; }
.crm-messages--4-columns .crm-messages__text {
margin-top: 0;
margin-bottom: 16px;
line-height: 32px; }
@media (min-width: 992px) {
.crm-messages--4-columns .crm-messages__text {
line-height: 24px; } }
.crm-messages--4-columns .crm-messages__status {
display: flex;
flex-direction: column;
margin-bottom: 16px;
font-size: 0.875rem; }
.crm-messages--4-columns .crm-messages__coins {
font-weight: bold;
margin-top: 4px; }
.crm-messages--4-columns .crm-messages__picture {
padding: 0;
align-self: baseline; }
/*@import "partials/components/site-map";*/
.procesos_private {
/* fin .table */ }
.procesos_private .table {
background-color: #FFF;
border-spacing: 0;
width: 100%;
max-width: 100%;
margin-bottom: #D9E4FF; }
.procesos_private .table.table--no-border-top {
border-top: none; }
.procesos_private .table.table--no-border-top tbody tr:first-of-type td {
border-top: none; }
.procesos_private .table.table--border-top-black {
border-top: 1px solid #191B1C; }
.procesos_private .table.table--border-black {
border-bottom: 1px solid #191B1C; }
.procesos_private .table .tr--no-border-bottom,
.procesos_private .table .th--no-border-bottom {
border-bottom: none; }
.procesos_private .table .th--border-black {
border-bottom: solid 1px #191B1C; }
.procesos_private .table caption {
padding: 0;
text-align: left; }
.procesos_private .table caption.caption--bordered {
border-bottom: 2px solid #000;
padding-bottom: 16px !important; }
.procesos_private .table th {
text-align: left; }
.procesos_private .table > thead > tr > th,
.procesos_private .table > thead > tr > td,
.procesos_private .table > tbody > tr > th,
.procesos_private .table > tbody > tr > td,
.procesos_private .table > tfoot > tr > th,
.procesos_private .table > tfoot > tr > td {
padding: 13px 13px 13px 0;
vertical-align: top;
border-bottom: 1px solid #EBEEF5;
font-size: 0.75rem;
line-height: 1.5;
color: #000;
font-family: 'BK-Sans';
vertical-align: top; }
.procesos_private .table > thead > tr > th .icon--arrow-right-16,
.procesos_private .table > thead > tr > th .pictoDSL-arrow-right-16,
.procesos_private .table > thead > tr > td .icon--arrow-right-16,
.procesos_private .table > thead > tr > td .pictoDSL-arrow-right-16,
.procesos_private .table > tbody > tr > th .icon--arrow-right-16,
.procesos_private .table > tbody > tr > th .pictoDSL-arrow-right-16,
.procesos_private .table > tbody > tr > td .icon--arrow-right-16,
.procesos_private .table > tbody > tr > td .pictoDSL-arrow-right-16,
.procesos_private .table > tfoot > tr > th .icon--arrow-right-16,
.procesos_private .table > tfoot > tr > th .pictoDSL-arrow-right-16,
.procesos_private .table > tfoot > tr > td .icon--arrow-right-16,
.procesos_private .table > tfoot > tr > td .pictoDSL-arrow-right-16 {
vertical-align: bottom;
color: #f6a200;
transform: translateY(0%) rotate(0deg);
transition: transform .166s; }
.procesos_private .table > thead > tr > th.td--text-tab,
.procesos_private .table > thead > tr > td.td--text-tab,
.procesos_private .table > tbody > tr > th.td--text-tab,
.procesos_private .table > tbody > tr > td.td--text-tab,
.procesos_private .table > tfoot > tr > th.td--text-tab,
.procesos_private .table > tfoot > tr > td.td--text-tab {
color: #5c6780 !important;
font-size: 12px;
vertical-align: middle; }
.procesos_private .table > thead > tr > th.td--noborder,
.procesos_private .table > thead > tr > td.td--noborder,
.procesos_private .table > tbody > tr > th.td--noborder,
.procesos_private .table > tbody > tr > td.td--noborder,
.procesos_private .table > tfoot > tr > th.td--noborder,
.procesos_private .table > tfoot > tr > td.td--noborder {
border-bottom: none; }
.procesos_private .table > thead > tr > th.td--nopadding-left,
.procesos_private .table > thead > tr > td.td--nopadding-left,
.procesos_private .table > tbody > tr > th.td--nopadding-left,
.procesos_private .table > tbody > tr > td.td--nopadding-left,
.procesos_private .table > tfoot > tr > th.td--nopadding-left,
.procesos_private .table > tfoot > tr > td.td--nopadding-left {
padding-left: 0; }
.procesos_private .table > thead > tr > th.td--nopadding-topBottom,
.procesos_private .table > thead > tr > td.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > th.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > td.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > th.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > td.td--nopadding-topBottom {
padding-top: 0;
padding-bottom: 0; }
@media (max-width: 767.98px) {
.procesos_private .table > thead > tr > th.td--nopadding-topBottom,
.procesos_private .table > thead > tr > td.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > th.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > td.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > th.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > td.td--nopadding-topBottom {
padding: 5px 14px; } }
.procesos_private .table > thead > tr > th.td--text-black,
.procesos_private .table > thead > tr > td.td--text-black,
.procesos_private .table > tbody > tr > th.td--text-black,
.procesos_private .table > tbody > tr > td.td--text-black,
.procesos_private .table > tfoot > tr > th.td--text-black,
.procesos_private .table > tfoot > tr > td.td--text-black {
color: #191B1C !important;
font-size: 12px; }
.procesos_private .table > thead > tr > th {
padding: 13px 13px 7px 0;
vertical-align: bottom;
border-bottom: 2px solid #F7FAFF;
font-size: 0.75rem;
color: #5c6780;
letter-spacing: 0.83px;
line-height: 14px;
text-transform: uppercase;
font-weight: normal; }
.procesos_private .table > thead > tr > th.th--border-black {
border-bottom: 1px solid #191B1C; }
.procesos_private .table > thead > tr > th.th--with-caption {
padding-top: 24px;
padding-bottom: 16px;
font-size: 10px;
color: #5c6780; }
.procesos_private .table > thead > tr > th.th--with-caption.th--with-radio {
padding-left: 36px; }
.procesos_private .table > tbody > tr > th {
text-transform: uppercase;
font-weight: normal;
white-space: nowrap; }
@media only screen and (max-width: 767px) {
.procesos_private .table > tbody > tr > th {
white-space: normal; } }
.procesos_private .table > tbody > tr.tr--group > th {
border-top: 1px solid #191B1C;
border-bottom: 1px solid #191B1C; }
.procesos_private .table > tbody > tr.tr--group > th.no-border {
border-bottom: none; }
.procesos_private .table > caption + thead > tr:first-child > th,
.procesos_private .table > caption + thead > tr:first-child > td,
.procesos_private .table > colgroup + thead > tr:first-child > th,
.procesos_private .table > colgroup + thead > tr:first-child > td,
.procesos_private .table > thead:first-child > tr:first-child > th,
.procesos_private .table > thead:first-child > tr:first-child > td {
border-top: 0; }
.procesos_private .table > tbody + tbody {
border-top: 2px solid #EBEEF5; }
.procesos_private .table.table--responsive {
margin-bottom: 0;
display: table;
overflow-x: hidden;
position: relative;
table-layout: fixed; }
.procesos_private .table.table--responsive .table-row {
cursor: pointer; }
.procesos_private .table.table--responsive thead tr th {
color: #5c6780;
font-family: 'BK-Sans';
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 16px;
text-transform: uppercase;
text-align: left;
padding: 0 15px;
height: 40px;
vertical-align: middle; }
@media (min-width: 768px) and (max-width: 1023px) {
.procesos_private .table.table--responsive thead tr th {
padding: 0 15px; } }
@media only screen and (max-width: 767px) {
.procesos_private .table.table--responsive thead tr th {
padding: 0 5px; } }
.procesos_private .table.table--responsive thead tr th:nth-child(1) {
padding-left: 20px; }
.procesos_private .table.table--responsive thead tr th:nth-child(1) span {
position: relative;
right: 6px; }
@media only screen and (max-width: 1023px) {
.procesos_private .table.table--responsive thead tr th:nth-child(1) span {
right: 0; } }
.procesos_private .table.table--responsive tbody.tbody--16px tr td {
font-size: 16px;
line-height: 1.2em; }
.procesos_private .table.table--responsive tbody tr {
background-color: #FFF;
border-top: 1px solid #EBEEF5; }
.procesos_private .table.table--responsive tbody tr.tr--total {
background-color: #F7FAFF;
border-top: 1px solid #191B1C; }
.procesos_private .table.table--responsive tbody tr.tr--total > td {
border-top: 1px solid #191B1C; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive tbody tr.tr--total > td {
border-top: none; } }
.procesos_private .table.table--responsive tbody tr.tr--group {
border: none;
padding: 0; }
.procesos_private .table.table--responsive tbody tr.tr--active {
background-color: #F7FAFF; }
.procesos_private .table.table--responsive tbody tr.tr--active button {
color: #191B1C !important;
position: relative; }
.procesos_private .table.table--responsive tbody tr.tr--active button:after {
content: '';
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 30px;
height: 30px;
border: 1px solid #A0ADB8;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(160, 173, 184, 0.16); }
.procesos_private .table.table--responsive tbody tr .icon--action {
width: 48px;
height: 48px;
line-height: 48px;
text-align: center; }
.procesos_private .table.table--responsive tbody td {
font-size: 13px;
color: #191B1C;
font-family: 'BK-Sans';
vertical-align: middle;
padding: 13px 14px; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive tr.order-in-xs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell {
display: block !important;
padding: 13px 13px 13px 0;
line-height: 26px; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w10 {
width: 10%;
max-width: 30px; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w50 {
width: 50%; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w40 {
width: 40%; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w100 {
width: 100%; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.td-xs--nopadding-right {
padding-right: 0; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table__cell_active {
border-bottom: 1px solid #EBEEF5;
background-color: #F7FAFF; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__row.table-xs--w100 {
width: 100%; } }
.procesos_private .table.table--responsive.table_activetr {
overflow: visible; }
.procesos_private .table.table--responsive.table_activetr tbody td {
padding-top: 0;
padding-bottom: 0; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive.table_activetr tbody td {
padding-top: 5px;
padding-bottom: 5px; } }
.procesos_private .table.table--responsive.table_activetr .btn-activetr {
overflow: hidden; }
.procesos_private .table.table--responsive.table_activetr .btn-activetr:before {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.procesos_private .table.table--responsive.table--mix thead th {
font-size: 10px;
color: #5c6780;
border-bottom: 1px solid #191B1C; }
.procesos_private .table.table--responsive.table--mix thead th:nth-child(1) {
padding: 0;
width: 60%; }
.procesos_private .table.table--responsive.table--mix thead th.td__ico {
width: 10%; }
.procesos_private .table.table--responsive.table--mix tbody .table-row .icon--container {
display: none; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row-no-border td {
border: none; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row--edit {
background-color: #F7FAFF; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row--edit .td__ico {
color: #FF821C;
width: 10%; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row--edit td {
background-color: transparent; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active {
background-color: #F7FAFF; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active td {
padding: 8px 14px; }
@media (max-width: 991.98px) {
.procesos_private .table.table--responsive.table--mix tbody .table-row.active td {
padding: 0 0 0 14px; } }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active .td__ico.active [class*="icon--edit"] {
position: relative;
color: #191B1C; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active .td__ico.active [class*="icon--edit"]:after {
content: '';
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: inherit;
height: inherit;
border: 1px solid #AFB5C8;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.16); }
.procesos_private .table.table--responsive.table--mix tbody td {
vertical-align: middle;
color: #5c6780;
font-size: 12px;
padding: 8px 14px; }
.procesos_private .table.table--responsive.table--mix tbody td:focus {
border: 1px solid #EBEEF5 !important; }
.procesos_private .table.table--responsive.table--mix tbody td:nth-child(1) {
font-family: 'BK-Sans';
color: #191B1C;
width: 60%; }
.procesos_private .table.table--responsive.table--mix tbody td.td__ico {
color: #FF821C;
width: 10%; }
.procesos_private .table.table--responsive.table--mix tbody td.td__ico [class*="icon--edit"]:focus {
border: 1px solid #FF821C; }
.procesos_private .table.table--responsive.table--mix tbody td:focus span {
background-color: #3E4A50;
color: #FFF; }
.procesos_private .table.table--responsive.table--mix .table-inside-table {
width: 100%; }
.procesos_private .table.table--responsive.table--mix .table-inside-table thead th {
font-weight: normal;
border-bottom: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table thead th:nth-child(1) {
width: auto; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody tr {
border: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td {
color: #191B1C;
border-bottom: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td:nth-child(1) {
padding-left: 0;
width: auto; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td .text-link-icon--orange {
color: #FF821C; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive.table--mix .table-inside-table {
width: 100%;
display: block; }
.procesos_private .table.table--responsive.table--mix .table-inside-table thead th {
display: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody tr {
display: block;
border-bottom: 1px solid #EBEEF5; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody tr:last-child {
border-bottom: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td {
display: block;
text-align: left !important; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td:nth-child(1) {
padding-left: 14px; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td:before {
content: attr(data-title);
display: block;
font-weight: bold;
content: attr(data-title) "\a";
white-space: pre;
color: #AFB5C8;
font-family: 'BK-Sans';
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
line-height: 24px;
text-transform: uppercase;
height: 34px; } }
.procesos_private .table.table--responsive.table--mix .link-edit {
background-color: #FFF;
color: #FF821C;
border-radius: 100%;
height: 30px;
width: 30px;
line-height: 30px; }
@media (max-width: 991.98px) {
.procesos_private .table.table--responsive.table--mix .table-row .table-cell--edit .input--has-edit .input__control {
padding: 13px 16px 13px 0; } }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive.table--mix .table-row {
display: block; }
.procesos_private .table.table--responsive.table--mix .table-row td {
display: flex !important;
padding-top: 0;
padding-bottom: 0;
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row td:nth-child(1) {
width: 100%; }
.procesos_private .table.table--responsive.table--mix .table-row td.table__cell-xsdnone {
display: none !important; }
.procesos_private .table.table--responsive.table--mix .table-row td .icon--container {
display: block;
align-self: center; }
.procesos_private .table.table--responsive.table--mix .table-row td .icon--container.active {
display: none; }
.procesos_private .table.table--responsive.table--mix .table-row td .input--container {
width: calc(100% - 8px);
margin-left: 8px; }
.procesos_private .table.table--responsive.table--mix .table-row td .input--container.active {
width: calc(100% + 8px);
margin-left: -8px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td {
display: block !important;
padding: 8px 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td:nth-child(1) {
padding-left: 16px;
padding-right: 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td.no-padding-right {
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border td {
padding-left: 0;
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border .table-inside-table td {
display: block !important;
padding: 8px 16px; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border .table-inside-table td:nth-child(1) {
padding-left: 16px;
padding-right: 16px; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border .table-inside-table td.no-padding-right {
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td {
display: block !important;
padding: 8px 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td:nth-child(1) {
padding-left: 16px;
padding-right: 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td.no-padding-right {
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row .table-cell--edit .input--has-edit .input__control {
padding: 20px 16px 3px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-cell--edit .input--has-edit.input--is-readonly .input__control {
padding: 20px 16px 3px 0; }
.procesos_private .table.table--responsive.table--mix .table-cell--edit .input--has-edit .input__label {
color: #191B1C;
font-weight: normal;
letter-spacing: normal; } }
.procesos_private .table.table--responsive .tr-responsive th:nth-child(1) {
padding-left: 16px; }
.procesos_private .table.table--responsive .tr-responsive th:nth-child(1) span {
position: absolute; }
.procesos_private .table.table--responsive .cell-responsive {
display: table-cell;
padding: 10px 16px 10px;
vertical-align: top; }
@media (max-width: 991.98px) {
.procesos_private .table.table--responsive .cell-responsive {
padding: 18px 16px 15px; } }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive .cell-responsive {
padding-top: 12px; } }
.procesos_private .table.table--responsive .cell-responsive--w35 {
width: 35%; }
.procesos_private .table.table--responsive .cell-responsive--w30 {
width: 30%; }
.procesos_private .table.table--responsive .cell-responsive--w25 {
width: 25%; }
.procesos_private .table.table--responsive .cell-responsive--w20 {
width: 20%; }
.procesos_private .table.table--responsive .cell-responsive--w15 {
width: 15%; }
.procesos_private .table.table--responsive .cell-responsive--w10 {
width: 10%; }
.procesos_private .table.table--responsive .cell-responsive--w05 {
width: 5%; }
@media only screen and (max-width: 767px) {
.procesos_private .table {
border: 0;
padding-bottom: 0;
display: block;
width: 100%; }
.procesos_private .table caption {
display: none; }
.procesos_private .table thead {
display: none;
visibility: hidden; }
.procesos_private .table tbody {
display: block;
padding: 0 0;
text-align: left;
white-space: normal; }
.procesos_private .table tr {
display: block;
padding: 4px 0;
text-align: left;
white-space: normal;
border-bottom: 1px solid #EBEEF5; }
.procesos_private .table th,
.procesos_private .table td {
display: block;
padding: 8px 14px;
text-align: left;
white-space: normal; }
.procesos_private .table tbody > tr > td {
padding: 0 0;
border-top: none;
border-bottom: none; }
.procesos_private .table td.table__ico table__ico--open .icon,
.procesos_private .table td.table__ico table__ico--open .pictoDSL {
-webkit-transform: translateY(-2px) rotate(-180deg);
transform: translateY(-2px) rotate(-180deg); }
.procesos_private .table td.table__ico:focus .icon,
.procesos_private .table td.table__ico:focus .pictoDSL {
background-color: #3E4A50;
color: #FFF; }
.procesos_private .table td.table__cell {
display: table-cell !important;
padding: 8px 16px 4px;
cursor: pointer; }
.procesos_private .table td.table__cell.table--w95 {
width: 95%; }
.procesos_private .table td.table__cell.table--w90 {
width: 90%; }
.procesos_private .table td.table__cell.table--w50 {
width: 50%; }
.procesos_private .table td.table__cell.table--w33 {
width: 33%; }
.procesos_private .table td.table__cell.table--w20 {
width: 20%; }
.procesos_private .table td.table__cell.table--w10 {
width: 10%; }
.procesos_private .table td.table__cell.table--w05 {
width: 5%; }
.procesos_private .table td.table__row {
padding: 5px 15px;
border-bottom: none; }
.procesos_private .table td.table__cell[data-title]:before {
white-space: pre;
display: block;
color: #AFB5C8;
font-family: 'BK-Sans';
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
line-height: 16px;
text-transform: uppercase;
text-align: left;
padding: 5px 0;
height: 30px; }
.procesos_private .table th.table__row[data-title]:before,
.procesos_private .table td.table__row[data-title]:before {
content: attr(data-title) "\a";
white-space: pre;
color: #AFB5C8;
font-family: 'BK-Sans';
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
line-height: 24px;
text-transform: uppercase;
text-align: left;
height: 34px;
vertical-align: middle; }
.procesos_private .table th:not([data-title]) {
font-weight: bold; }
.procesos_private .table td:empty {
display: none; } }
@media (max-width: 767.98px) {
.procesos_private .table.table--no-responsive caption {
display: block; }
.procesos_private .table.table--no-responsive thead,
.procesos_private .table.table--no-responsive tbody {
display: table;
width: 100%;
visibility: visible; }
.procesos_private .table.table--no-responsive thead tr,
.procesos_private .table.table--no-responsive tbody tr {
display: table-row; }
.procesos_private .table.table--no-responsive thead td,
.procesos_private .table.table--no-responsive thead th,
.procesos_private .table.table--no-responsive tbody td,
.procesos_private .table.table--no-responsive tbody th {
display: table-cell; }
.procesos_private .table.table--no-responsive thead td,
.procesos_private .table.table--no-responsive tbody td {
padding: 13px 13px 7px 0;
border-bottom: 1px solid #EBEEF5; } }
.procesos_private .table.table--ordered thead th.th--with-caption {
padding-top: 24px;
padding-bottom: 16px;
font-size: 10px;
color: #5c6780; }
.procesos_private .table.table--ordered thead th.th--with-caption:nth-child(1) {
padding-left: 15px; }
@media (max-width: 767.98px) {
.procesos_private .table.table--ordered caption {
display: block; }
.procesos_private .table.table--ordered thead {
display: table;
width: 100%;
visibility: visible; }
.procesos_private .table.table--ordered thead tr {
display: table-row; }
.procesos_private .table.table--ordered thead th {
display: table-cell; }
.procesos_private .table.table--ordered thead th.th--with-caption {
padding-top: 24px;
padding-bottom: 16px;
font-size: 10px;
color: #5c6780; }
.procesos_private .table.table--ordered thead th.th--with-caption:nth-child(1) {
padding-left: 30px; }
.procesos_private .table.table--ordered thead th.d-none-xs {
display: none; } }
.procesos_private .thead-sm {
padding: 10px 20px;
color: #5c6780;
border-bottom: 2px solid #191B1C;
font-size: 0.875rem;
text-transform: uppercase; }
.procesos_private .thead-sm__text {
color: #5c6780;
letter-spacing: 0.83px;
font-size: 0.75rem;
font-weight: 700; }
.procesos_private .thead-sm__centered {
padding-left: 30px; }
.procesos_private.table--mix .thead-sm {
padding-left: 0; }
.procesos_private .collapse {
display: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); }
.procesos_private .collapse.show {
display: table-row;
max-height: 99em;
transition: max-height .5s ease-in-out; }
/*fin .procesos_private */
/*** Información tabular Simulador de Rescate de Planes de Pensiones ***/
.tablaSR__heading,
.tablaSR__row,
.tablaSR__final-row {
height: 46px; }
.tablaSR__heading {
border-bottom: 2px solid #191B1C; }
.tablaSR__row {
border-top: 1px solid #EBEEF5; }
.tablaSR__row:first-child {
border-top: none; }
.tablaSR__final-row {
border-top: 1px solid #5c6780; }
.tablaSR__text {
font-size: 0.75rem;
text-transform: uppercase; }
.tablaSR__icon {
cursor: pointer; }
/* Variante pseudo tablas alto de fila para móviles */
.tablaSR--high .tablaSR__row {
min-height: 60px; }
.tablaSR--long .tablaSR__row .tablaSR__cell:first-child {
flex-basis: 60%; }
.flex-table-intranet {
border: 1px solid transparent; }
.flex-table-intranet__wrapper {
display: flex;
flex-flow: row wrap;
font-size: 12px; }
.flex-table-intranet__caption {
font-size: 16px;
line-height: 21px; }
.flex-table-intranet__row {
width: calc(100% / 3);
text-align: left;
padding: 16px 0;
border-bottom: solid 1px #D9E4FF; }
.flex-table-intranet__row:focus {
box-shadow: 0 0 0 4px #3E4A50; }
.flex-table-intranet__row--2col {
width: calc(100% / 2); }
.flex-table-intranet__row--4col {
width: calc(100% / 4); }
.flex-table-intranet__row--5col {
width: calc(100% / 5); }
.flex-table-intranet__row--6col {
width: calc(100% / 6); }
.flex-table-intranet__header {
display: flex;
flex-flow: row wrap;
font-size: 12px; }
.flex-table-intranet__row--borderblack {
border-color: #191B1C; }
.flex-table-intranet__rowspan {
display: flex;
flex-flow: row wrap;
border-bottom: 1px solid #D9E4FF;
width: 100%;
padding: 16px 0; }
.flex-table-intranet__column {
display: flex;
flex-flow: column wrap;
width: 100%; }
.flex-table-intranet__column--row {
display: flex;
flex-flow: row wrap;
border-bottom: 1px solid #D9E4FF; }
.flex-table-intranet__column--borderblack {
border-bottom-color: #191B1C; }
.flex-table-intranet__cell {
width: 100%;
text-align: left;
padding: 8px 0;
border-bottom: solid 1px #D9E4FF; }
@media (min-width: 576px) {
.flex-table-intranet__cell {
width: calc(100% / 3);
padding: 16px 4px; } }
.flex-table-intranet__cell[data-title]:before {
content: attr(data-title) ": "; }
@media (min-width: 576px) {
.flex-table-intranet__cell[data-title]:before {
content: " "; } }
@media (min-width: 576px) {
.flex-table-intranet__cell--2col {
width: calc(100% / 2); } }
@media (min-width: 576px) {
.flex-table-intranet__cell--4col {
width: calc(100% / 4); } }
@media (min-width: 576px) {
.flex-table-intranet__cell--5col {
width: calc(100% / 5); } }
@media (min-width: 576px) {
.flex-table-intranet__cell--6col {
width: calc(100% / 6); } }
.flex-table-intranet__cell--nopadding {
border-bottom: 0;
padding-bottom: 0;
height: 50px; }
@media (min-width: 576px) {
.flex-table-intranet__cell--first {
padding-left: 16px; } }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Grid y container
.container {
padding: 0 24px; }
.container_theme_card {
padding: 8px 24px 8px 24px; }
.container.no-padding-xs {
padding-left: 0;
padding-right: 0; }
.container.no-padding-xs .row {
margin-left: 0;
margin-right: 0; }
.container.no-padding-xs .row [class*='col-'] {
padding-left: 0;
padding-right: 0; }
*/
/*md
# public-Table
## Descripción
El componente tabla está destinado a dar soporte a las tablas de la parte pública del banco, de una manera flexible y adaptable a cualquier tipo de
contenido que se quiera mostrar dentro del bloque tabla. Debe cumplir con los criterios de accesibilidad y usabilidad para que
esté correcto al 100%. Por eso en este apartado de documentación procederemos a explicar:
1. Estructura
2. Modificadores
3. Accesibilidad
4. Javascript
5. Ejemplos de uso
## Estructura
En este bloque veremos la estructuara de la que se compone, su semántica y sus elementos principales (cada uno de ellos con sus elementos como __rows, __template __title-primary, por ejemplo):
* `.public-table`: por estructura semántica se ha de tener un contenedor que tenga esta clase, aunque no introduzca ningún estilo.
* `.public-table__rows`: cada una de las rows de la tabla deberá llevar esta clase en el bloque.
* `.public-table__title-primary`: establece el título de la tabla.
* `.public-table__template`: por semántica el layout de la tabla.
* `.public-table__head`: Se utiliza para la cabecera de la tabla.
* `.public-table__options`: cada una de las columnas que contiene el título de la fila.
* `.public-table__data`: cada una de las celdas de la tabla debe contener esta clase la cual introduce los estilos
y el pseudo elemento para el responsive de móvil (:before)..
* `.public-table__button`: los botones dentro de la tabla deberán llevar esta clase.
*Todos estos son los elementos que más utilizaremos para crear nuestra tabla, a continuación veremos todos los elementos
que tenemos dependiendo del tipo de celda (si contiene imagen, texto, logo, icono, etc...):
* `.public-table__data-2-lines`: para cuando es texto de la celda vaya en 2 líneas.
* `.public-table__data-tag`: para cuando la celda contenga una cifra con un tag verde o rojo.
* `.public-table__data-icon`: para los casos en los que dentro de la celda tengamos un icono.
## Modificadores
Para funcionalidades concretas o tipos de visionado del contenido se han utilizado los siguientes modificadores:
* `.public-table__rows--action`: Establece un hover y un foco a la fila.
* `.public-table__template--desplegable`: Se utiliza para filas que queramos desplegar.
* `.public-table__options--desplegable-title`: Pone en negrita el título de la tabla desplegable.
* `.public-table__options--desplegable-content`: Para el contenido de la tabla desplegable.
* `.public-table__data--right`: acompañado del corespondiente `.public-table__data` coloca el texto alineado a la derecha en dispositivos
de 1024 en adelante.
* `.public-table__data--right-md`: acompañado del corespondiente `.public-table__data` coloca el texto alineado a la derecha en dispositivos
de entre 768 y 992.
* `.data-tag__positive`: Pone en verde la cifra.
* `.data-tag__negative`: Pone en rojo la cifra.
*`.public-table__button--green`: Añade un botón redondo de color verde para las tablas de Broker.
*`.public-table__button--red`: Añade un botón redondo de color rojo para las tablas de Broker.
## Accesibilidad
Para lograr la accesibilidad, se han desarrollado diferentes pautas o guías que explican cómo se tienen que crear las páginas web para que sean accesibles. Dicho esto, en el caso de las tablas deberemos cumplir lo siguiente:
* Todo contenedor padre que contenga una tabla ha de contener un `role="row"`.
* Entrando en el `public-table__template` de la tabla todos los rows que contengan la clase `public-table__rows` han de contener un `role="row"`
* Todos los elementos que contengan la clase `public-table__options` y sean las cabeceras de las columnas han de tener un `role="columnheader"`
* Todos los elementos que contengan la clase `public-table__data` han de tener un `role="cell"`indicando que es una celda de la tabla.
además los elementos con esta clase han de tener un attributo data-title el cual servirá como título para la versión mobile.
Habrá que ajustar el ancho de la tabla con bootstrap, a continuación veremos unos ejemplos de las tablas:
## Javascript
Para las tablas desplegables, habrá que llamar al js ``
## Ejemplos
```html_example
Ejemplo tabla Broker
Importe máximo por operación enviada
1.000€
Importe mínimo por operación enviada
0,50€
```
```html_example
Broker
Fecha
Hora
Valor
Último
Dif. cierre anterior
15.01.2020
14:50
ENC
3,504 EUR d
+0,038
+1,09 %
15.01.2020
14:50
IBE
3,504 EUR d
+0,038
+0,087 %
15.01.2020
14:50
FER
3,504 EUR d
+0,47
+0,087 %
```
```html_example
Ejemplo tabla Desplegable
Origen
Cuenta corriente
ES01 1234 5678 4900 3456 3445
Destino
Cuenta corriente
ES01 1234 5678 4900 3456 3445
ES01 1234 5678 4900 3456 3445
Origen
Cuenta corriente
ES01 1234 5678 4900 3456 3445
Cuenta corriente
ES01 1234 5678 4900 3456 3445
Lorem Ipsum
Dolor sit amet
```
*/
.public-table__template {
font-size: 0.75rem; }
.public-table__title-primary {
justify-content: space-between;
color: #191B1C;
font-family: "BK-Sans";
font-weight: bold;
flex-direction: row;
font-size: 1.125rem;
line-height: 1.5rem;
padding: 20px 0px 20px 0px;
align-items: center;
align-content: center;
max-height: 64px;
flex-grow: 1;
border-bottom: 1px solid #EFF3FF; }
.public-table__head {
display: none; }
@media (min-width: 992px) {
.public-table__head {
display: flex;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1.2px;
line-height: 1rem;
min-height: 40px;
padding: 12px 9px 12px 9px;
background-color: #EBEEF5; }
.public-table__head:hover {
background-color: #EBEEF5; } }
.public-table__head--white {
background-color: #FFF;
border-bottom: 1px solid #EFF3FF; }
.public-table__head--white:hover {
background-color: #FFF; }
.public-table__options {
align-self: center;
margin-bottom: 0;
width: 100%; }
.public-table__options:before {
content: ""; }
.public-table__options--right {
text-align: right; }
.public-table__rows {
display: flex;
flex-direction: row;
padding: 20px 9px 20px 9px;
background-color: #FFF;
font-size: 0.875rem;
line-height: 1.5;
font-family: "BK-Sans";
max-height: 100%;
border-bottom: 1px solid #EBEEF5;
border-radius: 0px;
min-height: 64px;
flex-wrap: wrap; }
@media (max-width: 575.98px) {
.public-table__rows {
margin-right: 0;
margin-left: 0; } }
.public-table__rows .public-table__button {
justify-content: center; }
@media (min-width: 992px) {
.public-table__rows {
flex-direction: row;
justify-content: space-between;
font-size: 1rem; } }
.public-table__rows--bg {
background-color: #EFF3FF; }
@media (min-width: 992px) {
.public-table__rows--action:hover {
background-color: #EFF3FF; }
.public-table__rows--action:hover .public-table__hover-container {
display: flex;
flex-direction: row;
background: #FFF;
width: auto;
position: absolute;
padding: 8px 16px 8px 16px;
right: 72px;
margin-top: -8px;
min-width: 200px;
max-height: 48px;
border-radius: 4px; }
.public-table__rows--action:hover .public-table__hover-container .action-box__button :hover {
background-color: #EFF3FF; }
.public-table__rows--action:hover .action-box__button :hover {
background-color: #FFF;
border-radius: 50%; }
.public-table__rows--action:hover .btn--rounded-small:hover {
background-color: #EFF3FF; }
.public-table__rows--action:focus {
outline: none;
box-shadow: inset 0 0 0 4px #AFB5C8;
background-color: #EFF3FF; } }
.public-table__data {
color: #191B1C;
display: block;
margin-bottom: 24px; }
.public-table__data:last-child {
margin-bottom: 0; }
.public-table__data:before {
content: attr(data-title) "\a";
white-space: pre;
color: #191B1C;
font-family: "BK-Sans";
font-weight: normal;
font-size: 10px;
letter-spacing: 1.5px;
line-height: 10px;
text-transform: uppercase;
text-align: left;
height: 20px;
vertical-align: middle;
white-space: pre-wrap; }
@media (max-width: 575.98px) {
.public-table__data {
padding: 0; } }
@media (min-width: 992px) {
.public-table__data {
align-self: center;
margin-bottom: 0;
align-items: center;
width: 100%; }
.public-table__data:before {
content: ""; } }
@media (min-width: 768px) {
.public-table__data.public-table__data--right-md {
text-align: right; } }
@media (min-width: 992px) {
.public-table__data.public-table__data--right {
text-align: right; } }
.public-table__button {
position: absolute;
right: 24px;
display: flex;
justify-content: center; }
@media (min-width: 992px) {
.public-table__button {
margin-bottom: 0;
min-width: 48px;
position: relative;
right: 0;
padding: 0; }
.public-table__button .icon-bg--32 {
background-color: #FFF; } }
.public-table__button--green {
border-radius: 32px;
height: 32px;
width: 32px;
background: #A7F3C5;
margin-right: 10px; }
.public-table__button--red {
border-radius: 32px;
height: 32px;
width: 32px;
background: #FFB5B1; }
@media (min-width: 992px) {
.public-table__data--last {
text-align: right;
padding-right: 24px; } }
.public-table__template--desplegable {
padding: 24px 9px 24px 9px;
background-color: #FFF;
font-size: 16px;
font-family: "BK-Sans"; }
.public-table__rows--desplegable {
display: flex;
flex-direction: column; }
@media (min-width: 992px) {
.public-table__rows--desplegable {
flex-direction: row;
justify-content: space-between;
margin-bottom: 1px; } }
.public-table__options--desplegable {
align-self: flex-start;
/*margin-bottom: 0;*/
width: 100%; }
.public-table__options--desplegable:before {
content: ""; }
.public-table__options--desplegable-title {
font-weight: bold; }
@media (max-width: 991.98px) {
.public-table__options--desplegable-title {
font-size: 0.875rem; } }
.public-table__options--desplegable-content {
color: #191B1C; }
@media (max-width: 991.98px) {
.public-table__options--desplegable-content {
font-size: 0.875rem; } }
.public-table__rows:hover .btn--rounded-small {
background-color: #FFF; }
.public-table__title-primary {
padding-right: 24px; }
@media (max-width: 991.98px) {
.public-table__data {
padding-right: 15px;
font-weight: bold; } }
@media (max-width: 767.98px) {
.public-table__data {
margin-bottom: 16px; } }
.public-table__data-2-lines span {
display: block; }
.public-table__data-icon .icon {
margin-right: 8px; }
.public-table__data-tag .data-tag__positive {
background-color: #A7F3C5;
font-size: 0.875rem;
padding-left: 8px;
padding-right: 8px; }
@media (min-width: 992px) {
.public-table__data-tag .data-tag__positive {
font-size: 1rem; } }
.public-table__data-tag .data-tag__negative {
background-color: #FFB5B1;
font-size: 0.875rem;
padding-left: 8px;
padding-right: 8px; }
@media (min-width: 992px) {
.public-table__data-tag .data-tag__negative {
font-size: 1rem; } }
@media (min-width: 992px) {
.public-table__data-tag .data-tag__positive,
.public-table__data-tag .data-tag__negative {
font-size: 1rem; } }
.public-table--modal .public-table__head {
display: none; }
.public-table--modal .public-table__data {
padding-right: 15px;
font-weight: bold;
margin-bottom: 24px; }
.public-table--modal .public-table__data:before {
content: attr(data-title) "\a"; }
.public-table--modal .public-table__rows {
font-size: 0.875rem; }
.procesos_private {
/* fin .table */ }
.procesos_private .table {
background-color: #FFF;
border-spacing: 0;
width: 100%;
max-width: 100%;
margin-bottom: #D9E4FF; }
.procesos_private .table.table--no-border-top {
border-top: none; }
.procesos_private .table.table--no-border-top tbody tr:first-of-type td {
border-top: none; }
.procesos_private .table.table--border-top-black {
border-top: 1px solid #191B1C; }
.procesos_private .table.table--border-black {
border-bottom: 1px solid #191B1C; }
.procesos_private .table .tr--no-border-bottom,
.procesos_private .table .th--no-border-bottom {
border-bottom: none; }
.procesos_private .table .th--border-black {
border-bottom: solid 1px #191B1C; }
.procesos_private .table caption {
padding: 0;
text-align: left; }
.procesos_private .table caption.caption--bordered {
border-bottom: 2px solid #000;
padding-bottom: 16px !important; }
.procesos_private .table th {
text-align: left; }
.procesos_private .table > thead > tr > th,
.procesos_private .table > thead > tr > td,
.procesos_private .table > tbody > tr > th,
.procesos_private .table > tbody > tr > td,
.procesos_private .table > tfoot > tr > th,
.procesos_private .table > tfoot > tr > td {
padding: 13px 13px 13px 0;
vertical-align: top;
border-bottom: 1px solid #EBEEF5;
font-size: 0.75rem;
line-height: 1.5;
color: #000;
font-family: 'BK-Sans';
vertical-align: top; }
.procesos_private .table > thead > tr > th .icon--arrow-right-16,
.procesos_private .table > thead > tr > th .pictoDSL-arrow-right-16,
.procesos_private .table > thead > tr > td .icon--arrow-right-16,
.procesos_private .table > thead > tr > td .pictoDSL-arrow-right-16,
.procesos_private .table > tbody > tr > th .icon--arrow-right-16,
.procesos_private .table > tbody > tr > th .pictoDSL-arrow-right-16,
.procesos_private .table > tbody > tr > td .icon--arrow-right-16,
.procesos_private .table > tbody > tr > td .pictoDSL-arrow-right-16,
.procesos_private .table > tfoot > tr > th .icon--arrow-right-16,
.procesos_private .table > tfoot > tr > th .pictoDSL-arrow-right-16,
.procesos_private .table > tfoot > tr > td .icon--arrow-right-16,
.procesos_private .table > tfoot > tr > td .pictoDSL-arrow-right-16 {
vertical-align: bottom;
color: #f6a200;
transform: translateY(0%) rotate(0deg);
transition: transform .166s; }
.procesos_private .table > thead > tr > th.td--text-tab,
.procesos_private .table > thead > tr > td.td--text-tab,
.procesos_private .table > tbody > tr > th.td--text-tab,
.procesos_private .table > tbody > tr > td.td--text-tab,
.procesos_private .table > tfoot > tr > th.td--text-tab,
.procesos_private .table > tfoot > tr > td.td--text-tab {
color: #5c6780 !important;
font-size: 12px;
vertical-align: middle; }
.procesos_private .table > thead > tr > th.td--noborder,
.procesos_private .table > thead > tr > td.td--noborder,
.procesos_private .table > tbody > tr > th.td--noborder,
.procesos_private .table > tbody > tr > td.td--noborder,
.procesos_private .table > tfoot > tr > th.td--noborder,
.procesos_private .table > tfoot > tr > td.td--noborder {
border-bottom: none; }
.procesos_private .table > thead > tr > th.td--nopadding-left,
.procesos_private .table > thead > tr > td.td--nopadding-left,
.procesos_private .table > tbody > tr > th.td--nopadding-left,
.procesos_private .table > tbody > tr > td.td--nopadding-left,
.procesos_private .table > tfoot > tr > th.td--nopadding-left,
.procesos_private .table > tfoot > tr > td.td--nopadding-left {
padding-left: 0; }
.procesos_private .table > thead > tr > th.td--nopadding-topBottom,
.procesos_private .table > thead > tr > td.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > th.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > td.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > th.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > td.td--nopadding-topBottom {
padding-top: 0;
padding-bottom: 0; }
@media (max-width: 767.98px) {
.procesos_private .table > thead > tr > th.td--nopadding-topBottom,
.procesos_private .table > thead > tr > td.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > th.td--nopadding-topBottom,
.procesos_private .table > tbody > tr > td.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > th.td--nopadding-topBottom,
.procesos_private .table > tfoot > tr > td.td--nopadding-topBottom {
padding: 5px 14px; } }
.procesos_private .table > thead > tr > th.td--text-black,
.procesos_private .table > thead > tr > td.td--text-black,
.procesos_private .table > tbody > tr > th.td--text-black,
.procesos_private .table > tbody > tr > td.td--text-black,
.procesos_private .table > tfoot > tr > th.td--text-black,
.procesos_private .table > tfoot > tr > td.td--text-black {
color: #191B1C !important;
font-size: 12px; }
.procesos_private .table > thead > tr > th {
padding: 13px 13px 7px 0;
vertical-align: bottom;
border-bottom: 2px solid #F7FAFF;
font-size: 0.75rem;
color: #5c6780;
letter-spacing: 0.83px;
line-height: 14px;
text-transform: uppercase;
font-weight: normal; }
.procesos_private .table > thead > tr > th.th--border-black {
border-bottom: 1px solid #191B1C; }
.procesos_private .table > thead > tr > th.th--with-caption {
padding-top: 24px;
padding-bottom: 16px;
font-size: 10px;
color: #5c6780; }
.procesos_private .table > thead > tr > th.th--with-caption.th--with-radio {
padding-left: 36px; }
.procesos_private .table > tbody > tr > th {
text-transform: uppercase;
font-weight: normal;
white-space: nowrap; }
@media only screen and (max-width: 767px) {
.procesos_private .table > tbody > tr > th {
white-space: normal; } }
.procesos_private .table > tbody > tr.tr--group > th {
border-top: 1px solid #191B1C;
border-bottom: 1px solid #191B1C; }
.procesos_private .table > tbody > tr.tr--group > th.no-border {
border-bottom: none; }
.procesos_private .table > caption + thead > tr:first-child > th,
.procesos_private .table > caption + thead > tr:first-child > td,
.procesos_private .table > colgroup + thead > tr:first-child > th,
.procesos_private .table > colgroup + thead > tr:first-child > td,
.procesos_private .table > thead:first-child > tr:first-child > th,
.procesos_private .table > thead:first-child > tr:first-child > td {
border-top: 0; }
.procesos_private .table > tbody + tbody {
border-top: 2px solid #EBEEF5; }
.procesos_private .table.table--responsive {
margin-bottom: 0;
display: table;
overflow-x: hidden;
position: relative;
table-layout: fixed; }
.procesos_private .table.table--responsive .table-row {
cursor: pointer; }
.procesos_private .table.table--responsive thead tr th {
color: #5c6780;
font-family: 'BK-Sans';
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 16px;
text-transform: uppercase;
text-align: left;
padding: 0 15px;
height: 40px;
vertical-align: middle; }
@media (min-width: 768px) and (max-width: 1023px) {
.procesos_private .table.table--responsive thead tr th {
padding: 0 15px; } }
@media only screen and (max-width: 767px) {
.procesos_private .table.table--responsive thead tr th {
padding: 0 5px; } }
.procesos_private .table.table--responsive thead tr th:nth-child(1) {
padding-left: 20px; }
.procesos_private .table.table--responsive thead tr th:nth-child(1) span {
position: relative;
right: 6px; }
@media only screen and (max-width: 1023px) {
.procesos_private .table.table--responsive thead tr th:nth-child(1) span {
right: 0; } }
.procesos_private .table.table--responsive tbody.tbody--16px tr td {
font-size: 16px;
line-height: 1.2em; }
.procesos_private .table.table--responsive tbody tr {
background-color: #FFF;
border-top: 1px solid #EBEEF5; }
.procesos_private .table.table--responsive tbody tr.tr--total {
background-color: #F7FAFF;
border-top: 1px solid #191B1C; }
.procesos_private .table.table--responsive tbody tr.tr--total > td {
border-top: 1px solid #191B1C; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive tbody tr.tr--total > td {
border-top: none; } }
.procesos_private .table.table--responsive tbody tr.tr--group {
border: none;
padding: 0; }
.procesos_private .table.table--responsive tbody tr.tr--active {
background-color: #F7FAFF; }
.procesos_private .table.table--responsive tbody tr.tr--active button {
color: #191B1C !important;
position: relative; }
.procesos_private .table.table--responsive tbody tr.tr--active button:after {
content: '';
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 30px;
height: 30px;
border: 1px solid #A0ADB8;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(160, 173, 184, 0.16); }
.procesos_private .table.table--responsive tbody tr .icon--action {
width: 48px;
height: 48px;
line-height: 48px;
text-align: center; }
.procesos_private .table.table--responsive tbody td {
font-size: 13px;
color: #191B1C;
font-family: 'BK-Sans';
vertical-align: middle;
padding: 13px 14px; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive tr.order-in-xs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell {
display: block !important;
padding: 13px 13px 13px 0;
line-height: 26px; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w10 {
width: 10%;
max-width: 30px; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w50 {
width: 50%; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w40 {
width: 40%; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table-xs--w100 {
width: 100%; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.td-xs--nopadding-right {
padding-right: 0; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__cell.table__cell_active {
border-bottom: 1px solid #EBEEF5;
background-color: #F7FAFF; }
.procesos_private .table.table--responsive tr.order-in-xs td.table__row.table-xs--w100 {
width: 100%; } }
.procesos_private .table.table--responsive.table_activetr {
overflow: visible; }
.procesos_private .table.table--responsive.table_activetr tbody td {
padding-top: 0;
padding-bottom: 0; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive.table_activetr tbody td {
padding-top: 5px;
padding-bottom: 5px; } }
.procesos_private .table.table--responsive.table_activetr .btn-activetr {
overflow: hidden; }
.procesos_private .table.table--responsive.table_activetr .btn-activetr:before {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.procesos_private .table.table--responsive.table--mix thead th {
font-size: 10px;
color: #5c6780;
border-bottom: 1px solid #191B1C; }
.procesos_private .table.table--responsive.table--mix thead th:nth-child(1) {
padding: 0;
width: 60%; }
.procesos_private .table.table--responsive.table--mix thead th.td__ico {
width: 10%; }
.procesos_private .table.table--responsive.table--mix tbody .table-row .icon--container {
display: none; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row-no-border td {
border: none; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row--edit {
background-color: #F7FAFF; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row--edit .td__ico {
color: #FF821C;
width: 10%; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.table-row--edit td {
background-color: transparent; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active {
background-color: #F7FAFF; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active td {
padding: 8px 14px; }
@media (max-width: 991.98px) {
.procesos_private .table.table--responsive.table--mix tbody .table-row.active td {
padding: 0 0 0 14px; } }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active .td__ico.active [class*="icon--edit"] {
position: relative;
color: #191B1C; }
.procesos_private .table.table--responsive.table--mix tbody .table-row.active .td__ico.active [class*="icon--edit"]:after {
content: '';
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: inherit;
height: inherit;
border: 1px solid #AFB5C8;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.16); }
.procesos_private .table.table--responsive.table--mix tbody td {
vertical-align: middle;
color: #5c6780;
font-size: 12px;
padding: 8px 14px; }
.procesos_private .table.table--responsive.table--mix tbody td:focus {
border: 1px solid #EBEEF5 !important; }
.procesos_private .table.table--responsive.table--mix tbody td:nth-child(1) {
font-family: 'BK-Sans';
color: #191B1C;
width: 60%; }
.procesos_private .table.table--responsive.table--mix tbody td.td__ico {
color: #FF821C;
width: 10%; }
.procesos_private .table.table--responsive.table--mix tbody td.td__ico [class*="icon--edit"]:focus {
border: 1px solid #FF821C; }
.procesos_private .table.table--responsive.table--mix tbody td:focus span {
background-color: #3E4A50;
color: #FFF; }
.procesos_private .table.table--responsive.table--mix .table-inside-table {
width: 100%; }
.procesos_private .table.table--responsive.table--mix .table-inside-table thead th {
font-weight: normal;
border-bottom: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table thead th:nth-child(1) {
width: auto; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody tr {
border: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td {
color: #191B1C;
border-bottom: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td:nth-child(1) {
padding-left: 0;
width: auto; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td .text-link-icon--orange {
color: #FF821C; }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive.table--mix .table-inside-table {
width: 100%;
display: block; }
.procesos_private .table.table--responsive.table--mix .table-inside-table thead th {
display: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody tr {
display: block;
border-bottom: 1px solid #EBEEF5; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody tr:last-child {
border-bottom: none; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td {
display: block;
text-align: left !important; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td:nth-child(1) {
padding-left: 14px; }
.procesos_private .table.table--responsive.table--mix .table-inside-table tbody td:before {
content: attr(data-title);
display: block;
font-weight: bold;
content: attr(data-title) "\a";
white-space: pre;
color: #AFB5C8;
font-family: 'BK-Sans';
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
line-height: 24px;
text-transform: uppercase;
height: 34px; } }
.procesos_private .table.table--responsive.table--mix .link-edit {
background-color: #FFF;
color: #FF821C;
border-radius: 100%;
height: 30px;
width: 30px;
line-height: 30px; }
@media (max-width: 991.98px) {
.procesos_private .table.table--responsive.table--mix .table-row .table-cell--edit .input--has-edit .input__control {
padding: 13px 16px 13px 0; } }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive.table--mix .table-row {
display: block; }
.procesos_private .table.table--responsive.table--mix .table-row td {
display: flex !important;
padding-top: 0;
padding-bottom: 0;
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row td:nth-child(1) {
width: 100%; }
.procesos_private .table.table--responsive.table--mix .table-row td.table__cell-xsdnone {
display: none !important; }
.procesos_private .table.table--responsive.table--mix .table-row td .icon--container {
display: block;
align-self: center; }
.procesos_private .table.table--responsive.table--mix .table-row td .icon--container.active {
display: none; }
.procesos_private .table.table--responsive.table--mix .table-row td .input--container {
width: calc(100% - 8px);
margin-left: 8px; }
.procesos_private .table.table--responsive.table--mix .table-row td .input--container.active {
width: calc(100% + 8px);
margin-left: -8px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td {
display: block !important;
padding: 8px 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td:nth-child(1) {
padding-left: 16px;
padding-right: 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td.no-padding-right {
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border td {
padding-left: 0;
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border .table-inside-table td {
display: block !important;
padding: 8px 16px; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border .table-inside-table td:nth-child(1) {
padding-left: 16px;
padding-right: 16px; }
.procesos_private .table.table--responsive.table--mix .table-row.table-row-no-border .table-inside-table td.no-padding-right {
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td {
display: block !important;
padding: 8px 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td:nth-child(1) {
padding-left: 16px;
padding-right: 16px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-inside-table td.no-padding-right {
padding-right: 0; }
.procesos_private .table.table--responsive.table--mix .table-row .table-cell--edit .input--has-edit .input__control {
padding: 20px 16px 3px; }
.procesos_private .table.table--responsive.table--mix .table-row .table-cell--edit .input--has-edit.input--is-readonly .input__control {
padding: 20px 16px 3px 0; }
.procesos_private .table.table--responsive.table--mix .table-cell--edit .input--has-edit .input__label {
color: #191B1C;
font-weight: normal;
letter-spacing: normal; } }
.procesos_private .table.table--responsive .tr-responsive th:nth-child(1) {
padding-left: 16px; }
.procesos_private .table.table--responsive .tr-responsive th:nth-child(1) span {
position: absolute; }
.procesos_private .table.table--responsive .cell-responsive {
display: table-cell;
padding: 10px 16px 10px;
vertical-align: top; }
@media (max-width: 991.98px) {
.procesos_private .table.table--responsive .cell-responsive {
padding: 18px 16px 15px; } }
@media (max-width: 767.98px) {
.procesos_private .table.table--responsive .cell-responsive {
padding-top: 12px; } }
.procesos_private .table.table--responsive .cell-responsive--w35 {
width: 35%; }
.procesos_private .table.table--responsive .cell-responsive--w30 {
width: 30%; }
.procesos_private .table.table--responsive .cell-responsive--w25 {
width: 25%; }
.procesos_private .table.table--responsive .cell-responsive--w20 {
width: 20%; }
.procesos_private .table.table--responsive .cell-responsive--w15 {
width: 15%; }
.procesos_private .table.table--responsive .cell-responsive--w10 {
width: 10%; }
.procesos_private .table.table--responsive .cell-responsive--w05 {
width: 5%; }
@media only screen and (max-width: 767px) {
.procesos_private .table {
border: 0;
padding-bottom: 0;
display: block;
width: 100%; }
.procesos_private .table caption {
display: none; }
.procesos_private .table thead {
display: none;
visibility: hidden; }
.procesos_private .table tbody {
display: block;
padding: 0 0;
text-align: left;
white-space: normal; }
.procesos_private .table tr {
display: block;
padding: 4px 0;
text-align: left;
white-space: normal;
border-bottom: 1px solid #EBEEF5; }
.procesos_private .table th,
.procesos_private .table td {
display: block;
padding: 8px 14px;
text-align: left;
white-space: normal; }
.procesos_private .table tbody > tr > td {
padding: 0 0;
border-top: none;
border-bottom: none; }
.procesos_private .table td.table__ico table__ico--open .icon,
.procesos_private .table td.table__ico table__ico--open .pictoDSL {
-webkit-transform: translateY(-2px) rotate(-180deg);
transform: translateY(-2px) rotate(-180deg); }
.procesos_private .table td.table__ico:focus .icon,
.procesos_private .table td.table__ico:focus .pictoDSL {
background-color: #3E4A50;
color: #FFF; }
.procesos_private .table td.table__cell {
display: table-cell !important;
padding: 8px 16px 4px;
cursor: pointer; }
.procesos_private .table td.table__cell.table--w95 {
width: 95%; }
.procesos_private .table td.table__cell.table--w90 {
width: 90%; }
.procesos_private .table td.table__cell.table--w50 {
width: 50%; }
.procesos_private .table td.table__cell.table--w33 {
width: 33%; }
.procesos_private .table td.table__cell.table--w20 {
width: 20%; }
.procesos_private .table td.table__cell.table--w10 {
width: 10%; }
.procesos_private .table td.table__cell.table--w05 {
width: 5%; }
.procesos_private .table td.table__row {
padding: 5px 15px;
border-bottom: none; }
.procesos_private .table td.table__cell[data-title]:before {
white-space: pre;
display: block;
color: #AFB5C8;
font-family: 'BK-Sans';
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
line-height: 16px;
text-transform: uppercase;
text-align: left;
padding: 5px 0;
height: 30px; }
.procesos_private .table th.table__row[data-title]:before,
.procesos_private .table td.table__row[data-title]:before {
content: attr(data-title) "\a";
white-space: pre;
color: #AFB5C8;
font-family: 'BK-Sans';
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
line-height: 24px;
text-transform: uppercase;
text-align: left;
height: 34px;
vertical-align: middle; }
.procesos_private .table th:not([data-title]) {
font-weight: bold; }
.procesos_private .table td:empty {
display: none; } }
@media (max-width: 767.98px) {
.procesos_private .table.table--no-responsive caption {
display: block; }
.procesos_private .table.table--no-responsive thead,
.procesos_private .table.table--no-responsive tbody {
display: table;
width: 100%;
visibility: visible; }
.procesos_private .table.table--no-responsive thead tr,
.procesos_private .table.table--no-responsive tbody tr {
display: table-row; }
.procesos_private .table.table--no-responsive thead td,
.procesos_private .table.table--no-responsive thead th,
.procesos_private .table.table--no-responsive tbody td,
.procesos_private .table.table--no-responsive tbody th {
display: table-cell; }
.procesos_private .table.table--no-responsive thead td,
.procesos_private .table.table--no-responsive tbody td {
padding: 13px 13px 7px 0;
border-bottom: 1px solid #EBEEF5; } }
.procesos_private .table.table--ordered thead th.th--with-caption {
padding-top: 24px;
padding-bottom: 16px;
font-size: 10px;
color: #5c6780; }
.procesos_private .table.table--ordered thead th.th--with-caption:nth-child(1) {
padding-left: 15px; }
@media (max-width: 767.98px) {
.procesos_private .table.table--ordered caption {
display: block; }
.procesos_private .table.table--ordered thead {
display: table;
width: 100%;
visibility: visible; }
.procesos_private .table.table--ordered thead tr {
display: table-row; }
.procesos_private .table.table--ordered thead th {
display: table-cell; }
.procesos_private .table.table--ordered thead th.th--with-caption {
padding-top: 24px;
padding-bottom: 16px;
font-size: 10px;
color: #5c6780; }
.procesos_private .table.table--ordered thead th.th--with-caption:nth-child(1) {
padding-left: 30px; }
.procesos_private .table.table--ordered thead th.d-none-xs {
display: none; } }
.procesos_private .thead-sm {
padding: 10px 20px;
color: #5c6780;
border-bottom: 2px solid #191B1C;
font-size: 0.875rem;
text-transform: uppercase; }
.procesos_private .thead-sm__text {
color: #5c6780;
letter-spacing: 0.83px;
font-size: 0.75rem;
font-weight: 700; }
.procesos_private .thead-sm__centered {
padding-left: 30px; }
.procesos_private.table--mix .thead-sm {
padding-left: 0; }
.procesos_private .collapse {
display: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); }
.procesos_private .collapse.show {
display: table-row;
max-height: 99em;
transition: max-height .5s ease-in-out; }
/*fin .procesos_private */
/*** Información tabular Simulador de Rescate de Planes de Pensiones ***/
.tablaSR__heading,
.tablaSR__row,
.tablaSR__final-row {
height: 46px; }
.tablaSR__heading {
border-bottom: 2px solid #191B1C; }
.tablaSR__row {
border-top: 1px solid #EBEEF5; }
.tablaSR__row:first-child {
border-top: none; }
.tablaSR__final-row {
border-top: 1px solid #5c6780; }
.tablaSR__text {
font-size: 0.75rem;
text-transform: uppercase; }
.tablaSR__icon {
cursor: pointer; }
/* Variante pseudo tablas alto de fila para móviles */
.tablaSR--high .tablaSR__row {
min-height: 60px; }
.tablaSR--long .tablaSR__row .tablaSR__cell:first-child {
flex-basis: 60%; }
.flex-table-intranet {
border: 1px solid transparent; }
.flex-table-intranet__wrapper {
display: flex;
flex-flow: row wrap;
font-size: 12px; }
.flex-table-intranet__caption {
font-size: 16px;
line-height: 21px; }
.flex-table-intranet__row {
width: calc(100% / 3);
text-align: left;
padding: 16px 0;
border-bottom: solid 1px #D9E4FF; }
.flex-table-intranet__row:focus {
box-shadow: 0 0 0 4px #3E4A50; }
.flex-table-intranet__row--2col {
width: calc(100% / 2); }
.flex-table-intranet__row--4col {
width: calc(100% / 4); }
.flex-table-intranet__row--5col {
width: calc(100% / 5); }
.flex-table-intranet__row--6col {
width: calc(100% / 6); }
.flex-table-intranet__header {
display: flex;
flex-flow: row wrap;
font-size: 12px; }
.flex-table-intranet__row--borderblack {
border-color: #191B1C; }
.flex-table-intranet__rowspan {
display: flex;
flex-flow: row wrap;
border-bottom: 1px solid #D9E4FF;
width: 100%;
padding: 16px 0; }
.flex-table-intranet__column {
display: flex;
flex-flow: column wrap;
width: 100%; }
.flex-table-intranet__column--row {
display: flex;
flex-flow: row wrap;
border-bottom: 1px solid #D9E4FF; }
.flex-table-intranet__column--borderblack {
border-bottom-color: #191B1C; }
.flex-table-intranet__cell {
width: 100%;
text-align: left;
padding: 8px 0;
border-bottom: solid 1px #D9E4FF; }
@media (min-width: 576px) {
.flex-table-intranet__cell {
width: calc(100% / 3);
padding: 16px 4px; } }
.flex-table-intranet__cell[data-title]:before {
content: attr(data-title) ": "; }
@media (min-width: 576px) {
.flex-table-intranet__cell[data-title]:before {
content: " "; } }
@media (min-width: 576px) {
.flex-table-intranet__cell--2col {
width: calc(100% / 2); } }
@media (min-width: 576px) {
.flex-table-intranet__cell--4col {
width: calc(100% / 4); } }
@media (min-width: 576px) {
.flex-table-intranet__cell--5col {
width: calc(100% / 5); } }
@media (min-width: 576px) {
.flex-table-intranet__cell--6col {
width: calc(100% / 6); } }
.flex-table-intranet__cell--nopadding {
border-bottom: 0;
padding-bottom: 0;
height: 50px; }
@media (min-width: 576px) {
.flex-table-intranet__cell--first {
padding-left: 16px; } }
body.blog {
margin-bottom: 0;
overflow-x: hidden; }
@media (max-width: 767.98px) {
body.blog {
overflow-x: hidden; } }
.blog .img {
width: 100%;
height: auto;
position: relative; }
body.no-scroll {
overflow: hidden; }
.main-content.blog {
padding-top: 0; }
@media (max-width: 767.98px) {
.remove-margin-xs {
margin-left: -24px;
margin-right: -24px;
/*overflow-x: hidden;*/ } }
.hr_gray {
border-color: rgba(97, 112, 119, 0.26); }
.hr_gray-light {
border-color: #EBEEF5; }
.zindex-neg {
z-index: -1 !important; }
.center-hv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
/* Revome IE input reset */
input::-ms-clear, input::-ms-reveal, ::-ms-reveal {
display: none !important; }
/* Ajuste para espacio lateral en phone */
@media (max-width: 767.98px) {
.container {
padding: 0 24px; }
.container .container_theme_card {
padding: 8px 24px 8px 24px; }
.container.no-padding-xs {
padding-left: 0;
padding-right: 0; }
.container.no-padding-xs .row {
margin-left: 0;
margin-right: 0; }
.container.no-padding-xs .row [class*='col-'] {
padding-left: 0;
padding-right: 0; } }
.container.no-padding {
padding-left: 0;
padding-right: 0; }
/* Change the order of elements on home page */
@media (max-width: 991.98px) {
.main-content.blog {
display: -moz-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
-ms-flex-direction: column;
flex-flow: column; }
.main-content.blog .component-block_mas-leido {
/*moz-box-ordinal-group: 1;*/
-webkit-box-ordinal-group: 1;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1; }
.footer-blog {
/*moz-box-ordinal-group: 3;*/
-webkit-box-ordinal-group: 3;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3; } }
@media (max-width: 767.98px) {
.main-content .component-box_mercados {
/*moz-box-ordinal-group: 2;*/
-webkit-box-ordinal-group: 2;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2; } }
.blog .video .video__container:before {
height: 221px;
top: 0; }
.blog .video .video__container {
position: relative; }
.blog .video .video__container .img {
width: 100%;
height: auto;
position: relative; }
.blog .video .video__container .video__container__player {
background-color: #B5F0EF;
z-index: 1;
position: relative;
right: 0;
width: 100%;
/* height: 100%;
@include media-breakpoint-only(md) {
position: absolute;
height: 210px;
}
@include media-breakpoint-only(lg) {
height: 179px;
}*/ }
@media (max-width: 991.98px) {
.video__container {
margin-bottom: 4px;
height: 228px !important; } }
@media (min-width: 768px) {
.video__container {
margin-bottom: 4px;
height: 132px !important; } }
@media (min-width: 992px) {
.video__container {
margin-bottom: 4px;
height: 176px !important; } }
@media (min-width: 1200px) {
.video__container {
height: 216px !important; } }
.crm-messages {
width: unset !important; }
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
background: transparent; }
.overlay--opened {
display: block; }
.overlay--overlay-gray {
opacity: 0.7;
background-color: #191B1C; }
.modal__content {
-webkit-transform: translate3d(-50%, -51%, 0) !important;
-moz-transform: translate3d(-50%, -51%, 0) !important;
transform: translate3d(-50%, -51%, 0) !important; }
@media (max-width: 767.98px) {
.modal__content {
-webkit-transform: translate3d(0, -8%, 0) !important;
-moz-transform: translate3d(0, -8%, 0) !important;
transform: translate3d(0, -8%, 0) !important; } }
.modal__title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem; }
.modal-title__box {
padding: 2px 10px;
display: table;
position: absolute;
top: -27px;
left: 0; }
/* MODIFIER .modal-title__box_yellow | .modal-title__box--yellow */
.modal-title__box--yellow {
background-color: #FED430; }
/* MODIFIER .modal-title__box_cyan | .modal-title__box--cyan */
.modal-title__box--cyan {
background-color: #B5F0EF; }
.modal-content__text {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem; }
@media (min-width: 768px) {
.modal-content__text {
font-size: 1rem; } }
.modal-content__text--small {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1.25rem;
margin-bottom: 0; }
.modal-content__label {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem; }
.modal-content__icon--box {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
margin-right: 16px; }
.modal-content__icon--box--cyan {
background-color: #B5F0EF; }
.modal-content__link {
margin-right: 1rem; }
.modal-content__link:focus {
box-shadow: 0 0 0 4px #3E4A50; }
.modal-content__title-area {
display: flex;
/*align-items: center;*/ }
.modal-content__title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 20px;
font-weight: bold;
line-height: 24px;
display: inline-block; }
.loader__item {
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
border-top: 2px solid #FF821C;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
border-left: 2px solid #FF821C;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear; }
.loader__item:after {
border-radius: 50%;
width: 60px;
height: 60px; }
.loader__container {
margin: 40px auto;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center; }
@media (min-width: 768px) {
.loader__container {
margin: 64px auto; } }
.loader__text {
display: inline-block;
padding-left: 32px; }
.loader__main-text {
display: block;
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
font-weight: bold;
line-height: 1.3rem; }
.loader__secondary-text {
display: block;
color: #49547D;
font-family: "BK-Sans";
line-height: 1.3rem; }
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-ms-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-ms-transform: rotate(360deg); } }
.footer-blog {
box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.26);
padding-top: 40px; }
@media (max-width: 767.98px) {
.footer-blog .footer-blog-bottom__container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse; } }
.icon-bankinter-logo {
width: 162px;
height: 24px;
margin-bottom: 24px;
display: block;
background: url(../Images/svg/logo_bk.svg) no-repeat center;
background-size: contain;
position: relative; }
.footer-blog__text {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1.25rem;
margin-bottom: 0; }
.footer-blog__enlaces {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1.25rem;
padding: 0 16px; }
@media (max-width: 767.98px) {
.footer-blog__enlaces {
padding: 0 16px 16px 16px; } }
.footer-blog__enlaces:hover {
color: #FF821C; }
.footer-blog__enlaces:focus {
/*box-shadow: 0 0 0 4px $bk-gris-focus-100;*/
background-color: #3E4A50;
color: white; }
.footer-blog-bottom {
background: #F7FAFF;
padding: 24px 0;
position: relative;
z-index: 5; }
.footer-blog-bottom .copyright {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.625rem;
line-height: 0.875rem; }
@media (min-width: 576px) {
.footer-blog-bottom .copyright {
font-size: 0.75rem;
line-height: 1.25rem; } }
.social-menu__item {
display: inline-block;
padding: 0 0 0 32px; }
@media (max-width: 767.98px) {
.social-menu__item {
padding: 0 16px 24px 16px; } }
.social-menu__item-link {
color: rgba(104, 112, 126, 0.6);
display: block; }
.social-menu__item-link:hover, .social-menu__item-link:active:focus {
color: #68707e; }
.social-menu__item-link:focus {
color: #3E4A50; }
.blog .menu {
position: absolute;
background: #5c6780;
width: 100%;
top: 0;
left: 0;
min-height: 115px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms; }
.header-blog {
overflow: hidden; }
.header-blog .icon-bankinter-logo {
background: none; }
.header-blog__logo {
display: block;
background: url(../Images/svg/logo_bk.svg) no-repeat center;
background-size: contain;
position: relative;
display: inline-block;
width: 150px;
height: 22px; }
@media (min-width: 576px) {
.header-blog__logo {
width: 203px;
height: 30px; } }
.header-blog__logo:focus {
border-bottom: 1px solid #3E4A50;
box-sizing: content-box; }
.header-blog__container-form {
position: absolute;
right: 80px; }
@media (max-width: 991.98px) {
.header-blog__container-form {
display: none; } }
.header-blog__form-submit {
display: none;
position: relative;
left: 45px;
padding: 8px 10px; }
.header-blog__hamburger {
color: #191B1C;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 32px; }
.header-blog__hamburger--close {
display: none; }
/*mod */
.header-blog--menu-opened {
/* MODIFIER */
/* MODIFIER .header-blog__link-box_orange | .header-blog__link-box--orange*/
/* MODIFIER .header-blog__hamburger_close | .header-blog__hamburger--close*/ }
.header-blog--menu-opened .menu {
display: block;
visibility: visible;
opacity: 1;
animation: fade 0.5s;
z-index: 5;
padding-bottom: 104px; }
.header-blog--menu-opened .header-blog__text {
color: #FFF;
outline: 4px solid #5c6780;
z-index: 6; }
.header-blog--menu-opened .header-blog__menu-link,
.header-blog--menu-opened .header-blog__link-subscribe {
color: #FFF; }
.header-blog--menu-opened .header-blog__menu-link:focus,
.header-blog--menu-opened .header-blog__link-subscribe:focus {
background: #FFF;
color: #68707E; }
.header-blog--menu-opened .header-blog__menu-link:focus span,
.header-blog--menu-opened .header-blog__link-subscribe:focus span {
color: #68707E; }
.header-blog--menu-opened .header-blog__menu-link:focus .header-blog__link-box--gray span,
.header-blog--menu-opened .header-blog__link-subscribe:focus .header-blog__link-box--gray span {
color: #FFF; }
.header-blog--menu-opened .header-blog__link-subscribe:focus {
background: none;
color: #FFF; }
.header-blog--menu-opened .header-blog__link-subscribe:focus .header-blog__link-box--gray {
box-shadow: 0 0 0 1px #FFF; }
.header-blog--menu-opened .header-blog__menu-separator {
background-color: #FFF; }
.header-blog--menu-opened .header-blog__link-box:focus {
box-shadow: 0 0 0 1px #FFF;
color: #FFF; }
.header-blog--menu-opened .header-blog__link-box--gray,
.header-blog--menu-opened .header-blog__link-box--cyan {
background-color: #68707E;
border: 1px solid #FFF;
color: #FFF; }
@media (min-width: 768px) {
.header-blog--menu-opened .header-blog__link-box--orange {
background-color: #FFF; } }
.header-blog--menu-opened .header-blog__hamburger {
display: none; }
.header-blog--menu-opened .header-blog__hamburger--close {
display: block;
color: #191B1C;
background-color: #FFF;
width: 40px;
height: 40px;
outline: 1px solid #FFF;
line-height: 40px; }
@media (max-width: 575.98px) {
.header-blog--menu-opened .header-blog__hamburger--close {
color: #FFF;
background-color: #5c6780;
outline: 1px solid #5c6780; } }
.header-blog--menu-opened .header-blog__menu-container {
position: relative;
z-index: 6; }
.header-blog--menu-opened .header-blog__logo {
background: url(../Images/svg/logo_bk_white.svg) no-repeat center; }
.header-blog--menu-opened .menu__content {
margin-top: 64px; }
@media (min-width: 768px) {
.header-blog--menu-opened .menu__content {
margin-top: 103px;
border-top: 1px solid rgba(255, 255, 255, 0.2); } }
@media (min-width: 768px) {
.header-blog--menu-opened .menu__col {
padding-top: 40px; } }
@media (max-width: 991.98px) {
.header-blog--menu-opened .menu__col .menu__link {
font-size: 1.2rem; } }
.header-blog--menu-opened .menu__link {
color: #FFF;
font-family: "BK-Text";
font-size: 1.5rem;
line-height: 3rem; }
@media (max-width: 767.98px) {
.header-blog--menu-opened .menu__link {
font-size: 1.2rem;
line-height: 2.4rem; } }
@media (max-width: 575.98px) {
.header-blog--menu-opened .menu__link {
font-size: 1rem;
line-height: 2rem; } }
.header-blog--menu-opened .menu__link:focus {
background: #FFF;
color: #68707E; }
.header-blog--menu-opened .menu__link:hover {
color: #D9E4FF; }
.header-blog--menu-opened .menu__link.menu__link--small {
position: relative;
transform: translate(0px, 60px); }
.header-blog--menu-opened .menu__link.menu__link--small::before {
content: '';
position: absolute;
width: 40px;
height: 2px;
background-color: #fff;
top: -14px;
left: 0; }
.header-blog--menu-opened .menu__title {
position: relative;
color: #FFF;
font-family: "BK-Sans";
font-size: 0.75rem;
font-weight: 100;
letter-spacing: 1px;
margin-bottom: 32px;
display: block; }
.header-blog--menu-opened .menu__title:before {
font-family: 'BK-icons';
content: "\e930";
font-size: 16px;
display: block;
position: absolute;
left: -20px; }
.header-blog--menu-opened .menu__list-link {
color: #FFF;
font-family: "BK-Sans";
font-size: 1rem;
letter-spacing: 0;
line-height: 1.5rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
text-transform: capitalize !important; }
@media (max-width: 767.98px) {
.header-blog--menu-opened .menu__list-link {
font-size: 0.9rem; } }
.header-blog--menu-opened .menu__list-link.menu__list-link--vertical {
flex: 1;
align-items: flex-start; }
.header-blog--menu-opened .menu__list-link:hover {
color: #D9E4FF; }
.header-blog--menu-opened .menu__list-link:focus {
background: #FFF;
color: #3E4A50; }
.header-blog--menu-opened .header-blog__link-box--gray {
background-color: unset; }
.header-blog--menu-opened .header-blog__link-box--gray:hover {
background-color: unset;
color: #D8DDEF;
border: 1px solid #D8DDEF; }
.header-blog--menu-opened .header-blog__link-box--cyan {
background-color: transparent; }
.header-blog--menu-opened .header-blog__link-box--cyan:hover {
background-color: transparent;
color: #D8DDEF;
border: 1px solid #D8DDEF; }
.header-blog--menu-opened .menu__list-item {
display: inline-block;
position: relative;
padding-bottom: 8px;
vertical-align: top;
width: 100%; }
.header-blog--menu-opened .menu__list-item span.menu__list-icon {
padding-top: 3px;
display: none; }
.menu__list-icon {
margin-right: 8px;
line-height: 18px; }
.menu__list-item {
float: left;
position: relative;
width: 50%;
padding-bottom: 8px; }
/*mod */
.header-blog--search-opened {
/* Hide left elements */ }
.header-blog--search-opened .header-blog__menu-link,
.header-blog--search-opened .header-blog__menu-separator,
.header-blog--search-opened .header-blog__link-subscribe,
.header-blog--search-opened .button__header-search {
opacity: 0;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-in-out; }
.header-blog--search-opened .header-blog__container-form {
display: block;
z-index: 5; }
.header-blog--search-opened .header-blog__search-text {
width: 306px;
left: -306px !important;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-in-out;
padding-left: 50px;
padding-right: 25px;
background-color: #B5F0EF; }
.header-blog--search-opened .header-blog__form-submit {
display: block; }
/*mod */
.header-blog__container-form--mobile {
position: relative;
right: auto;
display: block; }
.header-blog__container-form--mobile .header-blog__search-text {
width: 100%;
padding: 0 16px 0 40px;
background: #FFF; }
.header-blog__container-form--mobile .header-blog__form-submit {
display: block;
position: absolute;
left: 0; }
.header-blog__link-box {
height: 40px;
width: 40px;
display: inline-block;
vertical-align: middle;
position: relative;
padding: 0 0 0 20px; }
@media (max-width: 767.98px) {
.header-blog__link-box.button__header-menu {
background: transparent; } }
@media (min-width: 1200px) {
.header-blog__link-box {
/* MODIFIFER .header-blog__link-box_m-left | .header-blog__link-box--m-left*/ }
.header-blog__link-box--m-left {
margin-left: 20px; } }
.header-blog__link-box:focus {
box-shadow: 0 0 0 1px #191B1C;
color: #191B1C;
background-color: #F76900; }
.header-blog__link-box--gray {
background-color: #EBEEF5;
color: #191B1C; }
.header-blog__link-box--gray:hover {
background-color: #F7FAFF; }
.header-blog__link-box--gray:focus {
background-color: #F7FAFF; }
.header-blog__link-box--cyan {
background-color: #B5F0EF; }
.header-blog__link-box--cyan:hover {
background-color: #C3F3F2; }
.header-blog__link-box--cyan:focus {
background-color: #C3F3F2; }
.header-blog__link-box--orange {
background-color: #FF821C; }
.header-blog__link-box--orange:hover {
background-color: #F76900; }
.header-blog__link-box--orange:focus {
background-color: #F76900; }
.header-blog__link-subscribe {
color: #68707E;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 1.5rem;
display: block;
padding-right: 0; }
@media (max-width: 1199.98px) {
.header-blog__link-subscribe {
font-size: 0; } }
@media (max-width: 767.98px) {
.header-blog__link-subscribe {
display: none; } }
.header-blog__link-subscribe:focus {
background: #FFF;
color: #68707E;
box-shadow: none; }
.header-blog__link-subscribe:focus .header-blog__link-box--gray {
box-shadow: 0 0 0 1px #191B1C; }
@media (max-width: 575.98px) {
.header-blog__menu {
position: absolute;
top: -35px;
right: 2px; } }
.header-blog__menu-item {
display: inline-block;
vertical-align: middle; }
@media (min-width: 768px) {
.header-blog__menu-item {
padding: 0 0 0 16px; } }
.header-blog__menu-item--mobile .header-blog__menu-link {
display: block;
padding-right: 36px; }
.header-blog__menu-link {
color: #6F7A94;
opacity: 1;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-in-out;
height: 24px;
width: 24px;
display: block;
text-align: center;
/* &.header-blog__menu-link--social {
height: 24px;
width: 24px;
display: block;
text-align: center;
&:focus {
outline: 0;
}
} */ }
@media (max-width: 767.98px) {
.header-blog__menu-link {
display: none; } }
.header-blog__menu-link:focus {
background: #3E4A50;
outline: 0;
height: 1.5rem;
width: 1.5rem;
display: flex;
align-items: center;
justify-content: center; }
.header-blog__menu-link:focus span {
color: #F7FAFF; }
.header-blog__menu-link:hover {
color: #D9E4FF; }
.header-blog__menu-separator {
height: 40px;
width: 1px;
background-color: #EBEEF5;
margin: 0 6px; }
@media (max-width: 767.98px) {
.header-blog__menu-separator {
display: none; } }
.header-blog__menu-row {
margin-top: 14px;
margin-bottom: 10px; }
@media (min-width: 768px) {
.header-blog__menu-row {
margin-top: 30px;
margin-bottom: 30px; } }
.header-blog__search-text {
width: 0;
height: 40px;
border: 0;
background-color: transparent;
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem;
outline: none;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-in-out; }
.header-blog__text {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
letter-spacing: 0.1px;
line-height: 1.3rem;
padding: 11px 0;
display: block;
font-weight: normal;
/* posiciona o h1 ao lado do logo em versões desktop */ }
@media (min-width: 992px) {
.header-blog__text {
display: inline-block;
left: 257px;
position: absolute;
white-space: nowrap;
top: -70px; } }
@media (max-width: 575.98px) {
.header-blog__text {
font-size: 0.875rem; } }
.header-blog-bottom__menu {
display: table; }
@media (max-width: 991.98px) {
.header-blog-bottom__menu {
display: none; } }
.header-blog-bottom__menu-item {
margin: 12px 8px 14px 0;
display: inline-block; }
.header-blog-bottom__menu-link {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem;
text-align: center;
border-radius: 18px;
background-color: #FFF;
padding: 11px 26px; }
.header-blog-bottom__menu-link:hover {
background-color: #B5F0EF;
color: #191B1C; }
.header-blog-bottom__menu-link:focus {
box-shadow: 0 0 0 1px #3E4A50; }
.header-blog-bottom__menu-link--active {
background-color: #B5F0EF !important; }
.header-blog-bottom__menu-link--gray {
background-color: #F5F6FA; }
.header-blog-bottom--gray {
background-color: #F5F6FA; }
.header-blog-bottom--submenu .header-blog-bottom__menu-item {
margin: 20px 8px 14px 0; }
/* se usa en core-functions.js */
@media (max-width: 767.98px) {
.button__header-search {
display: none !important; } }
@keyframes fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
/* Para que pueda usarse en el box de etiquetas */
.menu__list-link.menu__list-link--vertical {
flex: 1;
align-items: flex-start; }
@media (max-width: 767.98px) {
.tag-container {
padding: 32px 0; } }
@media (max-width: 991.98px) {
.tag-container .tag-list__item:last-child {
display: none !important; }
.tag-container .tag-list__item:nth-last-child(2) {
padding: 0 0 19px 0; } }
.tag-list__title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1.2px;
line-height: 1.1875rem; }
.tag-list__item {
display: inline-block;
padding: 0 19px 19px 0; }
.tag-list__item:last-child {
padding: 0 0 19px 0; }
.tag-list__text {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
letter-spacing: 0.005625rem;
line-height: 1.1875rem; }
.tag-list__icon {
margin-right: 4px; }
.tag-list__link {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 0.0625rem;
line-height: 1rem;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-out; }
.tag-list__link:focus {
background: #3E4A50;
color: #FFF;
height: 1.5rem;
padding-top: 5px;
padding-bottom: 5px; }
.tag-list__link:hover {
color: #191B1C; }
.tags__truncate {
display: table-cell;
max-width: 93px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.tag-list-box__link {
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem;
margin: 5px 0;
display: flex;
float: left;
align-items: center;
width: 100%;
/*&:last-child {
padding: 5px 0 0 0;
}*/
/*&:focus{
box-shadow: 0 0 0 4px $bk-gris-focus-100;
}*/ }
@media (min-width: 992px) {
.tag-list-box__link {
width: 49%; } }
.tag-list-box__icon {
margin: 0 3px 0 0; }
@media (min-width: 1200px) {
.tag-list-box__icon {
margin: 0 8px 0 0; } }
.component-block__title {
color: #191B1C;
font-family: "BK-Text";
font-size: 1.5rem;
line-height: 2rem;
font-weight: normal; }
.component-block__title:hover {
color: #68707E; }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-block__title {
font-size: 1.875rem; } }
@media (min-width: 1200px) {
.component-block__title {
font-size: 2rem;
line-height: 2.5rem; } }
.component-block--half .component-block__title {
font-size: 24px;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
height: 64px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.component-block__title--normal {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1.125rem;
line-height: 2rem;
font-weight: normal; }
.component-block__title--small {
font-size: 1rem;
line-height: 1.3125rem; }
@media (min-width: 768px) {
.component-block__title--small {
font-size: 1.5rem;
line-height: 2rem; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__title--small {
font-size: 1.25rem;
line-height: 2rem; } }
.component-block__title--smaller {
font-size: 1rem;
line-height: 1.3125rem;
font-family: "BK-Sans"; }
.component-block__title--smaller:hover {
color: #191B1C; }
@media (min-width: 768px) {
.component-block__text-bottom {
position: absolute;
bottom: 0; } }
.component-block__text-bottom--half-page {
bottom: 24px; }
.component-block__description {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.3125rem; }
@media (min-width: 768px) {
.component-block__description {
font-size: 1rem;
line-height: 1.5rem;
max-height: 75px;
text-overflow: ellipsis;
overflow: hidden; } }
.component-block__line {
width: 48px;
height: 3px;
background-color: #FF821C; }
.component-block__line--cyan {
background-color: #B5F0EF; }
.component-block__text-link:focus {
background: #3E4A50;
display: block; }
.component-block__text-link:focus .component-block__title {
color: #FFF; }
.component-block__label {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem;
text-align: center;
padding: 5px 0px 1px;
display: inline-block; }
.component-block__label:focus {
box-shadow: 0 0 0 4px #3E4A50; }
.component-block__label:hover {
color: #68707E; }
.component-block__label-box--cyan {
background: #D3F6F5;
padding: 0px 15px 0px; }
.component-block__item {
padding-bottom: 40px;
/*@include media-breakpoint-down(md) {
&:nth-child(2n) {
border: 0;
}
}*/
/* Change the order of elements on mobile view */
/* end mobile changes */ }
@media (max-width: 767.98px) {
.component-block__item {
padding-bottom: 40px; } }
@media (min-width: 768px) {
.component-block__item {
margin-bottom: 40px;
padding-bottom: 24px; } }
@media (min-width: 768px) {
.component-block__item {
border-right: 1px solid #EBEEF5; } }
@media (max-width: 991.98px) {
.component-block__item:nth-child(3n) {
border: 0; } }
@media (max-width: 767.98px) {
.component-block__item .component-block__description {
padding-top: 24px; }
.component-block__item .component-block__line {
display: none; }
.component-block__item .component-block__label--date {
padding: 3px 0; }
.component-block__item .component-block__text-bottom {
padding-top: 16px; }
.component-block__item .component-block__label--date {
text-align: left; }
.component-block__item .component-block__text {
display: grid; }
.component-block__item .component-block__text .component-block__nav {
order: 1; }
.component-block__item .component-block__text .component-block__link {
order: 2; }
.component-block__item .component-block__text .component-block__text-bottom {
order: 3; }
.component-block__item .component-block__text .component-block__description {
order: 4;
padding-top: 4px; } }
@media (max-width: 991.98px) {
.component-block__item.component-block__item-normal:nth-child(2n) {
border: 0 !important; } }
@media (min-width: 992px) {
.component-block__item.component-block__item-normal:nth-child(3n) {
border: 0 !important; } }
.component-block__item--related {
border-right: none;
margin-bottom: 0; }
.component-block__item--related .component-block__title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 14px;
line-height: 20px; }
.component-block__item--related .component-block__title:hover {
color: #68707E; }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__item--related .component-block__title {
font-size: 0.875rem;
line-height: 24px; } }
@media (max-width: 1199.98px) {
.component-block__item--related .component-block__image {
display: inline-block;
vertical-align: top;
width: 45%;
margin-right: 5%; } }
@media (max-width: 1199.98px) {
.component-block__item--related .component-block__text {
width: 48%;
display: inline-block;
vertical-align: top; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__item--related .component-block__text.component-block__text-detail {
width: 100%; } }
.component-block__item--related .component-block__title {
/* @include media-breakpoint-down(lg) {
margin-top: 4px;
}*/ }
@media (min-width: 992px) {
.component-block__item--related .component-block__title {
margin-top: 8px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__item--related .component-block__title {
margin-top: 16px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__item--related .component-block__image.component-block__image-detail {
width: 100%; } }
.component-block__left-side {
height: auto; }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-block__left-side {
width: 100%;
height: 350px !important; } }
.component-block__link {
display: block; }
.component-block__link:focus {
/*box-shadow: 0 0 0 4px $bk-gris-focus-100;*/ }
.component-block__link:focus .component-block__title {
background: #3E4A50;
color: white; }
.component-block__img {
width: 100%; }
@media (min-width: 1200px) {
.component-block__img {
width: auto;
max-width: 653px; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-block__img {
height: 328px;
max-width: 535px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__img {
width: 720px;
max-width: 720px; } }
.component-block__img--full-width {
max-width: 100%; }
.component-block__image-link:focus {
display: block;
box-shadow: 0 0 0 4px #3E4A50; }
.component-block__content {
background-color: #FFF;
box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.15);
padding: 24px; }
@media (min-width: 992px) {
.component-block__content {
height: 320px;
width: 625px; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-block__content {
height: 280px;
width: 536px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__content {
padding: 40px 40px 24px 40px; } }
@media (min-width: 1200px) {
.component-block__content--right {
transform: translate(-167px, 40px); } }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-block__content--right {
transform: translate(-161px, 23px); } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__content--right {
transform: translate(40px, -122px);
margin-bottom: -122px;
height: 285px;
width: 640px; } }
.container.component-block_mas-leido .component-block__content--bottom {
transform: translate(16px, -64px); }
@media (min-width: 768px) and (max-width: 991.98px) {
.container.component-block_mas-leido .component-block__content--bottom {
transform: translate(0px, 0px);
box-shadow: 0px 0px 0px 0px rgba(97, 112, 119, 0.15); } }
@media (max-width: 575.98px) {
.container.component-block_mas-leido .component-block__content--bottom {
transform: translate(0px, 0px);
box-shadow: 0px 0px 0px 0px rgba(97, 112, 119, 0.15);
padding: 0;
height: auto; } }
@media (min-width: 576px) and (max-width: 767.98px) {
.container.component-block_mas-leido .component-block__content--bottom {
transform: translate(0px, 0px);
box-shadow: 0px 0px 0px 0px rgba(97, 112, 119, 0.15);
padding: 0;
height: auto; } }
.component-block__content--full-width {
width: 100%;
max-width: 523px;
height: 300px; }
@media (max-width: 1199.98px) {
.component-block__content--full-width {
max-width: 423px; } }
.container.component-block_mas-leido {
position: relative; }
@media (min-width: 768px) and (max-width: 991.98px) {
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page {
flex: 0 0 33.33333%;
max-width: 33.33333%;
margin-bottom: 40px;
border-right: 1px solid #EAEFEF; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block--half .component-block__title {
overflow: initial;
text-overflow: initial;
display: initial;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
font-size: 1.125rem;
line-height: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__line.component-block__line--cyan.margin-bottom_16.margin-top_16 {
display: none;
height: 0px;
margin: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__description {
display: none;
height: 0px;
margin: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__text-bottom.component-block__text-bottom--half-page {
position: absolute;
bottom: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__text-link {
padding-bottom: 40px;
padding-top: 16px;
display: block; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__left-side {
margin-bottom: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__breadcrumb-item .component-block__breadcrumb-link {
font-size: 0.8125rem;
text-transform: capitalize; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__content {
padding: 0px 0px 0px 0px;
height: auto; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__label.component-block__label-box--cyan {
font-size: 0.8125rem;
line-height: 1.5rem; } }
@media (max-width: 575.98px) {
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page {
padding-bottom: 24px; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__line.component-block__line--cyan.margin-bottom_16.margin-top_16 {
display: none;
height: 0px;
margin: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__description {
display: none;
height: 0px;
margin: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__left-side {
margin-bottom: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__text-link {
padding-top: 16px;
display: block; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block--half .component-block__title {
overflow: initial;
text-overflow: initial;
display: initial;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
font-size: 1.125rem;
line-height: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__text-bottom.component-block__text-bottom--half-page {
padding-top: 16px; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__label.component-block__label-box--cyan {
font-size: 0.8125rem;
line-height: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__label.component-block__label-box--cyan .component-block__label {
font-size: 0.8125rem;
line-height: 1.5rem; } }
@media (min-width: 576px) and (max-width: 767.98px) {
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page {
padding-bottom: 24px; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__line.component-block__line--cyan.margin-bottom_16.margin-top_16 {
display: none;
height: 0px;
margin: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__description {
display: none;
height: 0px;
margin: 0; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__left-side {
margin-bottom: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__text-link {
padding-top: 16px;
display: block; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block--half .component-block__title {
overflow: initial;
text-overflow: initial;
display: initial;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
font-size: 1.125rem;
line-height: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__text-bottom.component-block__text-bottom--half-page {
padding-top: 16px; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__label.component-block__label-box--cyan {
font-size: 0.8125rem;
line-height: 1.5rem; }
.container.component-block_mas-leido .row.margin-bottom_0.d-md-flex .col-md-6.component-block--half-page .component-block__label.component-block__label-box--cyan .component-block__label {
font-size: 0.8125rem;
line-height: 1.5rem; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.container.component-block_mas-leido .row.margin-bottom_40 article.col-md-4.col-lg-3.component-block__item.component-block__item--no-text:first-child {
position: absolute;
right: 0;
top: 56px;
border-right: 0px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.container.component-block_mas-leido .row.margin-bottom_40 article.col-md-4.col-lg-3.component-block__item.component-block__item--no-text:last-child {
display: none; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.container.component-block_mas-leido .row.margin-bottom_40 .component-block__item--no-text:nth-child(3n) {
border-right: 1px solid #EAEFEF; }
.container.component-block_mas-leido .row.margin-bottom_40 .component-block__item--no-text:nth-child(4n) {
border-right: 0px; }
.container.component-block_mas-leido .row.margin-bottom_40 .component-block__item--no-text:nth-child(7n) {
border-right: 0px; } }
/* BREADCRUMB */
.component-block__breadcrumb-item {
display: inline-block;
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem;
text-transform: capitalize; }
.component-block__breadcrumb-item--active {
color: #FF821C; }
.component-block__breadcrumb-link {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem; }
.component-block__breadcrumb-link:focus {
background: #3E4A50;
color: #FFF; }
.component-block__breadcrumb-link--orange {
color: #FF821C; }
.component-block__right-side .component-block__text {
position: relative;
height: 100%; }
@media (max-width: 767.98px) {
.component-block__right-side .component-block__text-bottom {
padding-top: 24px; } }
/* MODIFIER .component-block__item_no-text | .component-block__item_no-text*/
.component-block__item--no-text {
padding-bottom: 24px; }
@media (min-width: 768px) {
.component-block__item--no-text {
padding-bottom: 0; } }
@media (min-width: 768px) {
.component-block__item--no-text {
border-right: 1px solid #EAEFEF; } }
@media (min-width: 992px) {
.component-block__item--no-text:nth-child(4n) {
border: 0; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-block__item--no-text:nth-child(3n) {
border: 0; } }
@media (max-width: 991.98px) {
.component-block__item--no-text {
padding-bottom: 40px; } }
/* elementos d-none */
.component-block__item--no-text .component-block__description {
display: none; }
.component-block__item--no-text .component-block__line {
display: none; }
@media (min-width: 768px) {
.component-block__item--no-text .component-block__link {
padding-bottom: 40px; } }
/* .component-block__item--no-text .component-block__label {
padding: 0;
} */
.component-block__item--no-text .component-block__label {
padding: 0; }
.component-block__item--no-text .component-block__label-box--cyan {
padding: 5px 15px 1px;
margin-right: 15px; }
.component-block__item--no-text .component-block__title {
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
font-size: 1.125rem;
line-height: 1.5rem; }
.component-block__item--no-text .component-block__link {
padding-top: 0; }
.component-block__item--no-text .component-block__breadcrumb-link {
font-size: 0.8125rem;
line-height: 1.5rem; }
.component-block__item--no-text .component-block__label {
font-size: 0.8125rem;
line-height: 1.5rem; }
.component-box {
position: relative; }
@media (max-width: 767.98px) {
.component-box.no-padding-xs .component-box__main-title {
padding-left: 24px; } }
.component-box__main-title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1.125rem;
line-height: 2rem;
font-weight: normal; }
.component-box__box {
box-shadow: 0 10px 20px 0 rgba(104, 112, 126, 0.15);
background: #FFF;
padding: 16px; }
@media (max-width: 1199.98px) {
.component-box__box {
padding: 24px 16px; } }
@media (min-width: 992px) {
.component-box__box {
padding: 24px 16px; } }
@media (min-width: 1200px) {
.component-box__box {
padding: 24px 24px 40px 24px; } }
@media (max-width: 767.98px) {
.component-box__box {
padding: 24px; } }
.component-box__box--lg {
padding: 24px; }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-box__box--lg {
padding: 32px 24px; } }
@media (min-width: 992px) {
.component-box__box--lg {
padding: 40px; } }
.component-box__box--auto {
/*min-height: auto !important;*/
min-height: 100%; }
.component-box__box--fit-height {
height: 100%; }
.component-box__title-highlight {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
font-weight: bold;
line-height: 1.25rem; }
.component-box__title-highlight--small {
font-size: 0.875rem; }
@media (max-width: 767.98px) {
.component-box--market-aside {
box-shadow: 0 10px 20px 0 rgba(104, 112, 126, 0.15); } }
.component-box__title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem; }
.component-box__title-detail {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 1.5rem; }
.component-box__title-box {
display: table;
padding: 0 16px; }
.component-box__title-box--cyan {
background-color: #B5F0EF; }
.component-box__title-box--yellow {
background-color: #FED430; }
.component-box__title-box--orange {
background-color: #FF821C; }
.component-box__nav {
padding-bottom: 24px; }
@media (max-width: 1199.98px) {
.component-box__nav {
padding-bottom: 8px; } }
.component-box__nav-item {
display: inline-block;
padding-right: 8px; }
.component-box__nav-link {
color: #AFB5C8;
font-family: "BK-Sans";
font-size: 1rem;
font-weight: bold;
line-height: 1.25rem;
background: transparent;
padding: 0 6px 0 0; }
.component-box__nav-link:focus {
color: #FFF;
background: #3E4A50; }
.component-box__nav-link--active {
color: #191B1C; }
.component-box__table {
width: 100%;
border-collapse: collapse; }
.component-box__table-header {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1.5rem; }
.component-box__table-info {
display: block; }
.component-box__table-info--bigger {
font-size: 1rem;
line-height: 1.5rem; }
.component-box__table-link {
color: #FF821C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem; }
.component-box__table-link:focus {
background: #3E4A50;
color: #FFF; }
.component-box__tr {
border-bottom: 1px solid #D8DDEF; }
.component-box__td {
padding: 8px 0; }
.component-box__td-title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: initial;
display: block;
font-weight: bold; }
.component-box__td-tag {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem; }
.component-box__td-value {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1rem; }
.component-box__icon {
display: inline-block;
margin-left: -16px; }
.component-box__icon--up {
color: #22CB65;
transform: rotate(-40deg); }
.component-box__icon--down {
color: #DB2A21;
transform: rotate(40deg); }
.component-box__row-highlight {
position: relative; }
.component-box__row-highlight:after {
content: '';
display: block;
height: 50px;
width: 10px;
background-color: #B5F0EF;
position: absolute;
left: 15px; }
@-moz-document url-prefix() {
.component-box__row-highlight:after {
left: -24px; } }
.component-box__text-footer {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1rem; }
.component-box__list {
display: table;
width: 100%; }
.component-box__list-item {
display: table;
width: 100%;
cursor: pointer;
font-size: 0.75rem; }
.component-box__list-item:focus {
background: #3E4A50; }
.component-box__list-item:focus div,
.component-box__list-item:focus .component-box__list-date,
.component-box__list-item:focus .component-box__list-text {
color: #FFF; }
.component-box__list-col {
display: table-cell;
vertical-align: bottom;
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem; }
@media (min-width: 1200px) {
.component-box__list-col {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 250px; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-box__list-col:last-child {
width: 30%; } }
.col-icon-list-document {
vertical-align: middle;
margin-right: 16px;
padding-left: 24px; }
.component-box__list-date {
display: block;
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
padding-bottom: 2px; }
.component-box__list-text {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem; }
.component-box__list-link {
color: #FF821C;
padding: 8px 0 0 0;
display: flex;
align-items: center; }
@media (min-width: 768px) {
.component-box__list-link {
padding: 0; } }
.component-box__list-link span:first-child {
padding-right: 16px; }
.component-box__pub {
position: relative;
bottom: 0;
left: 0; }
@media (min-width: 992px) {
.component-box__pub {
position: relative; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
.component-box__pub {
bottom: 0; } }
.component-box__pub-img {
width: 100%; }
@media (min-width: 992px) {
.component-box__pub-img {
max-width: 360px;
max-height: 300px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-box__pub-img {
max-width: 345px;
max-height: 287px;
margin-top: 40px; } }
.component-box__pub-text {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1rem;
text-align: right;
float: right;
padding-top: 16px; }
@media (min-width: 768px) {
.component-box__pub-text {
position: absolute;
right: 16px;
padding-top: 6px;
bottom: -20px; } }
.component-box__pub-link:focus {
box-shadow: 0 0 0 4px #3E4A50;
display: block; }
.component-box__pub--aside {
position: relative !important;
bottom: 0 !important; }
.component-box__pub--aside .component-box__pub-text {
right: 0;
position: relative;
padding-top: 8px;
bottom: auto; }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-box__pub--aside .component-box__pub-img {
margin-top: 26px; } }
/* Horizontal tabs */
.component-box__panel {
display: none; }
.component-box__panel--active {
display: block;
transition-property: all;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: ease-in-out; }
@media (max-width: 991.98px) {
.component-box-document-home {
margin-top: 48px; } }
@media (min-width: 1200px) {
.component-box-document-home {
margin-bottom: 24px; } }
@media (min-width: 992px) {
.component-box-document-home {
margin-bottom: 24px; } }
/* Nueva lista de documentos, pagina de detalle */
.component-box__document-list {
overflow: hidden; }
@media (max-width: 767.98px) {
.component-box__document-list {
margin-left: 24px;
margin-right: 24px; } }
.component-box__document-detail {
border-bottom: 1px solid #D9E4FF;
display: flex;
justify-items: left;
flex-direction: column;
align-items: start;
padding: 16px 0;
/*&:focus{
background: #3E4A50;
color: #FFF
}*/ }
@media (min-width: 768px) {
.component-box__document-detail {
min-height: 72px;
align-items: center;
flex-direction: row; } }
.component-box__document-detail a {
color: unset; }
.component-box__icon-document-list {
float: left;
margin-left: 24px;
line-height: 40px;
margin-right: 16px; }
@media (max-width: 767.98px) {
.component-box__icon-document-list {
display: none; } }
.component-box__date-document {
flex: 1;
float: left; }
@media (min-width: 768px) and (max-width: 991.98px) {
.component-box__date-document {
width: 200px;
text-overflow: ellipsis;
overflow: hidden; } }
.component-box__document-link {
float: right;
line-height: 2.5rem; }
@media (max-width: 767.98px) {
.component-box__document-link {
line-height: unset; } }
/* Para la caja de etiquetas en version mobile */
.component-box__tag-detail {
/*box-shadow: 0 10px 20px 0 rgba(104, 112, 126, 0.15);*/
overflow-x: unset; }
.title-content {
position: relative; }
/* MODIFIER .title-content__main_small | .title-content__main--small*/
.title-content__main--small {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1.5rem;
line-height: 2rem; }
.title-content__main {
color: #191B1C;
font-family: "BK-Text";
font-size: 2rem;
line-height: 2.5rem;
font-weight: normal;
margin-bottom: 24px; }
@media (max-width: 991.98px) {
.title-content__main {
margin-bottom: 8px;
font-size: 1.5rem;
line-height: 2rem; } }
@media (min-width: 1200px) {
.title-content__main_bigger {
font-size: 2.5rem;
line-height: 3rem; } }
@media (max-width: 767.98px) {
.title-content__main_bigger {
font-size: 1.5rem;
line-height: 2rem; } }
.title-content__secondary {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 1.5rem;
font-weight: normal; }
.title-content__line {
height: 3px;
width: 48px; }
.title-content__line_orange {
background-color: #FF821C; }
.title-content__line_yellow {
background-color: #FED430; }
.title-content__line_cyan {
background-color: #B5F0EF; }
.title-content__counter {
color: #FF821C;
font-family: "BK-Sans";
font-size: 1.5rem;
line-height: 2rem; }
.breadcrumb-item {
display: inline-flex;
padding-right: 5px;
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.8125rem;
letter-spacing: 0;
line-height: 1rem;
align-items: center; }
.breadcrumb-item:not(:last-child):after {
content: '/';
display: inline-flex;
padding-left: 8px;
font-family: "BK-Sans"; }
.breadcrumb-item .icon-home {
margin-top: -5px; }
.breadcrumb-item .link-home {
overflow: unset; }
@media (max-width: 767.98px) {
.breadcrumb-item {
font-size: 0.75rem; } }
/* MODIFIER .active | .breadcrumb-item--active*/
.breadcrumb-item--active span {
color: #FF821C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px; }
@media (max-width: 767.98px) {
.breadcrumb-item--active span {
max-width: 80px; } }
.breadcrumb-item--active span::first-letter {
text-transform: uppercase; }
.breadcrumb-item__link {
color: #191B1C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px; }
@media (max-width: 767.98px) {
.breadcrumb-item__link {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px; } }
.breadcrumb-item__link::first-letter {
text-transform: uppercase; }
/* MODIFIER .breadcrumb-item_end | .breadcrumb-item--end*/
.breadcrumb-item--end:after {
content: '' !important; }
.breadcrumb-item__link--active {
color: #FF821C; }
.icon--20 {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px; }
@media (max-width: 767.98px) {
.icon--16-xs {
width: 16px;
height: 16px;
line-height: 16px; } }
@media (max-width: 767.98px) {
.menu-box {
max-height: 95px;
overflow: hidden;
transition-property: all;
transition-duration: 0.3s;
transition-delay: 0s;
transition-timing-function: ease-in-out; } }
.menu-box--opened {
max-height: 500px; }
.menu-box__item {
height: 40px;
width: 40px;
background-color: #FFF;
box-shadow: 0 0 10px 0 rgba(97, 112, 119, 0.26);
position: relative;
display: inline-block;
margin: 0 8px 16px 0px; }
@media (min-width: 768px) {
.menu-box__item {
margin: 0 16px 16px 0px; } }
.menu-box__link {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 40px;
text-align: center;
height: 100%;
width: 100%;
display: block; }
.menu-box__link:focus {
box-shadow: 0 0 0 4px #3E4A50; }
.menu-box__link--disable {
background-color: #F7FAFF;
color: #D8DDEF; }
.menu-box__link--active {
font-weight: bold;
color: #FF821C; }
.menu-box__show-more {
width: 100%;
height: 32px;
position: relative;
color: #FF821C;
-webkit-box-shadow: 0px -16px 16px 0px #FFF;
-moz-box-shadow: 0px -16px 16px 0px #FFF;
box-shadow: 0px -16px 16px 0px #FFF;
background: #FFF;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-in-out;
margin-bottom: 40px; }
@media (min-width: 768px) {
.menu-box__show-more {
display: none; } }
.menu-box__show-more:focus {
background-color: white;
color: #FF821C;
box-shadow: 0 0 0 4px #3E4A50; }
.menu-box__show-more--opened .menu-box__icon {
transform: rotate(180deg); }
.filter-item {
border: 1px solid rgba(97, 112, 119, 0.99);
border-radius: 4px;
padding: 14px; }
.filter-item__label {
font-family: "BK-Sans";
color: #75858E;
font-size: 1rem;
line-height: 1.875rem;
padding-right: 27px; }
.filter-item__label:last-child {
padding-right: 0; }
/* MODIFIER .filter-item__label_icon | .filter-item__label--icon*/
.filter-item__label--icon {
color: #A0A9AD;
line-height: 1.625rem; }
/* MODIFIER .menu__list_tag | .menu__list--tag*/
.menu__list.menu__list--tag {
display: block; }
.menu__list-item {
display: inline-block;
position: relative;
padding-bottom: 8px;
vertical-align: top;
width: 49%;
/*@include media-breakpoint-up(lg) {
width: 32%;
}*/ }
@media (min-width: 992px) {
.component-box__box .menu__list-item {
width: 49%; } }
.menu__list-link {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem;
display: flex;
align-items: flex-start; }
.menu__list-link:hover {
color: #68707E; }
.menu__list-link:focus {
background: #3E4A50;
color: #FFF; }
.header-blog--menu-opened .menu__list-link span.menu__list-icon {
padding-top: 3px; }
/* Diccionario */
.form-fw {
position: relative; }
/* MODIFIER .submit | .form-fw--submit*/
.form-fw--submit .form-fw__button_submit {
display: block; }
.form-fw--submit .form-fw__counter {
right: 55px;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease-in-out; }
@media (max-width: 575.98px) {
.form-fw--submit .form-fw__counter {
right: 25px;
font-size: 0.875rem;
line-height: 1.2rem; } }
.form-fw__button-icon {
width: 30px;
height: 30px;
line-height: 1.875rem;
font-size: 1.875rem; }
@media (min-width: 768px) {
.form-fw__button-icon {
width: 40px;
height: 40px;
line-height: 2.5rem;
font-size: 2.5rem; } }
.form-fw__input {
border: 0;
width: 100%;
font-size: 1.25rem;
font-weight: normal;
line-height: 1.75rem;
border-bottom: 1px solid #EBEEF5;
padding-bottom: 16px;
padding-right: 80px;
outline: none; }
@media (min-width: 768px) {
.form-fw__input {
padding-right: 260px; } }
.form-fw__input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #EBEEF5; }
.form-fw__input::-moz-placeholder {
/* Firefox 19+ */
color: #EBEEF5; }
.form-fw__input:-ms-input-placeholder {
/* IE 10+ */
color: #EBEEF5; }
.form-fw__input:-moz-placeholder {
/* Firefox 18- */
color: #D1D1D2; }
.form-fw__input:focus {
box-shadow: 0 0 0 4px #3E4A50; }
@media (max-width: 767.98px) {
.form-fw__input {
font-size: 1rem; } }
/* MODIFIFER .form-fw__input_bold | .form-fw__input--bold*/
.form-fw__input--bold {
font-weight: bold !important; }
.form-fw__button {
float: right;
position: absolute;
right: -15px;
color: #68707E;
top: 0; }
.form-fw__button:focus {
color: white !important; }
@media (min-width: 768px) {
.form-fw__button {
top: -7px;
right: 0; } }
.form-fw__counter {
color: #FF821C;
font-family: "BK-Sans";
font-size: 1.5rem;
line-height: 2rem;
text-align: right;
position: absolute;
top: 6px;
right: 0; }
@media (min-width: 768px) {
.form-fw__counter {
top: -4px; } }
/* MODIFIER .form-fw__counter_mob | .form-fw__counter--mob*/
.form-fw__counter--mob {
right: 25px;
font-size: 0.875rem;
line-height: 1.2rem; }
/* Preguntar por los estilos de texto */
.form-container__text_small {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1.25rem; }
/* Boton del suscribirse */
@media (max-width: 767.98px) {
.suscribirse__enviar {
width: 100%; } }
.result-box {
height: 80px;
width: 80px;
padding: 12px;
position: relative;
display: flex;
align-items: flex-end; }
@media (min-width: 768px) {
.result-box {
height: 152px;
width: 152px;
padding: 24px; } }
/* MODIFIER .result-box_yellow | .result-box--yellow */
.result-box--yellow {
background-color: #FED430; }
.result-box__label {
color: #191B1C;
font-family: "BK-Text";
font-size: 1.25rem;
line-height: 1.25rem; }
.result-content__title {
color: #191B1C;
font-family: "BK-Text";
font-size: 1.5rem;
line-height: 2rem;
font-weight: normal; }
.result-content__title:hover {
color: #68707E; }
.result-content__title:focus {
background-color: #3E4A50;
color: white; }
.result-content__line {
height: 3px;
width: 48px; }
.result-content__line--orange {
background-color: #FF821C; }
.result-content__text {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 1.5rem; }
.result-container__link {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem; }
.result-container__link:focus {
box-shadow: 0 0 0 4px #3E4A50;
background: transparent; }
.result-content__link:focus {
display: table;
background-color: #3E4A50; }
.result-content__link:focus h2 {
color: white; }
.result-content__new-item {
color: #191B1C;
font-family: "BK-Text";
font-size: 1.25rem;
line-height: 2rem;
display: table; }
.result-content__new-item:focus {
box-shadow: 0 0 0 4px #3E4A50; }
.result-content__sub-title {
color: #191B1C;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 2rem; }
.image-container {
position: relative; }
@media (max-width: 767.98px) {
.image-container {
margin-left: -24px;
margin-right: -24px; } }
.image-cap {
background: #FFF;
padding: 4px 8px 4px 8px;
position: absolute;
bottom: -1px;
right: -1px; }
@media (max-width: 767.98px) {
.image-cap {
padding: 8px 24px 8px 24px;
position: relative; } }
.image-cap__text {
color: #68707E;
font-family: "BK-Sans";
font-size: 12px;
line-height: 18px;
text-align: right; }
/* MODIFIER .horizontal-tabs_aside | horizontal-tabs--aside*/
@media (min-width: 768px) and (max-width: 991.98px) {
.horizontal-tabs--aside {
display: inline-block;
width: 345px; } }
.horizontal-tabs__box {
box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.26);
background: #FFF; }
.horizontal-tabs__container {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%; }
.horizontal-tabs__tab-item {
flex: 1; }
.horizontal-tabs__tab {
width: 100%;
text-align: left;
background-color: #F7FAFF;
padding: 0;
/* MODIFIER .active | .horizontal-tabs__tab--active*/ }
.horizontal-tabs__tab:focus > .horizontal-tabs__tab-text {
border-bottom: 3px solid #3E4A50; }
.horizontal-tabs__tab--active {
background-color: #FFF;
border-bottom: 0;
/* MODIFIER .horizontal-tabs__tab_orange | .horizontal-tabs__tab--orange */ }
.horizontal-tabs__tab--active:focus > .horizontal-tabs__tab-text {
border-bottom: 0; }
.horizontal-tabs__tab--active .horizontal-tabs__tab-text {
color: #191B1C; }
.horizontal-tabs__tab--active.horizontal-tabs__tab--orange .horizontal-tabs__tab-text {
border-top: 3px solid #FF821C; }
.horizontal-tabs__tab--active.horizontal-tabs__tab--cyan .horizontal-tabs__tab-text {
border-top: 3px solid #B5F0EF; }
.horizontal-tabs__tab--active.horizontal-tabs__tab--yellow .horizontal-tabs__tab-text {
border-top: 3px solid #FED430; }
.horizontal-tabs__tab-text {
color: #68707E;
font-family: "BK-Sans";
font-size: 1rem;
padding: 14px 24px;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent; }
.horizontal-tabs__panels {
overflow: hidden;
position: relative;
padding: 24px; }
.horizontal-tabs__panel {
visibility: hidden;
position: absolute;
top: 0;
left: 0; }
/* MODIFIER .active | .horizontal-tabs__panel--active */
.horizontal-tabs__panel--active {
visibility: visible;
position: relative; }
.article:after {
content: '';
display: block;
height: 3px;
width: 48px;
background-color: #FED430;
margin: 16px 0; }
.article__text {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1.5rem; }
.article__link:focus {
display: block;
background: #3E4A50;
color: #FFF; }
.article__link:focus .article__title {
color: #FFF; }
.article__title {
color: #191B1C;
font-family: "BK-Sans";
line-height: 1.5rem;
font-weight: normal;
font-size: 0.875rem; }
@media (min-width: 992px) {
.article__title {
font-size: 1rem; } }
.article__title:hover {
color: #6B707E; }
.article-more__link {
display: table;
margin: 24px auto 0 auto;
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.75rem;
letter-spacing: 1px;
line-height: 1rem; }
.article-more__link:focus {
/*box-shadow: 0 0 0 4px $bk-gris-focus-100;*/
background-color: #3E4A50;
color: white; }
.related-article {
position: relative; }
@media (min-width: 576px) {
.related-article {
padding: 0 0 0 32px; } }
.related-article__link {
display: flex;
align-items: center; }
.related-article__link:hover .related-article__link-text {
color: #68707E; }
.related-article__link:focus .related-article__link-text {
background-color: #3E4A50;
color: white; }
.related-article__link-icon {
color: #FFF; }
@media (max-width: 767.98px) {
.related-article__link-icon {
margin-right: 12px; } }
.related-article__link-text {
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.25rem;
/* padding-left: 10px;*/
/* @include media-breakpoint-up(sm) {
padding: 10px 0 0 0;
}*/ }
.related-article__icon {
width: 40px;
height: 40px;
background: #FF821C;
padding-top: 3px;
margin-right: 24px; }
@media (max-width: 767.98px) {
.related-article__icon {
margin-right: 4px; } }
.article-detail__date {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 1.5rem;
display: inline-block;
margin-bottom: 0; }
.article-detail__text {
color: #68707E;
font-family: "BK-Sans";
font-size: 0.75rem;
margin-bottom: 0; }
@media (min-width: 576px) {
.article-detail__text {
line-height: 1.6rem;
float: right; } }
.article-content {
position: relative;
color: #5c6780;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 1.5rem; }
.article-content img {
max-width: 100%; }
.article-content__title {
color: #191B1C;
font-family: "BK-Text";
font-size: 1.375rem;
line-height: 2rem;
font-weight: normal; }
@media (min-width: 768px) {
.article-content__title {
font-size: 1.25rem; } }
@media (max-width: 767.98px) {
.article-content__title {
font-size: 1rem;
line-height: 1.5rem; } }
.article-content__highlight {
color: #FF821C;
font-family: "BK-Sans";
font-size: 1rem;
line-height: 1.5rem;
box-sizing: border-box;
display: inline-block;
font-weight: 600; }
.article-content a {
color: #BD4313; }
.article-content a:hover {
text-decoration: underline; }
.article-content a:focus {
color: #191B1C;
border: 1px solid #191B1C;
border-radius: 4px; }
.article-content a.btn--primary {
color: #FFF; }
.article-content a.btn--secondary {
color: #FF821C; }
.article-content h2 {
color: #191B1C;
font-family: "BK-Text";
font-size: 1.375rem;
line-height: 2rem;
font-weight: normal !important;
margin-top: 16px !important;
margin-bottom: 24px !important; }
@media (min-width: 768px) {
.article-content h2 {
font-size: 1.25rem; } }
@media (max-width: 767.98px) {
.article-content h2 {
font-size: 1rem;
line-height: 1.5rem; } }
.article-content h2 strong {
font-weight: normal !important; }
.article-content h3 {
color: #191B1C;
font-family: "BK-Text";
font-weight: normal !important;
margin-top: 16px !important;
margin-bottom: 16px !important; }
.article-content h3 strong {
font-weight: normal !important; }
.article-content li {
margin-bottom: 16px;
position: relative;
padding-left: 22px; }
.article-content ul > li:before {
font-family: 'BK-icons';
content: '\e936';
font-size: 18px;
display: block;
position: absolute;
left: -3px; }
.article-content .search-found {
color: #5D6B72;
background-color: #EFF3FF; }
.article-content .search-found:hover {
text-decoration: underline;
color: #191B1C; }
.article-content .search-found:focus {
color: #191B1C;
background: none;
border: 1px solid #191B1C;
border-radius: 4px; }
.article-content ol {
counter-reset: orderList; }
.article-content ol li:before {
counter-increment: orderList;
content: counters(orderList, ".") ".";
display: block;
position: absolute;
left: -3px; }
.popover {
position: relative;
padding: 0 0 0 5px;
text-align: center; }
.popover:hover .popover__item,
.popover:focus .popover__item {
visibility: visible;
opacity: 1;
transition: all 0.4s ease-out;
transform: translate3d(0, 0, 0); }
.popover:after {
content: '';
top: 32px;
left: 40%;
background: #FEE997;
position: absolute;
opacity: 0;
width: 18px;
height: 18px;
visibility: hidden;
transform: rotate(45deg); }
.popover:hover:after {
visibility: visible;
opacity: 1;
transition: all 0.4s ease-out; }
.popover__item {
box-sizing: border-box;
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 2;
display: block;
width: 370px;
transition: all 0.2s ease-out;
padding-top: 40px;
top: 0; }
@media (min-width: 768px) {
.popover__item {
left: 49%;
transform: translate3d(-117px, 0, 0); } }
@media (max-width: 767.98px) {
.popover__item {
margin: 0 20px !important;
transform: translate3d(0, 0, 0); } }
@media (min-width: 576px) {
.popover__item {
margin-left: -176px; } }
@media (max-width: 767.98px) {
.popover__item {
width: 100vw;
padding-left: 25px !important;
padding-right: 25px !important;
margin: 0; } }
.popover__text {
background: #FEE997;
color: #191B1C;
font-family: "BK-Sans";
font-size: 0.875rem;
line-height: 16px;
width: 100%;
display: block;
padding: 16px;
line-height: 1.3125rem;
text-align: left; }
.popover__link {
float: right;
color: #191B1C; }
.share {
position: relative; }
@media (max-width: 767.98px) {
.share {
position: fixed;
bottom: 0;
left: 0;
z-index: 3;
background-color: #505253;
box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.26);
width: 100%; } }
.share__content {
position: relative; }
@media (max-width: 767.98px) {
.share__content {
padding-top: 10px;
padding-left: 16px; } }
@media (min-width: 1200px) {
.share__content {
padding-top: 16px;
position: absolute;
top: 54px;
transform: translateX(-56px); } }
@media (min-width: 1200px) {
.share__content--sticky {
position: fixed;
top: 0;
background: #FFF;
display: block;
z-index: 9;
transform: translateX(-56px); } }
.share__text {
color: #FFF;
font-family: "BK-Sans";
font-size: 0.75rem;
line-height: 1rem;
position: relative;
top: -10px;
padding-right: 0 14px; }
@media (max-width: 767.98px) {
.share__text {
display: inline-block !important;
margin-right: 5px; } }
.share__item {
width: 30px;
height: 30px;
display: inline-block;
margin-right: 6px; }
.share__item:last-child {
margin-right: 0; }
@media (min-width: 1200px) {
.share__item {
margin-bottom: 7px;
display: block; } }
.share__item:focus {
box-shadow: 0 0 0 4px #3E4A50; }
/* MODIFIER .share__item_facebook | .share__item--facebook*/
.share__item--facebook {
background: url("../Images/social-networks.png") -170px -60px; }
/* MODIFIER .share__item_twitter | .share__item--twitter*/
.share__item--twitter {
background: url("../Images/social-networks.png") -60px -170px; }
/* MODIFIER .share__item_meneame | .share__item--meneame*/
.share__item--meneame {
background: url("../Images/social-networks.png") -10px -170px; }
/* MODIFIER .share__item_linkedin | .share__item--linkedin*/
.share__item--linkedin {
background: url("../Images/social-networks.png") -170px -110px; }
/* MODIFIER .share__item_whatsup | .share__item--whatsup*/
.share__item--whatsup {
background: url("../Images/social-networks.png") -110px -170px; }
/* MODIFIER .share__item_email | .share__item--email*/
.share__item--email {
background: url("../Images/social-networks.png") -170px -10px; }
/*md
# Márgenes top y bottom
Las clases para los márgenes superiores e inferiores son todas:
.margin-top_TAMAÑO
.margin-bottom_TAMAÑO
## Tamaño
Las variantes que podemos usar son múltiplos de 8:
* 8
* 16
* 24
* 32
* 40
* 48
* 64
* 104
## Variaciones para móvil:
Esas mismas claes acabadas en -xs se usan para la versión móvil.
## Tipos combinados:
* margin-top_8
* margin_top_16
* margin_top_24
* margin_top_32
* margin_top_40
* margin_top_48
* margin_top_64
* margin_top_104
* margin-bottom_8
* margin_bottom_16
* margin_bottom_24
* margin_bottom_32
* margin_bottom_40
* margin_bottom_48
* margin_bottom_64
* margin_bottom_104
* margin-top_8-xs
* margin_top_16-xs
* margin_top_24-xs
* margin_top_32-xs
* margin_top_40-xs
* margin_top_48-xs
* margin_top_64-xs
* margin_top_104-xs
* margin-bottom_8-xs
* margin_bottom_16-xs
* margin_bottom_24-xs
* margin_bottom_32-xs
* margin_bottom_40-xs
* margin_bottom_48-xs
* margin_bottom_64-xs
* margin_bottom_104-xs
```html_example
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam deserunt libero animi, saepe cumque eum, quas dolores ipsum fuga asperiores soluta blanditiis nostrum, maxime veritatis earum perspiciatis laboriosam totam tempora.
```
*/
.margin-bottom_0 {
margin-bottom: 0; }
.margin-top_0 {
margin-top: 0; }
.margin-bottom_8 {
margin-bottom: 0.5rem; }
.margin-top_8 {
margin-top: 0.5rem; }
.margin-bottom_16 {
margin-bottom: 1rem; }
.margin-top_16 {
margin-top: 1rem; }
.margin-bottom_24 {
margin-bottom: 1.5rem; }
.margin-top_24 {
margin-top: 1.5rem; }
.margin-bottom_32 {
margin-bottom: 2rem; }
.margin-top_32 {
margin-top: 2rem; }
.margin-bottom_40 {
margin-bottom: 2.5rem; }
.margin-top_40 {
margin-top: 2.5rem; }
.margin-bottom_48 {
margin-bottom: 3rem; }
.margin-top_48 {
margin-top: 3rem; }
.margin-bottom_64 {
margin-bottom: 4rem; }
.margin-top_64 {
margin-top: 4rem; }
.margin-bottom_104 {
margin-bottom: 6.5rem; }
.margin-top_104 {
margin-top: 6.5rem; }
@media (max-width: 767.98px) {
.margin-bottom_0-xs {
margin-bottom: 0 !important; }
.margin-top_0-xs {
margin-top: 0 !important; }
.margin-bottom_8-xs {
margin-bottom: 0.5rem !important; }
.margin-top_8-xs {
margin-top: 0.5rem !important; }
.margin-bottom_16-xs {
margin-bottom: 1rem !important; }
.margin-top_16-xs {
margin-top: 1rem !important; }
.margin-bottom_24-xs {
margin-bottom: 1.5rem !important; }
.margin-top_24-xs {
margin-top: 1.5rem !important; }
.margin-bottom_32-xs {
margin-bottom: 2rem !important; }
.margin-top_32-xs {
margin-top: 2rem !important; }
.margin-bottom_40-xs {
margin-bottom: 2.5rem !important; }
.margin-top_40-xs {
margin-top: 2.5rem !important; }
.margin-bottom_48-xs {
margin-bottom: 3rem !important; }
.margin-top_48-xs {
margin-top: 3rem !important; }
.margin-bottom_64-xs {
margin-bottom: 4rem !important; }
.margin-top_64-xs {
margin-top: 4rem !important; }
.margin-bottom_104-xs {
margin-bottom: 6.5rem !important; }
.margin-top_104-xs {
margin-top: 6.5rem !important; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.margin-bottom_0-md {
margin-bottom: 0; }
.margin-top_0-md {
margin-top: 0; }
.margin-bottom_8-md {
margin-bottom: 0.5rem; }
.margin-top_8-md {
margin-top: 0.5rem; }
.margin-bottom_16-md {
margin-bottom: 1rem; }
.margin-top_16-md {
margin-top: 1rem; }
.margin-bottom_24-md {
margin-bottom: 1.5rem; }
.margin-top_24-md {
margin-top: 1.5rem; }
.margin-bottom_32-md {
margin-bottom: 2rem; }
.margin-top_32-md {
margin-top: 2rem; }
.margin-bottom_40-md {
margin-bottom: 2.5rem; }
.margin-top_40-md {
margin-top: 2.5rem; }
.margin-bottom_48-md {
margin-bottom: 3rem; }
.margin-top_48-md {
margin-top: 3rem; }
.margin-bottom_64-md {
margin-bottom: 4rem; }
.margin-top_64-md {
margin-top: 4rem; }
.margin-bottom_104-md {
margin-bottom: 6.5rem; }
.margin-top_104-md {
margin-top: 6.5rem; } }
/*md
# Botones
La etiqueta es 'button' y clase que determina la estructura de un botón es **btn**:
## Accesibilidad
Si usamos alguna etiqueta distinta de 'button' (div o a) debemos añadir:
* el role="button"
* tabindex="0"
Si la etiqueta es un enlace 'a' además hay que añadir el atributo aria-pressed, que identifica si el boton es un 'toggle button' y si está o no presionado:
* aria-pressed="false" - indica que el botón no está pulsado
* aria-pressed="true" - indica que el botón está pulsado
```html_example
Ejemplo con div:
Print Page
Ejemplo con a:
Mute
```
Si el botón se usa con la etiqueta 'a' como no soporta el atributo 'disabled' hay que marcarlo con el aria-disabled="true" y con el tabindex="-1"
```html_example
Primary link
Link
```
## Tipos
Según la situación puede resaltarse usando:
* btn--primary
* btn--secondary
* btn--dark
* btn--light
* btn--purple
```html_example
Button
Button
Button
Button
Button
Button
```
## Estado
Un botón puede estar deshabilitado por clase o por atributo:
para cada button tiene su disabled
```html_example
Button
Button
Button
Button
Button
```
```html_example
Button
Button
Button
Button
Button
Button
```
## Comportamiento especial
Las clases modificadoras `btn--toggle` y `btn--toggle-secondary` sirven para utilizar distintas apariencias ya definidas, dependiendo de si el usuario está utilizando un dispositivo en dekstop o mobile.
* btn--toggle: en mobile cambia su la apariencia a un `text-link--black`
* btn--toggle-secondary: en mobile cambia su apariecnia a la del `btn--secondary`
```html_example
Button
Button
```
## Tamaño
Se puede alterar el tamaño del bot-on con los siguientes modificadores:
* btn--medium
```html_example
Button
```
* btn--small
```html_example
Button
```
* btn--tiny
```html_example
Button
```
* btn--block
```html_example
Button full width
```
## Iconos
Un icono puede usarse como botón añadiendo:
* btn--left-icon
```html_example
```
* btn--medium btn--left-icon
```html_example
```
* btn--rounded
```html_example
Más información sobre tarjeta de crédito gratis
```
# Link
```html_example
En un cuerpo de texto tenemos un
link simple.
```
# Text Link
```html_example
Text Link
context in case of not having
```
## Colores
* text-link--black
```html_example
Text Link
context in case of not having
```
* text-link_white
```html_example
```
## Estados
* text-link--disabled
```html_example
Text Link
context in case of not having
```
## Multilínea
* text-link--icon-multiline
```html_example
```
*/
.btn {
border-radius: 32px;
padding: 0 18px;
font-size: 12px;
font-family: "BK-Sans";
text-transform: uppercase;
height: 48px;
line-height: 48px;
letter-spacing: 1.5px;
display: inline-block;
min-width: 150px;
text-align: center;
width: auto;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none; }
@media (min-width: 576px) {
.btn {
min-width: 185px; } }
.btn--block {
width: 100%; }
@media (max-width: 767.98px) {
.btn--block-xs {
width: 100%; }
.btn--block-xs:last-child {
margin-left: 0 !important;
margin-top: 16px; } }
.btn--medium {
height: 32px;
min-width: 150px;
line-height: 32px;
padding: 0 18px; }
.btn--medium-xs {
height: 32px;
min-width: 120px;
line-height: 33px;
padding: 0 18px; }
@media (min-width: 576px) {
.btn--medium-xs {
height: 48px;
padding: 0 18px;
line-height: 48px;
min-width: 185px; } }
.btn--small {
height: 28px;
min-width: 120px;
line-height: 28px;
padding: 0 16px; }
.btn--tiny {
height: 28px;
min-width: auto;
line-height: 28px; }
@media (max-width: 767.98px) {
.btn--w100-xs {
width: 100% !important; } }
.btn--primary {
color: #191B1C;
background-color: #FF821C;
border: 1px solid #FF821C; }
.btn--primary:hover {
color: #191B1C;
background-color: #F76900;
border: 1px solid #F76900; }
.btn--primary:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #191B1C; }
.btn--primary.btn--primary-disabled, .btn--primary:disabled {
background-color: #EBEEF5;
color: #AFB5C8;
border: none;
cursor: default; }
.btn--secondary {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FF821C; }
.btn--secondary:hover, .btn--secondary:active:focus {
color: #191B1C;
background-color: #F76900; }
.btn--secondary:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #191B1C; }
.btn--secondary.btn--secondary-disabled, .btn--secondary:disabled {
color: #5c6780;
background-color: transparent;
border: 1px solid #AFB5C8;
cursor: default; }
.btn--light {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF; }
.btn--light:hover, .btn--light:active:focus {
color: #191B1C;
background-color: #F7FAFF;
border: 1px solid #F7FAFF; }
.btn--light:focus {
color: #191B1C;
background-color: #FFF;
border: 1px solid #191B1C; }
.btn--light.btn--light-disabled, .btn--light:disabled {
color: #AFB5C8;
background-color: #EBEEF5;
border: none;
cursor: default; }
.btn--light.btn--light-disabled:hover, .btn--light.btn--light-disabled:focus, .btn--light:disabled:hover, .btn--light:disabled:focus {
color: #AFB5C8;
background-color: #EBEEF5;
border: none;
cursor: default; }
.btn--purple,
.btn--purple-secondary {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF; }
.btn--purple:hover, .btn--purple:active:focus,
.btn--purple-secondary:hover,
.btn--purple-secondary:active:focus {
color: #191B1C;
background-color: #EFF3FF;
border: 1px solid #EFF3FF; }
.btn--purple:focus,
.btn--purple-secondary:focus {
background-color: #FFF;
color: #191B1C;
border: 1px solid #191B1C;
box-shadow: 0 0 0 1px #FF821C; }
.btn--purple.btn--purple-disabled, .btn--purple:disabled,
.btn--purple-secondary.btn--purple-disabled,
.btn--purple-secondary:disabled {
color: #AFB5C8; }
.btn--purple.btn--purple-disabled:hover, .btn--purple.btn--purple-disabled:focus, .btn--purple:disabled:hover, .btn--purple:disabled:focus,
.btn--purple-secondary.btn--purple-disabled:hover,
.btn--purple-secondary.btn--purple-disabled:focus,
.btn--purple-secondary:disabled:hover,
.btn--purple-secondary:disabled:focus {
cursor: default;
border: 1px solid #FFF;
box-shadow: none; }
.btn--purple.btn--purple-disabled, .btn--purple:disabled {
background-color: #EBEEF5; }
.btn--purple-secondary {
border: 1px solid #191B1C; }
.btn--purple-secondary:focus {
border: 1px solid #191B1C;
box-shadow: none;
background-color: #EFF3FF; }
.btn--purple-secondary.btn--purple-disabled, .btn--purple-secondary:disabled {
border: 1px solid #AFB5C8; }
.btn--purple-secondary.btn--purple-disabled:hover, .btn--purple-secondary.btn--purple-disabled:focus, .btn--purple-secondary:disabled:hover, .btn--purple-secondary:disabled:focus {
border: 1px solid #AFB5C8;
background-color: #FFF; }
.btn--dark {
color: #FFF;
background-color: #191B1C;
border: 1px solid #191B1C; }
.btn--dark:hover, .btn--dark:active:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #F76900; }
.btn--dark:focus {
color: #191B1C;
background-color: #F76900;
border: 1px solid #191B1C; }
.btn--dark.btn--dark-disabled, .btn--dark:disabled {
color: #AFB5C8;
background-color: #EBEEF5;
border: 1px solid #EBEEF5;
cursor: default;
pointer-events: none; }
.btn--dark.btn--dark-disabled:hover, .btn--dark:disabled:hover {
background-color: #EBEEF5;
cursor: default;
box-shadow: 0 0 0 1px #EBEEF5; }
.btn--dark.btn--dark-disabled:focus, .btn--dark:disabled:focus {
background-color: #EBEEF5;
border: 1px solid #EBEEF5;
box-shadow: 0 0 0 1px #EBEEF5;
cursor: default; }
.btn--dark-secondary {
color: #FFF;
border: 1px solid #F76900;
background-color: #191B1C; }
.btn--dark-secondary:hover {
background-color: #F76900;
color: #191B1C;
border: 1px solid #F76900; }
.btn--dark-secondary:focus {
background-color: #F76900;
color: #191B1C;
border: 1px solid #191B1C;
box-shadow: 0 0 0 1px #FFF; }
.btn--dark-secondary.btn--dark-secondary-disabled, .btn--dark-secondary:disabled {
color: #AFB5C8;
background-color: #191B1C;
border: 1px solid #AFB5C8;
cursor: default; }
.btn--toggle-secondary {
color: #FF821C;
background-color: #FFF;
border: 1px solid #FF821C; }
.btn--toggle-secondary:hover, .btn--toggle-secondary:active:focus {
color: #FFF;
background-color: #F76900;
border: 1px solid #F76900; }
.btn--toggle-secondary:focus {
color: #FFF;
background-color: #FF821C;
box-shadow: 0 0 0 4px #191B1C; }
@media (min-width: 768px) {
.btn--toggle-secondary {
color: #FFF;
background-color: #FF821C;
border: 1px solid #FF821C; }
.btn--toggle-secondary:hover {
color: #FFF;
background-color: #F76900;
border: 1px solid #F76900; }
.btn--toggle-secondary:focus {
background-color: #FF821C;
box-shadow: 0 0 0 4px #191B1C; } }
.btn--toggle-light {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF;
height: 32px;
min-width: 150px;
line-height: 32px;
padding: 0 18px; }
.btn--toggle-light:hover, .btn--toggle-light:active:focus {
color: #191B1C;
background-color: #FFF;
border: 1px solid #191B1C; }
.btn--toggle-light:focus {
border: 1px solid #191B1C;
background-color: #FFF;
color: #191B1C; }
@media (min-width: 576px) {
.btn--toggle-light {
height: 48px;
line-height: 48px;
min-width: 185px; } }
@media (min-width: 768px) {
.btn--toggle-light {
color: #191B1C;
background-color: #FF821C;
border: 1px solid #FF821C; }
.btn--toggle-light:hover {
color: #191B1C;
background-color: #F76900;
border: 1px solid #F76900; }
.btn--toggle-light:focus {
color: #191B1C;
background-color: #FF821C;
border: 1px solid #191B1C; } }
.btn--rounded {
min-width: 0;
width: 48px;
padding: 0; }
.btn--rounded .icon {
margin: -2px 0 0 2px; }
.btn--rounded.btn--medium {
width: 32px; }
.btn--rounded.btn--small {
width: 28px; }
.btn--rounded.btn--rounded-text {
width: 48px;
transition: width 0.2s ease;
background-color: #FF821C; }
.btn--rounded.btn--rounded-text .btn__text {
color: transparent;
transition: color 0.1s ease; }
.btn--rounded.btn--rounded-text .icon {
transition: all 0.3s;
transform: translate(-85px, 0); }
.btn--rounded.btn--rounded-text.btn--medium {
width: 32px; }
.btn--rounded.btn--rounded-text.btn--medium .icon {
transform: translate(-93px, 0); }
.btn--rounded.btn--rounded-text.btn--small {
width: 28px; }
.btn--rounded.btn--rounded-text.btn--small .icon {
transform: translate(-95px, 0); }
.btn--rounded.btn--rounded-text:focus {
background-color: #F76900; }
.btn--rounded.btn--rounded-text:hover {
width: 175px;
background-color: #F76900; }
.btn--rounded.btn--rounded-text:hover .btn__text {
transition-delay: 0.4s;
transition: color 1s ease;
color: #191B1C; }
.btn--rounded.btn--rounded-text:hover .icon {
transition: transform 0.2s;
transition-delay: 0s;
transform: translate(10px, 0); }
.btn--rounded.btn--rounded-text.btn--primary-disabled, .btn--rounded.btn--rounded-text:disabled {
background-color: #EBEEF5;
color: #AFB5C8;
border: none;
cursor: default; }
.btn--rounded.btn--rounded-text.btn--primary-disabled:hover, .btn--rounded.btn--rounded-text:disabled:hover {
width: 48px;
background-color: #EBEEF5; }
.btn--rounded.btn--rounded-text.btn--primary-disabled:hover .btn__text, .btn--rounded.btn--rounded-text:disabled:hover .btn__text {
transition: none;
color: transparent; }
.btn--rounded.btn--rounded-text.btn--primary-disabled:hover .icon, .btn--rounded.btn--rounded-text:disabled:hover .icon {
transition: none;
transform: translate(-85px, 0px); }
.btn--rounded-small {
min-width: 0;
width: 32px !important;
height: 32px !important;
padding: 0; }
.btn--rounded-small:focus {
box-shadow: 0 0 0 4px #AFB5C8;
color: #191B1C;
background-color: #FFF; }
.btn--left-icon {
padding: 0 24px 0 0; }
.btn--left-icon .icon {
width: 48px;
height: 46px;
line-height: 46px; }
.btn--left-icon.btn {
display: flex;
align-items: self-start;
justify-content: flex-start;
align-items: center;
min-width: 0; }
.btn--left-icon.btn--medium {
padding: 0 16px 0 0; }
.btn--left-icon.btn--medium .icon {
width: 32px;
height: 30px;
line-height: 30px; }
.btn--left-icon.btn--tiny {
padding: 0 8px 0 0; }
.btn--left-icon.btn--tiny .icon {
width: 28px;
height: 26px;
line-height: 26px; }
.btn--left-icon-purple {
color: #322F7B;
background-color: #EFF3FF;
border: 1px solid #EFF3FF; }
.btn--left-icon-purple:hover {
color: #191B1C;
background-color: #D9E4FF; }
.btn--left-icon-purple:focus {
color: #191B1C;
background-color: #EFF3FF;
border: 1px solid #191B1C;
box-shadow: none; }
.btn--negative {
color: #191B1C;
background-color: #FFF;
border: 1px solid #FFF; }
.btn--negative:hover, .btn--negative:active:focus {
color: #5c6780;
background-color: #FFF;
border: 1px solid #FFF; }
.link {
color: #BD4313;
font-weight: 900; }
.link:hover {
text-decoration: underline; }
.link:focus {
background-color: #3E4A50;
color: #FFF; }
.link--black {
color: #191B1C;
font-weight: 600; }
.text-link {
color: #BD4313;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
line-height: 24px;
height: 24px;
display: inline-block; }
.text-link .icon {
margin-top: -2px; }
.text-link:hover, .text-link:active:focus {
background-color: transparent; }
.text-link:active:focus {
text-decoration: none; }
.text-link:focus {
color: #191B1C;
box-shadow: 0 0 0 1px #191b1c;
border-radius: 2px; }
.text-link:hover {
color: #BD4313;
text-decoration: underline !important; }
.text-link.text-link_disabled, .text-link[disabled] {
color: #AFB5C8;
cursor: default;
pointer-events: none;
border: none; }
.text-link.text-link_icon-multiline, .text-link.text-link--icon-multiline {
padding-left: 16px;
display: inline-block; }
.text-link.text-link_icon-multiline [class*="pictoDSL-"], .text-link.text-link--icon-multiline [class*="pictoDSL-"] {
margin-left: -20px; }
.text-link.text-link_negro, .text-link.text-link--black {
color: #191B1C; }
.text-link.text-link--blueMGM {
color: #0064d5 !important;
font-size: 16px;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
width: 240px;
text-overflow: ellipsis; }
@media (min-width: 768px) {
.text-link.text-link--blueMGM {
white-space: normal;
text-overflow: initial;
width: auto;
padding-right: 16px; } }
.text-link.text-link--blueMGM a {
color: #0064d5 !important; }
.text-link.text-link--blueMGM a:hover, .text-link.text-link--blueMGM a:active:focus {
color: #191B1C; }
.text-link.text-link_negro ~ ul,
.text-link.text-link--black ~ ul {
margin-top: 1.5rem; }
.text-link.icon_orange .pictoDSL, .text-link.icon--orange .pictoDSL {
color: #FF821C; }
.text-link.icon_orange:hover .pictoDSL, .text-link.icon_orange:active:focus .pictoDSL, .text-link.icon--orange:hover .pictoDSL, .text-link.icon--orange:active:focus .pictoDSL {
color: rgba(255, 130, 28, 0.5); }
.text-link.text-link_white, .text-link.text-link--white {
color: #FFF;
display: flex;
align-items: center; }
.text-link.text-link_white:hover, .text-link.text-link--white:hover {
color: #F7FAFF; }
.text-link.text-link_white:active:focus, .text-link.text-link--white:active:focus {
color: #191B1C;
background-color: #FFF; }
.text-link.text-link_white:focus, .text-link.text-link--white:focus {
background-color: #FFF;
color: #191B1C; }
.text-link .pictoDSL {
vertical-align: middle; }
.text-link .pictoDSL-document-16 {
line-height: 14px;
margin-right: 0.4rem; }
.text-link--disabled {
color: #AFB5C8;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none; }
.text-link--disabled:hover {
color: #AFB5C8;
text-decoration: none !important; }
.text-link--disabled.text-link-bg--orange {
color: #6F7A94; }
.text-link--disabled.text-link-bg--orange:hover {
color: #6F7A94; }
.btn--disabled {
background-color: #EBEEF5;
color: #AFB5C8;
border: none;
cursor: default; }
.btn--primary[disabled] {
background-color: #EBEEF5;
color: #AFB5C8;
border: none; }
.btn--secondary[disabled] {
color: #5c6780;
background-color: transparent;
border: 1px solid #AFB5C8;
cursor: default; }
.role--button:focus {
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.16); }
.btn--disabled.role--button:focus {
box-shadow: 0 0 0 4px #191B1C !important; }
.link {
color: #FF821C;
font-weight: 900; }
.link:hover, .link:active:focus {
color: #FF821C;
text-decoration: none;
background-color: transparent; }
.link:focus {
background-color: #3E4A50;
color: #FFF; }
.text-link {
color: #FF821C;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
padding: 0; }
.text-link:hover, .text-link:active:focus {
text-decoration: none;
color: #F76900;
background-color: transparent; }
.text-link.text-link_disabled, .text-link.text-link--disabled, .text-link[disabled] {
color: rgba(25, 27, 28, 0.4);
cursor: default;
pointer-events: none; }
.text-link.text-link_icon-multiline, .text-link.text-link--icon-multiline {
padding-left: 16px;
display: inline-block; }
.text-link.text-link_icon-multiline [class*="pictoDSL-"], .text-link.text-link--icon-multiline [class*="pictoDSL-"] {
margin-left: -20px; }
.text-link.text-link_negro, .text-link.text-link--black {
color: #191B1C; }
.text-link.text-link_negro:hover, .text-link.text-link_negro:active:focus, .text-link.text-link--black:hover, .text-link.text-link--black:active:focus {
color: #68707E; }
.text-link.text-link_negro ~ ul,
.text-link.text-link--black ~ ul {
margin-top: 1.5rem; }
.text-link.icon_orange .pictoDSL, .text-link.icon--orange .pictoDSL {
color: #FF821C; }
.text-link.icon_orange:hover .pictoDSL, .text-link.icon_orange:active:focus .pictoDSL, .text-link.icon--orange:hover .pictoDSL, .text-link.icon--orange:active:focus .pictoDSL {
color: rgba(255, 130, 28, 0.5); }
.text-link.text-link_white, .text-link.text-link--white {
color: #FFF; }
.text-link.text-link_white:hover, .text-link.text-link--white:hover {
color: #F7FAFF; }
.text-link.text-link_white:active:focus, .text-link.text-link--white:active:focus {
color: #191B1C;
background-color: #FFF; }
.text-link:focus {
background-color: #3E4A50;
color: #FFF; }
.text-link .pictoDSL {
vertical-align: middle; }
.text-link .pictoDSL-document-16 {
line-height: 14px;
margin-right: .4rem; }
.btn--light.btn--light-disabled {
pointer-events: none; }
.link:focus {
background-color: #222222;
border: 1.5px solid #FF821C; }
.link:focus:hover, .link:focus:active:focus {
background-color: #68707E;
border: 1px solid #68707E; }
.link:focus:focus {
box-shadow: 0 0 0 4px #FF821C; }
.btn--primary, .btn_primary {
color: #FFF;
background-color: #FF821C;
border: 1px solid #FF821C; }
.btn--primary:hover, .btn_primary:hover {
color: #FFF;
background-color: #F76900;
border: 1px solid #F76900; }
.btn--primary:focus, .btn_primary:focus {
background-color: #FF821C;
box-shadow: 0 0 0 4px #191B1C; }
.btn--primary.btn--primary-disabled, .btn_primary.btn--primary-disabled {
background-color: #F5F6FA;
color: #AFB5C8;
border: none;
cursor: default; }
@media (max-width: 767.98px) {
.suscribirse__modal .btn_primary, .suscribirse__modal .btn--primary,
.suscribirse__form .btn_primary, .suscribirse__form .btn--primary {
width: 100% !important; } }
.btn_primary[disabled] {
background-color: #F5F6FA;
color: #9FA0A0;
border: none; }
.carousel {
position: relative; }
.carousel__wrapper {
position: relative; }
@media (max-width: 991.98px) {
.carousel__wrapper {
margin: initial; } }
.carousel__wrapper--with-overflow {
padding: 0 150px; }
@media (max-width: 991.98px) {
.carousel__wrapper--with-overflow {
padding: 0; } }
.carousel__container {
overflow: hidden; }
@media (min-width: 768px) {
.carousel.carousel--only-mobile {
overflow: visible;
width: 100%; } }
.carousel__wrapper--with-overflow .carousel__container {
overflow: visible; }
.carousel__inner {
display: flex;
left: -200%;
position: relative;
transform: translateX(100%);
transition-duration: 5s;
align-items: center;
padding-bottom: 24px; }
@media (min-width: 768px) {
.carousel__inner {
left: -33.33333%;
transform: translateX(33.33333%);
transition-duration: 5s; } }
@media (min-width: 768px) {
.carousel__inner.carousel__inner--four-cols {
left: -25%;
transform: translateX(25%);
transition-duration: 5s; } }
@media (min-width: 768px) {
.carousel.carousel--only-mobile .carousel__inner {
flex-wrap: wrap;
left: 0; } }
.carousel__inner--is-reversing {
transform: translateX(-100%);
transition-duration: 5s; }
@media (min-width: 768px) {
.carousel__inner--is-reversing {
transform: translateX(-33.33333%);
transition-duration: 5s; } }
@media (min-width: 768px) {
.carousel__inner--is-reversing.carousel__inner--four-cols {
transform: translateX(-25%);
transition-duration: 5s; } }
.carousel__inner--is-set,
.carousel__inner--is-set.carousel__inner--four-cols {
transform: none; }
.carousel__slide {
flex: 1 0 100%;
order: 2; }
@media (min-width: 768px) {
.carousel__slide {
flex: 0 0 auto;
flex-basis: 33.33333%; } }
@media all and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
.carousel__slide {
flex-basis: 31%;
padding: 0 14px; } }
.carousel__slide .modal__close-button {
position: inherit; }
.carousel__slide .modal__close-button .icon {
line-height: 24px; }
.carousel.carousel--only-mobile .carousel__slide {
flex-grow: 0; }
.carousel__inner--four-cols .carousel__slide {
flex: 1 0 100%; }
@media (min-width: 768px) {
.carousel__inner--four-cols .carousel__slide {
flex-basis: 25%; } }
.carousel__slide-inner {
margin: 0 15px 15px;
height: auto; }
@media all and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
.carousel__slide-inner {
padding: 0;
margin: 0; } }
.carousel__slide--is-ref {
order: 1; }
@media (min-width: 768px) {
.carousel.carousel--only-mobile .carousel__slide--is-ref {
order: 2; } }
.carousel__navigation {
background-color: #FF821C;
color: #FFF;
min-height: 48px;
width: 48px;
position: absolute;
top: 50%;
margin-top: -24px;
transform: translateY(-50%);
transition-duration: 5s;
justify-content: center;
align-items: center;
border-radius: 50%;
z-index: 2;
cursor: pointer;
display: none;
line-height: 48px; }
@media (min-width: 768px) {
.carousel__navigation {
display: flex; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.carousel__navigation .icon,
.carousel__navigation .pictoDSL {
line-height: 48px; } }
.carousel__navigation--left {
left: -8px; }
@media (max-width: 991.98px) {
.carousel__navigation--left {
display: none; } }
.carousel__navigation--right {
right: -8px; }
@media (max-width: 991.98px) {
.carousel__navigation--right {
display: none; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.carousel__navigation--right {
right: -16px; } }
@media (min-width: 992px) {
.carousel__wrapper--with-overflow .carousel__navigation--left {
left: 165px; } }
@media (min-width: 992px) {
.carousel__wrapper--with-overflow .carousel__navigation--right {
right: 165px; } }
.carousel.carousel--only-mobile .carousel__navigation {
display: none !important; }
.carousel__pagination {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition-duration: 5s;
display: flex;
justify-content: center;
align-items: center;
z-index: 2; }
@media (min-width: 768px) {
.carousel[data-pagination="true"] .carousel__pagination {
display: none; } }
.carousel__bullet {
width: 6px;
height: 6px;
margin-right: 20px;
display: flex; }
.carousel__bullet:last-of-type {
margin-right: 0; }
.carousel__bullet button {
width: 6px;
height: 6px;
border-radius: 50%;
cursor: pointer;
border: 1px solid #000;
padding: 0; }
.carousel__bullet--active {
width: 9px;
height: 9px; }
.carousel__bullet--active button {
width: 9px;
height: 9px;
border-radius: 0;
border: none;
background-color: #000; }
.carousel--content-boxes .carousel__container {
display: flex;
padding-bottom: 24px; }
.carousel--content-boxes .carousel__content-box {
height: 100%; }
.carousel--content-boxes .content-box {
width: 100%;
height: auto; }
.carousel--content-boxes .content-box:not(.content-box--category) {
margin-top: 24px; }
.carousel--content-boxes .content-box__content {
width: 100%;
padding-bottom: 40px; }
[data-norepeat] .carousel__slide {
order: 2; }
[data-norepeat] .carousel__slide--is-ref {
order: 1; }
.carousel__cont {
width: 100%; }
.carousel--modal .carousel__inner {
padding-bottom: 0;
left: 0;
align-items: flex-start; }
.carousel--modal .carousel__navigation {
min-height: 40px;
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
border-radius: unset;
margin-left: 32px;
margin-right: 32px; }
@media (min-width: 768px) {
.carousel--modal .carousel__navigation {
display: flex; } }
.carousel--modal .carousel__navigation .icon,
.carousel--modal .carousel__navigation .pictoDSL {
line-height: 40px;
width: 40px;
height: 40px;
font-size: 40px; }
.carousel--modal .carousel__navigation--left {
background-color: transparent;
color: #FF821C; }
@media (max-width: 991.98px) {
.carousel--modal .carousel__navigation--left {
display: none; } }
.carousel--modal .carousel__navigation--left:hover {
color: #F76900; }
.carousel--modal .carousel__navigation--left:focus {
color: #FFF;
background-color: #3E4A50; }
.carousel--modal .carousel__navigation--right {
background-color: transparent;
color: #FF821C; }
@media (max-width: 991.98px) {
.carousel--modal .carousel__navigation--right {
display: none; } }
.carousel--modal .carousel__navigation--right:hover {
color: #F76900; }
.carousel--modal .carousel__navigation--right:focus {
color: #FFF;
background-color: #3E4A50; }
.carousel--modal .content-box {
max-height: 420px; }
@media (max-width: 991.98px) {
.carousel--modal .content-box {
height: 400px; } }
.carousel--modal .content-box__content {
box-shadow: none;
padding: 0 104px; }
@media (max-width: 1199.98px) {
.carousel--modal .content-box__content {
padding: 0 72px; } }
@media (max-width: 991.98px) {
.carousel--modal .content-box__content {
padding: 0; } }
.carousel--modal .carousel__slide-inner {
margin: 0;
padding: 0; }
.carousel--modal .carousel__slide {
padding: 0 0 24px 0;
flex: 1 0 100%; }
@media (max-width: 991.98px) {
.carousel--modal .carousel__slide {
padding: 14px 0 24px 0; } }
.carousel--modal .carousel__slide .modal__close-button {
position: relative;
right: 0;
top: 0; }
.carousel--modal h3,
.carousel--modal .h3 {
font-family: "BK-Text";
font-size: 1.5rem; }
.carousel--modal p,
.carousel--modal .p {
font-size: 1rem; }
.carousel--modal .content-box__square {
margin: 0 0 0 104px !important;
width: 96px !important;
height: 96px !important; }
.carousel--modal .content-box__square .pictoDSL,
.carousel--modal .content-box__square .icon {
line-height: 96px !important; }
@media (max-width: 1199.98px) {
.carousel--modal .content-box__square {
margin: 0 0 0 72px !important; } }
@media (max-width: 991.98px) {
.carousel--modal .content-box__square {
margin: 0 !important; } }
.carousel--modal .text-link:hover {
color: #F76900; }
@media (min-width: 992px) {
.carousel--modal .ss-scroll {
right: 14px; } }
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
.carousel {
height: 100%; } }
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
.carousel__modal .carousel__wrapper, .carousel__modal .carousel__container,
.carousel__modal .carousel__inner, .carousel__modal .carousel__slide,
.carousel__modal .carousel__slide-inner {
height: 100% !important; } }
.carousel__modal--wrapper-tutoriales {
max-height: 480px;
padding: 32px 40px 0; }
@media (max-width: 575.98px) {
.carousel__modal--wrapper-tutoriales {
padding: 32px 24px 0; } }
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
.carousel__modal--wrapper-tutoriales {
display: none; } }
.carousel__modal--wrapper-navigation {
position: relative;
z-index: 0;
height: 32px; }
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
.carousel__modal--wrapper-navigation {
display: none; } }
@media (max-width: 575.98px) {
.carousel__modal--wrapper-navigation {
position: fixed;
bottom: 82px;
left: 24px; } }
.carousel__modal--wrapper-navigation .carousel__pagination {
bottom: 3px; }
@media (max-width: 575.98px) {
.carousel__modal--wrapper-navigation .carousel__pagination {
position: static;
transform: none;
justify-content: start; } }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet {
margin-right: 16px;
width: auto;
height: auto; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet:last-of-type {
margin-right: 0; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet button {
width: 24px;
height: 24px;
border: none;
padding: initial;
border-radius: 0; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet button:focus {
box-sizing: border-box;
height: 24px;
width: 24px;
border: 1px solid #AFB5C8;
background-color: #FFF;
outline: 3px solid #EBEEF5; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet button:focus:after {
margin-bottom: 2px; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet button:after {
display: inline-block;
content: '';
height: 6px;
width: 6px;
border: 1px solid #000;
border-radius: 6px;
margin-bottom: 2px; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet--active {
width: auto;
height: auto; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet--active button {
background-color: transparent;
height: 24px;
width: 24px; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet--active button:focus:after {
top: 2px; }
.carousel__modal--wrapper-navigation .carousel__pagination .carousel__bullet--active button:after {
display: inline-block;
content: '';
height: 9px;
width: 9px;
background-color: #FF821C;
border-radius: 0;
margin-top: 0;
border: none;
top: 2px;
position: relative; }
.carousel__modal--wrapper-navigation .carousel__navigation--left {
color: #191B1C; }
.carousel__modal--wrapper-navigation .carousel__navigation--left[disabled] {
color: #AFB5C8;
border: none; }
.carousel__modal--wrapper-navigation .carousel__navigation--left:hover {
color: #5c6780; }
.carousel__modal--wrapper-navigation .carousel__navigation--right {
color: #191B1C; }
.carousel__modal--wrapper-navigation .carousel__navigation--right[disabled] {
color: #AFB5C8;
border: none; }
.carousel__modal--wrapper-navigation .carousel__navigation--right:hover {
color: #5c6780; }
.carousel__modal--wrapper-navigation .carousel__navigation {
margin-top: 0;
font-size: 32px;
min-height: 32px;
width: 32px;
height: 32px;
line-height: 32px;
margin-left: 40px;
margin-right: 40px;
top: auto;
transform: inherit;
transition-duration: inherit; }
@media (max-width: 575.98px) {
.carousel__modal--wrapper-navigation .carousel__navigation {
margin-left: 24px;
margin-right: 24px; } }
.carousel__modal--wrapper-navigation .carousel__navigation .icon {
font-size: 32px;
min-height: 32px;
width: 32px;
height: 32px;
line-height: 32px; }
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
.carousel__modal .carousel__slide {
padding: 0; } }
@media (max-width: 575.98px) {
.carousel__modal .carousel__slide {
padding: 0; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.carousel__modal .carousel__slide {
padding: 0; } }
.carousel__modal .carousel__navigation--right [disabled="true"] {
color: #AFB5C8;
border: none; }
.carousel__inner--is-set,
.carousel__inner--is-set.carousel__inner--four-cols {
transform: none;
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
[data-norepeat] .carousel__slide {
order: 2; }
[data-norepeat] .carousel__slide--is-ref {
order: 1; }
@media (min-width: 768px) {
[data-norepeat] .carousel__slide {
margin-right: 0;
flex-basis: 50%; } }
@media (min-width: 992px) {
[data-norepeat] .carousel__slide {
flex-basis: 33.33333%; } }
@media all and (min-width: 992px) and (-ms-high-contrast: none), (min-width: 992px) and (-ms-high-contrast: active) {
[data-norepeat] .carousel__slide {
flex-basis: 31%; } }
/*md
# Colores
$white: #FFF !default;
$black: #000 !default;
$bk-negro: #191B1C !default;
$bk-naranja-100: #FF821C !default;
$bk-naranja-50: #F76900 !default;
$bk-naranja-25: #FFF3EB !default;
$bk-naranja-100-alternative: #BD4313 !default;
$bk-gris-frio-100: #5c6780 !default;
$bk-gris-frio-50: #6F7A94 !default;
$bk-gris-ligero-100: #EBEEF5 !default;
$bk-gris-ligero-50: #F7FAFF !default;
$bk-gris-input-100: #AFB5C8 !default;
$bk-gris-input-50: #D9E4FF !default;
$bk-gris-input-25: #EFF3FF !default;
$bk-gris-empresas: #4B575D !default;
$bk-gris-focus-100: #3E4A50 !default;
$bk-verde-100: #22CB65 !default;
$bk-verde-75: #2CDE73 !default;
$bk-verde-50: #92ECB6 !default;
$bk-morado-100: #322F7B !default;
$bk-morado-75: #43408B !default;
$bk-morado-50: #6864DF !default;
$bk-azul-100: #B5F0EF !default;
$bk-azul-50: #C3F3F2 !default;
$bk-azul-25: #D3F6F5 !default;
$bk-azul-100-alternative: #A4EAE9 !default;
$bk-amarillo-100: #FED430 !default;
$bk-amarillo-50: #FFDC54 !default;
$bk-amarillo-25: #FEE997 !default;
$bk-amarillo--100-alternative: #F7C70B !default;
$bk-grey-shadow: rgba(97, 112, 119, 0.26) !default;
$bk-grey-shadow-dense: rgba(97, 112, 119, 0.99) !default;
$bk-ad-gris-frio-50: #A0ADB8 !default;
$bk-ad-rojo-50: #FF7E7E !default;
$bk-rojo-100: #DB2A21 !default;
$bk-rojo-75: #ED4138 !default;
$bk-rojo-50: #FF9993 !default;
$bk-rojo-25: #FFB5B1 !default;
$bkj-amarillo-100: #FFE700 !default;
$bkj-amarillo-50: #FFFF99 !default;
$bkj-turquesa-100: #37ECC7 !default;
$bkj-turquesa-50: #A3FFE5 !default;
$bkj-azul-100: #08C3FF !default;
$bkj-azul-50: #A7F5FF !default;
$bkj-magenta-100: #FF4169 !default;
$bkj-magenta-50: #FFC2C7 !default;
$bk-verde-25: #A7F3C5 !default;
$bkr-verde-broker: #007A68 !default;
## colores bootstrap
$primary: $bk-naranja-100 !default;
$secondary: $bk-amarillo-100 !default;
$success: $bk-verde-100 !default;
$info: $bk-azul-100 !default;
$danger: $bk-rojo-100 !default;
$light: $bk-gris-ligero-100 !default;
$dark: $bk-gris-frio-100 !default;
*/
/*$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;*/
/*md
# Checkbox
## Descripción
El bloque `.checkbox` representa un elemento de tipo checkbox.
Se compone de los siguientes elementos:
* `.checkbox`: etiqueta padre que engloba el componente se corresponde con un `
` en HTML.
* `input[type="checkbox"]`: input checkbox del componente .
* `label`: control para el texto y el custom del `input[type="checkbox"]`.
Y tiene los siguientes modificadores:
* `.checkbox--is-error`: indica si el input tiene errores.
* `disabled`: el atributo del input que indica si se puede o no editar.
## Estructura
```html
Checkbox label
```
```html_example
Checkbox label
```
## Modificadores
### Is Error
```html_example
Checkbox label
```
### Is Disabled
```html_example
Checkbox label
```
*/
.checkbox {
position: relative; }
.checkbox label {
line-height: 20px;
font-size: 14px;
color: #5c6780;
padding-left: 28px;
cursor: pointer;
display: block; }
.checkbox label.label--left {
line-height: 20px;
font-size: 14px;
color: #5c6780;
padding-right: 28px;
cursor: pointer;
display: block; }
.checkbox input[type="checkbox"] {
position: absolute;
opacity: 0; }
.checkbox input[type="checkbox"] + label:before {
content: '';
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #AFB5C8;
background-color: #FFF;
position: absolute;
left: 0; }
.checkbox input[type="checkbox"] + label.label--left:before {
content: '';
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #AFB5C8;
background-color: #FFF;
position: absolute;
right: 0;
left: auto; }
.checkbox input[type="checkbox"]:focus + label:before {
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.2); }
.checkbox input[type="checkbox"]:checked + label:after {
font-family: 'BK-icons';
content: "\e90c";
color: #FF821C;
font-size: 21px;
position: absolute;
top: 0;
left: 0; }
.checkbox input[type="checkbox"]:checked + label.label--left:after {
font-family: 'BK-icons';
content: "\e90c";
color: #FF821C;
font-size: 21px;
position: absolute;
top: 0;
left: auto;
right: 0; }
.checkbox.checkbox--is-error input[type="checkbox"] + label:before {
border: 1px solid #DB2A21; }
.checkbox.checkbox--is-error input[type="checkbox"]:checked + label:after {
color: #DB2A21; }
.checkbox.checkbox--is-error input[type="checkbox"]:focus + label:before {
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.2); }
.checkbox.checkbox--is-warning input[type="checkbox"] + label:before {
border: 1px solid #FF821C; }
.checkbox.checkbox--is-warning input[type="checkbox"]:focus + label:before {
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.2); }
.checkbox.checkbox--is-success input[type="checkbox"] + label:before {
border: 1px solid #2CDE73; }
.checkbox.checkbox--is-success input[type="checkbox"]:checked + label:after {
color: #2CDE73; }
.checkbox.checkbox--is-success input[type="checkbox"]:focus + label:before {
box-shadow: 0 0 0 4px rgba(175, 181, 200, 0.2); }
.checkbox input[type="checkbox"]:disabled + label {
cursor: not-allowed;
opacity: 0.4;
color: #5c6780; }
.checkbox input[type="checkbox"]:disabled + label:before {
box-shadow: none;
border-color: rgba(92, 103, 128, 0.2);
background-color: transparent; }
.checkbox input[type="checkbox"]:disabled + label:after {
opacity: 0.4;
color: #5c6780; }
/* checkbox desplegable */
.checkbox-ellipsis {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer; }
.checkbox-ellipsis:focus .icon, .checkbox-ellipsis:focus .pictoDSL {
background-color: #3E4A50;
color: #FFF; }
.checkbox-ellipsis .icon {
will-change: transform;
transform: translateY(0px) rotate(0deg);
transition-property: all;
transition-duration: 0.166s;
transition-delay: 0;
transition-timing-function: ease-out; }
.checkbox-ellipsis .checkbox__content {
overflow: hidden;
text-overflow: ellipsis;
padding: 4px; }
.checkbox-ellipsis label {
display: unset; }
.checkbox-ellipsis input[type="checkbox"] + label:before {
left: 4px; }
.checkbox-ellipsis input[type="checkbox"]:checked + label:after {
left: 4px;
top: 4px; }
.checkbox-ellipsis.checkbox-ellipsis--opened {
white-space: normal;
height: auto; }
.checkbox-ellipsis.checkbox-ellipsis--opened label {
display: block; }
.checkbox-ellipsis.checkbox-ellipsis--opened .icon, .checkbox-ellipsis.checkbox-ellipsis--opened .pictoDSL {
transform: translateY(0px) rotate(-180deg); }
.checkbox {
display: inline-block !important;
margin-right: 24px !important; }
.checkbox input[type="checkbox"].checkbox--is-error + label:before {
border: 1px solid rgba(219, 42, 33, 0.6); }
.filters ul {
display: flex; }
.filters li {
flex: 1 0 auto; }
.filters .filters__element {
width: 100%;
height: 56px;
line-height: 56px;
color: #191B1C;
background-color: #EBEEF5;
padding-left: 24px;
text-align: left;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent; }
.filters .filters__element:hover {
color: #191B1C;
background-color: #F7FAFF; }
.filters .filters__element:focus {
border-bottom: 3px solid #191B1C;
color: #191B1C;
background-color: #EBEEF5; }
.filters .filters__element.filters__element_active {
color: #191B1C;
border-bottom-color: transparent;
border-top-color: #FF821C;
background-color: #FFF; }
.filters .filters__element.filters__element_active:focus {
border-top: 3px solid #3E4A50;
background-color: #EBEEF5;
border-bottom-color: transparent;
border-top-color: #191B1C; }
.filters.tabs .filters__element {
color: #191B1C;
background-color: #EBEEF5;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent; }
.filters.tabs .filters__element.filters__element--regular-font {
font-size: 1rem; }
.filters.tabs .filters__element:hover {
color: #191B1C;
background-color: #F7FAFF; }
.filters.tabs .filters__element:focus {
border-bottom: 3px solid #191B1C;
color: #191B1C;
background-color: #EBEEF5; }
.filters.tabs .filters__element.filters__element_active {
color: #191B1C;
border-bottom-color: transparent;
border-top-color: #FF821C;
background-color: #FFF; }
.filters.tabs .filters__element.filters__element_active:focus {
border-top: 3px solid #3E4A50;
background-color: #EBEEF5;
border-bottom-color: transparent;
border-top-color: #191B1C; }
@media (max-width: 767.98px) {
.filters {
overflow: hidden;
overflow-x: auto; }
.filters li {
flex: 1 0 226px; } }
@media (max-width: 991.98px) {
.filters.filters--large {
overflow: hidden;
overflow-x: auto; }
.filters.filters--large li {
flex: 1 0 226px; } }
.filter__boxes {
position: relative;
padding-top: 60px;
align-items: stretch; }
.filter__boxes.filter__boxes_truncated {
overflow: hidden;
height: 1140px; }
@media (min-width: 768px) {
.filter__boxes.filter__boxes_truncated {
height: 770px; } }
@media (min-width: 992px) {
.filter__boxes.filter__boxes_truncated {
height: 870px; } }
@media (min-width: 1200px) {
.filter__boxes.filter__boxes_truncated {
height: 800px; } }
.filter__boxes--no-image {
padding-top: 0; }
.filter__boxes__show-all {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFF 60%);
background-repeat: repeat-x;
padding-top: 160px;
height: 248px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2; }
.tabs ~ .filter__boxes {
align-items: normal;
padding-top: 40px; }
.filter__additional-info {
padding: 8px 16px;
min-height: 32px;
font-size: 0.75rem;
line-height: 16px;
background: #F7FAFF;
border-radius: 4px; }
.filter__additional-info p {
margin-bottom: 0; }
.filters .filters__element {
padding-left: 15px !important;
font-size: 0.875rem; }
@media (max-width: 767.98px) {
.filters .filters__element {
text-align: center;
padding-left: 0 !important; } }
@media (min-width: 992px) {
.filters .filters__element {
font-size: 1rem;
padding-left: 24px; } }
.filters .filters__element:focus {
outline: 1px solid transparent; }
@media (max-width: 767.98px) {
.filters {
overflow: hidden;
overflow-x: auto; }
.filters li {
flex: 1 0 50% !important; } }
.filter__boxes.filter__boxes--no-padding {
padding-top: 0; }
.filter__boxes.filter__boxes--no-padding .content-box__content {
padding: 24px; }
@media (min-width: 992px) {
.filter__boxes.filter__boxes--no-padding .content-box__content {
padding: 24px; } }
.filter__boxes_container:focus {
outline: 1px solid transparent !important; }
.tabs ~ .filter__boxes.filter__boxes--no-padding {
padding-top: 0; }
.tabs ~ .filter__boxes.filter__boxes--no-padding .content-box__content {
padding: 0 24px 24px; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.modal__content {
height: unset; } }
/*# sourceMappingURL=bankinter-blog-styles.css.map */
