body {
    min-width: 350px;
}

.btn .bi::before {
    transform: scale(1.25);
    vertical-align: -0.075em;
}

#table-sessions-history .dropdown-toggle .bi-list::before {
    transform: scale(1.5);
}

.bi.rotate-90::before {
    transform: scale(1.25) rotate(90deg);
}

.menu-info .btn .bi.bi-chevron-left::before,
.menu-info .btn .bi.bi-chevron-right::before {
    transform: scale(1);
}

/* MARK: BS5 */

.btn,
.form-control,
.form-select,
.input-group-text {
    font-size: 0.875rem;
}

.form-control::placeholder {
    color: #999;
}

.btn-group-xs > .btn,
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.form-check.form-switch {
    min-height: 0;
    display: flex;
    gap: 1rem;
}

.form-check.form-switch .form-check-input {
    transform: scale(1.33);
    transform-origin: left center;
    cursor: pointer;
}

.form-check.form-switch.ui-center-switch {
    display: inline-block;
    min-height: 0;
}

.dropdown-toggle.no-caret::after {
    display: none;
}

.modal-header h4 {
    font-size: 1.25rem;
}

/** MARK: NEW ********/

/** MARK: NEW ********/

/** MARK: NEW ********/

/* TODO min-width */
.form-inline .form-select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-control[readonly] {
    cursor: default;
    background-color: #e9ecef; /* Bootstrap 3-like grey */
    background-color: var(--ui-gray-f5);
    opacity: 0.75;
}

.input-group-text .bi {
    line-height: 1;
}

.datetimepicker.dropdown-menu {
    font-size: 14px;
}

.accordion {
    margin-bottom: 1rem;
}

/* MARK: Globals */

a,
a:focus,
a:hover {
    text-decoration: none;
}

@media (min-width: 992px) {
    .d-md-none {
        display: none !important;
    }
}

#question-partial-div {
    transition:
        opacity 0.3s,
        display 0.3s allow-discrete;
}

#question-partial-div.d-none {
    display: none;
    opacity: 0;
}

@starting-style {
    #question-partial-div:not(.d-none) {
        opacity: 0;
    }
}

/* for ::after caret */
.nav-link {
    position: relative;
}

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

.d-flex-100-center {
    display: flex;
    width: 100%;
    align-items: center;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

.valign-middle {
    vertical-align: middle !important;
}

ul.pad-start-20 {
    padding-inline-start: 20px;
}

.vertical-divider {
    border-right: 4px solid var(--ui-gray-d);
}

label {
    font-weight: 600;
}

label.disabled {
    color: #aaa;
    cursor: not-allowed;
}

.label-as-badge {
    border-radius: 1rem;
    padding: 0.2rem 0.4rem;
}

.ui-box,
.ui-tab-content,
.ui-tab-menu .list-group,
.stats-chart {
    background: var(--ui-content-bg);
    box-shadow: 0 0 5px var(--ui-shadow);
    border-radius: var(--ui-content-radius);
}

/* MARK: Flash Messages */

#ui-alert-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75%;
    max-width: 600px;
    /* word-break: break-word; */
    overflow-wrap: anywhere;
    position: fixed;
    z-index: 9999;
    /* top: 12px; */
    padding: 12px 12px 0 12px;
    left: 50%;
    transform: translate(-50%);
    /* background: rgba(255, 255, 255, 0.75);
    border-bottom-left-radius: var(--ui-content-radius);
    border-bottom-right-radius: var(--ui-content-radius); */
    /* max-width: 500px; */
    /* box-shadow: 0 0 10px rgba(255, 255, 255, 0.75); */
}

#ui-alert-wrapper:empty {
    display: none;
}

.alert {
    border-radius: calc(1.5 * var(--ui-content-radius));
    margin-bottom: 12px;
}

.alert.ui-alert {
    min-width: 200px;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    font-weight: bold;
}

#ui-alert-wrapper .alert-success,
#ui-alert-wrapper .alert-warning,
#ui-alert-wrapper .alert-danger {
    padding-left: 2.5rem;
}

#ui-alert-wrapper .alert-success {
    color: #fff;
    background-color: #0b0;
    box-shadow: 0 0 5px #040;
}

#ui-alert-wrapper .alert-warning {
    color: #fff;
    background-color: #fa0;
    box-shadow: 0 0 5px #640;
}

#ui-alert-wrapper .alert-danger {
    color: #fff;
    background-color: #d00;
    box-shadow: 0 0 5px #500;
}

#ui-alert-wrapper .alert-success .bi-check,
#ui-alert-wrapper .alert-danger .bi-exclamation-triangle,
#ui-alert-wrapper .alert-warning .bi-info {
    display: inline-flex;
    position: absolute;
    top: 18px;
    left: 6px;
    align-items: center;
    justify-content: center;
    margin-top: -13px;
    text-align: center;
    vertical-align: top;
    color: #0b0;
    background-color: #fff;
    border-radius: 2rem;
    width: 26px;
    height: 26px;
    font-size: 18px;
}

#ui-alert-wrapper .alert-danger .bi-exclamation-triangle {
    color: #d00;
}

#ui-alert-wrapper .alert-warning .bi-info {
    color: #fa0;
}

#ui-alert-wrapper .alert-success .bi-check::before {
    font-size: 28px;
}

#ui-alert-wrapper .alert-danger .bi-exclamation-triangle::before {
    transform: translateY(-1px);
}

#ui-alert-wrapper .alert-warning .bi-info::before {
    font-size: 28px;
}

@media (max-width: 600px) {
    #ui-alert-wrapper {
        width: auto;
        left: 15px;
        right: 15px;
        transform: translate(0);
    }
}

.alert.ui-alert.alert-dismissible .btn-close {
    padding: 0.75rem;
    opacity: 0.3;
    color: #000;
}

.alert.ui-alert.alert-dismissible .btn-close:hover {
    opacity: 0.5;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.breadcrumb a {
    color: var(--ui-gray-6);
    font-weight: 600;
}

.breadcrumb a:focus,
.breadcrumb a:hover {
    color: var(--ui-gray-2);
}

.bold {
    font-weight: 600;
}

.callout {
    padding: 0.75rem 1rem;
    background: var(--ui-callout-bg);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.pre-styled {
    background-color: var(--ui-gray-f5);
    padding: 0.5rem;
    border-radius: 0.25rem;
    overflow: auto;
    border: 1px solid var(--ui-gray-d);
}

.lb-cancel {
    background-size: 100%;
}

a.tedme-primary:hover {
    color: var(--ui-primary-hover);
}

.modal-fs {
    width: 96%;
    max-width: 1900px;
}

#modal-auth-users-full #table-auth-users-full_wrapper thead th span.dt-column-title {
    font-size: 90%;
}

#modal-tos-accept .label-tedme::after {
    /* background-color: #1c60a4; */
    content: '.';
}

.btn-add-option,
.btn-remove-option,
.btn-add-option-image {
    cursor: pointer;
}

.animate {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* extra breakpoint */
@media (min-width: 1400px) {
    .container {
        max-width: 1370px;
    }
}

/* MARK: Votes & Surveys */

.answers-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 10px;
    background: var(--ui-content-bg);
}

.answers-list table {
    width: 100%;
}

.answers-list td {
    padding: 10px;
}

.download-answer-list-csv {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.answers-list .answer-icon {
    width: 1%;
    white-space: nowrap;
}

#survey-add-panels .inline-box-left:first-child .panel-icon,
#survey_questions_div .inline-box-left .panel-icon:nth-child(2),
.panel-icon {
    font-size: 20px;
    align-self: center;
    line-height: 1.25;
}

#survey-add-panels .inline-box-left .panel-icon.bi-type-h1,
#survey-add-panels .inline-box-left .panel-icon.bi-fonts,
#survey_questions_div .inline-box-left .panel-icon.bi-type-h1,
#survey_questions_div .inline-box-left .panel-icon.bi-fonts {
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid var(--ui-gray-3);
    border-radius: 2rem;
}

#survey-add-panels .inline-box-left .panel-icon.bi-fonts,
#survey_questions_div .inline-box-left .panel-icon.bi-fonts {
    border-color: #aaa;
}

#survey-add-panels .inline-box-left .panel-icon.bi-type-h1,
#survey_questions_div .inline-box-left .panel-icon.bi-type-h1 {
    font-size: 14px;
}

#survey_questions_div .inline-box-left:nth-child(2) .svq-label {
    line-height: 20px;
    padding-right: 5px;
}

#survey_questions_div .section-question .inline-box-left:nth-child(1) .svq-label-text,
#survey_questions_div .inline-box-left:nth-child(2) .svq-label-text {
    color: #aaa;
}

#survey_questions_div .inline-box-left:nth-child(2) .f-size-large {
    font-size: 1.2em;
}

#survey_questions_div .inline-box-left:first-child .panel-icon:first-child {
    font-size: 18px;
    color: #999;
    margin: 0 4px 0 -4px;
}

#accordion_add_survey_question .inline-box-left,
#accordion_add_survey_question .inline-box-right,
#accordion_add_survey_question .inline-box-left .page-title,
#survey_questions_div .section-question .inline-box-left .panel-icon:nth-child(2),
#survey_questions_div .section-question .inline-box-left:nth-child(2) .svq-label,
.survey-question-title .svq-label {
    color: #e66;
}

#survey-results .survey-section-header {
    color: #5a8ccb;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.followup-indent {
    list-style: none;
    padding-inline-start: 1rem;
}

#accordion_add_survey_question .fq,
#survey_questions_div .fq,
.fq {
    color: rgb(0, 94, 255) !important;
}

.fq_1.panel-icon {
    margin-left: 1rem !important;
}

.fq_2.panel-icon {
    margin-left: 2rem !important;
}

.fq_3.panel-icon {
    margin-left: 3rem !important;
}

.fq_4.panel-icon {
    margin-left: 4rem !important;
}

.fq_5.panel-icon {
    margin-left: 5rem !important;
}

.fq_6.panel-icon {
    margin-left: 6rem !important;
}

.fq_7.panel-icon {
    margin-left: 7rem !important;
}

.fq_8.panel-icon {
    margin-left: 8rem !important;
}

#accordion_add_survey_section_header .inline-box-left,
#accordion_add_survey_section_header .inline-box-right,
#accordion_add_survey_section_header .inline-box-left .page-title,
#survey_questions_div .section-header .inline-box-left .panel-icon:nth-child(2),
#survey_questions_div .section-header .inline-box-left:nth-child(2) .svq-label {
    color: var(--ui-gray-2);
}

