:root {
    --color-primary-50: #f1f5ff;
    --color-primary-100: #e6edff;
    --color-primary-200: #d0ddff;
    --color-primary-300: #aabfff;
    --color-primary-400: #7a95ff;
    --color-primary-500: #445fff;
    --color-primary-600: #1e32ff;
    --color-primary-700: #0c20f5;
    --color-primary-800: #0a1bcd;
    --color-primary-900: #0a17a8;
    --color-primary-950: #020c54; /* Default */

    --color-secondary-50: #fafaec;
    --color-secondary-100: #f5f4cc;
    --color-secondary-200: #ebe89d;
    --color-secondary-300: #e0d664;
    --color-secondary-400: #d5c23a;
    --color-secondary-500: #c6ac2c;
    --color-secondary-600: #b69326; /* Default */
    --color-secondary-700: #886620;
    --color-secondary-800: #725221;
    --color-secondary-900: #624521;
    --color-secondary-950: #382410;

    --color-special-50: #f6f6f7;
    --color-special-100: #eef0f1; 
    --color-special-200: #e0e3e5;
    --color-special-300: #ccd1d5;
    --color-special-400: #b6bdc3;
    --color-special-500: #a3a8b1;
    --color-special-600: #888d99; /* Default */
    --color-special-700: #7a7e88;
    --color-special-800: #64686f;
    --color-special-900: #53555c;
    --color-special-950: #313235;

    --color-gray-50: #f8f8f8;
    --color-gray-100: #e9e9e9; /* Default */
    --color-gray-200: #dcdcdc;
    --color-gray-300: #bdbdbd;
    --color-gray-400: #989898;
    --color-gray-500: #7c7c7c;
    --color-gray-600: #656565;
    --color-gray-700: #525252;
    --color-gray-800: #464646;
    --color-gray-900: #3d3d3d;
    --color-gray-950: #292929;
}

aside > a, aside > a > img {
    outline: 0 !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
}

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

.rapidAction {
    border-bottom: 1px solid #efefef;
    background: #fff;
    box-shadow: 1px 2px 9px 0px #0000000a;
}

.rapidAction > a, .rapidAction > [role] a {
    border-right: 1px solid #efefef;
}

.rapidAction > div:not([role]) {
    border-right: 1px solid #efefef;
}

/** RapidAction Rounded **/
.rapidAction.rounded {
    border: 1px solid #efefef;
    background: #ffffff;
    box-shadow: 1px 2px 9px 0px #0000000a;
}

.rapidAction.rounded > div:not([role]) {
    border-right: 0px;
}

.rapidAction.rounded > a, 
.rapidAction.rounded > [role] a, 
.rapidAction.rounded > .dropdown,
.rapidAction.rounded > div > .dropdown,
.rapidAction.rounded > [role] > div > .dropdown,
.rapidAction.rounded > div > form > button,
.rapidAction.rounded > [role] > div > form > button,
.rapidAction.rounded > div > form:not(.pill) > input[type="submit"],
.rapidAction.rounded > [role] > div > form > input[type="submit"],
.rapidAction.rounded > .dropdown > .dropdown-menu > li > a  {
    background: var(--color-primary-50);
    color: var(--color-primary-900) !important;
}

.rapidAction.rounded > a:hover, 
.rapidAction.rounded > [role] a:hover, 
.rapidAction.rounded > .dropdown:hover,
.rapidAction.rounded > div > .dropdown:hover,
.rapidAction.rounded > [role] > div > .dropdown:hover,
.rapidAction.rounded > div > form > button:hover,
.rapidAction.rounded > [role] > div > form > button:hover,
.rapidAction.rounded > div > form > input[type="submit"]:hover,
.rapidAction.rounded > [role] > div > form > input[type="submit"]:hover,
.rapidAction.rounded > .dropdown > .dropdown-menu > li > a:hover {
    background: var(--color-primary-950);
    color: var(--color-primary-300) !important;
}

.rapidAction.rounded > div > .dropdown > .dropdown-menu, .rapidAction.rounded > .dropdown > .dropdown-menu {
    background: #ffffff;
    border: 1px solid #ececec !important;
}

.rapidAction.rounded > div > .dropdown > .dropdown-menu > li, .rapidAction.rounded > .dropdown > .dropdown-menu > li {
    color: #808080;
}

/** Colors **/

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

.dark\:text-blue-950 {
    color: var(--color-primary-950) !important;
}

.dark\:hover\:bg-gray-800:hover {
    background-color: var(--color-primary-950) !important;
}

.dark\:text-blue-950:hover {
    color: #fff !important;
}

