:root {
    /*Q-Body*/
    --q-body-color: black;
    --q-body-bg: white;
    --q-border-color: #cdcdcd;

    /*Q-basic colors*/
    --primary-color: #CC0033;
    --secondary-color: #666666;
    --secondary-text-color: white;

    /*Q-Header*/
    --q-header-color: white;
    --q-header-logo-width: 60px;
    --q-header-logo-height: 60px;

    /*Q-outline-btn*/
    --q-outline-btn-primary-color: #666666;
    --q-outline-btn-secondary-color: white;
    --q-outline-btn-focus-color: rgba(102, 102, 102, 0.3);
    /*Q-Menu*/
    --q-menu-active-bg-color: #f7f7f9;
    --q-menu-active-text-color: black;
    --q-menu-hover-color: #CC0033;
    /*Q-Card*/
    --q-card-border-color: #cdcdcd;
    --q-card-text-color: black;
    --q-card-bg-color: white;

    --q-carts-bg-color: white;

    /*Q-Msg*/
    --q-success: #1c8064;
    --q-info: #2a77fa;
    --q-warning: #FFC107;
    --q-error: #f5224c;

    /*Q-Input*/
    --q-input-label-color: #CC0033;
    --q-input-color: black;
    --q-input-ul-color: #666666;


    /* Q-Table Colors */
    --q-table-bg-color: #ffffff;
    --q-table-border-color: #dddddd;
    --q-table-header-bg-color: white /*#f4f4f4*/;
    --q-table-header-text-color: #333333;
    --q-table-row-hover-bg-color: #2a77fa;
    --q-table-row-hover-text-color: white;
    --q-table-row-stripe-bg-color: #f9f9f9;
    --q-table-column-border-color: #e0e0e0;
    --q-table-text-color: #333333;

    /* Table Spacing */
    --q-table-border-width: 1px;
    --q-table-border-radius: 8px;
    --q-table-padding: 5px;
    --q-table-margin: 12px 0;

    /* Font */
    --q-table-font-size: 12px;
    --q-table-font-weight: normal;

    /*Q-Round-Button*/
    --q-button-size: 40px; /* Size of the button */
    --q-button-bg: #CC0033; /* Background gradient */
    --q-button-color: #fff; /* Icon color */
    --q-button-hover-bg: #666666; /* Hover background */
    --q-icon-size: 16px; /* Icon size */

    /*Quota fill color*/
    --q-quota-fill: #931f44;

    /*Q-Switch*/
    --q-switch-width: 50px;
    --q-switch-height: 24px;
    --q-switch-bg-off: #ccc;
    --q-switch-bg-on: #CC0033;
    --q-switch-handle-size: 20px;
    --q-switch-handle-color: #fff;
    --q-switch-transition-duration: 0.4s;
    --q-switch-text-size: 12px;
    --q-switch-text-color: #000;
    --q-switch-spacing: 8px;

    /*Q-File-Tree*/
    --q-folder-icon-color: #ff8c00;
    --q-file-icon-color: #CC0033;
    --q-text-color: #333;
    --q-hover-bg-color: #f0f0f0;
    --q-indent-size: 20px;

    /* Light Theme Variables */
    --tooltip-bg-color: #ffffff;
    --tooltip-text-color: #333333;
    --tooltip-border-color: #dddddd;
    --tooltip-link-color: #007bff;
    --tooltip-link-hover-color: #0056b3;
    --tooltip-shadow-color: rgba(0, 0, 0, 0.1);
    --tooltip-arrow-border-color: #ffffff;
}

/* inter-latin-wght-normal */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.q-table {
    border-collapse: collapse;
    background-color: var(--q-table-bg-color);
    color: var(--q-table-text-color);
    font-size: var(--q-table-font-size);
    font-weight: var(--q-table-font-weight);
    border: var(--q-table-border-width) solid var(--q-table-border-color);
    border-radius: var(--q-table-border-radius);
    overflow: hidden;
    margin: var(--q-table-margin);
}

.q-table th, .q-table td {
    padding: var(--q-table-padding);
    text-align: left;
    border-bottom: var(--q-table-border-width) solid var(--q-table-border-color);
    border-right: var(--q-table-border-width) solid var(--q-table-column-border-color);
}

.q-table th {
    background-color: var(--q-table-header-bg-color);
    color: var(--q-table-header-text-color);
    font-weight: bold;
}

.q-table tr:nth-child(even) {
    background-color: var(--q-table-row-stripe-bg-color);
}

.q-table tr:hover {
    background-color: var(--q-table-row-hover-bg-color);
    color: var(--q-table-row-hover-text-color)
}

/* Remove the right border for the last column */
.q-table th:last-child, .q-table td:last-child {
    border-right: none;
}

.left {
    float: left;
    text-align: left;
    padding: 1em 0;
}

.ui-widget-overlay {
    background: black;
    opacity: .5;
}

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

html, body {
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    font-family: "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
}

body {
    color: var(--q-body-color, black);
    background-color: var(--q-body-bg, initial);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    white-space: pre-wrap;
}

img {
    border-style: none;
}

a {
    text-decoration: none;
    color: #888888;
}

