@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/*Eine Klasse*/
/font-face {
    font-family: 'Roche Sans';
    src: url('../src/roche-font/RocheSans-Light.woff2') format('woff2'), url('../src/roche-font/RocheSans-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roche Sans';
    src: url('../src/roche-font/RocheSans-Medium.woff2') format('woff2'), url('../src/roche-font/RocheSans-Medium.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roche Sans';
    src: url('../src/roche-font/RocheSans-Italic.woff2') format('woff2'), url('../src/roche-font/RocheSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}*/
@font-face {
    font-family: 'rochesans-italic';
    src: url('../src/roche-font/rochesans-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'rochesans-light';
    src: url('../src/roche-font/rochesans-light.woff2') format('woff2');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'rochesans-lightitalic';
    src: url('../src/roche-font/rochesans-lightitalic.woff2') format('woff2');
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: 'rochesans-medium';
    src: url('../src/roche-font/rochesans-medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.mud-input > input.mud-input-root,
.mud-input > div.mud-input-slot.mud-input-root {
    font-family: 'rochesans-light';
    font-weight: normal;
    font-style: normal;
}

.mud-input > textarea.mud-input-root {
    font-family: 'rochesans-light';
    font-weight: normal;
    font-style: normal;
}

.container {
    max-width: 100%;
}

body:not(:has(.container.dark)) {
    color: #0b41cd;
}

body:has(.container.dark) {
    background-color: #1e1e1e !important;
    color: #3fadfc !important;
}

#app {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.mud-navmenu.mud-navmenu-default .mud-nav-link {
    text-decoration: none;
}

    .mud-navmenu.mud-navmenu-default .mud-nav-link:hover {
        text-decoration: none;
        color: var(--mud-palette-drawer-icon);
    }

    .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-drawer-icon);
        font-weight: 600 !important;
    }

.mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: var(--mud-palette-drawer-icon);
}

h1:focus {
    outline: 0
}

.spinner {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-border {
    width: 10rem;
    height: 10rem;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac
}

.content {
    padding-top: 1.1rem
}

.valid.modified:not([type=checkbox]) {
    outline: #26b050 solid 1px
}

.invalid {
    outline: red solid 1px
}

#blazor-error-ui {
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) 1rem/1.8rem no-repeat,#b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

body {
    background-color: var(--mud-palette-surface);
    height: auto !important;
    font-family: var(--mud-typography-default-family);
}


#modal-image-resize .modal {
    padding: 0 !important;
}


.EditCard {
    height: 45vh;
    max-width: 100%;
    min-width: 360px;
}

.CheckboxMargin {
    margin-left: 1em;
    float: right
}

.background-transparent {
    background-color: transparent
}

.background-disabled {
    background-color: #f5f5f5
}

.ButtonMargin {
    margin-top: 2em
}

.InputMargin {
    margin-bottom: 10px
}

.BerufeCard {
    padding-top: 0;
    background-color: transparent
}

.TitleCard {
    width: 100%;
    padding: .2em
}

.BerufeDivOne {
    display: flex;
    flex-direction: row
}

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

.BerufeCardTwo {
    width: 21em;
    padding: .2em
}

.CheckboxDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

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

.CardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -3px
}

.AufgabeDetailedFooter {
    justify-content: space-between;
}

.InaktiveListButton {
    margin-right: 1em
}

.Loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-between;
    height: 52vh;
}


.LoadingSpinner {
    margin: auto;
}

/*mudblazor*/
.mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 600;
}

.padding-for-footer {
    padding-bottom: 130px !important;
}
/*Eine Klasse*/
/*Shared*/
html {
    overflow-x: hidden
}

::-webkit-scrollbar {
    width: 0 !important
}

#ErrorContent {
    margin-top: 270px;
    padding-bottom: 373px
}

.NavPrimary {
    justify-content: right
}

#ErrorDialog {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

#ErrorTitle {
    font-weight: 700
}
/*Shared*/


.EditArticle {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-left: 0
}

.EditCardPlan {
    width: 30vw;
    margin: 0;
    overflow-y: scroll
}

    .EditCardPlan::-webkit-scrollbar {
        display: block !important;
        width: 10px !important
    }

.EditCardPlanAufgabe {
    width: 60vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    overflow-y: scroll
}

    .EditCardPlanAufgabe::-webkit-scrollbar {
        display: block !important;
        width: 10px !important
    }

