/* Default*/
.style1 {
    .sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: rgb(111, 124, 138);
        box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
        transition: transform 0.3s ease-in-out;
        transform: translateX(300px); /* Hidden by default */
    }

    .sidebar.open {
        transform: translateX(0); /* Slides into view */
    }

    .sidebar .content {
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        height: calc(100% - 20px); /* Adjusted to leave space for the last button */
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 60px; /* Extra padding at the bottom to ensure the button is accessible */
    }

    .sidebar .content .filter-group label {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between elements */
        padding: 10px;
        position: relative;
    }

    .sidebar .content .filter-group label img {
        width: 28px;
        height: 28px;
    }

    /* Hide the default checkmark added by `:before` */
    .sidebar .content .filter-group input[type='checkbox'] + label:before {
        content: '';
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] {
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] + label {
        background-color: #3386c0;
        color: black;
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        text-transform: capitalize;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .sidebar .content .filter-group input[type='checkbox']:hover + label,
    .sidebar .content .filter-group input[type='checkbox']:checked + label {
        background-color: #4ea0da;
    }

    .sidebar .content .filter-group input[type='checkbox']:checked + label:before {
        content: '✔ ';
        margin-right: 5px;
    }

    .toggle-sidebar {
        position: absolute;
        top: 10px;
        right: 10px; /* Position of sidebar */
        z-index: 20;
        width: 40px;
        height: 40px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.3s ease-in-out, right 0.3s ease-in-out;
    }

    .toggle-sidebar:hover {
        background: #f0f0f0;
    }

    .language-toggle {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        background-color: #4caf50;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .language-toggle:hover {
        background-color: #45a049;
    }
    .markers_toggle {
        margin-top: 5px;
        padding: 10px;
        width: 100%;
        background-color: #57a0e4;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .markers_toggle {
        background-color: #3386c0;
    }
}


.style2 {
    .sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: rgb(0, 0, 0);
        box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
        transition: transform 0.3s ease-in-out;
        transform: translateX(300px); /* Hidden by default */
    }

    .sidebar.open {
        transform: translateX(0); /* Slides into view */
    }

    .sidebar .content {
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        height: calc(100% - 20px); /* Adjusted to leave space for the last button */
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 60px; /* Extra padding at the bottom to ensure the button is accessible */
    }

    .sidebar .content .filter-group label {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between elements */
        padding: 10px;
        position: relative;
    }

    .sidebar .content .filter-group label img {
        width: 28px;
        height: 28px;
    }

    /* Hide the default checkmark added by `:before` */
    .sidebar .content .filter-group input[type='checkbox'] + label:before {
        content: '';
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] {
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] + label {
        background-color: #3386c0;
        color: black;
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        text-transform: capitalize;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .sidebar .content .filter-group input[type='checkbox']:hover + label,
    .sidebar .content .filter-group input[type='checkbox']:checked + label {
        background-color: #4ea0da; /* button colors */
    }

    .sidebar .content .filter-group input[type='checkbox']:checked + label:before {
        content: '✔ ';
        margin-right: 5px;
    }

    .toggle-sidebar {
        position: absolute;
        top: 10px;
        right: 10px; /* Position of sidebar */
        z-index: 20;
        width: 40px;
        height: 40px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.3s ease-in-out, right 0.3s ease-in-out;
    }

    .toggle-sidebar:hover {
        background: #f0f0f0;
    }

    .language-toggle {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        background-color: #4caf50;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .language-toggle:hover {
        background-color: #45a049;
    }
    .markers_toggle {
        margin-top: 5px;
        padding: 10px;
        width: 100%;
        background-color: #57a0e4;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .markers_toggle {
        background-color: #3386c0;
    }
}

/* gammelstad style */
.style3 {
    .sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: rgb(112, 115, 119);
        box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
        transition: transform 0.3s ease-in-out;
        transform: translateX(300px); /* Hidden by default */
    }

    .sidebar.open {
        transform: translateX(0); /* Slides into view */
    }

    .sidebar .content {
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        height: calc(100% - 20px); /* Adjusted to leave space for the last button */
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 60px; /* Extra padding at the bottom to ensure the button is accessible */
    }

    .sidebar .content .filter-group label {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between elements */
        padding: 10px;
        position: relative;
    }

    .sidebar .content .filter-group label img {
        width: 28px;
        height: 28px;
    }

    /* Hide the default checkmark added by `:before` */
    .sidebar .content .filter-group input[type='checkbox'] + label:before {
        content: '';
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] {
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] + label {
        background-color: #912824; /* button color for when clicking a button*/
        color: white; /* button text color*/
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        text-transform: capitalize;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .sidebar .content .filter-group input[type='checkbox']:hover + label,
    .sidebar .content .filter-group input[type='checkbox']:checked + label {
        background-color: #912824; /* button colors */
    }

    .sidebar .content .filter-group input[type='checkbox']:checked + label:before {
        content: '✔ ';
        margin-right: 5px;
    }

    .toggle-sidebar {
        position: absolute;
        top: 10px;
        right: 10px; /* Position of sidebar */
        z-index: 20;
        width: 40px;
        height: 40px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.3s ease-in-out, right 0.3s ease-in-out;
    }

    .toggle-sidebar:hover {
        background: #f0f0f0;
    }

    .language-toggle {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        background-color: #4caf50;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .language-toggle:hover {
        background-color: #45a049;
    }
    .markers_toggle {
        margin-top: 5px;
        padding: 10px;
        width: 100%;
        background-color: #57a0e4;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .markers_toggle {
        background-color: #c03333;
    }
}


