/* LAYOUT */

#map {
    position: fixed;
    height: calc(100vh - 25px);
    padding-top: -20px;
    margin-top: 35px;
    z-index: 1000;
}

#map .maplibregl-canvas {
    cursor: pointer;
}

#leftbar {
    position: fixed;
    height: calc(100vh - 25px);
    width: 225px;
    margin-top: 30px;
    z-index: 1500;
}

#rightbar {
    position: fixed;
    padding-left: calc(100vw - 218px);
    height: calc(100vh - 25px);
    width: 225px;
    margin-top: 30px;
    z-index: 500;
}

.contentLeft {
    padding-left: 5px;
    padding-right: 5px;
}

.contentRight {
    padding-right: 4px;
}

.mapWidthBoth{
    width: calc(100% - 451px);
    margin-left: 225px;
}

.mapWidthLeft{
    width: calc(100% - 226px);
    margin-left: 225px;
}

.mapWidthRight{
    width: calc(100% - 226px);
    margin-left: 0px;
}

.mapWidthNone{
    width: 100%;
    margin-left: 0px;
}

#toggleLeftbar {
    position: absolute;
    z-index: 1200;
}

#toggleRightbar {
    position: absolute;
    z-index: 1200;
}

.toggleLeftbarShow {
    margin-left: 138px;
    margin-top: 37px;
}

.toggleLeftbarHide {
    margin-left: -86px;
    margin-top: 37px;
}

.toggleRightbarShow {
    margin-left: calc(100% - 330px);
    margin-top: 37px;
}

.toggleRightbarHide {
    margin-left: calc(100% - 105px);
    margin-top: 37px;
}

p {
    color: #ffffff;
}

.sideTitle {
    font: bold 16px 'SourceSans3';
    color: #ffffff;
    padding-left: 5px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.slidecontainer {
    padding-bottom: 5px;
    padding-top: 5px;
}

.slider {
    -webkit-appearance: none;  
    appearance: none;
    width: 185px; 
    height: 9px; 
    border-radius: 5px;
    margin-left: 25px;
    background: #eae8ff; 
    outline: none; 
    opacity: 0.9; 
    transition: 0.2s;
}

.slider:hover {
    opacity: 1; 
}


.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 9px; 
    aspect-ratio: 1/1;
    background: #5053af;
}

.slider::-moz-range-thumb {
    height: 9px; 
    aspect-ratio: 1/1;
    background: #5053af;
}

.slider::-ms-thumb {
    height: 9px; 
    aspect-ratio: 1/1;
    background: #5053af;
}


/* LEGEND */

.maplibregl-ctrl-legend {
    background: white;
    padding: 15px 10px 10px 10px;
    border-radius: 4px;
    max-width: 300px;
    font-family: "SourceSans3";
    column-count: 1;
    translate: 7px 7px;
}

.legend-header h3 {
    margin: -8px 0 10px 0;
    font-size: 14px;
    color: #2c2929;
}

.legend-item {
    display: flex;
    align-items: center;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border: 1px solid #ffffff;
    border-radius: 2px;
}

.legend-label {
    font-size: 12px;
    color: #000000;
}

#toggleLegend {
    position: absolute;
    z-index: 1200;
    margin-top: calc(100vh - 5px);
}

.legendWithLeft {
    margin-left: 138px;
}

.legendWithoutLeft {
    margin-left: -86px;
}


/* LEFTBAR */

/* UPPER CONTAINER */

#mapName {
    margin-top: -10px;
    margin-bottom: 30px;
    margin-left: 5px;
    margin-right: 5px;
    padding-right: 30px;
}

.upperContainer{
    padding-left: 20px;
    margin-top: -15px;
    column-count: 2;  
}

#shortcutHover {
    border-radius: 100px;
    margin-top: 4px;
    margin-left: -12px;
    height: 21px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff4f4f;
}

#shortcutInfo {
    margin-top: 22px;
    font: normal 13px 'SourceSans3';
    width: 50vw;
    display: none;
    position: absolute;
    background-color: #ffa7a7;
    color: #1c211c; 
    z-index: 1000;
    padding: 10px;
}

#shortcutHover:hover + #shortcutInfo {
    display: block;
}

.tabContainer{
    margin-left: -70px;
    margin-right: -10px;
    padding-top: -15px;
    margin-top: 15px;
    margin-bottom: 15px;
    column-count: 3;
}

.tabLinks{
    font: normal 13px 'SourceSans3';
    background-color: #171960;
    color: #ffffff;
    transition: 0.3s;    
    border: none;
    text-align: center;
    border-radius: 10%;
    margin-left: -18px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.tabLinks:hover{
    background-color: #9389ff;
}

/* MAP OPTIONS */

#mapOptions {
    border-top: 2px solid #5053af;
    font: normal 13px 'SourceSans3';
    color: white;
    height: 120px;
    padding-top: 5px;
} 


