:root {
    --white: #fff;
    --black: #000;

    /* blue color */
    /* Brand Primary color */
    --blue-100: #e5f1f8;
    --blue-200: #cce3f2;
    --blue-300: #b3d5eb;
    --blue-400: #99c7e4;
    --blue-500: #66aad7;
    --blue-600: #338ec9;
    --blue-700: #0072bc;
    --blue-800: #004a7a;
    --blue-900: #002e4d;

    --brand-primary-100: var(--blue-100);
    --brand-primary-200: var(--blue-200);
    --brand-primary-300: var(--blue-300);
    --brand-primary-400: var(--blue-400);
    --brand-primary-500: var(--blue-500);
    --brand-primary-600: var(--blue-600);
    --brand-primary-700: var(--blue-700);
    --brand-primary-800: var(--blue-800);
    --brand-primary-900: var(--blue-900);

    /* Brand Secondary color */
    --brand-secondary-100: #fef4e8;
    --brand-secondary-200: #fdead2;
    --brand-secondary-300: #fddfbb;
    --brand-secondary-400: #fcd4a5;
    --brand-secondary-500: #fabf77;
    --brand-secondary-600: #f9a94a;
    --brand-secondary-700: #f7941d;
    --brand-secondary-800: #945911;
    --brand-secondary-900: #4a2c09;

    /* gray color */
    --gray-100: #FAFAFA;
    --gray-200: #f0f0f0;
    --gray-300: #d6d6d6;
    --gray-400: #c2c2c2;
    --gray-500: #adadad;
    --gray-600: #858585;
    --gray-700: #333333;
    --gray-800: #1f1f1f;
    --gray-900: #0f0f0f;

    /* red color */
    --red-100: #feeceb;
    --red-200: #fcdad7;
    --red-300: #fbc7c3;
    --red-400: #f9b4af;
    --red-500: #f68f88;
    --red-600: #f36960;
    --red-700: #f04438;
    --red-800: #902922;
    --red-900: #481411;

    --error-100: var(--red-100);
    --error-200: var(--red-200);
    --error-300: var(--red-300);
    --error-400: var(--red-400);
    --error-500: var(--red-500);
    --error-600: var(--red-600);
    --error-700: var(--red-700);
    --error-800: var(--red-800);
    --error-900: var(--red-900);

    /* yellow color */
    --yellow-100: #fff5e5;
    --yellow-200: #ffeacc;
    --yellow-300: #ffe0b2;
    --yellow-400: #ffd699;
    --yellow-500: #ffc166;
    --yellow-600: #ffad33;
    --yellow-700: #ff9800;
    --yellow-800: #c27400;
    --yellow-900: #754600;

    --warning-100: var(--yellow-100);
    --warning-200: var(--yellow-200);
    --warning-300: var(--yellow-300);
    --warning-400: var(--yellow-400);
    --warning-500: var(--yellow-500);
    --warning-600: var(--yellow-600);
    --warning-700: var(--yellow-700);
    --warning-800: var(--yellow-800);
    --warning-900: var(--yellow-900);

    /* green color */
    --green-100: #ddf7eb;
    --green-200: #c6f0dc;
    --green-300: #afe9ce;
    --green-400: #99e2c0;
    --green-500: #6cd3a3;
    --green-600: #3fc587;
    --green-700: #12b76a;
    --green-800: #0b6e40;
    --green-900: #085430;

    --success-100: var(--green-100);
    --success-200: var(--green-200);
    --success-300: var(--green-300);
    --success-400: var(--green-400);
    --success-500: var(--green-500);
    --success-600: var(--green-600);
    --success-700: var(--green-700);
    --success-800: var(--green-800);
    --success-900: var(--green-900);

    /* sky color */
    --sky-100: #ECF9FE;
    --sky-200: #D9F4FD;
    --sky-300: #C7EAFB;
    --sky-400: #B3E9FB;
    --sky-500: #8CDEF8;
    --sky-600: #66D3F6;
    --sky-700: #44C8F5;
    --sky-800: #44ABF5;
    --sky-900: #448EF5;

    /* primary blue */
	--primary-blue-color: #0072BC;
	--primary-blue-color-hover: #00538A;
	--primary-blue-disable-color: #B2D5EB;


	/* secondary blue */
	--secondary-blue-color: #E5F1F8;
	--secondary-blue-color-hover: #CCE3F2;
	--text-primary-blue-color: #0072BC;
	--secondary-blue-color-border-hover: #E5F1F8;

	/* secondary blue disable */
	--secondary-blue-disable-color: #E5F1F8;
	--text-secondary-blue-disable-color: #99C7E4;

	/* primary black*/
	--primary-black-color: #333;
	--primary-black-color-hover: #ADADAD;
	--primary-black-disable-color: #D6D6D6;


	/* secondary black */
	--secondary-black-color: #FFF;
	--secondary-black-color-hover: #FAFAFA;
	--secondary-black-color-border-hover: #D6D6D6;
	--text-secondary-black-color: #858585;

	/* secondary black disable */
	--secondary-black-disable-color: #D6D6D6;
	--text-secondary-black-disable-color: #FFF;



	/* danger color btn */
	--danger-color: #F04438;
	--danger-color-hover: #D04339;
	--danger-color-border-hover: #F68F88;


	/* cancel color */
	--cancel-color: #F0F0F0;
	--cancel-color-hover: #F0F0F0;
	--cancel-color-border-hover: #FAFAFA;



	/* select search bg and border */
	--select-bg-search: #F0F0F0;

	/* border-form */
	--border-form-color: #C2C2C2;



	/* color switch */
	--toggle-off-color: #F2F4F7;
	--toggle-on-color: #0072BC;
}

