.notes tr {
    background-color: var(--cl-red);
    color: var(--fg-red);
}

form.student {
    position: relative;

    --cell-height: 50;
    --cell-width: 180;
    --cell-spacing: 10;
    --box-padding: 5;
}

form.student .brick {
    position: absolute;
    width: calc(var(--cell-width) * 1px);
    height: calc(var(--cell-height) * 1px);
}

form.student .brick.col4 {
    width: calc(var(--cell-width) * 1px + 20px);
}

form.student .brick label {
    display: block;
}

form.student .brick input + label {
    display: inline;
}

form.student .brick select {
    width: 100%;
}

form.student .brick textarea {
    width: 100%;
    height: 80%;
}

form.student .brick.right {
    text-align: right;
}

form.student .colspan2 textarea {
    width: calc((var(--cell-width) * 2 + var(--cell-spacing) * 3) * 1px) !important;
}

form.student .colspan15 {
    width: calc(var(--cell-width) * 1.5 * 1px);
}

form.student .colspan2 {
    width: calc((var(--cell-width) * 2 + var(--cell-spacing)) * 1px);
}

form.student .rowspan2 {
    height: calc((var(--cell-height) * 2 + var(--cell-spacing)) * 1px);
}

form.student .col1 {
    left: calc((var(--box-padding) + (0 * var(--cell-spacing)) + (0 * var(--cell-width))) * 1px);
}