.CreateMultipleChoice {
    width: 100%;
    flex-direction: column;
    justify-content: center
}

.EditLoadingSpinner {
    margin: 6em auto auto
}

.EditForm {
    margin: 10px;
    width: 100%
}

/*Footer*/
.RocheIcon {
    width: 48px;
    margin-Left: 8px;
    float: right
}

.FooterTop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--one-color-active-primary-background);
    border-radius: 50%;
    display: flex;
    background-color: var(--one-color-default-background);
    color: var(--one-color-active-primary-background);
    margin-right: 25px
}

.FooterBottom {
    color: var(--one-color-default-background);
    padding: 30px
}

/*Footer*/

.createCard {
    margin: 0;
    width: 30vw
}

@media only screen and (min-width:3800px) {
    .apprenticePlanTasks {
        width: 80%
    }
}

.cardwithscroll {
    height: 45vh;
    overflow-y: scroll
}

    .cardwithscroll::-webkit-scrollbar {
        display: block !important;
        width: 10px !important
    }

.apprenticeTaskViewCardScroll {
    overflow-y: auto
}

    .apprenticeTaskViewCardScroll::-webkit-scrollbar {
        width: 10px !important
    }

.spanWithScroll {
    overflow-y: scroll
}

    .spanWithScroll::-webkit-scrollbar {
        display: block !important;
        width: 10px !important
    }


.task-div {
    padding: 1.5em 1em;
    width: 8em;
    height: 8em;
    border-radius: 1em;
    position: relative;
    transition: .3s
}

.task-div-chosen {
    padding-top: 5px;
    margin: 10px;
}

.task-div-add-modal {
    background-color: #7FB2E5;
    padding: 1.5em 1em;
    width: 8em;
    height: 8em;
    border-radius: 1em;
    transition: .3s
}

    .task-div-add-modal:hover {
        background-color: var(--mud-palette-primary) !important
    }

.tasks-row {
    overflow: clip;
}

.add-tasks-row {
    margin-left: 8px !important;
}

.button-squence-div {
    min-height: 8em !important;
    border-color: var(--mud-palette-black) !important
}

.add-button {
    padding: 0 !important;
    margin: 0 1em 0 0 !important;
    width: 2em !important;
    height: 2em !important;
    position: relative !important;
    border-radius: .5em !important
}

.sequence-number {
    margin-top: .3em !important;
    padding-right: .1em !important
}

.sequence-number-text {
    font-size: 4em !important;
}

.row-divider {
    margin: 0 0 1.4em !important;
}

.aufgaben-button-specific {
    margin-bottom: .5em !important
}

.delete-sequence-Div {
    margin-right: 1em !important;
    background-color: #fff !important;
    border: 1px solid !important;
    border-color: var(--one-color-default-line) !important
}

.delete-sequence-modal div {
    padding: 2em !important
}

.aufgabe-card {
    width: 30vw !important
}

.div-margin {
    margin-left: 10px !important;
    margin-right: 10px !important
}

.icon-button {
    display: flexv;
    justify-content: center !important;
    margin: 10px !important
}

.plan-loading-spinner {
    width: 100px !important;
    height: 100px !important;
    text-align: center !important;
}

.task-header {
    height: 20px !important;
}

.task-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

.chosen-task-name {
    width: 84px !important;
    -webkit-line-clamp: 3 !important;
}

.task-footer {
    height: 30px !important;
    width: 100% !important;
    position: absolute !important;
    bottom: 0px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 25px !important;
    padding-right: 3px !important;
    align-items: center !important
}

.move-task-down {
    align-self: self-end !important;
}

.add-tasks-modal {
    max-width: none !important;
    width: 768px !important;
}

.add-tasks-modal-header-icon {
    margin-right: 5px !important;
    margin-left: 10px !important;
}

.add-plan-dialog-small {
    padding-left: 24px !important
}

.add-plan-dialog-actions-button-group {
    padding-right: 24px !important
}


.row-container {
    height: 150px;
}

.add-tasks-modal-header {
    padding-left: 4px !important;
}

/*Aufgabe*/


/*Correction*/
.CorrectionCardHeader {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: start;
    margin-top: -3px
}

.CorrectionCardFooter {
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px
}

.CorrectionDivOne {
    width: 100%
}

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

.CorrectionQuestionPos {
    margin-right: .5em
}

.DislikeRed {
    color: red;
    transform: rotate(180deg)
}

