:root {
    /*PRIMARY COLORS*/
    /*NEUTRAL*/
    --mmr-neutral: #FFFFFF;
    --mmr-neutral-0: #FFFFFF;
    --mmr-neutral-50: #FAFAFA;
    --mmr-neutral-75: #F3F3F3;
    --mmr-neutral-100: #DDDDDE;
    --mmr-neutral-150: #d7d7d8;
    --mmr-neutral-200: #BBBBBD;
    --mmr-neutral-300: #999A9C;
    --mmr-neutral-400: #77787B;
    --mmr-neutral-500: #55565A;
    --mmr-neutral-600: #444548;
    --mmr-neutral-700: #333436;
    --mmr-neutral-800: #222224;
    --mmr-neutral-900: #111112;
    --mmr-neutral-gradient-skeleton: linear-gradient(90deg, #EAEAEA 0%, #D0D0D0 100%);
    /*RED*/
    --mmr-red-100: #E8D3D6;
    --mmr-red-200: #D0A7AD;
    --mmr-red-300: #B97C84;
    --mmr-red-400: #A1505B;
    --mmr-red-500: #8A2432;
    --mmr-red-600: #6E1D28;
    --mmr-red-700: #53161E;
    --mmr-red-800: #370E14;
    --mmr-red-900: #1C070A;
    /*YELLOW*/
    --mmr-yellow-100: #FEF4CC;
    --mmr-yellow-200: #FCE999;
    --mmr-yellow-300: #FBDD66;
    --mmr-yellow-400: #F9D233;
    --mmr-yellow-500: #F8C700;
    --mmr-yellow-600: #C69F00;
    --mmr-yellow-700: #957700;
    --mmr-yellow-800: #635000;
    --mmr-yellow-900: #322800;
    /*FEEDBACK COLORS*/
    /*SUCCESS*/
    --mmr-success-100: #CCF5DB;
    --mmr-success-200: #99EBB6;
    --mmr-success-300: #66E292;
    --mmr-success-400: #33D86D;
    --mmr-success-500: #00CE49;
    --mmr-success-600: #00A53A;
    --mmr-success-700: #007C2C;
    --mmr-success-800: #00521D;
    --mmr-success-900: #00290F;
    /*WARNING*/
    --mmr-warning-100: #FFEFCC;
    --mmr-warning-200: #FFE099;
    --mmr-warning-300: #FFD066;
    --mmr-warning-400: #FFC133;
    --mmr-warning-500: #FFB100;
    --mmr-warning-600: #CC8E00;
    --mmr-warning-700: #996A00;
    --mmr-warning-800: #664700;
    --mmr-warning-900: #332300;
    /*DANGER*/
    --mmr-danger-100: #FFD0D3;
    --mmr-danger-200: #FFA1A7;
    --mmr-danger-300: #FF727C;
    --mmr-danger-400: #FF4350;
    --mmr-danger-500: #FF1424;
    --mmr-danger-600: #CC101D;
    --mmr-danger-700: #990C16;
    --mmr-danger-800: #66080E;
    --mmr-danger-900: #330407;
    /*INFO*/
    --mmr-info-100: #CCE7FD;
    --mmr-info-200: #99CEFA;
    --mmr-info-300: #66B6F8;
    --mmr-info-400: #339DF5;
    --mmr-info-500: #0085F3;
    --mmr-info-600: #006AC2;
    --mmr-info-700: #005092;
    --mmr-info-800: #003561;
    --mmr-info-900: #001B31;
    /*CUSTOM*/
    --mmr-yellow: var(--mmr-yellow-500);
    --mmr-maroon: var(--mmr-red-500);
    --mmr-darkgrey: var(--mmr-neutral-500);
    --mmr-success: var(--mmr-success-500);
    --mmr-background-color: var(--mmr-neutral-75);
    --mmr-regular-font-color: var(--mmr-neutral-700);
    --mmr-teal: #087E8B;
    --mmr-lightgrey: #d8dad8;
}


/* || BUTTONS*/
.btn {
    border-radius: 4px;
    cursor: pointer;
}

    .btn:focus {
        box-shadow: none;
    }

    /* || LARGE PRIMARY MAROON BUTTONS*/
    .btn.btn-maroon-primary {
        background: var(--mmr-red-500);
        color: var(--mmr-neutral);
    }

        .btn.btn-maroon-primary:hover {
            background: var(--mmr-red-400);
            box-shadow: 0px 2px 5px var(--mmr-neutral-gradient-skeleton);
            color: var(--mmr-neutral);
        }

        .btn.btn-maroon-primary:active {
            background: var(--mmr-red-600);
            color: var(--mmr-neutral);
        }

        .btn.btn-maroon-primary:disabled {
            background: var(--mmr-red-200);
            color: var(--mmr-neutral);
        }

        .btn.btn-maroon-primary:focus {
            background: var(--mmr-red-400);
            box-shadow: 0px 0px 5px var(--mmr-red-300);
            color: var(--mmr-neutral);
        }

    /* || LARGE PRIMARY YELLOW BUTTONS*/
    .btn.btn-yellow-primary {
        background: var(--mmr-yellow-500);
        color: var(--mmr-neutral-700);
        font-size: 15px;
        font-weight: bolder;
    }

        .btn.btn-yellow-primary:hover {
            box-shadow: 0px 2px 5px var(--mmr-neutral-gradient-skeleton);
            background-color: var(--mmr-yellow-600);
        }

        .btn.btn-yellow-primary:active {
            background: var(--mmr-yellow-600);
        }

        .btn.btn-yellow-primary:disabled {
            background: var(--mmr-yellow-100);
            color: var(--mmr-neutral-100);
        }

        .btn.btn-yellow-primary:focus {
            background: var(--mmr-yellow-500);
            box-shadow: 0px 0px 5px #F5C958;
        }

    /* || LARGE SECONDARY MAROON BUTTONS*/
    .btn.btn-maroon-secondary {
        background: var(--mmr-neutral);
        color: var(--mmr-red-500);
        border: 2px solid var(--mmr-red-500);
        box-sizing: border-box;
    }

        .btn.btn-maroon-secondary:hover {
            background: var(--mmr-neutral);
            color: var(--mmr-red-400);
            border: 2px solid var(--mmr-red-400);
            box-sizing: border-box;
            box-shadow: 0px 2px 5px rgba(208, 208, 208, 0.25);
        }

        .btn.btn-maroon-secondary:active {
            background: var(--mmr-neutral);
            color: var(--mmr-red-600);
            border: 2px solid var(--mmr-red-600);
            box-sizing: border-box;
        }

        .btn.btn-maroon-secondary:disabled {
            background: var(--mmr-neutral);
            color: var(--mmr-red-200);
            border: 2px solid var(--mmr-red-200);
            box-sizing: border-box;
        }

        .btn.btn-maroon-secondary:focus {
            background: var(--mmr-neutral);
            box-shadow: 0px 0px 5px var(--mmr-red-300);
            color: var(--mmr-red-400);
            border: 2px solid var(--mmr-red-400);
            box-sizing: border-box;
        }

    /* || LARGE SECONDARY YELLOW BUTTONS*/
    .btn.btn-yellow-secondary {
        background: var(--mmr-neutral);
        color: var(--mmr-yellow-500);
        border: 2px solid var(--mmr-yellow-500);
        box-sizing: border-box;
    }

        .btn.btn-yellow-secondary.transparent {
            background: transparent !important;
        }

        .btn.btn-yellow-secondary:hover {
            background: var(--mmr-neutral);
            color: var(--mmr-yellow-400);
            border: 2px solid var(--mmr-yellow-400);
            box-sizing: border-box;
            box-shadow: 0px 2px 5px rgba(208, 208, 208, 0.25);
        }

        .btn.btn-yellow-secondary:active {
            background: var(--mmr-neutral);
            color: var(--mmr-yellow-600);
            border: 2px solid var(--mmr-yellow-600);
            box-sizing: border-box;
        }

        .btn.btn-yellow-secondary:disabled {
            background: var(--mmr-neutral);
            color: var(--mmr-yellow-200);
            border: 2px solid var(--mmr-yellow-200);
            box-sizing: border-box;
        }

        .btn.btn-yellow-secondary:focus {
            background: var(--mmr-neutral);
            box-shadow: 0px 0px 5px var(--mmr-yellow-300);
            color: var(--mmr-yellow-400);
            border: 2px solid var(--mmr-yellow-400);
            box-sizing: border-box;
        }
    /* || LARGE WHITE BUTTONS*/
    .btn.btn-white-primary {
        background: var(--mmr-neutral);
        color: var(--mmr-neutral-500);
        border: 1px solid var(--mmr-neutral-500);
        box-sizing: border-box;
    }

        .btn.btn-white-primary.transparent {
            background: transparent !important;
        }

        .btn.btn-white-primary:hover {
            box-shadow: 0px 0px 3px var(--mmr-yellow-300);
        }

        .btn.btn-white-primary:active {
            color: var(--mmr-neutral-600);
            border: 2px solid var(--mmr-yellow-500);
        }

        .btn.btn-white-primary:disabled {
            background: var(--mmr-neutral-75);
            color: var(--mmr-neutral-200);
            border: 2px solid var(--mmr-neutral-200);
        }

        .btn.btn-white-primary:focus {
            background: var(--mmr-neutral);
            border: 1px solid var(--mmr-neutral-600);
        }


        .btn.btn-maroon-primary.btn-large,
        .btn.btn-yellow-primary.btn-large,
        .btn.btn-maroon-secondary.btn-large,
        .btn.btn-yellow-secondary.btn-large {
            min-height: 35px;
            padding: 8px 24px;
        }

        /* || MEDIUM PRIMARY BUTTONS*/
        .btn.btn-maroon-primary.btn-medium,
        .btn.btn-yellow-primary.btn-medium,
        .btn.btn-maroon-secondary.btn-medium,
        .btn.btn-yellow-secondary.btn-medium {
            min-height: 32px;
            padding: 8px 20px;
        }

        /* || SMALL PRIMARY BUTTONS*/
        .btn.btn-maroon-primary.btn-small,
        .btn.btn-yellow-primary.btn-small,
        .btn.btn-maroon-secondary.btn-small,
        .btn.btn-yellow-secondary.btn-small {
            min-height: 22px;
            padding: 0px 10px;
        }




/* || BREADCRUMS*/
.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .breadcrumb.mmr-breadcrumb {
        background-color: transparent;
        padding: .5rem 0rem 0rem 0rem;
    }

        .breadcrumb.mmr-breadcrumb a {
            color: var(--mmr-red-500);
            text-decoration: underline;
            font-size: 16px;
            font-weight: 500;
            padding-top: 3px;
            display: inline-block;
            vertical-align: top;
        }

        .breadcrumb.mmr-breadcrumb .breadcrumb-item i.mmr-breadcrumb-chevron {
            padding-right: 3px;
            color: var(--mmr-yellow-500);
        }

.breadcrumb-item +
.breadcrumb-item.mmr-breadcrumb-item::before {
    content: none;
}

.breadcrumb-item + .breadcrumb-item {
    /*margin-bottom: 24px;*/
}

.mmr-breadcrumb li.mmr-breadcrumb-item:last-child a {
    color: var(--mmr-neutral-400);
    text-decoration: none;
    padding-left: 0.2rem;
}

.mmr-breadcrumb-item {
    display: flex;
    align-items: center;
}


/* || LOADING*/
.loader {
    position: fixed;
    z-index: 1031;
    top: 50%;
    left: 50%;
    color: var(--mmr-yellow-400);
}

.loader-custom {
    position: absolute;
    z-index: 1031;
    top: 50%;
    left: 50%;
    color: var(--mmr-yellow-400);
}

.loaderRecords {
    z-index: 1031;
    top: 50%;
    left: 50%;
    color: var(--mmr-yellow-400);
}

.filter-blur-loader {
    filter: opacity(0.5);
    pointer-events: none
}

/* || DISPLAY*/
.noshow {
    display: none !important;
}



label {
    font-weight: 500;
}
/* ||INPUT*/
input {
    background: var(--mmr-neutral);
    border: 1px solid var(--mmr-neutral-200);
    box-sizing: border-box;
    border-radius: 4px;
}

    input:focus,
    textarea:focus {
        background: var(--mmr-neutral);
        border: 1px solid var(--mmr-yellow-300);
        box-sizing: border-box;
        border-radius: 6px;
        outline: none;
    }

    input:focus-within {
        background: var(--mmr-neutral);
    }

    input:hover {
        background: var(--mmr-neutral);
        border: 1px solid var(--mmr-neutral-200);
        box-sizing: border-box;
        box-shadow: 0px 0px 15px rgba(80, 80, 80, 0.15);
        border-radius: 4px;
    }

    input:disabled,
    select:disabled,
    input:read-only,
    textarea:disabled {
        background: var(--mmr-neutral-75);
        border: 1px solid var(--mmr-neutral-100);
        box-sizing: border-box;
        border-radius: 4px;
    }

    input.input-default,
    span.select2-search.select2-search--dropdown {
        color: var(--mmr-neutral-400);
        padding: 10px;
        height: 36px;
    }

        input.input-default.input-grid {
            height: 22px;
        }

        input.input-default.invalid-value,
        input.input-default.error,
        input.input-default:invalid,
        input.input-default.input-validation-error,
        input.form-control.input-validation-error,
        select.form-control.input-validation-error,
        select.input-default.mmr-default-select.input-validation-error,
        textarea.input-validation-error,
        .input-validation-error .select2-selection,
        .input-validation-error + .select2-container .select2-selection {
            border: 1px solid var(--mmr-danger-500);
            background-image: url(../images/Notifications/icon-alert-triangle-red.svg);
            background-repeat: no-repeat;
            background-position: 97%, 50%;
            padding-right: 50px;
        }


input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    cursor: pointer;
    display: block;
    width: 10px;
    height: 10px;
    color: var(--mmr-neutral-400);
    text-align: center;
    position: relative;
    background: url(../images/General/ModuleIcons/icon-filter-table.svg) 98% 50% no-repeat scroll var(--mmr-neutral);
    background-size: 15px;
    padding: 1px;
    opacity: 1;
    margin-top: 5px;
}

