/* Modifikationen*/


/* body { padding-top: 90px; }*/

html,
body {
    overscroll-behavior: none;
}

.loader {
    border: 8px solid #c5c5c5;
    border-top: 8px solid #83BC41;
    border-radius: 50%;
    width: 10vh;
    height: 10vh;
    animation: spin 0.5s linear infinite;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1100;
    margin: -5vh;
    display: none;
}

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

@font-face {
    font-family: 'Franz Sans Light';
    font-style: normal;
    font-weight: 300;
    src: local('Franz Sans'), local('Franz Sans'), url(/assets/fonts/FranzSans-Light.woff2) format('woff2'), url(/assets/fonts/FranzSans-Light.woff) format('woff');
}

@font-face {
    font-family: 'Franz Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Franz Sans'), local('Franz Sans'), url(/assets/fonts/FranzSans-Light.woff2) format('woff2'), url(/assets/fonts/FranzSans-Light.woff) format('woff');
}

@font-face {
    font-family: 'Franz Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Franz Sans'), local('Franz Sans'), url(/assets/fonts/FranzSans-Medium.woff2) format('woff2'), url(/assets/fonts/FranzSans-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Franz Sans Bold';
    font-weight: 700;
    src: local('Franz Sans Bold'), local('Franz Sans Bold'), url(/assets/fonts/FranzSans-Bold.woff2) format('woff2'), url(/assets/fonts/FranzSans-Bold.woff) format('woff');
}

@media (min-width:769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

.panel-group,
.progress,
.table {
    margin-bottom: 0px;
}

.statusbutton0 {
    background: #dbdbdb!important;
}

.statusbutton3,
.statusbutton3a,
.statusbutton3l,
.statusbutton3l210 {
    background: #cae5ff!important;
}

.statusbutton1 {
    background: #fff7aa!important;
}

.statusbutton2,
.statusbutton2a {
    background: #d2ffa8!important;
}

.dark {
    background: #666;
}

.ups_leiste {
    background: #ebebe6;
}

.ups_leiste .btn-primary {
    background: #361c14;
    color: #ffb600;
    border-color: #ffb600;
    font-weight: bold;
    border: 0px;
}

.ups_leiste a:hover {
    text-decoration: none;
}

.ups_leiste .btn-primary:hover {
    background: #1b0f0c;
}

.ups_leiste button {
    background: #361c14;
    color: #ffb600;
}

.ups_leiste input,
.ups_leiste select {
    border: 0px;
}

.jumbotron {
    background: #83bc41;
    color: #fff;
}

.jumbotron small {
    color: #fff;
}

.panel-primary>.panel-heading {
    background: #1084b9;
}

.panel-internal>.panel-heading,
.page-header .internal,
.btn-internal {
    background: #b300ff;
    color: #fff;
}

@media screen and (min-width:769px) and (max-width: 1010px) {
    .nav>li>a {
        padding-left: 8px!important;
        padding-right: 8px!important;
    }
}

.floatingHeader {
    position: fixed;
    top: 225px;
    visibility: hidden;
    z-index: 8;
    border: 1px solid #428bca;
    border-radius: 0px;
    -webkit-box-shadow: 0px 5px 10px #888888;
    -moz-box-shadow: 0px 5px 10px #888888;
    box-shadow: 0px 5px 10px #888888;
}

.absoluteHeader {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    border: 1px solid #428bca;
    border-bottom: 1px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

table .header-fixed {
    position: fixed;
    top: 125px;
    z-index: 1020;
    /* 10 less than .navbar-fixed to prevent any overlap */
    border-bottom: 1px solid #d5d5d5;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, .1);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    /* IE6-9 */
}

table #login.header-fixed {
    top: 50px;
}

a[name] {
    padding-top: 240px;
    margin-top: -240px;
    display: inline-block;
    /* required for webkit browsers */
}

a:hover {
    text-decoration: none;
}

#headerContainer {
    position: sticky;
    top: 100px;
    background: #fff;
    z-index: 3;
    padding: 20px 15px 10px 15px;
    border-bottom: 2px solid #eee;
    box-shadow: 1px 5px 10px #aaa;
}