#accordion_add_survey_section_text .inline-box-left,
#accordion_add_survey_section_text .inline-box-right,
#accordion_add_survey_section_text .inline-box-left .page-title,
#survey_questions_div .section-text .inline-box-left .panel-icon:nth-child(2) {
    color: #aaa;
}

#accordion_add_survey_personal_field .inline-box-left,
#accordion_add_survey_personal_field .inline-box-right,
#accordion_add_survey_personal_field .inline-box-left .page-title,
#survey_questions_div .section-personal .inline-box-left .panel-icon:nth-child(2),
#survey_questions_div .section-personal .inline-box-left:nth-child(2) .svq-label {
    color: #88b;
}

.survey-question-info td.description {
    width: 150px;
}

.box > .icon {
    text-align: center;
    position: relative;
}

.box > .icon > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 88px;
    height: 88px;
    border: 8px solid white;
    border-radius: 50%;
    background: var(--ci-bg-primary);
    vertical-align: middle;
}

.box > .icon > .image > span {
    font-size: 36px !important;
    color: #fff !important;
    position: absolute;
    top: 15%;
    right: 23%;
}

.box > .icon:hover > .image > span {
    color: white !important;
}

.box > .icon > .info {
    margin-top: -24px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    padding: 15px 0 15px 0;
}

.box > .icon:hover > .info {
    background: rgba(0, 0, 0, 0.04);
    border-color: #e0e0e0;
    color: white;
}

.box > .icon > .info > h3.title {
    font-size: 16px;
    color: #222;
    font-weight: 600;
}

.box > .icon > .info > p {
    font-size: 13px;
    color: #666;
    line-height: 1.5em;
    margin: 20px;
}

.box > .icon:hover > .info > h3.title,
.box > .icon:hover > .info > p {
    color: #222;
}

.box > .icon > .info > .more a {
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
}

/* MARK: Buttons */

.btn-ui,
.btn-ui-border {
    background-color: var(--ci-bg-primary);
}

.btn-ui,
.btn-ui-border,
.ui-tab-menu .list-group > a.active,
.ui-tab-menu .list-group > a.active h4,
.ui-nav-tabs .nav-link.active,
.ui-nav-tabs .nav-link.active:focus,
.ui-nav-tabs .nav-link.active:hover,
.modal .accordion .accordion-button,
.eval-sides-wrapper .sm-side .files-header h5,
.charts-header h5 {
    color: var(--ci-btn-color-primary);
    transition:
        background-color 0.25s ease-in-out,
        color 0.25s ease-in-out;
}

.main-navigation-pill .btn-ui {
    width: 100%;
    padding: 10px 5px;
}

.btn-ui {
    background-image: none;
    transition: all 0.25s ease-in-out;
}

.btn-ui-border:hover,
.btn-ui-border:focus {
    background: var(--ci-bg-secondary);
    color: var(--ci-btn-color-secondary) !important;
}

.show.dropdown-toggle.btn-ui,
.btn-ui.active,
.btn-ui.focus,
.btn-ui:active,
.btn-ui:focus,
.btn-ui:hover {
    color: var(--ci-btn-color-secondary);
}

.btn-ui.active,
.btn-ui.focus,
.btn-ui:active,
.btn-ui:focus,
.btn-ui:hover {
    border-color: var(--ci-bg-secondary-dark) !important;
}

.show.dropdown-toggle.btn-ui:not(:disabled),
.btn-ui.active:not(:disabled),
.btn-ui.focus:not(:disabled),
.btn-ui:active:not(:disabled),
.btn-ui:focus:not(:disabled):not(.disabled),
.btn-ui:hover:not(:disabled):not(.disabled) {
    background-color: var(--ci-bg-secondary);
}

.btn-ui.inactive,
.btn-ui-border.inactive {
    background-color: #888;
    border-color: #888;
}

.btn-ui:disabled,
.btn-ui.inactive.focus,
.btn-ui.inactive:active,
.btn-ui.inactive:focus,
.btn-ui.inactive:hover,
.btn-ui-border.inactive.focus,
.btn-ui-border.inactive:active,
.btn-ui-border.inactive:focus,
.btn-ui-border.inactive:hover,
.tm-list-item .btn.inactive.focus,
.tm-list-item .btn.inactive:active,
.tm-list-item .btn.inactive:hover,
.tm-list-item .btn.inactive:focus {
    color: #fff;
    background-color: #666;
}

.btn-ui:disabled {
    cursor: not-allowed;
}

/* set default bootstrap colors on input-group-texts which are used as buttons */
.input-group-text.btn-danger.btn-remove-option,
.input-group-text.btn-danger.btn-remove-quiz-option {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn-danger.btn-remove-option:hover,
.btn-danger.btn-remove-quiz-option:hover {
    background-color: #c9302c;
}

.input-group-text.btn-success.btn-add-option,
.input-group-text.btn-success.btn-add-quiz-option {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-success.btn-add-option:hover,
.btn-success.btn-add-quiz-option:hover {
    background-color: #449d44;
}

.br-2rem {
    border-radius: 2rem;
}

#languages_box .btn-remove-language,
#languages_box .btn-add-language,
#qa-topics-box .btn-remove-topic,
#qa-topics-box .btn-add-topic {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-edit-sv-follow-up,
.btn-add-sv-follow-up {
    border-radius: 0px;
}

.form-switch .form-check-input:checked {
    background-color: var(--ci-bg-primary);
    border-color: var(--ci-bg-primary);
}

.btn-edit-translations {
    /* line-height: 1; */
}

/* MARK: Highcharts */

.highcharts-menu hr {
    margin-top: 8px;
    margin-bottom: 4px;
}

.highcharts-menu-item {
    padding: 0.25rem 0.5rem !important;
}

body.role-padmin .highcharts-data-table table {
    width: 100%;
}

.highcharts-label .datalabel.text-shadow {
    text-shadow: 1px 1px 3px #000;
}

.highcharts-label .datalabel b {
    font-weight: 700;
}

#connections-chart {
    border: 0px solid #eee;
}

body.role-admin #connections-chart {
    height: 500px;
}

body.role-padmin #connections-chart {
    margin-bottom: 15px;
}

#connections-chart .highcharts-label.highcharts-tooltip text tspan:first-child {
    font-size: 14px !important;
}

.stats-chart {
    height: 300px;
    margin: 15px 0;
}

@media (min-width: 1200px) {
    .stats-chart {
        float: left;
        width: 48%;
        margin: 1%;
    }
}

.checkbox-inline.chart-type {
    margin-left: 0;
    margin-right: 0px;
    margin-bottom: 10px;
    width: 32%;
    vertical-align: top;
    padding-left: 0;
}

@media (min-width: 950px) {
    .checkbox-inline.chart-type,
    .checkbox-inline.chart-type + .checkbox-inline.chart-type {
        width: 24%;
    }
}

@media (min-width: 1150px) {
    .checkbox-inline.chart-type,
    .checkbox-inline.chart-type + .checkbox-inline.chart-type {
        width: 19%;
    }
}

.checkbox-inline.chart-type:last-child {
    margin-right: 0;
}

.checkbox-inline.chart-type > input {
    vertical-align: top;
}

.colorpicker-2x .colorpicker-saturation {
    width: 200px;
    height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
    width: 30px;
    height: 200px;
}

.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
    height: 30px;
}

.nav-tabs .nav-link {
    color: var(--ui-gray-3);
}

.ui-nav-tabs .nav-link {
    margin-right: 0px;
    border-radius: 0;
    color: var(--ui-gray-3);
    font-weight: normal;
    border-bottom-width: 0;
    border-right-width: 0;
    border-color: var(--ui-gray-d);
    border: 0;
}

.ui-nav-tabs > li:last-child > a {
    border-right-width: 1px;
}

.ui-nav-tabs > li:first-child > a {
    border-radius: 5px 0 0 0;
}

.ui-tab-menu .list-group-item:hover,
.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--ui-gray-e);
}

.ui-nav-tabs > li:last-child > a {
    border-radius: 0 5px 0 0;
}

.ui-nav-tabs .nav-link.active,
.ui-nav-tabs .nav-link.active:focus,
.ui-nav-tabs .nav-link.active:hover {
    cursor: default;
    background-color: var(--ci-bg-primary);
    border: 0;
}

.ui-nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    top: 66%;
    left: calc(50% + 13px);
    margin-left: -13px;
    border: 0 solid transparent;
}

.ui-nav-tabs .nav-link.active::after {
    top: 100%;
    left: 50%;
    border: 13px solid transparent;
    border-top: 13px solid var(--ci-bg-primary);
    transition: all 0.25s ease-in-out;
}

.color-picker-input .input-group-text {
    cursor: pointer;
}

.color-picker-input .input-group-text i {
    border: 1px solid #aaa;
    border-radius: 3px;
}

.ui-box,
.ui-box-pad {
    padding: var(--ui-content-padding);
}

#votings .ui-box-pad {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ui-box h2,
.ui-box h3 {
    font-size: 22px;
    margin-top: 0.5rem;
}

#votings {
    padding: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.eval-sides-wrapper {
    /* border: 1px solid var(--ui-gray-d); */
    /* border-top: 0; */
}

.diagram-div {
    color: var(--ui-primary);
    font-size: 12px;
    display: inline-block;
    text-align: center;
}

.diagram-div img {
    padding: 0.25rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
}

.checkbox-inline.chart-type.selected .diagram-div img {
    border-color: #ddd;
}

div.entry.input-group,
div.edit-entry.input-group {
    margin-bottom: 15px;
}

.entry .btn .bi::before,
.edit-entry .btn .bi::before {
    transform: scale(1.3);
}

.dropdown-menu > li > a,
.dropdown-menu > li > div {
    padding: 0.5rem 1rem;
    font-size: 14px;
    line-height: 1;
}

.survey-chart {
    margin: 20px 10px;
}

.survey-form-item,
.project-item {
    padding: 5px 10px;
    background: var(--ui-callout-bg);
    margin-bottom: 10px;
    display: flex;
    border-radius: 5px;
}

.toggle-item {
    display: flex;
    background: transparent;
    font-size: 15px;
}

.projects-scroller {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.projects-scroller .project-item {
    padding: 5px 15px;
}

#survey .accordion {
    margin-bottom: 10px;
}

.survey-form-item > div,
.project-item > div {
    align-self: center;
}

.survey-form-item > div:first-child,
.project-item > div:first-child {
    flex-grow: 1;
}

.survey-form-item small,
.project-item small {
    display: block;
}

.form-switch .form-check-input:focus {
    box-shadow: none;
}

.survey-question-title {
    display: block;
    margin-top: 20px;
}