input.small-xs {
    padding: 4px 4px 5px 5px;
    width: 41px;
    height: 22px;
    background: var(--mmr-neutral);
    border: 1px solid var(--mmr-neutral-200);
    box-sizing: border-box;
    border-radius: 4px;
}

input[type="checkbox"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    background: var(--mmr-neutral);
    height: 16px;
    width: 16px;
    border: 1px solid var(--mmr-neutral-200);
    border-radius: 2px;
    margin: 0px 10px;
}

    input[type="checkbox"]:checked {
        background: var(--mmr-yellow-500);
        border-color: var(--mmr-yellow-500);
    }

    input[type="checkbox"]:disabled {
        background: var(--mmr-neutral-75);
        border: 1px solid var(--mmr-neutral-100);
        box-sizing: border-box;
        border-radius: 2px;
        opacity: 0.6;
        pointer-events: none;
    }

    input[type="checkbox"]:after {
        content: '';
        position: relative;
        display: none;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid var(--mmr-neutral);
        border-width: 0 1px 1px 0;
        -webkit-transform: rotate( 45deg );
        -ms-transform: rotate(45deg);
        transform: rotate( 45deg );
    }

    input[type="checkbox"]:checked:after {
        display: block;
    }

    input[type="checkbox"]:disabled:after {
        border-color: var(--mmr-neutral-400);
    }


