:root{
    --theme-app-color-1: #001fff;
    --theme-app-color-2: #fa8f0b;
    --theme-app-color-3: #aa00f3;
    --theme-app-color-4: #47d808;
    --theme-app-color-5: #000000;
}


/* theme colors */
:root {
    --theme-app-color-1: #001fff;
    --theme-app-color-2: #fa8f0b;
    --theme-app-color-3: #aa00f3;
    --theme-app-color-4: #47d808;
    --theme-app-color-5: #000000;

    --theme-app-color-black: rgb(16 16 16);
    --theme-app-color-black-bg: rgb(16 16 16 / 10%);
    --theme-app-color-purple: rgb(113 52 234);
    --theme-app-color-purple-bg: rgb(113 52 234 / 10%);
    --theme-app-color-purple-bg2: rgb(113 52 234 / 12%);
    --theme-app-color-purple-bg3: rgb(113 52 234 / 30%);

    --theme-app-color-blue-jump: rgb(42 113 233);
    --theme-app-color-blue-jump-bg: rgb(42 113 233 / 10%);
    --theme-app-color-blue-jump-bg2: rgb(42 113 233 / 12%);
    --theme-app-color-blue-jump-bg3: rgb(42 113 233 / 30%);

    --theme-app-color-green-cm: rgb(22 141 91);
    --theme-app-color-green-cm-bg: rgb(22 141 91 / 10%);
    --theme-app-color-green-cm-bg2: rgb(22 141 91 / 12%);
    --theme-app-color-green-cm-bg3: rgb(22 141 91 / 30%);

    --theme-app-color-green: rgb(80 192 35);
    --theme-app-color-green-bg: rgb(80 192 35 / 10%);
    --theme-app-color-cane: rgb(122 207 33);
    --theme-app-color-cane-bg: rgb(122 207 33 / 10%); /* bg icon */
    --theme-app-color-cane-bg2: rgb(122 207 33 / 17%); /* menu */
    --theme-app-color-cane-bg3: rgb(122 207 33 / 30%); /* focus */
    --theme-app-color-blue: rgb(0 31 255);
    --theme-app-color-blue-bg: rgb(0 31 255 / 10%);
    --theme-app-color-organge: rgb(250 143 11);
    --theme-app-color-organge-bg: rgb(250 143 11 / 10%);
    --theme-app-color-red: rgb(207 33 43);
    --theme-app-color-red-bg: rgb(207 33 43 / 5%);
    --theme-app-color-red-bg2: rgb(207 33 43 / 10%);
    --theme-app-color-red-bg3: rgb(207 33 43 / 20%);
}

* {
    font-family: 'inter';
    /* font-family: montserrat; */
}

/* i.app-color-blue{color: var(--theme-app-color-blue);} */

.app-color-black{color: var(--theme-app-color-black)}
.app-color-purple{color: var(--theme-app-color-purple)}
.app-color-green{color: var(--theme-app-color-green)}
.app-color-blue{color: var(--theme-app-color-blue)}
.app-color-organge{color: var(--theme-app-color-organge)}

.app-color-cane{color: var(--theme-app-color-cane)}
.app-color-cane-bg{background: var(--theme-app-color-cane-bg)}
.app-color-cane-bg2{background: var(--theme-app-color-cane-bg2)}

.app-color-red{color: var(--theme-app-color-red)}
.app-color-red-bg{background: var(--theme-app-color-red-bg)}
.app-color-red-bg2{background: var(--theme-app-color-red-bg2)}
.app-color-red-bg3{background: var(--theme-app-color-red-bg3)}