.CorrectionMargin {
    margin-top: .4em
}

.CorrectionSendButton {
    display: flex;
    justify-content: flex-end;
    margin: 0 .5em .5em
}

.CorrectionChips {
    height: 25px !important
}

.h-100px {
    height: 100px;
}

.image-resize-modal {
    max-width: 1600px;
    max-height: 800px;
    height: auto;
    overflow-y: auto;
}

.image-resize-modal-backgroundcolor {
    background-color: #00000085;
}

.image-resize {
    max-width: 1600px;
    max-height: 800px;
    min-width: 800px;
    min-height: 300px;
    padding: 20px
}
/*Correction*/


.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
    max-width: 500px;
}

    .myImg:hover {
        opacity: .7
    }

.imageModal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 3em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,.9)
}

#caption {
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px
}

.close {
    position: absolute;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: 700;
    transition: .3s
}

.taskNummer {
    justify-content: center;
    align-items: center;
}

#tooltip-synchronisieren {
    margin-right: 1.5em
}

#CardFooterLern {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top: 16px;
    display: flex;
    flex-direction: column
}

@keyframes spinning {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.spinhov:hover {
    animation-name: spinning;
    animation-duration: 1s;
    animation-iteration-count: 1;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: ease-in-out;
}

#dropDownsLern {
    flex-direction: row
}

.dropDownPlan {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 20vw
}

.dropDownBeruf {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 19.5vw
}

.dropDownLehrjahr {
    margin-bottom: 10px;
    width: 9.5vw
}

.statusModalIcon {
    margin-right: 5px;
    color: inherit
}

.statusModalDropDown {
    margin-bottom: 10px;
    margin-right: 10px
}

.spinnerDIV {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}


/*User Profile Popover*/
.PopEmail, .PopName, .PopProfilePic {
    font-family: var(--one-text-font-family-default)
}

.NavProfilePic {
    width: 37px;
    background-color: var(--one-color-active-primary-background);
    color: var(--one-color-active-primary-foreground);
    font-size: 24px;
    border-radius: 50%
}

.PopEmail {
    color: var(--one-color-gray-600);
    font-weight: var(--one-text-font-weight-regular);
    margin: 1em
}

.PopName {
    font-size: var(--one-text-font-size-24);
    margin-top: 5px;
    margin-bottom: 0
}

.PopProfilePic {
    background-color: #8a2be2;
    color: var(--one-color-white);
    font-size: 24px;
    border-radius: 50%
}

.PopoverUser {
    width: 295px
}

.PopIcon {
    margin: 0 8px
}

.PopoverDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px
}
/*User Profile Popover*/

/*Mehrere Klassen*/
#ErrorHomeButton {
    width: fit-content
}

.CreateMultipleChoice, .EditFormDiv, .EditLoading {
    height: auto;
    background: var(--one-color-background);
    padding-top: 10px;
    display: flex
}

.EditFormDiv, .EditLoading {
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: auto
}

.FooterBottom, .task-div {
    background-color: var(--mud-palette-primary);
}

.CorrectionQuestionDivLabel, .fullRow {
    display: flex
}

.aufgabenButton, .aufgaben-button-specific {
    padding: 0;
    border: none;
    max-height: 8em;
    visibility: hidden
}

.deleteAnimation span, .disabledDeleteAnimation span {
    width: 1.125em;
    height: 1.25em;
    display: inline-block;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position: absolute
}

.deleteAnimation, .disabledDeleteAnimation {
    opacity: 0%;
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    overflow: hidden;
    text-decoration: none
}

.task-div:hover .deleteAnimation, .task-div:hover .disabledDeleteAnimation {
    opacity: 100%;
    visibility: visible
}

.EditAufgabeDiv, CorrectionProgressSpinner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.Like, .LikeNoHover {
    color: #000
}

    .Like:hover, .LikeGreen {
        color: green
    }

.Dislike, .DislikeNoHover {
    color: #000;
    transform: rotate(180deg)
}

#caption, .imageModal-content {
    margin: auto;
    display: block;
}

#caption, .imageModal-content {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: .6s;
    animation-name: zoom;
    animation-duration: .6s
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close:focus, .close:hover {
    color: #bbb;
    text-decoration: none;
    cursor: pointer
}

@media only screen and (max-width:700px) {
    .imageModal-content {
        width: 100%
    }
}

