body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(94, 94, 94);
    height: 100vh;
    height: 100dvh; 
    width: 100%; 
    display: grid;
    grid-template-rows: repeat(59, 1fr);
    grid-template-columns: repeat(99, 1fr);
    min-height: 300px;
    min-width: 1000px;
    overflow: hidden; 
    user-select: none;

}

label {
    user-select: none;
}

.popup_container {
    grid-row-start: 4;
    grid-row-end: 60;
    grid-column-start: 1;
    grid-column-end: 100;
    gap: 0;   
}

.topbar {
    display: grid;
    z-index: 2800;
    grid-template-rows: repeat(9, 1fr);
    grid-template-columns: repeat(99, 1fr);
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 100;
    background-color: rgb(43, 43, 43);
    gap: 0;   
    min-height: 30px;
}

.stratmod_logga{
    z-index: 3000;
    box-sizing: border-box;
    display: flex;
    font-size: clamp(20px, 1.8vw, 32px);
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    cursor: default; 
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 1;
    grid-column-end: 10;
}

.start_container{
    display: grid;
    position: relative;
    justify-content: center;
    grid-row-start: 1;
    grid-row-end: 60;
    background-color: rgb(43, 43, 43);
    grid-column-start: 1;
    grid-column-end: 100;
    grid-template-rows: repeat(59, 1fr);
    grid-template-columns: repeat(99, 1fr);
}

.session_container{
    z-index: 6000;
}

