/* dashboard_mapa.css  */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary-red: #B11816;
  --primary-dark: #8F0A0E;
  --map-marker: #B91414;
  --border-gry: #DCDEE5;
  --bg-color: #F4F6F9;
  --txt-dark: #2E323A;
  --rad-big: 8px;
  --rad-sm: 5px;
  --line-green: #00AF9D;
  --coms-teal: #00AF9D;
  --coms-coral: #FF6962;
  --coms-oro: #E0B673;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: #E4E8EE;  
  font-size: 13px;
  
  margin: 0;
  padding: 0; 
}

 
.app-wrapper {
  background: #F4F6F9;          
  margin: 22px 24px 30px 24px;  
  border-radius: 14px;          
  overflow: hidden;          
  min-height: calc(100vh - 52px);  
  
 
  box-shadow: 0 10px 30px rgba(0,0,0,0.06),
              0 20px 60px rgba(0,0,0,0.04), 
              0 2px 6px rgba(0,0,0,0.03);
}

.main-layout-wrapper {
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px 20px;
}

.pintar-teal {
  background-color: var(--coms-teal) !important;
}

.pintar-coral {
  background-color: var(--coms-coral) !important;
}

.pintar-oro {
  background-color: var(--coms-oro) !important;
}

.main-layout-wrapper {
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px 20px;
}

.card-column {
  background: #fff;
  border-radius: var(--rad-big);
  border: 1px solid #DFDFDF;
  display: flex;
  flex-direction: column;
}

.red-header {
  background: var(--primary-red);
  color: #FFF;
  padding: 12px 18px;
  border-top-left-radius: var(--rad-big);
  border-top-right-radius: var(--rad-big);
}

.red-header h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.3px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 22px;
  position: relative;
}

.header-middle-txt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 700;
  color: #4B4D54;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.header-logo-framed {
  display: flex;
  align-items: stretch;
  position: relative;
}

.l-t-top-grp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1.5px solid var(--border-gry);
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 8px;
  padding: 10px 25px 6px 12px;
}

.l-line-sm {
  font-size: 13px;
  font-weight: 700;
  color: #4B4E55;
  line-height: 1;
}

.l-line-bg {
  font-size: 28px;
  font-weight: 900;
  color: var(--primary-red);
  letter-spacing: -0.04em;
  margin-top: -2px;
  line-height: 1.05;
}

.l-t-bot-grp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  transform: translateY(0.5px);
  position: absolute;
  bottom: -12px;
  left: 12px;
}

.txt-elecciones {
  font-size: 8px;
  color: #353535;
  font-weight: 600;
  line-height: 1;
}

.yr {
  font-size: 15px;
  font-weight: 900;
  color: var(--primary-red);
  letter-spacing: -0.3px;
  position: relative;
  top: 2px;
}

.side-grey-line {
  flex-grow: 1;
  width: 22px;
  border-bottom: 1.5px solid var(--border-gry);
  margin-bottom: -4px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6E727A;
  font-weight: 600;
  font-size: 11px;
  margin-top: 4px;
  text-align: right;
}

.icon-clock {
  width: 17px;
  height: 17px;
  opacity: 0.8;
}

.timeline-container {
  background: #FFFFFF;
  border: 1px solid var(--border-gry);
  border-radius: var(--rad-big);
  margin-bottom: 20px;
}

.timeline-header-pad h2 {
  margin: 0;
  font-size: 13px;
}

.j-timeline-body {
  padding: 45px 10px 25px 10px;
  overflow-x: auto;
}

.j-timeline-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 900px;
}

.j-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.j-node:hover .j-circle {
  transform: scale(1.05);
}

.j-line {
  position: absolute;
  left: 50%;
  width: 100%;
  top: 40px;
  z-index: 1;
  transform: translateY(-50%);
  height: 0px;
}

.l-solid {
  border-bottom: 2.2px solid var(--line-green);
}

.l-dashed {
  border-bottom: 2px dashed #C3C7CF;
}

