:root {
	--bg: #fef5b9;
	--box: #fced97;
	--light: #fffbaf;
	--dark: #825a48;
	--body: #251418;
	--alt: #918d61;
}

.switch {
    z-index: 6001; 
    margin-left: 20px;
    margin-right: 0 !important;
    position: relative;  /* fixed; */
  /*   bottom: 1.3vh; 1.3vh; */
 /*    left: 0.7vw;    0.7vw; */
    width: 60px;  /* 5rem; */
    height: 60px;  /* 5rem; */
    background: linear-gradient(165deg,#f6f6f6,#f1f1f1, #e5e5e5);
    box-shadow: 3px 3px 0.7px 0.7px rgba(7, 12, 31, 0.579);
    border-left: 4px solid #fff; border-top: 4px solid #fff;
    border-bottom: 4px solid #c8c8c8; border-right: 4px solid #c8c8c8;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.switch .btn {
    position: relative;
    margin: 0 auto;
    width: 20px; /* 1.5rem; */
    height: 35px; /* 2.5rem; */
    padding-left: 0px;
    border: 1px solid #b6b6b6;
    border-radius: 0.4rem 0.4rem 0.6rem 0.6rem;
    background: linear-gradient(#777, #fff, #777);
    box-shadow: 1px 4px 1px 1px rgba(0, 0, 0, 0.245);
    cursor: pointer !important;
    transition: all 0.6s steps(2);
    z-index: 6002 !important;
}

.switch .btn::before {
    content:'';
    position: absolute;
    top:0; left:0;
    width: 100%;
    height: 85%;
    background: linear-gradient(#777 0.5%, #e6e6e6d8 4%, white 94.5%);
    border-radius: 0.4rem;
}

.off .switch .btn::before {
    top: 15%; 
    background: linear-gradient( #211127 0.5%, #471b5e 4%, #2c1e32 94.5%);
}

#audio {
    display:none;
}

.off .switch .btn { 
    border: 1px solid #000000;
    background: linear-gradient(#28222c, #1a0b23, #23102e);
    box-shadow: 1px -4px 1px 1px rgba(0, 0, 0, 0.249);
}

.off .switch {
    background: linear-gradient(45deg,#302236,#3d2b44, #4a3452);
    box-shadow: 3px 3px 0.7px 0.7px rgba(12, 0, 16, 0.503);
    border-left: 3px solid #914dff; border-top: 3px solid #914dff;
    border-bottom: 3px solid #331241; border-right: 3px solid #331241;
}

.draggable {
    padding: 10px 10px;
    cursor: grab;
    position: absolute;
}

/* 
@media (max-width: 1490px) {
    .switch { 
        display: none !important;
        pointer-events: none !important;
    } 
} */

.off  ::selection { color:black; background-color: #02ea99; }
.off  .greencopy::selection { color:black; background-color: #7700ff; }
.off  .pinkcopy::selection { color:black; background-color: #ff4b75; }
.off .header { background-color:#17101d; box-shadow: none; transition: all 0.5s;}
.off .nav {transition: all 0.5s; background-color:#17101d; box-shadow: none;}
.off nav ul li a{ background-color:#23182d; transition: all 0.5s;} 
.off nav ul li a:hover{ background-color:#b05cff !important; color:#17101d; transition: all 0.5s;} 
.off .nav .nav-list {background-color:#17101d; transition: all 0.5s;}
.off body .background { background-color:#17101d; transition: all 0.5s;}
.off .background { background-color:#17101d; transition: all 0.5s;}
.off .background p { color:white; transition: all 0.5s;}
.off h1, h3, h4 {transition: all 0.5s; color:white;}
.off .toggle-panel h6 {transition: all 0.5s; color:white;}
/* HOMEPAGE */
.off .content p { color:white; transition: all 0.5s;}
.off .content  h2 { color:#d7d7d7; transition: all 0.5s;}
.off .card-logo{ border-radius: 50%; border: 1px solid #00ff88; transition: all 0.5s;}
.off .card-disease { background-color:#23182d; border: 1px solid #00ff88; transition: all 0.5s;}
.off .card-disease:hover { border: 1px solid #85ffb8; box-shadow: 0px 4px 25px 25px #00140b54;} 
.off .custom-card {transition: all 0.5s; background-color:#1c1423;  border-top: 2px solid #b05cff; border-left: 2px solid #b05cff; box-shadow: 4px 4px 0px 0px rgba(14, 0, 27, 0.624);}
.off .card-disease p {color:#f1f1f1; transition: all 0.5s;} 
.off .card-disease .card-title {color:#20a677; transition: all 0.5s;} 
.off .custom-card p {color:#eee; transition: all 0.5s;} 
.off .read-more-button {transition: all 0.5s; color:#20a677; box-shadow: none;} .off .read-more-button:hover { color:white; box-shadow: none;}
.off #Data-source-button { transition: all 0.5s; color:#da5a78; box-shadow: none;} .off #Data-source-button:hover { color:white; box-shadow: none;}
.off .data-card { transition: all 0.5s; background-color:#23182d; border-left: 2px solid #ff4b75; border-top: 2px solid #ff4b75; border-bottom: 0.1px solid #140015af; border-right: 0.1px solid #140015af; box-shadow: 3px 3px 0px 0px #140015af;}  
.off .data-card p { transition: all 0.5s; color:#eee;} 
.off .point {transition: all 0.5s; color:#da5a78;} 
.off .data-card .card-title {transition: all 0.5s; color:white;}
.off .data-card .card-sub-title {transition: all 0.5s; color:white;} .off .data-card p {transition: all 0.5s; color:#f1f1f1;} 
.off .card-develop {transition: all 0.5s; background-color:#23182d; border: 1px solid #00ff88; }
.off .card-develop a {transition: all 0.5s;  border: 1px solid #00ff88; }
.off .social-links {transition: all 0.5s;  border: 1px solid #00ff88; }
.off .profile-name h2 {transition: all 0.5s; color:#4fcaa3; } 
.off .description p {transition: all 0.5s; color:#4fcaa3; } 
.off .footer {transition: all 0.5s; background-color:#17101d; box-shadow: none;}
.off .back-bottom {background-color: #ff4b75; color:#212d2d; box-shadow: 5px 5px 0px #011818;; border: 2px solid #011818;} 
.off .back-bottom a {color: #011818;} 
.off .back-bottom::after {background-color: #17101d; border: 2px solid #ff4b75; color:#ff4b75;}  
.off .back-bottom:hover {background-color: #17101d; color: #ff4b75; border: 2px solid #ff4b75; box-shadow: 0px 0px 0px #0d0613;} 
/* DATASETS */
.off .text-content {transition: all 0.5s; color:white; background-color:#1c1423; border-left: 2px solid #ff4b75; border-top: 2px solid #ff4b75; border-bottom: 0.1px solid #140015af; border-right: 0.1px solid #140015af; box-shadow: 3px 3px 0px 0px #140015af;} 
.off .card-title-data .text-content {transition: all 0.5s; color:white;} 
.off .sidebar {transition: all 0.5s; color:white; background-color:#361632c7;}
.off .card {transition: all 0.5s; color:white; background-color:#23182d;  border-top: 2px solid #b05cff; border-left: 2px solid #b05cff; box-shadow: 4px 4px 0px 0px rgba(14, 0, 27, 0.624);}
.off .card button {transition: all 0.5s; color:#b05cff;} 
.off .card span {transition: all 0.5s; color:white;}
.off .card label {transition: all 0.5s; color:white;}
.off .card table, th, td {border: 1px solid #b05cff; }
.off .card input {color: #fff; }
.card span, a {color: #676767;}
.off .card span, a {color: #fff; background-color:transparent}
.off .paginate_button a {color: #fff !important;} 
.off .card th {transition: all 0.5s; color:#2c2532; background-color:#b05cff;}
.off .odd tr {transition: all 0.5s;  background-color:#23182d; color: white;}
.off .even td {transition: all 0.5s; background-color:#23182d; color:white;}
.off .card a {transition: all 0.5s; color:white;}
/* Table 1 */
.off .card #mutationTable td {transition: all 0.5s;  background-color:#17101d; color:white;}
.off .card #mutationTable_info {transition: all 0.5s; color:white;}
/* Table 2 */
.off .card #overlapTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #overlapTable_info {transition: all 0.5s; color:white;}
/* Table 3 */
.off .card #diseaseTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #diseaseTable_info {transition: all 0.5s; color:white;}
/* Table 4 */
.off .card #clinicalTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #clinicalTable_info {transition: all 0.5s; color:white;}
/* Table 5 */
.off .card #parkTotalTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #parkTotalTable_info {transition: all 0.5s; color:white;}
/* Table 6 */
.off .card #locusTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #locusTable_info {transition: all 0.5s; color:white;}
/* Table 7 */
.off .card #indelTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #indelTable_info {transition: all 0.5s; color:white;}

.off .card #indelControlTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #indelControlTable_info {transition: all 0.5s; color:white;}
/* Table 8 */
.off .card #indelCaseTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #indelCaseTable_info {transition: all 0.5s; color:white;}
/* Table 9 */
.off .card #hanMutFormsTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #hanMutFormsTable_info {transition: all 0.5s; color:white;}
/* Table 10 */
.off .card #hanTransTransTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #hanTransTransTable_info {transition: all 0.5s; color:white;}
/* Table 11 */
.off .card #hanClinTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #hanClinTable_info {transition: all 0.5s; color:white;}
/* Table 12 */
.off .card #hanDemoTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #hanDemoTable_info {transition: all 0.5s; color:white;}
/* Table 13 */
.off .card #hanDistribTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #hanDistribTable_info {transition: all 0.5s; color:white;}
/* Table 14 */
.off .card #hanMutTable td {transition: all 0.5s;  background-color:#17101d; color:white;} 
.off .card #hanMutTable_info {transition: all 0.5s; color:white;}
/* NETWORKS */
.off .flex-container {transition: all 0.5s;  background-color:#17101d;}

.off #network { background-color:#100915; border:3px solid #00e48d;}
 /* .off #network text { fill:white;} */ 
 .off #network line { stroke: rgb(179, 177, 184) !important;}
.off #network circle { stroke: rgb(86, 31, 236) !important;} 
.off  #network svg { filter:invert(100%) hue-rotate(167deg) contrast(110%) saturate(390%); }
.off .starter-template {transition: all 0.5s;  background-color:#23182d; border-top:2px solid #00e48d; border-left:2px solid #00e48d; border-bottom:1px solid #10001e; border-right:1px solid #10001e; box-shadow: 3px 3px 0px 0px rgba(14, 0, 27, 0.624);}
.off .starter-template button {transition: all 0.5s; color:#011818;  background-color:#00e48d;}
.off .starter-template button:hover {transition: all 0.5s; color:white;  background-color:transparent;}
.off .btn2 {background: linear-gradient(60deg, #00ffff, rgb(147, 89, 255), #ff4b75); z-index: 50;}
.off #saveButton { color:#19141e; }  
.off .starter-template input {transition: all 0.5s; background-color:#17101d; color:white;}
.off .slider {transition: all 0.5s; background-color:#ff4b75; }
.off input:checked + .slider {transition: all 0.5s; background-color:#b05dff; }
.off .slider:before {transition: all 0.5s; background-color:#23182d;}
.off input[type="range"]::-moz-range-thumb {transition: all 0.5s; background-color:#ff4b75 !important; border: 1px solid #ff4b75;}
.off input[type="range"]::-moz-range-track {transition: all 0.5s; background-color:#17101d !important; border: 1px solid #ff4b75;}
.off input[type="range"]::-webkit-slider-thumb {transition: all 0.5s; background-color:#ff4b75 !important; border: 1px solid #ff4b75;}
.off input[type="range"]::-webkit-slider-runnable-track {transition: all 0.5s; background-color:#17101d !important; border: 1px solid #ff4b75;}
/* DASHBOARDS */
.off  #menu-boot { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off #projection-buttons h4 {transition: all 0.5s; color:white; } 
.off #descriptions p, h3 {transition: all 0.5s; color:white; } 
.off #descriptions h3 {transition: all 0.5s; color:white; } 
.off #rotation-panel  h4, h6, p {transition: all 0.5s; color:white;}  
.off #rotation-panel  label {transition: all 0.5s; color:white;}  
.off #rotation-preset-panel h4, h6, p {transition: all 0.5s; color:white;} 
.off #rotation-preset-panel text {transition: all 0.5s; color:white;}               
.off #parallels-panel h4, h6, p {transition: all 0.5s; color:white; }  
.off #parallels-panel label {transition: all 0.5s; color:white; }               

.off  #containerGC1 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerGC2 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerGC3 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerGC4 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerGC5 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerGC6 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerGC7 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK1 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK2 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK3 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK4 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK5 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK6 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK7 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK8 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK9 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK10 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK11 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK12 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK13 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK14 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerPARK15 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN1 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN2 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN3 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN4 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN5 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN6 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN7 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN8 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #containerHAN9 svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off  #cardUpset1 { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(380%); }
.off  #cardUpset2 { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(380%); }
.off  #container-map svg { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off .color-legend {transition: all 0.5s; background: linear-gradient(90deg, #00ff6a, #a555ff);}
.off .global-map button {transition: all 0.5s; color:white; border: 1px solid #a555ff; }
.off .main-map a {transition: all 0.5s; color:#00e48d !important; }
/* MTDNA-MAPS */
.off .viewer-help {transition: all 0.5s; color:white; background-color:#23182d; border: 1px solid #00e48d;}
.off .cgv-wrapper canvas { filter:invert(100%) hue-rotate(180deg) contrast(100%) saturate(280%); }
.off summary {transition: all 0.5s; color: #00e48d; }
.off summary:hover {transition: all 0.5s; color:white; }
.off #example-tables td {transition: all 0.5s; color:white; background-color:#17101d; }
.off #example-tables th {transition: all 0.5s; color:#17101d; background-color:#a555ff; }
.off #example-tables table  {transition: all 0.5s; border-radius: 5px; border: 1px solid #a555ff; background-color:#17101d; }
.off #example-tables a {transition: all 0.5s; color:#00e48d;}
.off #my-viewer div {transition: all 0.5s; color:gray; }
.off .cgv-btn { filter: invert(40%) hue-rotate(0deg) brightness(190%) sepia(500%) saturate(200%); }
.off .cgv-btn:hover { filter:  invert(100%); }
/* MY-NETWORK */
.off .class {transition: all 0.5s;  background-color:#17101d;}
.off .contentmy {transition: all 0.5s;  background-color:#110e13; box-shadow: #ff00d034 0px 8px 24px;}
.off .contentmy b {transition: all 0.5s; color:#ff4b75;}
.off .contentmy a:hover {transition: all 0.5s; color:white;}
.off .dropzone-box {transition: all 0.5s;  background-color:#110e13; box-shadow: #ff00d034 0px 8px 24px;}
.off .dropzone-box h2 {transition: all 0.5s; color:white;}
.off .dropzone-box .dropzone-area:hover {transition: all 0.5s;  background-color:#1c161f;}