.dark\:divide-gray-700 > :not([hidden])~ :not([hidden]) {
    border-color: lightgray !important;
}

header {
    background-color: color-mix(in srgb, var(--color-primary-50) 50%, transparent);
    border-bottom: 1px solid var(--color-primary-50);
}

header > h1 {
    color: var(--color-primary-950);
}

header > p {
    color: var(--color-special-600);
}

header > .header-actions > a, header > .header-actions > button, header > .header-actions > div > a, header > .header-actions > div > button {
    background: var(--color-primary-100);
    color: var(--color-primary-950);
    box-shadow: 0px 0px 0px 0px color-mix(in srgb, var(--color-primary-50) 100%, transparent);
}

header > .header-actions > a:hover, header > .header-actions > button:hover, header > .header-actions > div > a:hover, header > .header-actions > div > button:hover {
    box-shadow: 0px 0px 0px 10px color-mix(in srgb, var(--color-primary-50) 100%, transparent);
}

/** Sidebar **/
aside nav > h1 {
    color: var(--color-primary-950);
}

.mp-navitem > div {
    box-shadow: 0px 0px 10px 0px #020c5414;
}

.mp-navitem > div > a:hover {
    background: var(--color-primary-100) !important;
    color: var(--color-primary-950) !important;
}

aside nav > a:hover, aside nav > div:hover{
    background: var(--color-primary-100) !important;
    color: var(--color-primary-950) !important;
}

aside nav > div[x-data]:after {
    color: var(--color-primary-900);
}

aside nav > div[x-data]:hover:after {
    right: 15px;
}

aside nav > a.logout {
    color: #dd0f0f !important;
}

aside nav > a.logout:hover {
    background: #ff02020d !important;
    color: #dd0f0f !important;
}

/** badge **/
span.badge {
    background: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
    color: var(--color-primary-50);
}

span.badge.yellow {
    background: #e8d5bc;
    color: #af7e13;
}

span.badge.green {
    background: #b9e0bf;
    color: #558863;
}

span.badge.red {
    background: #ffc6c6;
    color: #db2828;
}

span.badge.cyan {
    background: #bfeaf0;
    color: #2099ae;
}

span.badge.blue {
    background: #a0bfff;
    color: #174dff;
}

span.badge.ice {
    background: #b9cfe0;
    color: #557188;
}

span.badge.grey {
    background: #e5e5e5;
    color: #585858;
}

span.badge.rose {
    background: #ffd9eb;
    color: #ff539f;
}

span.badge.purple {
    background: #e3b0ff;
    color: #b046e2;
}

/* Modal */
.modal-content {
    border: 0px !important;
}


.modal-header {
    background: var(--color-primary-950) !important;
}

.modal-header > h3 {
    color: var(--color-primary-50) !important;
}

.modal-header > h3 > a {
    background: var(--color-primary-500);
    color: var(--color-primary-100);
}

.modal-footer > button {
    --bg-color: var(--color-primary-100);
    background: var(--bg-color) !important;
    border: 1px solid var(--bg-color) !important;
    color: var(--color-primary-950) !important;
}

.modal-body label {
    color: var(--color-primary-900);
}

.modal-body p {
    color: #5f5f5f;
}

.modal-footer > form > button, .modal-footer > form > input[type="submit"] {
    background: #b61111;
    border: 0px solid #b61111 !important;
    color: #ffd8d8 !important;
}

.modal-body > form > div > div > button:not(.text-red-500) {
    background: var(--color-primary-950);
    border: 0px;
}

.modal-body > form > div > div > button:not(.text-red-500):hover {
    background: var(--color-primary-900);
}


/** PROCSS List Button **/
.procss__list-button > li, .procss__list-button > span {
    border-bottom: 1px solid #ebebeb;
}

.procss__list-button > span {
    background-image: url(../../icons/lock__48x48.png);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 97% center;
    background-blend-mode: overlay;
}

.procss__list-button > li:hover {
    border-color: var(--color-primary-100) !important;
}

.procss__list-button > li:last-child {
    border-bottom: 0px !important;
}

.procss__list-button > li > a {
    box-shadow: 0px 0px 0px 0px transparent !important;
    background: #ffffff !important;
}

.procss__list-button > li > a:hover {
    background-color: var(--color-primary-100) !important;
    border-color: var(--color-primary-200) !important;
}

.procss__list-button > li > a > p {
    opacity: 0.5;
}

/** Search box **/
.search-box > div {
    background-color: var(--color-primary-50) !important;
}

.search-box > div input, .search-box > div select {
    border: 0px !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
    background-color: #e7edfb !important;
    color: var(--color-primary-950);
}