.deleteAnimation span, .deleteAnimation span::before {
    background: #fff;
    transition: .3s
}

.mud-tab {
    font-weight: 600;
}

.mud-breadcrumb-item > a {
    text-decoration: none;
    color: var(--mud-palette-primary)
}

.textOverflow {
    width: 333px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    overflow: hidden;
}

.viewApprenticePlanContainer {
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -50px;
}

    .viewApprenticePlanContainer > * {
        flex: 1 1 350px;
    }


@media only screen and (max-width:2900px) {
    .viewApprenticePlanContainer {
        height: 700px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-top: -50px;
    }

        .viewApprenticePlanContainer > * {
            flex: 1 1 150px;
        }
}

@media only screen and (max-width:1710px) {
    .viewApprenticePlanContainer > * {
        flex: 1 1 120px;
    }

    .viewApprenticePlanContainer {
        height: 600px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-top: -50px;
    }
}

@media only screen and (max-width:1300px) {
    .viewApprenticePlanContainer > * {
        flex: 1 1 50px;
        width: 100%;
    }

    .viewApprenticePlanContainer {
        height: 1200px;
        display: flex;
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
        margin-top: -50px;
    }
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.BreadcrumbLink, .SnackbarResponse {
    min-width: 360px;
    margin: auto;
}

.Dislike:hover, .redButton, .validation-message {
    color: #dc3545;
}

.BerufeCardFlex, .DivColumn, .button-squence-div div {
    display: flex;
    flex-direction: column
}

.BerufeCardFlex {
    width: 100%;
}

.BerufeCardTwo, .TitleCard {
    margin: 0 !important;
    box-shadow: inset 0 0 0 0;
    background-color: transparent
}

.BerufeCard, .EditCardPlan {
    margin-bottom: 0 !important
}

.ModalDivButton, .statusModalButtonsPos {
    display: flex;
    justify-content: flex-end;
}

.ms-md-4, .statusModalButtons {
    margin-left: 24px
}

#deleteModalButton, .ModalConfirmationIcon {
    margin-right: 5px;
    color: red
}

#ErrorTitle, .RocheIcon {
    color: var(--one-color-active-primary-background)
}
/*Mehrere Klassen*/

/*LernenderView Aufgaben*/
#open.taskNummer, .taskNummer {
    width: 2em;
    height: 2em;
    margin-right: .25em;
    color: #fff;
    display: flex
}

#open.taskNummer {
    justify-content: center;
    align-items: center;
    justify-content: center;
    align-items: center;
    background-color: #0d6efd
}

#checked.taskNummer {
    background-color: #ffc107;
}

#rejected.taskNummer {
    background-color: #dc3545;
}

#done.taskNummer {
    background-color: #00875a;
}

#locked.taskNummer {
    background-color: #b3d1fc;
}
/*LernenderView Aufgaben*/

/*ViewApprentice*/
.mud-chip-IsIntern {
    height: 20px !important;
    margin: 0;
    width: 65px;
}

.mud-chip-plan-id {
    border: none;
    background-color: transparent;
    padding: 0px;
    margin-right: 4px; /* Kleineren Abstand zwischen den Chips */
    margin-bottom: 4px; /* Optional, falls vertikaler Abstand benötigt wird */
}

.plan-dropdown {
    width: 263px
}

.dropDownLabel, .statusModalLabel {
    margin-bottom: 5px
}

#deleteModalButtonPos, .statusModal, .CardHeaderButtons, .NavDiv {
    display: flex;
    align-items: center
}

.textarea {
    resize: both;
}

/*Table*/
.checkboxColumn {
    width: 115px;
}

.planIdColumn {
    width: 30%;
}

.collapseButton {
    margin-left: -80px;
}

/*End ViewApprentice*/

/*Apprentice Plan View*/
.Gap-MudChip-MudPanel {
    gap: 10px;
}

.ApprenticePlanView-Tasks .mud-collapse-wrapper-inner {
    overflow-y: auto;
    max-height: 250px;
}

.lockedTask {
    background-color: #bde3ff;
    color: var(--mud-palette-primary-text);
}


.taskTopPaper {
    padding: 10px;
}

.spacing-p-10 {
    padding: 10px;
}

.clickableTask {
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;
}