/*----------------- text blue / text brand primary ------------------*/
.text-blue-100, .text-brand-primary-100 {
    color: var(--blue-100);
}

.text-blue-200, .text-brand-primary-200 {
    color: var(--blue-200);
}

.text-blue-300, .text-brand-primary-300 {
    color: var(--blue-300);
}

.text-blue-400, .text-brand-primary-400 {
    color: var(--blue-400);
}

.text-blue-500, .text-brand-primary-500 {
    color: var(--blue-500);
}

.text-blue-600, .text-brand-primary-600 {
    color: var(--blue-600);
}

.text-blue-700, .text-brand-primary-700 {
    color: var(--blue-700);
}

.text-blue-800, .text-brand-primary-800 {
    color: var(--blue-800);
}

.text-blue-900, .text-brand-primary-900 {
    color: var(--blue-900);
}

/*----------------- text brand secondary ------------------*/
.text-brand-secondary-100 {
    color: var(--brand-secondary-100);
}
.text-brand-secondary-200 {
    color: var(--brand-secondary-200);
}
.text-brand-secondary-300 {
    color: var(--brand-secondary-300);
}
.text-brand-secondary-400 {
    color: var(--brand-secondary-400);
}
.text-brand-secondary-500 {
    color: var(--brand-secondary-500);
}
.text-brand-secondary-600 {
    color: var(--brand-secondary-600);
}
.text-brand-secondary-700 {
    color: var(--brand-secondary-700);
}
.text-brand-secondary-800 {
    color: var(--brand-secondary-800);
}
.text-brand-secondary-900 {
    color: var(--brand-secondary-900);
}

/*----------------- text gray ------------------*/
.text-gray-100 {
    color: var(--gray-100);
}

.text-gray-200 {
    color: var(--gray-200);
}

.text-gray-300 {
    color: var(--gray-300);
}

.text-gray-400 {
    color: var(--gray-400);
}

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

.text-gray-800 {
    color: var(--gray-800);
}

.text-gray-900 {
    color: var(--gray-900);
}

/*----------------- text red/ text-error ------------------*/
.text-red-100, .text-error-100 {
    color: var(--red-100);
}

.text-red-200, .text-error-200 {
    color: var(--red-200);
}

.text-red-300, .text-error-300 {
    color: var(--red-300);
}

.text-red-400, .text-error-400 {
    color: var(--red-400);
}

.text-red-500, .text-error-500 {
    color: var(--red-500);
}

.text-red-600 , .text-error-600 {
    color: var(--red-600) !important;
}

.text-red-700, .text-error-700 {
    color: var(--red-700) !important;
}

.text-red-800, .text-error-800 {
    color: var(--red-800);
}

.text-red-900, .text-error-900 {
    color: var(--red-900);
}

