:root {
    /* Font Family */
    --font: "Plus Jakarta Sans", sans-serif;

    /* ======== White Colors Variants */
    --white: #fff;
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-10: rgba(255, 255, 255, 0.1);

    /* ======== Black Colors Variants */
    --black: #000;
    --black-90: rgba(0, 0, 0, 0.9);
    --black-80: rgba(0, 0, 0, 0.8);
    --black-70: rgba(0, 0, 0, 0.7);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-10: rgba(0, 0, 0, 0.1);

    /* ======== Dark Colors */
    --dark: #1A2142;
    --dark-2: #2f3546;
    --dark-3: #090e34;
    --dark-4: #262d3f;

    /* ======== Gray Colors */
    --gray: #5d657b;
    --gray-2: #c2cbd6;
    --gray-3: #8F9AAD;

    /* ======== Sidebar Color */
    --sidebar-text: #9AA4CA;

    /* ======== Primary Color */
    --primary: #286491;

    /* ======== Secondary Color */
    --secondary: #00c1f8;

    /* ======== Success Colors */
    --success: #219653;
    --success-2: #10B981;
    --success-light: #42d29d;

    /* ======== Danger Colors */
    --danger: #d50100;
    --danger-2: #FB5454;
    --danger-light: #fa5a78;

    /* ======== Warning Color */
    --warning: #f7c800;

    /* ======== Info Color */
    --info: #97ca31;

    /* ======== Purple Color */
    --purple: #9b51e0;

    /* ======== Light Colors */
    --light: #efefef;
    --light-2: #e5e5e5;
    --light-3: #DFE5EF;

    /* ======== Active and Deactive Colors */
    --active: #365CF5;
    --deactive: #E9E9E9;

    /* ======== Orange Color */
    --orange: #f2994a;

    /* ======== Deep Blue Colors */
    --deep-blue: #345d9d;
    --blue-light: #49BEFF;

    /* ======== Miscellaneous Colors */
    --doc: #f98db4;
    --photo: #93cfe2;

    /* ======== Shadows */
    --shadow-one: 0px 5px 20px rgba(0, 0, 0, 0.1);
    --shadow-three: 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.20);


}