a:hover {
    color: var(--secondary-text-color, #3a699d);
}

input, label {
    cursor: pointer;
}

/*Remove button padding in FF*/
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.bold {
    font-weight: bold;
}

.mainframe {
    position: relative;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.footer {
    width: 100%;
    border-top: 1px solid var(--q-border-color);
    padding: 6px 20px;
}

.content {
    flex: 1;
    overflow: auto;
    padding: 10px 5% 10px 10px;
}

.footer, .menu, .content {
    box-sizing: border-box;
}

header {
    display: flex;
    align-items: center;
    color: var(--q-header-color, white);
    background-color: var(--primary-color, #CC0033);
}

.q-admin-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.header {
    font-size: 32px;
    height: 54px;
    line-height: 50px;
    padding: 0;
    padding-left: 20px;
    margin: 0;
    overflow: hidden;
}

.logo {
    display: flex;
    gap: 1em;
    align-items: center;
}

.logo img {
    height: 60px;
    width: auto;
    background: var(--q-body-bg);
}

.licenseinfo {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 60%;
    flex-direction: row-reverse;
}

.licenseicon {
    height: 45px;
    float: right;
    padding: 0 15px;
    cursor: pointer;
}

.titlebar {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    top: 49px;
    color: white;
    overflow: hidden;
}

.titlebar .topline {
    border-top: 2px solid var(--q-border-color);
}

.content ul {
    margin: 5px 0 10px;
}

.menu {
    box-sizing: content-box;
    overflow: auto;
    border-right: 1px solid var(--q-border-color);
    padding-bottom: 30px;
    max-width: 370px;
}

.menu form {
    width: 100%;
}

.q-menu-header {
    text-align: left;
    border-bottom: 1px solid var(--q-border-color);
    font-size: medium;
    padding-top: 2rem;
    padding-bottom: 5px;
    margin-bottom: 0.5em;
    font-weight: 700;
}

.login {
    font-size: 12px;
    font-weight: 500;
}

.logout, .mainmenu {
    font-weight: bold;
}

.logout {
    float: right;
    margin-left: 10px;
}

.errormessage, .infomessage, .warningmessage {
    position: absolute;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #990000;
    text-align: center;
    background-color: #ffdddd;
    font-weight: bold;
    z-index: 99;
    border-radius: 5px;
    left: calc(50% - 200px);
    top: 20%;
    font-size: 14px;
    max-height: calc(100vh - 400px);
    overflow: auto;
}

.content .errormessage, .content .infomessage, .content .warningmessage {
    position: initial;
    width: auto;
}

.infomessage {
    border-color: #1c8064;
    background-color: #ddffdd;
}

.warningmessage {
    border-color: var(--q-warning);
    background-color: var(--q-warning);
    color: var(--q-body-color);
}


#wait_layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: progress;
}

#wait_layer i {
    font-size: 50px !important;
    color: white;
}

#wait_inner_layer {
    font-size: 50px;
    color: white;
}

.wait #wait_layer {
    display: flex;
}

.wait * {
    cursor: progress !important;
}

.pleaseWait {
    width: 100%;
    height: 100px;
    text-align: center;
}

#progress-screen {
    text-align: center;
    font-size: 32px;
}

.titleinfo, .titleerror {
    padding: 3px 20px;
    font-style: italic;
    font-weight: bold;
    padding-right: 18px;
    background: transparent url(./icons/information.png) no-repeat center left;
    color: #1c8064;
}

.titleerror {
    background: transparent url(./icons/exclamation.png) no-repeat center left;
    color: #990000;
}

.qGroup3 {
    margin-left: 10px;
    overflow: auto;
}

.survey_select {
    flex: 1;
    width: 240px;
}

/* Allgemeine Dropdown-Styling */
.chosen-container {
    flex: 1;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
}

.chosen-container-single .chosen-single div b {
    margin-top: 6px !important;
}

.chosen-container-single .chosen-single {
    background: #f8f8f8 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    color: #333 !important;
}

.chosen-container-single .chosen-single:hover {
    background: #e0e0e0 !important;
    border-color: #aaa !important;
}

/* Dropdown Pfeil */
.chosen-container-single .chosen-single div {
    color: var(--primary-color);
}