#project-filter .btn-clear-project-filter,
#client-filter .btn-clear-client-filter,
#btn-clear-proxy-filter {
    position: absolute;
    top: 3px;
    right: 20px;
    font-size: 19px;
    color: #999;
    cursor: pointer;
}

#project-filter .btn-clear-project-filter:hover,
#client-filter .btn-clear-client-filter:hover,
#btn-clear-proxy-filter:hover {
    color: #000;
}

.form-control {
    resize: vertical;
}

.datepicker.form-control[readonly],
.date-time-picker .form-control[readonly] {
    /* background-color: var(--bs-body-bg); */
}

.form-horizontal .col-form-label {
    text-align: left;
}

.form-horizontal .col-form-label.text-center {
    text-align: center;
}

h1.start {
    margin-top: 50px;
    margin-bottom: 30px;
}

.widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.widgets .card {
    flex: 1 1 0;
    padding: 0.5rem;
    border-radius: 1rem;
    background: var(--ui-gray-e);
    min-width: 25%;
    max-width: 31.33%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1rem;
    border: 0;
}

@media (min-width: 768px) {
    .widgets .card {
        min-width: 20%;
        max-width: 23%;
    }
}

@media (min-width: 960px) {
    .widgets .card {
        min-width: 14.29%;
        max-width: 14.66%;
    }
}

.widgets .card {
    text-align: center;
}

.widgets .card:hover {
    background-color: var(--ui-gray-d);
}

.widgets .card .icon .bi {
    display: block;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 5px;
}

.widgets .card var {
    display: block;
    font-size: 20px;
    line-height: 20px;
    font-style: normal;
    margin-bottom: 5px;
}

.widgets .card label {
    font-size: 15px;
    display: block;
    margin-bottom: 0;
    color: var(--ui-gray-3);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.widgets .card .options {
    margin-top: 10px;
}

@media (max-width: 991px) {
    .widgets .card .icon .bi {
        font-size: 22px;
        margin-bottom: 3px;
    }

    .widgets .card var {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .widgets .card {
        padding: 6px;
    }

    .widgets .card label {
        font-size: 14px;
    }
}

img.img-fluid.center {
    margin: 0 auto;
}

.status-dot {
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border-radius: 100%;
    box-shadow: 1px 1px 4px var(--ui-gray-6);
}

.status-dot.red-dot {
    background: #d00;
}

.status-dot.green-dot {
    background: #0a0;
}

.status-dot.yellow-dot {
    background: #fc0;
}

.marked-deleted {
    font-size: 17px;
    color: #c00;
}

.max_reached_notice {
    padding: 5px 15px 0 15px;
}

footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 13px;
    margin-top: 5px;
    z-index: -1; /* scroll behind content */
}

footer ul {
    display: flex;
    list-style-type: none;
    padding-inline-start: 0;
    margin: 0;
    justify-content: center;
}

footer a {
    display: inline-block;
    position: relative;
    color: var(--ui-gray-3);
    padding: 10px;
    transition: color 0.25s ease-in-out;
}

footer a:hover {
    color: #000;
}

footer li:not(:last-child) a::after {
    position: absolute;
    display: inline-block;
    content: '';
    background: #999;
    width: 1px;
    height: 14px;
    right: 0;
    top: 13px;
}

.inbox-body {
    /* for answer-list download button */
    position: relative;
}

.wordcloud-options {
    margin-top: 10px;
}

.btn-pre-delete-voting-result {
    margin: 5px auto;
}

.inbox-body-survey {
    padding: 1rem;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.inbox-body-quiz {
    padding: 10px;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#btn-survey-export-pdf.disabled,
#btn-survey-export-xls.disabled,
#btn-circular-resolution-export-pdf.disabled,
#btn-circular-resolution-export-xls.disabled {
    pointer-events: initial;
}

/* increase space betweeen icon and text, required because icons are scaled up */
.icon-text .bi:first-child,
.dt-buttons .btn .bi,
#btn-reset-eval-dates .bi {
    margin-right: 3px;
}

/* from buttons.dataTables.min.css */
div.dt-button-info {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    margin-top: -100px;
    margin-left: -200px;
    background-color: white;
    border: 2px solid #111;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    text-align: center;
    z-index: 21;
}
div.dt-button-info h2 {
    padding: 0.5em;
    margin: 0;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    background-color: #f3f3f3;
}
div.dt-button-info > div {
    padding: 1em;
}

.inline-box-left span.page-title,
.inline-box-left span.question-title,
.inline-box-left span.question-subtitle {
    display: block;
    /* overflow: hidden; */
}

.inline-box-right {
    display: flex;
    justify-content: flex-end;
}

.open-sessions-wrapper {
    padding: 0.5rem;
    border: 1px solid var(--ui-gray-d);
    border-top: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: auto;
}

.open-sessions-wrapper thead th {
    background-color: var(--ui-gray-f5);
}

.open-sessions-wrapper tbody tr {
    /* treated as min-height */
    height: 50px;
}

.open-sessions-wrapper tr > td:last-child {
    text-align: left;
}

.open-sessions-table {
    margin-bottom: 0;
    border: 1px solid var(--ui-gray-d);
}

.open-sessions-table > thead > tr > th,
.open-sessions-table > tbody > tr > td {
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.open-sessions-wrapper .btn-show-session-dates-modal {
    color: var(--ui-primary);
    padding: 0;
    opacity: 0.3;
}

.open-sessions-wrapper .btn-show-session-dates-modal:hover {
    opacity: 1;
}

.open-sessions-buttons {
    width: 160px;
    min-width: 130px;
}

.open-sessions-buttons button.confirm-rejoin-session,
.open-sessions-buttons button.confirm-terminate-session {
    min-width: 90px;
}

.open-sessions-buttons button.confirm-rejoin-session .bi,
.open-sessions-buttons button.confirm-terminate-session .bi {
    margin-right: 2px;
}

.btn-open-session-info-modal {
    margin: 0;
}

#modal-session-info table td:nth-child(2) {
    word-break: break-all;
}

.open-sessions-buttons .bi::before {
    position: relative;
}

.open-sessions-buttons .bi-arrow-clockwise::before {
    transform: scale(1.4);
    top: 1px;
}

#downloads .page-title .bi {
    font-size: 13px;
}

#mod-url {
    word-break: break-word;
}

.loading-icon,
.ready-icon {
    display: none;
    margin-left: 10px;
}

.ready-icon.bi::before {
    transform: scale(1.5);
}

/* MARK: Main Nav */

.main-navigation {
    margin: 5px 0;
    background: var(--ci-bg-primary);
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
    /* do no set overflow: hidden (overflow required for help dropdown) */
}

.main-navigation-pill {
    width: 100%;
    text-align: center;
}

.main-navigation-pill.inactive {
    max-width: 90px;
}

@media (min-width: 768px) {
    body.role-mod .main-navigation-pill {
        max-width: 180px;
    }

    body.role-mod .main-navigation-pill.help,
    body.role-mod .main-navigation-pill.accessability {
        max-width: 75px;
    }

    body.role-mod .main-navigation-pill a:first-child,
    body.role-mod .main-navigation-pill button:first-child,
    body.role-mod .main-navigation-pill a:last-child {
        border-radius: 0;
    }

    body.role-mod .main-navigation-pill:first-child a,
    body.role-mod .main-navigation-pill:first-child button {
        border-left: 1px solid var(--ui-callout-bg);
    }

    body.role-mod .main-navigation-pill:last-child a {
        border-right: 1px solid var(--ui-callout-bg);
    }

    .main-navigation-pill.inactive span:not(.bi) {
        font-size: 12px;
    }

    .main-navigation {
        box-shadow: 0 4px var(--ci-bg-secondary);
        border-radius: var(--ui-content-radius);
    }

    .main-navigation-pill:first-child a,
    .main-navigation-pill:first-child button {
        border-left-width: 0;
        border-top-left-radius: var(--ui-content-radius);
        border-bottom-left-radius: var(--ui-content-radius);
    }

    .main-navigation-pill:last-child a {
        border-right-width: 0;
        border-top-right-radius: var(--ui-content-radius);
        border-bottom-right-radius: var(--ui-content-radius);
    }
}

.main-navigation-pill.help,
.main-navigation-pill.accessability {
    position: relative;
    max-width: 75px;
}

.main-navigation-pill .btn {
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--ui-callout-bg) !important;
    box-shadow: none;
    padding: 7px 6px;
    transition: all 0.25s ease-in-out;
    font-size: 0.9rem;
    line-height: 1;
}

#eyeAble_container_ID {
    position: relative;
    /* below menu dropdown */
    z-index: 999;
}

#eyeAble_smallIconID {
    width: 38px;
    height: 38px;
}

.main-navigation-pill .btn .bi {
    font-size: 22px;
}

.main-navigation-pill .btn .bi::before {
    margin: 0 0 2px 0;
    transform: scale(1);
}

.main-navigation-pill #auth-btn .bi::after {
    content: 'AUTH';
    font-size: 10px;
    font-weight: 600;
    margin-left: 5px;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .main-navigation-pill .btn {
        font-size: 0.9rem;
    }

    .main-navigation-pill .btn .bi {
        font-size: 18px;
    }

    .main-navigation-pill.accessability a {
        padding: 5px;
    }

    #eyeAble_smallIconID {
        width: 31px;
        height: 31px;
    }

    body.role-mod .desktop-menu {
        padding: 0 10px;
    }
}

@media (min-width: 1200px) {
    .main-navigation-pill {
        max-width: 180px;
    }

    .main-navigation-pill a:first-child,
    .main-navigation-pill button:first-child,
    .main-navigation-pill a:last-child {
        border-radius: 0;
    }

    .main-navigation-pill:first-child a,
    .main-navigation-pill:first-child button {
        border-left: 1px solid var(--ui-callout-bg);
    }

    .main-navigation-pill:last-child a {
        border-right: 1px solid var(--ui-callout-bg);
    }
}

.media-div {
    width: 100%;
    /* removed for mod */
    min-height: 50px;
}

.modal-content {
    border-radius: 15px;
}

.nav.nav-pills.labels-info p {
    color: #9d9f9e;
    font-size: 11px;
    margin-bottom: 0;
    padding: 0 22px;
}

.nav-right-box {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    width: 100%;
    margin-top: 5px;
    text-align: right;
}

.navtabs {
    margin-bottom: 0;
}

.nav-right-box .bi-list {
    font-size: 22px;
}

.nav-right-box .dropdown-toggle {
    margin-top: 8px;
    padding: 2px 7px;
}