.j-mark-tick {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: burlywood;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.j-mark-hollow {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #C3C7CF;
  background: #fff;
}

.j-circle {
  position: relative;
  z-index: 5;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grey-step {
  border: 1px solid #D5DAE0;
}

.active-outer {
  border: 1px solid var(--primary-red);
  padding: 2px;
}

.active-inner-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #B11816;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}

.j-num {
  font-size: 24px;
  font-weight: 800;
  padding-bottom: 8px;
}

.txt-rd {
  color: #AF1314;
}

.txt-w {
  color: #FFF;
}

.j-pill {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 11px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  z-index: 15;
}

.grey-pill {
  background: #888A8C;
  color: #FFF;
}

.white-pill {
  background: #FFF;
  color: #B11816;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.j-txt {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  color: #31343C;
  font-weight: 500;
}

.j-txt-act {
  color: #A61817;
  font-weight: 800;
}

.panels-grid {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 15px;
  align-items: stretch;
}

.custom-rht-bd {
  border-top-left-radius: 8px !important;
}

.combined-huge-card {
  flex-grow: 1;
}

.split-view-body {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.stats-part {
  width: 331px;
  flex-shrink: 0;
  border-right: 1px solid #DFDFDF;
  display: flex;
  flex-direction: column;
}

.map-part {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border-bottom-right-radius: var(--rad-big);
}

.unify-pads-l {
  padding: 18px 0;
}

.stat-card,
.stat-card-clean {
  display: flex;
  align-items: center;
  border: 1px solid #EBECEF;
  margin: 0 18px 14px;
  border-radius: var(--rad-sm);
  padding: 12px 14px;
  position: relative;
  gap: 14px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.01);
}

.stat-card-clean {
  border: none;
  margin: 0 18px 2px;
  padding: 6px 0;
  box-shadow: none;
}

.stat-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rad-sm);
  flex-shrink: 0;
  color: var(--primary-red);
}

.red-light-bg {
  background-color: #FEEDED;
}

.r-circle {
  border-radius: 50%;
  width: 42px;
  height: 42px;
}

.stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-data,
.m-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.m-col {
  flex-grow: 1;
}

.st-lbl {
  font-size: 11px;
  font-weight: 600;
}

.st-val {
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  margin: 1px 0 2px;
}

.st-sub {
  font-size: 10.5px;
  color: #868892;
  font-weight: 500;
}

.m-label-n {
  font-size: 12.5px;
  font-weight: 600;
}

.redx-clr {
  color: var(--primary-red);
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.txt-blk {
  font-size: 18.5px;
  font-weight: 900;
  color: #17181C;
  justify-self: flex-end;
}

.stat-arrow {
  position: absolute;
  right: 20px;
  font-size: 22px;
  font-weight: 600;
  color: #DC2F2E;
}

.mb-20 {
  margin-bottom: 24px;
}

.mesas-divider-title {
  margin: 25px 0 10px 18px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #222;
}

.map-white-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ECECEC;
  z-index: 10;
}

.custom-padd-tlbar {
  padding: 13px 20px 13px 18px;
}

.mt-label-red {
  color: #BA1313;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.sel-rht-box {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-left: 15px;
}

.map-dropdown {
  max-width: 280px;
  width: 100%;
  border: 1px solid #DBE0E8;
  border-radius: 6px;
  padding: 7px 30px 7px 12px;
  font-size: 12.5px;
  color: #40444C;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
  height: auto;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%235A6172' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 8px 5px;
  background-repeat: no-repeat;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.03);
}

.map-inner-canvas-combo {
  flex-grow: 1;
  width: 100%;
  min-height: 480px;
}