/* Dropdown Liste */
.chosen-container .chosen-drop {
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Suchfeld */
.chosen-container .chosen-search input {
    border: 1px solid #ccc !important;
    padding: 6px !important;
    border-radius: 4px !important;
    width: calc(100% - 12px) !important;
    margin: 6px !important;
}

/* Dropdown Einträge */
.chosen-container .chosen-results li {
    padding: 10px !important;
    color: #333 !important;
}

.chosen-container .chosen-results li.highlighted {
    background: var(--primary-color) !important; /* Markenfarbe */
    color: white !important;
}

/* Aktives Element */
.chosen-container-active .chosen-single {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 4px rgba(204, 0, 51, 0.5) !important;
}

.surveypreview {
    min-height: 250px;
    text-align: center;
}

.edit-case {
    padding: 2px 8px !important;
}

/* SURVEY MANAGEMENT ARCHIVE*/
.archivetable td {
    text-align: left;
}

.archivetable .TdDownload {
    text-align: center;
    width: 5%;
}

.archivetable .TdMinWidth {
    min-width: 150px;
    width: 25%;
}

.archivetable .TdDate {
    width: 15%;
}

.archivetable .TdName {
    font-weight: bold;
}

/* SURVEY MANAGER BACKUP TABLE*/
.backuptable th {
    min-width: 100px;
}

.q-menu-container {
    margin-right: 0.3em;
}

.q-menu-container a.menu_button:first-of-type {
    margin-top: 10px; /* Adjust the value as needed */
}

/*** plain old links styled like buttons, and button widget ***/
a.menu_button, a.menu_button:link, a.menu_button:visited, a.menu_button_inactive, a.menu_button_inactive:link, a.menu_button_inactive:visited {
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    text-align: left;
    display: block;
    width: 100%;
    line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
    /* Width of left menu image */
    padding: 4px 4px 4px 20px;
    text-decoration: none;
    border-radius: 5px;
}

a.menu_button:before, a.menu_button:link:before, a.menu_button:visited:before, a.menu_button_inactive:before, a.menu_button_inactive:link:before, a.menu_button_inactive:visited:before {
    content: '';
    width: 1px;
    background-color: #B9C8DB;
    position: absolute;
    left: 10px;
    height: 100%;
    bottom: 0;
    opacity: 0.3;
    transition: all ease-in 200ms;
}

.menu-button-active {
    background: var(--q-menu-active-bg-color, #f7f7f9);
    color: var(--q-menu-active-text-color, black);
    font-weight: 600;
}

.menu-button-active:before {
    background-color: var(--q-menu-hover-color, #CC0033) !important;
    opacity: 1 !important;
    bottom: 6px !important;
    height: 60% !important;
}

.menu_button:hover:before {
    background-color: var(--q-menu-hover-color, #CC0033);
    opacity: 1 !important;
}

a.menu_button span, a.menu_button_inactive span {
    display: block;
    padding: 2px 2px; /*Set 11px below to match value of 'padding-left' value above*/
}

a.menu_button:hover span { /* Hover state CSS */
    background-position: bottom right;
    color: var(--q-body-color, black);
}

a.menu-button-active:hover span { /* Hover state CSS */
    background-position: bottom right;
    color: var(--q-menu-active-text-color, black);
}

a.menu_button:active span {
    font-weight: bold;
}

a.menu_button_inactive, a.menu_button_inactive:link, a.menu_button_inactive:visited {
    cursor: auto;
}

a.menu_button_inactive span {
    color: #888888;
}

.active, .inactive {
    font-weight: bold;
}

.active {
    color: #1c8064;
}

.inactive {
    color: #990000;
}

/* TITLES */
h1, h2 {
    font-size: 1.5em;
    margin-top: 2px;
    line-height: 1.5em;
    font-weight: 600;
}

/* LOGIN TABLE */
.logintable {
    margin: 10px auto 0;
}

.logintable input {
    width: 90%;
    display: block;
    margin: 0 auto;
}

/* SUBMIT BUTTONS */
input[type="submit"], input[type="button"] {
    width: 110px;
}

/* DATEINPUT */
.dateinput {
    width: 60px;
}

/* ICONS etc */
.q-img-btn {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 15px;
    border: 1px solid var(--q-border-color);
    padding: 5px 10px;
    margin: 1px 5px -1px 5px;
    border-radius: 5px;
}

.q-img-btn:hover {
    border: 1px solid var(--q-border-color);
}

.addable, .downloadable, .uploadable, .editable, .notification, .link, .deletable, .clickable, .refreshable, .importable, .browseBack, .helpable, .licensable, .updateable, .iconbrkdat, .iconcmpldat, .saveable, .printable, .watchable, .recoverable,
.translationprocesstable span {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 15px;
    border: 1px solid var(--q-border-color);
    padding: 5px 10px;
    margin: 1px 5px -1px 5px;
    border-radius: 5px;
}

.addable:hover, .downloadable:hover, .editable:hover, .notification:hover, .link:hover, .deletable:hover, .clickable:hover, .refreshable:hover, .importable:hover, .browseBack:hover, .helpable:hover, .licensable:hover, .updateable:hover, .saveable:hover, .printable:hover, .watchable:hover, .recoverable:hover {
    border: 1px solid var(--q-border-color);
}

.deletable {
    background: #ffffff url(./icons/bin.png) no-repeat center center;
}

.downloadable {
    background: #ffffff url(./icons/basket_put.png) no-repeat center center;
}

.uploadable {
    background: #ffffff url(./icons/arrow_up.png) no-repeat center center;
}

.editable {
    background: #ffffff url(./icons/wrench.png) no-repeat center center;
}

.notification {
    background: #ffffff url(./icons/exclamation.png) no-repeat center center;
}

.helpable {
    background: #ffffff url(./icons/help.png) no-repeat center center;
    float: left;
    margin-right: 10px;
}

.importable {
    background: #ffffff url(./icons/arrow_down.png) no-repeat center center;
}

.link {
    background: #ffffff url(./icons/application_go.png) no-repeat center center;
}

.refreshable {
    background: #ffffff url(./icons/arrow_refresh.png) no-repeat center center;
}

.licensable {
    background: #ffffff url(./icons/key.png) no-repeat center center;
}

.updateable {
    background: #ffffff url(./icons/zoom.png) no-repeat center center;
}

.saveable {
    background: #ffffff url(./icons/disk.png) no-repeat center center;
}

.addable {
    background: #ffffff url(./icons/add.png) no-repeat center center;
}

.printable {
    background: #ffffff url(./icons/printer.png) no-repeat center center;
}

.watchable {
    background: #ffffff url(./icons/zoom.png) no-repeat center center;
}

.recoverable {
    background: #ffffff url(./icons/page_white_add.png) no-repeat center center;
}

.pdfdownload {
    background: #ffffff url(./icons/pdf.png) no-repeat center center;
}

.iconbrkdat, .iconcmpldat {
    cursor: default;
    width: 20px;
    border: 0 solid var(--q-border-color);
    padding: 0;
    margin: 0;
}

.iconbrkdat {
    background: transparent url(./icons/flag_yellow.png) no-repeat center center;
}

.iconcmpldat {
    background: transparent url(./icons/flag_green.png) no-repeat center center;
}

.icontext {
    width: auto;
    padding-left: 30px;
    background-position-x: 5px;
    line-height: 15px;
}

/* Default table */
.defaulttable tr {
    border-top: 1px solid #f0f0f0;
}

.defaulttable {
    float: left;
    border-collapse: collapse;
    border: 1px solid var(--q-border-color);
    margin: 10px 10px 10px 0;
}

.defaulttable th, .defaulttable td {
    height: 30px;
    padding: 0 10px;
    background-color: var(--q-body-bg);
}

.defaulttable th {
    border: 1px solid var(--q-border-color);
}

/* PROGRESS STATUS */
.progress_max, .progress_max div {
    height: 10px;
    border: 1px solid var(--q-border-color);
    padding: 0;
    margin: 0;
}

.progress_max {
    width: 200px;
    margin: 10px auto;
    position: relative;
    background-color: #FFFFFF;
}

.progress_max div {
    position: absolute;
    top: -1px;
    left: -1px;
}

.progress_current {
    background-color: #c4d1e4;
}

/* SERVER STATUS */
.mem_max, .mem_max div, .hdd_max, .hdd_max div {
    height: 10px;
    border: 1px solid var(--q-border-color);
    padding: 0;
    margin: 0;
}

.mem_max, .hdd_max {
    width: 600px;
    position: relative;
    background-color: var(--q-success);
}

.mem_max div, .hdd_max div {
    position: absolute;
    top: -1px;
    left: -1px;
}

.mem_used, .hdd_used {
    background-color: var(--q-error);
}

.mem_alloc {
    background-color: var(--q-warning);
}

.mem_max .mem_maxload {
    background-color: transparent;
    border-right: 2px solid var(--q-border-color);
}

/* OVERVIEW TABLE */
.overviewtable td {
    height: 15px;
    padding: 0;
}

.overviewcharts {
    width: 700px;
    height: auto;
    background-color: var(--q-carts-bg-color, white);
}


/* SERVER UPLOAD TABLE */
.serveruploadtable {
    margin: 15px auto;
    float: none;
}

.uploadserver {
    font-weight: bold;
    font-family: monospace;
    text-align: center;
    border: 1px solid var(--q-border-color);
    margin: 10px 0;
}

/* EDIT MAINTABLE */
.editmaintable input[type="text"] {
    width: 180px;
}

.editmaintable select {
    width: 184px;
    padding: 1px;
}

.savebutton {
    text-align: center;
}

.editmaintable input, .editmaintable label {
    vertical-align: middle;
}
/*neues Configure-Design*/
.IconDiv {
    width: auto;
    min-width: 490px;
    display: flex;
}

.ConfigContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 88px;
    height: 88px;
    border: 1px solid var(--q-border-color);
    margin-right: 8px;
}

.ConfigIcon, .ServerIcon {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 6px;
    border: 1px solid var(--q-border-color);
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
}

.ConfigTable {
    width: 100%;
    margin: 10px 0 0;
    border-color: var(--q-border-color);
}

.ConfigTable tr {
    border: none;
}

.ConfigTable .ConfigHeadline {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    background-color: var(--secondary-color);
    color: var(--secondary-text-color)
}

.ConfigTable .ConfigName {
    width: 125px;
}

.ConfigTable .ConfigInput {
    padding: 0 0;
}

.ConfigInput > input {
    width: 99%;
}

.ConfigInput > input, .ConfigTable select {
    padding: 4px 2px 4px;
    border: 1px solid white;
    border-bottom: 1px dotted var(--q-border-color);
    border-radius: 5px;
    cursor: pointer;
}

.ConfigTable select:active, .ConfigTable select:focus, .ConfigTable select:checked,
.ConfigInput > input:active, .ConfigInput > input:focus, .ConfigInput > input:checked {
    outline: 0 solid black;
    border: 1px dotted var(--q-success);
    border-radius: 5px;
}

#idtestmode, #idunknown, #usecookies {
    width: auto;
}

.ConfigSave input[type="button"] {
    width: 100%;
    height: 50px;
    font-weight: bold;
    font-size: 14px;
    background-color: var(--q-success);
    border: 2px solid var(--q-success);
    color: white;
    margin-top: 10px;
}


/* Edit ID Dialog */
.editidtable {
    width: 100%;
    margin: 10px 0 0;
    float: none;
    border: 0 solid var(--q-border-color);
}

.editidtable select, .editidtable input {
    width: 100%;
}

/* REPORTING SETUP */
.statsettings .textsettings {
    min-width: 300px;
}

.statsettings .StatisticValues {
    min-width: 30px;
    width: 100%;
}

.reportingconfig {
    text-align: center;
}

.quota {
    height: 150px;
    width: 100%;
}

.tabfile {
    margin-left: 5px;
    width: 100%;
}

h5 {
    margin-top: 10px;
    margin-bottom: 0;
}

/* DATATABLE TABLE */
.datatable {
    float: left;
    border-collapse: collapse;
    margin: 15px;
    -moz-box-shadow: 5px 5px 10px #555;
    -webkit-box-shadow: 5px 5px 10px #555;
    box-shadow: 5px 5px 10px #555;
    border: 1px solid var(--q-border-color);
}

.datarange {
    margin: 20px 20px 0 20px;
    font-style: italic;
}

.opnsettings {
    margin: 2px;
    padding: 5px;
    border: 1px solid var(--q-border-color);
}

.opnsettings label, .opnsettings input {
    height: 18px;
    line-height: 18px;
}

.opnmediatable td, .opnmediatable th {
    vertical-align: top;
    text-align: left;
}

.opnmediatable .cblist {
    height: 400px;
    border: 1px solid var(--q-border-color);
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: auto;
}

.opnmediatable .delimiter {
    text-align: right;
}

.opnmediatable .delimiter select {
    margin-left: 10px;
    width: 50px;
}

/* NATIVE DATA TABLE */
.nativedatatable {
    float: none;
}

.nativedata-multidelete-dialog textarea {
    width: 100%;
    height: 200px;
}

.infomailtable {
    min-width: 400px;
    margin: 0 auto;
    border-collapse: collapse;
}

.infomailtable th {
    width: 120px;
    text-align: left;
}

.infomailtable td {
    border: 1px solid var(--q-border-color);
    font-family: monospace;
    padding: 5px;
}


/* EDIT QUOTA TABLE */
.quota-invalid {
    border: 1px solid #ff0000;
}

/* EDIT VARINC TABLE */
.editvarinctable th, .editvarinctable td {
    width: 60px;
}

.editvarinctable select {
    width: 130px;
}


/* GTC TAB ASSIGN TABLE */
.gtcassigntable .missing {
    border: 1px solid #ff0000;
}

.gtcassigntable .existing {
    border: 1px solid #1c8064;
}

/* QUOTA TABLE */
.quotatarget, .quotaunderfull, .quotafull, .quotaoverfull {
    text-align: center;
    width: 40px;
    font-weight: bold;
}

.quotaunderfull, .quotafull, .quotaoverfull {
    font-style: italic;
}

.quotaoverfull {
    color: #990000;
}

.quotafull {
    color: #1c8064;
}

.quotabar {
    width: 100px;
}

.quotabarback {
    height: 12px;
    border: 1px solid #b8b8b8;
}

.quotabarfront {
    height: 12px;
    background-color: var(--q-quota-fill);
}

/* STATS TABLE */
.statstable {
    float: none;
}

.statstable td, .statstable th {
    vertical-align: top;
    height: 15px;
    line-height: 15px;
    padding: 3px 10px;
}

.statstable th {
    vertical-align: top;
}

.statsdesc {
    width: 250px;
}

.statsabsolute, .statspercent {
    text-align: right;
    width: 50px;
    font-weight: bold;
}

.statstable .statspiechart {
    min-width: 300px;
}


.scriptcheckerror, .scriptcheckerror a {
    color: #990000;
    font-weight: bold;
}

.scriptcheckwarning, .scriptcheckwarning a {
    color: var(--q-warning);
    font-weight: bold;
}

.defaulttable .successmessage {
    color: #ffffff;
    font-weight: bold;
    background-color: #1c8064;
    position: relative;
    border-radius: 0;
    width: auto;
    left: 0;
}

.defaulttable .warningmessage {
    background-color: var(--q-warning);
    font-weight: bold;
    position: relative;
    border-radius: 0;
    width: auto;
    left: 0;
}

.defaulttable .errormessage {
    color: #ffffff;
    font-weight: bold;
    background-color: #990000;
    position: relative;
    border-radius: 0;
    width: auto;
    left: 0;
}


/* FILEMENU TABLE */
.filemenutable {
    float: left;
    border-collapse: collapse;
    margin: 10px;
    -moz-box-shadow: 5px 5px 10px #555;
    -webkit-box-shadow: 5px 5px 10px #555;
    box-shadow: 5px 5px 10px #555;
    border: 1px solid #b8b8b8;
}

.filemenutable td, .filemenutable th {
    width: 75px;
    text-align: center;
}

.filemenutable .filename {
    width: 150px;
    text-align: left;
}

.filemenutable tr:nth-child(2n) {
    background-color: #f6f6f6;
}

.filemenutable tr:nth-child(2n+1) {
    background-color: #ffffff;
}

.filemenutable th {
    background-color: #e0e0e0;
}


/* LRS DOWNLOAD TABLE */
.lrs-download-table {
    width: 100%;
}

.lrs-download-table td {
    width: 50%;
    text-align: center;
}

.lrs-download-table a {
    line-height: 75px;
    font-size: 28px;
    float: none;
    margin: 0;
}

.importlrstable {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.importlrstable th, .importlrstable td {
    width: 50%
}

.importlrstable td {
    padding: 5px 10px;
    border: 1px solid grey;
    text-align: center;
}

.importlrstable select {
    width: 100%;
    margin-bottom: 5px;
    padding: 3px;
}

/* START INTERVIEW TABLE */
.starttable {
    float: left;
    width: 150px;
    border-collapse: collapse;
    margin: 10px;
    -moz-box-shadow: 5px 5px 10px #555;
    -webkit-box-shadow: 5px 5px 10px #555;
    box-shadow: 5px 5px 10px #555;
    border: 1px solid #b8b8b8;
}

.starttable td, .starttable th {
    padding: 3px 10px;
    text-align: center;
}

.starttable tr:nth-child(2n) {
    background-color: #f6f6f6;
}

.starttable tr:nth-child(2n+1) {
    background-color: #ffffff;
}

.starttable th {
    background-color: #e0e0e0;
}

/* ID MENU */
.idstable td {
    text-align: center;
    font-family: monospace;
}

.idstable .tools-td {
    padding: 1px !important;
    width: 90px;
    min-width: 90px;
}

.idstable .editable, .idstable .deletable {
    padding: 2px 5px;
    margin: 0;
    vertical-align: middle;
}

.idsearchtable {
    margin: 0;
    margin-left: auto;
}

.idsearchtable label {
    margin-right: 20px;
}

#idTableDiv {
    clear: both;
    margin-top: 20px;
    padding-top: 5px;
    border-top: 2px solid #c4d1e4;
}

table.dataTable.compact tbody .buttons {
    padding: 0;
}

.uploadidtable {
    margin-top: 5px;
}

.uploadidtable textarea {
    height: 185px;
    width: 120px;
}

.uploadidtable .manualupload {
    width: 130px;
}

.uploadidtable td {
    text-align: center;
    vertical-align: top;
}

.idgentable {
    margin: 0 auto;
}

.idgentable input[type=text] {
    width: 100px;
}

.idgentable .file-input {
    margin: 0;
}

.idgentable td {
    vertical-align: middle;
}

.idvalidationtable {
    margin: 0 auto;
    border-collapse: collapse;
}

.idvalidationtable th, .idvalidationtable td {
    text-align: center;
    font-family: monospace;
    border-bottom: 1px solid lightgrey;
    padding: 4px 10px;
}

.iduploadresulttable {
    width: 100%;
    margin: 0;
}

.iduploadresulttable td {
    text-align: center;
}

.iduploadresulttable .iduploadlog {
    cursor: pointer;
}

.iduploadresulttable .iduploadlog:hover {
    color: #5d7faf;
}

.idlist {
    font-family: monospace;
}

/* USER TABLE */
.usertable td {
    text-align: center;
}

/* SCRIPTCHECK TABLE */
.scriptchecktable th, .scriptchecktable td {
    line-height: normal;
}

/* EDIT USER MENU */
.editusertable {
    float: left;
    border-collapse: collapse;
    margin: 15px;
    -moz-box-shadow: 5px 5px 10px #555;
    -webkit-box-shadow: 5px 5px 10px #555;
    box-shadow: 5px 5px 10px #555;
    border: 1px solid #b8b8b8;
}

.editusertable tr:nth-child(2n) {
    background-color: #f6f6f6;
}

.editusertable tr:nth-child(2n+1) {
    background-color: #ffffff;
}

.editusertable th {
    background-color: #e0e0e0;
}


/* USER ASSIGN MENU */
.userassigntable {
    float: left;
    border-collapse: collapse;
    margin: 15px;
    -moz-box-shadow: 5px 5px 10px #555;
    -webkit-box-shadow: 5px 5px 10px #555;
    box-shadow: 5px 5px 10px #555;
    border: 1px solid #b8b8b8;
}

.userassigntable th, .userassigntable td {
    text-align: center;
    width: 80px;
}

.userassigntable tr:nth-child(2n) {
    background-color: #f6f6f6;
}

.userassigntable tr:nth-child(2n+1) {
    background-color: #ffffff;
}

.userassigntable th {
    background-color: #e0e0e0;
}


/* EDIT COLMAP TABLE */
.colmaptable td {
    text-align: center;
}

/* VARINC TABLE */
.varinctable td {
    line-height: normal;
    text-align: center;
}

.varinctable li, .varinctable div {
    text-align: left;
}

.varinctable div {
    font-weight: bold;
}

.varinccontenttable {
    float: none;
    clear: both;
}

.varinccontenttable div {
    min-height: 12px;
}

#rebuildvarincDialog select {
    width: 125px;
}

/* DATA DOWNLOAD TABLE */
.datadownloadtable .downloadable {
    margin: 0;
    display: inline-flex;
}

/* SURVEY STATUS TABLE */
/* same pbar css in voting */
.statustable th img {
    margin: 0 3px;
}

.statustable td {
    text-align: center;
}

.statustable .pbarout {
    width: 150px;
}

.statustable .pbarout, .statustable .pbarin {
    margin: 0;
    padding: 0;
    position: relative;
    height: 12px;
    border: 1px solid var(--secondary-color, #bbbac2);
}

.statustable .pbarin {
    border: 0 solid var(--secondary-color, #bbbac2);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #bbabc2;
}

.statustable input, .statustable label {
    vertical-align: middle;
}

.statustable input[type=button] {
    width: auto;
}

.observertable {
    width: 100%;
    height: 100%;
}

.observertable td {
    width: 48%;
    height: 98%;
    padding: 1%;
}

#obsFrame1, #obsFrame2 {
    width: 100%;
    margin: -2px;
    border: 1px solid #dddddd;
    padding: 0;
    height: 100%;
}

/* LANGUAGE TABLE */
.Inputlanguages {
    height: 200px;
    width: 100%;
}

.nativelangtable td {
    text-align: center;
}

.nativelangcontenttable {
    float: none;
    clear: both;
}

.nativelangcontenttable div {
    min-height: 12px;
}

#lang-delete-confirm input, #lang-delete-confirm label {
    vertical-align: middle;
}

.translationtable {
    margin: 3px 10px;
}

.translationtable td, .translationtable th {
    line-height: normal;
    padding: 2px;
}

.translationtable .nativetext, .translationtable .targettext {
    width: 40%;
}

.translationtable .nativetext, .nativetext div {
    word-break: break-word;
}

.translationtable textarea {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid var(--secondary-color, #bbbac2);
    height: 32px;
}

.translationtable .number {
    font-size: 10px;
    border-right: 1px solid #f0f0f0;
    text-align: right;
}

.translationtable .key {
    font-family: monospace;
    font-size: 12px;
    color: hsl(210, 100%, 42%);
    font-weight: 600;
    border-right: 1px solid #f0f0f0;
    overflow-wrap: break-word;
    word-break: break-all;
    max-width: 160px;
    min-width: 80px;
}

.translationprocess {
    border: 1px solid var(--secondary-color, #bbbac2);
    margin: 0 10px;
    position: relative;
}

.translationprocess, .translationprocess div {
    height: 8px;
}

.translationprocess div {
    position: absolute;
}

.translationprocess .missing {
    z-Index: 1;
}

.translationprocess .faulty {
    z-Index: 2;
}

.translationprocess .outdated {
    z-Index: 3;
}

.translationprocess .translated {
    z-Index: 4;
}

.q-demo-mode {
    background-color: red;
    color: white;
    text-align: center;
    padding: 1rem;
    font-size: 5rem;
    font-weight: bold;
    width: 50%;
    height: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.outdated {
    background-color: #FFE271;
}

.translated {
    background-color: #CCFF99;
}

.faulty {
    background-color: #FF9999;
}

.translationprocesstable {
    display: flex;
    align-items: center;
    padding: 0.5em;
}

.translationprocesstable span {
    font-family: monospace;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    padding: 0;
    font-size: 14px;
    border: 1px solid var(--secondary-color, #bbbac2);
}

.translationprocesstable .active {
    font-size: 18px;
    padding: 3px;
    margin: 2px;
}

.translationprocesstable .all {
    margin-left: 85px;
}

.translationprocesstable input[type=text] {
    height: 20px;
    line-height: 20px;
}

/* DATATABLES */
.dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    padding-top: 0;
}

.dataTables_wrapper .dataTables_info {
    clear: none;
    padding-top: 0;
}

.dataTables_wrapper .dataTables_length {
    float: right;
}

/* ANDROID SURVEY TABLE */
.androidsurveytable {
    clear: both;
}


#confirmImportDialog input, #deleteSurveyDialog input {
    border: 1px solid grey;
    background-color: transparent;
    font-weight: bold;
    text-align: center;
    width: 100%;
}


/* documents and support */
.helpfiles {
    list-style-type: none;
    padding-left: 5px;
}

.helpfiles li {
    padding-bottom: 10px;
    cursor: pointer;
}

.helpfiles li:hover {
    color: var(--secondary-text-color, #3a699d);
}

.socials {
    margin-left: 0;
    padding-left: 0;
    text-align: center;
}

.socials img {
    width: 60px;
    cursor: pointer;
    border: none;
    margin: 3px;
}


/* FileUploads */
.file-input {
    margin: 4px 0;
}

.file-input-hide {
    height: 0;
    overflow: hidden;
}

.file-input-label {
    border: 1px solid grey;
    background-color: #ffffff;
    height: 17px;
    max-height: 17px;
    padding: 3px;
    display: inline-block;
    width: 150px;
    margin-right: 1px;
    overflow: hidden;
}

.file-input-label, .file-input input[type=button] {
    vertical-align: middle;
}

/* jQuery Anpassungen */
.ui-corner-all {
    border: none;
}

.ui-tabs {
    background: none;
}

.ui-tabs .ui-tabs-nav {
    padding: 0;
    background: none;
}

.ui-tabs .ui-tabs-panel {
    border: 1px solid #1c94c4;
    min-height: 100px;
}

.ui-widget-header {
    background: #c4d1e4 url("../../javascript/images/ui-bg_gloss-wave_35_c4d1e4_500x100.png") 50% 50% repeat-x;
    background: var(--secondary-color, #666666);
    color: white;
    font-size: 1.2em;
}

.ui-state-default .ui-icon, .ui-state-focus .ui-icon, .ui-state-hover .ui-icon {
    background-image: url("../../javascript/images/ui-icons_ffffff_256x240.png");
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #c4d1e4;
    background: none;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #c4d1e4;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #1c94c4;
    background: none;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #1c94c4;
}

.no-close .ui-dialog-titlebar-close {
    display: none
}


/*********** FEEDBACK *********/
.feedback-preview {
    height: 50px;
    cursor: pointer;
}

.feedback-screenshot {
    width: 100%;
}

.feedback-message {
    border: 1px solid #CCCCCC;
    padding: 5px;
    margin: 5px 0;
    margin-bottom: 25px;
    font-style: italic;
}

#EditFeedbackPopup h4 {
    margin: 5px 0;
}

.feedback-comment {
    width: 98%;
    padding: 1%;
    height: 50px;
}

.feedbackdatatable tbody .message {
    font-style: italic;
    color: #1c94c4;
}

/*********** User Management *********/
.user-password-cell {
    position: relative;
}

.user-password-strength-info {
    position: absolute;
    visibility: hidden;
    top: 1px;
    right: 1px;
    width: 40px;
    height: 12px;
    line-height: 12px;
    padding: 0;
    margin: 0;
    color: white;
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}

.defaulttable .collapsible {
    background-color: #f0f0f0;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    user-select: none;
}

.collapsible:before {
    content: '\203A';
    color: black;
    font-weight: bold;
    float: left;
    margin-left: 0.5em;
    margin-right: 1em;

}

.collapsible-active:before {
    content: "\203A";
    transform: rotate(90deg);
}

.native-text {
    max-width: 60vw;
}

.translatable {
    text-align: center;
    cursor: pointer;
}

.warning-container {
    border: 0.125em solid #ffcc00;
    border-radius: 0.5em;
    padding: 0.6em;
    background-color: #fff3cd;
    display: flex;
    align-items: center;
    margin: 0.3em 0;
}

.warning-icon {
    font-size: 1.25em;
    color: #856404;
    margin-right: 0.5em;
}

.warning-text {
    font-size: 1em;
    color: #856404;
    flex: 1;
}

.highlighted-date {
    font-weight: bold;
    color: #d9534f;
    background-color: #f8d7da;
    padding: 0.1em 0.3em;
    border-radius: 0.25em;
}

.form-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    max-width: 400px;
    margin: auto;
}

.form-label {
    text-align: right;
    padding: 1px 0;
}

.form-input {
    padding: 1px;
    font-size: 1em;
}

.input-container {
    position: relative;
    width: 100%;
    margin: 25px 0;
}

.input-container input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--q-input-ul-color);
    padding: 8px 0;
    font-size: 14px;
    outline: none;
    background: transparent;
    color: var(--q-input-color);
}

.input-container input::placeholder {
    color: var(--q-input-label-color);
}

.input-container label {
    position: absolute;
    left: 0;
    pointer-events: none;
    top: -16px;
    font-size: 12px;
    color: var(--q-input-label-color);
}

.input-container .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--q-input-ul-color);
    transition: width 0.2s ease;
}

