// animation
@keyframes loading-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

@keyframes loading-dot {
    0% {
        box-shadow: 20px 0 #0067c0, -20px 0 #0067c022;
        background: #0067c0;
    }

    33% {
        box-shadow: 20px 0 #0067c0, -20px 0 #0067c022;
        background: #0067c022;
    }

    66% {
        box-shadow: 20px 0 #0067c022, -20px 0 #0067c0;
        background: #0067c022;
    }

    100% {
        box-shadow: 20px 0 #0067c022, -20px 0 #0067c0;
        background: #0067c0;
    }
}

:root {
    /*color-scheme: light dark;*/

    --color: #201f1e;
    --secondary-color: #777;
    --bg-color: #fff;
    --border-color: #b9b9b9;
    --focus-border-color: #666;
    --shadow-color: rgba(0 0 0 /11%);
    --disabled-color: #aaa;
    --disabled-bg-color: #e9e9e9;
    --disabled-border-color: #d9d9d9;
    --switch-bg-color: #eae9eb;
    --switch-active-bg-color: #33c559;

    --red-color: red;
    --orange-color: orange;
    --green-color: #33c559;
    --title-color: #fff;
    --title-bg-color: rgb(68, 114, 196);
    --title-ctrlbg-color: rgb(68, 114, 196);
    --hover-bg-color: #eee;
    --link-color: #1890ff;
    --secondary-link-color: #1d9ac0;
    --primary-color: rgb(123, 28, 33);
    --loading-bg-color: hsla(0, 0%, 100%, .4);
    --loading-fore-color: rgba(0, 0, 0, .2);

    --border-radius: 2px;
    --text-indent: 4px;
    --line-height: 18px;
    --settings-line-height: 32px;

    --font-size: .8125rem; // 13px
    --font-smaller-size: .75rem; // 12px
    --font-larger-size: .875rem; // 14px
    --font-header-size: 1.5rem; // 24px
    --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
    --header-font-family: Arial, sans-serif;
}

/*@media (prefers-color-scheme: dark) {
    :root {
        --color: rgb(255 255 255/87%);
        --bg-color: #141414;
        --border-color: #464646;
        --focus-border-color: #999;
        --shadow-color: rgba(128 128 128 /8%);
        --disabled-color: #555;
        --disabled-bg-color: #161616;
        --disabled-border-color: #262626;

        --red-color: #c80000;
        --title-color: #ddd;
        --title-bg-color: rgb(40, 89, 173);
        --hover-bg-color: #222;
        --link-color: #0177e6;
        --primary-color: rgb(123, 28, 33);
        --loading-bg-color: rgb(20 20 20/40%);
        --loading-fore-color: rgb(255 255 255/20%);
    }
}*/