body {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

#currentTime1 {
    font-family: "Inter", serif;
}

#totalTime1 {

    font-family: "Inter", serif;
}

.custom_font,
.inputs-container,
.aoi {
    font-family: "Inter", serif;
    font-size: 13px;

}

#minimumTimeButtonText {
    font-family: "Inter", serif;

}

#maximumTimeButtonText {

    font-family: "Inter", serif;
}

#currentTime {

    font-family: "Inter", serif;
}

* {
    box-sizing: border-box;
}

html {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

html::-webkit-scrollbar {
    width: 10px;
    scrollbar-width: thin;
}

html::-webkit-scrollbar-track {
    background-color: transparent;
}

html::-webkit-scrollbar-thumb {
    background: #085DDF;
    border-radius: 15px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 10px;
    scrollbar-width: thin;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #085DDF;
    border-radius: 15px;
    padding: 10px;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: rgb(243, 244, 246);
    color: black;
}

.dark body {
    background-color: rgb(17, 24, 39);
    color: white;
}


/* GRID */
body {
    /* Usar grid para la disposición */
    display: grid;
    /* La primera fila (nav) ajusta su altura, la segunda fila (main) ocupa el resto */
    grid-template-rows: 1fr;
    /* Columna para el aside (filterMenu) y otra para el main (content) */
    grid-template-columns: 250px 1fr;
    /* Hacer que el body ocupe toda la altura de la ventana */
    height: 100vh;
    margin: 0;
}

aside {
    grid-row: 1;
    grid-column: 1;
    padding: 1rem;
    position: fixed;
    height: 100vh;
}

#content {
    position: relative;
    grid-row: 1;
    grid-column: 2;
    padding: 1rem;
    margin-top: 78px;
    margin-left: 10px;
}


.dashboardSection {
    flex: 1;
    /* Ocupa todo el espacio del main */
    overflow-y: auto;
    /* Habilitar scroll interno si el contenido excede la altura */
    margin-bottom: 2rem;
}

.shift45 {
    filter: hue-rotate(45deg);
}

.shift90 {
    filter: hue-rotate(90deg);
}

.shift135 {
    filter: hue-rotate(135deg);
}

.shift180 {
    filter: hue-rotate(180deg);
}

.shift225 {
    filter: hue-rotate(225deg);
}

.shift270 {
    filter: hue-rotate(300deg);
}

div.good {
    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    border-radius: 25px;
    background-color: green;
}

div.bad {
    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    border-radius: 25px;
    background-color: red;
}

/* .mrclueDivider {
    visibility: visible;
    margin-top: 20px;
    margin-block: 20px;
} */

.center {
    text-align: center;
}

.darkmode {
    .dark & {
        color: white;
    }
}

/* .margintop10 {
    margin-top: 10px;
} */


.fa-circle-up {
    color: green;
}

.fa-circle-down {
    color: red;
}

.red {
    color: red;
}

.orange {
    color: orange;
}

.yellow {
    color: yellow;
}

.lime {
    color: orange;
}

.green {
    color: green;
}

