:root {
    --shirikisho-green: #209920;
    --shirikisho-green-light: #37ba0f;
    --shirikisho-green-tint: #ffffff;
    --shirikisho-green-dark: #66001A;

    --apex-mustard: #ecae00;
    --apex-mustard-light: #f8dd95;
    --apex-mustard-dark: #D59D00;

    --apex-gray: #41436a;
    --apex-gray-light: #BABBD3;
    --apex-gray-dark: #3B3D60;

    --apex-red: #e02c62;
    --apex-red-light: #F6BBCD;
    --apex-red-dark: #CA2859;
}

/* Scroll to top */
.scrolltop {
    background-color: var(--shirikisho-green);
    color: var(--shirikisho-green-tint);
}

.scrolltop:hover {
    background-color: var(--shirikisho-green-tint);
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active>.page-link {
    background-color: var(--shirikisho-green);
}

.svg-icon.svg-icon-primary svg g [fill] {
    fill: var(--shirikisho-green-tint) !important;
}

.symbol.symbol-light-primary .symbol-label {
    background-color: var(--shirikisho-green);
    color: var(--shirikisho-green-tint);
}

.symbol.symbol-light-success .symbol-label {
    background-color: var(--shirikisho-green);
    color: var(--shirikisho-green-tint);
}

#symbol#symbol-light-success#symbol-label {
    background-color: #3de397;
}

/* Buttons custom CSS */
.btn.btn-primary {
    background-color: var(--shirikisho-green);
    border-color: var(--shirikisho-green);
    color: var(--shirikisho-green-tint);
}

.btn.btn-primary i {
    color: var(--shirikisho-green-tint);
}

.aside-menu .menu-nav>.menu-item.menu-item-open>.menu-heading .menu-icon,
.aside-menu .menu-nav>.menu-item.menu-item-open>.menu-link .menu-icon {
    color: var(--apex-mustard);
    /* color: var(--shirikisho-green); */
}

.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-heading .menu-icon,
.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link .menu-icon {
    color: var(--apex-mustard);
    /* color: var(--shirikisho-green); */
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-heading .menu-icon,
.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-link .menu-icon {
    color: var(--apex-mustard);
    /* color: var(--shirikisho-green); */
}

.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-heading .menu-icon,
.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link .menu-icon {
    color: var(--apex-mustard);
    /* color: var(--shirikisho-green); */
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-heading .menu-icon,
.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link .menu-icon {
    color: var(--apex-mustard);
    /* color: var(--shirikisho-green); */
}

.nav.nav-pills .show>.nav-link,
.nav.nav-pills .nav-link.active {
    background-color: var(--shirikisho-green);
    color: var(--shirikisho-green-tint);
}

.nav .show>.nav-link,
.nav .nav-link:hover:not(.disabled),
.nav .nav-link.active {
    color: var(--shirikisho-green);
    /* color: var(--shirikisho-green-tint); */
}

.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line .nav-link.active,
.nav.nav-tabs.nav-tabs-line .show>.nav-link {
    background-color: transparent;
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-bottom: 1px solid #800020;
    transition: color 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}

.a {
    color: var(--apex-gray);
}

.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: var(--shirikisho-green-tint);
    border-color: var(--shirikisho-green-tint);
}

.btn.btn-primary:not(:disabled):not(.disabled):active:not(.btn-text),
.btn.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn.btn-primary.dropdown-toggle,
.show .btn.btn-primary.btn-dropdown {
    color: #fff;
    background-color: var(--shirikisho-green-tint);
    border-color: var(--shirikisho-green-tint);
}

.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary.focus:not(.btn-text) {
    color: #fff;
    background-color: var(--apex-mustard);
    border-color: var(--apex-mustard);
}

.btn.btn-light-primary {
    background-color: var(--apex-gray);
    color: #fff;
}

.btn.btn-light-primary i,
.btn.btn-light-primary.dropdown-toggle:after {
    color: #fff;
}

.btn.btn-light-primary i:hover,
.btn.btn-light-primary.dropdown-toggle:after:hover {
    color: #fff;
}

.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-primary:active:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-primary:focus:not(.btn-text) {
    background-color: var(--apex-mustard);
    color: #41436a;
    /* color: #3F4254; */
}

.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-primary:active:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-primary:focus:not(.btn-text) i {
    background-color: var(--apex-mustard);
    color: #41436a;
    /* color: #3F4254; */
}

.btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-hover-primary:focus:not(.btn-text),
.btn.btn-hover-primary.focus:not(.btn-text) {
    color: #fff !important;
    background-color: var(--shirikisho-green-tint) !important;
    border-color: var(--shirikisho-green-tint) !important;
}

.text-brown.icon-brown {
    color: #800020;
}

/* Select 2 specific */
.select2-container {
    width: 100% !important;
}

.select2-search--inline {
    display: contents;
    /*this will make the container disappear, making the child the one who sets the width of the element*/
}

.select2-search__field:placeholder-shown {
    width: 100% !important;
    /*makes the placeholder to be 100% of the width while there are no options selected*/
}

/* Custom Background Colors */
.bg-mustard {
    background-color: var(--apex-mustard) !important;
}

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

.symbol.symbol-mustard-light .symbol-label {
    background-color: var(--apex-mustard-light) !important;
    color: var(--apex-mustard);
}

.svg-icon.svg-icon-mustard svg g [fill] {
    transition: fill 0.3s ease;
    fill: var(--apex-mustard-dark) !important;
}

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

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

.symbol.symbol-blue-light .symbol-label {
    background-color: var(--shirikisho-green-light) !important;
    color: var(--shirikisho-green);
}

.svg-icon.svg-icon-blue svg g [fill] {
    transition: fill 0.3s ease;
    fill: var(--shirikisho-green-dark) !important;
}

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

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

.symbol.symbol-indigo-light .symbol-label {
    background-color: var(--apex-gray-light) !important;
    color: var(--apex-gray);
}

.svg-icon.svg-icon-indigo svg g [fill] {
    transition: fill 0.3s ease;
    fill: var(--apex-gray-dark) !important;
}

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

.symbol.symbol-fuschia-light .symbol-label {
    background-color: var(--apex-red-light) !important;
    color: var(--apex-red);
}

.svg-icon.svg-icon-fuschia svg g [fill] {
    transition: fill 0.3s ease;
    fill: var(--apex-red-dark) !important;
}


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

.tooltip {
    pointer-events: none;
}


/* Auth Layout */
.login.login-4 .login-aside {
    background: white !important;
    width: 55% !important;
}

.text-brown {
    color: var(--shirikisho-green-light);
}

.text-brown:hover {
    color: var(--shirikisho-green-dark);
}