form.student .col1a {
    left: calc((var(--box-padding) + (0 * var(--cell-spacing)) + (0 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px);
}

form.student .col1b {
    left: calc((var(--box-padding) + (0.5 * var(--cell-spacing)) + (0.5 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px);
}

form.student .col1bcd {
    left: calc((var(--box-padding) + var(--cell-spacing) + (0.5 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) * 1.5 - var(--cell-spacing) / 2) * 1px);
}

form.student .col2 {
    left: calc((var(--box-padding) + (1 * var(--cell-spacing)) + (1 * var(--cell-width))) * 1px);
}

form.student .col2a {
    left: calc((var(--box-padding) + (1 * var(--cell-spacing)) + (1 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px);
}

form.student .col2b {
    left: calc((var(--box-padding) + (1.5 * var(--cell-spacing)) + (1.5 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px);
}

form.student .col3 {
    left: calc((var(--box-padding) + (2 * var(--cell-spacing)) + (2 * var(--cell-width))) * 1px);
}

form.student .col3a {
    left: calc((var(--box-padding) + (2 * var(--cell-spacing)) + (2 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px);
}

form.student .col3b {
    left: calc((var(--box-padding) + (2.5 * var(--cell-spacing)) + (2.5 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px);
}

form.student .col4 {
    left: calc((var(--box-padding) + (3 * var(--cell-spacing)) + (3 * var(--cell-width))) * 1px);
}

form.student .col4a {
    left: calc((var(--box-padding) + (3 * var(--cell-spacing)) + (3 * var(--cell-width))) * 1px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px + 10px);
}

form.student .col4b {
    left: calc((var(--box-padding) + (3.5 * var(--cell-spacing)) + (3.5 * var(--cell-width))) * 1px + 10px);
    width: calc((var(--cell-width) / 2 - var(--cell-spacing) / 2) * 1px + 10px);
}

form.student .row1 {
    top: calc((var(--box-padding) + (0 * var(--cell-spacing)) + (0 * var(--cell-height))) * 1px);
}

form.student .row2 {
    top: calc((var(--box-padding) + (1 * var(--cell-spacing)) + (1 * var(--cell-height))) * 1px);
}

form.student .row3 {
    top: calc((var(--box-padding) + (2 * var(--cell-spacing)) + (2 * var(--cell-height))) * 1px);
}

form.student .row4 {
    top: calc((var(--box-padding) + (3 * var(--cell-spacing)) + (3 * var(--cell-height))) * 1px);
}

form.student .row5 {
    top: calc((var(--box-padding) + (4 * var(--cell-spacing)) + (4 * var(--cell-height))) * 1px);
}

form.student .row6 {
    top: calc((var(--box-padding) + (5 * var(--cell-spacing)) + (5 * var(--cell-height))) * 1px);
}

form.student .row7 {
    top: calc((var(--box-padding) + (6 * var(--cell-spacing)) + (6 * var(--cell-height))) * 1px);
}

form.student .row8 {
    top: calc((var(--box-padding) + (7 * var(--cell-spacing)) + (7 * var(--cell-height))) * 1px);
}

form.student .row9 {
    top: calc((var(--box-padding) + (8 * var(--cell-spacing)) + (8 * var(--cell-height))) * 1px);
}

form.student .row10 {
    top: calc((var(--box-padding) + (8 * var(--cell-spacing)) + (8 * var(--cell-height))) * 1px);
}

form.student .row11 {
    top: calc((var(--box-padding) + (8 * var(--cell-spacing)) + (8 * var(--cell-height))) * 1px);
}

form.student .date-day {
    width: 50px !important;
}

form.student .date-month {
    width: 95px !important;
}

form.student .date-year {
    width: 65px !important;
}

form.student .gender {
    width: 40px !important;
}

form.student .brick.contact {
    width: calc((var(--cell-width) * 2px) + (var(--cell-spacing) * 1px));
}

form.student .brick.contact .label {
    width: calc((var(--cell-width) / 2 * 1px) + (var(--cell-spacing) * 2px));
}

form.student .brick.contact .value {
    width: calc((var(--cell-width) * 1px) + (var(--cell-spacing) * 3px));
}

form.student .brick.contact .value input:is([type=text], [type=number]) {
    width: calc((var(--cell-width) * 1px) + (var(--cell-spacing) * 2px));
}

form.student .brick.contact .actions input[type=submit] {
    color: black;
}

.memo {
    border-width: 1px;
    border-style: solid;
    border-color: var(--cl-gray);
    background-color: var(--cl-white);
    padding: .5em;
    margin-top: 1em;
}

.training {
    border-width: 1px;
    border-style: solid;
    border-color: var(--cl-gray);
    background-color: var(--cl-white);
    padding: .5em;
    margin-top: 2em;
}

.training h4 {
    margin: calc(-2em - 2px) 0 0 calc(-0.5em - 1px);
    padding: 0 .5em;
    background-color: var(--cl-white);
    float: left;
    clear: left;
    border-width: 1px;
    border-style: solid;
    border-color: var(--cl-gray);
    border-bottom-color: var(--cl-white);
}

.memo p {
    text-align: left;
    line-height: 1.5em !important;
    white-space: pre-wrap;
    margin: 0;
}

.memo[open] summary {
    font-weight: bold;
}

.memo .memo-content {
    padding-top: 1em;
}

.memo.folded {
    border: none;
    background: transparent;
    margin: 0;
}

.memo.folded h4 {
    background: transparent;
    border: none;
}

.memo.folded h4 span.extra {
    display: none;
}

.memo.folded p {
    display: none;
}

.new_note textarea {
    width: 100%;
    height: 200px;
}

h2 + div.file_contents {
    margin-top: 2em !important;
}

td.bubble {
    text-align: center;
}

.bubble.num.num0 {
    background-color: var(--cl-gray);
    color: var(--cl-black);
}

.bubble.num.num-green:not(.num0) {
    background-color: var(--cl-green);
    color: var(--cl-white);
}

.bubble.num.num-red:not(.num0) {
    background-color: var(--cl-red);
    color: var(--cl-white);
}

span.checklist {
    display: block;
    height: 20px;
    width: 40px;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
    font-size: 11px;
    background-color: var(--cl-gray);
    position: relative;
}

span.checklist > span {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: var(--cl-white);
    content: " ";
    transition-property: left;
    transition-duration: 350ms;
    transition-timing-function: ease-in-out;
}

span.checklist:hover, span.checklist.toggled:hover {
    background-color: var(--cl-white);
}

span.checklist:hover > span {
    background-color: black;
}

span.checklist.toggled {
    background-color: #333333;
}

span.checklist.toggled > span {
    left: 22px;
}

tr.selected td {
    background-color: #a5a5ff !important;
}

.file .tabheads .tabhead {
    display: block;
    margin-top: -40px;
    padding: .5em;
    float: left;
    cursor: pointer;
}

.file .tabheads .tabhead.active {
    background-color: var(--cl-lightgray);
}

.file .tabheads .tabhead:not(.active) {
    background: #f9f9f9;
    /*border-top: 1px solid black;*/
    /*border-right: 1px solid black;*/
    /*border-left: 1px solid black;*/
}

.file .tabheads .tabhead:not(:first-child) {
    margin-left: .5em;
}

#edit-user-status p {
    text-align: center;
    font-size: 1.5rem;
}

.list.students th.bubble {
    width: 15px;
    padding-left: 15px;
}

.list.students th.bubble span {
    display: block;
    position: absolute;
    transform: rotate(-45deg);
    transform-origin: 0 0;
}

.list.students th.bubble:last-child {
    width: 70px;
    padding: 0;
}

.list.students td.bubble {
    text-align: right;
}

.list.students td.bubble.ops {
    text-align: center;
}

.list.students td.bubble span.bubble {
    float: right;
}

.list.students tr.deleted {
    opacity: .35;
}

.list.students thead tr.extra-head {
    height: 80px;
}

.list.students thead tr.extra-head th {
    border-bottom: none;
    text-align: left;
    vertical-align: bottom;
}

.list.students thead :is(select, input[type=text]) {
    height: 20px;
    padding: 1px;
    font-size: 11px;
    border: none;
    background-color: var(--cl-lightgray);
}

.list.students thead th:has(input[type=text]) {
    padding-right: 1em;
}

.list.students.loading tbody {
    opacity: 0.1;
}

.list.students.loading tbody:after {

}

.file_contents.stammdaten {
    margin: 0 !important;
}

:is(.file_contents.stammdaten, .file.training) :is(h2, h3) {
    background-color: var(--cl-white);
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 0;
}

.file.training {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

:is(input[type=hidden]:is([value="1"]) + form) .locking label::after {
    content: " 🔒";
}

:is(input[type=hidden]:is([value="1"]) + form) .locking label {
    background: transparent;
    color: var(--cl-black);
}

:is(input[type=hidden]:is([value="1"]) + form) .locking :is(input, select) {
    background-color: grey;
    color: var(--cl-white);
}

.stammdaten label input[type=button] {
    background: transparent;
    font-weight: bold;
    color: var(--cl-highlight);
}

#add-praktika {
    padding: 0;
}

.training .businesses-result-list {
    background: var(--cl-white);
}

.training .businesses-result-list .selector {
    display: run-in;
    float: left;
    width: 40px;
    height: 40px;
    padding-top: 10px;
    padding-left: 10px;
}

.training .businesses-result-list input[type=radio] {
    transform: scale(2.25);
}

.training .businesses-result-list :is(p, label) {
    background: transparent;
    color: var(--cl-black);
    border: 1px solid black;
    padding: 5px;
    width: 100%;
    height: min-content;
}

.training .businesses-result-list :is(p, label):hover {
    background-color: lightyellow;
}

.training .businesses-result-list :is(p, label):first-child {
    margin-bottom: 20px;
}

.training .businesses-result-list :is(.r_name, .r_address, .r_props, .r_akquise, .r_owner) {
    display: block;
    white-space: normal;
}

.training .businesses-result-list .r_name {
    font-weight: bold;
}

.training .businesses-result-list .r_props {
    text-align: left;
    font-style: italic;
}

.training .businesses-result-list .r_props > span {
    white-space: nowrap;
}

.training .businesses-result-list .r_props em {
    color: salmon;
    text-decoration: underline;
}

.training .businesses-result-list .r_props strong {
    font-weight: bold;
    font-style: normal;
}

.training .businesses-result-list .r_props > span:before {
    content: " · ";
    white-space: normal;
}

.training .businesses-result-list .r_props > span:first-child:before {
    content: "";
}

.training .businesses-result-list :is(.r_props, .r_akquise, .r_owner) {
    margin-top: .5em;
}

.training h4 input:is([type=submit], [type=button]) {
    color: black;
    float: none;
    font-size: 14px;
    padding: 0 .5em;
    margin-left: .5em;
    transition: all 250ms ease-in-out;
    border-radius: 3px;
}

.training h4 input:is([type=submit], [type=button]):hover {
    background: black;
    color: white;
}

.sent_student .specops1 {
    visibility: hidden;
}

.sent_business .specops2 {
    visibility: hidden;
}