/* 
    OTHER OPTIONS MENU used for tables etc.
    
    The container <div> - needed to position the dropdown content 


    Example
    <div class="mmr-options-container">
                                <div class="mmr-options-content">
                                    <div class="p-2 caption regular mmr-default-border-top menu-grid mmr-option">
                                        <img class="mmr-regular-icon-size mr-2" src="/images/General/icon-edit.svg"><span>Bill Vendor Invoice</span>
                                    </div>
                                    <div class="p-2 caption regular mmr-default-border-top menu-grid mmr-option">
                                        <img class="mmr-regular-icon-size mr-2" src="/images/General/icon-no-billing.svg"><span>Set Not Billable</span>
                                    </div>
                                    <div class="p-2 caption regular mmr-default-border-top menu-grid mmr-option">
                                        <i class="far fa-comment-alt mr-2" style="font-size: 16px; vertical-align: top;"></i><span>Modify Comment</span>
                                    </div>
        </div><img src="/images/General/icon-more-vertical.svg" alt="More options" class="mmr-options-btn">
    </div>
*/
.mmr-options-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
/* Dropdown Content (Hidden by Default) */
.mmr-options-content {
    display: none;
    position: absolute;
    width: max-content;
    z-index: 5;
    background: var(--mmr-neutral);
    border-radius: 8px;
}

    /* Links inside the dropdown */
    .mmr-options-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
        /* Change color of dropdown links on hover */
        .mmr-options-content a:hover {
            background-color: #ddd;
        }

    .mmr-options-content .mmr-option:hover {
        background-color: var(--mmr-neutral-50);
    }