.session_container h1 {
    grid-row-start: 12;
    grid-row-end: 27;
    grid-column-start: 40;
    grid-column-end: 60;
    font-size: clamp(48px, 3vw, 64px);
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.dot-loader {
    grid-row-start: 20;
    grid-row-end: 30;
    grid-column-start: 42;
    grid-column-end: 58;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.dot-loader span {
    width: 20px;
    height: 20px;
    margin: .5rem;
    border-radius: 50%;
    background: rgb(94,94,94);
    transform:scale(0.5) translateY(0px);
    animation: scaling 2.5s ease-in-out infinite;
}

@keyframes scaling{
  0%, 100%{
    transform:scale(0.5) translateY(0px);
    background-color: rgb(94,94,94);
  }
  50%{
    transform:scale(1) translateY(-12px);
    background-color: rgb(251,251,251);
  }
}

.dot-loader span:nth-child(1) {
  animation-delay: 0s;
}
.dot-loader span:nth-child(2) {
  animation-delay: 0.12s;
}
.dot-loader span:nth-child(3) {
  animation-delay: 0.24s;
}
.dot-loader span:nth-child(4) {
  animation-delay: 0.36s;
}
.dot-loader span:nth-child(5) {
  animation-delay: 0.48s;
}


.inlogg_container{
    z-index: 5000;
}

.inlogg_container h1 {
    grid-row-start: 12;
    grid-row-end: 27;
    grid-column-start: 40;
    grid-column-end: 60;
    font-size: clamp(48px, 3vw, 64px);
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.inlogg_rubrik {
    grid-row-start: 24;
    grid-row-end: 26;
    grid-column-start: 40;
    grid-column-end: 60;
    font-size: clamp(20px, 1.5vw, 25px);
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    text-align: center;
}

.inlogg_text_container {
    grid-row-start: 28;
    grid-row-end: 30;
    grid-column-start: 40;
    grid-column-end: 60;

    display: flex;
    align-items: center;
    position: relative;
}
.inlogg_text {
    flex: 1;
    font-family: Arial, sans-serif;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.inlogg_password_container {
    grid-row-start: 33;
    grid-row-end: 35;
    grid-column-start: 40;
    grid-column-end: 60;

    display: flex;
    align-items: center;
    position: relative;
}

.inlogg_password {
    flex: 1;
    font-family: Arial, sans-serif;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.toggle-password:hover {

    transform: translateY(-50%) scale(1.25);
}

.toggle-password:active {
    transform: translateY(-50%) scale(1.1); /* trycks ner */
    /*background-color: #c0c0c0; /* lite mörkare vid klick */
}

.toggle-password svg {
    display: block;
    transition: transform 0.1s ease;
}

.inlogg_knapp_container {
    grid-row-start: 38;
    grid-row-end: 41;
    grid-column-start: 40;
    grid-column-end: 60;

    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
}

.inlogg_knapp {
    font-family: Arial, sans-serif;
    font-size: clamp(16px, 1.2vw, 20px);
    padding: 17px 25px;
    color: white;
    background-color: rgb(43, 43, 43);
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.inlogg_knapp:hover {
    background-color: rgb(60, 60, 60);
    transform: scale(1.05);
}

.inlogg_knapp:active {
    transform: scale(0.95);
}

.inlogg_felmeddelande_container {
    grid-row-start: 45;
    grid-row-end: 47;
    grid-column-start: 30;
    grid-column-end: 70;

    display: flex;
    align-items: center;
    position: relative;
}

.inlogg_felmeddelande {
    flex: 1;
    font-family: Arial, sans-serif;
    color: #FFF700;
    font-size: clamp(14px, 1.2vw, 18px);
    text-align: center;
    box-sizing: border-box;
}

.common_topbar_knapp{
    z-index: 3000;
    box-sizing: border-box;
    display: flex;
    font-size: clamp(16px, 1.2vw, 24px);
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    justify-content: center;
    cursor: pointer; 
    transition: background-color 0.3s ease;
    min-width: 20px;

}

.common_topbar_knapp:hover {
    background-color: rgb(94, 94, 94);
}

.arkiv_topbar{
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 25;
    grid-column-end: 35;
}

.arkiv_ruta{
    grid-row-start: 1;
    grid-row-end: 30;
    grid-column-start: 25;
    grid-column-end: 35;
    gap: 0;   
    z-index: -100;  
    background-color: rgb(255, 255, 255);
}

.visa_topbar{
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 35;
    grid-column-end: 45;
}

.filter_topbar{
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 45;
    grid-column-end: 55;
}

.justera_topbar{
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 55;
    grid-column-end: 65;
}

.logga_ut_topbar{
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 90;
    grid-column-end: 100;
}

.resize-handle-filter {
    position: absolute;
    z-index: -90;        
    background: transparent;  
}

/* right edge – full height, 6 px wide */
.resize-right {
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
}

/* bottom edge – full width, 6 px tall */
.resize-bottom-filter {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: ns-resize;
}

/* optional: a small border makes the grip visible on hover */
.resize-handle-filter:hover {
    background: rgba(255,255,255,.08);
}

.ruta_common{
    background-color: rgb(43, 43, 43);
    border: 2px solid rgb(94, 94, 94);
    gap: 0;
    min-height: 100px;
    border-radius: 8px;
}

.top_ruta_common{
    display: flex;
    background-color: rgb(94, 94, 94);
    height: 2.5vh;
    width: 100%;
    flex-shrink: 0; 
    justify-content: center;
    align-items: center;
    font-size: clamp(15px, 1vw, 16px);
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    cursor: grab;
    min-height: 25px;
}

.top_ruta_common:active{
    cursor: grabbing;
}

.visa_ruta{
    position: absolute;
    top: 35vh;
    left: 40vw;
    height: 30vh;
    width: 20vw;
    z-index: -100;
}

.filter_ruta{
    position: absolute;
    top: 35vh;
    left: 40vw;
    height: 23vh;
    width: 20vw;
    z-index: -100;
    display: flex;
    flex-direction: column;
}

.filter_input-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.filter_input-row input {
    flex: 1;
    min-width: 0;
}

.filter_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: flex-start; 
    gap: 8px;
    font-size: clamp(15px, 1vw, 16px);
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    overflow-y: auto;
}

.justera_bil_container,
.justera_koll_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: fit-content;
}

.justera_bil_container > div,
.justera_koll_container > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.justera_bil_container label,
.justera_koll_container label {
  width: 7vw;
  text-align: right;
  display: inline-block;
}


.justera_knappar_container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.justera_knapp_ok,
.justera_knapp_avbryt {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.justera_knapp_ok {
    background-color: rgb(141, 141, 141);
    color: white;
}

.justera_knapp_ok:hover {
    background-color: rgb(201, 201, 201);
}

.justera_knapp_avbryt {
    background-color: rgb(141, 141, 141);
    color: white;
}

.justera_knapp_avbryt:hover {
    background-color: rgb(201, 201, 201);
}

.justera_rubrik {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.justera_ruta{
    position: absolute;
    top: 35vh;
    left: 40vw;
    height: 50vh;
    width: 22vw;
    z-index: -100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.justera_input-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.justera_input-row input {
    flex: 1;
    min-width: 0;
}

.justera_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: flex-start; 
    gap: 8px;
    font-size: clamp(15px, 1vw, 16px);
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    overflow-y: auto;
}

.topbar-title {
    flex-grow: 1;
    margin-left: 2px;
}
  
.close-button {
width: 2vh;
height: 2vh;
min-width: 20px;
min-height: 20px;
margin-right: 1px;
background-color: red;
border: none;
border-radius: 0.3vh;
position: relative;
cursor: pointer;
flex-shrink: 0;
}

.close-button::before,
.close-button::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 60%;
height: 2px;
background-color: white;
transform-origin: center;
}

.close-button::before {
transform: translate(-50%, -50%) rotate(45deg);
}

.close-button::after {
transform: translate(-50%, -50%) rotate(-45deg);
}


.container {
    display: grid;
    grid-template-rows: repeat(59, 1fr);
    grid-template-columns: repeat(99, 1fr);
    grid-row-start: 4;
    grid-row-end: 60;
    grid-column-start: 1;
    grid-column-end: 100;
    gap: 0;   
}

#map {
    grid-row-start: 1;
    grid-row-end: 46;
    grid-column-start: 1;
    grid-column-end: 100;
    z-index: 100;
    border: 2px solid rgb(94, 94, 94);
}

.leaflet-tile {
    filter: grayscale(50%);
}

#filter {
    grid-row-start: 1;
    grid-row-end: 21;
    grid-column-start: 82;
    grid-column-end: 100;
    background-color: rgb(43, 43, 43);
    border: 2px solid rgb(94, 94, 94);
    color: white;
    z-index: 0;
}

#filter label {
    margin-top: 10px;
    font-size: 1rem;
    margin-bottom: 5px;
    box-sizing: border-box;
    color: rgb(251, 251, 251);

    display: block; /* Ensure the label behaves as a block element */
    width: 90%; /* Match the input width */
    padding-left: 3%; /* Align label with input field */
    
    font-family: Arial, sans-serif;
    font-weight: bold;
}

#filter input {
    margin-top: 5px;
    padding: 5px;
    margin-bottom: 5px;
    width: 90%; /* Keep the input box width the same */
    display: block;
    margin-left: auto;
    margin-right: auto;

    font-size: 0.9rem;
    font-family: Arial, sans-serif;
}

.legend_bas_användare {
    grid-row-start: 2;
    grid-row-end: 34;
    grid-column-start: 91;
    grid-column-end: 99;
    background-color: rgb(43, 43, 43);
    cursor: default;
    z-index: 200;
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-rows: repeat(79, 1fr);
    grid-template-columns: repeat(49, 1fr);
}

.legend_bas_användare_titel{
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    border: 2px solid rgb(94, 94, 94);
}

.legend_bas_användare_ki{
    grid-row-start: 5;
    grid-row-end: 35;
    grid-column-start: 1;
    grid-column-end: 50;
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-rows: repeat(49, 1fr);
    grid-template-columns: repeat(49, 1fr);
}

.legend_bas_användare_ki_titel{
    grid-row-start: 1;
    grid-row-end: 10;
    grid-column-start: 1;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: center;
}

.färglåda_common{
    grid-column-start: 4;
    grid-column-end: 14;
    box-sizing: border-box;
    
}

.ki_1-2 {
    grid-row-start: 12;
    grid-row-end: 41;
    background: rgb(33,123,61);
    background: linear-gradient(0deg, rgba(33,123,61,1) 0%, rgba(242,255,108,1) 55%, rgba(167,14,34,1) 100%);
    border: 2px solid rgb(94, 94, 94);
}

.ki_odef {
    grid-row-start: 43;
    grid-row-end: 48;
    background: rgb(251, 251, 251);
    border: 2px solid rgb(94, 94, 94);
}

.ki_2 {
    grid-column-start: 16;
    grid-column-end: 50;
    grid-row-start: 11;
    grid-row-end: 13;
    display: flex;
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: flex-start;
}

.ki_2::before {
    content: '\2190'; /* Unicode för en vänsterpil ← */
    margin-right: 0.5rem; /* Lägger ett mellanrum mellan pilen och texten */
    font-size: 1rem; /* Justera pilens storlek */
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
}

.ki_1 {
    grid-column-start: 16;
    grid-column-end: 50;
    grid-row-start: 39;
    grid-row-end: 41;
    display: flex;
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: flex-start;
}

.ki_1::before {
    content: '\2190'; /* Unicode för en vänsterpil ← */
    margin-right: 0.5rem; /* Lägger ett mellanrum mellan pilen och texten */
    font-size: 1rem; /* Justera pilens storlek */
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
}

.ki_1_5 {
    grid-column-start: 16;
    grid-column-end: 50;
    grid-row-start: 24;
    grid-row-end: 26;
    display: flex;
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: flex-start;
}

.ki_1_5::before {
    content: '\2190'; /* Unicode för en vänsterpil ← */
    margin-right: 0.5rem; /* Lägger ett mellanrum mellan pilen och texten */
    font-size: 1rem; /* Justera pilens storlek */
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
}

.ki_odef_text {
    grid-column-start: 16;
    grid-column-end: 50;
    grid-row-start: 44;
    grid-row-end: 46;
    display: flex;
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: flex-start;
}

.ki_odef_text::before {
    display: flex;
    content: '\2190'; /* Unicode för en vänsterpil ← */
    margin-right: 0.5rem; /* Lägger ett mellanrum mellan pilen och texten */
    font-size: 1rem; /* Justera pilens storlek */
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
}

.legend_bas_användare_resor {
    grid-row-start: 35;
    grid-row-end: 80;
    grid-column-start: 1;
    grid-column-end: 50;
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-rows: repeat(44, 1fr);
    grid-template-columns: repeat(49, 1fr);
}

.legend_bas_användare_resor_titel{
    grid-row-start: 3;
    grid-row-end: 10;
    grid-column-start: 1;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: top;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: center;
}

.legend_line_width {
    background-color: grey; 
    grid-column-start: 4; 
    grid-column-end: 14;
}

.legend_line_text {
    grid-column-start: 16; 
    grid-column-end: 50;
    display: flex;
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: flex-start;
}

.width_0 {
    grid-row-start: 10; 
    grid-row-end: 12;
}

.width_1 {
    grid-row-start: 15; 
    grid-row-end: 17;
}

.width_2 {
    grid-row-start: 20; 
    grid-row-end: 22;
}

.width_3 {
    grid-row-start: 25; 
    grid-row-end: 27;
}

.width_4 {
    grid-row-start: 30; 
    grid-row-end: 32;
}

.width_5 {
    grid-row-start: 35; 
    grid-row-end: 37;
}

.width_6 {
    grid-row-start: 40; 
    grid-row-end: 42;
}




.legend_bas_differens {
    grid-row-start: 2;
    grid-row-end: 21;
    grid-column-start: 91;
    grid-column-end: 99;
    background-color: rgb(43, 43, 43);
    cursor: default;
    z-index: 0;
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-rows: repeat(39, 1fr);
    grid-template-columns: repeat(49, 1fr);
}

.legend_bas_differens_titel{
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    border: 2px solid rgb(94, 94, 94);
}

.legend_bas_differens_ki{
    grid-row-start: 5;
    grid-row-end: 40;
    grid-column-start: 1;
    grid-column-end: 50;
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-rows: repeat(49, 1fr);
    grid-template-columns: repeat(49, 1fr);
}

.legend_bas_differens_ki_titel{
    grid-row-start: 1;
    grid-row-end: 7;
    grid-column-start: 1;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: center;
}


.ki_0-1 {
    grid-row-start: 9;
    grid-row-end: 27;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,85,85,1) 33%, rgba(217,35,35,1) 66%, rgba(158,0,0,1) 100%);
    border: 2px solid rgb(94, 94, 94);
}


