/* --- Color constants --- */

:root {
    --v_TOP_COLOR:           #1EC721;
    --v_TITLE_COLOR:         #3A871F;
    --v_HOVER_COLOR:         #2FF225;
    --v_TITLE_BACKGROUND:    #EBF5E9;
    --v_OK_COLOR:            #008000;
    --v_HIGHLIGHT_COLOR:     #FF0000;
    --v_LOWLIGHT_COLOR:      #C0C0C0;
    --v_LOWLIGHT_BACKGROUND: #F0F0F0;
    --v_MIDLIGHT_BACKGROUND: #CCCCCC;
    --v_ORANGE_BACKGROUND:   #F5E1D4;
    --v_INS_BACKGROUND:      #E6FFE6;
    --v_DEL_BACKGROUND:      #FFE6E6;
}


/* --- Links --- */
/* This has to stay before "Menu" section below. */

/* TODO: the :not(:has(img)) makes that there is no highlight-underline under images. But we must not have an image and a text in a single <a>, otherwise the text will have no hover background color. */
a:hover:not(:has(img)),
a:active:not(:has(img)) {
    text-decoration: underline;
    background-color: var(--v_HOVER_COLOR);
}

a:link {
    text-decoration: underline;
    color: black;
}

a:visited {
    text-decoration: underline;
    color: black;
}

/* --- Menu --- */

.ejmenu {
    background: var(--v_TOP_COLOR);
    text-align: center;
    font-size: 13px;
    color: #000000;
    cursor: pointer;
    display: table-cell;
    width: 98.5px;
    padding: 10px;
    text-decoration: none;
    border: 1px solid transparent;
}

.ejmenu:hover {
    background: var(--v_HOVER_COLOR);
    text-decoration: none;
}

.menu-table {
    display: table;
    width: 394px;
    height: 42px;
}

.menu-row {
    display: table-row;
}

.menu-table a {
    font-family: "Helvetica Neue Light 45", sans-serif;
    text-decoration: none;
    font-size: 16px;
}

/* --- Document --- */

body {
    font-family: "Helvetica Neue Light 45", sans-serif;
    color: black;
    background-color: white;
}

.hidden { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    visibility: visible;
}


/* --- Input controls --- */

button {
    background-color: var(--v_TOP_COLOR);
}

button:hover {
    background-color: var(--v_HOVER_COLOR);
}

input[type="checkbox"] {
    accent-color: var(--v_TOP_COLOR);
}

input[type="radio"] {
    accent-color: var(--v_TOP_COLOR);
}

/* Give submit/reset buttons different colors: */
input[type="submit"] {
    background-color: var(--v_TOP_COLOR);
}

input[type="submit"]:hover {
    background-color: var(--v_HOVER_COLOR);
}


/* --- Misc classes --- */

/* Used for "replace": */
.withborder {
    border-style: solid;
    border-width: 1px;
    border-color: black
}

/* All gray boxes (description, information...): */
.oidcontent {
    background-color: var(--v_MIDLIGHT_BACKGROUND);
}

.oidcontent ul {
    list-style-type: disc;
    margin-top: 0;
    padding-left: 1.5em;
}

/* All bullets green... */
ul li::marker {
    color: var(--v_TITLE_COLOR);
}

/* ... except for the ones in content boxes: */
.oidcontent ul li::marker {
    color: black !important;
}

.copyToClipboard {
    background-color: white;
    border: none;
    cursor: pointer;
}
.copyToClipboard:hover {
    background-color: var(--v_HOVER_COLOR);
}

span.density-bar {
    background-color: var(--v_TOP_COLOR);
}

.user-name {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

table.zebra tr:nth-child(even) { background-color: var(--v_TITLE_BACKGROUND); }


/* --- jsTree --- */

.jstree-clicked { background-color: var(--v_TITLE_BACKGROUND) !important; }

.jstree-default .jstree-hovered { background: var(--v_HOVER_COLOR) !important; }

.no-hover {
    pointer-events: none;
}

.jstree-search { 
    color: black !important;
    background-color: var(--v_TITLE_BACKGROUND);
    font-weight: bold;
}


/* --- OID helper --- */
#top #chat-form button {
 margin-left: 0.2em;
 border: none;
 background: var(--v_TOP_COLOR);
 color: white;
 cursor: pointer;
}

#top #chat-form button:hover {
 background: var(--v_HOVER_COLOR);
}

#chat-button {
 position: fixed;
 bottom: 20px; /* Was: env(safe-area-inset-bottom, 20px); */
 right: 20px;  /* Was: env(safe-area-inset-right, 20px); */
 background: #ebf5e9;
 border: none;
 border-radius: 50%;
 width: 60px;
 height: 60px;
 font-size: 24px;
 cursor: pointer;
 box-shadow: 0 4px 6px rgba(0,0,0,0.3);
 z-index: 1000;
}

#chat-button:hover {
 background: var(--v_HOVER_COLOR);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 transform: scale(1.05);
}

#chat-popup {
 position: fixed;
 bottom: 90px;
 right: 20px;
 width: 300px;
 max-height: 400px;
 background: white;
 border-radius: 12px;
 box-shadow: 0 8px 20px rgba(0,0,0,0.25);
 display: none;
 flex-direction: column;
 overflow: hidden;
 z-index: 1000;
 font-family: "Helvetica Neue Light 45", sans-serif;
 font-size: 14px;
}

#chat-popup #chat-header {
 background: black;
 color: var(--v_TOP_COLOR);
 padding: 10px;
 font-weight: bold;
}

#chat-popup #chat-header #chat-close {
 background: var(--v_TOP_COLOR);
 color: white;
 font-weight: bold;
}

#chat-popup #chat-header #chat-close:hover {
 background: var(--v_HOVER_COLOR);
}

#chat-popup #chat {
 flex: 1;
 padding: 10px;
 overflow-y: auto;
}

#chat-popup #chat p {
 margin: 4px 0;
}

#chat-popup #chat-form {
 display: flex;
 border-top: 1px solid var(--v_MIDLIGHT_BACKGROUND);
}

#chat-popup #chat-form input {
 flex: 1;
 border: none;
 padding: 8px;
 font-size: 14px;
}

#chat-popup #chat-form button {
 border: none;
 background: var(--v_TOP_COLOR);
 color: white;
 padding: 0 12px;
 cursor: pointer;
}

#chat-popup #chat-form button:hover {
 background: var(--v_HOVER_COLOR);
}

.rotating {
 display: inline-block;
 width: 20px;
 height: 20px;
 animation: spin 1s linear infinite;
 vertical-align: middle;
 margin-left: 5px;
}

@keyframes spin {
 0%   {transform: rotate(0deg);}
 100% {transform: rotate(360deg);}
}