#headerLeiste {
    position: sticky;
    top: 50px;
    background: #fff;
    z-index: 3;
    padding: 10px 15px 10px 15px;
    border-bottom: 2px solid #eee;
    box-shadow: 1px 5px 10px #aaa;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-bottom: 20px;
}

#headerLeiste h1 {
    font-size: 1.5em;
    margin: 0;
}

.navbar a {
    cursor: pointer;
}

#contentContainer {
    margin-top: 52px;
    margin-bottom: 160px;
}

h3 {
    margin-top: 0px;
}

.fixed,
.fixed60 {
    position: fixed;
    z-index: 3;
    width: 100%;
    padding: 5px 15px 0 15px;
}

.fixed {
    top: 100px;
}

.fixed60 {
    top: 55px;
}


/*.bootstrap-select > .dropdown-toggle {font-size: 1em; height: 2.5em; padding: 0.4em 15px 0.2em 5px;}
/* #suchergebnisse .form-control {font-size: 0.9em; padding: 0;} */


/* The switch - the box around the slider */

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
}


/* Hide default HTML checkbox */

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


/* The slider */

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .2s;
    transition: .2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .2s;
    transition: .2s;
}

input:checked+.slider {
    background-color: #93C024;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 14px;
}

.slider.round:before {
    border-radius: 50%;
}

.date_sidebar {
    transform: rotate(90deg) translateX(62px) translateY(53px);
    color: #aaa;
    font-size: 0.9em;
    width: 100px;
    height: 6px;
}

#avatarDropzone {
    padding: 0;
    height: 150px;
    width: 150px;
    margin-left: 50%;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid grey;
}

#photo {
    height: 100%;
    width: 100%;
    transform: translate(0px, -13px)
}

#avatarFile {
    display: none;
}


/*.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {margin-left: 0;}
.bootstrap-select.form-control-sm .dropdown-toggle {padding: 0.5rem 1.2rem 0.25rem 0.5rem;}
*/

select.form-control {
    padding: 6px 4px;
}

.userThumbnail {
    width: 24px;
    height: 24px;
    border-radius: 12px;
}

.userThumbnail:hover {
    transform: scale(2.5);
}

.userThumbnailBig {
    width: 80%;
    border-radius: 50%;
}

@media screen and (max-width: 600px) {
    .panel-title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .panel-title:hover {
        overflow: visible;
    }
    .nav>li>a {
        padding: 0 5px;
    }
}

.btn-info {
    background-color: rgb(122, 202, 239);
    border-color: rgb(122, 202, 239);
}

.bg-imdruck {
    background: #c8e4db;
}

.label-imdruck {
    background: #1bb383
}

.btn-imdruck {
    background: #1bb383;
    border-color: #1bb383;
    color: #fff;
}

#chatAmount .badge,
#mailAmount .badge {
    position: absolute;
    height: 18px;
    top: 35px;
    left: 25px;
    background: #ea516d;
    float: left;
    z-index: 1;
}


/* Mail Styling */

.alert-custom {
    padding: 3px;
    margin: 0 0 4px 0;
}

.alert-done {
    background: #f0ffe5!important;
}

.alert-trash {
    background: #ffdee2!important;
}

.attOpen {
    height: 300px;
    margin: 15px 0 0 0;
    padding: 6px 0px 6px 6px;
    overflow-y: auto;
    background-color: #f0ffe5;
}

.mailBodyReduced {
    height: calc(100vh - 500px);
}

.mailBodyMax {
    height: calc(100vh - 200px);
}

.mailContainer {}

.read {
    font-weight: 300;
}

.unread {
    font-weight: 700;
}

#selectionContainer {
    margin-top: 0px;
    overflow-y: auto;
}

#suchergebnisse h5 {
    margin: 0 5px;
}

#suchergebnisse h4 {
    margin: 10px 5px;
}

#suchergebnisse .alert {
    border-radius: 0;
    padding: 5px;
}