.ki_-1-0 {
    grid-row-start: 30;
    grid-row-end: 48;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(104,233,112,1) 33%, rgba(36,161,43,1) 66%, rgba(8,61,8,1) 100%);
    border: 2px solid rgb(94, 94, 94);
}

.ki_diff_1, .ki_diff_g0, .ki_diff_l0, .ki_diff_-1 {
    grid-column-start: 16;
    grid-column-end: 50;
    display: flex;
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: normal;
    justify-content: flex-start;
}

.ki_diff_1 {
    grid-row-start: 8;
    grid-row-end: 10;
}

.ki_diff_g0 {
    grid-row-start: 25;
    grid-row-end: 28;
}

.ki_diff_l0 {
    grid-row-start: 29;
    grid-row-end: 31;
}

.ki_diff_-1 {
    grid-row-start: 46;
    grid-row-end: 49;
}

.ki_diff_1::before, .ki_diff_g0::before, .ki_diff_l0::before, .ki_diff_-1::before {
    content: '\2190';
    margin-right: 0.5rem;
    font-size: 1rem;
    color: rgb(251, 251, 251);
    font-weight: bold;
}


.common_vy {
    border: 2px solid rgb(94, 94, 94);
    z-index: 200;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    cursor: pointer; 
    transition: background-color 0.3s ease;
}

