:root {
    /*Color*/
    --primary-color-red: rgb(233,0,41); /* #E90029 */
    --primary-color-red-dark: rgb(135,21,24); /* #871518 */
    --primary-color-gray-light: rgb(235,235,235); /* #EBEBEB */
    --primary-color-gray: rgb(217,217,214); /* #D9D9D6 */
    --primary-color-gray-medium: rgb(151,153,155); /* #97999b */
    --primary-color-gray-dark: rgb(55,58,54); /* #303030 */
    --primary-color-black: rgb(0,0,0); /* #000000 */
    --secondary-blue-dark: rgb(7, 29, 73); /* #071D49 */
    --secondary-blue: rgb(66, 109, 169); /* #426DA9 */
    --secondary-purple: rgb(155, 38, 182); /* #9B26B6 */
    --secondary-orange: rgb(255, 103, 32); /* #FF6720 */
    --secondary-yellow: rgb(242, 169, 0); /* #F2A900 */
    --secondary-teal: rgb(99, 177, 188); /* #63B1BC */
    /*Font Family*/
    --font-family: "San Sans", Arial, sans-serif;
    /*Font Size*/
    --font-size-page-title: 1.8rem; /* 28.8 px */
    --font-size-scope-title: 1.6rem; /* 25.6 px */
    --font-size-card-table-title: 1.4rem; /* 16 px */
    --font-size-card-table-text: 0.9rem; /* 14 px */
    --font-size-note: 0.7rem; /* 10 px */
    --font-size-button: 0.9rem; /* 14 px */

    --muted-color: #8A8A8A;
}

.borderradius {
    border-radius: 10px;
    overflow: hidden;
}

.thead-dark {
    background: #222222;
    color: white !important;
    font-weight: bold;
}

tbody > tr:hover {
    background-color: #f5f5f5
}

.center-span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.red-link {
    color: #FF0000;
    cursor: pointer;
}

    .red-link:hover {
        color: #B30000
    }

.input-error {
    border: solid 1px red !important;
    background: #FDD2C9 !important;
}

.input-change {

}

.div-locked-icon {
    font-size: 5px !important;
    color: var(--muted-color) !important;
}
.div-locked {
    font-size: 10px;
    color: var(--muted-color);
}

.btn-right {
    float: right;
}

.div-loading {
    margin: 0px;
    padding: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #666666;
    z-index: 9990001;
    opacity: .8;
    filter: alpha(opacity=70);
    display: none;
    justify-content: center;
    align-items: center;
}

.div-loading-p {
    position: absolute;
    top: 45%;
    left: 50%;
    color: White;
    text-align: center;
}

.loading_icon {
    width: 4.2rem;
    height: 4.2rem;
    filter: saturate(3);
}



.bgi-no-repeat {
    background-repeat: no-repeat
}

.bgi-position-y-top {
    background-position-y: top
}

.bgi-position-y-bottom {
    background-position-y: bottom
}

.bgi-position-y-center {
    background-position-y: center
}

.bgi-position-x-start {
    background-position-x: left
}

.bgi-position-x-end {
    background-position-x: right
}

.bgi-position-x-center {
    background-position-x: center
}

.bgi-position-top {
    background-position: 0 top
}

.bgi-position-bottom {
    background-position: 0 bottom
}

.bgi-position-center {
    background-position: center
}

.bgi-size-auto {
    background-size: auto
}

.bgi-size-cover {
    background-size: cover
}

.bgi-size-contain {
    background-size: contain
}

.bgi-attachment-fixed {
    background-attachment: fixed
}

.bgi-attachment-scroll {
    background-attachment: scroll
}

@media (min-width: 576px) {
    .bgi-size-sm-auto {
        background-size: auto
    }

    .bgi-size-sm-cover {
        background-size: cover
    }

    .bgi-size-sm-contain {
        background-size: contain
    }

    .bgi-attachment-sm-fixed {
        background-attachment: fixed
    }

    .bgi-attachment-sm-scroll {
        background-attachment: scroll
    }
}

@media (min-width: 768px) {
    .bgi-size-md-auto {
        background-size: auto
    }

    .bgi-size-md-cover {
        background-size: cover
    }

    .bgi-size-md-contain {
        background-size: contain
    }

    .bgi-attachment-md-fixed {
        background-attachment: fixed
    }

    .bgi-attachment-md-scroll {
        background-attachment: scroll
    }
}

@media (min-width: 992px) {
    .bgi-size-lg-auto {
        background-size: auto
    }

    .bgi-size-lg-cover {
        background-size: cover
    }

    .bgi-size-lg-contain {
        background-size: contain
    }

    .bgi-attachment-lg-fixed {
        background-attachment: fixed
    }

    .bgi-attachment-lg-scroll {
        background-attachment: scroll
    }
}

@media (min-width: 1200px) {
    .bgi-size-xl-auto {
        background-size: auto
    }

    .bgi-size-xl-cover {
        background-size: cover
    }

    .bgi-size-xl-contain {
        background-size: contain
    }

    .bgi-attachment-xl-fixed {
        background-attachment: fixed
    }

    .bgi-attachment-xl-scroll {
        background-attachment: scroll
    }
}

@media (min-width: 1400px) {
    .bgi-size-xxl-auto {
        background-size: auto
    }

    .bgi-size-xxl-cover {
        background-size: cover
    }

    .bgi-size-xxl-contain {
        background-size: contain
    }

    .bgi-attachment-xxl-fixed {
        background-attachment: fixed
    }

    .bgi-attachment-xxl-scroll {
        background-attachment: scroll
    }
}

.table-value {
    align-items: start !important;
    justify-items: start !important;
    font-size: 18px !important;
    color: red !important;
}

.background-container {
    background-image: url('../img/background2.jpg');
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover;
    max-width: 100%;
    height: 100vh;
}


.label-sales {
    display: inline-block;
    padding: 2px 20px;
    border-radius: 5px;
    background-color: #7ED7FF;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.label-refund {
    display: inline-block;
    padding: 2px 20px;
    border-radius: 5px;
    background-color: #FF7E7E;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.label-repair {
    display: inline-block;
    padding: 2px 20px;
    border-radius: 5px;
    background-color: #7EFFC7;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}




.label-new {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    background-color: #065950;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.label-completed {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    background-color: #007bff;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.label-closed {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    background-color: #242D2C;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.label-refunds {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    background-color: #FF0000;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.button-icon-model{
    cursor: pointer;
    margin-left: 10px !important;
}