/* Gothic font */
.style4 {
    .sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: rgb(112, 115, 119);
        box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
        transition: transform 0.3s ease-in-out;
        transform: translateX(300px); /* Hidden by default */
    }

    .sidebar.open {
        transform: translateX(0); /* Slides into view */
    }

    .sidebar .content {
        padding: 20px;
        font-family: century-gothic, sans-serif; /* This is where i changed the font */
        height: calc(100% - 20px); /* Adjusted to leave space for the last button */
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 60px; /* Extra padding at the bottom to ensure the button is accessible */
    }

    .sidebar .content .filter-group label {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between elements */
        padding: 10px;
        position: relative;
    }

    .sidebar .content .filter-group label img {
        width: 28px;
        height: 28px;
    }

    /* Hide the default checkmark added by `:before` */
    .sidebar .content .filter-group input[type='checkbox'] + label:before {
        content: '';
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] {
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] + label {
        background-color: #912824; /* button color for when clicking a button*/
        color: white; /* button text color*/
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        text-transform: capitalize;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .sidebar .content .filter-group input[type='checkbox']:hover + label,
    .sidebar .content .filter-group input[type='checkbox']:checked + label {
        background-color: #912824; /* button colors */
    }

    .sidebar .content .filter-group input[type='checkbox']:checked + label:before {
        content: '✔ ';
        margin-right: 5px;
    }

    .toggle-sidebar {
        position: absolute;
        top: 10px;
        right: 10px; /* Position of sidebar */
        z-index: 20;
        width: 40px;
        height: 40px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.3s ease-in-out, right 0.3s ease-in-out;
    }

    .toggle-sidebar:hover {
        background: #f0f0f0;
    }

    .language-toggle {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        background-color: #4caf50;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .language-toggle:hover {
        background-color: #45a049;
    }
    .markers_toggle {
        margin-top: 5px;
        padding: 10px;
        width: 100%;
        background-color: #57a0e4;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .markers_toggle {
        background-color: #c03333;
    }
}


.style5 {
    .sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: rgb(112, 115, 119);
        box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
        transition: transform 0.3s ease-in-out;
        transform: translateX(300px); /* Hidden by default */
    }

    .sidebar.open {
        transform: translateX(0); /* Slides into view */
    }

    .sidebar .content {
        padding: 20px;
        font-family: century-gothic, sans-serif;
        height: calc(100% - 20px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 60px;
    }

    .sidebar .content .filter-group label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        position: relative;
    }

    .sidebar .content .filter-group label img {
        width: 28px;
        height: 28px;
    }

    .sidebar .content .filter-group input[type='checkbox'] + label:before {
        content: '';
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] {
        display: none;
    }

    .sidebar .content .filter-group input[type='checkbox'] + label {
        background-color: #912824;
        color: white;
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        text-transform: capitalize;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .sidebar .content .filter-group input[type='checkbox']:hover + label,
    .sidebar .content .filter-group input[type='checkbox']:checked + label {
        background-color: #912824;
    }

    .sidebar .content .filter-group input[type='checkbox']:checked + label:before {
        content: '✔ ';
        margin-right: 5px;
    }

    .toggle-sidebar {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 20;
        width: 40px;
        height: 40px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.3s ease-in-out, right 0.3s ease-in-out;
    }

    .toggle-sidebar:hover {
        background: #f0f0f0;
    }

    .language-toggle {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        background-color: transparent; /* Updated for flag visibility */
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
        background-size: contain;     /* From updateLanguageButton */
        background-repeat: no-repeat; /* From updateLanguageButton */
        background-position: center;  /* From updateLanguageButton */
        height: 40px;                /* From updateLanguageButton */
    }

    /*.language-toggle:hover {
        background-color: #45a049;
    } removed this so that the language flag button wont be green when you hover over it */

    .markers_toggle {
        margin-top: 5px;
        padding: 10px;
        width: 100%;
        background-color: #57a0e4;
        color: #201f1f;
        border: none;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
    }

    .markers_toggle {
        background-color: #c03333;
    }

    /*.popup-content {
        /* Optional: Add container styles if needed 
    }*/

    .popup-image {
        width: 100%;
        height: auto;
        margin-top: 5px;
    }

    .popup-title {
        margin: 0;
        font-size: 16px;
    }

    .popup-description {
        margin-top: 5px;
    }

    .filter-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .checkmark {
        visibility: visible;
    }

    .locations-container {
        display: block;
        margin-left: 20px;
    }
}