/* Custom Style */
:root {
--webkit-font-smoothing: antialiased;
--wcag-outline: none;
--configure-stream-background: var(--color-GS-0);
--dealer-button-spacing: var(--grid-space);
--header-height: 89px;
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
--space-8: 32px;
--space-9: 40px;
--space-10: 48px;
--space-11: 64px;
--space-12: 80px;
--space-13: 96px;
--space-14: 128px;
--space-15: 160px;
--space-16: 256px;
--space-scaler-1: var(--space-1);
--space-scaler-2: var(--space-3);
--space-scaler-3: var(--space-4);
--space-scaler-4: var(--space-5);
--space-scaler-5: var(--space-6);
--space-scaler-6: var(--space-7);
--space-scaler-7: var(--space-8);
--space-scaler-8: var(--space-9);
--space-scaler-9: var(--space-10);
--space-scaler-10: var(--space-11);
--space-scaler-11: var(--space-12);
--space-scaler-12: var(--space-13);
--space-scaler-13: var(--space-14);
--space-scaler-14: var(--space-15);
--space-scaler-15: var(--space-16);
--color-transparent: rgb(0 0 0 / 0%);
--color-TP-10: rgb(255 255 255 / 84%);
--color-TP-20: rgb(255 255 255 / 68%);
--color-TP-30: rgb(255 255 255 / 46%);
--color-ER-10: #f7e7e9;
--color-ER-20: #d20000;
--color-ER-30: #af1523;
--color-GS-0: #fff;
--color-GS-10: #f6f6f6;
--color-GS-20: #f2f2f2;
--color-GS-30: #e6e6e6;
--color-GS-40: #bbb;
--color-GS-50: #8e8e8e;
--color-GS-60: #666;
--color-GS-70: #4d4d4d;
--color-GS-80: #262626;
--color-GS-100: #000;
--color-PB-10: #bbd2f3;
--color-PB-20: #1c69d4;
--color-PB-30: #0653b6;
--color-DB-10: #dde8f9;
--color-EB-10: #0066b1;
--color-EB-20: #33536c;
--color-EB-30: #040a17;
--color-EBG-10: linear-gradient(180deg, #eaf6ff 0%, #fff 100%);
--color-EBG-20: linear-gradient(180deg, #33536c 0%, #040a17 100%);
--color-SG-10: #e8f2eb;
--color-SG-20: #3db014;
--color-SG-30: #1b7b3a;
--color-WO-10: #fbedc9;
--color-WO-20: #ffad1f;
--color-dark-mode: #161616;
--color-highlight-grey: var(--color-GS-70);
--link-icon-margin-right: var(--space-2);
--font-bmw-bold: var(--font-family-sans-serif-bold);
--font-bmw-light: var(--font-family-sans-serif-light);
--font-bmw-thin: var(--font-family-sans-serif-thin);
--font-bmw-regular: var(--font-family-sans-serif-regular);
--font-normal: Arial, Roboto, Noto, -apple-system, sans-serif;
--shadow-color-default: rgb(0 0 0 / 20%);
--shadow-color-active: rgb(0 0 0 / 30%);
--shadow-color-strong: rgb(0 0 0 / 50%);
--shadow-default: 0 3px var(--space-3) 0 var(--shadow-color-default);
--shadow-strong: 0 3px var(--space-3) 0 var(--shadow-color-strong);
--shadow-active: 0 3px var(--space-5) 0 var(--shadow-color-active);
--shadow-inset-border: inset 0 0 0 4px var(--color-GS-30);
--button-square-size: var(--size-10);
--button-icon-size: var(--size-6);
--button-icon-size-compact: var(--size-5);
--button-icon-position: calc((var(--size-10) - var(--button-icon-size)) / 2);
--button-border-radius: 3px;
--radio-button-border-color-checked: var(--color-GS-70);
--radio-button-border-color: var(--color-GS-40);
--input-default-height: var(--size-10);
--input-default-border: 0;
--input-default-border-radius: 3px;
--input-default-box-shadow: inset 0 0 0 1px var(--color-GS-40);
--input-default-color: var(--color-GS-60);
--input-default-outline: none;
--input-default-text-align: left;
--input-hover-box-shadow: inset 0 0 0 2px var(--color-GS-70);
--input-disabled-box-shadow: inset 0 0 0 var(--search-border-size) var(--color-GS-40);
--input-disabled-background: var(--color-GS-20);
--input-disabled-color: var(--color-GS-50);
--grid-space: var(--space-5);
--grid-space-negative: calc(var(--grid-space) * -1);
--half-grid-space: calc(var(--grid-space) / 2);
--half-grid-space-negative: calc(var(--half-grid-space) * -1);
--col-width-1-12: calc(var(--col-width-12-12) / 12);
--col-width-2-12: calc(var(--col-width-1-12) * 2);
--col-width-3-12: calc(var(--col-width-1-12) * 3);
--col-width-4-12: calc(var(--col-width-1-12) * 4);
--col-width-5-12: calc(var(--col-width-1-12) * 5);
--col-width-6-12: calc(var(--col-width-1-12) * 6);
--col-width-7-12: calc(var(--col-width-1-12) * 7);
--col-width-8-12: calc(var(--col-width-1-12) * 8);
--col-width-9-12: calc(var(--col-width-1-12) * 9);
--col-width-10-12: calc(var(--col-width-1-12) * 10);
--col-width-11-12: calc(var(--col-width-1-12) * 11);
--col-width-12-12: 100%;
--z-index-error: 9999;
--z-index-overlay: 1100;
--z-index-modal: 1000;
--z-index-foreground: 900;
--summary-border-space: var(--space-15);
--border-space: var(--space-13);
--dropdown-chevron-down: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE3LjYyMUwzLjkzODk2IDkuNTYxMDNMNi4wNjA5NiA3LjQzOTAzTDEyIDEzLjM3OUwxNy45MzkgNy40MzkwM0wyMC4wNjEgOS41NjEwM0wxMiAxNy42MjFaIiBmaWxsPSIjNjY2NjY2Ii8+Cjwvc3ZnPgo=);
--dropdown-chevron-up: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjkzOSAxNi41NjFMMTIgMTAuNjIxTDYuMDYwOTYgMTYuNTYxTDMuOTM4OTYgMTQuNDM5TDEyIDYuMzc5MDNMMjAuMDYxIDE0LjQzOUwxNy45MzkgMTYuNTYxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4=);
--arrow-icon-horizontal-padding: calc((var(--size-6) - (var(--size-6) * .66)) / 2);
--checkmark: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuOTk5OTYgMTkuNjIxTDMuOTM4OTYgMTMuNTYxTDYuMDYwOTYgMTEuNDM5TDkuOTk5OTYgMTUuMzc5TDE3LjkzOSA3LjQzODk2TDIwLjA2MSA5LjU2MDk2TDkuOTk5OTYgMTkuNjIxWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4=);
--size-1: 4px;
--size-2: 8px;
--size-3: 12px;
--size-4: 16px;
--size-5: 20px;
--size-6: 24px;
--size-7: 28px;
--size-8: 32px;
--size-9: 36px;
--size-10: 52px;
--size-11: 64px;
--size-12: 80px;
--size-13: 104px;
--size-14: 128px;
--size-15: 140px;
--checkbox-top: 0;
--checkbox-right: 0;
--checkbox-size: var(--size-10);
--checkbox-icon-color: var(--color-GS-80);
--default-border: 1px solid var(--color-GS-30);
--highlight-border-size: var(--size-1);
--list-option-image-width: 140px;
--list-option-image-margin-right: var(--space-5);
--interaction-transition: transform .1s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
--rfx-heading-margin: var(--space-5) 0;
--scrollbar-width: calc(100vw - 100%);
--desktop-sg-wrapper-width: max(calc((100vw - var(--scrollbar-width)) / 23 * 5), 360px);
--desktop-sg-wrapper-transition-duration: .4s;
--desktop-sg-wrapper-horizontal-padding: var(--space-7);
--desktop-sg-wrapper-vertical-padding: var(--space-7);
--webkit-tap-highlight-color: var(--color-transparent);
--sales-bar-height: 84px;
--shadow-s: 0 0 1px rgb(0 0 0 / 24%), 0 var(--space-1) var(--space-3) rgb(0 0 0 / 8%);
--shadow-m: 0 var(--space-2) var(--space-4) rgb(0 0 0 / 16%);
--shadow-l: 0 var(--space-3) var(--space-5) rgb(0 0 0 / 24%);
--configure-bar-width: 100%;
--configure-bar-height: auto;
--configure-bar-padding: var(--space-5) var(--desktop-sg-wrapper-horizontal-padding) calc(var(--space-6) - var(--configure-bar-item-click-area-space)) var(--desktop-sg-wrapper-horizontal-padding);
--configure-bar-item-gap: var(--space-2);
--configure-bar-item-height: 4px;
--configure-bar-item-click-area-space: var(--space-3);
--shadow-s: 0 0 1px rgb(0 0 0 / 24%), 0 var(--space-1) var(--space-3) rgb(0 0 0 / 8%);
--shadow-m: 0 var(--space-2) var(--space-4) rgb(0 0 0 / 16%);
--shadow-l: 0 var(--space-3) var(--space-5) rgb(0 0 0 / 24%);
} /* Root*/


