/* ===== SUBJECT COLORS ===== */
/* Color palette for subject color coding (20 colors) */
:root {
    --std-color-0-bg: #b8ddf5;
    --std-color-0-accent: #2a7bbf;   /* Sky blue    */
    --std-color-1-bg: #f5e878;
    --std-color-1-accent: #c4a000;   /* Yellow      */
    --std-color-2-bg: #d4b8f0;
    --std-color-2-accent: #7040b8;   /* Violet      */
    --std-color-3-bg: #b8f0cc;
    --std-color-3-accent: #2a9048;   /* Green       */
    --std-color-4-bg: #f09090;
    --std-color-4-accent: #b82020;   /* Red         */
    --std-color-5-bg: #b8eff0;
    --std-color-5-accent: #2a9898;   /* Cyan        */
    --std-color-6-bg: #f090c8;
    --std-color-6-accent: #b02878;   /* Pink        */
    --std-color-7-bg: #d8f0b8;
    --std-color-7-accent: #5a9820;   /* Light green */
    --std-color-8-bg: #fde8b8;
    --std-color-8-accent: #c07800;   /* Amber       */
    --std-color-9-bg: #f5c8e8;
    --std-color-9-accent: #a03070;   /* Rose        */
    --std-color-10-bg: #8898f0;
    --std-color-10-accent: #2028b0;  /* Indigo      */
    --std-color-11-bg: #40c8c8;
    --std-color-11-accent: #007070;  /* Teal        */
    --std-color-12-bg: #fdc8a0;
    --std-color-12-accent: #c06030;  /* Peach       */
    --std-color-13-bg: #d8c8f5;
    --std-color-13-accent: #5030a0;  /* Lavender    */
    --std-color-14-bg: #80f0c0;
    --std-color-14-accent: #108860;  /* Mint        */
    --std-color-15-bg: #f0d030;
    --std-color-15-accent: #908000;  /* Gold        */
    --std-color-16-bg: #e8c8c8;
    --std-color-16-accent: #902020;  /* Brick red   */
    --std-color-17-bg: #d8b888;
    --std-color-17-accent: #7a4818;  /* Brown       */
    --std-color-18-bg: #c8d860;
    --std-color-18-accent: #507018;  /* Olive       */
    --std-color-19-bg: #f0e0f5;
    --std-color-19-accent: #803090;  /* Plum        */
}

/* Text color override for all colored subject elements */
.fachfarbe[class*="stdColor"] {
    color: var(--atlantis-anthracite);
}
.fachfarbe[class*="stdColor"].textBlue {
    color: var(--atlantis-anthracite);
}