.search-box > div select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
}

/** dl list **/
.dl-list dt {
    color: var(--color-primary-900);
}

.dl-list > dl > div > dd {
    color: var(--color-primary-950);
}

.dl-list > dl > div {
    border: 0px;
}

.dl-list > dl > div > form > button, .dl-list > dl > div > dd > form > button[type="submit"] {
    border: 0px !important;
    background: var(--color-primary-900) !important;
    color: #fff !important;
}

.dl-list > dl > div > form > button:hover, .dl-list > dl > div > dd > form > button[type="submit"]:hover {
    background: var(--color-primary-950) !important;
}

.dl-list > dl > div > dd > ul > li > form > button.btn.btn-danger {
    background: #f7caca;
    color: #d44747;
    border: 0px;
}

/** Title boxed **/
.title-boxed {
    background: var(--color-primary-100);
}

.title-boxed > h3 {
    color: var(--color-primary-950);
}

/** Any Buttons **/
.btn.transparent {
    background: transparent !important;
}

.procss_button {
    border: 0px !important;
    background: var(--color-primary-100) !important;
    color: var(--color-primary-900) !important;
}

/** Widget Box **/
.widget-box {
    background-color: var(--color-primary-50);
}

.widget-box > h1 {
    color: var(--color-primary-950);
}

.widget-box > .widget-box-content > h1 {
    color: var(--color-primary-950);
}

.widget-box > .widget-box-content > p {
    color: var(--color-special-600);
}

.widget-box > .widget-box-content > span {
    color: var(--color-primary-500);
}

/** Navigation page table **/
nav[role="navigation"] > div > div > p {
    color: var(--color-primary-900);
}

nav[role="navigation"] > div > div > p > span {
    background: var(--color-primary-100);
}

/** Select per page **/
label[for="per-page"] {
    color: var(--color-special-600);
    font-size: 12px;
    font-weight: 300;
}

select#per-page, select#transaction_per_page {
    border: 1px solid var(--color-primary-100);
    background: var(--color-primary-50);
    color: var(--color-primary-950);
    box-shadow: 0px 0px 0px 0px transparent !important;
}

/** Widget Page Title **/
.widget-title {
    color: var(--color-primary-950);
}

.widget-title::before {
    background: var(--color-primary-100);
    background: -moz-linear-gradient(90deg, var(--color-primary-300) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(90deg, var(--color-primary-300) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, var(--color-primary-300) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--color-primary-300),endColorstr=var(--color-primary-300),GradientType=1);
    opacity: 0.2;
}

.widget-title > div a {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
}

/** Calendar **/
.fc .fc-toolbar-title {
    color: var(--color-primary-950);
}

.fc .fc-toolbar-title:after {
    background: var(--color-primary-100);
    background: -moz-linear-gradient(90deg, var(--color-primary-300) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(90deg, var(--color-primary-300) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, var(--color-primary-300) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--color-primary-300),endColorstr=var(--color-primary-300),GradientType=1);
    opacity: 0.2;
}

.fc-theme-standard td, .fc-theme-standard th {
    border: 0px;
}

.fc .fc-scrollgrid-liquid {
    border: 0;
}

.fc-theme-standard .fc-scrollgrid {
    border: 0px;
}

.fc .fc-daygrid-day-frame {
    background: var(--color-primary-50);
}

td.fc-day-past.fc-day-other .fc-daygrid-day-frame {
    opacity: 0.5;
}

.fc-daygrid-day.fc-day-today {
    background-color: transparent !important;
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    background: color-mix(in srgb, var(--color-primary-50) 10%, transparent 100%);
    box-shadow: 0px 0px 0px 2px var(--color-primary-900);
}

