thead {
    background: #efefef9d !important;
    color: #A9A9A9 !important;
    font-weight: bolder;
}

.break-word {
    word-wrap: break-word !important;
}

.btn-outline-secondary {
    color: black !important;
}

.contain {
    object-fit: contain !important;
}

.cover {
    object-fit: cover !important;
}

.cursor-default {
    cursor: default;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-pointer {
    cursor: pointer;
}

.text-green,
.text-green:active,
.text-green:focus,
.text-green:hover {
    color: #8dc63f !important;
}

.img-auto-height img {
    height: auto;
    width: 100%;
}

.inline-block {
    display: inline-block !important;
}

.no-underline {
    text-decoration: none !important;
}

.pac-container {
    z-index: 10000 !important;
}

.pre-wrap {
    white-space: pre-wrap;
}

.required:after {
    color: #f4516c !important;
    content: "*";
}

.ul-padding-left-0 {
    padding-inline-start: 0;
}

.white-space-normal {
    white-space: normal !important;
}

.display-inline {
    display: inline !important;
}

.width-100 {
    padding: 5px;
    width: 100% !important;
}

.width-100px {
    width: 100px !important;
}

@media (min-width: 1025px) {
    .m-brand {
        padding: 0 0 0 30px;
        width: 220px;
    }
}

/**
 * While processing, access should be denied for every child elements
 */
.loading:before {
    background: rgba(0, 0, 0, 0.125);
    bottom: 0;
    content: '';
    height: 100%;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 1000;
}

/**
 * Customize text color for the attribute title of information widgets
 */
.m-widget16 .m-widget16__body .m-widget16__item .m-widget16__date,
.m-widget28 .m-widget28__container .m-widget28__tab .m-widget28__tab-container .m-widget28__tab-items .m-widget28__tab-item > span:first-child {
    color: #17a2b8 !important;
}

.m-widget28 .m-widget28__container .m-widget28__tab .m-widget28__tab-container .m-widget28__tab-items .m-widget28__tab-item-company-info > span:first-child {
    display: block;
    margin-top: 1.2rem;
    font-size: .85rem;
    font-weight: 500;
    color: #A9A9A9 !important;
}

.m-widget28 .m-widget28__container .m-widget28__tab .m-widget28__tab-container .m-widget28__tab-items .m-widget28__tab-item-company-info > span:last-child {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem
}

.m-tabs-line.m-tabs-line--info.nav.nav-tabs .nav-link:hover, .m-tabs-line.m-tabs-line--info.nav.nav-tabs .nav-link.active, .m-tabs-line.m-tabs-line--info a.m-tabs__link:hover, .m-tabs-line.m-tabs-line--info a.m-tabs__link.active {
    color: #95c11e;
    border-bottom: 1px solid #95c11e
}

.status-custom {
    display: block; /* Each element takes full container width */
    width: 90%; /* Optional: Set specific width */
    box-sizing: border-box;
    border: none;
    border-radius: 20px; /* Rounded edges */
    padding: 2px 20px 2px 20px; /* Top/Bottom and Left/Right padding */
    outline: none;
    text-align: center;
    transition: background-color 0.3s ease;
}

.status-new {
    background-color:#D9F2D9;
    color: #239435 !important;
}

.status-quote {
    background-color: #F5F5F5; /* Light gray */
    color: #666666 !important; /* Dark gray */
}

.status-processing {
    background-color: #FFE8C4; /* Light yellow */
    color: #FF9900 !important; /* Amber */
}

.status-inshipping {
    background-color: #E0F7FA; /* Light teal */
    color: #00796B !important; /* Deep teal */
}

.status-shipped {
    background-color:#B8E6FF;
    color: #0483CA !important;
}

.status-onhold {
    background-color: #FFE9B3; /* Pale orange */
    color: #FF8C00 !important; /* Orange-red */
}

.status-alert {
    background-color:#FFE9DC;
    color: #FF2149 !important;
}

.status-backorder {
    background-color: #F3E5F5; /* Light lavender */
    color: #6A1B9A !important; /* Deep purple */
}

.table th, .table td {
    padding: 1.3rem;
    vertical-align: top;
    border-top: 1px solid #f4f5f8;
    border: solid #dddddd ;
    border-width: 1px 0;
    font-weight: 500;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: white;
}

.round-corner {
    border-radius: 0.8rem;
}

/**
 * Search bar make the corner round
 */
.m-input-icon.m-input-icon--left .form-control.form-control-sm {
    padding-left: 2.5rem;
    border-radius: 0.5rem;
}

/**
 * Number of table rows per page selection, round corner
 */
.form-control[readonly], .form-control {
    border-color: #ebedf2;
    color: #575962;
    border-radius: 0.5rem;
}

/**
 * Customer service page sections, round corner
 */
.m-portlet.m-portlet--full-height {
    height: calc(100% - 1rem);
    border-radius: 0.8rem;
}

/**
 * Place action buttons of a form in modal view to the right bottom corner
 */
.m-form .m-form__actions.modal-form {
    padding: 30px 0 0 0 !important;
    text-align: right;
}

/**
 * vue datetime specific custom style modifications
 */
.vdp-datepicker__clear-button,
.vdp-datepicker__calendar-button {
    color: red;
    cursor: pointer;
    float: right;
    font-style: normal;
    margin-right: 10px;
    margin-top: -30px;
}

/**
 * Place a spinner at the center of the display until vue components are fully loaded and rendered
 */
[v-cloak] > * {
    display: none !important;
}

[v-cloak]::before {
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
    background-position: center;
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 100%;
    width: 100%;
}

/**
 * vue select specific custom style modifications
 */
.v-select {
    border: 1px solid #ebedf2;
    display: inline-block;
    font-family: sans-serif, Arial !important;
    font-weight: normal;
    min-height: calc(2.95rem + 2px);
    padding: 0 2px 1px;
    vertical-align: middle;
    width: 100%;
}

.vs__dropdown-menu {
    left: -1px !important;
    max-height: 165px !important;
    width: calc(100% + 2px) !important;
}

.vs__dropdown-option {
    font-family: sans-serif, Arial !important;
    line-height: 1.75 !important;
}

.vs__dropdown-option--selected,
.vs__dropdown-option--highlight {
    background: lightgray;
    color: #333333;
}

.vs__dropdown-toggle {
    border: none !important;
    min-height: 2.95rem !important;
    padding: 0 !important;
}

.vs__no-options {
    padding: 0 12px !important;
    text-align: left !important;
}

.vs__search {
    color: darkgrey !important;
}

.vs__selected {
    color: #575962 !important;
    margin: 4px 2px !important;
}

/**
 * Settings form specific customization
 */
.m-wizard.m-wizard--3 .m-wizard__form {
    border: none !important;
    padding: 3rem 4rem;
}

.m-wizard.m-wizard--3 .settings-form-wizard .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step {
    cursor: pointer;
    font-size: 1.3em;
    margin: 0;
    padding: 1.5rem;
    width: 100%;
}

.m-wizard.m-wizard--3 .settings-form-wizard .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step:hover .m-wizard__step-info .m-wizard__step-label,
.m-wizard.m-wizard--3 .settings-form-wizard .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step.m-wizard__step--current .m-wizard__step-info .m-wizard__step-label {
    color: #f2f3f8;
}

.m-wizard.m-wizard--3 .settings-form-wizard .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step:hover,
.m-wizard.m-wizard--3 .settings-form-wizard .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step.m-wizard__step--current {
    background: #9699a2;
}

.m-wizard.m-wizard--3 .settings-form-wizard .m-wizard__head {
    padding: 2rem 0;
}

.settings-form-wizard {
    margin: -1rem !important;
}

/**
 * Single line widget value width
 */
.m-widget16 .m-widget16__body .m-widget16__item .m-widget16__price {
    width: auto !important;
}