.searchBlock{
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
}
.ActionButton {
    background-color: #242c5a;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: white;
}
.ScanOk {
    margin-top: 15px;
    border-radius: 5px;
    background-color: #82ca9c;
}
#ScanDimensionInvalid {
    margin-top: 15px;
    border-radius: 5px;
    background-color:#CD5C5C;
}
#NotOnGroupageList {
    margin-top: 15px;
    border-radius: 5px;
    background-color: #CD5C5C;
}
.InfoScan {
    margin-top: 15px;
    border-radius: 5px;
    background-color: #ffc107;
}
#ConditionOk {
    background-color: #82ca9c;
}
#ConditionOk:active {
    background-color: forestgreen;
    border: 2px solid white;
}
#ConditionDmged {
    background-color: #CD5C5C;
}
.ScanGoodImage {
    width:30px;
    height:30px;
    margin-right:20px;
}
.ScanRowDiv{
    overflow:auto;
    font-size:80%;
    box-shadow: 5px 5px 10px 0px;
}
    .ScanRowDiv p {
        margin-bottom: 0;
        padding: 5px;
        max-width: 200px;
        overflow: auto;
    }

    @keyframes RedFlash {
        from{ background-color: white }
    to {
        background-color: #82ca9c
    }
}

.ModalWidth {
    width:85%;
}
.GroupageHeader div {
    font-size: small;
    background-color: #46455F;
    color:white;
}
#CameraIcon {
    border-radius: 50%;
    box-shadow: 2px 2px 10px black;
    color: white;
    background-color: grey;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
#CameraIcon:active{
    box-shadow:0px 0px 0px black;
}

.FormHeaderDim {
    letter-spacing: 1px;
    color: #0E7886;
}
.FormInputDim {
    border: none;
    border-bottom: 1px solid #0E7886;
    letter-spacing: 1px;
    color: #0E7886;
}
.SomeTnBPadding{
    padding-top:3px;
    padding-bottom:3px;
}
::-webkit-scrollbar {
    width: 5px;
    height:2px;
}
::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background:lightblue;
    border-radius:5px;
}

:focus {
    outline: 0;
}