.custom-bubble-proportional {
  background-color: var(--map-marker);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.leaflet-div-icon {
  background: none;
  border: none;
}

.padding-md {
  padding: 18px 20px;
}

.no-top-bd {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.border-right-only {
  border-top: 1px solid transparent;
}

.line-divisor-btm {
  border-bottom: 1.5px solid #F1F1F1;
  padding-bottom: 15px;
  margin-bottom: 15px;
  margin-top: 2px;
}

.line-divisor-btm-full {
  border-bottom: 1.5px solid #F1F1F1;
  margin-bottom: 12px;
}

.line-divisor-top {
  border-top: 1.5px solid #F1F1F1;
  padding-top: 18px;
  margin-top: 0;
}

.filter-row {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}

.flex-top {
  align-items: flex-start;
}

.flex-bottom {
  align-items: flex-end;
}

.gap-col {
  gap: 10px;
}

.fixed-f3 {
  flex: 1 1 33%;
  min-width: 0;
}

.custom-w1 {
  flex: 1.9;
  min-width: 0;
}

.custom-w2 {
  flex: 1.1;
  min-width: 0;
}

.input-grp {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.input-grp label {
  font-size: 8px;
  font-weight: 800;
  color: #5E636A;
  text-transform: uppercase;
  margin-bottom: 5px;
  letter-spacing: 0.1px;
}

.ui-select {
  width: 100%;
  border: 1px solid #D5DAE1;
  border-radius: 4px;
  padding: 7px 22px 7px 10px;
  color: #22262B;
  font-family: inherit;
  font-size: 11px;
  outline: none;
  font-weight: 500;
  text-overflow: ellipsis;
  background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 5L0 0h4z'/%3E%3C/svg%3E") no-repeat right 8px center / 8px auto;
}

.btn-outlined {
  flex: 0 0 65px;
  height: 32px;
  background: #fff;
  border: 1px solid #CED3DA;
  border-radius: 4px;
  color: #5D6068;
  font-weight: 600;
  cursor: pointer;
}

.btn-outlined:hover {
  background: #F7F8FA;
}

.status-grid-tiny {
  display: flex;
  gap: 8px;
}



.tny-grn .tk {
  display: flex;
  padding-bottom: 1px;
}

.tny-grn .tk svg {
  color: #1EAE55;
}

.tk-nr {
  font-size: 17px;
  color: #17A24B;
  font-weight: 900;
  margin-top: -2px;
}

.personero-list-slim {
  list-style: none;
}

.personero-list-slim li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.ps-txt {
  font-size: 8px;
  font-weight: 800;
  color: #878A90;
  text-transform: uppercase;
}

.ps-num {
  font-size: 10px;
  font-weight: 900;
  color: var(--primary-red);
}

.radial-dnut-container {
  padding: 5px 0 10px;
}

.don-headers-ctrs {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  width: 100%;
  gap: 45px;
  margin-bottom: 8px;
}

.dhd {
  font-size: 12px;
  font-weight: 600;
  color: #414349;
  padding-left: 5px;
}

.dnr {
  font-size: 15.5px;
  font-weight: 900;
  color: #222;
  margin-top: -2px;
}

.donut-wrapper-flex {
  display: flex;
  align-items: center;
}

.canvas-ctr {
  width: 95px;
  height: 95px;
  padding: 0;
  flex-shrink: 0;
}

#jneDoughnut {
  max-width: 95px !important;
  max-height: 95px !important;
}

.lgnd-lisst {
  list-style: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 18px;
}

.lgnd-lisst li {
  display: flex;
  align-items: center;
}

.dt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
}

.grn-dt {
  background: #17AA88;
}

.red-dt {
  background: #DA343F;
}

.dtxt {
  font-size: 11px;
  color: #2E323A;
  font-weight: 600;
}

.dpor {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}

.tg-gn {
  color: #17AA88;
}

.tg-rd {
  color: #DA343F;
}

.gray-subtitle {
  font-size: 10px;
  font-weight: 800;
  color: #5D5F66;
  padding-bottom: 8px;
}

.t-row {
  display: flex;
  align-items: center;
  border: 1px solid #ECEEEF;
  background-color: #fff;
  border-radius: var(--rad-sm);
  padding: 10px;
  margin-bottom: 8px;
}

.j-mark-hollow{
  display: none;
}

.t-icon.redbkg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--primary-red);
  border-radius: var(--rad-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
}