/* Esto es para el icono animado de carga */
#loading .inside {
    width: 80%;
    height: auto;
    min-height: 100px;
    padding: 5px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wave {
    width: 5px;
    height: 100px;
    background: linear-gradient(45deg, #085DDF, #fff);
    margin: 10px;
    animation: wave 1s linear infinite;
    border-radius: 20px;
}

.wave:nth-child(2) {
    animation-delay: 0.1s;
}

.wave:nth-child(3) {
    animation-delay: 0.2s;
}

.wave:nth-child(4) {
    animation-delay: 0.3s;
}

.wave:nth-child(5) {
    animation-delay: 0.4s;
}

.wave:nth-child(6) {
    animation-delay: 0.5s;
}

.wave:nth-child(7) {
    animation-delay: 0.6s;
}

.wave:nth-child(8) {
    animation-delay: 0.7s;
}

.wave:nth-child(9) {
    animation-delay: 0.8s;
}

.wave:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes wave {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

/* ************************************** */


label.user {
    font-size: x-large;
    margin-top: 4px;
}

.fa-crosshairs {
    position: relative;
    left: -8px;
    top: -8px;
}


.redtext {
    color: #ff5371 !important;
}

.orangetext {
    color: #ffc355 !important;
}

.limetext {
    color: #70ff7b !important;
}

.heatmap-canvas {
    opacity: 0.75;
    pointer-events: none;
}

/* ==================================================================================================
                                        Filter Menu 
================================================================================================== */
/* Contenedor del dropdown, se integra con el sidebar */
.eyetracker-container {
    width: 100%;
}

/* Botón del dropdown */
.dropdown-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* Flecha del dropdown */
.dropdown-toggle .arrow {
    font-size: 12px;
    transition: transform 0.2s ease-in-out;
}

/* Contenedor del menú */
.dropdown-menu {
    display: none;
    flex-direction: column;
    padding: 5px 0;
}

/* Clase que se activa cuando el menú se expande */
.dropdown-menu.show {
    display: flex;
}

/* Enlaces dentro del dropdown */
.dropdown-menu input {
    text-decoration: none;
    font-size: 14px;
    padding: 8px 15px;
    display: block;
    transition: background 0.2s ease-in-out;
}

/* Efecto hover */
.dropdown-menu a:hover {
    background: #f0f0f0;
}

/* Estilo para la opción activa */
.dropdown-menu a.active {
    color: #085DDF;
    font-weight: bold;
}

.navMenu {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    height: 100px;
    width: calc(100% - 1%);
    grid-row: 1;
    grid-column: 2;
    padding: 10px 20px;
}


.test-stimulus-container {
    display: flex;
    width: 80%;
    height: auto;
}

.test-stimulus-container form {
    margin-right: 10px;
}

.test-card,
.stimulus-card {
    display: flex;
    flex-direction: column;
    background: white;
    font-size: 16px;
    margin-left: 3rem;
}

.test-card:hover,
.stimulus-card:hover {
    border-bottom: 2px solid #085DDF;
}

.label {
    font-size: 12px;
    font-weight: bold;
    color: #085DDF;
    text-transform: uppercase;
}

button {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.timer {

    font-size: 16px;
    font-weight: bold;
    width: 130px;
    text-align: center;
    margin: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-btn {
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    padding: 7px;
    margin-left: 20px;
}

@media (prefers-color-scheme: dark) {
    .dashboard-btn {
        color: #5a5d61;
    }
}

.dropdown-toggle {
    padding: 0;
}

.navbar {
    height: 100vh;
}

#sidebar.collapsed {
    width: 70px;
}

#content.expanded-content {
    grid-column: 1;
    margin-left: 70px;
    width: 100vw;
}

.navMenu.expanded-content {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 70px;
    width: calc(100vw - 70px);
}

#sidebar {
    width: 260px;
}

.kpis-container {
    display: flex;
    justify-content: center;
    /* flex-direction: column; */
    /* height: 49px; */
    background: white;
    width: fit-content;
    position: relative;
    margin-left: 20px;
    bottom: 8px;
}

.kpis-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #085DDF;
    text-transform: uppercase;
    text-align: center;
    z-index: 10;
}

.kpis-select {
    border: none;
    background: none;
    text-align: center;
    cursor: pointer;
}

select:not([size]) {
    padding-right: 0;
}

.kpis-select:focus {
    outline: none;
    box-shadow: none;
}

.logo_kopernica {
    height: auto;
    width: 8rem;
    padding: 20px 0px;
}

/* ==================================================================================================
                                        Redesign Dashboard 2.0
================================================================================================== */
.w50 {
    max-width: 50%;
    width: 50%;
    float: left;
}

.w75 {
    max-width: 75%;
    width: 75%;
    float: left;
}