.common_vy[data-active="true"] {
    background-color: rgb(43, 43, 43);
}

.common_vy[data-active="false"] {
    background-color: rgb(141, 141, 141);
}

.common_vy[data-active="false"]:hover {
    background-color: rgb(201, 201, 201);
}

.välj_scenario_vy {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 39;
    grid-column-end: 51;
    background-color: rgb(43, 43, 43);
    cursor: default;
}

.bas_vy {
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 39;
    grid-column-end: 43;
}

.användare_vy {
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 43;
    grid-column-end: 46;
}

.differens_vy {
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 46;
    grid-column-end: 51;
}

.välj_tjocklek_vy {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 81;
    grid-column-end: 90;
    background-color: rgb(43, 43, 43);
    cursor: default;
}

.tjocklek_bil_vy {
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 81;
    grid-column-end: 84;
}

.tjocklek_koll_vy {
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 84;
    grid-column-end: 87;
}

.tjocklek_total_vy {
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 87;
    grid-column-end: 90;
}

/* Common container styling */
.common_justering {
    background-color: rgb(43, 43, 43);
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-columns: repeat(49, 1fr);
}

/* Common text styling */
.common_justering_text {
    grid-column-start: 1;
    grid-column-end: 38;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 4%;
    pointer-events: none;
}