.mailContainer {
    margin: 0 0 0 0;
    border-radius: none;
    border-bottom: 1px solid #fff
}

#selectionPanel .btn {
    padding: 3px;
}

#rightSide .nav>li>a {
    padding: 4px 8px;
}

#rightContainer {
    border-left: 1px solid #ddd
}

#customerNameContainer {
    position: absolute;
    top: -26px;
    width: calc(100% - 15px);
    border-top-left-radius: 4px;
    right: 0px;
    padding: 4px 15px 2px 4px;
    background: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #bbb;
}

@media screen and (max-width: 768px) {
    #selectionContainer {
        height: 30vh;
    }
    #rightContainer {
        padding: 10px;
    }
}

@media screen and (min-width: 768px) {
    #selectionContainer,
    #rightContainer,
    #rightSide {
        height: calc(100vh - 90px);
    }
}

.groupContainer {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.typeOfGoodHeader {
    transform: rotate(270deg);
    position: relative;
    left: -67px;
    width: 114px;
    height: 20px;
    background: #999;
    border-right: 1px solid #eee;
    border-top-left-radius: 24px;
    padding: 1px 5px 0px 4px;
    white-space: nowrap;
    overflow: hidden;
    top: 31px;
    margin: 36px 0 -36px 0;
    text-align: right;
    font-size: 13px;
    color: #fff;
}

.smallCounter {
    font-size: 0.65em;
    background: rgb(122, 202, 239);
    color: #fff;
    position: absolute;
    padding: 2px;
    border-radius: 8px;
    font-weight: bold;
    min-width: 16px;
    top: 20px;
    right: 0px;
    z-index: 3;
}

.articlenr,
.articlenrSmall {
    background-color: #999;
    border-bottom-right-radius: 8px;
    padding: 3px 5px;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    top: 0px;
    font-size: 0.8em;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.rollPreview {
    margin-top: -8px;
    margin-bottom: -11px;
    background: #fff;
}

.articlenr {
    position: absolute;
    left: 15px;
}

.articlenrSmall {
    position: relative;
    float: left;
    max-width: 25%;
    left: 0px;
}

#headerLeiste .btn {
    padding: 6px 10px;
}

.navbar-fixed-bottom,
.navbar-fixed-top {
    z-index: 4
}

.label-thumbnail {
    padding: 55px 12px;
    font-size: 1em;
    width: 100%;
    display: block;
    height: 120px;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
        /* Weitere Stile für kleine Bildschirmgrößen */
    }
}

.bigInput {
    display: block;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
    background: #f0f0f0;
    width: 100%;
    font-size: 1.5em;
    margin: 0 0 20px 0;
    padding: 2px 4px;
}

#colorTable th,
#colorTable td {
    padding: 4px 0px;
}

#colorTable {
    margin-bottom: 20px;
}

.articlerow {
    border-top: 1px solid #eee;
}

.articlethumb {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.SVGbackButton {
    position: absolute;
    width: 25px;
    left: -25px;
    top: 0px;
    background: #fff;
    color: #1498d6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.SVGforwardButton {
    position: absolute;
    width: 25px;
    right: -25px;
    top: 0px;
    background: #fff;
    color: #1498d6;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.SVGbackButton:hover,
.SVGforwardButton:hover {
    background: #ddd;
    color: #138bba;
}

.blinking {
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

#groupSelectorDropdown {
    width: 80vw;
    position: absolute;
    top: -10px;
    left: -10vw;
    z-index: 14;
    padding: 10px;
    height: 50vh;
    overflow: scroll;
}

#groupSelector .input-group {
    width: 100%;
    margin-bottom: 10px;
}

#groupList .row {
    margin: 0 -10px;
}

#groupSelectorDropdown .btn {
    text-overflow: ellipsis;
}


/* Navbar-Toggle deaktivieren */

.navbar-toggle {
    display: none;
}

.navbar-collapse.collapse {
    display: block !important;
}

.navbar-nav>li {
    float: left;
}

.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-nav {
    margin: 0px;
    float: left;
}

.navbar-right {
    float: right!important;
    margin-right: -15px;
}