.w100 {
    max-width: 100%;
    width: 100%;
    float: left;
}

.w66 {
    max-width: 66%;
    width: 66%;
    float: left;
}

.w33 {
    max-width: 33%;
    width: 33%;
    float: left;
}

.w25 {
    max-width: 25vw;
    width: 25vw;
    min-width: 25vw;
    float: left;
    min-height: 25vw !important;
    height: 25vw !important;
    max-height: 25vw !important;
}

.w20 {
    max-width: 20%;
    width: 20%;
    float: left;
}

.w {
    min-height: 300px;
    height: 300px;
    display: inline-table;
}

.w h2 {
    margin-left: 0px;
    padding: 10px 0px 10px 24px;
    margin-top: 0px;
    margin-bottom: 0px;
}

hr {
    visibility: hidden;
}


/* 
.navbar {
position: fixed;
    left: 0px;
    top: 0px;
    padding: 10px;
    padding-top: 65px;
    color: white;
    background-color: #00000099;
    z-index: 1;
    height: 100vh;
    border-right: 2px #ffffff20 solid;
} */



/* .tdHalf {
    width: 50%;
} */

/* .mainTable .tableHalfLeft {
    min-width: 50%;
    width: 50%;
    max-width: 50%;
}

.mainTable .tableHalfRight {
    min-width: 50%;
    width: 50%;
    max-width: 50%;
} */

.slider {
    /* -webkit-appearance: none; */
    width: 880px;
    height: 0px;
    position: relative;
    margin-left: 20px;
    z-index: 1;
    top: 178px;
}

legend {
    color: white;
    text-shadow: 1px 1px 3px black;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1px;
    height: 180px;
    background: white;
    cursor: pointer;
    border-radius: 10px;
}

#video {
    height: 30rem;
}

#videoHolder fieldset {
    padding: 0px;
}

div #centerText {
    display: flex;
    justify-content: center;
    align-items: center;
}

div #centerText p {
    font-size: 55px;
    text-align: center;
}

/* .black {
    background-color: black !important;
} */

input.cancelLogin {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50px;
}


.tdQuarter {
    width: 25%;
}

.container-video {
    width: 60%;
    justify-content: center;
    align-items: center;
}

.container-heatmap {
    display: flex;
    flex-direction: column;
}

.container-aois {
    display: flex;
    flex-direction: column;
    width: 40%;
}

.top-controls {
    position: absolute;
    top: 10px;
    right: -10px;
    display: flex;
    gap: 20px;
    align-items: center;
    z-index: 10;
    padding: 10px;
}

.top-controls button:last-child {
    margin-right: 0;
}

.options-menu li {
    padding: 10px;
    cursor: pointer;
}

/* Div que contiene los botones para descargar CSV e imagen*/


/* Sombra de los botones para descargar CSV e imagen*/
.bottom-shadow {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
}

/* Sombra al pasar el mouse sobre los botones para descargar CSV e imagen */
.bottom-shadow:hover {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
}





/* ==================================================================================================
                                        Redesign Redbox 1.2
================================================================================================== */
.fullscreen {
    /* background-color: black;
    width: 100vw;
    height: 100vh; */
    position: absolute;
    top: 0px;
    z-index: 10000;
}

.middlecontainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
    height: calc(100vh - 80px) !important;
    /* overflow-y: hidden !important; */
}

.middlecontainerProfile {
    display: table-cell;
    text-align: center;
    width: 100vw;
    height: 100vh;
}

.popup {
    text-align: left;
    max-width: 520px;
}

#buttonNeuro {
    background-color: #085DDF;
    border: none;
}

#buttonNeuro:hover {
    background-color: #1a56db;
}

#profileInputEditor {
    background-color: transparent;
}

input[type="submit" i] {
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

#cuartilessetupbtn input[type="submit" i] {
    cursor: pointer;
    color: white;
    background-color: #085DDF !important;
    font-family: Arial;
    font-size: 14px;
    font-weight: 100;
    text-decoration: none;
}