.nav-right-box > span {
    margin-right: 10px;
}

.navbar-logo {
    /* width: 100%;*/ /* stretches smaller images */
    padding-top: 5px;
    /* svg needs a height */
    height: 60px;
    /* prevent stretching, required because of custom max-width */
    object-fit: contain;
}

.nav-tabs {
    margin-bottom: 25px;
}

#maj-nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    margin: 0.5rem 0 0 0;
}

#maj-nav-tabs > li {
    overflow: hidden;
}

#maj-tab-content .tab-pane {
    background: var(--ui-content-bg);
    border: 1px solid #ddd;
    border-top: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 1rem;
}

.maj-custom-input {
    display: inline-block;
    /* margin-left: 0.25rem; */
}

#maj_radio_set_custom {
    margin-top: 0;
}

.maj-custom-input #maj-qualified-custom-percentage,
.maj-custom-input #maj-set-custom-percentage {
    display: inline-block;
    max-width: 80px;
}

#votings .nav-tabs {
    margin-bottom: 0;
}

.nav-tabs > li {
    font-weight: 600;
}

.section-divider {
    float: left;
    width: 100%;
    margin: 0.75rem 0;
    border-color: var(--ui-gray-d);
}

.desktop-menu {
    display: flex;
}

.desktop-menu > a {
    display: flex;
    align-items: center;
}

.desktop-menu .menu-user-info .bi,
.desktop-menu .menu-project-info .bi {
    font-size: 10px;
}

.menu-info {
    display: inline-block;
    font-size: 12px;
    margin-top: 5px;
    margin-right: 15px;
    border-right: 1px solid #ccc;
    padding-right: 15px;
    min-height: 44px;
}

.menu-info:first-child {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.menu-user-info {
    margin-right: 15px;
    border-right: 1px solid #ccc;
    padding-right: 15px;
}

.menu-info .bi-star::before,
.menu-info .bi-plus-circle::before,
#user-data-form .bi-star::before,
#user-data-form .bi-plus-circle::before {
    transform: scale(1);
}

.no-borders {
    border-left: 0;
    border-right: 0;
}

.page-panel .inline-box-right {
    min-width: 86px;
    justify-content: flex-end;
}

.page-picture {
    text-align: right;
}

.page-title,
.question-title,
.question-subtitle {
    color: var(--ui-gray-3);
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.page-title:not(.bold),
.question-subtitle {
    font-size: 12px;
}

body.role-mod .page-title,
body.role-mod .question-title,
body.role-mod .question-subtitle {
    align-self: center;
}

.inline-box-left:first-child .page-title,
.inline-box-left:first-child .question-title,
.inline-box-left:first-child .question-subtitle {
    margin-left: 0;
}

.tm-list-item-outer:not(:last-child) {
    margin-bottom: 8px;
}

#pres-inactive-toggle {
    cursor: pointer;
}

.pres-list-inactive .tm-list-item-outer {
    color: #aaa;
}

.pres-list-inactive .inline-box-left .bi {
    color: #aaa;
}

.tm-list-item {
    background: var(--ui-callout-bg);
    background-image: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(236, 236, 236, 1) 100%);
    background-image: linear-gradient(180deg, var(--ui-gray-f5) 0%, var(--ui-gray-e) 100%);
    font-weight: 600;
    font-size: 15px;
    float: left;
    width: 100%;
    display: flex;
    padding: 4px 10px;
    border-radius: 5px;
}

.tm-list-item:not(:only-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.row:not(:first-child) .tm-list-item {
    margin-top: 10px;
}

.tm-list-item.has-sessions {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.loading-spinner {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -25px;
    background: var(--ui-content-bg);
    border-radius: 100%;
    box-shadow: 0 0 50px 50px #fff;
}

.accordion .accordion-item,
.card {
    /* border-color: var(--ui-gray-d); */
    border-radius: 0;
    /* box-shadow: none; */
}

#questions li:not(:first-child):not(.ui-sortable-helper) .accordion-item {
    border-top: 0;
}

/* show all border while dragging */

li.ui-sortable-helper .accordion-item {
    border-top: 1px solid var(--ui-gray-d);
}

#draggable-pages .accordion-item,
#draggable-quiz .accordion-item,
#draggable-categories .accordion-item,
.draggable-questions .accordion-item,
#quiz-categories .accordion-item,
#quiz-questions .accordion-item {
    margin-bottom: 8px;
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

#wrapper-add-slide .accordion-button,
#accordion_add_question .accordion-button,
#draggable-questions .accordion-button,
#quiz-categories .accordion-button,
#quiz-questions .accordion-button {
    padding: 0.5rem;
    background: none;
    font-size: inherit;
}

/* move the bottom-border from the button to the header to include the buttons on the right */
#draggable-questions .accordion-button {
    box-shadow: none;
}

#draggable-questions .accordion-header:has(.accordion-button:not(.collapsed)) {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

/* #accordion_add_question .accordion-button:not(.collapsed),
#draggable-questions .accordion-button:not(.collapsed),
#quiz-categories .accordion-button:not(.collapsed),
#quiz-questions .accordion-button:not(.collapsed) {
    background-color: inherit;
} */

#draggable-questions .bi-grip-vertical,
#draggable-pages .bi-grip-vertical,
#draggable-categories .bi-grip-vertical,
.draggable-questions .bi-grip-vertical {
    font-size: 1rem;
    cursor: ns-resize;
    color: #999;
}

#draggable-questions.vote-type-20 .q-title-box,
#draggable-questions.vote-type-70 .q-title-box,
#draggable-questions.vote-type-20 .page-num,
#draggable-questions.vote-type-70 .page-num,
#draggable-pages .page-panel,
#draggable-categories .page-title,
.draggable-questions .page-title {
    cursor: ns-resize;
}

.accordion-body {
    background-color: var(--ui-gray-f5);
}

#accordion_register_invite .accordion-body,
#accordion_register_optin .accordion-body,
#accordion_register_reminder .accordion-body,
#accordion_info_top .accordion-body,
#accordion_info_bottom .accordion-body {
    background-color: var(--ui-content-bg);
}

.accordion-body h5 {
    font-weight: 600;
}

.row.qtype-option.qtype-is-required {
    margin-top: 1rem;
}

.chart-scheme-options .scheme-row {
    padding: 0.25rem;
    background: var(--ui-content-bg);
}

.chart-scheme-options .dropdown-menu {
    width: 300px;
    padding: 0.75rem;
}

.chart-scheme-options .dropdown-menu li {
    padding: 0.1rem 0.25rem;
}

.chart-scheme-options .dropdown-menu li > div {
    display: flex;
    width: 100%;
    padding: 0;
}

.chart-scheme-options .color-step {
    width: 100%;
    height: 15px;
}

.chart-scheme-options .color-step:not(:first-child) {
    width: 100%;
    height: 15px;
    margin-left: 2px;
}

#vote-results-list .options {
    display: flex;
    justify-content: center;
    column-gap: 0.25rem;
}

#vote-results-list .chart-scheme-options {
    display: inline-flex;
    width: 100%;
    max-width: 200px;
    margin-left: 0.25rem;
    /* padding-right: 0.5rem; */
    border: 1px solid var(--ui-gray-d);
    border-radius: 2rem;
}

#vote-results-list .chart-scheme-options .btn.dropdown-toggle,
#vote-results-list .chart-scheme-options #btn-reset-color-scheme {
    border: 0;
    margin: 0 !important;
    background-color: var(--ui-gray-f5);
}

#vote-results-list .chart-scheme-options .btn.dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#vote-results-list .chart-scheme-options #btn-reset-color-scheme {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#vote-results-list .chart-scheme-options .btn.dropdown-toggle:hover,
#vote-results-list .chart-scheme-options #btn-reset-color-scheme:hover {
    background-color: var(--ui-gray-d);
}

.accordion-body.bg-white {
    background: var(--ui-content-bg);
}

.modal .card,
.modal .accordion {
    /* background-color: var(--ci-bg-primary); */
    border-color: var(--ci-bg-primary);
}

.modal .card > .card-header,
.modal .accordion .accordion-button {
    background-color: var(--ci-bg-primary);
    border: 1px solid var(--ci-bg-primary);
}

#feed-expiration-wrapper .col-sm-4 {
    padding-left: 0;
}

.accordion-header {
    display: flex;
    text-align: left;
    /* for last-edit marker */
    position: relative;
}

#downloads .accordion-item {
    margin-bottom: 10px;
}

#downloads .accordion-header {
    padding: 5px 15px;
    background: var(--ui-gray-f5);
}

#draggable-pages .accordion-header {
    padding: 0 10px 0 0;
}

/* #questions_div .accordion-header:hover { */
.accordion-header:hover {
    background: var(--ui-gray-f5);
}

.accordion-header > div,
.tm-list-item > div {
    align-self: center;
}

.accordion-header .page-num {
    display: inline-block;
    min-width: 15px;
    text-align: center;
    color: #999;
}

body.role-mod .accordion-header .page-num {
    margin-left: 3px;
}

.accordion-header img {
    max-height: 46px;
    border: 0;
    padding: 5px;
    background: none;
}

#pins_table,
#quiz_categories_table {
    margin-top: 40px;
}

.pointer {
    cursor: pointer;
}

/* question types modal opener btn */
label button[data-bs-toggle='modal'] {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 4px;
}

.popover {
    color: #555;
    max-width: 100%;
    width: 100%;
    max-width: none;
    width: 300px;
    pointer-events: none;
}

.pell-content .popover {
    width: auto;
}

h3.popover-header {
    color: #555;
    font-family: var(--ui-font);
    font-size: 14px;
    margin: 0;
}

.btn-popover {
    border: 0;
    background-color: transparent;
    padding: 0;
}

.popover-body {
    word-break: break-word;
}

.popover-body ul {
    padding-inline-start: 1rem;
}

/* configuration.php */

.popover-body .show_usercount_preview {
    background: url(/img/show_usercount_preview.png) no-repeat;
    background-size: contain;
    height: 268px;
}

.popover-body .iframe_question_preview {
    background: url(/img/iframe_question_preview.png) no-repeat;
    background-size: contain;
    height: 217px;
}

.popover-body .iframe_question_min_preview {
    background: url(/img/iframe_question_min_preview.png) no-repeat;
    background-size: contain;
    height: 100px;
}

/* edit_vote.php */

.popover-body .tooltip_vote_progress_bar {
    background: url(/img/tooltip_vote_progress_bar.png) no-repeat;
    background-size: contain;
    height: 35px;
}

.popover-body .uq_title_preview {
    background: url(/img/user_questions_title_preview.png) no-repeat;
    background-size: contain;
    height: 183px;
}