.navbar-nav>li>.dropdown-menu {
    right: 0px;
    left: auto;
}

.historyArticle {
    border: 1px solid #eee;
    margin: 0 0 4px 0;
    overflow-wrap: break-word;
    border-radius: 5px;
    background: #fafafa;
    font-size: 0.8em;
    padding: 4px;
}

.borderblock {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px 10px 0 10px;
    margin: 0px -10px 4px -10px;
    background: #eee;
}

.machine {
    margin: 2px 0;
    border: solid 1px #ddd;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 4px;
}

.machine-pouch {
    background: #f0ffe5;
}

.machine-label {
    background: #fff7aa;
}

.machine-roll {
    background: #d2ffa8;
}

.parcelLogo {
    max-height: 30px;
    max-width: 40px;
}

.groupButtons {
    margin: 4px;
    width: calc(33% - 8px);
    white-space: nowrap;
    overflow: hidden;
}

.punch {
    mix-blend-mode: multiply;
}

.previewImage {
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
}

.modal-body .previewImage {
    cursor: default;
}

.fehlertext .alert {
    margin-bottom: 5px;
}

.btn-light,
.label-light {
    background: #ddd;
    color: #fff;
}

.text-danger {
    color: #ea516d;
}

.text-light {
    color: #c5c5c5;
}

.bg-light {
    background: #eee;
    color: #c5c5c5;
}

.optText {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.dropdown-menu {
    min-width: 200px;
    padding: 0px;
}

#dADropdown.dropdown-menu {
    left: auto;
    right: -100px;
    max-height: 80vw;
    overflow: auto;
}

.dropdown-menu .divider {
    margin: 0;
    clear: both;
}

.dropdown-menu>li>a {
    cursor: pointer;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu>li {
    padding: 0px;
}

.listGroupHeader {
    font-size: 0.7em;
    text-transform: uppercase;
    margin: 10px 10px 5px 10px;
    letter-spacing: 0.2em;
    font-weight: bold;
    color: #c5c5c5;
}

.input-danger {
    border: 1px solid #ea516d;
    border-bottom: 4px solid #ea516d
}

#suchergebnisse .articlerow {
    transition: transform 0.3s ease;
}

#suchergebnisse .articlerow.dz-drag-hover {
    transform: scale(1.05);
    background: #cae5ff;
}

@keyframes blur-animation {
    0% {
        filter: blur(0px);
        /* Starte scharf */
    }
    50% {
        filter: blur(1px);
        /* Maximale Unschärfe */
    }
    100% {
        filter: blur(0px);
        /* Zurück zu scharf */
    }
}

.blur-effect {
    animation: blur-animation 1s infinite;
}

@keyframes pulse-animation {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0.7
    }
    100% {
        opacity: 1
    }
}

.pulse-effect {
    animation: pulse-animation 1s infinite;
}

#suchergebnisse .articlerow.blur-effect {
    background: #f0ffe5;
}

.helper {
    font-size: 0.8em;
    color: #ea516d;
}

.input-group .form-control:focus {
    z-index: auto;
}

.tooltip {
    z-index: 1;
}

.clearer {
    clear: both;
}

.dropdown-menu>.active>a {
    color: #fff
}

.dropdown-menu>.active>a:hover {
    color: #fff
}

.dropdown-menu>.active>a.materialSelector {
    color: #000;
}

.dropdown-menu>li.dropdown-header {
    font-size: 0.8em;
    color: #fff;
    background: #c5c5c5;
    padding: 5px 10px;
}

.dropdown-menu>li>a {
    max-width: 70vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: unset;
    display: block!important
}

.inner.open {
    max-width: 70vw;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    margin: 10px;
}

.input-group .form-control {
    z-index: auto;
}

.language {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #373b46;
}

#warenkorb-anzeige {
    background: #83bc41;
    color: #fff;
}

#blueJumbo {
    background: #7acaef;
    color: #fff;
}

.alert-default {
    background: #fff;
    color: #000;
    border: 1px solid #ddd;
}

.previewImage {
    cursor: zoom-in
}