.fc .fc-daygrid-day-number {
    background: var(--color-primary-300);
    color: var(--color-primary-950);
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-frame .fc-daygrid-day-number {
    background: var(--color-primary-900);
    color: var(--color-primary-50);
}

.fc .fc-col-header-cell-cushion {
    background: var(--color-primary-950);
    border: 1px solid var(--color-primary-950);
    color: #ffffff;
}

.fc-button {
    background: #4f4f4f !important;
    border: 1px solid #4f4f4f !important;
}

.fc-button:hover {
    background: #454545 !important;
    border: 1px solid #454545 !important;
}

.fc-button:focus {
    background: #5d5d5d !important;
    border: 1px solid #5d5d5d !important;
}

.fc-button:active {
    background-color: #5d5d5d !important;
    border-color: #5d5d5d !important;
}

.fc-button:hover {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, #181818 100%, transparent 40%) !important;
}

.fc-button-group > .fc-button:hover {
    box-shadow: 0px 0px 0px 0px transparent !important;
}

.fc .fc-scrollgrid-section-sticky > * {
    background: #00000042;
    backdrop-filter: blur(3px);
}

.fc-h-event {
    background: #2ad2ff2e;
    backdrop-filter: blur(3px);
    border: 1px solid #2ad2ff2b;
}

.fc-daygrid-event-harness a:after {
    box-shadow: inset 0px 0px 4px 8px #020c54;
}

.fc-daygrid-event-harness a:hover:after{
    box-shadow: inset 0px 0px 4px 8px #0d6efd;
}

.fc .fc-button {
    background: var(--color-primary-100) !important;
    border: 0px !important;
    color: var(--color-primary-950) !important;
    box-shadow: 0px 0px 0px 0px color-mix(in srgb, var(--color-primary-50) 50%, transparent);
}

.fc .fc-button-primary:disabled {
    color: var(--color-primary-900);
}

.fc .fc-button:hover {
    box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--color-primary-50) 50%, transparent) !important;
}

.fc .fc-highlight {
    background: var(--color-primary-200);
}

/** ProCSS Buttons **/
.btn.procss-button {
    background: var(--color-primary-200) !important;
    color: var(--color-primary-900) !important;
}

.btn.procss-button:hover {
    box-shadow: 0px 0px 0px 5px var(--color-primary-100) !important;
}

/** ProCSS Group Files **/
.procss-group-files {
    background: var(--color-primary-50);
}

.procss-group-files > label {
    color: var(--color-primary-900);
}

.procss-group-files > svg.abs-icon {
    color: var(--color-primary-100);
}

.procss-group-files {
    background: var(--color-primary-50);
}

/** Pill **/
.pill {
    background: var(--color-primary-950);
    color: var(--color-primary-100);
}

.pill > input[type="submit"] {
    background: transparent !important;
    color: var(--color-primary-100) !important;
}

.pill.green {
    background: #269155 !important;
    color: #e0ffe8 !important;
}

.pill.green > input[type="submit"] {
    color: #e0ffe8 !important;
}

.pill.red {
    background: #cf0101 !important;
    color: #ffeaea !important;
}

.pill.red > input[type="submit"] {
    color: #ffeaea !important;
}

.pill.cyan {
    background: #02535d !important;
    color: #00fff8 !important;
}

.pill.cyan > input[type="submit"] {
    color: #00fff8 !important;
}

.pill.purple {
    background: #5d023e !important;
    color: #ffc2eb !important;
}

.pill.purple > input[type="submit"] {
    color: #ffc2eb !important;
}

.pill.yellow {
    background: #5d3a02 !important;
    color: #ffd55c !important;
}

.pill.yellow > input[type="submit"] {
    color: #ffd55c !important;
}

.pill.grey {
    background: #eaeaea !important;
    color: #6f6f6f !important;
}

.pill.grey > input[type="submit"] {
    color: #6f6f6f !important;
}

/** File uplaoder **/
.procss__input-file {
    outline: 0 !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
    background: #e6edffa3 !important;
    border: 1px dashed #d0ddff !important;
    color: var(--color-primary-900) !important;
}

/** ProCSS Button Group **/
.procss__button-group > label {
    background: #020c54 !important;
    color: var(--color-primary-300);
}

.procss__button-group {
    border: 1px solid #020c54 !important;
}

.procss__button-group > *:not(label):first-child {
    border: 0px !important;
}

.procss__button-group > *:not(label) {
    border-left: 1px solid var(--color-gray-100) !important;
}

/** ProCSS Form Input **/
.procss__form-input div > label {
    color: var(--color-primary-900);
}

.procss__form-input div > label > span {
    color: #f22e2e;
}

.procss__form-input div > input:not(.tt-search-box-input), .procss__form-input div > .tt-search-box-input-container, .procss__form-input div > select, .procss__form-input div > textarea {
    background: #f3f3f3;
    box-shadow: 0px 0px 0px 0px transparent !important;
    border: 0px !important;
    outline-color: var(--color-primary-900);
}

.procss__form-input div > .tt-search-box-input-container > div > svg {
    opacity: 0.3;
}

.procss__form-input .parsley-errors-list li {
    background: #ff14140a;
    color: #ff5555;
}

.procss__form-input .form-check > div > label {
    color: var(--color-primary-950);
}

.procss__form-input div > input[type="checkbox"]:not(.tt-search-box-input), .procss__form-input div > input[type="radio"]:not(.tt-search-box-input) {
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3 !important;
}

