/* colors */
    :root {
        --color-primary: #ff4b4b;
        --color-primary-2: #fffbfb;
        --color-primary-5: #fff6f6;
        --color-primary-10: #ffeded;
        --color-primary-20: #ffdbdb;
        --color-primary-30: #ffc9c9;
        --color-primary-40: #ffb7b7;
        --color-primary-50: #ffa5a5;
        --color-primary-60: #ff9393;
        --color-primary-80: #ff6f6f;
        --color-primary-90: #ff5d5d;
        --color-primary-200: #bf3838;
        --color-primary-300: #802626;
        --color-success: #46a200;
        --color-success-2: #fbfdfa;
        --color-success-5: #f6faf2;
        --color-success-10: #edf6e6;
        --color-success-20: #daeccc;
        --color-success-30: #c8e3b3;
        --color-success-40: #b5da99;
        --color-success-50: #a3d180;
        --color-success-60: #90c766;
        --color-success-80: #6bb533;
        --color-success-90: #59ab1a;
        --color-success-200: #357a00;
        --color-success-300: #235100;
        --color-warn: #ffaa00;
        --color-warn-2: #fffdfa;
        --color-warn-5: #fffbf2;
        --color-warn-10: #fff7e6;
        --color-warn-20: #ffeecc;
        --color-warn-30: #ffe6b3;
        --color-warn-40: #ffdd99;
        --color-warn-50: #ffd580;
        --color-warn-60: #ffcc66;
        --color-warn-80: #ffbb33;
        --color-warn-90: #ffb31a;
        --color-warn-200: #bf8000;
        --color-warn-300: #805500;
        --color-danger: red;
        --color-danger-2: snow;
        --color-danger-5: #fff2f2;
        --color-danger-10: #ffe6e6;
        --color-danger-20: #ffcccc;
        --color-danger-30: #ffb3b3;
        --color-danger-40: #ff9999;
        --color-danger-50: #ff8080;
        --color-danger-60: #ff6666;
        --color-danger-80: #ff3333;
        --color-danger-90: #ff1a1a;
        --color-danger-200: #bf0000;
        --color-danger-300: maroon;
        --color-dark: #222222;
        --color-dark-2: #fbfbfb;
        --color-dark-5: #f4f4f4;
        --color-dark-10: #e9e9e9;
        --color-dark-20: lightgray;
        --color-dark-30: #bdbdbd;
        --color-dark-40: #a7a7a7;
        --color-dark-50: #919191;
        --color-dark-60: #7a7a7a;
        --color-dark-80: #4e4e4e;
        --color-dark-90: #383838;
        --color-dark-200: #1a1a1a;
        --color-dark-300: #111111;
        --color-light: white;
        --color-light-2: white;
        --color-light-5: white;
        --color-light-10: white;
        --color-light-20: white;
        --color-light-30: white;
        --color-light-40: white;
        --color-light-50: white;
        --color-light-60: white;
        --color-light-80: white;
        --color-light-90: white;
        --color-light-200: #bfbfbf;
        --color-light-300: gray;
    }

    body {
        letter-spacing: 0;
    }

    .card {
        opacity: 0.8;
    }

    .card:hover {
        opacity: 1;
    }

    .table > thead > tr > th {
        text-transform: none;
    }

    .no-border {
        border: none;
    }

    .btn {
        appearance: auto;
        text-rendering: auto;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: normal;
        text-transform: none;
        text-indent: 0;
        text-shadow: none;
        text-align: center;
        cursor: default;
        box-sizing: border-box;
        margin: 0;
        padding-block: 1px;
        padding-inline: 6px;
        border-image: initial;
        align-items: center !important;
        position: relative;
        background: none;
        border: solid 1px #333 !important;
        color: #333 !important;
        padding: 4px 12px;
        border-radius: 4px;
        transition: all .1s ease-out;
        font: inherit;
        font-size: 14.3467px;
    }

    .btn-primary {
        background: none !important;
        color: #333 !important;
        border: solid 1px #333 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        padding: 4px 12px !important;
    }

    .btn-info {
        background: none !important;
        color: #333 !important;
        border: solid 1px #333 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        padding: 4px 12px !important;
    }

    .btn-primary-client {
        background: black;
        color: white !important;
    }

    .btn-primary-client:hover {
        background: red;
        border-color: red !important;
    }

    .btn-primary:hover {
        color: red !important;
    }

    .btn-info:hover {
        color: red !important;
    }

    .btn-warning {
        background: none !important;
        color: #333 !important;
        border: solid 1px #333 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        padding: 4px 12px !important;
    }

    .btn-warning:hover {
        color: red !important;
    }

    /* c-button */
    .c-button {
        border-radius: 4px;
        padding: 8px 12px;
        line-height: 1em;
        text-decoration: none;
        height: 100%;
    }

    .c-button:hover {
        cursor: pointer;
    }

    .c-button--primary {
        border: 1px solid var(--color-dark);
        background-color: var(--color-dark);
        color: var(--color-light);
    }

    .c-button--primary:hover {
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }

    .c-button--secondary {
        border: 1px solid var(--color-dark);
    }

    .c-button--secondary:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-light);
    }

    .button_type_1 {
        align-items: center;
    }

    .button__icon {
        margin-right: 12px;
        padding-right: 8px;
        border-right: solid 1px rgba(51, 51, 51, .1);
    }

    .btn-max {
        background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
        border: 0 !important;
        border-radius: .375rem;
        box-sizing: content-box;
        height: 30px !important;
        opacity: var(--bs-btn-close-opacity);
        width: 30px !important;
    }

    .custom-table .table th {
        background: #E0E0E0 !important;
    }

    #search_Bar:placeholder-shown {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #search_Bar {
        background-image: url('/images/clients/docufiller/feather/search.svg');
        background-repeat: no-repeat;
        background-position: left 12px center;
        background-size: 12px;
        border: solid 1px rgba(51, 51, 51, .3);
        border-radius: 32px;
        width: 100%;
        height: 32px;
        padding: 0 16px 0 32px;
    }

    .card-header h2 {
        color: #333333;
    }

    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fffc;
        cursor: default;
    }

    #model-header-title {
        color: #ff4b4b;
    }

    .simple-tab .nav-tabs .nav-link.active {
        color: #333333;
    }

    .table > thead > tr > th {
        color: #333333;
    }

    .nav-tabs li a {
        color: #333333 !important;
    }

    .nav-tabs li a.disabled {
        color: #E0E0E0 !important;
    }

    .nav-link {
        font-weight: 400 !important;
    }

    .nav-link.active {
        font-weight: 600 !important;
    }

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

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

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

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

    #env-bar {
        top: 54px;
    }

    #ddluser:hover {
        color: #fffc;
    }

    #ddluser {
        background-color: #F3141D;
    }

    .vertical .sidebar-wrapper {
        top: 0;
        height: 100% !important;
    }

    .sidebar-wrapper {
        top: 0;
    }

    .modal-content .modal-footer button.btn {
        padding: 4px 12px !important;
    }

    .list-group-item {
        font-size: 13px;
        color: #888ea8;
        letter-spacing: 1px;
        font-weight: bold;
    }

    .widget .widget-content {
        padding: 0 10px 10px !important;
    }

    .widget .widget-heading h5 {
        font-size: 16px !important;
    }

    .widget .badge{
        font-size: 10px;
    }