.btn{font-size: 13px;color: #101010;padding: 10px 12px;border-radius: 8px;}
.btn-icon-left i{margin-right: 5px}
.btn-icon-right i{margin-right: 5px}

.btn.button-danger,
.btn.button-danger:focus{background: #ea3232;color: white;}
.btn.button-purple,
.btn.button-purple:focus{background: #7032ea;color: white;}
.btn.button-cane,
.btn.button-cane:focus{background: #7acf21;color: white;}
.btn.button-black,
.btn.button-black:focus{background: #202020;color: white;}
.btn.button-white,
.btn.button-white:focus{background: #ffffff;font-weight: 500;color: #101010;border: 1px solid #e0e5ec;font-weight: 600;}

[theme-color-cane] .btn.button-theme,
[theme-color-cane] .btn.button-theme:focus{background: var(--theme-app-color-cane); color: white;}
[theme-color-cane] .sidenav-menu .nav-link.active{background: var(--theme-app-color-cane-bg2)}
[theme-color-cane] .sidenav-menu .nav-link.active i{color: var(--theme-app-color-cane)}
[theme-color-cane] .sidenav-menu .nav-link.active svg{fill: var(--theme-app-color-cane);}
[theme-color-cane] .notify .toast-body .toast-icon.spinner-border{border: 3px solid var(--theme-app-color-cane);border-right-color: transparent; margin-right: 10px;}
[theme-color-cane] button.dt-paging-button.current{color: var(--theme-app-color-cane)}
[theme-color-cane] .app-color-theme{color: var(--theme-app-color-cane)}
[theme-color-cane] .app-color-theme-bg{background: var(--theme-app-color-cane-bg)}
[theme-color-cane] .dropdown-user .dropdown-user-details-name{color: var(--theme-app-color-cane)}
[theme-color-cane] input:focus, textarea:focus{box-shadow: 0 0 0 0.05rem var(--theme-app-color-cane-bg3);}
[theme-color-cane] select:focus{box-shadow: 0 0 0 0.1rem var(--theme-app-color-cane-bg3);}
[theme-color-cane] .nav-module-icon i{color: var(--theme-app-color-cane)}
[theme-color-cane] form h6{color: var(--theme-app-color-green-cm)}

[theme-color-purple] .btn.button-theme,
[theme-color-purple] .btn.button-theme:focus{background: var(--theme-app-color-purple); color: white;}
[theme-color-purple] .sidenav-menu .nav-link.active{background: var(--theme-app-color-purple-bg2);}
[theme-color-purple] .sidenav-menu .nav-link.active i{color: var(--theme-app-color-purple)}
[theme-color-purple] .sidenav-menu .nav-link.active svg{fill: var(--theme-app-color-purple);}
[theme-color-purple] .notify .toast-body .toast-icon.spinner-border{border: 3px solid var(--theme-app-color-purple);border-right-color: transparent; margin-right: 10px;}
[theme-color-purple] button.dt-paging-button.current{color: var(--theme-app-color-purple)}
[theme-color-purple] .app-color-theme{color: var(--theme-app-color-purple)}
[theme-color-purple] .app-color-theme-bg{background: var(--theme-app-color-purple-bg)}
[theme-color-purple] .dropdown-user .dropdown-user-details-name{color: var(--theme-app-color-purple)}
[theme-color-purple] input:focus, textarea:focus{box-shadow: 0 0 0 0.05rem var(--theme-app-color-purple-bg3);}
[theme-color-purple] select:focus{box-shadow: 0 0 0 0.1rem var(--theme-app-color-purple-bg3);}
[theme-color-purple] .nav-module-icon i{color: var(--theme-app-color-purple)}
[theme-color-purple] form h6{color: var(--theme-app-color-green-cm)}

[theme-color-red] .btn.button-theme,
[theme-color-red] .btn.button-theme:focus{background: var(--theme-app-color-red); color: white;}
[theme-color-red] .sidenav-menu .nav-link.active{background: var(--theme-app-color-red-bg2)}
[theme-color-red] .sidenav-menu .nav-link.active i{color: var(--theme-app-color-red)}
[theme-color-red] .sidenav-menu .nav-link.active svg{fill: var(--theme-app-color-red);}
[theme-color-red] .notify .toast-body .toast-icon.spinner-border{border: 3px solid var(--theme-app-color-red);border-right-color: transparent; margin-right: 10px;}
[theme-color-red] button.dt-paging-button.current{color: var(--theme-app-color-red)}
[theme-color-red] .app-color-theme{color: var(--theme-app-color-red)}
[theme-color-red] .app-color-theme-bg{background: var(--theme-app-color-red-bg)}
[theme-color-red] .dropdown-user .dropdown-user-details-name{color: var(--theme-app-color-red)}
[theme-color-red] input:focus, textarea:focus{box-shadow: 0 0 0 0.05rem var(--theme-app-color-red-bg3);}
[theme-color-red] select:focus{box-shadow: 0 0 0 0.1rem var(--theme-app-color-red-bg3);}
[theme-color-red] .nav-module-icon i{color: var(--theme-app-color-red)}
[theme-color-red] form h6{color: var(--theme-app-color-green-cm)}

[theme-color-blue-jump] .btn.button-theme,
[theme-color-blue-jump] .btn.button-theme:focus{background: var(--theme-app-color-blue-jump); color: white;}
[theme-color-blue-jump] .sidenav-menu .nav-link.active{background: var(--theme-app-color-blue-jump-bg2)}
[theme-color-blue-jump] .sidenav-menu .nav-link.active i{color: var(--theme-app-color-blue-jump)}
[theme-color-blue-jump] .sidenav-menu .nav-link.active svg{fill: var(--theme-app-color-blue-jump);}
[theme-color-blue-jump] .notify .toast-body .toast-icon.spinner-border{border: 3px solid var(--theme-app-color-blue-jump);border-right-color: transparent; margin-right: 10px;}
[theme-color-blue-jump] button.dt-paging-button.current{color: var(--theme-app-color-blue-jump)}
[theme-color-blue-jump] .app-color-theme{color: var(--theme-app-color-blue-jump)}
[theme-color-blue-jump] .app-color-theme-bg{background: var(--theme-app-color-blue-jump-bg)}
[theme-color-blue-jump] .dropdown-user .dropdown-user-details-name{color: var(--theme-app-color-blue-jump)}
[theme-color-blue-jump] input:focus, textarea:focus{box-shadow: 0 0 0 0.05rem var(--theme-app-color-blue-jump-bg3);}
[theme-color-blue-jump] select:focus{box-shadow: 0 0 0 0.1rem var(--theme-app-color-blue-jump-bg3);}
[theme-color-blue-jump] .nav-module-icon i{color: var(--theme-app-color-blue-jump)}
[theme-color-blue-jump] form h6{color: var(--theme-app-color-green-cm)}

[theme-color-green-cm] .btn.button-theme,
[theme-color-green-cm] .btn.button-theme:focus{background: var(--theme-app-color-green-cm);color: white;font-weight: 500;}
[theme-color-green-cm] .sidenav-menu .nav-link.active{background: var(--theme-app-color-green-cm-bg2)}
[theme-color-green-cm] .sidenav-menu .nav-link.active i{color: var(--theme-app-color-green-cm)}
[theme-color-green-cm] .sidenav-menu .nav-link.active svg{fill: var(--theme-app-color-green-cm);}
[theme-color-green-cm] .notify .toast-body .toast-icon.spinner-border{border: 3px solid var(--theme-app-color-green-cm);border-right-color: transparent; margin-right: 10px;}
[theme-color-green-cm] button.dt-paging-button.current{color: var(--theme-app-color-green-cm)}
[theme-color-green-cm] .app-color-theme{color: var(--theme-app-color-green-cm)}
[theme-color-green-cm] .app-color-theme-bg{background: var(--theme-app-color-green-cm-bg)}
[theme-color-green-cm] .dropdown-user .dropdown-user-details-name{color: var(--theme-app-color-green-cm)}
[theme-color-green-cm] input:focus, textarea:focus{box-shadow: 0 0 0 0.05rem var(--theme-app-color-green-cm-bg3);}
[theme-color-green-cm] select:focus{box-shadow: 0 0 0 0.1rem var(--theme-app-color-green-cm-bg3);}
[theme-color-green-cm] .nav-module-icon i{color: var(--theme-app-color-green-cm)}
[theme-color-green-cm] form h6{color: var(--theme-app-color-green-cm)}

form hr{opacity: .06;}