:root {
    --backgroundColor: #f5f5f5;
    --emphasisColor: #009879;
    --emphasisColorDark: #00715b;
    --emphasisColorDark2: #005847;
    --emphasisColorShadow: #008f7279;
    --activeRowColor: #baf4e8;
    --error: #a00000;
    --error-shady: #a0000060;
    --black-shady: #00000060;
    --armin: #d59500;
    --gemeinschaft: #0072b5;
}

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    background-color: var(--backgroundColor);
}

form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

hr {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    border: none;
}

p {
    margin: 0px;
    font-size: 16px;
}

.f-small {
    font-size: 10px;
}

.f-big {
    font-size: 14px;
}

.f-norm {
    font-size: 12px;
}

.input-header {
    margin: 0px;
    padding: 0px 8px;
    font-size: 12px;
}

.divrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.divcolumn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

.divcolumncenter {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.div-collection {
    margin: 0px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.div-collection-row {
    margin: 0px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-input {
    padding: 8px 20px; /* Padding inside the input field */
    border: 2px solid var(--emphasisColor); /* Border matching the button color */
    border-radius: 4px; /* Rounded corners to match the button */
    font-size: 16px; /* Font size to match the button */
    outline: none; /* Remove default outline */
    transition: border-color 0.3s ease; /* Smooth transition for the border */
    width: 200px; /* Set a width for the input */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-input:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: 0 0 20px var(--emphasisColorShadow); /* Add a custom focus ring */
}

.styled-button {
    width: 180px;
    background-color: var(--emphasisColor);
    color: white; /* White text */
    padding: 8px 20px; /* Some padding */
    border: none; /* Remove borders */
    border-radius: 4px; /* Rounded corners */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Spacing between letters */
    font-size: 16px; /* Increase font size */
    cursor: pointer; /* Pointer/hand icon on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-button-active {
    background-color: var(--emphasisColorDark);
    color: white;
}

.styled-button:hover {
    background-color: var(--emphasisColorDark);
}

.styled-button:active {
    background-color: var(--emphasisColorDark2);
    transform: translateY(2px); /* Slightly push the button down on click */
}

.styled-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: 0 0 20px var(--emphasisColorShadow);
    /* box-shadow: 0 0 0 3px var(--emphasisColorShadow); /* Add a custom focus ring */
}

.styled-button-2 {
    padding: 8px 8px; /* Some padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 180px;
}

.styled-button-2:hover:enabled {
    background-color: var(--activeRowColor);
}

.styled-button-2:active {
    transform: translateY(2px); /* Slightly push the button down on click */
}

.styled-button-2:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: 0 0 20px var(--emphasisColorShadow);
    /* box-shadow: 0 0 0 3px var(--emphasisColorShadow); /* Add a custom focus ring */
}

.styled-select {
    width: 180px;
    background-color: white;
    color: black;
    padding: 8px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    appearance: none; /* Removes default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><polygon points="70,90 120,40 20,40" fill="%23999"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 12px;
}

.styled-select:hover {
    border-color: #888;
}

.styled-select:focus {
    border-color: #555;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Additional styling for disabled option */
.styled-select option[disabled] {
    color: #999;
}

.styled-input-2 {
    padding: 8px 8px; /* Padding inside the input field */
    border: 1px solid #ccc; /* Border matching the button color */
    border-radius: 4px; /* Rounded corners to match the button */
    font-size: 12px; /* Font size to match the button */
    outline: none; /* Remove default outline */
    transition: border-color 0.3s ease; /* Smooth transition for the border */
    width: 162px; /* Set a width for the input */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-input-2:focus {
    border-color: #555;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.tbl {
    border-collapse: collapse;
    margin: 0;
    font-family: sans-serif;
    width: 80%;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tbl th,
.tbl td {
    padding: 6px 10px;
    text-align: right;
}

.tbl th:first-child,
.tbl td:first-child {
    padding: 6px 10px;
    text-align: left;
}

.tbl thead tr {
    background-color: var(--emphasisColor);
    color: #ffffff;
}

.tbl tbody tr.r-header {
    background-color: var(--emphasisColor);
    color: #ffffff;
    font-weight: bold;
}

.tbl tbody tr.r-odd {
    background-color: #f3f3f3;
    border-bottom: 1px solid #dddddd;
}

.tbl tbody tr.r-even {
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
}

.tbl tbody tr.r-subodd {
    /* background-color: #fff39b; */
    background-color: #fffce2;
    font-size: 10px;
    border-bottom: 1px solid #dddddd;
}

.tbl tbody tr.r-subeven {
    /* background-color: #fff9ce; */
    background-color: #fffdef;
    font-size: 10px;
    border-bottom: 1px solid #dddddd;
}

.tbl tbody tr.r-special {
    background-color: #ffe9ba;
    font-style: italic;
    border-bottom: 1px solid #ffe9ba;
}

.tbl tbody tr.r-special2 {
    background-color: #ffb648;
    font-weight: bold;
    border-bottom: 1px solid #ffb648;
}

.tbl tbody tr.r-group {
    background-color: #edefff;
    display: none;
}

.tbl tbody tr.r-sum {
    background-color: #ffe9ba;
}

.tbl tbody tr:last-of-type {
    border-bottom: 2px solid var(--emphasisColor);
}

.tbl tbody tr.r-active {
    background-color: var(--activeRowColor);
    border-bottom: 1px solid #dddddd;
}

.tbl tbody tr.r-subactive {
    background-color: var(--activeRowColor);
    font-size: 10px;
    border-bottom: 1px solid #dddddd;
}