.popover-body .toggle_element_header {
    background: url(/img/toggle_element_header.png) no-repeat;
}

.popover-body .toggle_element_footer {
    background: url(/img/toggle_element_footer.png) no-repeat;
}

.popover-body .toggle_element_logo {
    background: url(/img/toggle_element_logo.png) no-repeat;
}

.popover-body .toggle_element_lang {
    background: url(/img/toggle_element_lang.png) no-repeat;
}

.popover-body .toggle_element_menu {
    background: url(/img/toggle_element_menu.png) no-repeat;
}

.popover-body .toggle_element_header,
.popover-body .toggle_element_footer,
.popover-body .toggle_element_logo,
.popover-body .toggle_element_lang,
.popover-body .toggle_element_menu {
    background-size: contain;
    height: 268px;
}

.modal .feature-table .popover ul {
    padding-left: 20px;
    margin-bottom: 0;
}

#table-compare-license-category th {
    background: none;
    font-size: 11px;
    font-weight: bold;
    border-bottom: 0;
    text-transform: uppercase;
    padding: 0;
}

#table-compare-license-category th div {
    padding: 5px 8px 8px 8px;
    height: 26px;
}

#table-compare-license-category th:nth-child(3) {
    position: relative;
    background: rgba(94, 149, 154, 0.2);
}

#table-compare-license-category th:nth-child(4) {
    position: relative;
    background: rgba(217, 29, 75, 0.15);
}

#table-compare-license-category th:nth-child(3)::before,
#table-compare-license-category th:nth-child(4)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 13px solid transparent;
    border-top: 13px solid #fff;
    border-left: 13px solid #fff;
}

#table-compare-license-category th:nth-child(3)::after,
#table-compare-license-category th:nth-child(4)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border: 13px solid transparent;
    border-top: 13px solid #fff;
    border-right: 13px solid #fff;
}

.disabled-features-preview ul {
    padding-inline-start: 25px;
}

.disabled-features-preview #table-compare-license-category th:nth-child(3)::before,
.disabled-features-preview #table-compare-license-category th:nth-child(4)::before {
    border-top-color: #f3f3f3;
    border-left-color: #f3f3f3;
}

.disabled-features-preview #table-compare-license-category th:nth-child(3)::after,
.disabled-features-preview #table-compare-license-category th:nth-child(4)::after {
    border-top-color: #f3f3f3;
    border-right-color: #f3f3f3;
}

#table-compare-license-type th:nth-child(2),
#table-compare-license-type th:nth-child(5),
#table-compare-body td:nth-child(2),
#table-compare-body td:nth-child(5) {
    border-right: 1px solid #ddd;
}

.btn-pre-delete-quiz-result,
.btn-pre-delete-exam-result {
    margin: 15px 0;
}

.presentation-logo,
.configuration-logo {
    /* width: 100%;*/ /* stretches smaller images */
    /* max-width: 400px;*/ /* keep max-width at 100% for responsive */
    /* svg needs a height */
    min-height: 100px;
    max-height: 150px;
    margin-bottom: 10px;
    /* prevent stretching */
    object-fit: contain;
}

/* TODO move2tm */
.presentation-name {
    display: flex;
    align-self: center;
}

.pres-actions {
    align-self: center;
}

.pres-actions .btn-2-icons {
    position: relative;
    padding-left: 11px;
    padding-right: 11px;
}

.pres-actions .btn-2-icons .bi-gear-fill {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
}

.pres-actions .btn-2-icons .bi-play-fill {
    position: relative;
    top: -1px;
    left: 7px;
}

#projects-list {
    position: relative;
    margin-bottom: 50px;
}

.project-box {
    width: 100%;
    color: #fff;
    text-align: center;
    font-weight: 600;
    margin-bottom: 5px;
    background: #666;
    border: 0;
    padding: 8px 15px;
    border-radius: 1rem;
    transition: all 0.25s linear;
}

.project-box:hover {
    background-color: var(--ci-bg-secondary);
    color: #fff;
}

.project-box-spa {
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 4px 12px;
}

.project-box-spa div {
    width: 100%;
}

.project-box-spa div:nth-child(2) {
    width: auto;
    white-space: nowrap;
}

.project-box-spa .project-name {
    text-align: center;
}

.item-search-highlight {
    background: rgba(255, 200, 0, 0.35);
    /* color: #000; */
}

.project-link:hover {
    text-decoration: none;
}

.question-div {
    width: 80%;
    float: left;
    height: 100%;
}

#quiz_categories_table {
    background-color: #fff;
}

body.role-padmin .question-link {
    cursor: pointer;
}

.question-panel {
    padding: 5px;
}

#accordion_add_question .question-panel,
#accordion_add_survey_question .question-panel,
#accordion_add_survey_section_text .question-panel,
#accordion_add_survey_section_header .question-panel,
#accordion_add_survey_personal_field .question-panel {
    padding: 5px 10px;
}

.eval-sides-wrapper {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

body.role-mod .eval-sides-wrapper {
    border-bottom: 1px solid var(--ui-gray-d);
}

.eval-sides-wrapper aside {
    display: table-cell;
    float: none;
    height: 100%;
    padding: 0;
    vertical-align: top;
}

.eval-sides-wrapper .sm-side {
    width: 25%;
    height: 100%;
    border-right: 1px solid var(--ui-gray-d);
    border-bottom-left-radius: 5px;
}

.eval-sides-wrapper .lg-side {
    width: 75%;
    border-bottom-right-radius: 5px;
    overflow-y: auto;
}

.eval-sides-wrapper .lg-side .col-sm-6 {
    max-height: 40px;
}

.eval-sides-wrapper .sm-side .files-header,
.eval-sides-wrapper .lg-side .charts-header {
    display: flex;
    align-items: center;
    background-color: var(--ci-bg-primary);
    height: 40px;
    padding: 0.5rem;
}

.eval-sides-wrapper .sm-side .files-header h5,
.eval-sides-wrapper .lg-side .charts-header h5 {
    margin-bottom: 0;
}

.eval-sides-wrapper .sm-side .options {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-gray-d);
    background: #eee;
}

#auxiliary-wrapper {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    font-size: 0.8rem;
    align-items: flex-start;
    overflow-y: auto;
}

.table-majorities {
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    border-style: hidden;
    border-radius: 8px;
    margin: 0.5rem;
}

.table-majorities td {
    vertical-align: top;
    text-align: left;
    padding: 0.125rem 0.5rem 0.5rem 0.5rem;
}

.table-majorities tr:first-child td {
    padding-top: 0.25rem;
}

.table-majorities tr:last-child td {
    padding-bottom: 0.25rem;
}

#maj-table td:nth-child(2),
#maj-table td:nth-child(4),
#maj-table td:nth-child(6):not(:last-child),
#writein-table td:nth-child(2):not(:last-child),
#writein-table td:nth-child(4):not(:last-child),
#two-axis-table td:nth-child(1):not(:last-child),
#two-axis-table td:nth-child(3):not(:last-child),
#two-axis-table td:nth-child(4):not(:last-child),
#two-axis-table td:nth-child(6):not(:last-child),
#approval-table td:nth-child(1),
#approval-table td:nth-child(3):not(:last-child) {
    border-right: 2px solid #ddd;
}

#bee-table-info tr.b-top,
#bee-table tr.b-top {
    border-top: 2px solid #ddd;
}

#bee-table-info td:first-child,
#bee-table-info th:first-child {
    vertical-align: middle;
}

td.bee-table-result-icon {
    text-align: center;
}

.bee-table-result-icon span::before {
    /* font-size: 1.25rem; */
    transform: scale(2);
}
.bee-table-result-icon .bi-check {
    color: #0a0;
}
.bee-table-result-icon .bi-x {
    color: red;
}

#bee-table td.bee-table-valid-note {
    font-size: 13px;
    padding-top: 0.5rem;
}

.table-majorities.table-noerr td {
    padding-bottom: 0.25rem;
}

#select-winner,
#select-winner-exam {
    font-size: 16px;
    padding-bottom: 20px;
}

span.required-hint {
    color: red;
    font-weight: 600;
}

table.question-info,
table.survey-question-info {
    width: 100% !important;
}

td.description {
    width: 30%;
    vertical-align: top;
}

.question-info td.description {
    width: 200px;
}

td.position-cell {
    width: 15%;
    color: #000;
    font-weight: normal;
}

td.name-cell {
    color: #000;
    font-weight: normal;
}

@media (min-width: 768px) {
    .ui-tab-menu {
        align-self: flex-start;
        position: -webkit-sticky;
        position: sticky;
        top: 15px;
    }
}

.ui-tab-menu .list-group {
    /* margin-bottom: 0; */
}

.ui-tab-menu .list-group > a {
    /* margin-bottom: 0; */
    /* border-left: 0; */
    /* border-right: 0; */
    transition: all 0.25s ease-in-out;
}

.ui-tab-menu .list-group > a .bi {
    margin: 5px 8px 5px 0;
}

.ui-tab-menu .list-group > a.list-group-item {
    border-top: none;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid var(--ui-gray-d);
    display: flex;
    padding: 10px;
}

#page-presentations .ui-tab-menu .list-group > a.list-group-item {
    padding: 7px 8px;
}

.ui-tab-menu .list-group > a:first-child {
    border-top: 1px solid transparent;
}

.ui-tab-menu .list-group > a:last-child {
    border-color: transparent;
}

.ui-tab-menu .list-group > a.active {
    background: var(--ci-bg-primary);
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    margin-top: 0;
}

.ui-tab-menu .list-group > a::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 66%;
    margin-top: -13px;
    border: 0 solid transparent;
}

.ui-tab-menu .list-group > a.active::after {
    top: 50%;
    border: 13px solid transparent;
    border-left: 10px solid var(--ci-bg-primary);
    transition: all 0.25s ease-in-out;
}

.ui-tab-menu .list-group > a.list-group-item > h4,
.ui-tab-menu .list-group > a.list-group-item > span {
    align-self: center;
    font-weight: 600;
}

.ui-tab-menu .list-group > a.list-group-item > h4.bi {
    font-size: 20px;
}

.ui-tab-menu .list-group > a.list-group-item > h4.bi-play-fill {
    transform: scale(1.5);
    position: relative;
    /* top: -3px; */
}

.ui-tab-menu .list-group > a.list-group-item:first-child {
    border-top-left-radius: var(--ui-content-radius);
    border-top-right-radius: var(--ui-content-radius);
}

