.theme-default {
    --main-color: #0aa9ff;
    --main-color-rgb: 10, 169, 255;
    --header-bg: #0aa9ff;
    --card-bg: #fff;
    --text-color: #fff;
    --selected-color: #0aa9ff;
    --special-color: #2f86f6;
}

.theme-green {
    --main-color: #54ab3c;
    --main-color-rgb: 84, 171, 60;
    --header-bg: #54ab3c;
    --card-bg: #fff;
    --text-color: #fff;
    --selected-color: #54ab3c;
    --special-color: #2f86f6;
}

.theme-orange {
    --main-color: #c05d20;
    --main-color-rgb: 192, 93, 32;
    --header-bg: #c05d20;
    --card-bg: #fff;
    --text-color: #fff;
    --selected-color: #c05d20;
    --special-color: #012cf9;
}

.theme-deepblue {
    --main-color: #165bad;
    --main-color-rgb: 22, 91, 173;
    --header-bg: #165bad;
    --card-bg: #fff;
    --text-color: #fff;
    --selected-color: #165bad;
    --special-color: #2f86f6;
}

.theme-dark {
    --main-color: #6f7b9e;
    --main-color-rgb: 111, 123, 158;
    --header-bg: #6f7b9e;
    --card-bg: #6f7b9e;
    --text-color: #fff;
    --selected-color: #6f7b9e;
    --special-color: #2f86f6;
}