/* Common input container styling */
.common_justering_input {
    grid-column-start: 38;
    grid-column-end: 46;
    box-sizing: border-box;
    display: flex;
    border: 1px solid rgb(94, 94, 94);
    align-items: center;
}

/* Common input field styling */
.common_input_procent {
    font-size: 1rem;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    align-items: center;
    background-color: rgb(43, 43, 43);
    border: 2px solid rgb(94, 94, 94);
    color: rgb(251, 251, 251);
    font-weight: bold;
}

.gk_bil_justering_titel {
    grid-row-start: 23;
    grid-row-end: 25;
    grid-column-start: 82;
    grid-column-end: 100;
    font-size: 1.2rem;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    background-color: rgb(94, 94, 94);
    border: 2px solid rgb(94, 94, 94);
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 1%;
    pointer-events: none;
}

.gk_koll_justering_titel {
    grid-row-start: 27;
    grid-row-end: 29;
    grid-column-start: 82;
    grid-column-end: 100;
    font-size: 1.2rem;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    background-color: rgb(94, 94, 94);
    border: 2px solid rgb(94, 94, 94);
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 1%;
    pointer-events: none;
}

.viktad_data_titel {
    grid-row-start: 46;
    grid-row-end: 48;
    grid-column-start: 65;
    grid-column-end: 82;
    font-size: 1.2rem;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    background-color: rgb(94, 94, 94);
    border: 2px solid rgb(94, 94, 94);
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 0%;
    pointer-events: none;
}