#adminType {
    column-count: 1;
    width: 45%;
}

#selectType {
    width: 45%;
    padding-left: 50%;
    margin-top: -58px;
}

.borderMode {
    margin-left: 0px;
}

.borderButton {
    margin-top: 0px;
    margin-left: -2px;
    height: 14px;
    aspect-ratio: 1/1;
    margin-right: 1px;
}

.adminBorder {
    margin-top: 7px;
    height: 14px;
    aspect-ratio: 1/1;
}

.mapMode {
    margin-top: 1.75px;
    height: 14px;
    aspect-ratio: 1/1;
    /* appearance: none; */
}


.adminTypeLabel {
    margin-left: 40px;
    margin-top: -22px;
    margin-bottom: 0px;
    font: normal 13px 'SourceSans3';
    color: white;
    height: 14px;
    aspect-ratio: 1/1;
}

.selectTypeLabel {
    margin-left: 23px;
    margin-top: -22.5px;
    margin-bottom: 0px;
    font: normal 13px 'SourceSans3';
    color: white;
} 


/* LAYER OPTIONS */

.layerOptions {
    padding-top: 5px;
    height: 110px;
    border-top: 2px solid #5053af;
    font: normal 13px 'SourceSans3';
}

#layerOpacity {
    margin-bottom: 12px;
}

#dataLayerCheck, #regionLayerCheck {
    position: absolute;
    height: 15px;
    transition: 0.3s;
    margin-top: 6.5px;
}

#dataLayerCheck:hover, #regionLayerCheck:hover {
    background-color: #9389ff;
}

#layerLabel, #tableLayerLabel {
    font: normal 13px 'SourceSans3';
    color: white;
    background-color: #5053af;
    border-radius: 2px;
    border: none;
    width: 166px;
    height: 30px;
    transition: 0.3s;   
    margin-left: 6px; 
    margin-right: 6px; 
}

 #tableLayerLabel {
    /* position: absolute; */
    margin-top: 0px;
    margin-left: 29px; 
 }

#layerLabel:hover, #tableLayerLabel:hover {
    background-color: #9389ff;
}

#layerSelection, #tableLayerSelection {
    margin-left: 6px;
    position: absolute;
    background-color: #27272b;
    box-shadow: 0px 0px 16px 0px #ffffff47;
    z-index: 1000;
    overflow-y: scroll;
    font: normal 13px 'SourceSans3';
}

 #tableLayerSelection {
    /* margin-top: 30px; */
    margin-left: 29px; 
 }

 #tableSubGroup {
    margin-left: 4px;
    margin-right: -20px;
 }

#layerSelection::-webkit-scrollbar, #tableLayerSelection::-webkit-scrollbar {
    display: none;
}

#layerSelection a, #tableLayerSelection a {
    padding: 2px, 0px, 2px, 10px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    cursor: pointer;
}

#layerSelection a, #tableLayerSelection a {
    width: 156px;
}


#layerSelection a:hover, #layerSelection a:active, #tableLayerSelection a:hover, #tableLayerSelection a:active {
    background-color: #9389ff;
}

#layerButton {
    position: fixed;
    font: normal 13px 'SourceSans3';
    border-radius: 2px;
    border: none;
    width: 30px;
    height: 30px;
    transition: 0.3s;
}

#layerButton:hover {
    background-color: #9389ff;
}

.darken {
    color: rgb(119, 119, 119);
    background-color: #090a2f;
}

.lighten {
    color: white;
    background-color: #5053af;
}

#groupSelection {
    color: white;
    margin-left: 40px;
    position: absolute;
    box-shadow: 0px 0px 16px 0px #ffffff47;
    z-index: 1000;
    overflow-y: scroll;
    max-height: 300px;
    background-color: #27272b;
}

.selectedSelection {
    background-color: #5053af;
}

#groupSelection::-webkit-scrollbar {
    display: none;
}

#groupSelection a {
    width: 158px;
    padding: 2px, 0px, 2px, 10px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    cursor: pointer;
}

#groupSelection a:hover, #groupSelection a:active {
    background-color: #9389ff;
}

.hidden {
    display: none;
}

/* REGIONS */

#regions {
    padding-top: 5px;
    border-top: 2px solid #5053af;
    font: normal 13px 'SourceSans3';
    /* height: calc(100vh - 500px); */
    height: 10px;
}

#regionDiv {
    height: calc(100vh - 390px);
    overflow-x: hidden;
    overflow-y: scroll;
}

#regionDiv::-webkit-scrollbar {
  display: none;
}

#regionDiv {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.regionInfo {
    display: flex;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

#regionTable {
    border: none; 
    border-collapse: collapse;
}