#cuartilessetupbtn input[type="submit" i]:hover {
    background-color: #1a56db !important;

}

input[type="submit" i]:active {
    position: relative;
    top: 1px;
}

.navbar input {
    margin-left: 1rem;
    color: black;
}

.filterMenu {
    width: 15%;
    float: left;
    z-index: 10;
}

.filterMenu input {
    color: #4B5563;
    font-size: 16px;
}

.filterMenu button:hover {
    color: #085DDF;
}

.dark .filterMenu input {
    color: white;
}

.dark .filterMenu input:hover {
    color: #085DDF;
}

#navMenu input,
.downloadReport {
    color: #4B5563;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.dark #navMenu input,
.dark .downloadReport {
    color: white;
}

#navMenu input:hover,
.downloadReport:hover {
    color: #085DDF;
}

#quartileTable input {
    width: 6rem;
    margin: 0.2rem;
}

#loading {
    background-color: white !important;
}

.dark #loading {
    background-color: #111827 !important;
}

button.switchKPI:hover {
    color: #085DDF;
}

.switchKPI {
    display: block;
    width: 100%;
}

/*Todo contenedor DIV cuyo ID contenga el substring Chart*/
div[id^="Chart"] {
    min-height: 200px;
    min-width: 200px;
}

.videoHeatmap {
    background-color: white;
    overflow: hidden;
    position: relative !important;
    padding: 30px;
    border-radius: 10px;
    height: 39.5rem;
}

#videoHolder2 {
    justify-items: center;
    height: auto;
    width: auto;
    position: relative;
}

/* style="width: 645px; height: 363px;" */
.video-container {
    position: relative;
    width: 100%;
    background: white;
    overflow: hidden;
}

.progress-bar-percent {
    padding: 2px 55px;
}

video {
    overflow: hidden;
    display: grid;
    position: relative !important;
}

.videoHeatmap_real {
    display: none;
    pointer-events: none;
}

.expanded {
    height: 100%;
    width: 100%;
    position: absolute !important;
}


.graphContainer {
    width: 100%;
    position: relative !important;
}


.graphContainer>#Chart04 {
    width: auto;
    height: auto;
    position: relative !important;
    bottom: 0px;
    clip-path: inset(80% 0 0 0);
}

.graphContainer>#Chart01 {
    margin-bottom: -200px;
}

.graphETContainer {
    position: relative !important;
}

.graphETContainer>#Chart04 {
    width: 100%;
    height: auto;
    position: absolute !important;
    bottom: 0px;
    clip-path: inset(80% 0 0 0);
}

.timeContainer {
    display: flex;
    justify-content: center;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
}

#acotadorTable {
    width: 100%;
    text-align: center;
}

#acotadorTable tr {
    display: flex;
}

#acotadorTable td {
    flex: 1;
    color: #1F2937 !important;
}

.dark #acotadorTable td {
    color: #F3F4F6 !important;
}

/* Circumplejo del dashboard
#dashboardCircumplejo {}

Gráfica dashboard / eyetracker
#Chart01 {
}

KPI 1 dashboard
#Chart05 {
}
 KPI 2 dashboard
#Chart06 {
} */


i.eyetracker-switch {
    color: #1F2937;
    position: absolute;
    display: block;

}

.dark i.eyetracker-switch {
    color: #F3F4F6;
}

.pauseplay {
    color: #1F2937;
}

.dark .pauseplay {
    color: #F3F4F6;
}

i.eyetracker-switch.activo {
    color: #76c1f0;
}

i.eyetracker-switch:hover,
.pauseplay:hover {
    color: #76c1f0;
}

#video::-webkit-media-controls-panel {
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 14px;
    padding: 4px;
}

#video::-webkit-media-controls-timeline {
    width: 100% !important;
}

