/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
:root {
    --transparent: rgba(0, 0, 0, 0);
    --bg_dark: #282828;
    --bg_light: #333333;
    --bg_form: #4c4c4c;
    --bg_form_checked: #282828;
    --text_color: #E0E0E0;
    --text_color_form_unchecked: #E0E0E0;
    --text_color_form_checked: #D5692E;
    --border: #D5692E;
    --link: #D5692E;
    --link_visited: #D5692E;

    --whites: #F2F2F2;
    --text_bg_border: #4c4c4c;
    --text_outline: #BF5F18;
    --page_hl: #1C1C1C;
    --bs-primary: var(--page_hl);
}

body {
    background-color: var(--bg_dark);
    background-image: url(https://wiki.nerdsgocasual.de/skins/Vector/images/background.jpg);
    background-size: auto;
    background-attachment: fixed;
    color: var(--text_color);
}

.top-container {
    margin: 0!important;
}

.progress {
    background-color: var(--bg_form)!important;
}

.progress-bar {
    background: repeating-linear-gradient(-33deg, var(--border) 0 3px, var(--bg_dark) 0px 20px)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
    color: var(--transparent)!important;
}

.text-primary {
    color: var(--text_color)!important;
}

.bg-primary {
    border-radius: 5px;
}

.group-description {
    background-color: var(--bg_dark)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:visited {
    color: var(--link_visited);
    text-decoration: none;
}

.navbar {
    background-color: var(--bg_dark);
    background-image: url(https://wiki.nerdsgocasual.de/skins/Vector/images/background.jpg);
    background-size: auto;
    background-attachment: fixed;
    color: var(--text_color);
    border-bottom: 1px solid var(--border)!important;
}

.question-container {
    background-color: var(--bg_dark)!important;
    color: var(--text_color);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.5em;
}

.question-title-container {
    background-color: var(--bg_dark)!important;
    color: var(--text_color);
    border: 0!important;
}

.question-help-container {
    border: 0!important;
}

.answer-container {
    background-color: var( --bg_light)!important;
    color: var(--text_color);
    border: 0!important;
    border-radius: 5px!important;
    padding: 0.5em;
}

.answer-container .ls-answers {
    padding: 0!important;
}

.btn {
    color: var(--text_color_form_unchecked)!important;
    background-color: var(--bg_form)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-primary {
    color: var(--text_color_form_unchecked)!important;
    background-color: var(--bg_form)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-primary:hover,
.btn-primary.hover {
    color: var(--text_color_form_checked)!important;
    background: var(--bg_dark)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-outline-secondary {
    color: var(--text_color_form_unchecked)!important;
    background-color: var(--bg_form)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.hover{
    color: var(--text_color_form_checked)!important;
    background: var(--bg_dark)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
    color: var(--text_color_form_checked)!important;
    background: var(--bg_dark)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-check:active+.btn-outline-secondary,
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary:active,
.show>.btn-outline-secondary.dropdown-toggle {
    color: var(--text_color_form_checked)!important;
    background: var(--bg_dark)!important;
    font-weight: bold!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.mb-3 {
    margin-bottom: 0em!important;
}

/*.btn .btn-primary .mb-3 {
    margin-left: 0.5em!important;
}*/

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:nth-child(n+3),
.btn-group>:not(.btn-check)+.btn {
    margin-left: 1em;
}

textarea.form-control {
    color: var(--text_color_form_unchecked)!important;
    background: var(--bg_form)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

input.form-control {
    color: var(--text_color_form_unchecked)!important;
    background: var(--bg_form)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
    margin-bottom: 0.5em!important;
}

.form-control list-question-select {
    background-color: var(--transparent)!important;
}

.form-select,
.form-select option {
    color: var(--text_color_form_unchecked)!important;
    font-weight: bold!important;
    background-color: var(--bg_form)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.form-select:active,
.form-select.active,
.form-select:hover,
.form-select.hover {
    color: var(--text_color_form_checked)!important;
    font-weight: bold!important;
    background-color: var(--bg_dark)!important;
}

.bootstrap-select.form-control {
    background-color: var(--transparent)!important;
}

.bootstrap-select {
    padding: 0em 0em 0em 0.75em!important;
}

.bootstrap-select>.dropdown-toggle {
    min-width: fit-content;
}

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

.table {
    color: var(--text_color)!important;
    --bs-table-hover-color: var(--text_color)!important;
    border: 1px solid black;
    border-radius: 5px;
}

.table>:not(:first-child) {
    border-top: 2px solid var(--border)!important;
}

.ls-even {
    background-color: var(--bg_form);
}

.table > tbody > td:hover {
    background-color: red;
}

.card {
    background-color: var(--transparent)!important;
    border: 0!important;
}

.card-body {
    background-color: var(--bg_dark)!important;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.5em;
}

.dropdown-menu {
    color: var(--text_color_form_unchecked)!important;
    font-weight: bold!important;
    background-color: var(--bg_form)!important;
    /*border: 1px solid var(--border)!important;
    border-radius: 5px!important;*/
}

.dropdown-item {
    color: var(--text_color_form_unchecked)!important;
    font-weight: bold!important;
    background-color: var(--bg_form)!important;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
    color: var(--text_color_form_checked)!important;
    font-weight: bold!important;
    background: var(--bg_dark)!important;
}

.checkbox-item label::before {
    background-color: var(--bg_form)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.checkbox-item label::after {
    background-color: var(--bg_dark)!important;
    color: var(--text_color_form_checked)!important;
}

.radio-item label::before {
    border: 1px solid var(--border)!important;
    background-color: var(--bg_form)!important;
}

.flatly label::after {
    background-color: var(--text_color_form_checked)!important;
}

input[type="checkbox"]:hover {
    background-color: var(--bg_dark)!important;
}

input:checked:after {
    background-color: var(--bg_dark)!important;
}

.sortable-list {
    border: 1px dotted var(--border)!important;
}

.sortable-list .grabable {
    background-color: var(--bg_form)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
    color: var(--text_color_form_checked)!important;
}

.sortable-block-content {
    padding: 0.75em!important;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    color: var(--text_color_form_unchecked);
    background-color: var(--bg_form);
    border: 1px solid var(--border);
    border-radius: 5px;
    margin: 0em 0.5em 0.5em 0.5em;
}

.col-12.well {
    background-color: #282828 !important;
    border: 0;
}

/* POP-Ups */
.modal-content {
    background-color: var(--transparent)!important;
}

.modal-header {
    background-color: var(--bg_dark)!important;
    color: var(--text_color)!important;
    font-weight: bold!important;
    border-bottom: 1px solid var(--border)!important;
}

.modal-header .btn-close {
    background-color: var(--bg_form)!important;
    border: 1px solid var(--border)!important;
    border-radius: 5px!important;
}

.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat!important;
    opacity: 1;
}

.btn-close:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D5692E'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat!important;
    opacity: 1;
}

.modal-body {
    background-color: var(--bg_light)!important;
    color: var(--text_color)!important;
}

.modal-body .btn:hover {
    background-color: var(--bg_dark)!important;
    color: var(--text_color_form_checked)!important;
}

.modal-footer {
    background-color: var(--bg_dark)!important;
    border-top: 1px solid var(--border)!important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    color: var(--text_color)!important;
}