app {
    width: 100%;
}

body.login {
    background-color: #ffffff;
    background-image: url('../images/bg/bg-s2.jpg') !important;
    background-size: cover;
}

.login .jumbotron {
    margin-bottom: 2rem;
    background-color: #ffffff;
    border-radius: 0.3rem;
    opacity: 0.96;
    color: #464646;
}

.grid-padding-top {
    padding-top: 10px;
}

.checkbox-list-container {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    outline-offset: 10px;
    padding: 6px 9px 8px 8px;
}

.emailSummaryCheckBox {
    padding: 6px 9px 8px 8px;
}

/*override kendo styles*/
.k-checkbox:checked {
    color: #fff;
    border-color: #4e98da;
    background-color: #4e98da;
}
.k-checkbox:indeterminate, .k-checkbox.k-state-indeterminate {
    border-color: rgba(0,0,0,0.08);
    color: #4e98da;
    background-color: #fff;
}
.k-checkbox:checked:focus {
    border-color: #4e98da;
    box-shadow: 0 0 0 2px rgba(88, 201, 255, 0.3);
}
.k-calendar .k-state-selected .k-link {
    border-color: #4e98da;
    color: #fff;
    background-color: #4e98da;
}
.k-calendar .k-footer .k-nav-today, .k-calendar .k-calendar-header .k-today {
    color: #4e98da;
}
.k-text-selection ::selection, .k-widget ::selection, .k-block ::selection, .k-panel ::selection, .k-pane-wrapper ::selection, .k-view ::selection, .k-progressbar ::selection, .k-numerictextbox ::selection, .k-flatcolorpicker ::selection, .k-combobox ::selection, .k-dateinput ::selection, .k-datepicker ::selection, .k-datetimepicker ::selection, .k-timepicker ::selection, .k-dropdown ::selection, .k-dropdowntree ::selection, .k-multiselect ::selection, .k-maskedtextbox ::selection, .k-rating ::selection, .k-window ::selection, .k-drawer ::selection, .k-notification ::selection, .k-breadcrumb ::selection, .k-pager-wrap ::selection, .k-panelbar ::selection, .k-card ::selection, .k-splitter ::selection, .k-spreadsheet ::selection, .k-scheduler ::selection, .k-chat ::selection, .k-mediaplayer ::selection, .k-pdf-viewer ::selection, kendo-scrollview.k-scrollview-wrap ::selection, div.k-scrollview ::selection, .k-chart ::selection, .k-sparkline ::selection, .k-stockchart ::selection {
    background-color: #4e98da;
    color: #fff;
}

.k-checkbox {
    border-color: rgba(0,0,0,0.3) !important;
    color: #656565;
    background-color: #fff;
}

/*bootstrap overrides*/
.btn-primary {
    color: #fff;
    background-color: #4e98da;
    border-color: #4e98da;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #1f5586;
    border-color: #1f5586;
}
.btn-primary:hover {
    color: #fff;
    background-color: #4e98da;
    border-color: #4e98da;
}

.validation-message {
    padding: 5px 0;
    color: red;
}

/*override kendo styles*/
.k-i-plus::before, .k-plus::before, .k-i-add::before {
    content: "\e014";
}

.k-i-minus::before, .k-minus::before {
    content: "\e016";
}

.k-tabstrip-items .k-item:hover {
    color: #4e98da;
}

.k-tabstrip-items .k-item {
    color: #656565;
}

.k-list .k-item:hover.k-state-selected,
.k-list .k-item.k-state-hover.k-state-selected,
.k-list-optionlabel:hover.k-state-selected,
.k-list-optionlabel.k-state-hover.k-state-selected {
    color: #656565;
    background-color: #81c0f8
}

.k-list .k-item.k-state-selected, 
.k-list-optionlabel.k-state-selected {
    color: #656565;
    background-color: #fff;
}

.k-listview {
    border-color: rgba(0, 0, 0, 0);
}

/*override layout styles*/
@media (min-width: 1025px) {
    .m-dropdown.m-dropdown--large .m-dropdown__wrapper {
        width: 360px !important;
    }
}

.m-form .form-control-label, .m-form label {
    font-weight: 400;
    font-size: inherit;
    margin-bottom: 0;
}

.m-badge.m-badge--danger {
    background-color: #4e98da;
    color: #ffffff;
    position: absolute;
    font-style: normal;
    margin-top: 10px;
    margin-left: -10px;
}