.input-container input:focus ~ .underline {
    width: 100%;
}

.input-container input:focus {
    border-bottom-color: transparent;
}

.input-container input:hover:not(:focus) {
    border-bottom-color: var(--q-input-ul-color);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 30%; /* Fully rounded corners */
    cursor: pointer;
    margin: 5px;
    color: var(--q-header-color);
    box-sizing: border-box;
}

.icon-button i {
    font-size: 14px;
}

/* Green icon button */
.green-button i {
    background-color: var(--q-success, #28de6b) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px var(--q-success, #28de6b) !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 30% !important;
    cursor: pointer;
    margin: 5px;
    color: var(--q-header-color, white);
    box-sizing: border-box;
}

.green-button i:hover {
    background-color: var(--q-header-color, white) !important;
    color: var(--q-success, #28de6b) !important;
}

/* Red icon button */
.red-button i {
    background-color: var(--q-error, #f5224c) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px var(--q-error, #f5224c) !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 30% !important;
    cursor: pointer;
    margin: 5px;
    color: var(--q-header-color, white);
    box-sizing: border-box;
}

.red-button i:hover {
    background-color: var(--q-header-color, white) !important;
    color: var(--q-error, #f5224c) !important;
}


/* Green icon button */
.yellow-button i {
    background-color: var(--q-warning, #FFC107FF) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px var(--q-warning, #FFC107FF) !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 30% !important;
    cursor: pointer;
    margin: 5px;
    color: var(--q-header-color, white);
    box-sizing: border-box;
}

.yellow-button i:hover {
    background-color: var(--q-header-color, white) !important;
    color: var(--q-warning, #FFC107FF) !important;
}

/* Optional hover effects */
.icon-button:hover {
    background-color: var(--q-header-color, white);
    color: var(--primary-color, #CC0033);
}

/* Remove focus outline */
.icon-button:focus {
    outline: none;
}

.toolbar-spacer {
    width: 1px;
    height: 40px;
    background-color: var(--q-header-color);
}

.menu, .footer, .header {
    padding-left: 100px;
}

.login-container {
    position: absolute;
    width: 250px;
    border: 1px solid var(--q-border-color);
    background-color: var(--q-body-bg);
    padding: 0;
    z-index: 99;
    border-radius: 5px;
    left: calc(50% - 200px);
    top: 20%;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.q-shadow {
    box-shadow: rgba(223, 226, 231, 0.6) 0 4px 8px;
}

.q-card {
    background-color: var(--q-card-bg-color, white);
    border-radius: 8px;
    border: 1px solid var(--q-card-border-color, #bbbac2);
    color: var(--q-card-text-color);
    padding: 16px;
    margin: 16px;
}

.q-card-header {
    font-size: 1.5em;
    margin-bottom: 2em;
}

.q-card-content {
    font-size: 1em;
    color: var(--q-body-color, black);
}

.q-card-footer {
    margin-top: 16px;
    text-align: right;
}

.q-hbox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.q-vbox {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}

.outline-button {
    background-color: var(--q-outline-btn-secondary-color, #ffffff);
    color: var(--q-outline-btn-primary-color, #666666);
    border: 1px solid var(--q-outline-btn-primary-color, #666666);
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.outline-button:hover {
    background-color: var(--q-outline-btn-primary-color, #666666);
    color: var(--q-outline-btn-secondary-color, #ffffff);
}

.outline-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--q-outline-btn-focus-color, rgba(102, 102, 102, 0.3));
}

.outline-button:active {
    background-color: var(--q-border-color);
    border-color: var(--q-border-color);
}

.ui-dialog-titlebar {
    border-radius: 0;
}

.ui-dialog {
    padding: 0;
}

.ui-dialog.ui-widget.ui-widget-content {
    border-color: var(--q-border-color);
}

.content-wrapper {
    flex: 1;
    overflow: auto;
    display: flex
}

@media (max-width: 1280px) {

    .footer {
        padding-left: 60px;
    }

    .menu, .header {
        padding-left: 20px;
    }

    .content {
        padding-right: 5px;
    }
}

#sm_tabs {
    border: none;
}

#toast {
    border-color: var(--q-border-color);
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-widget-content {
    color: var(--q-body-color)
}

.image-container {
    background-color: white;
    background-image: url("./logo.png");
    width: var(--q-header-logo-width);
    height: var(--q-header-logo-height);
    background-size: cover;
    background-position: center;
}

.q-btn-icon {
    font-size: 12px;
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em;
    box-sizing: border-box;
}

hr {
    border-color: var(--q-border-color);
}

table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td {
    padding: var(--q-table-padding);
}

/* NATIVE DATA TABLE */
.nativedatatable td {
    text-align: center;
}

.nativedatatable img {
    vertical-align: middle;
}

/* Button Styling */
.q-round-btn {
    width: var(--q-button-size);
    height: var(--q-button-size);
    background: var(--q-button-bg);
    color: var(--q-button-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Icon Styling */
.q-round-btn i {
    font-size: var(--q-icon-size);
}

/* Hover Effect */
.q-round-btn:hover {
    background: var(--q-button-hover-bg);
    border-radius: 5px;
}

.q-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5em;
}

.q-item-group {
    display: flex;
    gap: 0.5em;
    color: var(--secondary-color);
    border-color: var(--q-border-color);
    border-radius: 5px;
    border-width: thin;
}

.q-quick-access {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.q-quick-access-menu {
    display: none;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 10px;
}

.q-flex {
    display: flex;
}

.q-link:hover {
    color: #3a699d;
}

.q-icon-success {
    color: var(--q-success);
}

.q-icon-warning {
    color: var(--q-warning);
}

.q-icon-error {
    color: var(--q-error);
}

.q-icon-info {
    color: var(--q-info);
}

.q-icon-small {
    font-size: 12px;
}

.q-icon-medium {
    font-size: 16px;
}

.q-icon-large {
    font-size: 32px;
}

/* Q-Switch */
.q-switch {
    display: inline-flex;
    align-items: center;
}

.q-switch-text {
    font-size: var(--q-switch-text-size);
    color: var(--q-switch-text-color);
    user-select: none;
    font-weight: 500;
}

.q-switch-text-off {
    margin-right: var(--q-switch-spacing);
}

.q-switch-text-on {
    margin-left: var(--q-switch-spacing);
}

/* Slider Container */
.q-switch-slider-container {
    position: relative;
    width: var(--q-switch-width);
    height: var(--q-switch-height);
}

.q-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2; /* Ensure the input is above the slider for click events */
}

.q-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--q-switch-bg-off);
    transition: background-color var(--q-switch-transition-duration);
    border-radius: calc(var(--q-switch-height) / 2);
    z-index: 1;
}

.q-switch-slider::before {
    position: absolute;
    content: "";
    height: var(--q-switch-handle-size);
    width: var(--q-switch-handle-size);
    left: calc((var(--q-switch-height) - var(--q-switch-handle-size)) / 2);
    top: calc((var(--q-switch-height) - var(--q-switch-handle-size)) / 2);
    background-color: var(--q-switch-handle-color);
    transition: transform var(--q-switch-transition-duration);
    border-radius: 50%;
}

.q-switch-input:checked + .q-switch-slider {
    background-color: var(--q-switch-bg-on);
}

.q-switch-input:checked + .q-switch-slider::before {
    transform: translateX(calc(var(--q-switch-width) - var(--q-switch-height)));
}

.q-switch-input:focus + .q-switch-slider {
    box-shadow: 0 0 2px var(--q-switch-bg-on);
}

.q-switch-slider:active::before {
    width: calc(var(--q-switch-handle-size) + 5px);
}


/* Q-File-Tree */
ul.q-file-tree,
ul.q-file-tree ul {
    list-style-type: none;
    padding-left: 20px;
    margin: 0;
}

ul.q-file-tree li {
    position: relative;
}

ul.q-file-tree li .q-toggle {
    position: absolute;
    left: -20px;
    top: 2px;
    cursor: pointer;
}

ul.q-file-tree li .q-item {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
}

ul.q-file-tree li .q-item:hover {
    background-color: var(--q-hover-bg-color);
}

ul.q-file-tree li .q-item i {
    margin-right: 8px;
}

ul.q-file-tree li .q-buttons {
    margin-left: auto;
    text-align: right;
}

ul.q-file-tree li .q-buttons button {
    margin-left: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--q-text-color);
}

ul.q-file-tree li .q-buttons button:hover {
    color: #000;
}

ul.q-file-tree ul {
    margin-left: var(--q-indent-size);
    display: none;
}

ul.q-file-tree li.q-folder > .q-item {
    font-weight: bold;
    cursor: pointer;
}

.q-edit {
    cursor: pointer;
}


#survey_select_sort_icon {
    display: inline-block;
    background: none;
    border: none;
    font-size: 22px;
    padding: 0;
    font-weight: 500;
    color: var(--q-body-color);
    width: 25px;
    cursor: pointer;
}

.q-upload-options {
    margin: 16px 0;
    width: 300px;
}

.q-target-server {
    width: 400px;
    margin: 0;
}

.q-survey-select-container {
    gap: 0;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.q-spacer {
    flex: 1 0 auto;
}

.android-upload th, .android-upload tr, .androiddevicetable th, .androiddevicetable tr {
    border: none;
}

.android-upload th, .androiddevicetable th {
    padding: 10px;
    font-size: 1.5em;
    font-weight: 500;
}

.ui-tooltip {
    max-width: 752px;
    background-color: var(--tooltip-bg-color);
    color: var(--tooltip-text-color);
    border: 1px solid var(--tooltip-border-color);
    box-shadow: 0 4px 8px var(--tooltip-shadow-color);
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    z-index: 1000;
}

.ui-tooltip a {
    color: var(--tooltip-link-color);
    text-decoration: none;
}

.ui-tooltip a:hover {
    color: var(--tooltip-link-hover-color);
    text-decoration: underline;
}

.ui-tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Adjust for tooltip arrow placement */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--tooltip-arrow-border-color) transparent transparent transparent;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

#verboseLabel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 1em;
}

.q-folder-icon {
    color: var(--q-folder-icon-color);
}

.q-file-icon {
    color: var(--q-file-icon-color);
}

.flex-1 {
    flex: 1;
}

.q-file-tree-splitter {
    width: 1px;
    align-self: stretch;
    background-color: var(--q-border-color);
}

#scrollToTopBtn {
    position: absolute;
    z-index: 1;
    bottom: 3rem;
    right: 50%;
    display: none;
    cursor: pointer;
    opacity: 0;
}

#scrollToTopBtn.show {
    display: block;
    opacity: 1;
}

.inline-block{display: inline-block;}