.t-mid {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.dark-red-tx {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.tx-date {
  font-size: 10.5px;
  color: #787D87;
  font-weight: 500;
}

.t-end {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.tx-clock {
  font-size: 14.5px;
  font-weight: 900;
  color: #16181A;
  font-variant-numeric: tabular-nums;
}

.badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  line-height: 1;
}

.bdg-red {
  background: #FFEDED;
  border: 1px solid #FFCFD0;
  color: var(--primary-red);
}

.bdg-grey {
  background: #F6F8F9;
  color: #858B93;
  border: 1px solid #DFE1E5;
}

.ft {
  text-align: center;
  font-size: 12px;
  color: #858A94;
  font-weight: 500;
  margin-top: 0px;
  padding-bottom: 20px;
  margin-top: 22px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-show-layer {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  width: 100%;
  max-width: 900px;
  background: #FFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.3);
  transform: scale(0.97);
  transition: transform 0.25s;
}

.modal-show-layer .modal-box {
  transform: scale(1);
}

.modal-red-hdr {
  display: flex;
  background: #960D0B;
  padding: 18px 25px;
  align-items: center;
  gap: 15px;
  color: #fff;
  border-bottom: 2px solid #BC1713;
}

.hdr-num-badge {
  background: rgba(255, 255, 255, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  padding: 3px 12px;
  font-weight: 800;
  font-size: 16px;
}

.hdr-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  padding: 0 10px;
}

.modal-h-top {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.1px;
}

.modal-h-sub {
  font-size: 10px;
  color: #FCCACA;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.hdr-right-info {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.hdr-f-bold {
  font-size: 13.5px;
  font-weight: 800;
}

.hdr-f-sub {
  font-size: 9.5px;
  color: #FCCACA;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.modal-cls {
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  width: 34px;
  height: 34px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  margin-left: 15px;
}

.modal-cls:hover {
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid #FFCDCD;
}

.modal-inner-bg {
  background: #F3F3F3;
  padding: 25px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.top-date-plack {
  background: #E8E8E8;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 15px;
  color: #1C1E26;
  gap: 6px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.03);
}

.top-date-plack span {
  font-weight: 500;
  margin: 0 3px;
}

.tag-concluido {
  background: #397F37;
  color: #FFF;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 6px;
  font-weight: 700;
  border: 1.5px solid #4CAF50;
}

.status-top-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 20px 0;
}

.stt-box {
  background: #fff;
  border: 1.5px solid #EDEDED;
  padding: 18px 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.015);
}

.bx-vl {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
  color: #1E2125;
}

.bx-nm {
  font-size: 10px;
  font-weight: 600;
  color: #7B7D86;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.bar-items-list-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: 400px;
  padding-right: 8px;
}

.bar-items-list-box::-webkit-scrollbar {
  width: 6px;
}

.bar-items-list-box::-webkit-scrollbar-thumb {
  background: #CDCDCD;
  border-radius: 10px;
}

.progress-task-card {
  background: #fff;
  border: 1.5px solid #EDEDED;
  border-radius: 8px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.012);
}

.ptc-col1 {
  display: flex;
  flex-direction: column;
}

.task-head {
  font-weight: 700;
  color: #161616;
  font-size: 12.5px;
  display: flex;
  align-items: center;
}

.imp-tag {
  background: #AF1314;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  border-radius: 20px;
  padding: 1.5px 8px;
  margin-right: 10px;
  letter-spacing: 0.2px;
}

.task-bar-trck {
  width: 100%;
  height: 12px;
  background: #E1E1E1;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 12px;
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.06);
}

.t-fill-green {
  height: 100%;
  background: #246D21;
  border-radius: 20px;
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.task-foot {
  color: #8F9097;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.1px;
}

.ptc-col2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.lbl-compl {
  font-size: 10px;
  background: #EFF9F0;
  color: #158E38;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #CEE7D2;
}

.lbl-bignm {
  font-size: 26px;
  font-weight: 900;
  color: #B31718;
  line-height: 1;
  padding-top: 14px;
}

@media screen and (max-width: 1400px) {
  .panels-grid {
    grid-template-columns: 1fr 350px;
  }
  .map-inner-canvas-combo {
    min-height: 400px;
  }
  .don-headers-ctrs {
    gap: 10px;
  }
  .stats-part {
    width: 280px;
  }
  .sel-rht-box {
    padding-left: 5px;
  }
  .map-dropdown {
    padding: 7px;
  }
}

@media screen and (max-width: 1100px) {
  .header-middle-txt {
    position: relative;
    font-size: 16px;
    left: 0;
    transform: none;
  }
  .panels-grid {
    grid-template-columns: 1fr;
  }
  .split-view-body {
    flex-direction: column;
  }
  .stats-part {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #DFDFDF;
    padding-bottom: 10px;
  }
  .unify-pads-l {
    padding: 0;
    padding-top: 15px;
  }
  .stat-card,
  .stat-card-clean {
    margin: 0 10px 10px;
  }
  .mb-20 {
    margin-bottom: 0;
  }
  .map-inner-canvas-combo {
    min-height: 480px;
  }
  .custom-rht-bd {
    margin-top: 20px;
  }
}

@media screen and (max-width: 760px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 10px;
  }
  .l-t-top-grp {
    border-right: 1.5px solid var(--border-gry);
    border-bottom-left-radius: 8px;
  }
  .l-t-bot-grp {
    position: relative;
    transform: none;
    bottom: 0;
    left: 0;
    padding-top: 10px;
    margin: 0;
  }
  .filter-row {
    flex-wrap: wrap;
  }
  .status-grid-tiny {
    flex-direction: column;
  }
  .don-headers-ctrs {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .radial-dnut-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }
  .dpor {
    margin-left: 15px;
  }
  .map-white-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }
  .sel-rht-box {
    padding: 0;
  }
  .map-dropdown {
    max-width: none;
  }
  .modal-box {
    max-height: 90vh;
  }
  .modal-red-hdr {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    position: relative;
    gap: 10px;
  }
  .modal-cls {
    position: absolute;
    right: 12px;
    top: 12px;
    margin: 0;
  }
  .hdr-right-info {
    align-items: center;
  }
  .modal-h-sub {
    display: none;
  }
  .top-date-plack {
    flex-direction: column;
    font-size: 14px;
    text-align: center;
    gap: 6px;
    padding: 15px 10px;
  }
  .top-date-plack span {
    display: none;
  }
  .tag-concluido {
    margin-left: 0;
    margin-top: 5px;
    padding: 5px 16px;
  }
  .status-top-trio {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 15px 0;
  }
  .stt-box {
    padding: 12px 2px;
  }
  .bx-vl {
    font-size: 15.5px;
  }
  .bx-nm {
    font-size: 8.5px;
    margin-top: 4px;
  }
  .progress-task-card {
    grid-template-columns: 1fr;
    position: relative;
    padding: 15px;
    padding-bottom: 50px;
  }
  .ptc-col2 {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: auto;
  }
  .lbl-compl {
    display: none;
  }
  .lbl-bignm {
    padding: 0;
  }
}

