:root {
    --bs-primary: #c7105c;
    --uniks-magenta-dark: #9b0b45;
    --uniks-magenta-medium: #c70f5c;
    --uniks-magenta-light: #f3dade;
    --uniks-green-light: #c6d312;
    --uniks-green-dark: #173824;
    --uniks-blue: #5496cb;
    --uniks-teal: #4ead94;
    --uniks-gray-dark: #565656;
    --uniks-gray-medium: #9c9e9d;
    --uniks-gray-light: #d9dcdb;
    --bs-nav-link-color : var(--uniks-magenta-dark) !important;
}



@media only screen and (max-width: 576px) {
    .btn-group {
        display: block;
    }

    .btn-group .btn {
        display: block;
        float: none;
        width: 100%;
        border-radius: 0px !important;
    }
}

@media (min-width: 768px) {
    .container{
        padding-top: 100px !important;
    }
}

.badge-hint {
    width: 100%;
    font-size: 80%;
    padding: 5px 10px;
    margin: 5px 0px;
    font-weight: 600;
}

.magenta{
    color: white !important;
    background-color: #c7105c !important;
    border-color: #c7105c !important;
}

.dark-green{
    color: white !important;
    background-color: var(--uniks-green-dark) !important;
    border-color: white !important;
}

.magenta-link{
    color: var(--uniks-magenta-dark) !important;
}

.magenta-headline{
    text-decoration: underline;
    text-decoration-color: var(--uniks-magenta-medium);
}

.text-xs{
    font-size: 70%;
}

#verarbeiten_log{
    max-height: 400px;
    overflow-y: scroll;
}

.read-more-box{
    border: 1px solid var(--uniks-gray-dark);
    border-radius: 10px;
    padding: 20px !important;
    overflow-y: hidden;
    box-shadow: inset;
}

.read-more-bottom{
    margin-top: -50px !important;
    width: 100%;
    height: 50px;
    background: linear-gradient(0deg, var(--uniks-gray-dark) 0%, var(--uniks-gray-dark) 60%, rgba(140, 140, 140, 0.699) 61%, transparent 100%);
    color: white;
    padding: 10px;
    padding-top: 23px;
    font-size: smaller;
    cursor: pointer;
    position: relative;
    border-radius: 0px 0px 10px 10px;
}

.read-more-bottom:hover{
    background: linear-gradient(0deg, var(--uniks-magenta-dark) 0%, var(--uniks-magenta-dark) 60%, rgba(140, 140, 140, 0.699) 61%, transparent 100%);
}