:root {
    --primary: #E85A10;
    --primary-secondary: #ff8442;
    --primary-lite: #ffe6d8;
    --red: #e61818;
    --blue: #0070c0;
    --black: #000000;
    --white: #ffffff;
    --gray: #e5e5e5;
    --sky-blue: #85a9df;
/*    --light: #fafafb;*/
    --light: #F6F4F1;
    --dark: #191C24;
    --dark-secondary: #484848;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------common css --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.li-remove {
    list-style: none;
}

.underline-remove {
    text-decoration: none;
}

.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.text-justify {
    text-align: justify !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------text color --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.primary-text {
    color: var(--primary) !important;
}

.primary-secondary-text {
    color: var(--primary-secondary) !important;
}

.primary-lite-text {
    color: var(--primary-lite) !important;
}

.black-text {
    color: var(--black) !important;
}

.dark-text {
    color: var(--dark) !important;
}

.dark-secondary-text {
    color: var(--dark-secondary) !important;
}

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

.green-text {
    color: var(--green) !important;
}

.blue-text {
    color: var(--blue) !important;
}

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

.white-text {
    color: var(--white) !important;
}

.sky-blue-text {
    color: var(--sky-blue) !important;
}
/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------border color --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.primary-outline {
    border: 1px solid var(--primary) !important;
}

.primary-secondary-outline{
    border:1px solid var(--primary-secondary) !important;
}

.primary-lite-outline{
    border:1px solid var(--primary-lite) !important;
}

.black-outline {
    border: 1px solid var(--black) !important;
}

.green-outline {
    border-color: var(--green) !important;
}

.blue-outline {
    border-color: var(--blue) !important;
}

.red-outline {
    border-color: var(--red) !important;
}

.gray-outline {
    border-color: var(--gray) !important;
}

.dark-outline {
    border-color: var(--dark) !important;
}

.dark-secondary-outline {
    border-color: var(--dark-secondary) !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------Background color --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.primary-bg {
    background-color: var(--primary) !important;
}

.primary-secondary-bg {
    background-color: var(--primary-secondary) !important;
}

.primary-lite-bg {
    background-color: var(--primary-lite) !important;
}

.gray-bg {
    background-color: var(--primary) !important;
}

.red-bg {
    background-color: var(--red) !important;
}

.dark-bg {
    background-color: var(--dark) !important;
}

.light-bg {
    background-color: var(--light) !important
}

.dark-secondary-bg {
    background-color: var(--dark-secondary) !important;
}

.gray-bg {
    background-color: var(--gray) !important;
}

.black-bg {
    background-color: var(--black) !important;
}

.white-bg {
    background-color: var(--white) !important;
}

.green-bg {
    background-color: var(--green) !important;
}

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

.sky-blue-bg {
    background-color: var(--sky-blue) !important;
}

.transparent-bg {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------font size --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-19 {
    font-size: 19px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-25 {
    font-size: 25px !important;
}

.fs-30 {
    font-size: 30px !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------Font weight --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}



/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------Radius --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.radius-3 {
    border-radius: 3px !important;
}

.radius-4 {
    border-radius: 4px !important;
}

.radius-5 {
    border-radius: 5px !important;
}

.radius-6 {
    border-radius: 6px !important;
}

.radius-7 {
    border-radius: 7px !important;
}

.radius-8 {
    border-radius: 8px !important;
}

.radius-9 {
    border-radius: 9px !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.radius-15 {
    border-radius: 15px !important;
}

.radius-20 {
    border-radius: 20px !important;
}

.radius-25 {
    border-radius: 25px !important;
}

.radius-30 {
    border-radius: 30px !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------Avatar css --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.avatar-xxs {
    height: 1rem;
    width: 1rem;
}

.avatar-xs {
    height: 2rem;
    width: 2rem;
}

.avatar-sm {
    height: 3rem;
    width: 3rem;
}

.avatar-md {
    height: 4.5rem;
    width: 4.5rem;
}

.avatar-lg {
    height: 6rem;
    width: 6rem;
}

.avatar-xl {
    height: 7.5rem;
    width: 7.5rem;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------Width --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

/* min */

.min-w-5 {
    min-width: 5% !important;
}

.min-w-10 {
    min-width: 10% !important;
}

.min-w-15 {
    min-width: 15% !important;
}

.min-w-20 {
    min-width: 20% !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------height color --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.h-45 {
    height: 45px !important;
}

.h-55 {
    height: 55px !important;
}

.h-70 {
    height: 70px !important;
}

/* --------------------------------------------------------------------------------------- */
/* ------------------------------------------margin color --------------------------------------- */
/* --------------------------------------------------------------------------------------- */

.mt-10 {
    margin-top: 10px !important;
}

.mt-11 {
    margin-top: 11px !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-13 {
    margin-top: 13px !important;
}

.mt-13 {
    margin-top: 13px !important;
}

.mt-14 {
    margin-top: 14px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}