.wrappper {
    /*height: 10vh;*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-switch {
    padding-left: 3.5rem;
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    outline: 0;
}

    .custom-control-input:focus {
        outline: 0;
        border: 1px solid black;
    }

        .custom-control-input:focus ~ .custom-control-label::before {
            border: 1px solid black;
        }

.custom-control-label::before {
    height: 20px;
    background-color: #E7E8E9;
    border: 0;
    transition: background-color .15s ease-in-out;
}

.custom-switch .custom-control-label::before {
    left: -3.2rem;
    top: 1px;
    width: 46px;
    border-radius: 30px;
    box-shadow: none;
}

.custom-switch .custom-control-label::after {
    width: 18px;
    height: 18px;
    top: 1.5px;
    left: calc(-3.2rem + 1.6px);
    background-color: #fff;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border: 0;
    background-color: green;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.5rem);
}

/* ----- */

.PictureThumbnail {
    box-shadow: 5px 5px 10px 2px grey;
    width:45%;
    margin:auto;
    border-radius:10px;
    display:inline-block;
    margin-bottom:20px;
}
    .PictureThumbnail img {
        border-radius: 10px 10px 0 0;
        width:100%;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }
    .PictureThumbnail button {
        background-color: white;
        justify-content: center;
        width: 100%;
        border-radius:0 0 10px 10px;
        border-color:red;
        color:red;
        margin-left:auto;
        margin-right:auto;
    }
    .PictureThumbnail button:active{
        background-color: indianred;
        color:white;
    }
        .PictureThumbnail button:focus {
            background-color: indianred;
            color: white;
        }
.element-center {
    display: block;
    margin: auto;
    position: relative;
}
.plombeninput{
    border-radius:10px;
    text-align:center;
}
.inProcessOverlay {
    position:fixed;
    background-color:rgba(128, 128, 128, 0.8);
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:10;
}
    .inProcessOverlay img {
        width: 50px;
    }
    .inProcessOverlay div {
        display:block;
        top:50%;
        color:white;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        position:relative;
    }
.quickPhotoOverlay {
    position: fixed;
    background-color: rgba(128, 128, 128, 0.8);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
    .quickPhotoOverlay div {
        display: block;
        top: 20%;
        left: 50%;
        width: 200px;
        color: white;
        margin-left: -100px;
        margin-right: -100px;
        text-align: center;
    }
.quickPhotoThumpnail {
    /*box-shadow: 5px 5px 10px 2px grey;*/
    background-color:transparent;
    width: 60%;
    top:50%;
    left:10px;
    margin: auto;
    position: fixed;
    border-radius: 10px;
    /*background-color: white;*/
    display: block;
    margin-bottom: 20px;
}
    .quickPhotoThumpnail img {
        border-radius: 10px 10px 0 0;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }
.quickPhotoThumpnailBtnOk {
    background-color: white;
    width: 48%;
    border-radius: 0 0 0 10px;
    border-color: green;
    color: green;
    margin-left: auto;
    margin-right: auto;
}
.quickPhotoThumpnailBtnOk:active{
    background-color:green;
    color:white;
}
.quickPhotoThumpnailBtnOk:disabled{
    background-color:dimgrey;
    color:lightgrey;
    border-color:lightgrey;
}
.quickPhotoThumpnailBtnCancel {
    background-color: white;
    width: 48%;
    border-radius: 0 0 10px 0;
    border-color: red;
    color: red;
    margin-left: auto;
    margin-right: auto;
}
.quickPhotoThumpnailBtnCancel:active{
    background-color:darkred;
    color:white;
}

.FilterSectionWrapper {
    padding:10px;
    border-radius:10px;
    border: 1px solid grey;
}
.input-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    position: relative;
    width: 45%;
    font-size:small;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.button_minus {
    float: left;
    margin-top: 30px;
    position: relative;
    width: 30px;
    height: 30px;
    background: #fff;
    cursor: pointer;
    border: 2px solid #095776;
    border-radius: 50%;
    /* Mittig */
    margin: auto;
}

    .button_minus:after {
        content: '';
        position: absolute;
        transform: translate(-50%, -50%);
        height: 4px;
        width: 50%;
        background: #095776;
        top: 50%;
        left: 50%;
    }

      
    .button_minus:hover:after {
        background: #fff;
        transition: 0.2s;
    }

    .button_minus:hover {
        background-color: #095776;
        transition: 0.2s;
    }

.button_plus {
    position: relative;
    width: 50px;
    height: 50px;
    background: #fff;
    cursor: pointer;
    border: 2px solid #095776;
    border-radius:50%;
    /* Mittig */
    margin:auto;
}

    .button_plus:after {
        content: '';
        position: absolute;
        transform: translate(-50%, -50%);
        height: 4px;
        width: 50%;
        background: #095776;
        top: 50%;
        left: 50%;
    }

    .button_plus:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #095776;
        height: 50%;
        width: 4px;
    }

    .button_plus:hover:before,
    .button_plus:hover:after {
        background: #fff;
        transition: 0.2s;
    }

    .button_plus:hover {
        background-color: #095776;
        transition: 0.2s;
    }

.imgCenter80percent {
    width: 80%;
    max-width:500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#showAgain {
    position: fixed;
    display: block;
    right: 25px;
    bottom: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(255,255, 255, 100);
    border: 2px solid #242c5a;
    box-shadow: 5px 5px 10px #242c5a;
}
    #showAgain img {
        width: 70%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

.NumberInput {
    position: relative;
}

.NumberInput-Decrease {
    position: inherit;
    left: 15%;
    top: 30%;
    width: 2em;
    height: 2em;
    border-color: lightcoral;
}
.NumberInput-Decrease:hover {
    background-color: lightcoral;
}
.NumberInput-Increase {
    position: inherit;
    left: 68%;
    bottom: 40%;
    width: 2em;
    height: 2em;
    border-color: lightgreen;
}
.NumberInput-Increase:hover{
    background-color:lightgreen;
}