#video::-webkit-media-controls-play-button,
#video::-webkit-media-controls-pause-button,
#video::-webkit-media-controls-current-time-display {
    display: initial !important;
    margin-right: 8px;
    bottom: 0px;
}

#video::-webkit-media-controls-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 14px;
    padding: 4px;
}

#video::-webkit-media-controls-overflow-button,
#video::-webkit-media-controls-fullscreen-button,
#video::-webkit-media-controls-rewind-button,
#video::-webkit-media-controls-toggle-closed-captions-button,
#video::-webkit-media-controls-toggle-closed-captions-button,
#video::-webkit-media-controls-volume-slider {
    display: none !important;
}

#video::-webkit-media-controls-timeline {
    width: 100% !important;
}

#video::-webkit-media-controls-play-button,
#video::-webkit-media-controls-pause-button {
    margin-right: 8px;
}

.noclick {
    pointer-events: none;
}


.pointer {
    height: 0px;
    position: absolute;
}

.kpi-container {
    position: relative;
    width: 180px;
    z-index: 20;
}

#kpi-button {
    width: 10rem;
    text-align: center;
    background-color: #085DDF;
    cursor: pointer;
}

#kpi-button:hover {
    background-color: #1a56db;
}

#popup {
    display: none;
    line-height: 150%;
    position: absolute;
    bottom: 0px;
    left: 140px;
    width: 130%;
    background-color: white;
    color: black;
    padding: 1rem;
    display: none;
    cursor: pointer;
    border-radius: 10px;
}

.dark #popup {
    background-color: #1f2937;
    color: white;
}

#popup.active {
    display: block;
}

#alternarSlider {
    background-color: #085DDF;
    color: white;
    border-radius: 10px;
    width: 8rem;
    margin-top: 0.5rem;
    padding: 5px;
}

#alternarSlider:hover {
    background-color: #1a56db;
}

#buttonNeuro:hover {
    background-color: #1a56db;
}

/* #kpi-button:hover #popup,
#popup:hover {
    display: block;
} */

/* #cuartilessetupbtn {
    color: white;
    background-color: #085DDF;
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    text-align: center;
    transition: background-color 0.2s ease;
    width: 8rem;

    &:hover {
        background-color: #1a56db;
        cursor: pointer;
    }
} */

/* ==================================================================================================
                                        EYETRACKER
================================================================================================== */

#aoidatatable {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border-radius: 0.75rem;
    background-color: #ffffff;
    margin-top: 0.75rem;
    padding: 1rem;
}

.dark #aoidatatable {
    background-color: #1f2937;
    border-bottom-color: #1f2937;
}

#aoidatatable td {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 14px;
    max-width: 15rem;
    padding: 10px;
    height: 10px;
}

#aoidatatable th {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 14px;
    max-width: 15rem;
    padding: 10px;
}

.borderless {
    background-color: #085DDF;
    border-top-left-radius: 0.75rem;

}

.gazes {
    background-color: #085DDF;
    color: white;
    border-right: #e5e7eb solid 3px;

    .dark & {
        border-right: #111827 solid 3px;
    }
}

.gaze_child {
    background-color: #0075be87;
    color: white;
}

.alignTd {
    text-align: right;
}

.fixations {
    background-color: #085DDF;
    color: white;
    border-top-right-radius: 0.75rem;
}

.fixation_child {
    background-color: #0075be87;
    color: white;
}


/*#aoidatatable tbody tr:nth-child(2) th:first-child {
    background-color: #085DDF;
    color: white;
}

#aoidatatable tbody tr:nth-child(even) {
    background-color: #0075be22;
}*/

.scrollable-table-wrapper {
    overflow-x: auto;
    width: 100%;
    max-width: 600px;
}

/* Tabla dentro del contenedor */
.scrollable-table {
    table-layout: fixed;
    /* Hace que las celdas tengan un ancho fijo */
    width: max-content;
    /* El ancho de la tabla se ajusta al contenido */
    border-collapse: separate;
    /* Elimina el espacio entre las celdas */
}