.regionName {
    font: normal 13px 'SourceSans3';
    color: white;
    width: 105px;
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1;
    margin-top: 0px;
    margin-bottom: 0px;
}

.regionPop {
    font: normal 13px 'SourceSans3';
    color: white;
    width: 62px;
    text-align: right;
    white-space: nowrap;
    direction: rtl;
    margin-top:  -4px;
    margin-bottom: 3px;
    margin-right: 3px;
    height: 13px;
}

.regionLock {
    margin-left: 3px;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #d1cdff;
    transition: all 0.2s ease;
}

.regionLock:hover {
    color: #9389ff;
}

.regionLock.locked {
    color: #5053af;
}

.regionLock.locked:hover {
    color: #9389ff;
}

.regionLock.locked i::before {
    content: "\f023"; /* fa-lock */
}

.regionLock:not(.locked) i::before {
    content: "\f09c"; /* fa-unlock */
}
.regionSelect {
    appearance: none;
    border: 2px solid #27272b;
    border-radius: 100%;
    background-color: white;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 3px;
    height: 15px;
    aspect-ratio: 1/1;
    transition: 0.3s;
    position: relative;
}

.selectedRegion {
    background-color: #171960;    
    transition: .2s;
}

.selectedButton {
    border: 2px solid #ffffff;
}

/* RIGHTBAR */


/* DISTRICT INFORMATION */

#distTitle {
    margin-top: 10px;
    margin-bottom: -10px;
}

#districtTable {
    padding-bottom: 20px;
}

.districtName {
    font: normal 13px 'SourceSans3';
    color: white;
    width: 110px;
    flex-grow: 1;
    margin-bottom: -15px;
}

.districtNumber {
    font: normal 13px 'SourceSans3';
    color: white;
    width: 90px;
    text-align: right;
    white-space: nowrap;
    direction: rtl;
    flex-grow: 1;
    margin-bottom: -15px;
}


/* SIDE INFO CONTENT */

#regionStats {
    border-top: 2px solid #5053af;
    width: 220px;
    height: 525px;
    padding-left: 7px;
}

#regionStatTitle {
    margin-top: 10px;
    margin-bottom: 10px;
}

.rightSelection, .statSelection {
    font: normal 13px 'SourceSans3';
    color: white;
    background-color: #5053af;
    border-radius: 2px;
    border: none;
    position: absolute;
    margin-left: 190px;
    margin-top: -22px;
    transition: 0.2s;
}

.rightSelection:hover, .statSelection:hover{
    background-color: #9389ff;
}

.group1Name, .group2Name, .group3Name, .group11Name, .group12Name {
    font: normal 13px 'SourceSans3';
    color: white;
    width: 140px;
    flex-grow: 1;
    margin-bottom: -15px;
    white-space: none;
}

.group1Number, .group2Number, .group3Number, .group11Number, .group12Number {
    font: normal 13px 'SourceSans3';
    color: white;
    width: 60px;
    text-align: right;
    white-space: nowrap;
    direction: rtl;
    flex-grow: 1;
    margin-bottom: -15px;
}

#group1Title, #group2Title, #group3Title, #group11Title, #group12Title {
    border-top: 2px solid #5053af;
    padding-top: 5px;
}

#group1Table, #group2Table, #group3Table, #group11Table, #group12Table {
    margin-top: -10px;
    padding-bottom: 20px;
}

/* GROUP CHANGE BUTTON */

#rightDropdown1, #rightDropdown2, #rightDropdown3, #statDropdown11, #statDropdown12 {
    font: normal 13px 'SourceSans3';
    margin-left: 49px;
    position: absolute;
    background-color: #27272b;
    min-width: 140px;
    max-height: 300px;
    box-shadow: 0px 0px 16px 0px #ffffff47;
    z-index: 1000;
    overflow-y: scroll;
}

#rightDropdown1::-webkit-scrollbar, #rightDropdown2::-webkit-scrollbar, #rightDropdown3::-webkit-scrollbar, #statDropdown11::-webkit-scrollbar, #statDropdown12::-webkit-scrollbar {
    display: none;
}

#rightDropdown1 a, #rightDropdown2 a, #rightDropdown3 a, #statDropdown11 a, #statDropdown12 a {
    width: 150px;
    padding: 2px, 0px, 2px, 10px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    cursor: pointer;
}

#rightDropdown1 a:hover, #rightDropdown1 a:active, #rightDropdown2 a:hover, #rightDropdown2 a:active, #rightDropdown3 a:hover, #rightDropdown3 a:active, #statDropdown11 a:hover, #statDropdown11 a:active, #statDropdown12 a:hover, #statDropdown12 a:active {
    background-color: #9389ff;
}


/* SAVE CONTENT */

#saveContent h2 {
    color: #ffffff;
}

