@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html,body {
    height: 100%;
}

body {
    overscroll-behavior: contain;
}


.flex-parent {
    display: flex;
    align-items: center;
}

.carousel-fade2 .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}

    .carousel-fade2 .carousel-item.active,
    .carousel-fade2 .carousel-item-next.carousel-item-left,
    .carousel-fade2 .carousel-item-prev.carousel-item-right {
        opacity: 1;
    }

.carousel-fade2 .active.carousel-item-left,
.carousel-fade2 .active.carousel-item-right {
    opacity: 0;
}

.carousel-fade2 .carousel-item-next,
.carousel-fade2 .carousel-item-prev,
.carousel-fade2 .carousel-item.active,
.carousel-fade2 .active.carousel-item-left,
.carousel-fade2 .active.carousel-item-prev {

}


/*.k-popup, .k-animation-container {
    z-index: 1200;
}*/
/* Update version numbers in index.html when changing this file */
/* tab titles will now produce a scrollbar when too wide */
.tab-container .k-tabstrip .k-tabstrip-items {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
@media (max-width: 768px) {
    .toast-notification {
        width: 100% !important;
        padding-left: 8px;
        padding-right: 8px;
        position:fixed;
        bottom: 30px;
    }
}
.toast-notification {
    z-index: 100000001 !important;
}

.action-bar {
    z-index: 100000001 !important;
}



.icon-only-button .k-icon {
    margin-right: auto !important;
    margin-left: auto !important;
}

.breadcrumb {
    background-color: transparent !important;
}

.itemIcon {
    border-radius: 0px !important;
    font-size: 48px !important;
    height: 48px !important;
    width: 48px !important;
}
/* Form Styles 
    NOTE: We want to reduce margin on labels because it's not needed
*/
label {
    margin-bottom: 0px !important;
}
.form-group{
    margin-bottom: .5rem !important;
}

.link-label-unindent {
    margin-left: -13px !important;
}

/* Grid styles  */
.k-master-row > td > a {
    text-decoration: underline;
    cursor: pointer;
}
.grid-link {
    text-decoration: underline !important;
    cursor: pointer !important;
}
/* Tab Styles */
@media (max-width: 576px) {
    .k-tabstrip > .k-content {
        padding-left: .15rem !important;
        padding-right: .15rem !important;
        padding-bottom: .25rem !important;
        padding-top: .25rem !important;
    }
}

@media (max-width: 576px) {
    .rfi-tabstrip > .k-content {
        padding: .5rem 1rem !important;
    }
}
    /*  MODAL CSS  */
    .bm-container {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .bm-overlay {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 3;
        background-color: rgba(0,0,0,0.5);
    }

    .bm-active {
        display: flex;
    }

    .blazor-modal {
        display: flex;
        flex-direction: column;
        width: 50rem;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #fff;
        padding: 1.5rem;
        z-index: 4;
    }

    .bm-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 0 2rem 0;
    }

    .bm-title {
        margin-bottom: 0;
    }

    .bm-close {
        padding: 1rem;
        margin: -1rem -1rem -1rem auto;
        background-color: transparent;
        border: 0;
        -webkit-appearance: none;
        cursor: pointer;
    }

    /* END MODAL CSS */

    .iconImage {
        max-height: 72px !important;
        width: 72px !important;
    }

    html, body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        background-color: #eee;
    }

    a, .btn-link {
        color: #0366d6;
    }



    app {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .top-row {
        height: 3.5rem;
        display: flex;
        align-items: center;
    }

    .main {
        flex: 1;
    }

        .main .top-row {
            background-color: #f7f7f7;
            border-bottom: 1px solid #d6d5d5;
            justify-content: flex-end;
        }

            .main .top-row > a, .main .top-row .btn-link {
                white-space: nowrap;
                margin-left: 1.5rem;
            }

            .main .top-row a:first-child {
                overflow: hidden;
                text-overflow: ellipsis;
            }



    .content {
        padding-top: 1.1rem;
    }

    .navbar-toggler {
        background-color: rgba(255, 255, 255, 0.1);
    }


    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }

    #blazor-error-ui {
        background: lightyellow;
        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: 1000;
    }

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

    @media (max-width: 767.98px) {
        .main .top-row:not(.auth) {
            display: none;
        }

        .main .top-row.auth {
            justify-content: space-between;
        }

        .main .top-row a, .main .top-row .btn-link {
            margin-left: 0;
        }

        .h-mobile-100 {
            height: 100% !important;
        }

        .w-mobile-100 {
            width: 100% !important;
        }

        .min-height-mobile-100 {
            min-height: 100%;
            min-height: 100vh;
        }

        .hide-on-mobile {
            display: none;
        }
    }

    @media (min-width: 768px) {
        app {
            flex-direction: row;
        }

        .hide-on-desktop {
            display: none;
        }

        .main .top-row {
            position: sticky;
            top: 0;
        }

        .main > div {
            padding-left: 2rem !important;
            padding-right: 1.5rem !important;
        }

        .navbar-toggler {
            display: none;
        }

        .w-md-100 {
            width: 100% !important;
        }

        .w-md-auto {
            width: auto !important;
        }
    }

    .k-textbox-container, .k-floating-label-container {
        width: 100% !important;
    }

