* {
    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: #0076be;
    border-radius: 15px;
}

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #0076be;
    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 {
    display: grid;
    /* Usar grid para la disposición */
    grid-template-rows: auto 1fr;
    /* La primera fila (nav) ajusta su altura, la segunda fila (main) ocupa el resto */
    grid-template-columns: 200px 1fr;
    /* Columna para el aside (filterMenu) y otra para el main (content) */
    height: 100vh;
    /* Hacer que el body ocupe toda la altura de la ventana */
}

.navMenu {
    grid-column: 1 / span 2;
    /* Hacer que el nav ocupe ambas columnas */
}

.filterMenu {
    grid-column: 1;
    /* Coloca el filterMenu en la primera columna */
    overflow-y: auto;
    /* Habilitar scroll si el contenido excede la altura */
    padding: 1rem;
    padding-top: 2rem;
}

#content {
    /* width: calc(100% - 270px); */
    /* float: right; */
    padding-right: 2rem;
    padding-left: 1rem;
    /* Sin espaciado interno en el main */
    display: flex;
    /* Usar flexbox para que el dashboard ocupe todo el espacio */
    grid-column: 2;
    /* Coloca el content en la segunda columna */
}

.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;
}

/* .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;
}

#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, #0076be, #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;
}

/********************************Dashboard***********************************/
.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;
}

#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%;
}

































/* ==================================================================================================
                                        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: #0076be;
    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: #0076be !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;
}

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

.filterMenu input:hover {
    color: #0076be;
}

.dark .filterMenu input {
    color: white;
}

.dark .filterMenu input:hover {
    color: #0076be;
}

#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: #0076be;
}

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

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

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

button.switchKPI:hover {
    color: #0076be;
}

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

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

.videoHeatmap {
    overflow: hidden;
    display: grid;
    width: 100%;
    height: auto;
    position: relative !important;
}

.videoHeatmap_real {
    pointer-events: none;
}

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


.graphContainer {
    position: relative !important;
}


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

.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: #0076be;
    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: #0076be;
    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: #0076be;
    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: 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 #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;
    text-align: center;
    line-height: 10px;
    height: 10px;
}

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

.borderless {
    background-color: #0076be;
    border-top-left-radius: 0.75rem;

}

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

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

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

.fixations {
    background-color: #0076be;
    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: #0076be;
    color: white;
}

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

.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: #0076be;
    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;
}

/*
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;
} */


/* MR CLUE */

.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: #0076be;
    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: #0076be;
    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;
}