/* Common percentage styling */
.common_justering_procent {
    grid-column-start: 46;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    pointer-events: none;
}

/* Specific grid placement */
.p-avgift_justering {
    grid-row-start: 25;
    grid-row-end: 27;
    grid-column-start: 82;
    grid-column-end: 100;
}

.biljettpris_justering {
    grid-row-start: 29;
    grid-row-end: 31;
    grid-column-start: 82;
    grid-column-end: 100;
}

.försening_koll_justering {
    grid-row-start: 31;
    grid-row-end: 33;
    grid-column-start: 82;
    grid-column-end: 100;
}

.totalt_antal_länkar {
    grid-row-start: 42;
    grid-row-end: 44;
    grid-column-start: 82;
    grid-column-end: 100;
    z-index: 200;
}

.markerade_länkar {
    grid-row-start: 35;
    grid-row-end: 37;
    grid-column-start: 82;
    grid-column-end: 100;
}

.markerade_länkar_text {
    grid-column-start: 1;
    grid-column-end: 13;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 4%;
    pointer-events: none;
}

.markerade_länkar_antal {
    grid-column-start: 13;
    grid-column-end: 20;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    pointer-events: none;
}

.totalt_antal_länkar_text {
    grid-column-start: 20;
    grid-column-end: 42;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 4%;
    pointer-events: none;
}

.totalt_antal_länkar_antal {
    grid-column-start: 42;
    grid-column-end: 50;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    pointer-events: none;
    z-index: 2000;
}

.markering_meny {
    grid-row-start: 44;
    grid-row-end: 46;
    grid-column-start: 82;
    grid-column-end: 100;
    z-index: 200;
}

.common_knapp {
    border: 2px solid rgb(94, 94, 94);
    background-color: rgb(141, 141, 141);
    z-index: 200;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    align-items: center;
    color: rgb(251, 251, 251);
    font-weight: bold;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.1s ease;
    
}

.common_knapp:hover {
    transition: background-color 0.3s ease;
    background-color: rgb(180, 180, 180);
}

.common_knapp:active {
    background-color: rgb(50, 50, 50); 
    transition: background-color 0.05s ease;
}

.vänster_knapp {
    grid-column-start: 1;
    grid-column-end: 5;
}

.höger_knapp {
    grid-column-start: 5;
    grid-column-end: 9;
}

.rensa_knapp {
    grid-column-start: 29;
    grid-column-end: 50;
}

.markerad_länk_box {
    grid-column-start: 9;
    grid-column-end: 29;
    background-color: rgb(43, 43, 43);
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-columns: repeat(49, 1fr);
}

.markerad_common{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 7%;
    pointer-events: none;
}

.markerad_länk_text {
    grid-column-start: 1;
    grid-column-end: 28;
    z-index: 2000;
}
.markerad_siffra {
    grid-column-start: 28;
    grid-column-end: 50;
    z-index: 2000;
}

.markering_ruta {
    grid-row-start: 46;
    grid-row-end: 60;
    grid-column-start: 82;
    grid-column-end: 100;
    background-color: rgb(43, 43, 43);
    border: 2px solid rgb(94, 94, 94);
    display: grid;
    grid-template-rows: repeat(16, 1fr);
    z-index: 200;
}

.rad_common {
    display: grid;
    grid-template-columns: repeat(49, 1fr);
    
}

.rad_common_text {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 4%;
    pointer-events: none;
}

.rad_common_värde {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    color: rgb(251, 251, 251);
    font-weight: bold;
    padding-left: 4%;
    pointer-events: none;
    justify-content: flex-end;
    padding-right: 4%;
}

.från_marknad {
    grid-row-start: 1;
    grid-row-end: 3;
}

