:root {
    /* Base Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-blue: #008CFF;
    --color-light-blue: #B0C3CC;
    --color-light-blue-2: #B9CCDD;
    --color-light-gray: #F1F2F7;
    --color-gray: #5F5F5F;
    --color-dark-gray: #333333;
    --color-gray-2: #6c757d;
    --color-gray-3: #808080;
    --color-gray-4: #dee2e6;
    --color-gray-5: #f8f9fa;
    --color-gray-6: #e9ecef;
    --color-gray-7: #aaa;
    --color-gray-8: #212529;
    --color-green: #28a745;
    --color-red: #dc3545;
    --color-red-2: #EC5252;
    --color-pink: #ff5b61;

    /* Top Navbar */
    --topnavbar-text-color: var(--color-black);
    --topnavbar-background-color: var(--color-white);
    --topnavbar-border-color: var(--color-gray-3);
    --topnavbar-icon-color: var(--color-black);
    --topnavbar-notification-icon-color: var(--color-gray);
    --topnavbar-seperator-color: grey;

    /* Side Navbar */
    --sidenavbar-body-color: var(--color-light-gray);
    --sidenavbar-text-color: var(--color-gray);
    --sidenavbar-text-hover-color: var(--color-blue);
    --sidenavbar-hpver-background-color: rgb(0 140 255 / 5%);
    --sidenavbar-border-color: var(--color-blue);
    --sidenavbar-seperator-color: grey;

    /* Application Logo */
    --fill1-color: var(--color-light-gray);
    --fill2-color: var(--color-blue);
    --fill3-color: var(--color-light-blue-2);
    --fill4-color: var(--color-blue);
    --fill5-color: var(--color-blue);
    --fill1-top-nav-color: var(--color-white);

    /* Body */
    /* breadcrumb */
    --breadcrumb-text1-color: var(--color-black);
    --breadcrumb-text2-color: var(--color-blue);
    --breadcrumb-separator-color: var(--color-blue);
    /* content-top-border */
    --content-top-border-color: var(--color-blue);

    --body-background-color: var(--color-white);
    --main-background-color: var(--color-white);
    --main-background-color2: var(--color-light-gray);
    --main-text-color: var(--color-black);

    --body-card-bg: var(--color-white);
    --body-card-label-color: initial;
    --body-card-span-color: initial;
    --th-bg: initial;
    --th-color: var(--color-black);
    --td-bg: initial;
    --td-color: var(--color-black);

    /* Models */
    --modal-bg: var(--color-white);
    --modal-header-bg: var(--color-gray-5);
    --modal-text: var(--color-gray);
    --modal-border: var(--color-gray-4);
    --modal-btn-bg: var(--color-blue);
    --modal-btn-text: var(--color-blue);
    --modal-btn-text-hover: var(--color-white);
    --status-active: var(--color-green);
    --status-inactive: var(--color-red);
    --invert: 0;

    /* DataTables Paginate Menu */
    --dataTable-paginate-menu-bg-color: initial;
    --dataTable-paginate-menu-text-color: var(--color-black);
    --dataTable-paginate-menu-border-color: var(--color-gray);
    --dataTable-paginate-menu-label-color: var(--color-black);

    /* DataTables Search Box */
    --dataTable-search-input-bg-color: initial;
    --dataTable-search-input-text-color: var(--color-black);
    --dataTable-search-input-border-color: var(--color-gray);
    --dataTable-search-label-color: var(--color-black);
    --dataTable-search-placeholder-color: initial;

    /* Sweet Alert */
    --swal-bg-color: var(--color-white);
    --swal-text-color: var(--color-black);
    --swal-icon-success-color: var(--color-green);
    --swal-icon-error-color: var(--color-pink);
    --swal-border-color: #ddd;
    --swal-button-bg: #007bff;
    --swal-button-text: var(--color-white);
    --swal-button-border: var(--color-white);
    --swal-timer-progress-bar-color: grey;

    /* Nav Tabs */
    --nav-tabs-inactive-bg-color: initial;
    --nav-tabs-inactive-text-color: var(--color-black);
    --nav-tabs-inactive-border-color: initial;
    --nav-tabs-active-bg-color: var(--color-white);
    --nav-tabs-active-text-color: var(--color-black);

    /* Notifications */
    --notification-bg-color: var(--color-white);
    --notification-text-color: var(--color-dark-gray);
    --notification-border-color: #ddd;
    --notification-muted-text-color: var(--color-gray-2);
    --notification-dropdown-bg: var(--color-gray-5);
    --notification-unread-dropdown-bg: var(--color-light-gray);
    --notification-dropdown-hover-bg: var(--color-gray-6);
    --notification-icon-color: var(--color-light-blue);
    --notification-badge-color: var(--color-red-2);
    --notification-button-primary-bg: #007bff;
    --notification-button-primary-hover-bg: #0056b3;
    --notification-button-outline-text: var(--color-dark-gray);
    --notification-button-outline-border: var(--color-gray-7);
    --notification-button-outline-hover-bg: var(--color-gray-6);

    --permission-header-bg: var(--color-gray-5);
    --permission-header-color: var(--color-gray-2);
    --permission-card-bg-color: var(--color-gray-5);

    /* Profile */
    --profile-card-bg-color: var(--color-white);

    /* Form */
    --label-color: var(--color-gray);
    --input-bg-color: var(--color-white);
    --input-text-color: var(--color-gray);
    --input-border-color: var(--color-gray-4);
    --input-icon-color: var(--color-gray);
    --placeholder-color: var(--color-gray-2);

    .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    /* Documents Container */
    --bg-color: var(--color-gray-5);
    --text-color: var(--color-gray-8);
    --border-color: var(--color-gray-4);
    --btn-bg: var(--color-red);
    --btn-text: var(--color-white);

    /* Buttons */
    --btn-outline-primary: var(--color-blue);
    --btn-outline-bg-primary: var(--color-white);
    --btn-outline-border-primary: var(--color-blue);

    --btn-hover-outline-primary: var(--color-white);
    --btn-hover-outline-bg-primary: var(--color-blue);
    --btn-hover-outline-border-primary: var(--color-blue);

    /* Subscription meter */
    --gauge-axis-label-color: #4fc3f7;
    --gauge-axis-tick-color: #ff8a65;
    --gauge-label-color: #ff7043;
    --gauge-hand-fill: #81c784;
    --gauge-hand-stroke: #66bb6a;
    --gauge-range-0: var(--color-blue);
    --gauge-range-1: #eeeeee;
}