/* Estilo de las celdas */
.scrollable-table th,
.scrollable-table {
    padding: 10px;
    text-align: left;
    width: 100%;
}

.scrollable-table th {
    font-weight: bold;
}

/* Primera columna fija */
.scrollable-table th:first-child,
.scrollable-table td:first-child {
    position: sticky;
    background-color: white;
    left: 0;
    /* Se mantiene a la izquierda */
    z-index: 2;

    .dark & {
        background-color: rgb(40, 50, 70);
    }
}


/* Mejorar visibilidad de la primera columna fija */
.scrollable-table th:first-child {
    z-index: 3;
    /* Asegura que el encabezado de la primera columna esté encima */
}


.gaze_child:nth-child(6) {
    border-right: #e5e7eb solid 3px;

    .dark & {
        border-right: #111827 solid 3px;
    }
}

#aoidatatable td:nth-child(6) {
    border-right: #e5e7eb solid 3px;

    .dark & {
        border-right: #111827 solid 3px;
    }
}

#downloadbutton {
    height: auto;
    cursor: pointer;
    width: 10rem;
    background-color: #085DDF;
    border-radius: 15px;
}

#downloadbutton:hover {
    background-color: #1a56db;
}


#videoHolder {
    width: 837px;
    max-height: 364px;
    color: black;
}

.dark #videoHolder {
    color: white;
}

aoi {
    display: block;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    padding: 0.5rem;
    padding-left: 1rem;
    margin-bottom: 5px;
    border-radius: 15px;
    background-color: white;
    cursor: pointer;
}

.dark aoi {
    background-color: #1f2937;
}

aoi:hover {
    background-color: rgb(248 113 113);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/></svg>');
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: right center;
    background-position: calc(100% - 10px) center;
}

#aoiList {
    overflow-y: auto;
    overflow-x: hidden;
}

#fieldsEditor {
    background-color: black;
    min-width: 100%;
    box-sizing: border-box;
    padding: 25px 25px 25px 0px;
    display: block;
}

fieldset {
    border: 2px red solid;
    display: block;
    position: absolute;
}

.writer {
    border: 2px gold solid;
}

.fields {
    position: sticky;
    display: grid;
}

.shapes {
    display: block;
}

.shapes:enabled {
    background-color: #0284c7;
    color: white;

    svg {
        color: white;
    }
}

.dark .shapes:enabled {
    background-color: #0284c7;
    color: white;
}

/*
table.right {
    float: left;
    display: inline-block;
    width: 100px;
}

table.right td,
table.righter td,
table.right th,
table.righter th {
    border: 1px #a3a3a3 solid;
}

table.righter {
    text-align: center;
    float: left;
    display: inline-block;
    width: 200px;
    border-collapse: collapse;
    background-color: red;
}

div#neoFooter th {
    padding: 3px;
    background-color: #a3a3a3;
} */
#context-menu {

    z-index: 1000 !important;
}

.selected {
    background-color: #3b82f6;
    /* Azul */
    color: white;
}

/*Estilo de la columna de los botones del csv e imagen para alinearlos a la derecha en la misma linea del titulo de KPI*/
.columnaBotones {
    margin-left: 500px;
}

/* ==================================================================================================
                                        MR BLUE
================================================================================================== */
.sliderMrClue {
    width: 35rem;
}

#mrclue_table>table {
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border-radius: 0.75rem;
    background-color: #ffffff;
    margin-top: 2rem;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.dark #mrclue_table>table {
    background-color: #1f2937;
    border-bottom-color: #1f2937;
}

#mrclue_table th {
    background-color: #085DDF;
    color: white;
    padding: 1rem;
}

#mrclue_table td {
    padding: 1rem;
}

#mrclue_table th:first-child {
    border-top-left-radius: 0.75rem;
}

#mrclue_table th:nth-child(8) {
    border-top-right-radius: 0.75rem;
}