.mbb-0 {
  margin-bottom: 12px !important;
}

.stat-card {
  display: flex;
  align-items: center;
  border: 1px solid #DFDFDF;
  margin: 0 18px 14px;
  border-radius: var(--rad-sm);
  padding: 14px 16px;
  position: relative;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.015);
}

.m-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.m-label-n {
  font-size: 11.5px;
  font-weight: 600;
  color: #575757;
}

.m-pct {
  color: var(--primary-red);
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}

.m-val {
  font-size: 20px;
  font-weight: 900;
  color: #1C1F25;
  text-align: right;
}

.hollow-red-ring {
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.5px solid #ECADAD;
  background: #FFFBFB;
  flex-shrink: 0;
  color: #DB2B2B;
  box-shadow: 0 1px 2px rgba(255, 0, 0, 0.02);
}

.hollow-red-ring svg {
  width: 23px;
  height: 23px;
}

select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

select::-ms-expand {
  display: none !important;
}

.ui-select,
.map-dropdown {
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888B92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px auto;
}

.filter-row {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}

.flex-top {
  align-items: flex-start;
}

.flex-bottom {
  align-items: flex-end;
}

.gap-col {
  gap: 10px;
}

.fixed-f3 {
  flex: 1 1 33%;
  min-width: 0;
}

.custom-w1 {
  flex: 1.9;
  min-width: 0;
}

.custom-w2 {
  flex: 1.1;
  min-width: 0;
}

.input-grp {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.input-grp label {
  font-size: 9px;
  font-weight: 800;
  color: #494E5A;
  text-transform: uppercase;
  margin-bottom: 5px;
  letter-spacing: 0.1px;
}

.ui-select {
  width: 100%;
  border: 1px solid #D5DAE1;
  border-radius: 4px;
  padding: 7px 30px 7px 10px;
  color: #22262B;
  font-family: inherit;
  font-size: 11px;
  outline: none;
  font-weight: 500;
  text-overflow: ellipsis;
}

.btn-outlined {
  flex: 0 0 65px;
  height: 31.5px;
  background: #fff;
  border: 1px solid #CFD3D9;
  border-radius: 4px;
  color: #5D6068;
  font-weight: 600;
  cursor: pointer;
}

.btn-outlined:hover {
  background: #F7F8FA;
}

.status-grid-tiny {
  display: flex;
  gap: 8px;
}

.tny-grn {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #EEFCF1;
  border: 1px solid #DCEDDF;
  padding: 10px 0;
  border-radius: 4px;
  font-size: 11px;
  color: #4EAD68;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.01);
}

.tny-grn .tk {
  display: flex;
  margin-bottom: 2px;
}

.tny-grn .tk svg {
  color: #2EB460;
}

.tk-nr {
  font-size: 18px;
  color: #219A4B;
  font-weight: 900;
  margin-top: -2px;
}

.radial-dnut-container {
  padding: 5px 0 10px;
  margin-top: 5px;
}

.don-headers-ctrs {
  display: flex;
  align-items: flex-end;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 25px;
  padding: 0 8px;
}

.dhd {
  font-size: 11.5px;
  font-weight: 600;
  color: #595D69;
}

.dnr {
  font-size: 14px;
  font-weight: 900;
  color: #1C2025;
}

.donut-wrapper-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.canvas-ctr {
  width: 85px;
  height: 85px;
  padding: 0;
  flex-shrink: 0;
}

#jneDoughnut {
  max-width: 85px !important;
  max-height: 85px !important;
  transform: scale(1.1);
}