.procss__form-input div > input[type="checkbox"]:not(.tt-search-box-input):checked, .procss__form-input div > input[type="radio"]:not(.tt-search-box-input):checked {
    background-color: var(--color-primary-950);
    border: 1px solid var(--color-primary-950) !important;
}

.procss__form-input div > input[type="checkbox"]:not(.tt-search-box-input)::before, .procss__form-input div > input[type="radio"]:not(.tt-search-box-input):before {
    opacity: 0;
}

.procss__form-input div > input[type="checkbox"]:not(.tt-search-box-input):checked:before, .procss__form-input div > input[type="radio"]:not(.tt-search-box-input):checked:before {
    opacity: 1;
    color: var(--color-primary-300);
}

.procss__form-input div > .dropdown > button {
    background: #f3f3f3 !important;
    color: #000 !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
    border: 0px !important;
}

.procss__form-input div > .dropdown > .dropdown-menu {
    background: #ffffff;
    border: 1px solid #ececec;
}

.procss__form-input div > input[type="file"]:hover::after {
    background: var(--color-primary-200);
    color: var(--color-primary-500);
}

.procss__form-input div .tt-search-box-result-list-container {
    box-shadow: 0px 0px 0px 0px transparent;
    border: 1px solid #e5e5e5;
}

.procss__form-input div .tt-search-box-result-list-container > div {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
}

.procss__form-input div .tt-search-box-result-list-container > div > svg {
    fill: var(--color-primary-900) !important;
}

.procss__form-input div .tt-search-box-result-list-container > div > span > span {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

form > #products > div {
    background: #fff;
    border: 1px solid #f1f1f1 !important;
}

form > #products > div > button {
    background: #f7c8c8;
    color: #ef2525 !important;
}

/** Form **/
form.container > h4.h4 {
    background: var(--color-primary-100);
    color: var(--color-primary-900);
}

button[type="submit"]#submit-btn, .container > form > button {
    color: var(--color-primary-200) !important;
    border:0px !important;
}

button[type="submit"]#submit-btn > svg, .container > form > button > svg {
    color: var(--color-primary-300);
    background: var(--color-primary-900);
}

button[type="submit"]#submit-btn:hover > svg, .container > form > button:hover > svg {
    color: var(--color-primary-200);
    background: var(--color-primary-800);
}

/** ProCSS Item List **/
.procss__item-list {
    background: var(--color-primary-50);
}

.procss__item-list > div > span {
    color: var(--color-primary-900);
}

.procss__item-list > div > .form-check label.form-check-label {
    color: var(--color-primary-950);
}

.procss__item-list > div > .form-check .form-check-input {
    background-color: var(--color-primary-200);
    border: 0px;
    outline:0 !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
}

.procss__item-list > div > .form-check .form-check-input:checked {
    background-color:var(--color-primary-950);
}

.procss__item-list > div > div > a {
    background: var(--color-primary-950) !important;
    color: var(--color-primary-200) !important;
}

/** Widget Modal **/
.widget-modal > div > div > h5 {
    color: var(--color-primary-950);
}

.widget-modal > div > div > a {
    background: var(--color-primary-950);
    color: var(--color-primary-200) !important;
}

.procss__item-list > div > a.btn {
    background: var(--color-primary-950);
    color: var(--color-primary-300);
}

.procss__item-list input[type="number"] {
    background: #ffffff;
    border: 1px solid var(--color-primary-100);
    color: var(--color-primary-900);
}

.procss__item-list label {
    color: var(--color-primary-900);
}

/** Widget status **/
.widget-status {
    background: #ffffff !important;
    border: 1px solid #eeeeee;
    box-shadow: 0px 0px 10px 0px #f7f7f7;
}

.widget-status > .widget-status-body > .counter {
    color: var(--color-primary-800);
}

/** FileList **/
ul.fileList[role="list"] > h2 {
    background: var(--color-primary-950);
    color: var(--color-primary-300);
}

ul.fileList[role="list"] > li {
    background: var(--color-primary-50);
}

ul.fileList[role="list"] > li > div > div > span {
    color: var(--color-primary-950);
}

ul.fileList[role="list"] > li > div > div > a, ul.fileList[role="list"] > li > div > div > form:not(:has(> input[type="file"])) {
    background: var(--color-primary-950);
    color: var(--color-primary-300);
}

ul.fileList[role="list"] > li > div > div > form:not(:has(> input[type="file"])) > button {
    color: var(--color-primary-300) !important;
    background: inherit !important;
}


