/* ------------------------------------------------------- */
/* Start Import JW Fonts Section */
/* ------------------------------------------------------- */

@font-face {
    font-family: MEPS-Knoll;
    src: url('jw-fonts/JWKnoll-Regular.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Bold;
    src: url('jw-fonts/JWKnoll-Bold.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Bold-Italic;
    src: url('jw-fonts/JWKnoll-BoldItalic.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Book;
    src: url('jw-fonts/JWKnoll-Book.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Book-Italic;
    src: url('jw-fonts/JWKnoll-BookItalic.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Demi;
    src: url('jw-fonts/JWKnoll-Demi.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Demi-Italic;
    src: url('jw-fonts/JWKnoll-DemiItalic.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Display-Black;
    src: url('jw-fonts/JWKnoll-DisplayBlack.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Display-Bold;
    src: url('jw-fonts/JWKnoll-DisplayBold.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Display-Heavy;
    src: url('jw-fonts/JWKnoll-DisplayHeavy.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Italic;
    src: url('jw-fonts/JWKnoll-Italic.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Light;
    src: url('jw-fonts/JWKnoll-Light.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Light-Italic;
    src: url('jw-fonts/JWKnoll-LightItalic.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Medium;
    src: url('jw-fonts/JWKnoll-Medium.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Medium-Italic;
    src: url('jw-fonts/JWKnoll-MediumItalic.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Thin;
    src: url('jw-fonts/JWKnoll-Thin.ttf') format("truetype")
}

@font-face {
    font-family: MEPS-Knoll-Thin-Italic;
    src: url('jw-fonts/JWKnoll-ThinItalic.ttf') format("truetype")
}

/* ------------------------------------------------------- */
/* End Import JW Fonts Section */
/* ------------------------------------------------------- */

html, body {
    font-family: MEPS-Knoll, MEPS-Knoll-Bold, MEPS-Knoll-Bold-Italic, MEPS-Knoll-Book, MEPS-Knoll-Book-Italic, MEPS-Knoll-Demi, MEPS-Knoll-Demi-Italic, MEPS-Knoll-Display-Black, MEPS-Knoll-Display-Bold, MEPS-Knoll-Display-Heavy, MEPS-Knoll-Italic, MEPS-Knoll-Light, MEPS-Knoll-Light-Italic, MEPS-Knoll-Medium, MEPS-Knoll-Medium-Italic, MEPS-Knoll-Thin, MEPS-Knoll-Thin-Italic, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.extra-small-font {
    font-size: 0.75rem;
}

.page-heading {
    font-family: MEPS-Knoll-Bold !important;
}

.split-screen {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.table-container {
    width: 65%;
    float: left;
    margin-right: 1rem;
}

.table {
    width: 100%;
    box-sizing: border-box;
}

.table-dark th {
    font-family: MEPS-Knoll-Medium;
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #e9ecef;
}

.table-striped tbody tr td {
    font-family: MEPS-Knoll;
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5;
}

.edit-icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

    .edit-icon-button i {
        font-size: 1.5rem;
        color: black;
        transition: color 0.2s;
    }

    .edit-icon-button:hover i {
        color: deepskyblue;
        animation: pulse 0.6s infinite; /* Apply the pulse animation */
    }

    .edit-icon-button:active i {
        transform: scale(1.1); /* Slightly shrink the icon on click */
    }

.delete-icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

    .delete-icon-button i {
        font-size: 1.5rem;
        color: black;
        transition: color 0.2s;
    }

    .delete-icon-button:hover i {
        color: red;
        animation: pulse 0.6s infinite; /* Apply the pulse animation */
    }

    .delete-icon-button:active i {
        transform: scale(1.1); /* Slightly shrink the icon on click */
    }

.confirmation-container {
    width: 90%;
    max-width: 400px;
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff; /* Add a background color for better visibility */
    z-index: 1000; /* Ensure it appears above other elements */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visibility */
}

@media (max-width: 768px) {
    .confirmation-container {
        width: 80%;
        right: 10px;
        top: 10px;
    }
}

@media (max-width: 480px) {
    .confirmation-container {
        width: 95%;
        right: 5px;
        top: 5px;
    }
}

.confirmation-buttons {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .confirmation-buttons button {
        flex: 1 0 45%;
        margin: 0.5rem 0.5rem 0 0;
    }

@media (max-width: 480px) {
    .confirmation-buttons button {
        flex: 1 0 100%;
        margin: 0.5rem 0 0 0;
    }
}

.add-icon-button {
    font-family: MEPS-Knoll;
    color: #005aa7;
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 27rem;
    margin-bottom: 1rem;
}

    .add-icon-button:hover {
        color: deepskyblue;
    }

    .add-icon-button i {
        margin-right: 0.5rem;
    }

@media (max-width: 600px) {
    .add-icon-button {
        font-size: 0.875rem;
    }
}

.add-language-list {
    max-width: 100%;
    margin: 0 auto;
    font-family: MEPS-Knoll;
}

.search-container {
    width: 100%;
    position: relative;
}

.add-language-search-box {
    width: 95%;
    padding: 10px;
    font-family: MEPS-Knoll;
    box-sizing: border-box;
    margin-top: 0.5rem;
}

.clear-add-language-search-box {
    position: absolute;
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: none; /* Initially hidden */
}

    .clear-add-language-search-box.visible {
        display: block; /* Show when input is not empty */
    }

    .clear-add-language-search-box:hover {
        color: red;
    }

.scrollable-list {
    max-height: 500px;
    overflow-y: auto;
    padding: 0;
    list-style-type: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

    .scrollable-list li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        min-width: 400px;
    }

        .scrollable-list li:last-child {
            border-bottom: none;
        }

    .scrollable-list input[type="checkbox"] {
        margin-right: 10px;
    }

.disabled-item {
    background-color: #eceff3;
    color: #a0a0a0;
}

@media (max-width: 600px) {
    .scrollable-list li {
        padding: 8px;
    }
}

.selected-language {
    font-family: MEPS-Knoll-Medium-Italic;
    font-variant: small-caps;
    font-size: 0.75rem;
    margin-left: auto;
    color: #005aa7;
}

.header-note {
    font-family: MEPS-Knoll-Demi-Italic;
    font-size: 1rem;
    margin: 1rem 0;
}

.header-sub-note {
    font-family: MEPS-Knoll-Demi-Italic;
    color: CaptionText;
    font-size: 1em;
    margin: 1rem 1rem;
}

.criterion {
    font-family: MEPS-Knoll;
    margin: 1.5rem 0;
}

    .criterion label {
        font-family: MEPS-Knoll-Italic;
    }

.save-button {
    font-family: MEPS-Knoll-Bold;
    background-color: #3ba3fb;
    color: white;
    border-radius: 4px;
    margin-left: auto;
    padding: 0 30px;
}

.grouped-name {
    font-family: MEPS-Knoll-Demi;
    font-size: 1.25rem;
    color: #005aa7;
    margin-top: 2rem;
}

.grouped-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .grouped-table th, .grouped-table td {
        border: 1px solid #ddd;
        padding: 8px;
        font-family: MEPS-Knoll;
    }

    .grouped-table th {
        position: sticky;
        top: 0;
        background-color: #f2f2f2;
        text-align: left;
        font-family: MEPS-Knoll-Bold;
    }

    .grouped-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .grouped-table tr:hover {
        background-color: #ddd;
    }

    .grouped-table th, .grouped-table td {
        padding: 12px 15px;
    }

.grouped-table-example {
    font-family: MEPS-Knoll-Bold-Italic;
}

.grouped-table-input {
    width: 40%;
}

    .grouped-table-input input {
        width: 100%;
    }

    .grouped-table-input textarea {
        width: 100%;
        height: 6rem;
    }

.space-right {
    margin-right: 0.5rem;
}

.left-align {
    text-align: left !important;
}

.header-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
}

.header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
}

.search-container {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

.search-label {
    display: inline-block;
    margin-right: 0.5rem;
}

.search-box-container {
    display: flex;
    align-items: center;
}

.search-box {
    width: 450px;
    padding: 10px;
    font-family: MEPS-Knoll;
    box-sizing: border-box;
}

.clear-search-box {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    margin-left: -2rem;
    display: none; /* Initially hidden */
}

    .clear-search-box.visible {
        display: block; /* Show when input is not empty */
    }

    .clear-search-box:hover {
        color: red;
    }

.nowrap-button {
    white-space: nowrap; /* Prevent text wrapping */
}

.add-edit-user {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 1rem;
    margin-top: 1rem;
    width: 30%;
}

.add-edit-user-form-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

.btn {
    margin-right: 0.5rem;
}