.ui-tab-menu .list-group > a.list-group-item:last-child {
    border-bottom-left-radius: var(--ui-content-radius);
    border-bottom-right-radius: var(--ui-content-radius);
}

.ui-tab-menu .list-group > a.list-group-item.inactive {
    background: #eee;
    color: #888;
    border-color: #ddd;
}

.ui-tab-menu .list-group > a.list-group-item.inactive .bi {
    color: #aaa;
}

.ui-tab {
    position: relative; /* for pres-loading spinner */
    padding: 0 0 0 16px;
}

.ui-tab-content {
    padding: var(--ui-content-padding);
}

.ui-tab-content .tab-header {
    position: relative;
    margin: 0 0 20px 35px;
    font-size: 20px;
}

.ui-tab-content .tab-header::before {
    position: absolute;
    left: -30px;
    opacity: 0.33;
    font-size: 24px;
    transition: all 2s ease-in-out;
}

.ui-tab-content .tab-header .btn-default {
    margin-top: -0.5rem;
}

.ui-tab-content h4.tab-header {
    font-size: 18px;
}

.ui-tab-content h4.tab-header::before {
    font-size: 20px;
}

.ui-box h3 > .bi {
    font-size: 24px;
    position: relative;
    opacity: 0.33;
    transition: all 2s ease-in-out;
}

.ui-tab-content .tab-header:hover::before,
.ui-box h3:hover > .bi {
    color: var(--ci-bg-secondary);
    opacity: 0.75;
}

@media (min-width: 768px) {
    .ui-tab-container {
        display: flex;
    }

    .ui-tab-menu {
        width: 18%;
        min-width: 225px;
    }

    .ui-tab {
        flex-grow: 1;
    }
}

.min-w-125 {
    min-width: 125px;
}
.min-w-150 {
    min-width: 150px;
}
.min-w-175 {
    min-width: 175px;
}

.max-w-md {
    width: 100%;
    max-width: 738px;
    margin: 0 auto;
}

.max-w-lg {
    max-width: 962px;
    margin: 0 auto;
}

.max-w-xl {
    max-width: 1170px;
    margin: 0 auto;
}

.ui-box.p-0 .max-w-md,
.ui-box.p-0 .max-w-lg,
.ui-box.p-0 .max-w-xl {
    padding: 15px 30px;
    border-radius: var(--ui-content-radius);
}

@media (max-width: 1199px) {
    .ui-box.p-0 .max-w-xl {
        background: var(--ui-content-bg);
        padding: 15px;
    }
}

@media (max-width: 991px) {
    .ui-box.p-0 .max-w-lg,
    .ui-box.p-0 .max-w-md {
        background: var(--ui-content-bg);
        padding: 15px;
    }

    .ui-box.p-0 {
        background: var(--ui-content-bg);
    }

    body.layout-tm .ui-nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 10px 5px;
    }
}

@media (max-width: 767px) {
    .ui-box.p-0 .max-w-md,
    .ui-box.p-0 .max-w-lg,
    .ui-box.p-0 .max-w-xl {
        border-radius: 0;
    }

    body.layout-tm .ui-nav-tabs .nav-link {
        padding: 10px;
    }
}

.ui-tab-container.ui-pad-sm .ui-tab-content {
    padding: var(--ui-content-padding);
}

.ui-tab-content .colors .row {
    margin-bottom: 5px;
}

.ui-tab .ui-tab-content:not(.active) {
    display: none;
}

#sessions_history.tab-pane,
#tournament_sessions.tab-pane,
#audience-questions-list.tab-pane,
#chat_messages.tab-pane {
    padding: var(--ui-content-padding);
    padding-top: 0;
}

ul.labels-info {
    height: 500px;
    overflow-y: scroll;
    flex-wrap: nowrap;
    /* border-bottom-left-radius: 5px; */
}

#quiz_scores ul.labels-info,
#knowledge_check_scores ul.labels-info {
    height: 500px;
}

ul.labels-info li {
    position: relative;
    width: 100%;
    height: auto;
    color: var(--ui-gray-6);
    background-color: var(--ui-content-bg);
    margin: 0;
    border-bottom: 1px solid var(--ui-gray-d);
}

ul.labels-info h6,
ul.labels-info li {
    font-size: 13px;
}

ul.labels-info .file-date {
    display: block;
    font-size: 12px;
}

ul.labels-info input {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

ul.labels-info li .entry:hover,
ul.labels-info li .entry:focus,
ul.labels-info li .entry.active {
    color: var(--ui-gray-3);
    cursor: pointer;
    background-color: var(--ui-callout-bg);
}

ul.labels-info li h6 {
    margin: 0 0 0 17px;
    line-height: 1.5;
}

ul.labels-info li h6 .bi {
    margin-left: -17px;
}

ul.labels-info li .entry {
    padding: 8px 28px 8px 8px;
}

ul.labels-info li .entry .bi {
    display: inline-block;
    width: 14px;
}

ul.labels-info li .entry .bi::before {
    transform: scale(1.15);
}

.video-container {
    background: #efefef;
    padding: 15px 15px 0px 15px;
    margin-top: 50px;
    outline: 2px dashed #efefef;
    outline-offset: 8px;
}

.vid {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 30px;
}

.vid iframe,
.vid object,
.vid embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-mobile-headline {
    display: none;
    margin: 0px;
}

.image-preview-box {
    text-align: center;
    margin-top: 3px;
    margin-bottom: 0.5rem;
}

.page-preview {
    position: absolute;
    width: 267px;
    height: 200px;
    background: #fff;
    box-shadow: 0px 0px 5px #999;
    left: 0;
    top: -200px;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.quiz-question-download-remove.qqd-doc {
    margin-left: 0.5rem;
}

.input-group-file,
.input-group-follow-up {
    padding: 2px 0 0 1.5rem;
}

.input-group-file .input-group,
.input-group-follow-up .input-group {
    width: 100%;
}

.input-group-file .input-group .form-control,
.input-group-follow-up .input-group .form-control {
    border-radius: 0;
}

#form-edit-question .question-image-preview,
#form-edit-survey-question .question-image-preview {
    max-height: 150px;
    max-width: 100%;
}

.controls .entry,
.edit-controls .edit-entry,
.qtype-abstention-option,
.qtype-writein-option {
    margin-bottom: 10px;
}

.entry img,
.edit-entry img {
    min-width: 30px;
    min-height: 20px;
    max-height: 100px;
}

.input-group-text:not(.btn) {
    background: var(--ui-gray-e);
}

.qtype-answer-options .input-group .input-group-text.options-label,
.qtype-twostep-options .input-group .input-group-text.options-label,
#add_survey_question .entry .input-group .input-group-text.options-label,
.input-group-file .input-group-text:first-child,
.input-group-follow-up .input-group-text:first-child {
    /* min-width: 65px; */
}

.input-group .input-group-text.options-label {
    border-right: 0;
}

.draggable-options .options-label {
    padding-left: 0.25rem;
    cursor: ns-resize;
}

.option-item:only-child .btn-danger.btn-remove-option {
    display: none;
}

/* Tedme Free Upgrade */

/* Max Presentation Top-Box */

#max-presentation {
    background-color: #daeef7;
    padding: 20px 20px 20px 20px;
    margin: 10px 0 10px 0;
}

.notification {
    margin: 10px 10px 10px 10px;
}

.flag-logo {
    padding-top: 10px;
    padding-right: 20px;
    height: 55px;
    float: left;
}

.project-intro p {
    font-size: 14px;
}

#overview {
    padding: 0;
}

#auth_info,
#exam-teaser {
    padding: 15px;
    background: var(--ui-gray-f5);
    border-radius: 5px;
    margin-top: 10px;
}

/* Upgrade-Boxen */
.upgrade-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

.contact-wrapper {
    margin-top: 2.5rem;
}

@media (max-width: 768px) {
    .upgrade-wrapper {
        margin-top: 2.5rem !important;
    }
}

.upgrade-wrapper,
.contact-wrapper {
    transform: scale(1);
    transition: transform 0.1s linear;
}

.upgrade-wrapper,
.contact-wrapper {
    font-size: 0.8rem;
}

.upgrade-wrapper h4,
.contact-wrapper h4 {
    font-size: 0.9rem;
}

.upgrade-wrapper:hover,
.contact-wrapper:hover {
    transform: scale(1.025);
}

.upgrade-wrapper a,
.contact-wrapper a {
    box-shadow: 0 0 5px var(--ui-shadow);
}

.upgrade-box,
.contact-box {
    display: block;
    background-color: #5e959a;
    padding: 10px;
    color: #fff;
    text-align: center;
    height: 100%;
    border-radius: var(--ui-content-radius);
}

.contact-box {
    background-color: #d91d4b;
}

.upgrade-box h4,
.upgrade-box span,
.contact-box h4,
.contact-box span {
    color: #fff;
    margin-top: 0;
}

.vorteil-logo {
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -60px;
    margin-bottom: 0px;
}

.vorteil-logo.calendar {
    height: 70px;
    margin: -50px auto 10px auto;
}

#history-table {
    font-size: 12px;
}

#history-table table {
    background: none;
}

#history-table tr.failed td {
    background: #fdd;
}

#history-table.table-sm td,
#history-table.table-sm th {
    padding: 2px;
}

#inbox-body h4 {
    position: relative;
}

#cloud-export {
    position: absolute;
    right: 0;
}

#auth-list-invite-all-count,
#auth-list-remind-all-count {
    font-weight: 600;
}

.sv-reminder-state {
    font-size: 85%;
    line-height: 1.25;
}

.sv-reminder-state .btn-popover {
    font-size: 1.25rem;
}
.sv-reminder-state .btn-popover .green {
    color: green;
}
.sv-reminder-state .btn-popover .orange {
    color: orange;
}
.sv-reminder-state .btn-popover .blue {
    color: skyblue;
}

.auth-user-email-enabled.bi::before,
.auth-user-email-sent.bi::before {
    margin-left: 0.25rem;
    transform: scale(1.25);
}

.auth-user-email-enabled.bi::before {
    color: orange;
}

.auth-user-email-sent.bi::before {
    color: green;
}

/* hide "check-icon" if email has not been sent yet */
/* Update 30.01.23: Datatables does no longer seem to return placeholder values of 0, instead it returns an empty string*/
/* see load_confirmed_users_datatable edit_column('invite_email_sent') */
.auth-user-email-enabled.enabled-1,
.auth-user-email-sent.sent-0,
.auth-user-email-sent.sent-
/* hide "mark-as-used" button if already used */
/* .auth-pin-mark-used.used-1 */ {
    display: none;
}

