body {margin:0;}

.navbar {
    overflow: hidden;
    background-color: rgba(51, 51, 51, 1);
    position: -webkit-sticky;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 5000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    line-height: 24px;
}

.navbar a {
    float: right;
    display: block;
    color: orange;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.navbar a:hover {
    background: #ddd;
    color: black;
}

.navbar a:focus {
    outline: 3px solid #1a73e8;
    outline-offset: -2px;
}

#openLanguageModal:focus {
    outline: 3px solid #1a73e8;
    outline-offset: -2px;
}

.main {
    padding: 16px;
    margin-bottom: 30px;
    margin-top: 30px;

    height: 1000px; /* Used in this example to enable scrolling */
}

.exp-heading {
    bottom: 0;
    color: #f2f2f2;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 14px;
}

.navbar p {
    float: right;
    display: block;
    color: orange;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    vertical-align: auto;
}

.footbar {
    overflow: hidden;
    background-color: rgba(51, 51, 51, 1);
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 2000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
}

.footbar a {
    float: right;
    display: block;
    color: orange;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.footbar a:hover {
    background: #ddd;
    color: black;
}

.footbar p {
    color: orange;
}


/* Modal container with namespaced classes */
.logout-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */
}

/* Modal content with namespaced classes */
.logout-modal-content {
    background-color: #ffffff;
    margin: 15% auto;
    padding: 30px;
    border: none;
    width: 300px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for a modern look */
    z-index: 1002;
}

.logout-modal-content:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
}

/* Modern buttons with specific namespacing */
.logout-modal-btn {
    padding: 12px 24px;
    margin: 10px;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease; /* Smooth transition */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle button shadow */
}

/* Confirm button (OK) with namespacing */
.logout-modal-confirm-btn {
    background-color: #4CAF50; /* Green */
    color: white;
}

/* Cancel button with namespacing */
.logout-modal-cancel-btn {
    background-color: #f44336; /* Red */
    color: white;
}

/* Hover effects with specific namespacing */
.logout-modal-confirm-btn:hover {
    background-color: #45a049; /* Darker green */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

.logout-modal-cancel-btn:hover {
    background-color: #e53935; /* Darker red */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

/* Active state with specific namespacing */
.logout-modal-btn:active {
    transform: translateY(2px); /* Button click effect */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); /* Reduced shadow */
}
.logout-message{
    color: black;
    font-size: 14px;
}
/* Language Modal Styles */

#openLanguageModal {
    margin-right: auto;  /* Ensure the language button is aligned to the left */
    border-radius: 0px;
}
.language-modal {
    display: none;  /* Hidden by default */
    position: fixed;  /* Stay in place */
    z-index: 9999;  /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;  /* Full width */
    height: 100%;  /* Full height */
    background-color: rgba(0, 0, 0, 0.5);  /* Black background with transparency */
    justify-content: center;
    align-items: center;
}

.language-modal-content {
    background-color: #fff;
    color: #0d0d0d;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 300px;
    position: relative;
}

.language-modal-content:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
}

.close-language-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.close-language-modal:hover,
.close-language-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Language Options inside the Modal */
.language-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.3s;
    background: #fff;
    font-size: 16px;
}

.language-option img {
    width: 24px;
    height: auto;
    border-radius: 0px;
    box-shadow: none;
}

.language-option:hover {
    background-color: #f0f0f0;
}

.language-option:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
}

.open-language-modal-btn {
    padding: 10px 20px;
    background-color: blue;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.open-language-modal-btn:hover {
    background-color: darkorange;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1100px) {
    .navbar a {
        padding: 12px 8px;
        font-size: 12px;
    }
    .exp-heading {
        font-size: 0;
    }
}

/* Reusable base class for circular progress trackers */
.circular-tracker {
    width: 36px;
    height: 36px;
    /*background: #E0F2F1;*/
    border-radius: 50%;
    overflow: hidden;
    cursor: default;
}

/* Only the positioning for achievement-progress when absolutely positioned */
#achievement-progress.circular-tracker {
    position: absolute;
    top: 2px;
    left: 2px;
}

.circular-tracker path {
    transition: fill 0.4s ease, filter 0.4s ease;
}

.expmenu-ring {
    margin-right: 10px;
    display: inline-block;
    position: relative; /* inside menu bar */
    top: 3px;           /* tweak vertical alignment */
}

.progress-dots {
    font-size: 18px;
    color: #4CAF50;
    font-family: monospace;
    letter-spacing: 4px;
    position: fixed;
    bottom: 10px;
    left: 20px;
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}

.progress-dots:hover {
    color: #81C784;  /* lighter green on hover */
    opacity: 1.0;
}