* {
    box-sizing: border-box;
}
html, body, main {
    font-family: Helvetica, sans-serif;
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.overflow-hidden {
    overflow: hidden;
}

/** VIEWPORT **/
.container {
    margin-left: 80px;
    margin-right: 20px;
    margin-top: 70px;
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}
.container-50 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 80px;
    margin-right: 20px;
    margin-top: 70px;
}
.container-50 > div {
    width: 49%;
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}

.container-grid {
    margin-left: 80px;
    margin-right: 20px;
    margin-top: 70px;
}
.container-grid > div {
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}

.container-nav-active {
    margin-left: 305px;
    margin-right: 20px;
    margin-top: 70px;
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}


.container-accordion {
    margin-left: 80px;
    margin-right: 20px;
    margin-top: 70px;
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}
.container-accordion-title {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.section {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 80px;
    margin-right: 20px;
    margin-top: 70px;
}
.section-nav-active {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 305px;
    margin-right: 20px;
    margin-top: 70px;
}
.inner-section {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.section-container {
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}
.section-container-accordion {
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}
.section-container-accordion-title {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.section-headline > h2 {
    background-color: #414141;
    color: #FFF;
    font-size: 22.5px;
    font-weight: 300;
    margin: 0;
    padding: 15px;
    border-bottom: 5px solid #ffa500;
}


/** NEW CONTAINER **/
.section-v2 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 80px;
    margin-right: 20px;
}
.section-v2-nav-active {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 305px;
    margin-right: 20px;
}

.section-v2-container {
    background-color: #FFFFFF;
    box-shadow: 8px 8px 15px 2px silver;
}

.inner-section-v2 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.section-v2-headline > h2 {
    background-color: #414141;
    color: #FFF;
    font-size: 22.5px;
    font-weight: 300;
    margin: 0;
    padding: 15px;
    border-bottom: 5px solid #ffa500;
}

.section-v2-body {
    padding: 20px;
}
.section-v2-body-no-white-space {
    padding: 0px;
}

/* LOADING OVERLAY */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.loading-spinner-container {
    text-align: center;
    color: white;
}
.loading-text {
    color: #FFFFFF;
    font-size: 25px;
    white-space: pre-line;
    position: relative;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.3) 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* POPUP  */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background: white;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.popup-headline > h2 {
    background-color: #414141;
    color: #FFF;
    font-size: 22.5px;
    font-weight: 300;
    margin: 0;
    padding: 15px;
    border-bottom: 5px solid #ffa500;
}
.popup-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}


/* Toggle-Dropdown */
.column-toggle-dropdown {
    display: inline-block;
    position: relative;
}
.column-toggle-dropdown summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 60px;
    border: 0;
    border-radius: 5px;
    background-color: #414141;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
}
.column-toggle-dropdown summary:hover {
    font-weight: 600;
}
.column-toggle-dropdown summary::-webkit-details-marker {
    display: none;
}
.column-toggle-dropdown .arrow {
    font-size: 0.8em;
    transition: transform 0.2s;
}
.column-toggle-dropdown[open] .arrow {
    transform: rotate(180deg);
}
.column-toggle-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    min-width: 200px;
    width: 100%;
    z-index: 100;
}
.column-toggle-dropdown .dropdown-menu label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.column-toggle-dropdown .dropdown-menu input[type='checkbox'] {
    transform: scale(1.1);
}




/** ELEMENTE **/
.text-align-center {
    text-align: center;
}
.border {
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}
.border-bottom {
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0px;
}
.border-bottom-orange {
    border-bottom: 4px solid #ffa500!Important;
    border-radius: 0px;
}