.btn-auth-user-send-email.enabled-,
.btn-auth-user-send-email.enabled-0,
.btn-auth-user-send-email.sent-1 {
    margin-left: 0.25rem;
    padding: 4px 8px;
    font-size: 11px;
}

#plan_event_reminder .btn-auth-user-send-email.sent-1 {
    opacity: 0.75;
}

#auth-list-email-box,
.wrapper-mail-body {
    position: relative;
    padding: 15px;
    background: #eee;
    background: var(--ui-callout-bg);
}

#auth-list-email-box img,
.wrapper-mail-body img {
    max-width: 200px;
    max-height: 60px;
}

#auth-list-email-box::before,
.wrapper-mail-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-width: 32px 32px 0 0;
    border-style: solid;
    border-color: #fff var(--ui-gray-d);
    border-color: var(--ui-content-bg) var(--ui-gray-d);
}

.pell-button {
    width: fit-content;
    /* padding: 0rem 1rem; */
    min-width: 25px;
    margin-right: 1px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: darkgray;
}

.pell-button[title='Convert to plain text / remove all HTML-tags'],
.pell-button[title='Zu Klartext konvertieren / alle HTML-Tags entfernen'] {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

#auth-list-email-box #editor .pell-actionbar,
.wrapper-mail-body .pell-actionbar {
    padding: 0.25rem;
    background: var(--bs-body-bg);
}

#auth-list-email-box #editor .pell-content,
.wrapper-mail-body .pell-content {
    background: var(--ui-content-bg);
}

html[data-bs-theme='dark'] #auth-list-email-box .form-control,
html[data-bs-theme='dark'] .wrapper-mail-body .form-control {
    background: #555;
}

#modal-send-pending-auth-user-emails table th,
#modal-send-pending-auth-user-emails table td {
    border-color: #ce919b;
}

.wrapper-login-types {
}

.login-type-checkbox {
    margin-bottom: 0.5rem;
}

.login-type-checkbox label {
    display: flex;
    align-items: center;
}

/* break chat text */
#table-chat-messages td:nth-child(6) {
    word-break: break-word;
}

.chat-emoji {
    width: 24px;
    height: 24px;
    margin-top: -3px;
}

/* MARK: Custom CSS for Mobile Devices */

.separator-text {
    display: flex;
    align-items: center;
    text-align: center;
}

.separator-text::before,
.separator-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--bs-border-color);
}

.separator-text:not(:empty)::before {
    margin-right: 1em;
}

.separator-text:not(:empty)::after {
    margin-left: 1em;
}

@media (max-width: 850px) {
    #maj-nav-tabs .nav-link {
        padding: 6px 10px;
    }
}

@media (max-width: 767px) {
    .container-fluid {
        width: 100%;
    }

    body > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .ui-box,
    .ui-tab-content,
    .ui-tab-menu .list-group,
    body.role-mod .breadcrumb,
    .breadcrumb,
    .stats-chart,
    .ui-tab-menu .list-group > a.list-group-item:first-child,
    .ui-tab-menu .list-group > a.list-group-item:last-child {
        border-radius: 0;
    }

    .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .main-navigation {
        background: none;
    }

    body.role-mod .main-navigation-pill {
        width: 50% !important;
    }

    body.role-admin .main-navigation-pill,
    body.role-padmin .main-navigation-pill {
        width: 33.3333%;
        max-width: unset;
        background: var(--ci-bg-primary);
    }

    body.role-cadmin .main-navigation-pill {
        width: 33.3333%;
    }

    .main-navigation-pill {
        border-bottom: 1px solid var(--ui-content-bg);
    }

    .main-navigation-pill.help {
        display: none;
    }

    .main-navigation-pill br,
    .main-navigation-pill #auth-btn .bi::after {
        display: none !important;
    }

    .navbar-logo {
        max-height: 55px;
        padding-bottom: 5px;
    }

    .ui-tab-container {
        margin-top: 0px;
    }

    .container {
        padding-bottom: 0px;
    }

    /* Menü */
    body.role-mod .desktop-menu,
    body.role-padmin .desktop-menu,
    body.role-cadmin .desktop-menu {
        display: none;
    }

    .navtabs .navitem {
        float: left;
        list-style-type: none;
    }

    .navtabs .navitem .dropdown-toggle {
        width: 50px;
        height: 50px;
        padding: 8px;
        font-size: 16px;
    }

    .navtabs .navitem:first-child .dropdown-toggle.btn-ui {
        border-right-color: var(--ui-content-bg);
    }

    .navtabs .navitem .btn {
        border-radius: 0px;
    }

    .main-navigation {
        flex-wrap: wrap;
    }

    body.role-mod .main-navigation,
    body.role-padmin .main-navigation,
    body.role-cadmin .main-navigation {
        margin: 55px 0 0 0;
    }

    body.role-mod h3.start,
    body.role-padmin h3.start,
    body.role-cadmin h3.start {
        margin-top: 80px;
    }

    .main-navigation .btn-ui {
        width: 100%;
        padding: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main-navigation-pill:nth-child(3) .btn {
        border-right: 0;
    }

    /* Upgrade Boxen */
    .upgrade-box {
        border-right: 0px;
    }

    /* Vorträge */
    .ui-tab-menu {
        width: 100%;
        margin-bottom: 15px;
    }

    .ui-tab-menu .btn-ui {
        /* display: none; */
    }

    .ui-tab-menu .list-group {
        margin-bottom: 0px;
        color: white;
    }

    .ui-tab-menu .list-group > a.list-group-item {
        border-radius: 0px;
        border-right: 0px;
        border-left: 0px;
        padding: 5px 15px;
    }

    .ui-tab-menu .list-group > a.active::after {
        display: none;
    }

    .ui-tab-menu .list-group > a.list-group-item:first-child {
        border-top: 0;
    }

    .ui-tab {
        width: 100%;
        padding-left: 0px;
    }

    .tm-list-item .col-5 {
        width: 100%;
    }

    /* Presentations */

    #folien,
    #questions,
    #config {
        margin-top: 12px;
    }

    /* Votings */
    body:not(.layout-kikom) .ui-nav-tabs .nav-link.active::after {
        display: none;
    }

    body:not(.layout-kikom) .ui-nav-tabs {
        margin-bottom: 10px;
    }

    body:not(.layout-kikom) #main-nav-tabs li {
        width: 33.3333%;
        margin-bottom: 0px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    body:not(.layout-kikom) .ui-nav-tabs .nav-link {
        background-color: var(--ci-bg-primary);
        color: #fff;
        text-align: center;
        border-radius: 0px !important;
    }

    body:not(.layout-kikom) .ui-nav-tabs .nav-link.active,
    body:not(.layout-kikom) .ui-nav-tabs .nav-link:focus,
    body:not(.layout-kikom) .ui-nav-tabs .nav-link.active:focus,
    body:not(.layout-kikom) .ui-nav-tabs .nav-link:hover,
    body:not(.layout-kikom) .ui-nav-tabs .nav-link.active:hover {
        background-color: var(--ci-bg-secondary);
        color: #fff;
    }

    #table-qa-entries_filter label {
        display: block;
        margin-top: 5px;
    }
}

@media (max-width: 600px) {
    body.role-admin .main-navigation-pill,
    body.role-padmin .main-navigation-pill {
        width: 50% !important;
    }

    .main-navigation-pill:nth-child(odd) .btn {
        border-right: 1px solid var(--ui-content-bg);
    }
}

/* custom xxs breakpoint */

@media (max-width: 480px) {
    .col-xxs-12 {
        width: 100%;
    }

    body:not(.layout-kikom) #main-nav-tabs li {
        width: 50%;
    }
}

@media (max-width: 425px) {
    /* Votings */
    .ui-nav-tabs .col-sm-4 {
        width: 100%;
        float: left;
    }

    .ui-nav-tabs .col-md-2 {
        width: 50%;
        float: left;
    }

    .ui-nav-tabs .form-control {
        width: 98%;
    }

    .eval-sides-wrapper .sm-side {
        width: 33%;
    }

    .eval-sides-wrapper .lg-side {
        width: 66%;
        overflow-y: auto;
    }

    #sm-side-quiz {
        width: 42%;
    }

    /* Moderators */
    #users-table_length {
        width: 50%;
        float: left;
    }

    #users-table_filter {
        width: 50%;
        float: left;
    }

    #users-table_filter input {
        width: 70%;
    }
}

/*** Auth List PIN Print ***/

html.print_pin_tab,
html.print_pin_tab body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    font-family: sans-serif;
    font-weight: 600;
}

html.print_pin_tab.ppp-1 td {
    width: 100%;
    height: 100%;
    font-size: 64px;
}

html.print_pin_tab.ppp-2 td {
    width: 100%;
    height: 50%;
    font-size: 52px;
}

html.print_pin_tab.ppp-4 td {
    width: 50%;
    height: 50%;
    font-size: 44px;
}

html.print_pin_tab.ppp-8 td {
    width: 50%;
    height: 25%;
    font-size: 36px;
}

html.print_pin_tab.ppp-16 td {
    width: 25%;
    height: 12.5%;
    font-size: 30px;
}

html.print_pin_tab.ppp-32 td {
    width: 25%;
    height: 6.25%;
    font-size: 26px;
}

html.print_pin_tab.ppp-64 td {
    width: 12.5%;
    height: 6.25%;
    font-size: 20px;
}

html.print_pin_tab .din-a4 {
    width: 100%;
    height: 100%;
}

html.print_pin_tab table {
    width: 100%;
    height: 100%;
}

html.print_pin_tab td {
    text-align: center;
    vertical-align: middle;
    border-right: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    height: auto !important;
}

.feature-table th {
    background: #eee;
    background: var(--ui-callout-bg);
}

.feature-table th:not(:first-child),
.feature-table td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
}

.feature-table-active-type {
    position: relative;
}

.feature-table-active-type::before {
    content: '';
    position: absolute;
    margin-left: -10px;
    top: -3px;
    left: 50%;
    border: 10px solid transparent;
    border-top: 10px solid #999;
}

#modal-compare-features td:not(:first-child) {
    font-weight: 600;
}

.form-icon-yes::before,
.form-icon-conflict::before {
    transform: scale(1.66);
}

.form-icon-no::before {
    font-weight: bold !important;
    transform: scale(1.15);
}

.form-icon-yes {
    color: #51c751;
}

.form-icon-no {
    color: #df5151;
}

.form-icon-conflict {
    color: darkorange;
}

.row label.error {
    font-size: 12px;
    color: red;
}

#error-pin-not-available {
    font-weight: bold;
    color: red;
}