#mrclue_table tr:nth-child(odd) {
    background-color: #0075be22;
}

#fortalezasDebilidades {
    height: auto;
    height: 10rem;
    overflow: auto;
}

#fortalezasDebilidades table {
    width: 100%;
}

#fortalezasDebilidades th {
    background-color: #085DDF;
    color: white;
    padding: 1rem;
    padding-left: 1.5rem;
}

#fortalezasDebilidades th:first-child {
    border-top-left-radius: 0.75rem;
}

#fortalezasDebilidades th:nth-child(3) {
    border-top-right-radius: 0.75rem;
}

#fortalezasDebilidades td {
    padding: 1rem;
}

#Radar01 {
    width: 35rem;
    height: 25rem;
}


graficas {
    color: #ffffff;
    color: rgba(255, 215, 0, 0.8);
}

#videoHolder {
    position: relative;
    display: flex;
}

#videoHolder video {
    width: 100%;
    height: 360px;
    max-height: 360px;
    object-fit: cover;
}

#ChartPerformance>div:hover {
    cursor: default !important;
}

input#profileInputEditor {
    width: 100%;
}


.shape-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1.2em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    /* Permite interactuar con la forma debajo */
    user-select: none;
    /* Evita selección de texto */
    max-width: 90%;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}


#btn-save {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    width: 6rem;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* El canvas no debe bloquear eventos */
}

.resize-drag {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    border: 2px dashed red;
    /* Destacar el rectángulo */
    background: rgba(255, 0, 0, 0.2);
    /* Fondo semi-transparente */
    cursor: move;
    z-index: 9;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.resize-drag.resizing,
.resize-drag.dragging,
.resize-drag.rotating {
    transition: none !important;
}

.rotator {
    position: absolute;
    top: -20px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 15px !important;
    height: 15px !important;
    cursor: alias !important;
    z-index: 1000;
}

/*
.controls {
    margin-bottom: 10px;
}*/

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#context-menu {
    z-index: 10;
    /* Asegura que el menú esté por encima de otros elementos */
}

#context-menu ul {
    margin: 0;
    padding: 0;
}

#context-menu li a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

#context-menu li a:hover {
    background-color: #f0f0f0;
}

/*STYLE FOR VIDEO CUSTOM*/

.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #fff;
}

.controls button {
    background: none;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    padding: 5px 10px;
}

.controls button:hover {
    color: #007BFF;
}

.progress-container {
    flex: 1;
    margin: 0 10px;
    display: flex;
    align-items: center;
}

.progress {
    flex: 1;
    width: 100%;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

.progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #80CBF9;
    border-radius: 50%;
    cursor: pointer;
}

.time {
    display: inline-block;
    min-width: 75px;
    text-align: center;
    font-family: "Courier New", Courier, monospace;
    white-space: nowrap;
}

#progressBar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background: linear-gradient(to right, #007BFF var(--progress), #ddd var(--progress));
    outline: none;
    cursor: pointer;
    transition: background 0.1s linear;
}

#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #007BFF;
    border-radius: 50%;
    cursor: pointer;
}


#toggleMuteButton {
    background: none;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

#toggleMuteButton:hover {
    color: #007BFF;
}




.color-picker-wrapper {
    position: relative;
    display: inline-block;
}

#colorInput {
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
    background: white;
}

.color-palette {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 5px;
    grid-template-columns: repeat(7, 20px);
    gap: 5px;
}

.color-option {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid #ccc;
}

.color-option:hover {
    border: 2px solid black;
}

.mostrarCboxMS {
    visibility: hidden;
}

.mostrarDivMS {
    display: none;

}

.hidden {
    display: none;
}


.videoHeatmap.isImage {
    width: 980px;
    height: 551px;
    padding: 0px;
}

.videoHeatmap.isImage div#videoHolder2 {
    height: 551px;
}


.videoHeatmap.isImage .videoHeatmap_real {
    display: block;
    top: 0px;
}