/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
    height: 64px;
    margin-top: 12px;
}

.app-brand-logo.demo svg {
    width: 22px;
    height: 38px;
}

.app-brand-text.demo {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed
    .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu)
    .layout-page {
    padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir="rtl"] .rtl-only {
    display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}
.layout-demo-placeholder img {
    width: 900px;
}
.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

.notify {
    z-index: 2147483647;
}

.note-editor.note-frame {
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-shadow: none;
}
.dropzone {
    box-sizing: border-box;
    min-height: 9.75rem;
    padding: 0.5rem;
    border: 2px dashed rgba(158, 158, 158, 0.39);
    border-radius: 0.3rem;
    background: 0 0;
}
.dropzone .dz-message {
    margin-top: 2.25rem;
    font-size: 0.875rem;
    text-align: center;
    line-height: 1;
    color: rgba(158, 158, 158, 0.39);
}
.dropzone .dz-message .dz-button:before {
    display: block;
    position: relative;
    top: 0;
    left: calc(50% - (2.5rem / 2));
    width: 2.5rem;
    height: 2.5rem;
    content: "";
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23eee' d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
    opacity: 20%;
    background-size: 2.5rem 2.5rem;
    background-position: center center;
    background-repeat: no-repeat;
}
[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
[class*="icheck-"] > input:first-child + label::before {
    border-radius: 3px !important;
}

table.dataTable {
    margin-bottom: 15px !important;
    border-spacing: 0;
}
table.dataTable thead > tr > th {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.table td,
.table th {
    vertical-align: middle;
}
table.dataTable tr.group.group-start {
    background-color: #e9ecef;
}
table.dataTable tr.group.group-start td {
    padding: 0.4rem 0.75rem;
    font-weight: 600;
}
table.dataTable .btn-group {
    align-items: center;
}

div.dataTables_wrapper div.dataTables_filter {
    float: right;
    height: 40px;
    margin: 0;
}
div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0 !important;
}
div.dataTables_filter input.form-control.input-sm {
    margin: 0 20px;
}
div.dataTables_wrapper div.dataTables_info {
    float: left;
    padding-top: 15px;
}
div.dataTables_wrapper div.dataTables_paginate {
    float: right;
    padding-top: 10px;
}
div.dataTables_wrapper .dataTables_length {
    position: absolute;
    margin-top: 5px;
    float: left;
}
div.dataTables_wrapper tr.order-cancelled {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #b3b3b3 !important;
}
div.dataTables_wrapper tr.order-cancelled .text-success,
div.dataTables_wrapper tr.order-cancelled a {
    color: #b3b3b3 !important;
}
div.dataTables_wrapper tr.order-cancelled .badge {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #b3b3b3 !important;
}
div.dataTables_wrapper tr.order-delivered {
    background-color: rgba(14, 229, 24, 0.06) !important;
    color: #b3b3b3 !important;
}
div.dataTables_wrapper tr.order-delivered .text-success,
div.dataTables_wrapper tr.order-delivered a {
    color: #b3b3b3 !important;
}
div.dataTables_wrapper tr.order-delivered .badge {
    background-color: rgba(10, 224, 13, 0.1) !important;
    color: #b3b3b3 !important;
}

body.rtl div.dataTables_wrapper div.dataTables_info {
    float: right !important;
}
body.rtl div.dataTables_wrapper .dataTables_length {
    float: right !important;
}

.card > .overlay,
.card > .loading-img,
.overlay-wrapper > .overlay,
.overlay-wrapper > .loading-img,
.info-box > .overlay,
.info-box > .loading-img,
.small-box > .overlay,
.small-box > .loading-img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.card .overlay,
.overlay-wrapper .overlay,
.info-box .overlay,
.small-box .overlay {
    border-radius: 0.25rem;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    z-index: 50;
}

.card .overlay > .bx,
.card .overlay > .bxs,
.card .overlay > .fa,
.card .overlay > .fas,
.card .overlay > .far,
.card .overlay > .fab,
.card .overlay > .fal,
.card .overlay > .fad,
.card .overlay > .svg-inline--fa,
.card .overlay > .ion,
.overlay-wrapper .overlay > .bx,
.overlay-wrapper .overlay > .bxs,
.overlay-wrapper .overlay > .fa,
.overlay-wrapper .overlay > .fas,
.overlay-wrapper .overlay > .far,
.overlay-wrapper .overlay > .fab,
.overlay-wrapper .overlay > .fal,
.overlay-wrapper .overlay > .fad,
.overlay-wrapper .overlay > .svg-inline--fa,
.overlay-wrapper .overlay > .ion,
.info-box .overlay > .bx,
.info-box .overlay > .bxs,
.info-box .overlay > .fa,
.info-box .overlay > .fas,
.info-box .overlay > .far,
.info-box .overlay > .fab,
.info-box .overlay > .fal,
.info-box .overlay > .fad,
.info-box .overlay > .svg-inline--fa,
.info-box .overlay > .ion,
.small-box .overlay > .bx,
.small-box .overlay > .bxs,
.small-box .overlay > .fa,
.small-box .overlay > .fas,
.small-box .overlay > .far,
.small-box .overlay > .fab,
.small-box .overlay > .fal,
.small-box .overlay > .fad,
.small-box .overlay > .svg-inline--fa,
.small-box .overlay > .ion {
    color: #343a40;
    font-size: 60px;
}


.tab-pane > .overlay-wrapper {
    position: relative;
}

.tab-pane > .overlay-wrapper > .overlay {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    flex-direction: column;
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    height: calc(100% + 2 * 1.25rem);
    width: calc(100% + 2 * 1.25rem);
} 
.modal-dialog .overlay {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: -1px;
    z-index: 1052;
    justify-content: center;
    align-items: center;
    color: #666f76;
    border-radius: 0.3rem;
}

@media (min-width: 576px) {
    #mediaModal .card {
        position: initial;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
    #mediaModal .card:hover {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }
    #mediaModal .card img {
        border-radius: 3px 3px 0 0;
    }
    #mediaModal .card-footer {
        padding: 0.25rem 0.5rem 0;
    }
    #mediaModal .card:hover .card-footer {
        background-color: rgba(0, 0, 0, 0.08);
    }
    #mediaModal .card .delete-media {
        position: absolute;
        right: 13px;
        top: 5px;
        padding: 0.1rem 0.35rem;
        display: none;
    }
    #mediaModal .modal-footer span {
        width: 100%;
        text-align: left;
        font-size: 90%;
    }
    #mediaModal .card-footer small {
        display: inline-block;
        font-size: 80%;
        font-weight: 400;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
    }
    #mediaModal .modal-body {
        height: 400px;
        overflow: auto;
    }
    #mediaModal #createMediaField {
        display: none;
    }
    #mediaModal .media-item {
        position: relative;
    }
}