#pres-settings .tab-pane {
    padding: 0 15px;
}

.tab-content.settings_auth_tab .save-wrapper {
    display: none;
}

#biased-users-box table td {
    padding: 4px;
    vertical-align: middle;
}

.disabled-features-preview {
    padding: 15px;
}

.disabled-features-preview,
.disabled-features-preview th {
    background: #f3f3f3;
}

@media (max-width: 767px) {
    #votings > .row:first-child {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }

    #votings .row-filters {
        margin-top: 2rem;
    }

    #btn-reset-eval-dates {
        /* margin-right: 15px; */
    }
}

#btn-reset-eval-dates {
    margin-top: 0.5rem;
}

@media (min-width: 575px) {
    body:not(.layout-kikom) #btn-reset-eval-dates,
    body.layout-kikom #btn-reset-eval-dates:not(.new-row) {
        margin-top: 26px;
    }
}

/* center datatable buttons */
#table-sessions-history_wrapper > .row > .col-sm-6,
#table-tournament-sessions_wrapper > .row > .col-sm-6,
#table-qa-entries_wrapper > .row > .col-sm-6,
#table-chat-messages_wrapper > .row > .col-sm-6,
#table-quiz-scores_wrapper > .row > .col-sm-6,
#table-exam-scores_wrapper > .row > .col-sm-6 {
    text-align: center;
}

.tutorial-video-img {
    opacity: 0.85;
}
.tutorial-video-img:hover {
    opacity: 1;
}

.tutorial-link {
    display: flex;
    align-items: center;
    color: var(--ui-primary) !important;
    font-weight: bold;
    text-decoration: underline;
    margin: 10px 0;
}

.tutorial-link img {
    width: 30px;
    margin-right: 10px;
}

/* projectadmin homepage */

.project-info {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#feed-preview .project-info {
    margin: 0;
}

.project-news,
.project-hint {
    border: 1px solid var(--ui-gray-d);
    border-radius: var(--ui-content-radius);
    padding: 0.75rem 0;
    min-height: 120px;
}

.project-hint {
    padding: 0.75rem 1rem;
}

.infobox-title {
    margin-bottom: 1rem;
}

.project-news .infobox-title {
    padding-left: 6%;
}

@media (max-width: 576px) {
    .project-info p,
    #project-carousel footer span {
        font-size: 0.9em;
    }
}
.project-info .d-block a {
    border-radius: 10px;
    margin-top: 1.5rem;
    transition: 0.25s ease-in-out;
}

.project-news.lg,
.project-hint.lg {
    width: 100%;
}

.nav-item.active img {
    transition: 0.25s ease-in-out;
    filter: invert(100%);
}

.nav-item a {
    transition: 0.25s ease-in-out;
}

@media (max-width: 767px) {
    .project-info {
        display: block;
    }

    .project-info p {
        font-size: 0.9em;
    }

    .project-news,
    .project-hint {
        padding: 0.5rem 1rem;
    }

    .project-news {
        margin-right: 0;
        margin-bottom: 0.75rem;
    }

    .nav-item img {
        transition: 0.25s ease-in-out;
        filter: invert(100%);
    }
}

@media (max-width: 600px) {
    .ui-box h2 {
        font-size: 20px;
    }
}

#project-carousel .carousel-inner {
    background-color: var(--ui-content-bg);
    /* margin: auto;
    width: 90%; */
}

#project-carousel .carousel-item {
    background-color: var(--ui-content-bg);
}

#project-carousel .carousel-content {
    margin: 0 6%;
}

#project-carousel .carousel-control-prev,
#project-carousel .carousel-control-next {
    width: 5%;
    /* width: 30px; */
    height: 30px;
    /* background: none; */
    /* transition: all 0.25s ease-in-out; */
    /* opacity: 1; */
    /* color: var(--ci-bg-primary); */
    /* text-shadow: none; */
    filter: invert(1) grayscale(100);
}

#project-carousel .carousel-control-prev-icon,
#project-carousel .carousel-control-next-icon {
    font-size: 50px;
    font-family: unset;
    top: 0;
    transition: 0.25s ease-in-out;
}

#project-carousel .carousel-control-prev-icon {
    left: 0;
}
#project-carousel .carousel-control-next-icon {
    right: 0;
}

#project-carousel .carousel-control-prev-icon:hover,
#project-carousel .carousel-control-next-icon:hover {
    transform: scale(1.15);
}

#project-carousel footer span {
    vertical-align: middle;
}

#btn-feature-contact {
    transform: scale(1);
    transition: 0.1s linear;
    color: #ffffff;
    background-color: #5e959a;
}
#btn-feature-contact:hover {
    transform: scale(1.05);
    transition: 0.1s linear;
    color: #ffffff;
}

/* TODO */
body.view-presentation-create .duplicate-box input[type='checkbox'] {
    transform: scale(1.5);
}

body.view-presentation-create .duplicate-box label {
    font-size: 1rem;
}

.dt-search input[type='search']::-webkit-search-cancel-button {
    /* -webkit-appearance: searchfield-cancel-button; */
    -webkit-appearance: auto;
    cursor: pointer;
}

div.dt-container .width-2-btn {
    /* collapse */
    width: 0;
    /* prevent line breaks */
    min-width: 94px;
}

div.dt-container .width-3-btn {
    width: 0;
    min-width: 136px;
}

/************************/
/* DataTables overrides */
/************************/

table.dataTable {
    /* to center loader */
    min-height: 100px;
}

div.dt-scroll-headInner table.dataTable,
div.dt-scroll-footInner table.dataTable {
    min-height: 0;
}

.dt-layout-row .dt-length label {
    display: inline;
}

table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc {
    padding-right: 16px;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order {
    right: 4px;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
div.dt-container.dt-empty-footer div.dt-scroll-body {
    border-bottom: 2px solid var(--ui-gray-d);
}

table.dataTable thead th.text-center {
    text-align: center;
}

div.dt-container div.dt-processing {
    margin-top: 5px;
    z-index: 2;
}

div.dt-processing > div:last-child > div {
    background: var(--ci-bg-secondary);
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before {
    bottom: 53%;
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    top: 53%;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.75;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left;
}

#form-add-question.form-horizontal .form-text,
#form-edit-question.form-horizontal .form-text {
    margin-left: 0.5rem;
}

.invoice-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.invoice-check input {
    margin: 0;
}
.storno-row {
    color: red;
}
.checkall {
    position: relative;
}
.checkall input {
    position: absolute;
    right: 4px;
    bottom: 25%;
}

.tutorial-video video {
    width: 100%;
}

#form-auth-group-assignments {
    overflow-x: auto;
}

#table-auth-group-matrix thead.vertical-view th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
    writing-mode: vertical-rl;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}
#table-auth-group-matrix tbody.vertical-view td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
    padding-left: 0;
    padding-right: 0;
}

/* override fileinput.css */
input[type='file'],
input[type='file']::file-selector-button,
input[type='file']::-webkit-file-upload-button {
    cursor: pointer;
}

.file-caption-name:not(.file-caption-disabled) {
    /* background: var(--ui-body-bg); */
    background: var(--ui-content-bg);
}

.file-caption-icon {
    z-index: 3;
}

.file-drop-zone {
    min-height: 182px;
    overflow-y: scroll;
    background: var(--ui-gray-f5);
}

.file-drop-zone-title {
    padding: 64px 10px;
    color: var(--ui-gray-6);
    font-size: 28px;
}

.file-drop-zone .file-preview-image {
    /* override inline value */
    /* height: auto !important;
    max-width: 100%; */
}

.file-drop-zone .kv-file-upload,
.file-preview .fileinput-remove {
    display: none;
}

.file-error-message .btn-close.kv-error-close {
    float: right;
}

/* fix nested input-groups */
.input-group-file > .file-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-file > .file-input .file-caption,
.input-group-file > .file-input .input-group {
    width: 100%;
}

.input-group-file > .input-group-text .btn-popover {
    margin-left: 0.25rem;
}

/* MARK: Account */

.social-login-btn {
    display: inline-flex;
    align-items: center;
    /* background: var(--ui-content-bg); */
    background: var(--ui-body-bg);
    border: 1px solid var(--ui-gray-d) !important;
    border-radius: 2rem;
}

.social-login-btn:hover {
    background-color: var(--ui-gray-e);
}

.prov-icon-wrap {
    display: inline-flex;
    width: 30px;
    justify-content: center;
    /* background-color: yellow; */
}

.btn-icon-microsoft,
.btn-icon-google,
.btn-icon-apple {
    display: inline-block;
    width: 19px;
    height: 19px;
}

.btn-icon-microsoft {
    width: 17px;
    height: 17px;
    background: url(/shared/img/logos/microsoft.svg) center center no-repeat;
    background-size: 100%;
}

.btn-icon-google {
    background: url(/shared/img/logos/google.svg) center center no-repeat;
    background-size: 100%;
}

.btn-icon-apple {
    background: url(/shared/img/logos/apple.svg) center center no-repeat;
    background-size: 100%;
}

.text-muted .btn-icon-microsoft,
.text-muted .btn-icon-google,
.text-muted .btn-icon-apple {
    filter: grayscale(100%) brightness(1);
}

.icon-sso-enabled {
    color: green;
    transform: scale(1.25);
    margin-left: 3px;
}

.ms-blue {
    color: #0078d4;
    font-size: 0.95rem;
}

.flex-center {
    display: flex;
    align-items: center;
}

/* MARK: Dark Mode */

#btn-toggle-dark-mode .bi-sun-fill,
html[data-bs-theme='dark'] #btn-toggle-dark-mode .bi-sun {
    display: none;
}

#btn-toggle-dark-mode .bi-sun,
html[data-bs-theme='dark'] #btn-toggle-dark-mode .bi-sun-fill {
    display: inline;
}

/* html[data-bs-theme='dark'] */

/* html[data-bs-theme='dark'] .form-control, */
/* html[data-bs-theme='dark'] .datepicker.form-control[readonly], */
/* html[data-bs-theme='dark'] .date-time-picker .form-control[readonly], */
html[data-bs-theme='dark'] select,
html[data-bs-theme='dark'] select option {
    background: var(--ui-body-bg);
}

.form-control[readonly]:not[type='file'] {
    cursor: default;
    background-color: var(--ui-gray-f5);
    opacity: 0.75;
}

html[data-bs-theme='dark'] .form-control[readonly] {
    /* background: #404040; */
}

html[data-bs-theme='dark'] #project-carousel .carousel-control-prev,
html[data-bs-theme='dark'] #project-carousel .carousel-control-next {
    filter: invert(0) grayscale(100);
}