/* ----------------- text yellow/ text warning ---------------- */
.text-yellow-100, .text-warning-100 {
    color: var(--yellow-100);
}

.text-yellow-200, .text-warning-200 {
    color: var(--yellow-200);
}

.text-yellow-300, .text-warning-300 {
    color: var(--yellow-300);
}

.text-yellow-400, .text-warning-400 {
    color: var(--yellow-400);
}

.text-yellow-500, .text-warning-500 {
    color: var(--yellow-500);
}

.text-yellow-600, .text-warning-600 {
    color: var(--yellow-600);
}

.text-yellow-700, .text-warning-700 {
    color: var(--yellow-700);
}

.text-yellow-800, .text-warning-800 {
    color: var(--yellow-800);
}

.text-yellow-900, .text-warning-900 {
    color: var(--yellow-900);
}

/* ----------------- text green/ text-success ---------------- */
.text-green-100, .text-success-100 {
    color: var(--green-100);
}

.text-green-200, .text-success-200 {
    color: var(--green-200);
}

.text-green-300, .text-success-300 {
    color: var(--green-300);
}

.text-green-400, .text-success-400 {
    color: var(--green-400);
}

.text-green-500, .text-success-500 {
    color: var(--green-500);
}

.text-green-600, .text-success-600 {
    color: var(--green-600);
}

.text-green-700, .text-success-700 {
    color: var(--green-700);
}

.text-green-800, .text-success-800 {
    color: var(--green-800);
}

.text-green-900, .text-success-900 {
    color: var(--green-900);
}

/* ----------------- text sky ---------------- */
.text-sky-100 {
    color: var(--sky-100);
}
.text-sky-200 {
    color: var(--sky-200);
}
.text-sky-300 {
    color: var(--sky-300);
}
.text-sky-400 {
    color: var(--sky-400);
}
.text-sky-500 {
    color: var(--sky-500);
}
.text-sky-600 {
    color: var(--sky-600);
}
.text-sky-700 {
    color: var(--sky-700);
}
.text-sky-800 {
    color: var(--sky-800);
}
.text-sky-900 {
    color: var(--sky-900);
}
/*----------------- background blue / background brand primary ------------------*/
.bg-blue-100 {
    background-color: var(--blue-100);
}

.bg-blue-200 {
    background-color: var(--blue-200);
}

.bg-blue-300 {
    background-color: var(--blue-300);
}

.bg-blue-400 {
    background-color: var(--blue-400);
}

.bg-blue-500 {
    background-color: var(--blue-500);
}

.bg-blue-600 {
    background-color: var(--blue-600);
}

.bg-blue-700 {
    background-color: var(--blue-700);
}

.bg-blue-800 {
    background-color: var(--blue-800);
}

.bg-blue-900 {
    background-color: var(--blue-900);
}

/*----------------- background red / background error ------------------*/
.bg-red-100, .bg-error-100 {
    background-color: var(--red-100);
}
.bg-red-200, .bg-error-200 {
    background-color: var(--red-200);
}
.bg-red-300, .bg-error-300 {
    background-color: var(--red-300);
}
.bg-red-400, .bg-error-400 {
    background-color: var(--red-400);
}
.bg-red-500, .bg-error-500 {
    background-color: var(--red-500);
}
.bg-red-600, .bg-error-600 {
    background-color: var(--red-600);
}
.bg-red-700, .bg-error-700 {
    background-color: var(--red-700);
}
.bg-red-800, .bg-error-800 {
    background-color: var(--red-800);
}
.bg-red-900, .bg-error-900 {
    background-color: var(--red-900);
}

/*----------------- background sky ------------------*/
.bg-sky-100 {
    background-color: var(--sky-100);
}
.bg-sky-200 {
    background-color: var(--sky-200);
}
.bg-sky-300 {
    background-color: var(--sky-300);
}
.bg-sky-400 {
    background-color: var(--sky-400);
}
.bg-sky-500 {
    background-color: var(--sky-500);
}
.bg-sky-600 {
    background-color: var(--sky-600);
}
.bg-sky-700 {
    background-color: var(--sky-700);
}
.bg-sky-800 {
    background-color: var(--sky-800);
}
.bg-sky-900 {
    background-color: var(--sky-900);
}