:root {
    --color-border: #777;
    
    --color-primary: #1a3c99;
    --color-primary-hover: #2950bd;
    --color-secondary: #6c757d;
    --color-secondary-hover: #868c91;

    --color-bg-primary: #f9f9f9;
    --color-bg-secondary: #f0f0f0;

    --color-bg-modal: white;

    --color-navbar-bg: #333;
    --color-navbar-bg-hover: #444;
    
    --color-toolbar-item: black;
    --color-toolbar-item-bg: white;
    --color-toolbar-item-bg-active: #fafafa;
    
    --color-text-primary: black;
    --color-text-secondary: white;
    --color-text-navbar: white;

    --color-bg-input: #dddddd;
    --color-bg-input-focus: #c8c8c8;
    --color-input-border: #888;
    --color-input-border-focus: #888;

    --color-textarea-bg: #f8f8f8;
    --color-textarea-text: black;
}

input {
    box-sizing: border-box;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-input-border);
    font-size: 14px;
    color: var(--color-text-primary);
    padding: 5px;
    outline: 0;
}

input:focus {
    background-color: var(--color-bg-input-focus);
    border-color: #999;
}

select {
    box-sizing: border-box;
    background-color: var(--color-bg-input);
    border: 1px solid #888;
    font-size: 14px;
    color: var(--color-text-primary);
    padding: 5px;
    outline: 0;
}

select:focus {
    background-color: var(--color-bg-input-focus);
}

::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

textarea {
    background-color: var(--color-textarea-bg);
    color: var(--color-textarea-text);
    resize: none;
    min-width: min(80vw, 50rem);
    min-height: 60vh;
}

.btn {
    border: 0px solid var(--color-secondary);
    font-size: 11pt;
    padding: 6px 12px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    color: white;
}

.btn-primary {
    background-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

#error-modal .modal-body {
    padding: 1rem 3rem;
}

#error-select-element {
    cursor: pointer;
    text-decoration: underline;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}