ul.fileList[role="list"] > li > div > div > form > input[type="file"] {
    background-color: var(--color-primary-100);
    border: 0px !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
    color: var(--color-primary-900);
}

ul.fileList[role="list"] > li > div > div > form > input[type="file"]:after {
    background: var(--color-primary-300);
    opacity: 0;
}

ul.fileList[role="list"] > li > div > div > form > input[type="file"]:hover:after {
    opacity: 1;
}

ul.fileList[role="list"] > li > div > div > form > input[type="submit"], ul.fileList[role="list"] > li > div > div > form > button, ul.fileList[role="list"] > li > div > div > form > a {
    background-color: var(--color-primary-950);
    color: var(--color-primary-300);
}

/** User Sidebar **/
a.profile {
    color: var(--color-primary-950) !important;
    background: #f8f8f8;
}

a.profile > span {
    color: var(--color-primary-950) !important;
}

/** Widget Tag **/
.widget-tag > span {
    border: 0px !important;
    background: var(--color-primary-100) !important;
    color: var(--color-primary-900) !important;
}

.widget-tag > span > i {
    background: var(--color-primary-200) !important;
}

.widget-tag > span.bg-success > i {
    background: #c7e6ca !important;
}

.widget-tag > span.bg-success {
    background: #dcf1de !important;
    color: #6b9b77 !important;
}

/** Button list **/
.button-list > a {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
}

.button-list > a > i {
    background: var(--color-primary-900);
    color: var(--color-primary-200);
}

/** Table **/
table tbody > tr > td > a:not(> button) {
    background: var(--color-primary-950);
    color: var(--color-primary-200) !important;
}

td > .flex.overflow-hidden.bg-white.border.divide-x > a.btn-success {
    border: 0px !important;
    background: #257b4817;
    color: #4b835b;
}

td > form .procss__form-input div:has(input[type="file"]) > button {
    background-color: var(--color-primary-900);
    border: 0 !important;
    color: #fff;
}

td > a.btn.btn-light {
    background: var(--color-primary-100);
    color: var(--color-primary-900);
    border: 0px !important;
}

/** Question List **/
.question-list {
    border: 1px solid #dcdcdc;
    box-shadow: 0px 0px 10px 0px #00000012;
}

.question-list .question-list__header > h1 {
    background: var(--color-primary-950);
    color: var(--color-primary-100);
}

.question-list .question-list__body > h2 {
    color: var(--color-primary-900);
}

/** Widget Mega Card **/
.widget__mega-card {
    border: 2px solid #e9e9e9;
}

.widget__mega-card .widget__mega-card-content > div > h2 {
    color: var(--color-primary-900);
}

.widget__mega-card .widget__mega-card-content > div > p {
    color: #282828;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item {
    border-right: 1px solid #e5e5e5;
}