.lgnd-lisst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0;
  width: 65%;
}

.lgnd-lisst li {
  display: flex;
  align-items: center;
}

.dt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
}

.grn-dt {
  background: #14BC94;
}

.red-dt {
  background: #ED3F4E;
}

.dtxt {
  font-size: 11.5px;
  color: #3A4048;
  font-weight: 600;
}

.dpor {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
}

.tg-gn {
  color: #04B086;
  letter-spacing: -0.2px;
  font-weight: 500;
}

.tg-rd {
  color: #DA343F;
}

.timeline-container {
  background: #FFFFFF;
  border: 1px solid var(--border-gry);
  border-radius: var(--rad-big);
  margin-bottom: 20px;
}

.timeline-header-pad h2 {
  margin: 0;
  font-size: 13px;
}

.j-timeline-body {
  padding: 40px 10px 15px 10px;
  overflow-x: auto;
}

.j-timeline-body::-webkit-scrollbar {
  height: 12px;
}

.j-timeline-body::-webkit-scrollbar-track {
  background: #EEF0F2;
  border-radius: 20px;
  border: 3px solid transparent;
  margin: 0 10px;
}

.j-timeline-body::-webkit-scrollbar-thumb {
  background: #B4B7BD;
  border-radius: 20px;
}

.j-timeline-body::-webkit-scrollbar-thumb:hover {
  background: #8E9298;
}

.j-timeline-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 900px;
  padding-bottom: 25px;
}

#div-personeros {
  margin-top: 12px;
  margin-bottom: 12px;
}

.personero-list-slim {
  margin-bottom: 10px;
}

@media screen and (max-width: 800px) {
  .logotipo {
    width: 100% !important;
    max-width: 550px;
  }
  .header-right {
    font-size: 14px;
  }
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .fixed-f3,
  .custom-w1,
  .custom-w2 {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .input-grp label {
    margin-bottom: 6px;
    font-size: 10px;
  }
  .filter-row.flex-bottom .btn-outlined {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 42px;
    margin-top: 5px;
  }
  .line-divisor-btm {
    padding-bottom: 20px;
    margin-bottom: 15px;
  }
  #limpiar {
    padding: 12px !important;
  }
  .tk-nr {
    font-size: 14px;
  }
  .tny-grn {
    font-size: 12px;
  }
  .ps-txt,
  .ps-num {
    font-size: 12px;
  }
}

.logotipo {
  width: 150px;
}

.radial-dnut-container {
  padding: 10px 0 20px 0;
  border-bottom: 1.5px solid #F1F1F1;
  margin-bottom: 15px;
  margin-top: 5px;
}

.don-headers-ctrs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 18px;
}

.dhd {
  font-size: 12px;
  font-weight: 700;
  color: #595D69;
}

.dnr {
  font-size: 15px;
  font-weight: 900;
  color: #1C2025;
  margin-bottom: -2px;
}