.k-window-content, .k-prompt-container {
    padding: 0px !important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

    .cursor-pointer {
        cursor: pointer;
    }

    .square {
        width: 100%;
        position: relative;
        padding-bottom: 100%;
        border-radius: .25rem;
    }

    .square-content {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .classic-admin-card {
        height: 100%;
        width: 100%;
    }

    .iconSection {
        flex: 1;
        height: 70%;
    }

    .dashboard-icon {
        max-width: 155px;
        max-height: 155px;
        min-height: 155px;
        min-width: 155px;
        border-radius: .25rem;
    }

    @media only screen and (max-width: 768px) {
        .dashboard-icon {
            min-height: unset;
            min-width: unset;
        }
    }

    .classic-admin-card .card-body.InventoryModule {
        background-color: #5B9BD6;
    }

    .classic-admin-card .card-body.DistributionModule {
        background-color: #ED7D31;
    }

    .classic-admin-card .card-body.WorkInProgressModule {
        background-color: #70AD47;
    }    

    .classic-admin-card .card-body.UnknownModule {
        background-color: #5B9BD6;
    }

    .classic-admin-card .card-body {
        margin-bottom: 0;
        padding: 0.1rem;
        display: flex;
        flex-direction: column;
        border-radius: .25rem;
    }

        .classic-admin-card .card-body p {
            margin-bottom: 0;
        }

        .classic-admin-card .card-body .row {
            margin-right: unset;
            margin-left: unset;
        }

        .classic-admin-card .card-body h4 {
            margin-top: 10px;
        }

        .classic-admin-card .card-body .float-right mdb-icon {
            font-size: 3rem;
            opacity: 0.5;
        }

    .classic-admin-card .progress {
        margin: 0;
        opacity: 0.7;
    }


    .cascading-admin-card .admin-up mdb-icon {
        -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
    }

    .iconContainer {
        height: 100%;
        /*width: 100%;*/
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }
        .iconContainer svg {
            /*display: block;
            margin: auto;
            height: 3em;*/
            height: 70%;
        }

    .dashboardIconImage {
        /* height: 96px; */
        /* height: 100%;
  vertical-align: middle; */
        height: 100%;
        width: 100%;
        bottom: 0;
        left: 0;
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }



    .favorite-pin {
        transition-duration: .6s;
        transition-property: transform;
    }

        .favorite-pin.module-favorited {
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }

    .modal-open {
        overflow: auto !important;
    }

    .rs-badge {
        color: black !important;
    }
    .rs-color-primary {
        background-color: #5b9bd6 !important;
        color: #fff;
    }

    .rs-color-success {
        background-color: #E2EFD8 !important;
    }

    .rs-color-warning {
        background-color: #FFF3CD !important;
    }

    .rs-color-danger {
        background-color: #FCE4E5 !important;
    }

    .rs-color-white {
        background-color: #FFFFFF !important;
    }

    .blazored-toast {
        color: black !important;
    }

    .sticky-bottom {
        pointer-events: none; /* Allows the container to be clicked through in case there are text fields under it */
        position: -webkit-sticky;
        position: sticky;
        bottom: 10px;
        z-index: 1000;
    }
    .sticky-bottom button {
        pointer-events: auto; /* Adds a pointer back to the button. This is needed because .sticky-bottom sets pointer-events: none*/
        box-shadow: 0 3px 5px 0 rgba(0,0,0,0.18), 0 2px 6px 0 rgba(0,0,0,0.15);
        -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.18), 0 2px 6px 0 rgba(0,0,0,0.15);
        margin-top: 0.5em;
    }

    .blazored-toast-container{
        z-index: 100000001 !important;
    }

    .rs-accordion-head[aria-expanded="true"] > .rs-accordion-arrow {
        transform: rotate( -180deg );
        transition: transform 250ms ease;
    }

    .rs-accordion-head[aria-expanded="false"] > .rs-accordion-arrow {
        transition: transform 250ms ease;
    }

    .rs-state-invalid {
        border-color: #c02025 !important;
    }
    /* For disabling access to module settings */
    .license-disable-access {
        pointer-events: none;
        opacity: 0.4;
    }

    .custom-ellipsis > p {
        overflow: hidden;
        max-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .custom-ellipsis .rs-grid-column-component {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Number of lines to show */
        -webkit-box-orient: vertical;
        line-height: 1.5em; /* Fallback */
        max-height: 3em; /* Fallback */
    }

    .custom-ellipsis .rs-grid-column-component * {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Number of lines to show */
        -webkit-box-orient: vertical; 
        line-height: 1.5em; /* Fallback */
        max-height: 3em; /* Fallback */
    }

    .rs-grid-column-tooltip {
        max-width: 500px;
    }

    .company-name {
        max-width: 330px;
        padding: 0px 0px 10px 10px;
        font-size: 0.8em;
    }

    .detail-dialog-primary-button {
        height: 38px;
    }
    .detail-dialog-base-button {
        min-width: 56px;
    }

.button-nobackground, .button-nobackground:hover, .button-nobackground:focus, .button-nobackground::selection, .button-nobackground:active{
    background: none;
    border: none;
}

    /* Grid row rendering colors*/
    .rs-color-danger-grid.k-alt, .rs-color-danger-grid {
        box-shadow: inset 0px -1px 0px rgb(227, 228, 228);
        background-color: rgb(252, 228, 239);
        /* rs-color-danger */
    }

    .rs-color-success-grid.k-alt, .rs-color-success-grid {
        box-shadow: inset 0px -1px 0px rgb(227, 228, 228);
        background-color: rgb(226, 239, 216);
        /* rs-color-success */
    }

    .rs-color-warning-grid.k-alt, .rs-color-warning-grid {
        box-shadow: inset 0px -1px 0px rgb(227, 228, 228);
        background-color: rgb(255, 243, 205);
        /* rs-color-warning */
    }

    .rs-color-danger-grid.k-alt:hover, .rs-color-success-grid.k-alt:hover, .rs-color-warning-grid.k-alt:hover {
        background-color: rgb(236,236,236);
    }

.rs-modal-dialog {
    max-height: 95vh;
}

.order-manager-refresh {
    margin-bottom: -40px;
    z-index: 3;
    margin-right: 0.5vh;
}

.order-manager-split {
    margin-bottom: -42px;
    z-index: 3;
    margin-right: 0.5vh;
}

.order-packing-refresh {
    margin-bottom: -38px;
    z-index: 3;
    margin-right: -10px;
}

.margin-right-40 {
    margin-right: 40px !important;
}

.custom-form-list {
    max-height: 480px;
}

.k-upload-selected, .k-clear-selected {
    border-radius: 0.25rem !important;
}

.margin-right-120 {
    margin-right: 120px !important;
}

.link-color {
    color: #0366d6 !important;
}

.lv-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.rs-mobile-grid td[role="gridcell"] {
    padding: 0;
    height: inherit;
}

.task-pill-low {
    background-color: #3e8500 !important;
}

.task-pill-medium {
    background-color: #efe300 !important;
}

.task-pill-high {
    background-color: #e8a302 !important;
}

.task-pill-critical {
    background-color: #e02241 !important;
}

.transition-visible {
    overflow: hidden;
    transition: transform 0.3s ease-out;
    height:auto;
    transform: scaleY(1);
    transform-origin:top;
    /*transition: transform 0.3s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;*/
}

    .transition-visible.transition-collapsed {
        transform: scaleY(0);
    }


/** Simple drag and drop with Blazor CSS **/

.dropzone {
   
}

.no-drop {
    border: 1px dashed red;
}

.can-drop {
    border: 1px dashed green;
}

.draggable {
    cursor: grab;
}

    .draggable:active {
        cursor: grabbing;
    }

.dragging {
    cursor: grabbing;
}

/* Bootstrap doesn't have an exact breakpoint for this */
@media (max-width: 768px) {
    .rs-mt-xs-2 {
        margin-top: 0.5rem !important;
    }
}

input[type=checkbox][disabled]+label {
    opacity: .65;
}