.widget__mega-card-items:has(.widget__mega-card-item:not([style*="display: none"]))  > .widget__mega-card-item:not([style*="display: none"]):last-of-type {
    border-right: 0 !important;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > div > .widget__mega-card-item-icon {
    background: var(--color-primary-200);
    color: var(--color-primary-900);
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > div > .widget__mega-card-item-icon.yellow {
    background: #ffe5d0;
    color: #a84a0a;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > div > .widget__mega-card-item-icon.red {
    background: #ffd0d0;
    color: #d60202;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > div > .widget__mega-card-item-icon.green {
    background: #bce8d4;
    color: #449161;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > div > .widget__mega-card-item-icon.purple {
    background: #d6bce8;
    color: #a41fb0;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > div > h2 {
    color: var(--color-primary-900);
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > p {
    color: var(--color-primary-950);
}

.widget__mega-card .widget__mega-card-content > * > .widget__mega-card-content-item > h2 {
    color: var(--color-primary-900);
}

.widget__mega-card .widget__mega-card-content > * > .widget__mega-card-content-item > ul > li {
    color: #737070;
}

.widget__mega-card .widget__mega-card-content > * > .widget__mega-card-content-item > ul > li > b {
    color: var(--color-primary-950);
}

.widget__mega-card .widget__mega-card-content > div > .widget__mega-card-image {
    box-shadow: inset 20px -20px 20px 6px #fff;
    background-size: cover;
}

.widget__mega-card .widget__mega-card-content > div > .widget__mega-card-image:before {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(38deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(38deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
    background: linear-gradient(38deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}

.widget__mega-card .widget__mega-card-content > div > .widget__mega-card-tips > span {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
}

.widget__mega-card .widget__mega-card-content > div > .widget__mega-card-tips > span > svg {
    background: var(--color-primary-500);
    color: var(--color-primary-100);
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > a {
    border: 0px !important;
    background: var(--color-primary-950);
    color: var(--color-primary-200) !important;
}

.widget__mega-card > .widget__mega-card-items > .widget__mega-card-item > a > i {
    background: var(--color-primary-900);
}

/** Template List **/
.template-list > span {
    color: var(--color-primary-900);
}

.template-list > button {
    background: transparent;
}

.template-list > button:hover {
    background: #ffeded;
}

.template-list > .dropdown > button {
    border: 0px;
    background: #fff !important;
    color: #8d8d8d !important;
}

/** Progress bar **/
.progressbar > .bar {
    background: #e0e0e0;
}

.progressbar > .bar:before {
    background: var(--progress-color, black);
}

.progressbar[percentage='0']  { --progress-color: #e0e0e0; }
.progressbar[percentage='25'] { --progress-color: #f9c1c1; }
.progressbar[percentage='50'] { --progress-color: #fbd782; }
.progressbar[percentage='75'] { --progress-color: #d9dfa4; }
.progressbar[percentage='100']{ --progress-color: #78c178; }

/** Select tab **/
td form > .form-group-inputs select {
    border: 1px solid #ffffff;
    box-shadow: 0px 0px 0px 0px transparent !important;
    outline: 0 !important;
}

td form > .form-group-inputs button[type="submit"] {
    background: var(--color-primary-200);
    color: var(--color-primary-950);
}

/** Cards **/
.widget-card > .card {
    border: 1px solid #e8e8e8 !important;
    box-shadow: 5px 3px 9px 0px #0000000d !important;
}

.widget-card > .card .card-title {
    color: var(--color-primary-900);
}

.widget-card > .card p.card-text {
    color: #939393;
}

.widget-card > .card .card-footer > button {
    background: var(--color-primary-950);
    border: 0px !important;
    color: var(--color-primary-200);
}

.widget-card > .card .card-footer > button:hover {
    background: var(--color-primary-900);
}

.widget-card > .card .card-body p.text-sm.text-muted > b {
    color: var(--color-primary-900);
}

/** Page link active **/
.active>.page-link, .page-link.active {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
    border: 0px !important;
}

/** Alert **/
div[role="alert"]:not(.invalid-feedback) {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    border-left: 0px !important;
}

div[role="alert"]:not(.invalid-feedback).bg-yellow-100, 
div[role="alert"]:not(.invalid-feedback).alert-warning {
    background: #f6f1e5;
    color: #886115;
}

div[role="alert"]:not(.invalid-feedback).bg-green-100, 
div[role="alert"]:not(.invalid-feedback).alert-success {
    background: #ddf0e4;
    color: #4b7f5e;
}

div[role="alert"]:not(.invalid-feedback).bg-red-100, 
div[role="alert"]:not(.invalid-feedback).alert-danger {
    background: #f0dddd;
    color: #c73030;
}

div[role="alert"]:not(.invalid-feedback):before {
    background: var(--color-primary-900);
}

div[role="alert"]:not(.invalid-feedback).bg-red-100:before, div[role="alert"]:not(.invalid-feedback).alert-danger:before {
    background: #c73030;
}

div[role="alert"]:not(.invalid-feedback).bg-yellow-100:before {
    background: #886115;
}

div[role="alert"]:not(.invalid-feedback).bg-green-100:before, div[role="alert"]:not(.invalid-feedback).alert-success:before {
    background: #4b7f5e;
}

.alert.alert-success {
    background: #e0efe2;
    border-color: #e0efe2;
}

.alert.alert-error {
    background: #efe0e0;
    border-color: #efe0e0;
    color: #ce3333;
}

.alert.alert-warning {
    background: #efebe0;
    border-color: #efebe0;
    color: #7e5f29;
}

/** Request buttons **/
.btnRequest {
    background: #ddf4e9 !important;
    border: 0px !important;
    color: #557d69 !important;
}

.btnRequest.blue {
    background: #c7e7f5 !important;
    color: #1676a0 !important;
}


.btnRequest.btn-outline-danger {
    background: #fddbdb !important;
    color: #da3434 !important;
}
/** Request container **/
.requestContainer > form {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0px 0px 10px 0px #8f8f8f24;
}

.requestContainer > form > h1 {
    color: var(--color-primary-900);
}

.requestContainer > form > textarea {
    outline: 0;
    box-shadow: 0px 0px 0px 0px transparent !important;
}

/** Answer Card **/
.anwser-card {
    border: 1px solid #e8e8e8;
    box-shadow: 0px 0px 10px 0px #b7b7b738;
}

.anwser-card > div > strong.mb-4 {
    color: var(--color-primary-900);
}

.anwser-card > div > .list-group > li > div.correct {
    background: #a3e1c2;
    color: #3b7e6f;
}

.anwser-card > div > .list-group > li {
    color: #939393;
}

/** Alert **/
.answerQuestion {
    border-left: 0px;
    border-right: 0;
    border-color: #ececec;
}

.answerQuestion > .card-header {
    border: 0px;
    background: #ffffff;
    border-bottom: 1px solid #ececec !important;
    color: var(--color-primary-900);
}

.answerQuestion > .card-header > .icon {
    border-right: 1px solid #ececec;
}

.answerQuestion > .card-body > textarea {
    border: 1px solid #e2e2e2 !important;
    box-shadow: 0px 0px 0px 0px transparent !important;
}

/** Widget checkbox **/
.widget-checkbox {
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0px 0px 0px 0px #eaeaea;
}

.widget-checkbox:has(> input[type="radio"]:checked) > * > h1, .widget-checkbox:has(> input[type="checkbox"]:checked) > * > h1 {
    color: var(--color-primary-900);
}

.widget-checkbox > * > p {
    color: #7c7c7c;
}

.widget-checkbox:has(> input[type="radio"]:checked), .widget-checkbox:has(> input[type="checkbox"]:checked) {
    --check-color: var(--color-primary-900);
    box-shadow: 0px 0px 0px 2px var(--check-color);
    border-color: var(--check-color);
}

.widget-checkbox > div:has(> svg) {
    background: var(--color-primary-100);
    color: var(--color-primary-900);
    filter: grayscale(1);
    opacity: 0.3;
}

.widget-checkbox:has(> input[type="radio"]:checked) > div:has(> svg) {
    filter: grayscale(0);
    opacity: 1;
}

.widget-checkbox.green > div:has(> svg) {
    background: #b4ecd0;
    color: #1c7151;
}

.widget-checkbox.green:has(> input[type="radio"]:checked), .widget-checkbox.green:has(> input[type="checkbox"]:checked) {
    --check-color: #7bc6a0;
}

.widget-checkbox.green:has(> input[type="radio"]:checked) > * > h1, .widget-checkbox.green:has(> input[type="checkbox"]:checked) > * > h1 {
    color: #1c7151;
}

.widget-checkbox.red > div:has(> svg) {
    background: #ffcfcf;
    color: #d63030;
}

.widget-checkbox.red:has(> input[type="radio"]:checked), .widget-checkbox.red:has(> input[type="checkbox"]:checked) {
    --check-color: #dfabab;
}

.widget-checkbox.red:has(> input[type="radio"]:checked) > * > h1, .widget-checkbox.red:has(> input[type="checkbox"]:checked) > * > h1 {
    color: #c91f1f;
}

.widget-checkbox.purple:has(> input[type="radio"]:checked), .widget-checkbox.purple:has(> input[type="checkbox"]:checked) {
    --check-color: #d4abdf;
}

.widget-checkbox.purple > div:has(> svg) {
    background: #f2cfff;
    color: #a817b6;
}

.widget-checkbox.purple:has(> input[type="radio"]:checked) > * > h1, .widget-checkbox.purple:has(> input[type="checkbox"]:checked) > * > h1 {
    color: #ad1fc9;
}

.widget-checkbox.cyan:has(> input[type="radio"]:checked), .widget-checkbox.cyan:has(> input[type="checkbox"]:checked) {
    --check-color: #abd4df;
}

.widget-checkbox.cyan > div:has(> svg) {
    background: #cce6ed;
    color: #49717b;
}

.widget-checkbox.cyan:has(> input[type="radio"]:checked) > * > h1, .widget-checkbox.cyan:has(> input[type="checkbox"]:checked) > * > h1 {
    color: #49717b;
}

.widget-checkbox.yellow:has(> input[type="radio"]:checked), .widget-checkbox.yellow:has(> input[type="checkbox"]:checked) {
    --check-color: #dfc8ab;
}

.widget-checkbox.yellow > div:has(> svg) {
    background: #e5d6c2;
    color: #a68d6e;
}

.widget-checkbox.yellow:has(> input[type="radio"]:checked) > * > h1, .widget-checkbox.yellow:has(> input[type="checkbox"]:checked) > * > h1 {
    color: #c6a880;
}

/** UL LIST 2 **/
ul.ul--list-pro > li > div > span {
    color: var(--color-primary-950);
}

ul.ul--list-pro > li > div > a {
    background: var(--color-primary-200);
    color: var(--color-primary-950);
}