body.theme-default .header-box {
    background: linear-gradient(180deg, #36afff, #1594f5);
    color: #333;
}

body.theme-default .header {
    background-image: linear-gradient(180deg, #36afff, #1594f5);
}

body.theme-default .tabs {
    background: none;
}

body.theme-default .layui-this {
    background-image: linear-gradient(180deg, #0f7cc9, #0a5c9e) !important;
    color: #fff;
}

body.theme-default .menu-item {
    background-image: linear-gradient(180deg, #36afff, #1594f5);
    border-left: 1px solid #7ec9f7;
    color: #fff;
    box-sizing: border-box;
}

body.theme-default .menu-item:hover,
body.theme-default .second-menu .custom-tab-title:hover {
    background: linear-gradient(180deg, #5cc0ff, #2ba6f7) !important;
    color: #fff;
}

body.theme-default .second-menu {
    background: #eef0f8;
    border-bottom: 1px solid #cdd4e5;
}

body.theme-default .second-menu .custom-tab-title.selected {
    background: linear-gradient(180deg, #36afff, #1594f5) !important;
    border: none !important;
}

body.theme-default .theme-btn-main {
    color: #fff;
    background-image: linear-gradient(180deg, #36afff, #1594f5);
    border: none;
}



body.theme-green .header-box {
    background: linear-gradient(180deg, #7ac665 1%, #2d5125 99%);
}

body.theme-green .header {
    background-image: linear-gradient(180deg, #7ac665 1%, #2d5125 99%);
}

body.theme-green .tabs {
    background: none;
}

body.theme-green .layui-this {
    background-image: linear-gradient(180deg, #3f8f2a, #234a19) !important;
    color: #fff;
}

body.theme-green .menu-item {
    background-image: linear-gradient(180deg, #7ac665 1%, #57814e 99%);
    border-left: 1px solid #9ecf8e;
    color: #fff;
}

body.theme-green .menu-item:hover,
body.theme-green .second-menu .custom-tab-title:hover {
    background: linear-gradient(180deg, #8fd47a 1%, #66925c 99%) !important;
    color: #fff;
}

body.theme-green .second-menu {
    background: #edf3ec;
    border-bottom: 1px solid #c4d4c0;
}

body.theme-green .second-menu .custom-tab-title.selected {
    background: linear-gradient(180deg, #7ac665 1%, #2d5125 99%) !important;
    border: none !important;
}

body.theme-green .theme-btn-main {
    color: #fff;
    background-image: linear-gradient(180deg, #7ac665 1%, #2d5125 99%);
    border: none;
}


body.theme-orange .header {
    background-image: linear-gradient(135deg, #d97b34, #b4551a);
    background-size: cover;
    color: #fff;
}

body.theme-orange .tabs {
    
}

body.theme-orange .layui-this {
    background-image: linear-gradient(180deg, #d88700, #593200) !important;
    color: #fff;
}

body.theme-orange .menu-item {
    background-image: linear-gradient(180deg, #9f673b, #3e1c01);
    border-left: 1px solid #451e08;
    color: #fff;
}

body.theme-orange .menu-item:hover,
body.theme-orange .second-menu .custom-tab-title:hover {
    background: linear-gradient(180deg, #d88700, #593200) !important;
    color: #fff;
}

body.theme-orange .second-menu {
    background: #351c0c !important;
    color: #d8bb99 !important;
    border-bottom: 1px solid #f0d6c1;
}

body.theme-orange .second-menu .custom-tab-title.selected {
    background-image: linear-gradient(180deg, #d88700, #593200) !important;
    border: none !important;
}

body.theme-orange .theme-btn-main {
    color: #fff;
    background-image: linear-gradient(180deg, #d88700, #593200);
    border: none;
}


body.theme-deepblue .header {
    background-image: linear-gradient(180deg, #1963b7, #023f77);
    color: #fff;
}

body.theme-deepblue .tabs {
    
}

body.theme-deepblue .layui-this {
    background-image: linear-gradient(180deg, #0a3668, #023f77) !important;
    color: #fff;
}

body.theme-deepblue .menu-item {
    background-image: linear-gradient(180deg, #1963b7, #023f77);
    border-left: 1px solid #165bad;
    color: #fff;
}

body.theme-deepblue .menu-item:hover,
body.theme-deepblue .second-menu .custom-tab-title:hover {
    background: linear-gradient(180deg, #0a3668, #023f77) !important;
    color: #fff;
}

body.theme-deepblue .second-menu {
    background: #134c8f !important;
    color: #a6c0dd !important;
}

body.theme-deepblue .second-menu .custom-tab-title.selected {
    background-image: linear-gradient(180deg, #1963b7, #023f77) !important;
    border: none !important;
}

body.theme-deepblue .theme-btn-main {
    color: #fff;
    background-image: linear-gradient(180deg, #1963b7, #023f77);
    border: none;
}


body.theme-dark .header {
    background-image: linear-gradient(135deg, #3b4257, #232838);
    color: #fff;
}

body.theme-dark .tabs {}

body.theme-dark .layui-this {
    background-image: linear-gradient(180deg, #6a7a9b, #3f4556) !important;
    color: #fff;
}

body.theme-dark .menu-item {
    background: linear-gradient(180deg, #7d92bd, #697696);
    border-left: 1px solid #697696;
    color: #fff;
}

body.theme-dark .menu-item:hover {
    background: linear-gradient(180deg, #6a7a9b, #3f4556) !important;
    color: #fff;
}

body.theme-dark .second-menu {
    background: #eef0f8 !important;
    border-bottom: 1px solid #cdd4e5;
}

body.theme-dark .second-menu .custom-tab-title.selected {
    color: #3b310b !important;
    background-image: linear-gradient(180deg, #f8f1d6, #e6ddb8) !important;
}

body.theme-dark .theme-btn-main {
    color: #3b310b;
    background-image: linear-gradient(180deg, #f8f1d6, #e6ddb8);
    border: none;
}

body.theme-dark .second-menu .custom-tab-title:hover {
    color: #3b310b !important;
    background-image: linear-gradient(180deg, #f8f1d6, #e6ddb8) !important;
}




.theme-default input[type="checkbox"]:checked,
.theme-default input[type="radio"]:checked {
    accent-color: #0aa9ff;
    color: #0aa9ff;
}

.theme-green input[type="checkbox"]:checked,
.theme-green input[type="radio"]:checked {
    accent-color: #54ab3c;
    color: #54ab3c;
}

.theme-orange input[type="checkbox"]:checked,
.theme-orange input[type="radio"]:checked {
    accent-color: #c05d20;
    color: #c05d20;
}

.theme-deepblue input[type="checkbox"]:checked,
.theme-deepblue input[type="radio"]:checked {
    accent-color: #165bad;
    color: #165bad;
}

.theme-dark input[type="checkbox"]:checked,
.theme-dark input[type="radio"]:checked {
    accent-color: #6f7b9e;
    color: #6f7b9e;
}


input::placeholder,
textarea::placeholder {
    color: #98a2ae !important;
    opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #98a2ae !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #98a2ae !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #98a2ae !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #98a2ae !important;
}


.theme-btn-main {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
    transition: background 0.2s, border-color 0.2s;
}


.theme-btn-main-1 {
    background: rgba(var(--main-color-rgb, 10, 169, 255), 0.58) !important;
    color: #fff !important;
    border-color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
    transition: background 0.2s, border-color 0.2s;
}

.theme-btn-main-optical {
    background: var(--main-color) !important;
    color: #fff !important;
    border-color: var(--main-color) !important;
    transition: background 0.2s, border-color 0.2s;
    opacity: 0.5;
}

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


.theme-gradient-bg {
    background: linear-gradient(to right,
            var(--main-color) 0%,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.7) 40%,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.3) 75%,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.08) 100%) !important;
}


.theme-gradient-vertical-bg {
    background: linear-gradient(180deg,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.6) 1%,
            var(--main-color) 99%) !important;
    border: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
    color: #fff !important;
}

.theme-gradient-vertical-bg-light {
    background: linear-gradient(180deg,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.1) 10%,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.2) 90%) !important;
    border: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
    color: #333 !important;
    border: 1px solid rgba(var(--main-color-rgb, 10, 169, 255), 0.5) !important;
}


.theme-border-bottom {
    border-bottom: 2px solid var(--main-color) !important;
}


.theme-gradient-vertical-bg-1 {
    background: linear-gradient(180deg,
            rgba(var(--main-color-rgb, 10, 169, 255), 0.3) 1%,
            var(--main-color) 99%) !important;
    border: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}


.theme-background {
    background: rgba(var(--main-color-rgb, 10, 169, 255), 0.05) !important;
    border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
}

.theme-background-1 {
    background: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
    border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
}

.theme-background-8 {
    background: rgba(var(--main-color-rgb, 10, 169, 255), 0.8) !important;
    border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
}

.theme-bg {
    background: var(--main-color) !important;
    color: #fff;
}

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


.layui-table tr:hover,
.table-edit-flex .layui-table tr:hover {
    background: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
}


.layui-table,
.layui-table td,
.layui-input {
    border-color: rgba(var(--main-color-rgb, 10, 169, 255), 0.5) !important;
}


.layui-table th {
    background: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
    border-color: rgba(var(--main-color-rgb, 10, 169, 255), 0.5) !important;
}

.some-class {
    color: var(--special-color);
}

.fixedColor {
    color: #012cf9;
    cursor: pointer;
}

.text-danger {
    color: red;
}

.text-blue {
    color: #1594f5;
}

.btn-disabled {
    background: #f5f5f5 !important;
    color: #bbb !important;
    border-color: #eee !important;
    cursor: not-allowed !important;
}