.display-field {
    position: relative;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

.display-field-label {
    position: absolute;
    top: -11px;
    left: 20px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    color: #202020;
    background-color: #FFFFFF;
    padding: 0px 10px;
}

p.display-field-content {
    padding-left: 10px;
}
input.display-field-content {
    border: 0;
    height: 58px;
    width: 100%;
}
select.display-field-content {
    border: 0;
    height: 58px;
    width: 100%;
}
.cursor-pointer {
    cursor: pointer;
}

/** Circle-Progress **/
.circle-progress-value {
	stroke-width: 10px;
	stroke: #ffa500;
}
.circle-progress-circle {
	stroke: white;
	stroke-width: 15px;
	fill: #adadad;
}
.circle-progress-text {
	font-family: Helvetica, sans-serif;
	font-size: 30px;
	fill: #FFFFFF;
}

.circle-progress {
    width: 175px;
    height: auto;
}

/** Progress Bar **/
.progress-bar {
    width: 100%;
    height: 50px;
    background-color: #e1e1e1;
    border-radius: 20px;
    position: relative;
}

.progress-bar .progress {
    height: 100%;
    background-color: #ffa500;
    border-radius: 20px;
    width: 0%;
    transition: width 0.3s ease-in-out;
}

.progress-bar .progress span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
}

/** Alert Box **/
.alert-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    box-shadow: 10px 20px 15px silver;
    background-color: #FFFFFF;
}
.alert-box-topic {
    margin-bottom: 25px;
    background-color: #e1e1e1;
}
.alert-box-topic p {
    margin: 0px;
    padding: 10px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
}
.alert-box-description {
    margin-bottom: 40px;
    padding: 0px 50px;
}
.alert-box-buttons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

/*** Notifications ***/
#notification-box {
    position: fixed;
    z-index: 1000;
    bottom: 10px;
    right: 20px;
    width: 400px;
}
#notification-box .notification {
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
#notification-box .notification-error {
    background-color: #a51f1f;
}
#notification-box .notification-success {
    background-color: #46a853;
}
#notification-box .notification-neutral {
    background-color: #414141; 
}
#notification-box .notification button {
    background-color: #ffa500;
    padding: 10px 30px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/*** Quick Notifications ***/
#quick-notification-box {
    position: fixed;
    z-index: 1000;
    bottom: 10px;
    left: 80px;
    width: 400px;
}
#quick-notification-box .quick-notification {
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#quick-notification-box .notification-error {
    background-color: #a51f1f;
}
#quick-notification-box .notification-success {
    background-color: #46a853;
}
#quick-notification-box .notification-neutral {
    background-color: #414141; 
}
#quick-notification-box .quick-notification p {
    color: #FFFFFF;
    margin: 0;
    padding-right: 10px;
}
#quick-notification-box .quick-notification button {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s;
}


/*** CHECKBOX ***/
.checkbox-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.checkbox-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.checkbox-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}
.checkbox-switch-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .checkbox-switch-slider {
    background-color: #ffa500;
}
input:focus + .checkbox-switch-slider {
    box-shadow: 0 0 1px #ffa500;
}
input:checked + .checkbox-switch-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.checkbox-switch-slider:before {
    border-radius: 50%;
}

/** Pogress Bar **/
.progress-bar-active {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e1e1e1;
    background-color: #e1e1e1;
    width: 20%;
    padding: 0.25em;
    margin: 0.5em;
}
.progress-bar-active > p {
    color: #FFFFFF;
    font-size: 23px;
    font-weight: 500;
}
.progress-bar-inactive {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e1e1e1;
    width: 20%;
    padding: 0.25em;
    margin: 0.5em;
}