/* Show the dropdown menu on hover */
.mmr-options-container:hover .mmr-options-content {
    display: block;
    right: 100%;
    box-shadow: 0px 0px 15px rgba(80, 80, 80, 0.15);
    border-radius: 8px;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .mmr-options-btn {
    background-color: #3e8e41;
}

.mmr-options-container:hover .mmr-options-btn {
    filter: invert(8%) sepia(41%) saturate(2528%) hue-rotate(322deg) brightness(96%) contrast(99%);
}

.mmr-option {
    padding: .8rem;
}

    .mmr-option.disabled {
        pointer-events: none;
        background-color: var(--mmr-neutral-75);
        color: var(--mmr-neutral-800) !important;
        cursor: none !important;
    }

/* ||POSITION*/
.center-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-to-side {
    justify-content: space-between;
}

.mmr-custom-div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*------ Active/Inactive Slider Switch ---------*/
.switch {
    position: relative;
    width: 55px;
    height: 20px;
    margin-bottom: 0px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mmr-neutral-200);
    color: #54565B;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--mmr-success-500);
    color: var(--mmr-success-800);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(35px);
    -ms-transform: translateX(35px);
    transform: translateX(35px);
}

/*------ ADDED CSS ---------*/

.on, .off {
    color: #534f4f;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px;
    font-weight: 900;
}