#saveContent p {
    font: 14px 'SourceSans3';
}

#grayScreen {
    z-index: 2000;
    /* display: none; */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #00000080;
}

#saveTab {
    font: 12px 'SourceSans3';
    z-index: 2000;
    position: absolute;
    padding: 20px;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: #01001b;
    top: calc(50% - 125px);
    left: calc(50% - 150px);
}

.saveButtons {
    border: none;
    text-align: center;
    font: 12px 'SourceSans3';
    border-radius: 10%;
    margin-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 50px;
    background-color: #171960;
    color: #ffffff;
    transition: 0.3s;
}

.saveButtons:hover {
    background-color: #9389ff;
}

#close {
    margin-top: -25px;
    margin-right: -12px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#close:hover, .close:focus {
    color: #9389ff;
    cursor: pointer;
    transition: 0.3s;
}




/* STAT TABLE */


#statOptions {
    background-color: #01001b;
    width: 225px;
    height: calc(100vh - 122px);
    margin-top: 135px;
    position: absolute;
    z-index: 1600;
    overflow: hidden;
}

#statData {
    background-color: #01001b;
    width: calc(100vw - 228px);
    height: calc(100vh - 23px);
    margin-left: 225px;
    margin-top: 35px;
    position: absolute;
    z-index: 1700;
    overflow: scroll;
    scrollbar-color: #9389ff #27272b;
    scrollbar-width: thin;
}


/* STAT OPTIONS */

#tableSelection{
    padding-bottom: 20px;
}

#groupOption0{
    column-count: 2;
    width: 200px;
    margin-left: 6px;
    padding-bottom: 10px;

}

#groupOption1 {
    column-count: 1;
    width: 200px;
    padding-left: 6px;
    padding-top: 45px;
}

#groupOption2 {
    column-count: 1;
    width: 200px;
    margin-left: 114.5px;
    margin-top: -50px;
}

#groupOption1 div {
    padding-top: 3px;
}

#groupOption2 div {
    padding-top: 3px;
}

.groupButton {
    margin-top: 0px;
    margin-left: -2px;
    height: 14px;
    aspect-ratio: 1/1;
    margin-right: 1px;
}

.groupLabel1 {
    margin-left: 20px;
    margin-top: -26px;
    margin-bottom: 0px;
    font: normal 13px 'SourceSans3';
    height: 14px;
    width: 100px;
    aspect-ratio: 1/1;
}

.groupLabel2 {
    margin-left: 20px;
    margin-top: -26px;
    margin-bottom: 0px;
    font: normal 13px 'SourceSans3';
    height: 14px;
    aspect-ratio: 1/1;
}

.notAvailable {
    color: gray;
}


/* STAT TABLE */

#statTable {
    table-layout: fixed;
    width: auto; 
}

#tableHeader {
    position: sticky;
    left: 0;
    top: 0;
    margin-top: 20px;
    margin-left: 225px;
    z-index: 1800;
}

#blackBackground {
    background-color: rgb(155, 43, 43);
    z-index: 2000;
}

#statTable th {
    z-index: 1700;
    padding: 10px 5px 10px 5px;
    background-color: #0a0b39;
    color: white;
    min-width: 90px;
}

.firstColumn {
    text-align: left;
    font-weight: bold;
    min-width: 150px;
    position: sticky;
    left: 0;
    z-index: 1700;
    padding: 3px 10px 3px 10px;
    background-color: #0a0b39;
}

#statTable td {
    color: white;
    padding: 3px 5px;
}

.bodyColumn {
    text-align: center;
    position: relative;
    z-index: 1600;
}

.grayed {
    background-color: #0a0b39;
}


/* SOURCE TABLE */


#sourceTable .sourceHeader {
    color: white;
    padding: 3px 5px;
    text-align: center;
}

#sourceTable th {
    z-index: 1700;
    padding: 10px 5px 10px 5px;
    background-color: #171960;
    color: white;
}

#source1Header {
    min-width: 150px;
}

#source1HeaderTop {
    text-align: left;
}

.sourceHeaderYear, .sourceHeaderCell, .sourceHeaderStatus, .sourceHeaderLink {
    min-width: 100px;
}

.sourceHeaderNote {
    color: white;
    padding: 3px 5px;
    min-width: 800px;
}

.score10 {
    background-color: #0051ff;
}

.score9 {
    background-color: #00a6ff;
}

.score8 {
    background-color: #00aa66;
}

.score7 {
    background-color: #3eb300;
}

.score6 {
    background-color: #9aae00;
}

.score5 {
    background-color: #c6bf00;
}

.score4 {
    background-color: #ffbb00;
}

.score3 {
    background-color: #b67013;
}

.score2 {
    background-color: #a61313;
}

.score1 {
    background-color: #710013;
}