.e-large.e-checkbox-wrapper .e-frame {
    height: 20px;
    width: 20px;
    padding: 0px 0;
}

.e-large.e-checkbox-wrapper .e-check {
    font-size: 14px;
    line-height: 18px;
}

.e-large.e-checkbox-wrapper .e-label {
    line-height: 20px;
}

.header-production-1 {
    background-color: #9b5de5;
}

.header-production-2 {
    background-color: #f15bb5;
}

.header-production-3 {
    background-color: #62b6cb;
}

.header-production-4 {
    background-color: #ff8c61;
}


.bg-col-pick {
    background-color: #f5f5f5;
}

.bg-col-qc {
    background-color: #f5f5f5;
}

.e-control {
    font-family: "Roboto";
}

.e-tab .e-toolbar-items .e-toolbar-item .e-tab-text {
    font-family: "Roboto";
}

.e-card {
    font-family: "Roboto";
}

#blazor-error-ui {
    background: yellow;
    font-weight: bold;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 91000;
}

.e-spinner-inner {
    min-width: 200px;
    padding: 20px 20px;
    background-color: rgb(241 241 241);
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
}

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

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* side bar */

.topnav .navbar-brand {
    width: 12rem;
}

.nav-fixed #layoutSidenav #layoutSidenav_nav {
    width: 12rem;
}

.sidenav .sidenav-menu .nav .sidenav-menu-heading {
    padding: 1rem 1rem 0.4rem;
}

.sidenav .sidenav-menu .nav .nav-link {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 90%;
}

    .sidenav .sidenav-menu .nav .nav-link .nav-link-icon {
        padding-right: 0.2rem;
    }

/* content */

.nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: 12rem;
}

input[type='checkbox'].big-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 5px;
    border: 2px solid #555;
}

.container-grid {
    min-height: 600px;
}

/* fix button width only icon */
.btn-icon-only {
    padding: 0.4rem;
}

.btn-xs {
    font-size: 80%;
    padding-top: 4px !important;
    padding-bottom: 3px !important;
}

.dialog-fixed.e-dialog {
    max-width: calc(80vw) !important;
    max-height: calc(80vh) !important;
}

img.design-in-grid {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: cover;
    border: 1px solid #d4d4d4;
    cursor: zoom-in;
}

#showImagePreviewDialog .modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    background-image: linear-gradient(45deg, #f7f7f7 25%, #ffffff 25%, #ffffff 50%, #f7f7f7 50%, #f7f7f7 75%, #ffffff 75%, #ffffff 100%);
    background-size: 42.43px 42.43px;
}

img.design-in-popup {
    max-width: 100%;
    max-height: 50vh;
    display: block;
    border: 1px dashed #555;
}

.img-preview {
    background-color: gray;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    min-height: 100px;
}

.design-1, .design-2 {
}

.design-Black {
    background-color: black;
}

.design-White {
    background-color: white;
}

.page-header-title {
    font-size: 130% !important;
}

.page-header-subtitle {
    font-size: 90% !important;
}

.page-header .page-header-content {
    padding-top: 1.2rem;
    padding-bottom: 1rem;
}

.badge-counter {
    margin-left: -0.6rem;
    position: fixed;
}

/* icon on header */
#navbarDropdownAlerts, #navbarDropdownMessages, #navbarDropdownUserImage {
    font-size: 1.2rem;
}

.dropdown-notifications .dropdown-menu-processes {
    min-width: 24rem;
    overflow-y: visible;
    overflow-x: visible;
    max-height: calc(70vh);
}

/* Toast_icons */

@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#toast_type .e-toast-icon.e-icons {
    height: auto;
    font-size: 30px;
}

.toast-icons.e-success::before {
    content: "\e701";
}

.toast-icons.e-error::before {
    content: "\e700";
}

.toast-icons.e-info::before {
    content: "\e704";
}

.toast-icons.e-warning::before {
    content: "\e703";
}

.noshow {
    position: absolute;
    left: -999;
    background: transparent;
    border: none !important;
    font-size: 0;
}

.border-transparent {
    border-color: transparent !important;
}

/* Show Designs */

.designs-container {
    display: grid;
    grid-auto-columns: minmax(14rem, auto);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    grid-gap: 1rem;
}

    .designs-container .designs-item {
    }

        .designs-container .designs-item .figure {
            display: block;
            margin: 0;
            border: 1px solid #e4e4e4;
            background-image: linear-gradient(45deg, #ffffff 25%, #f5f5f5 25%, #f5f5f5 50%, #ffffff 50%, #ffffff 75%, #f5f5f5 75%, #f5f5f5 100%);
            background-size: 14.14px 14.14px;
            max-height: 12rem;
        }

            .designs-container .designs-item .figure:hover {
                background-image: linear-gradient(45deg, #8a8a8a 25%, #808080 25%, #808080 50%, #8a8a8a 50%, #8a8a8a 75%, #808080 75%, #808080 100%);
                background-size: 14.14px 14.14px;
            }

        .designs-container .designs-item .figure-caption {
            background-color: #dddddd;
            text-align: center;
        }

        .designs-container .designs-item.active .figure-caption {
            background-color: #f58585;
            color: white;
        }

        .designs-container .designs-item .designs-img {
            max-height: 10rem;
            min-height: 10rem;
            padding-top: 0.2rem;
            margin: auto;
            display: block;
        }

/* Popup confirm  onhold */

.oh-designs-container {
    display: grid;
    grid-auto-columns: minmax(6rem, auto);
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    grid-gap: 0.5rem;
}

    .oh-designs-container .designs-item {
    }

        .oh-designs-container .designs-item .figure {
            display: block;
            margin: 0;
            border: 1px solid #e4e4e4;
            background-image: linear-gradient(45deg, #ffffff 25%, #f5f5f5 25%, #f5f5f5 50%, #ffffff 50%, #ffffff 75%, #f5f5f5 75%, #f5f5f5 100%);
            background-size: 14.14px 14.14px;
            max-height: 7rem;
        }

        .oh-designs-container .designs-item .figure-caption {
            background-color: #dddddd;
            text-align: center;
        }

        .oh-designs-container .designs-item.active .figure-caption {
            background-color: #f58585;
            color: white;
        }

        .oh-designs-container .designs-item .designs-img {
            max-height: 5rem;
            min-height: 5rem;
            margin: auto;
            display: block;
        }

/* QC */

.img-design {
    display: block;
    background: linear-gradient(135deg, #b7b7b7 0%, #b7b7b7 5%,transparent 5%, transparent 10%, #b7b7b7 10%, #b7b7b7 15%,transparent 15%,transparent 20%, #b7b7b7 20%, #b7b7b7 25%,transparent 25%,transparent 30%, #b7b7b7 30%, #b7b7b7 35%,transparent 35%,transparent 40%, #b7b7b7 40%, #b7b7b7 45%,transparent 45%,transparent 50%, #b7b7b7 50%, #b7b7b7 55%,transparent 55%,transparent 60%, #b7b7b7 60%, #b7b7b7 65%,transparent 65%,transparent 70%, #b7b7b7 70%, #b7b7b7 75%,transparent 70%,transparent 80%, #b7b7b7 80%, #b7b7b7 85%,transparent 85%,transparent 90%, #b7b7b7 90%, #b7b7b7 95%,transparent 95%);
    background-size: 5em 5em;
    background-color: #d7d7d7;
    opacity: 1;
    border: 1px solid #e4e4e4;
    padding: 0.5em;
}