:root {
    --bs-body-color: #000000;
}

.clickrow {
    color:           black;
    text-decoration: none;
}

.courseFormDetail {
    height: 83.5% !important;
}

.courseTypeDetail {
    height: 85% !important;
}

.locationRooms {
    height: 98.5% !important;
}

.courseDatePortalUsers > select {
    height: 132px !important;
}

.menu-button {
    left:     13px;
    position: absolute;
}

.ta-brand-logo-header {
    margin-left: 65px;
}

.assign-search {
    padding-top: 6px;
}

.show-toggle {
    margin-left:    1em;
    padding-bottom: 6px;
}

.assign-table {
    padding-left:  6px;
    padding-right: 6px;
}

/*.loading-animation {*/
/*  display: none;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  margin: 0 auto;*/
/*  border: 3px solid #ccc;*/
/*  border-top-color: #006699;*/
/*  border-radius: 50%;*/
/*  animation: spin 1s infinite linear;*/
/*}*/

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

.btn-pacman {
    background: conic-gradient(#f2d648 50deg, transparent 0 130deg, #f2d648 0);
}

.pacman {
    display:  block;
    height:   100px;
    position: relative;
    width:    100px;
}

.pacman__body {
    background:    conic-gradient(#f2d648 50deg, transparent 0 130deg, #f2d648 0);
    border-radius: 50%;
    height:        inherit;
    position:      absolute;
    width:         inherit;
    animation:     eat 0.7s linear infinite;
    z-index:       10;
}

@keyframes eat {
    0%, 100% {
        background: conic-gradient(#f2d648 50deg, transparent 0 130deg, #f2d648 0);
    }
    10%, 90% {
        background: conic-gradient(#f2d648 55deg, transparent 0 125deg, #f2d648 0);
    }
    20%, 80% {
        background: conic-gradient(#f2d648 60deg, transparent 0 120deg, #f2d648 0);
    }
    30%, 70% {
        background: conic-gradient(#f2d648 70deg, transparent 0 110deg, #f2d648 0);
    }
    40%, 60% {
        background: conic-gradient(#f2d648 80deg, transparent 0 100deg, #f2d648 0);
    }
    50% {
        background: conic-gradient(#f2d648 90deg, #f2d648 0); /* komplett geschlossen */
    }
}

.pacman__eye {
    background:    #333333;
    border-radius: 50%;
    height:        10px;
    position:      absolute;
    right:         40px;
    top:           20px;
    width:         10px;
    z-index:       15;
}

.pacman__food {
    animation-duration:        1.4s;
    animation-iteration-count: infinite;
    animation-name:            food;
    background:                #006699;
    border-radius:             50%;
    height:                    20px;
    left:                      200px;
    position:                  absolute;
    top:                       40%;
    width:                     20px;
    z-index:                   1;
}

.pacman__food--delayed {
    animation-duration:        1.4s;
    animation-iteration-count: infinite;
    animation-name:            food;
    animation-delay:           0.7s; /* Startet mit halber Verzögerung */
    background:                #006699;
    border-radius:             50%;
    height:                    20px;
    left:                      200px;
    position:                  absolute;
    top:                       40%;
    width:                     20px;
    z-index:                   1;
    opacity:                   0; /* Verbergen vor Beginn der Animation */
}

/* Keyframes für Food-Animation */
@keyframes food {
    0% {
        transform: translateX(0px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    5% {
        transform: translateX(-8px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    10% {
        transform: translateX(-16px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    15% {
        transform: translateX(-24px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    20% {
        transform: translateX(-32px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    25% {
        transform: translateX(-40px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    30% {
        transform: translateX(-48px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    35% {
        transform: translateX(-56px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    40% {
        transform: translateX(-64px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    45% {
        transform: translateX(-72px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    50% {
        transform: translateX(-80px);
        opacity:   1;
        height:    20px;
        width:     20px;
    }
    55% {
        transform: translateX(-88px);
        opacity:   0.9;
        height:    18px;
        width:     18px;
    }
    60% {
        transform: translateX(-96px);
        opacity:   0.8;
        height:    16px;
        width:     16px;
    }
    65% {
        transform: translateX(-104px);
        opacity:   0.7;
        height:    14px;
        width:     14px;
    }
    70% {
        transform: translateX(-112px);
        opacity:   0.6;
        height:    12px;
        width:     12px;
    }
    75% {
        transform: translateX(-120px);
        opacity:   0.5;
        height:    10px;
        width:     10px;
    }
    80% {
        transform: translateX(-128px);
        opacity:   0.4;
        height:    8px;
        width:     8px;
    }
    85% {
        transform: translateX(-136px);
        opacity:   0.3;
        height:    6px;
        width:     6px;
    }
    90% {
        transform: translateX(-144px);
        opacity:   0.2;
        height:    4px;
        width:     4px;

    }
    95% {
        transform: translateX(-152px);
        opacity:   0.1;
        height:    2px;
        width:     2px;

    }
    100% {
        transform: translateX(-160px);
        opacity:   0;
        height:    0;
        width:     0;
    }
}

.bg-gradient-dark {
    background: #e0e7fe;
}

.bg-gradient-overlapping {
    background: linear-gradient(135deg, #e0f2fe 10%, #efe7fe 30%, #e2d2fd 50%, #e0e7fe 90%);
}

.bg-gradient-light {
    background: #e0f2fe
}

.bg-gradient-success {
    background: linear-gradient(90deg, #c5f4e6 0%, #6de6ba 30%, #32d399 100%);
}

.bg-gradient-danger {
    background: linear-gradient(90deg, #faafaf 0%, #f88585 20%, #ff4646 80%);
}

.bg-success {
    background-color: #32d399 !important;
}

.bg-danger {
    background-color: #ff4646 !important;
}

.bg-warning {
    background-color: #fbe373 !important;
}

.bg-oc {
    background-color: #006699 !important;
}

.bg-light-oc {
    background-color: #afdbf8 !important;
}

.bg-gradient-oc {
    background: linear-gradient(45deg, #e0f2fe 0%, #006699 100%);
}

.bg-teams {
    background-color: #4E5FBF !important;
}

.bg-day {
    background-color: #fcebc1 !important;
}

.bg-gradient-teams {
    background: linear-gradient(45deg, #e0f2fe 0%, #8091F2 75%, #4E5FBF 100%);
}

.btn-finish {
    background-color: #a73c46;
    border-color:     #a73c46;
    color:            #ffffff;
}

.btn-finish:hover {
    background-color: #a73c46;
    border-color:     #a73c46;
    color:            #ffffff;
}

.alt-green {
    color: #12b95a;
}

.test-color {
    color: #788baa;
}

.navbar-vertical .navbar-nav > .nav-item .nav-link:not(.active) .icon i {
    color: #141727;
}

.pulse {
    animation: pulse-animation 3s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 #ffcf56;
    }
    50% {
        box-shadow: 0 0 0 7px #ffb700;
    }
    100% {
        box-shadow: 0 0 0 0 #ffcf56;
    }
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns= \"http://www.w3.org/2000/svg\" viewBox= \"0 0 20 20\" %3e%3cpath fill= \"none\" stroke= \"%23fff\" stroke-linecap= \"round\" stroke-linejoin= \"round\" stroke-width= \"3\" d= \"M6 10l3 3l6-6\" /%3e%3c/svg%3e"),
                      linear-gradient(310deg, #141727 0%, #3a416f 100%);
}

.fa-2xs {
    line-height: 1em;
}

.fade-out {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.fade-out.fade-out-active {
    opacity: 0;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: auto;
}

#video-distribution {
    width: 320px;
}