.från_marknad_text {
    grid-column-start: 1;
    grid-column-end: 18;
}

.från_marknad_värde {
    grid-column-start: 18;
    grid-column-end: 50;
}

.till_marknad {
    grid-row-start: 3;
    grid-row-end: 5;
}

.till_marknad_text {
    grid-column-start: 1;
    grid-column-end: 17;
}

.till_marknad_värde {
    grid-column-start: 17;
    grid-column-end: 50;
}

.gk_koll {
    grid-row-start: 5;
    grid-row-end: 7;
}

.gk_koll_text {
    grid-column-start: 1;
    grid-column-end: 25;
}

.gk_koll_värde {
    grid-column-start: 25;
    grid-column-end: 50;
}

.gk_bil {
    grid-row-start: 7;
    grid-row-end: 9;
}

.gk_bil_text {
    grid-column-start: 1;
    grid-column-end: 25;
}

.gk_bil_värde {
    grid-column-start: 25;
    grid-column-end: 50;
}

.ki {
    grid-row-start: 9;
    grid-row-end: 11;
}

.ki_text {
    grid-column-start: 1;
    grid-column-end: 25;
}

.ki_värde {
    grid-column-start: 25;
    grid-column-end: 50;
}

.resor_koll {
    grid-row-start: 11;
    grid-row-end: 13;
}

.resor_koll_text {
    grid-column-start: 1;
    grid-column-end: 25;
}

.resor_koll_värde {
    grid-column-start: 25;
    grid-column-end: 50;
}

.resor_bil {
    grid-row-start: 13;
    grid-row-end: 15;
}

.resor_bil_text {
    grid-column-start: 1;
    grid-column-end: 25;
}

.resor_bil_värde {
    grid-column-start: 25;
    grid-column-end: 50;
}

.resor_tot {
    grid-row-start: 15;
    grid-row-end: 17;
}

.resor_tot_text {
    grid-column-start: 1;
    grid-column-end: 25;
}

.resor_tot_värde {
    grid-column-start: 25;
    grid-column-end: 50;
}

.custom-label {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    color: black;
}