.on {
    display: none;
    color: var(--mmr-success-800);
    top: 9px;
    padding-left: 15px;
    padding-top: 2px;
}

.off {
    left: auto;
    right: -15px;
    top: 9px;
    padding-top: 2px;
    color: var(--mmr-neutral-700);
}

input:checked + .slider .on {
    display: block;
}

input:checked + .slider .off {
    display: none;
}

.warning-pill {
    color: var(--mmr-warning-600);
    background-color: var(--mmr-warning-100);
    border: 1px solid var(--mmr-warning-600);
}

.inactive-pill {
    color: var(--mmr-neutral-400);
    background-color: var(--mmr-neutral-100);
    border: 1px solid var(--mmr-neutral-400);
}

.success-pill {
    color: #00A53A;
    background-color: #CCF5DB;
    border: 1px solid #00A53A;
}

.error-pill {
    color: #CC101D;
    background-color: #FFD0D3;
    border: 1px solid #CC101D;
}

.info-pill {
    color: var(--mmr-info-600);
    background-color: var(--mmr-info-100);
    border: 1px solid var(--mmr-info-600);
}

.success-pill-rounded {
    color: var(--mmr-success-600);
    background-color: var(--mmr-success-100);
    border-radius: 12px;
    border: none;
}

/* Rounded sliders */

.slider.round {
    border-radius: 17px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/*------ Slider Switch  End---------*/

/* Small Slider Switch*/
.switch-sm {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    margin: 0;
}

    .switch-sm input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider-sm {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider-sm:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 2.3px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider-sm {
    background-color: var(--mmr-success-500);
    color: var(--mmr-success-800);
}

input:focus + .slider-sm {
    box-shadow: 0 0 1px var(--mmr-success);
}

input:checked + .slider-sm:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

/* Rounded sliders */
.slider-sm.round {
    border-radius: 34px;
}

    .slider-sm.round:before {
        border-radius: 50%;
    }



.drawing-small-Image {
    width: 100%;
}

/* || ERROR*/
.field-validation-error::before {
    content: url("../images/General/icon-alert-circle.svg");
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: 0%, 50%;
    text-indent: 5px;
    padding-inline-end: 5px;
}

.field-validation-error,
label.error {
    color: #FF1424;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0em;
    text-align: left;
}

.validation-message::before {
    content: url("../images/General/icon-alert-circle.svg");
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: 0%, 50%;
    text-indent: 5px;
    padding-inline-end: 5px;
}

.validation-message,
label.error {
    color: #FF1424;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0em;
    text-align: left;
}

.rz-switch.rz-switch-checked .rz-switch-circle:before {
    background: white !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--mmr-success-500) !important;
}

input[type="radio"].mmr-radio:checked {
    background: #F8C700;
    border-color: #F8C700;
}

input[type="radio"].mmr-radio {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    appearance: none;
    outline: 0;
    background: #fff;
    height: 15px;
    width: 15px;
    border: 1px solid #BBBBBD;
    border-radius: 2px;
}

input[type="radio"].mmr-radio:checked:after {
    display: block;
}

.valid.modified:not([type=checkbox]) {
    outline: none!important;
}

input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    top: -3px !important;
    left: -1px !important;
    position: relative;
    background-color: #F7C4B4;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 3px solid #BD5636;
    border-radius: 20px !important;
}
.custom-slot-button {
    position: absolute;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    right: 2px;
    top: 2px;
}