:root {
    --vh: 100vh; /* Fallback for browsers that do not support env() */
    --vh: calc(var(--vh-safe-area-inset-bottom, 0px) + 100vh - env(safe-area-inset-bottom));

    --color-code-text: #333;
    --color-code-bg: rgba(0,0,0,0.12);
    --font-code: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier,
        monospace;

    /* Override sodastraw to match Electro document theme */
    --color-header-bg: #1B557C;
    --color-nav-button-bg-active: #1B557C;

}

html, body {
    height: var(--vh);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

code {
    color: var(--color-code-text);
    background-color: var(--color-code-bg);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 2px 5px;
    font-family: var(--font-code);
    font-size: 75%;
    border: none;
    border-radius: 0;
}

.workspace__body--login,
.workspace__body--logout,
.workspace__body--error,
.workspace__body--settings {
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    gap: var(--default-gap);
}

.workspace__body--admin {
    justify-content: flex-start;
    align-items: center;
    overflow-y: scroll;
    gap: var(--default-gap);
}

.workspace__body--document-instance{
    justify-content: center;
    align-items: center;
    margin: 0;
}

.workspace__body--document_update-instance{
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    gap: 6px;
    margin-top: 10px;
    overflow-y: auto;
}

.workspace__body--my-bookshelf {
    justify-content: start;
    align-items: center;
    overflow-y: auto;
    overflow-x: auto;
    gap: 10px;
}

#text-search{
    border: 1px solid #aaa;
}

.iframe-doc-instance {
    width: 100%;
    height: 100%;
    border: none;
    /* margin: 10px; */
    border: 1px solid rgb(97, 97, 97);
}

.context__training-not-scoped {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid #aaa;
    background-color: #dddddd;
    font-size: 10px;
    padding: 5px;
}

.context__training-attestation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid #aaa;
    background-color: #bff2ff;
    font-size: 10px;
    padding: 5px;
}

.context__training-pending {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid red;
    background-color: #ffdcdc;
    color: red;
    font-size: 10px;
    padding: 5px;
}

.text__training-not-scoped {
    display: inline-block;
    text-align: center;
    width: 100%;
    /* color: #269041; */
    color: #888888;
}
.text__training-attested {
    display: inline-block;
    text-align: center;
    width: 100%;
    /* color: #269041; */
    /* color: #888888; */
    /* color: #000000; */
    /* color: #19732f; */
}
.text__training-pending {
    display: inline-block;
    text-align: center;
    width: 100%;
    color: red;
}

.button--document-number {
    min-width: 140px;
}

.button--become {
    min-width: 110px;
    border : 1px solid #aaa;
}

#button--help{
    margin-top: 25px;
}

.login-error-text {
    color: red;
    text-align: center;
    justify-content: center;
}