.unclickableTask {
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.gap-10 {
    gap: 10px;
}

.spacing-m-bottom-10 {
    margin-bottom: 10px;
}

.align-center {
    text-align: center;
}

.margin-t-2em {
    margin-top: 2em;
}

.selectedTask {
    background-color: var(--mud-palette-chip-default);
}

.wrap-text {
    white-space: pre-wrap;
}
/*Apprentice Plan View End*/
/*Apprentice Task View*/
.height-100 {
    height: 100px;
    width: auto;
}

.height-800 {
    height: 800px;
    width: auto;
}

.max-w-h-100Perc {
    max-width: 100%;
    max-height: 100%;
}
/*Apprentice Task View End*/

/*FinsishedTasks view Start*/

.FinshedTasksPaddingTitle {
    padding-top: 10px;
    padding-bottom: 16px;
}

.FinshedTasksPaddingTitleIcon {
    padding-top: 10px;
    padding-bottom: 16.02px;
}

.FinshedTasksPadding {
    padding-top: 10px;
    padding-bottom: 10px;
}

.FinshedTasksPaddingIcons {
    height: 40.02px;
}

.FinshedTasksPaddingTitleEmptyField {
    padding-top: 30.02px;
    padding-bottom: 16px;
}

.FinshedTasksPaddingEmptyField {
    padding-top: 20px;
    padding-bottom: 20.02px;
}

.FinishedTasksFieldMinWidth {
    min-width: 192px !important;
}

.FinishedTasksMudCard {
    min-width: 300px;
    height: 300px;
}

.FinishedTasksStatusPanel {
    width: 200px;
}

.FinishedTasksFuturStatusPanel {
    min-width: 500px;
}

.FinishedTaskButtonField {
    width: 400px;
}

.FinishedTasksTriesText {
    font-size: 80%;
}

.CheckedIconSizeing {
    width: 30px !important;
    margin-right: -6px;
}

.FinishedTasksPaddingIconField {
    margin-top: -2px;
    height: 24px;
    margin-bottom: -2px;
}

.MudTableAutoFormattingKiller {
    width: 10000px !important;
}

.FinishedTasks21dot2width {
    height: 21.2px;
}

.FinishedTasks25width {
    height: 25px;
}

.ViewFinishedTasksW100 {
    width: 100px;
}

.sq-38 {
    width: 38px;
    height: 38px;
}

.FinishedTaskRowSelected {
    background-color: var(--mud-palette-primary-lighten) !important
}

.FinishedTasksRowIsIncomplete {
    background-color: var(--mud-palette-warning-lighten) !important
}

.FinishedTasksRowIsComplete {
    background-color: var(--mud-palette-success-lighten) !important
}

.mudButtonUnFancier3000 {
    border-radius: 0px !important;
    box-shadow: none !important;
    font-family: var(--mud-typography-default-family) !important;
    justify-content: start !important;
    border-width: 1px !important;
    border-color: var(--mud-palette-table-lines) !important;
}

/*FinishedTasks view End*/
/*CorrectTask Start*/
.padding-12px {
    padding: 12px !important;
}

/*CorrectTask End*/

.task-div-add-modal:hover {
    background-color: var(--mud-palette-primary) !important
}

/*EditPlan Start*/

.EditPlanCard {
    height: 80px !important;
}

.EditPlanTaskNameText {
    height: 75px !important;
}

.EditPlanInfoButton {
    margin-right: -14px;
    margin-bottom: -22px;
}

/*EditPlan End*/

/*ViewLogs Start*/

.sticky-header {
    position: sticky;
    background-color: white; /* Ensure the background is opaque */
    z-index: 10; /* Ensure it stays on top of other content */
}

.top-header {
    top: 0; /* First header row sticks at the very top */
}

.bottom-header {
    top: 35px; /* Adjust this value to match the height of your top header row */
}

.errorMessageMaxWidth {
    max-width: 600px !important;
}

.dialogMaxWidth{
    max-width:80vw;
}

.checkBoxPadding {
    margin-top: -6px !important;
    margin-bottom: -6px !important;
}

/*ViewLogs End*/

/*EditApprentice Start*/

/*Diese Klasse fügt der Drag/Drop Hitbox in EditApprentice den Style hinzu, der sie die gleiche form macht wie die Chips*/
/*Mit der Hitbox ist die gemeint, die mit blau gestrichelten border auftaucht wenn man die Tasks neu anordnet.*/
.mud-dropitem-placeholder {
    width: 135px;
    height: 135px;
    margin: 4px;
    border-radius: 16px;
}

/*EditApprentice End*/