.donut-wrapper-flex {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.canvas-ctr {
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#jneDoughnut {
  width: 100% !important;
  height: 100% !important;
  max-width: 90px !important;
  max-height: 90px !important;
  transform: none;
}

.lgnd-lisst {
  list-style: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.lgnd-lisst li {
  display: flex;
  align-items: center;
  width: 100%;
}

.dt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.grn-dt {
  background: #00AF9D;
}

.red-dt {
  background: #FF6962;
}

.dtxt {
  font-size: 11.5px;
  color: #494E5A;
  font-weight: 600;
}

.dpor {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.tg-gn {
  color: #00AF9D;
}

.tg-rd {
  color: #FF6962;
}

@media screen and (max-width: 1400px) {
  .panels-grid {
    grid-template-columns: 1fr 350px;
  }
  .map-inner-canvas-combo {
    min-height: 400px;
  }
  .don-headers-ctrs {
    gap: 10px;
  }
  .stats-part {
    width: 280px;
  }
  .sel-rht-box {
    padding-left: 5px;
  }
  .map-dropdown {
    padding: 7px;
  }
}

@media screen and (max-width: 1100px) {
  .header-middle-txt {
    position: relative;
    font-size: 16px;
    left: 0;
    transform: none;
  }
  .panels-grid {
    grid-template-columns: 1fr;
  }
  .split-view-body {
    flex-direction: column;
  }
  .stats-part {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #DFDFDF;
    padding-bottom: 10px;
  }
  .unify-pads-l {
    padding: 0;
    padding-top: 15px;
  }
  .stat-card,
  .stat-card-clean {
    margin: 0 10px 10px;
  }
  .mb-20 {
    margin-bottom: 0;
  }
  .map-inner-canvas-combo {
    min-height: 480px;
  }
  .custom-rht-bd {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    padding-bottom: 20px;
  }
  .header-logo-framed {
    flex-direction: column;
    align-items: center;
  }
  .l-t-top-grp {
    border: none;
    padding: 0;
  }
  .l-t-bot-grp {
    position: static;
    transform: none;
    padding: 0;
  }
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .fixed-f3,
  .custom-w1,
  .custom-w2 {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .input-grp label {
    margin-bottom: 6px;
    font-size: 10px;
  }
  .filter-row.flex-bottom .btn-outlined {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 42px;
    margin-top: 5px;
  }
  .line-divisor-btm {
    padding-bottom: 20px;
    margin-bottom: 15px;
  }
  .status-grid-tiny {
    flex-direction: column;
  }
  .don-headers-ctrs {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .radial-dnut-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }
  .dpor {
    margin-left: 15px;
  }
  .map-white-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }
  .sel-rht-box {
    padding: 0;
  }
  .map-dropdown {
    max-width: none;
  }
}

@media screen and (max-width: 600px) {
  .j-timeline-track {
    min-width: 750px;
  }
  .modal-box {
    max-height: 90vh;
  }
  .modal-red-hdr {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    position: relative;
    gap: 10px;
  }
  .modal-cls {
    position: absolute;
    right: 12px;
    top: 12px;
    margin: 0;
  }
  .hdr-right-info {
    align-items: center;
  }
  .modal-h-sub {
    display: none;
  }
  .top-date-plack {
    flex-direction: column;
    font-size: 14px;
    text-align: center;
    gap: 6px;
    padding: 15px 10px;
  }
  .top-date-plack span {
    display: none;
  }
  .tag-concluido {
    margin-left: 0;
    margin-top: 5px;
    padding: 5px 16px;
  }
  .status-top-trio {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin: 15px 0;
  }
  .stt-box {
    padding: 12px 2px;
  }
  .bx-vl {
    font-size: 18px;
  }
  .bx-nm {
    font-size: 8.5px;
    margin-top: 4px;
  }
  .progress-task-card {
    grid-template-columns: 1fr;
    position: relative;
    padding: 15px;
    padding-bottom: 50px;
  }
  .ptc-col2 {
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    margin-top: 15px;
    flex-flow: row-reverse;
  }
  .lbl-compl {
    display: none;
  }
  .lbl-bignm {
    padding-top: 0;
    font-size: 22px;
    position: absolute;
    bottom: 15px;
    right: 20px;
  }
}

.stat-card-btn {
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  user-select: none;
}
.stat-card-btn:hover {
  border-color: #B11816;
  background: #FFF8F8;
  box-shadow: 0 3px 12px rgba(177,24,22,0.10);
}
.stat-arrow-btn {
  position: absolute;
  right: 14px;
  font-size: 26px;
  font-weight: 300;
  color: #DC2F2E;
  line-height: 1;
  transition: transform .18s, color .18s;
}
.stat-card-btn:hover .stat-arrow-btn {
  transform: translateX(3px);
}

.stat-card-btn {
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  user-select: none;
}
.stat-card-btn:hover {
  border-color: #B11816;
  background: #FFF8F8;
  box-shadow: 0 3px 12px rgba(177,24,22,0.10);
}
.stat-arrow-btn {
  position: absolute;
  right: 14px;
  font-size: 26px;
  font-weight: 300;
  color: #DC2F2E;
  line-height: 1;
  transition: transform .18s, color .18s;
}
.stat-card-btn:hover .stat-arrow-btn {
  transform: translateX(3px);
}

.st-val, .m-val, .tk-nr, .dnr { transition: opacity .3s ease; }

#div-personeros, #jornaResultado { transition: opacity .25s ease; }

*, *::before, *::after {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}


button, select, input, .btn-outlined, .ui-select, .map-dropdown {
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s, opacity .2s;
}
button:active { transform: scale(.97); }


.stat-card        { transition: border-color .22s, background .22s, box-shadow .22s; }
.stat-card-btn    { transition: border-color .22s, background .22s, box-shadow .22s, transform .15s; }
.stat-card-btn:active { transform: scale(.98); }
.stat-arrow-btn   { transition: transform .22s, color .22s; }

.st-val, .m-val, .tk-nr, .dnr, .st-sub, .m-pct {
  transition: opacity .3s ease;
}

.j-node   { transition: transform .2s; }
.j-node:hover { transform: translateY(-3px); }
.j-circle { transition: border .25s, background .25s, box-shadow .25s, transform .2s; }
.j-pill   { transition: background .25s, color .2s; }
.j-line   { transition: border-color .3s, border-style .3s; }

.modal-backdrop {
  transition: opacity .25s ease;
}
.modal-box {
  transition: transform .28s cubic-bezier(.34, 1.2, .64, 1), opacity .25s ease;
}
.modal-backdrop:not(.modal-show-layer) .modal-box {
  transform: scale(.95);
  opacity: 0;
}
.modal-show-layer .modal-box {
  transform: scale(1);
  opacity: 1;
}

.task-bar-trck > div,
.t-fill-green {
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.canvas-ctr { transition: opacity .3s ease; }

#div-personeros, #jornaResultado, .status-grid-tiny,
.radial-dnut-container, .sub-block-wrap {
  transition: opacity .25s ease;
}


.ui-select:disabled { opacity: .45; transition: opacity .2s; }
.ui-select:focus    { border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(177,24,22,.1); }

.input-grp:focus-within label {
  color: var(--primary-red);
  transition: color .2s;
}

.custom-bubble-proportional {
  transition: transform .2s, box-shadow .2s;
}
.custom-bubble-proportional:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(177,24,22,.35);
}

.personero-list-slim li {
  transition: background .18s;
  border-radius: 4px;
  padding-left: 4px;
}
.personero-list-slim li:hover { background: #fdf5f5; }

.t-row {
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.t-row:hover {
  border-color: #e0e0e0;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  transform: translateX(2px);
}

.badge { transition: background .2s, color .2s, border-color .2s; }

.card-column { transition: box-shadow .25s; }

html { scroll-behavior: smooth; }

.panels-grid, .split-view-body, .stats-part, .map-part,
.filter-row, .status-grid-tiny, .jornada-filtros {
  transition: grid-template-columns .3s ease, flex-direction .3s ease;
}

@keyframes v2shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.v2-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: v2shimmer 1.4s infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.tl-fechas{
  display: none;
}

.width-full{
  width: 100%;
}

.j-node-placeholder {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.j-circle-locked {
  border: 1px dashed #C3C7CF !important;
  background: #F7F8FA !important;
}

.j-node-placeholder .j-num {
  color: #B0B3B8 !important;
}

.j-node-placeholder .j-pill {
  display: none !important;
}

.progress-task-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.ptc-row-main {
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: center;
  width: 100%;
}

.acordeon-wrap {
  margin-top: 10px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  width: 100%;
}

.acordeon-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-red);
  font-family: 'Inter', sans-serif;
}

.acordeon-btn:hover { opacity: .8; }

.acrd-arrow {
  font-size: 14px;
  transition: transform .2s;
}

.acordeon-lista {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
}

.acordeon-lista li {
  font-size: 11px;
  color: #2E323A;
  padding: 4px 6px;
  border-bottom: 1px solid #f7f7f7;
  font-weight: 500;
}

.acordeon-lista li:last-child { border-bottom: none; }


.leaflet-bottom.leaflet-left .leaflet-control-zoom {
    margin-bottom: 55px;
    margin-left: 10px;
}

#btn-mapa-reset:hover{
    background:#f4f4f4;
}

#btn-mapa-reset svg{
    width:18px;
    height:18px;
    fill:none;
    stroke: rgb(46, 45, 45);
    stroke-width:2.5;  
    stroke-linecap:round;
    stroke-linejoin:round;
}

#btn-mapa-reset{
 
    border-bottom:1px solid #ccc;
    border-radius:0;

    position:absolute;
    bottom: 22px !important;
    left:12px;
    z-index:1000;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #bdbdbd !important;
    border-radius:0px !important;
    cursor:pointer;
    box-shadow:0 1px 5px rgba(0,0,0,0.4) !important;


}


.leaflet-touch .leaflet-bar a {
    width: 34px !important;
    height: 30px  !important;
    line-height: 30px  !important;
}

.j-circle {
  position: relative;
  z-index: 2;
}
.j-line {
  z-index: 1;
}



.j-node {
  isolation: isolate !important;
}
.j-circle {
  position: relative !important;
  z-index: 2;
}
.j-line {
  z-index: 0 !important;
}