.fas.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

.product-window {
    max-width: 70%;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.fa-left {
    margin-right: 7px;
}

.k-listview-header {
    padding: 20px 28px;
    text-transform: uppercase;
}

.k-card {
    padding: 20px;
    border-width: 0 0 1px 0;
    border-radius: 0;
    box-shadow: none;
}

.k-card:last-child {
    border-bottom: 0;
}

.k-card .k-card-body,
.k-card .k-card-actions {
    padding: 0 8px;
}

.k-card .k-card-image {
    max-width: unset;
}

.k-card-horizontal>.k-card-image:last-child {
    border-radius: 0;
}

.k-card .k-card-title {
    font-size: 1.285em;
    font-weight: bold;
    line-height: normal;
}

.k-card-subtitle {
    font-size: 1em;
}

.k-card-subtitle.company-name {
    color: #1f1f1f;
}

.card-date {
    font-size: 0.85em;
    color: #1f1f1f;
    padding-bottom: 5px;
}

.past-order {
    background-color: #fd938c;
}

.future-order {
    background-color: #28a745;    
}

.tomorrow-order {
    background-color: #c3e9b7;    
}

.tomorrow-plus-one-order{
    background-color: #60c540;  
}

.present-order {
    background-color: #ffc6a4;
}

.icon-padding {
    margin-right: 5px;
}

.k-window .footer {
    background-color: #ff6358;
    margin: 0 -30px -15px -30px;
    padding: 10px;
}

.k-window .footer .content {
    margin: 0 -20px;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #000;
}

.k-window .footer-adjust
{
    margin-bottom: -15px;    
}

.k-window .footer-adjust .action-button
{
    padding: 10px;    
}

.textbox-border {
    border: solid 1px #4e98da;
}

.orderDetail .pnlOrderDetail {
    margin: 10px 30px 30px 30px;
    padding: 20px 10px;
    background-color: #fcfcfc;
}

.orderDetail .k-grid-content {
    max-height: 200px;
}

.validation-summary .validation-message {
    padding: 10px 0;
    color: white;
}

.delete-width {
    width: 20px !important;
}

.k-btn-styled, .k-btn-styled:hover {
    border-color: #4e98da;
    color: #ffffff;
    background-color: #4e98da;
    background-image: linear-gradient(#4e98da69, #4e98da63);
    background-clip: padding-box;
    border-radius: 3px;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    padding: 0.55rem 0.85rem;
}

.packing.k-card {
    padding: 5px !important;
}

.packing.k-card.k-card-title {
    margin: 0;
}

.k-btn-styled:focus {
    background-color: #2773b7;
}

.swal2-popup, .swal2-modal {
  z-index: 1000000 !important;
}

ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

.loading-panel-wrapper {
    /* size and appearance that try to match its container with as little CSS as possible,
           you can alter them as necessary for your use case and as per your preferences 
        */
    width: 100%;
    height: 100%;
    min-height: 200px;
    position: absolute;
    z-index: 123456;
    /* one way center the loading indicator inside */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-panel-wrapper .loading-panel-overlay {
    background: gray;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__heading .m-menu__link-icon, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
    color: #adadad !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
    color: #f0f0f0 !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__section .m-menu__section-text {
    color: #adadad !important;
}

input[type="number"] {
    border: #ccc 1px solid; 
}

.portal-order input::-webkit-outer-spin-button,
.portal-order input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.EmbedFrame-footer {
    display: none !important;
    background-color: red !important;
}


/* Firefox */
.portal-order input[type=number] {
    -moz-appearance: textfield;
}

#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;
}

.btn-inline {
    margin-top:20px; 
    padding:4px 10px;
    cursor: pointer;
}

@media only screen and (min-width: 992px) {
    .onboarding-window{
        width: 600px;
        height: 400px;
    }

    #desktop-message {
        display: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 992px) {
    .onboarding-window {
        width: 400px;
        height: 350px;
    }

    .product-window {
        max-width: 70%;
    }

    #desktop-message {
        display: block;
        background-color: #FEE;
        padding: 20px;
    }
}

@media only screen and (min-width: 300px) and (max-width: 576px) {
    .onboarding-window {
        width: 350px;
        height: 350px;
    }

    .product-window {
        max-width: 70%;
    }

    #desktop-message {
        display: block;
        background-color: #FEE;
        padding: 20px;
    }
}