.gk_pie_chart {
    grid-row-start: 46;
    grid-row-end: 60; 
    grid-column-start: 13;
    grid-column-end: 25;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.resor_pie_chart {
    grid-row-start: 46;
    grid-row-end: 60; 
    grid-column-start: 1;
    grid-column-end: 13;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.gk_pie_chart_bil {
    grid-row-start: 46;
    grid-row-end: 60; 
    grid-column-start: 25;
    grid-column-end: 45;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.gk_pie_chart_koll {
    grid-row-start: 46;
    grid-row-end: 60; 
    grid-column-start: 45;
    grid-column-end: 65;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

#GK_komponenter_bil, #GK_komponenter_koll, #resor_pie_chart_canvas, #gk_pie_chart_canvas {
    width: 100%;
    height: 100%;
    border: 2px solid rgb(94, 94, 94);
    background-color: #2b2b2b;
    box-sizing: border-box; 
}

.diff_pie_charts_cover{
    grid-row-start: 46;
    grid-row-end: 60; 
    grid-column-start: 1;
    grid-column-end: 65;
    border: 2px solid rgb(94, 94, 94);
    background-color: #a4a4a4e9;
    z-index: 200;
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-weight: bold;
    justify-content: center;
    pointer-events: none;
}


.display-common {
    z-index: 1000;
    width: 100%;
    height: 100%;
    border: 2px solid rgb(94, 94, 94);
    background-color: #2b2b2b;
    box-sizing: border-box;
    color: rgb(251, 251, 251);
 
    display: flex;
    align-items: center;     
    
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    max-width: 100%;
    max-height: 100%;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gk_koll_display {
    grid-row-start: 48;
    grid-row-end: 50; 
    grid-column-start: 65;
    grid-column-end: 76;
    justify-content: flex-start; 
    padding-left: 3%;
}

.gk_koll_display_value {
    grid-row-start: 48;
    grid-row-end: 50;
    grid-column-start: 76;
    grid-column-end: 81;
    justify-content: flex-end; 
    padding-right: 7%;
}

.gk_bil_display {
    grid-row-start: 50;
    grid-row-end: 52; 
    grid-column-start: 65;
    grid-column-end: 76;
    justify-content: flex-start; 
    padding-left: 3%;
}

.gk_bil_display_value {
    grid-row-start: 50;
    grid-row-end: 52; 
    grid-column-start: 76;
    grid-column-end: 81;
    justify-content: flex-end; 
    padding-right: 7%;
}

.ki_display {
    grid-row-start: 52;
    grid-row-end: 54; 
    grid-column-start: 65;
    grid-column-end: 76;
    justify-content: flex-start; 
    padding-left: 3%;
}

.ki_display_value {
    grid-row-start: 52;
    grid-row-end: 54; 
    grid-column-start: 76;
    grid-column-end: 81;
    justify-content: flex-end; 
    padding-right: 7%;
}

.resor_koll_display {
    grid-row-start: 54;
    grid-row-end: 56; 
    grid-column-start: 65;
    grid-column-end: 75;
    justify-content: flex-start; 
    padding-left: 3%;
}

.resor_koll_display_value {
    grid-row-start: 54;
    grid-row-end: 56; 
    grid-column-start: 75;
    grid-column-end: 81;
    justify-content: flex-end; 
    padding-right: 7%;
}

.resor_bil_display {
    grid-row-start: 56;
    grid-row-end: 58; 
    grid-column-start: 65;
    grid-column-end: 75;
    justify-content: flex-start; 
    padding-left: 3%;
}

.resor_bil_display_value {
    grid-row-start: 56;
    grid-row-end: 58; 
    grid-column-start: 75;
    grid-column-end: 81;
    justify-content: flex-end; 
    padding-right: 7%;
}

.resor_tot_display {
    grid-row-start: 58;
    grid-row-end: 60; 
    grid-column-start: 65;
    grid-column-end: 75;
    justify-content: flex-start; 
    padding-left: 3%;
}

.resor_tot_display_value {
    grid-row-start: 58;
    grid-row-end: 60; 
    grid-column-start: 75;
    grid-column-end: 81;
    justify-content: flex-end; 
    padding-right: 7%;
}

.etikett_ruta {
grid-row-start: 43;
grid-row-end: 45; 
grid-column-start: 42;
grid-column-end: 48;
display: flex;
align-items: center;
gap: 10px;
background-color: #2b2b2b;
color: white;
padding: 5px 5px;
font-family: Arial, sans-serif;
border: 2px solid #5e5e5e;
border-radius: 20px;
width: fit-content;
z-index: 500;
}

.etikett_label {
font-weight: bold;
font-size: 16px;
}

/* Toggle Switch Container */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

/* Hide the default checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: red;
    border-radius: 24px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color 0.4s;
    display: flex;
    align-items: center;
    justify-content: space-between; /* detta visar text på båda sidor */
    padding: 0 8px;
    font-size: 14px;
    color: white;
    font-weight: bold;
    overflow: hidden;
}
  
/* Cirkeln */
.slider::before {
    content: "";
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    top: 3px;
    left: 4px;
    transform: translateX(0);
    transition: transform 0.4s;
}
  
/* Flytta cirkeln när på */
.switch input:checked + .slider::before {
    transform: translateX(25px);
}
  
/* Färg när på */
.switch input:checked + .slider {
    background-color: green;
}
  
/* Textstil */
.switch-text {
    z-index: 1;
    font-size: 13px;
    font-weight: bold;
    transition: opacity 0.3s;
}
  
/* Visa/dölj rätt text */
.text-på {
    opacity: 0;
}
  
.text-av {
    opacity: 1;
}
  
.switch input:checked + .slider .text-på {
    opacity: 1;
}

.switch input:checked + .slider .text-av {
    opacity: 0;
}
  

.background{
    grid-row-start: 1;
    grid-row-end: 60; 
    grid-column-start: 1;
    grid-column-end: 100;
    background-color: rgb(94, 94, 94);
    z-index: -10;
}