/* ----------------------------- */
/* color theme */
/* ----------------------------- */


/* main color theme : blue */
.theme-l5 {color:var(--black-theme-color) !important; background-color:#f4fafb !important}
.theme-l4 {color:var(--black-theme-color) !important; background-color:var(--blue-theme-l4-color) !important}
.theme-l3 {color:var(--black-theme-color) !important; background-color:#b5dbe3 !important}
.theme-l2 {color:var(--black-theme-color) !important; background-color:#8fc9d6 !important}
.theme-l1 {color:var(--white-theme-color) !important; background-color:#6ab7c8 !important}
.theme-d1 {color:var(--white-theme-color) !important; background-color:#3e94a8 !important}
.theme-d2 {color:var(--white-theme-color) !important; background-color:#378495 !important}
.theme-d3 {color:var(--white-theme-color) !important; background-color:#307382 !important}
.theme-d4 {color:var(--white-theme-color) !important; background-color:#296370 !important}
.theme-d5 {color:var(--white-theme-color) !important; background-color:#22525d !important}

.theme-light {color:var(--black-theme-color) !important; background-color:#f4fafb !important}
.theme-dark {color:var(--white-theme-color) !important; background-color:#22525d !important}
.theme-action {color:var(--white-theme-color) !important; background-color:#22525d !important}

.theme {color:var(--white-theme-color) !important; background-color:var(--blue-theme-color) !important}
.text-theme {color:#22525d !important}
.text-theme-blue {color: var(--blue-theme-color);}
.border-theme-blue {border-color:var(--blue-theme-color) !important}

.hover-theme:hover {color:var(--white-theme-color) !important; background-color:var(--blue-theme-color) !important}
.hover-text-theme:hover {color:#22525d !important}
.hover-border-theme:hover {border-color:var(--blue-theme-color) !important}

/* color theme : red */
.theme-red {color:var(--white-theme-color) !important; background-color:#c94637 !important}
.theme-red-l4 {color:151515 !important; background-color:var(--red-theme-l4-color) !important}
.text-theme-red {color:#c94637 !important}
.border-theme-red {border-color:#c94637 !important}

.hover-theme-red:hover {color:var(--white-theme-color) !important; background-color:#c94637 !important}
.hover-text-theme-red:hover {color:#c94637 !important}
.hover-border-theme-red:hover {border-color:#c94637 !important}

/* color theme : orange */
.theme-orange {color:var(--white-theme-color) !important; background-color:var(--orange-theme-color) !important}
.theme-orange-l4 {color:151515 !important; background-color:var(--orange-theme-l4-color) !important}
.theme-orange-l3 {color:151515 !important; background-color:var(--orange-theme-l3-color) !important}
.text-theme-orange {color:var(--orange-theme-color) !important}
.border-theme-orange {border-color:var(--orange-theme-color) !important}

.hover-theme-orange:hover {color:var(--white-theme-color) !important; background-color:var(--orange-theme-color) !important}
.hover-text-theme-orange:hover {color:var(--orange-theme-color) !important}
.hover-border-theme-orange:hover {border-color:var(--orange-theme-color) !important}

/* color theme : grey */
.theme-grey {color:var(--white-theme-color) !important; background-color:var(--grey-theme-color) !important}
.text-theme-grey {color:var(--grey-theme-color) !important}
.border-theme-grey {border-color:var(--grey-theme-color) !important}

.hover-theme-grey:hover {color:var(--white-theme-color) !important; background-color:var(--grey-theme-color) !important}
.hover-text-theme-grey:hover {color:var(--grey-theme-color) !important}
.hover-border-theme-grey:hover {border-color:var(--grey-theme-color) !important}

/* color theme : green */
.theme-green {color:var(--white-theme-color) !important; background-color:var(--green-theme-color) !important}
.text-theme-green {color:var(--green-theme-color) !important}
.border-theme-green {border-color:var(--green-theme-color) !important}

.hover-theme-green:hover {color:var(--white-theme-color) !important; background-color:var(--green-theme-color) !important}
.hover-text-theme-green:hover {color:var(--green-theme-color) !important}
.hover-border-theme-green:hover {border-color:var(--green-theme-color) !important}