/* Subject color classes — used across all modules */
.fachfarbe.stdColor0 {
    background-color: var(--std-color-0-bg);
    border-left: 0.25rem solid var(--std-color-0-accent);
}
.fachfarbe.stdColor1 {
    background-color: var(--std-color-1-bg);
    border-left: 0.25rem solid var(--std-color-1-accent);
}
.fachfarbe.stdColor2 {
    background-color: var(--std-color-2-bg);
    border-left: 0.25rem solid var(--std-color-2-accent);
}
.fachfarbe.stdColor3 {
    background-color: var(--std-color-3-bg);
    border-left: 0.25rem solid var(--std-color-3-accent);
}
.fachfarbe.stdColor4 {
    background-color: var(--std-color-4-bg);
    border-left: 0.25rem solid var(--std-color-4-accent);
}
.fachfarbe.stdColor5 {
    background-color: var(--std-color-5-bg);
    border-left: 0.25rem solid var(--std-color-5-accent);
}
.fachfarbe.stdColor6 {
    background-color: var(--std-color-6-bg);
    border-left: 0.25rem solid var(--std-color-6-accent);
}
.fachfarbe.stdColor7 {
    background-color: var(--std-color-7-bg);
    border-left: 0.25rem solid var(--std-color-7-accent);
}
.fachfarbe.stdColor8 {
    background-color: var(--std-color-8-bg);
    border-left: 0.25rem solid var(--std-color-8-accent);
}
.fachfarbe.stdColor9 {
    background-color: var(--std-color-9-bg);
    border-left: 0.25rem solid var(--std-color-9-accent);
}
.fachfarbe.stdColor10 {
    background-color: var(--std-color-10-bg);
    border-left: 0.25rem solid var(--std-color-10-accent);
}
.fachfarbe.stdColor11 {
    background-color: var(--std-color-11-bg);
    border-left: 0.25rem solid var(--std-color-11-accent);
}
.fachfarbe.stdColor12 {
    background-color: var(--std-color-12-bg);
    border-left: 0.25rem solid var(--std-color-12-accent);
}
.fachfarbe.stdColor13 {
    background-color: var(--std-color-13-bg);
    border-left: 0.25rem solid var(--std-color-13-accent);
}
.fachfarbe.stdColor14 {
    background-color: var(--std-color-14-bg);
    border-left: 0.25rem solid var(--std-color-14-accent);
}
.fachfarbe.stdColor15 {
    background-color: var(--std-color-15-bg);
    border-left: 0.25rem solid var(--std-color-15-accent);
}
.fachfarbe.stdColor16 {
    background-color: var(--std-color-16-bg);
    border-left: 0.25rem solid var(--std-color-16-accent);
}
.fachfarbe.stdColor17 {
    background-color: var(--std-color-17-bg);
    border-left: 0.25rem solid var(--std-color-17-accent);
}
.fachfarbe.stdColor18 {
    background-color: var(--std-color-18-bg);
    border-left: 0.25rem solid var(--std-color-18-accent);
}
.fachfarbe.stdColor19 {
    background-color: var(--std-color-19-bg);
    border-left: 0.25rem solid var(--std-color-19-accent);
}

/* Course selection list / grade subject list */
.classCourseList.fachfarbe {
    border-radius: 1rem;
    padding-left: 0.5rem;
}
#courseSelectTable,
#notenerfassung_Fach {
    border-spacing: 0 2px;
    border-collapse: separate;
}

/* Subject color dialog: search field */
.fachfarbenSearch {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--atlantis-darkgrey);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.fachfarbenSearch:focus {
    outline: none;
    border: 1px solid var(--atlantis-darkgrey);
}

/* Subject color dialog: grid layout */
.fachfarbenDialogContent {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
    align-content: start;
}
body.isMobile .fachfarbenDialogContent {
    grid-template-columns: 1fr;
}
.fachfarbenCell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: var(--atlantis-lightgrey);
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
}
.fachfarbenLabel {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Subject color dialog: swatches */
.fachfarbenSwatch {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
}
.fachfarbenSwatch:hover,
.fachfarbenSwatch.selected {
    border-color: var(--atlantis-darkgrey);
}

/* Color picker: hover effect */
.fachfarbenPicker .fachfarbe:hover {
    outline: 2px solid var(--atlantis-anthracite);
    outline-offset: 1px;
}

/* Class register: only the subject name element gets the subject color */
.subjectName.fachfarbe {
    border-radius: 0.5rem;
    padding: 0 0.25rem;
    display: inline-block;
    line-height: 1.3;
}

/* Lesson topics / homework / grades: only the label div gets colored */
.fachLabel.fachfarbe {
    border-radius: 0.375rem;
    padding: 0 0.25rem;
}

/* ===== END SUBJECT COLORS ===== */

.flexStart {
    display: flex;
    justify-content: flex-start;
}

.flexStartColumn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.flexBetween {
    display: flex;
    justify-content: space-between;
}

.flexBetweenColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flexAround {
    display: flex;
    justify-content: space-around;
}

.flexAroundColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.flexEvenly {
    display: flex;
    justify-content: space-evenly;
}

.flexEvenlyColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.flexEnd {
    display: flex;
    justify-content: flex-end;
}

.flexEndColumn {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.flexColumnReverse {
    display: flex;
    flex-direction: column-reverse;
}

.flexCenterColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flexColumnCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexCenterCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexCenterEvenly {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.flexWrapStart {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
}

.flexColumnAround {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.hidden, .pdf_only{
    display: none !important;
}

w100 {
    width: 100%;
}

.widthFillAvailable {
    width: -webkit-fill-available;
    width: -moz-available;
}

.pointer {
    cursor: pointer;
}
.noPointer {
    cursor: default !important;
}
.cursorNotAllowed {
    cursor: not-allowed !important;
}
.grabable {
    cursor: grab;
}
.grabable:active {
    cursor: grabbing;
}

/* progressTabs -Start */
#tabs.progressTabs .tabsHeaderContainer li::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 35px;
    margin-left: 8px;
    /* fill = grey (default) */
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'>\
    <path fill='grey' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/>\
    </svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* fill = --atlantis-blue-selected (#84b1d8ff) */
#tabs.progressTabs .tabsHeaderContainer li.ui-tabs-active::after {
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'>\
    <path fill='%2384b1d8ff' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/>\
    </svg>");
}
/* fill = --atlantis-lightgrey (#e5e4e7) */
#tabs.progressTabs .tabsHeaderContainer li.ui-state-disabled::after {
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'>\
    <path fill='%23e5e4e7' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/>\
    </svg>");
}
body.isMobile #tabs.progressTabs .tabsHeaderContainer li::after {
    margin-left: 0;
}
#tabs.progressTabs .tabsHeaderContainer li:last-child::after {
    content: none;
}
#tabs.progressTabs ul {
    margin-left: 50px;
    font-size: 1.2rem;
}
/* progressTabs - End */