/** BUTTON **/
.button-primary {
    background-color: #ffa500;
    padding: 10px 60px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-primary-low {
    background-color: #ffa500;
    padding: 10px 60px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-primary-full-width {
    background-color: #ffa500;
    height: 50px;
    width: 100%;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}


.button-secondary {
    background-color: #414141;
    padding: 10px 60px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-secondary-light {
    background-color: #d3d3d3;
    padding: 10px 60px;
    border: 0;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-secondary-low {
    background-color: #414141;
    padding: 10px 60px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-secondary-full-width {
    background-color: #414141;
    height: 50px;
    width: 100%;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-secondary-low-full-width {
    background-color: #414141;
    height: 50px;
    width: 100%;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.button-secondary-low-delete {
    background-color: #a51f1f;
    padding: 10px 60px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}


.button-primary:hover,
.button-primary-low:hover,
.button-primary-full-width:hover,
.button-secondary:hover,
.button-secondary-light:hover,
.button-secondary-low:hover,
.button-secondary-full-width:hover,
.button-secondary-low-full-width:hover,
.button-secondary-low-delete:hover {
    font-weight: 600;
}

button > a {
    text-decoration: none;
    color: #FFFFFF;
}

/** DIV-Tabel | Basic **/
.div-table-container {
    overflow-x: auto;
}

.div-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

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

.div-table-head .div-table-cell {
    display: table-cell;
    border: 0px solid #e1e1e1;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    resize: horizontal;
    cursor: ew-resize;
}

.div-table-body {
    display: table-row-group;
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    color: #414141;
    overflow-x: auto;
}

.div-table-body .div-table-cell {
    display: table-cell;
    border: 1px solid #e1e1e1;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.div-table-body .div-table-cell-input {
    display: table-cell;
    border: 1px solid #e1e1e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.div-table-body .div-table-cell-input input,
.div-table-body .div-table-cell-input select {
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    color: #414141;
    width: 100%;
    border: 0;
    padding: 15px;
}


.div-table-body .div-table-cell-checkbox {
    display: table-cell;
    border: 1px solid #e1e1e1;   
    background-color: #f3f3f3; 
    color:#459B5C
}



.div-table-head {
    display: table-header-group;
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    color: #202020;
}

.div-table-footer {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.div-table-button {
    background-color: #414141;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.div-table-button-edit {
    background-color: #414141;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.div-table-button-action {
    background-color: #414141;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.div-table-button-selected {
    background-color: #ffa500;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.div-table-button-delete {
    background-color: #a51f1f;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.div-table-button:hover,
.div-table-button-delete:hover {
    font-weight: 600;
}

.percent-cell .percent-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e1e1e1;
    z-index: 1;
}
.percent-cell .percent-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #ffa500;
    z-index: 2;
}
.percent-cell .percent-text {
    position: relative;
    z-index: 3;
    padding-left: 10px;
}

/** Filter **/
.dynamic-filter {
    padding: 5px 20px;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 5px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
}

/** Paginierung **/
.div-table-pagination {
    margin: 1em 0em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.div-table-pagination > p {
    margin: 0em 0.25em;
    padding: 17px;
    border: 1px solid #e1e1e1;
}




/*** FORM | Basic-Form  ***/
input::placeholder,
textarea::placeholder,
select::placeholder {
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    color: #adadad;
}
input[type='text'],
input[type='url'],
input[type='password'],
input[type='number'],
input[type='file'],
input[type='date'],
textarea,
select {
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    color: #414141;
    padding-left: 20px;
}

.form-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.form-item input,
.form-item select {
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}
.form-item textarea {
    width: 100%;
    height: 100px;
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}
.form-item label {
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    color: #202020;
    margin-bottom: 15px;
}



.form-item select[multiple] {
    width: 100%;
    height: 150px;
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}
.form-item select[multiple] option {
    padding: 10px;
}
.form-item select[multiple]:focus option {
    background-color: #f3f3f3;
}
.form-item select[multiple]::-webkit-scrollbar {
    width: 10px;
}
.form-item select[multiple]::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 4px;
}
.form-item select[multiple] option:checked {
    background-color: #555;
    color: white;
}




/** FORM - DROP ZONE **/
.drop-zone {
    border: 2px dashed #ddd;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
.drop-zone:hover {
    background-color: #f5f5f5;
}
.drop-zone-file {
    display: none;
}
.drop-zone-text {
    font-size: 16px;
    color: #555;
}
.drop-zone-file-name {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}
  
/** SINGEL-FORM **/
#singel-form-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 25vh;
    width: 600px;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    box-shadow: 10px 20px 15px silver;
    background-color: #FFFFFF;
}
#singel-form-topic {
    margin-bottom: 25px;
    background-color: #e1e1e1;
}
#singel-form-topic p {
    margin: 0px;
    padding: 10px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    color: #FFFFFF;
}

#singel-form-description {
    margin-bottom: 40px;
    padding: 0px 50px;
}

#singel-form-form {
    margin-bottom: 25px;
    padding: 0px 50px;
}

/** FLEX-MODEL **/
.flex-column-center--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-column-center--flex-start {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.flex-column-space-between--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.flex-column-space-between--flex-start {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.flex-column-flex-start--flex-start {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-column-flex-start--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.flex-row-space-between--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.flex-row-space-between--flex-start {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.flex-row-flex-start--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.flex-row-flex-start--center--wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.flex-row-flex-start--flex-start {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-row-center--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flex-row-space-evenly--center {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.align-items--stretch {
    align-items: stretch;
}

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

/** ICON **/
.icon-form {
    font-size: 23px;
    font-weight: 100;
}

.icon-s {
    font-size: 20px;
    font-weight: 300;
}
.icon-m {
    font-size: 25px;
    font-weight: 300;
}
.icon-l {
    font-size: 30px;
    font-weight: 300;
}

/** COLOR **/
.c-red {
    color: #a51f1f;
}
.c-organge {
    color:#ffa500;
}
.c-gray-light {
    color: #adadad;
}
.c-white {
    color: #FFFFFF;
}
.c-gray {
    color: #414141;
}
.c-blue {
    color: #3b60cd;
}
.c-green {
    color: #46a853;
}

/** BACKGROUND COLOR **/
.bc-orange {
    background-color: #ffa500;
}
.bc-orange-light {
    background-color: #ffcc80;
}
.bc-blue {
    background-color: #1e53d9;
}
.bc-blue-light {
    background-color: #80bfff;
}
.bc-red {
    background-color: #be3329;
}
.bc-green {
    background-color: #46a853;
}
.bc-gray-light {
    background-color: #f2f2f2;
}
.bc-gray {
    background-color: #414141;
}
.bc-white {
    background-color: #FFFFFF;
}

/** GRÖßEN **/
.w-5pe {
    width: 5%;
}
.w-10pe {
    width: 10%;
}
.w-15pe {
    width: 15%;
}
.w-20pe {
    width: 20%;
}
.w-22-5pe {
    width: 22.5%;
}
.w-25pe {
    width: 25%;
}
.w-30pe {
    width: 30%;
}
.w-33pe {
    width: 33%;
}
.w-40pe {
    width: 40%;
}
.w-48pe {
    width: 48%;
}
.w-50pe {
    width: 50%;
}
.w-60pe {
    width: 60%;
}
.w-66pe {
    width: 66%;
}
.w-70pe {
    width: 70%;
}
.w-75pe {
    width: 75%;
}
.w-80pe {
    width: 80%;
}
.w-100pe {
    width: 100%;
}

.w-500px {
    width: 500px;
}
.w-250px {
    width: 250px;
}

.min-w-30pe {
    min-width: 30%;
}
.min-w-50pe {
    min-width: 50%;
}
.min-w-60pe {
    min-width: 60%;
}

.h-50px {
    height: 50px;
}
.h-100px {
    height: 100px;
}
.h-100pe {
    height: 100%;
}


.min-h-400 {
    min-height: 400px;
}

.min-w-250 {
    min-width: 250px;
}

/** ABSTÄNDE **/
.m0 {
    margin: 0em;
}
.m025 {
    margin: .25em;
}
.m05 {
    margin: .5em;
}
.m075 {
    margin: .75em;
}
.m1 {
    margin: 1em;
}
.m1-5 {
    margin: 1.5em;
}
.m2 {
    margin: 2em;
}

.mt0 {
    margin-top: 0em;
}
.mt025 {
    margin-top: .25em;
}
.mt05 {
    margin-top: .5em;
}
.mt075 {
    margin-top: .75em;
}
.mt1 {
    margin-top: 1em;
}
.mt1-5 {
    margin-top: 1.5em;
}
.mt2 {
    margin-top: 2em;
}
.mt3 {
    margin-top: 3em;
}
.mt4 {
    margin-top: 4em;
}
.mt6 {
    margin-top: 6em;
}

.mb0 {
    margin-bottom: 0em;
}
.mb025 {
    margin-bottom: .25em;
}
.mb05 {
    margin-bottom: .5em;
}
.mb075 {
    margin-bottom: .75em;
}
.mb1 {
    margin-bottom: 1em;
}
.mb1-5 {
    margin-bottom: 1.5em;
}
.mb2 {
    margin-bottom: 2em;
}
.mb3 {
    margin-bottom: 3em;
}
.mb4 {
    margin-bottom: 4em;
}

.ml0 {
    margin-left: 0em;
}
.ml025 {
    margin-left: .25em;
}
.ml05 {
    margin-left: .5em;
}
.ml075 {
    margin-left: .75em;
}
.ml1 {
    margin-left: 1em;
}
.ml1-5 {
    margin-left: 1.5em;
}
.ml2 {
    margin-left: 2em;
}

.mr0 {
    margin-right: 0em;
}
.mr025 {
    margin-right: .25em;
}
.mr05 {
    margin-right: .5em;
}
.mr075 {
    margin-right: .75em;
}
.mr1 {
    margin-right: 1em;
}
.mr1-5 {
    margin-right: 1.5em;
}
.mr2 {
    margin-right: 2em;
}


.mlr0 {
    margin-left: 0em;
    margin-right: 0em;
}
.mlr025 {
    margin-left: .25em;
    margin-right: .25em;
}
.mlr05 {
    margin-left: .5em;
    margin-right: .5em;
}
.mlr075 {
    margin-left: .75em;
    margin-right: .75em;
}
.mlr1 {
    margin-left: 1em;
    margin-right: 1em;
}
.mlr1-5 {
    margin-left: 1.5em;
    margin-right: 1.5em;
}
.mlr2 {
    margin-left: 2em;
    margin-right: 2em;
}

.mtb0 {
    margin-top: 0em;
    margin-bottom: 0em;
}
.mtb025 {
    margin-top: .25em;
    margin-bottom: .25em;
}
.mtb05 {
    margin-top: .5em;
    margin-bottom: .5em;
}
.mtb075 {
    margin-top: .75em;
    margin-bottom: .75em;
}
.mtb1 {
    margin-top: 1em;
    margin-bottom: 1em;
}
.mtb1-5 {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.mtb2 {
    margin-top: 2em;
    margin-bottom: 2em;
}
.mtb3 {
    margin-top: 3em;
    margin-bottom: 3em;
}
.mtb4 {
    margin-top: 4em;
    margin-bottom: 4em;
}
.mtb6 {
    margin-top: 6em;
    margin-bottom: 6em;
}


.p0 {
    padding: 0em;
}
.p025 {
    padding: .25em;
}
.p05 {
    padding: .5em;
}
.p075 {
    padding: .75em;
}
.p1 {
    padding: 1em;
}
.p1-5 {
    padding: 1.5em;
}
.p2 {
    padding: 2em;
}

.ptb0 {
    padding-top: 0em;
    padding-bottom: 0em;
}
.ptb025 {
    padding-top: .25em;
    padding-bottom: .25em;
}
.ptb05 {
    padding-top: .5em;
    padding-bottom: .5em;
}
.ptb075 {
    padding-top: .75em;
    padding-bottom: .75em;
}
.ptb1 {
    padding-top: 1em;
    padding-bottom: 1em;
}
.ptb1-5 {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
.ptb2 {
    padding-top: 2em;
    padding-bottom: 2em;
}
.ptb4 {
    padding-top: 4em;
    padding-bottom: 4em;
}

.plr0 {
    padding-left: 0em;
    padding-right: 0em;
}
.plr025 {
    padding-left: .25em;
    padding-right: .25em;
}
.plr05 {
    padding-left: .5em;
    padding-right: .5em;
}
.plr075 {
    padding-left: .75em;
    padding-right: .75em;
}
.plr1 {
    padding-left: 1em;
    padding-right: 1em;
}
.plr1-5 {
    padding-left: 1.5em;
    padding-right: 1.5em;
}
.plr2 {
    padding-left: 2em;
    padding-right: 2em;
}
.plr4 {
    padding-left: 4em;
    padding-right: 4em;
}

.pb2 {
    padding-bottom: 2em;
} 
.pb3 {
    padding-bottom: 3em;
} 
.pb4 {
    padding-bottom: 4em;
} 
.ptb7px {
    padding-top: 7px;
    padding-bottom: 7px;
}



.pt2 {
    padding-top: 2em;
}
.pl1 {
    padding-left: 1em;
}

/** FONT **/
body p,
body li {
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    line-height: 24px;
    color: #414141;
}
h1 {
    font-family: inherit;
    font-size: 25px;
    font-weight: 400;
    color: #202020;
    line-height: 25px;
}
h2 {
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    color: #202020;
    line-height: 20px;
}
h3 {
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    color: #202020;
    line-height: 17px;
}

.font-accent-light {
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    color: #202020;
}
.font-accent-medium {
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    color: #202020;
}
.font-accent-hard {
    font-family: inherit;
    font-size: 25px;
    font-weight: 400;
    color: #202020;
}

.font-content {
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    color: #414141;
}
.font-content-bold {
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #414141;
}
.font-content-low {
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    color: #414141;
}

.font-link-light {
    font-family: inherit;
    font-size: 17px;
    font-weight: 300;
    color: #FFFFFF;
    text-decoration: none;
}

.font-weight-500 {
    font-weight: 500;
}


.div-table-pointer {
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.div-table-pointer:hover {
    background-color: #e1e1e1;
    color: #ffa500;
    font-weight: 600;
}

.pointer {
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.pointer:hover {
    color: #ffa500;
    font-weight: 600;
}


/** MESSAGES **/
.errorlist li {
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    color: #a53e3e;
}
.error-message {
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    color: #a53e3e;
}
.success-message {
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    color: #459B5C;
}


/* Style für Alert-Box */
.alert {
    padding: 20px;
    background-color: #f44336; /* Rote Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    font-size: 18px;
    border-radius: 10px;
  }
  
  /* Style für den "OK"-Button */
  .alert button {
    background-color: white;
    color: #f44336; /* Rote Schriftfarbe */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
  }
  
  /* Hover-Effekt für den "OK"-Button */
  .alert button:hover {
    background-color: #f44336; /* Rote Hintergrundfarbe */
    color: white; /* Weiße Schriftfarbe */
  }



/* LOADING CONTAINER */

  /* Allgemeiner Container */
  .full-view-progress-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* Standardmäßig ausgeblendet */
.display-none {
    display: none;
}

.full-view-progress-title {
    font-size: 28px;
    font-weight: 400;
    color: #414141;
}

.full-view-progress-text {
    font-size: 18px;
    font-weight: 300;
    color: #414141;
}

.completion-message {
    font-size: 18px;
    font-weight: 300;
    color: #414141;
}


/* Fortschrittsinneres */
.full-view-progress-inner {
    width: 80%;
    max-width: 600px;
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}
        
/* Fortschrittsbalken-Hülle */
.full-view-progress-bar-wrapper {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    margin: 40px 0;
    position: relative;
}

/* Fortschrittsbalken */
.full-view-progress-bar {
    width: 0%;
    height: 50px;
    background: linear-gradient(to right, #ffa500, #ffcc33);
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* Prozentanzeige */
.full-view-progress-bar-wrapper::after {
    content: attr(data-progress) "%";
    position: absolute;
    top: 12.5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
}




/* SPINNER */

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

.fa-spinner {
    animation: spin 1s linear infinite; /* 1s für eine Umdrehung */
}


/* SECURITY QUERY */
#security-query-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
}
#security-query-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    max-width: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
}