.configure-bar {
    display: grid;
    grid-auto-flow: column;
    grid-gap: var(--configure-bar-item-gap);
}

.con-configure-bar-wrapper {
    position: sticky;
    z-index: 999;
    top:0;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #e6e6e6;
    transition: top 0.1s ease-in-out 0s;
}
.configure-bar-container {
    display: flex;
    flex-direction: column;
    width: var(--configure-bar-width);
    height: var(--configure-bar-height);
    padding: var(--configure-bar-padding);
}
.configure-bar-item {

    cursor: pointer;
    width: 100%;
    height: var(--configure-bar-item-height);
    background: var(--color-GS-40);
    border-radius: 3px;
    transition: background 0.2s ease-in-out 0s;
}

.configure-bar-item-container.selected .configure-bar-item {
    background: var(--color-GS-80);
}

.configure-bar-sub-title {
  text-align: left;
    font-size: 18px ;
    color: var(--color-GS-80);
    overflow: hidden;
    /*margin-bottom: : var(--space-2);*/
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Estilos para mostrar las opciones debajo del menú */
.configure-bar-options {
  display: none;
  margin-top: 10px;
}

.configure-bar-item-container.selected .configure-bar-options {
  display: block;
}

.options-container{
  display: flex;
  flex-direction: column;
  width: var(--configure-bar-width);
  height: var(--configure-bar-height);
  padding: var(--configure-bar-padding);
  text-align: left;
}

.options-container h3{
  text-align: left;
}

.list-group-item {
    --tile-padding: 0;
    --tile-border-width: 1px;
    --tile-border-width-selected: 2px;
    --tile-border-color: var(--color-GS-30);
    --tile-border-color-selected: var(--color-GS-70);
    --tile-color-disabled: var(--color-GS-40);
    --tile-border-color-disabled: var(--color-GS-20);
    --tile-column-gap: var(--space-3);
    --tile-inner-box-shadow: inset 0 0 0 var(--tile-border-width) var(--tile-border-color);
    --tile-outer-box-shadow: 0 0 0 transparent;
    --tile-bg-color: var(--color-GS-10);
    cursor: pointer;
    padding: var(--tile-padding);
    background: var(--color-GS-0);
    box-shadow: var(--tile-inner-box-shadow),var(--tile-outer-box-shadow);
    transition: box-shadow 0.1s ease-in-out 0s;
    padding: 25px;
    margin-bottom: 10px;
    font-size:1.3em;
    vertical-align:

}

.check-icon-container {
  position: absolute;
  top: 0;
  opacity: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
}

.check-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  color: #fff;
  opacity: 0; /* El icono está oculto por defecto */
  transition: opacity 0.3s ease; /* Agrega una transición suave */
}

.activex{
  --tile-border-width: var(--tile-border-width-selected);
  --tile-border-color: var(--tile-border-color-selected);
  background: var(--tile-bg-color);
}

.activex .check-icon {
  opacity: 1; /* Muestra el icono cuando la opción está seleccionada */
}
.activex .check-icon-container {
  opacity: 1; /* Muestra el icono cuando la opción está seleccionada */
}