/* Toggle Button - Start */
.toggleButton {
  display: inline-block;
  height: 26px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
.toggleButton i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: var(--atlantis-lightgrey);
  border-radius: 1rem;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
  pointer-events: none;
}
.toggleButton i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 1rem;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}
.toggleButton i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #dedede;
  border-radius: 1rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}
.toggleButton:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}
.toggleButton:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.toggleButton input:checked + i { background-color: var(--atlantis-blue); }
.toggleButton input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.toggleButton input:checked + i::after { transform: translate3d(22px, 2px, 0); }

/*.toggleButton input { display: none; }*/
/* make the real checkbox invisible but not :hidden to jQuery */
.toggleButton input[type="checkbox"] {
    position: absolute;
    opacity: 0;          /* not display:none */
    pointer-events: none; /* label handles clicks */
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
/* Toggle Button - End */

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.name_ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}

.match_parent{
    width: 100%;
}

.floatRight, .rechts {
    float: right;
}

.floatLeft, .links {
    float: left;
}

.notClickable {
    pointer-events: none;
}

.rotatable {
    -moz-transition: transform 0.4s;
    -webkit-transition: transform 0.4s;
    transition: transform 0.4s;
}
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotate270 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotate180 {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* tabs by swh - START */
.tabs ul.tab-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap:wrap;
    padding: 0px;
    font-family: Verdana,Arial,sans-serif;
}

.tabs .tab-list li {
    list-style: none;
    border-bottom: 3px solid white;
}

.tabs .tab-list li a {
    float: left;
    padding: .4rem 1rem;
    text-decoration: none;
    color: grey;
}

body:not(.isMobile) .tabs .tab-list li:hover {
    border-bottom: 3px solid grey;
}

.tabs .tab-list li.active {
    border-bottom: 3px solid var(--atlantis-blue);
}

.tabs .tab-content {
    margin-left: 1rem;
}
/* tabs by swh - END */

.tableScollContainer {
    overflow-y: auto;
    position: relative;
    min-height: 6rem;
}

.fixedHeader th,
.fixedHeader .tableDesign th,
.fixedHeader .tableDesign th:first-child,
.fixedHeader .tableDesign th:last-child {
    position: sticky;
    top: 0;
    background-color: white;
    border-radius: 0;
}

.center {
    text-align:center;
}

.greyedOut {
    filter: grayscale(100%) opacity(0.5);
    pointer-events: none;
}

#stundenplanDialogABCR .stdNavPrint { visibility: hidden; }

/* Dialog: flex-Layout für eine Scrollbar */
#stundenplanDialogABCR .dialogWindow {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#stundenplanDialogABCR .dialogScrollable {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}