/* backgrounds */
.sw-background-day { background-color: white; }
.sw-background-night { background-color: #202124; /* grey 900 */ }
.sw-background-grey-day { background-color: #F1F3F4; /* grey 100 */ }
.sw-background-grey-night { background-color: #202124; /* grey 900 */ }
.sw-background-blue-day { background-color: #E0F0FE; /* blue 50 */ }
.sw-background-blue-night { background-color: #202834; /* blue 600 8% + grey 900 https://colors.dopely.top/color-mixer/1a73e8-8-202124-92 */ }
.sw-background-red-day { background-color: #FCEBE6; /* red 50 */ }
.sw-background-red-night { background-color: #2F2224; /* red 600 8% + grey 900 https://colors.dopely.top/color-mixer/D93025-8-202124-92 */ }
.sw-background-yellow-day { background-color: #FEF7E0; /* yellow 50 */ }
.sw-background-yellow-night { background-color: #312C21; /* yellow 600 8% + grey 900 https://colors.dopely.top/color-mixer/F9AB00-8-202124-92 */ }
.sw-background-green-day { background-color: #E6F4EA; /* green 50 */ }
.sw-background-green-night { background-color: #202A26; /* green 600 8% + grey 900 https://colors.dopely.top/color-mixer/1E8E3E-8-202124-92 */ }
.sw-background-orange-day { background-color: #FEEFE3; /* orange 50 */ }
.sw-background-orange-night { background-color: #302722; /* orange 600 8% + grey 900 https://colors.dopely.top/color-mixer/E8710A-8-202124-92 */ }
.sw-background-pink-day { background-color: #FDE7F3; /* pink 50 */ }
.sw-background-pink-night { background-color: #30212D; /* pink 600 8% + grey 900 https://colors.dopely.top/color-mixer/E52592-8-202124-92 */ }
.sw-background-purple-day { background-color: #F3E8FD; /* purple 50 */ }
.sw-background-purple-night { background-color: #292334; /* purple 600 8% + grey 900 https://colors.dopely.top/color-mixer/9334E6-8-202124-92 */ }
.sw-background-cyan-day { background-color: #E4F7FB; /* cyan 50 */ }
.sw-background-cyan-night { background-color: #1F2D31; /* cyan 600 8% + grey 900 https://colors.dopely.top/color-mixer/12B5CB-8-202124-92 */ }

/* surfaces */
.sw-surface-day { background-color: #F1F3F4; /* grey 100 */ }
.sw-surface-night { background-color: #303134; /* grey 850 */ }
.sw-surface-grey-day { background-color: white; }
.sw-surface-grey-night { background-color: #303134; /* grey 850 */ }
.sw-surface-blue-day { background-color: white; }
.sw-surface-blue-night { background-color: #2E3642; /* blue 600 8% + grey 850 https://colors.dopely.top/color-mixer/1a73e8-8-303134-92 */ }
.sw-surface-red-day { background-color: white; }
.sw-surface-red-night { background-color: #3E3133; /* red 600 8% + grey 850 https://colors.dopely.top/color-mixer/D93025-8-303134-92 */ }
.sw-surface-yellow-day { background-color: white; }
.sw-surface-yellow-night { background-color: #403B30; /* yellow 600 8% + grey 850 https://colors.dopely.top/color-mixer/F9AB00-8-303134-92 */ }
.sw-surface-green-day { background-color: white; }
.sw-surface-green-night { background-color: #2F3835; /* green 600 8% + grey 850 https://colors.dopely.top/color-mixer/1E8E3E-8-303134-92 */ }
.sw-surface-orange-day { background-color: white; }
.sw-surface-orange-night { background-color: #3F3631; /* orange 600 8% + grey 850 https://colors.dopely.top/color-mixer/E8710A-8-303134-92 */ }
.sw-surface-pink-day { background-color: white; }
.sw-surface-pink-night { background-color: #3E303C; /* pink 600 8% + grey 850 https://colors.dopely.top/color-mixer/E52592-8-303134-92 */ }
.sw-surface-purple-day { background-color: white; }
.sw-surface-purple-night { background-color: #383142; /* purple 600 8% + grey 850 https://colors.dopely.top/color-mixer/9334E6-8-303134-92 */ }
.sw-surface-cyan-day { background-color: white; }
.sw-surface-cyan-night { background-color: #2E3C40; /* cyan 600 8% + grey 850 https://colors.dopely.top/color-mixer/12B5CB-8-303134-92 */ }

/* bgs */
.sw-bg-blue-day { background-color: #1A73E8; /* blue 600 */ }
.sw-bg-blue-night { background-color: #8AB4F8; /* blue 300 */ }
.sw-bg-red-day { background-color: #D93025; /* red 600 */ }
.sw-bg-red-night { background-color: #F28B82; /* red 300 */ }
.sw-bg-yellow-day { background-color: #F9AB00; /* yellow 600 */ }
.sw-bg-yellow-night { background-color: #FDD663; /* yellow 300 */ }
.sw-bg-green-day { background-color: #188038; /* green 700 */ }
.sw-bg-green-night { background-color: #90CFA2; /* green 300 */ }
.sw-bg-orange-day { background-color: #E8710A; /* orange 600 */ }
.sw-bg-orange-night { background-color: #FCAD70; /* orange 300 */ }
.sw-bg-pink-day { background-color: #D01884; /* pink 700 */ }
.sw-bg-pink-night { background-color: #FF8BCB; /* pink 300 */ }
.sw-bg-purple-day { background-color: #9334E6; /* purple 600 */ }
.sw-bg-purple-night { background-color: #C58AF9; /* purple 300 */ }
.sw-bg-cyan-day { background-color: #12B5CB; /* cyan 600 */ }
.sw-bg-cyan-night { background-color: #78D9EC; /* cyan 300 */ }
.sw-bg-grey-day { background-color: rgba(0, 0, 0, 0.08);; /* cyan 600 */ }
.sw-bg-grey-night { background-color: rgba(255, 255, 255, 0.08);; /* cyan 300 */ }

/* texts */
.sw-text-day, .sw-text-day:hover, .sw-text-day:focus { color: #202124; /* grey 900 */ }
.sw-text-night, .sw-text-night:hover, .sw-text-night:focus { color: #E8EAED; /* grey 200 */ }
.sw-text-sec-day, .sw-text-sec-day:hover, .sw-text-sec-day:focus { color: #80868B; /* grey 600 */ }
.sw-text-sec-night, .sw-text-sec-night:hover, .sw-text-sec-night:focus { color: #9AA0A6; /* grey 500 */ }
.sw-text-blue-day, .sw-text-blue-day:hover, .sw-text-blue-day:focus { color: #1A73E8; /* blue 600 */ }
.sw-text-blue-night, .sw-text-blue-night:hover, .sw-text-blue-night:focus { color: #8AB4F8; /* blue 300 */ }
.sw-text-red-day, .sw-text-red-day:hover, .sw-text-red-day:focus { color: #D93025; /* red 600 */ }
.sw-text-red-night, .sw-text-red-night:hover, .sw-text-red-night:focus { color: #F28B82; /* red 300 */ }
.sw-text-yellow-day, .sw-text-yellow-day:hover, .sw-text-yellow-day:focus { color: #B06000; /* yellow 600 */ }
.sw-text-yellow-night, .sw-text-yellow-night:hover, .sw-text-yellow-night:focus { color: #FDD663; /* yellow 300 */ }
.sw-text-green-day, .sw-text-green-day:hover, .sw-text-green-day:focus { color: #188038; /* green 700 */ }
.sw-text-green-night, .sw-text-green-night:hover, .sw-text-green-night:focus { color: #90CFA2; /* green 300 */ }
.sw-text-orange-day, .sw-text-orange-day:hover, .sw-text-orange-day:focus { color: #B06000; /* orange 900 */ }
.sw-text-orange-night, .sw-text-orange-night:hover, .sw-text-orange-night:focus { color: #FCAD70; /* orange 300 */ }
.sw-text-pink-day, .sw-text-pink-day:hover, .sw-text-pink-day:focus { color: #D01884; /* pink 700 */ }
.sw-text-pink-night, .sw-text-pink-night:hover, .sw-text-pink-night:focus { color: #FF8BCB; /* pink 300 */ }
.sw-text-purple-day, .sw-text-purple-day:hover, .sw-text-purple-day:focus { color: #9334E6; /* purple 600 */ }
.sw-text-purple-night, .sw-text-purple-night:hover, .sw-text-purple-night:focus { color: #C58AF9; /* purple 300 */ }
.sw-text-cyan-day, .sw-text-cyan-day:hover, .sw-text-cyan-day:focus { color: #007B83; /* cyan 900 */ }
.sw-text-cyan-night, .sw-text-cyan-night:hover, .sw-text-cyan-night:focus { color: #78D9EC; /* cyan 300 */ }
.sw-text-on-blue-day { color: white; }
.sw-text-on-blue-night { color: #202124; }
.sw-text-on-red-day { color: white; }
.sw-text-on-red-night { color: #202124; }
.sw-text-on-yellow-day { color: #202124; }
.sw-text-on-yellow-night { color: #202124; }
.sw-text-on-green-day { color: white; }
.sw-text-on-green-night { color: #202124; }
.sw-text-on-orange-day { color: #202124; }
.sw-text-on-orange-night { color: #202124; }
.sw-text-on-pink-day { color: white; }
.sw-text-on-pink-night { color: #202124; }
.sw-text-on-purple-day { color: white; }
.sw-text-on-purple-night { color: #202124; }
.sw-text-on-cyan-day { color: #202124; }
.sw-text-on-cyan-night { color: #202124; }
.sw-text-on-grey-day { color: #202124; /* grey 900 */ }
.sw-text-on-grey-night { color: #E8EAED; /* grey 200 */ }
/* for focused input fields */
.sw-text-default-day { color: #1A73E8; /* blue 600 */ }
.sw-text-default-night { color: #8AB4F8; /* blue 300 */ }

/* buttons */
.sw-btn-blue-day {
    background-color: #1A73E8; /* blue 600 */
    color: white; }
.sw-btn-blue-night {
    background-color: #8AB4F8; /* blue 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-blue-day:hover, .sw-btn-blue-day:focus {
    background-color: #1765CC; /* blue 600 + 12% black https://colors.dopely.top/color-mixer/1a73e8-88-000000-12 */
    color: white; }
.sw-btn-blue-night:hover, .sw-btn-blue-night:focus {
    background-color: #98BDF9; /* blue 300 + 12% white https://colors.dopely.top/color-mixer/8AB4F8-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-red-day {
    background-color: #D93025; /* red 600 */
    color: white; }
.sw-btn-red-night {
    background-color: #F28B82; /* red 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-red-day:hover, .sw-btn-red-day:focus {
    background-color: #BF2A21; /* red 600 + 12% black https://colors.dopely.top/color-mixer/D93025-88-000000-12 */
    color: white; }
.sw-btn-red-night:hover, .sw-btn-red-night:focus {
    background-color: #F49991; /* red 300 + 12% white https://colors.dopely.top/color-mixer/F28B82-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-yellow-day {
    background-color: #F9AB00; /* yellow 600 */
    color: #202124; }
.sw-btn-yellow-night {
    background-color: #FDD663; /* yellow 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-yellow-day:hover, .sw-btn-yellow-day:focus {
    background-color: #DB9600; /* yellow 600 + 12% black https://colors.dopely.top/color-mixer/F9AB00-88-000000-12 */
    color: #202124; }
.sw-btn-yellow-night:hover, .sw-btn-yellow-night:focus {
    background-color: #FDDB76; /* yellow 300 + 12% white https://colors.dopely.top/color-mixer/FDD663-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-green-day {
    background-color: #188038; /* green 700 */
    color: white; }
.sw-btn-green-night {
    background-color: #81C995; /* green 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-green-day:hover, .sw-btn-green-day:focus {
    background-color: #157131; /* green 700 + 12% black https://colors.dopely.top/color-mixer/188038-88-000000-12 */
    color: white; }
.sw-btn-green-night:hover, .sw-btn-green-night:focus {
    background-color: #90CFA2; /* green 300 + 12% white https://colors.dopely.top/color-mixer/81C995-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-orange-day {
    background-color: #E8710A; /* orange 600 */
    color: #202124; }
.sw-btn-orange-night {
    background-color: #FCAD70; /* orange 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-orange-day:hover, .sw-btn-orange-day:focus {
    background-color: #CC6309; /* orange 600 + 12% black https://colors.dopely.top/color-mixer/E8710A-88-000000-12 */
    color: black; }
.sw-btn-orange-night:hover, .sw-btn-orange-night:focus {
    background-color: #FCB781; /* orange 300 + 12% white https://colors.dopely.top/color-mixer/FCAD70-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-pink-day {
    background-color: #D01884; /* pink 700 */
    color: white; }
.sw-btn-pink-night {
    background-color: #FF8BCB; /* pink 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-pink-day:hover, .sw-btn-pink-day:focus {
    background-color: #B71574; /* pink 700 + 12% black https://colors.dopely.top/color-mixer/D01884-88-000000-12 */
    color: white; }
.sw-btn-pink-night:hover, .sw-btn-pink-night:focus {
    background-color: #FF99D1; /* pink 300 + 12% white https://colors.dopely.top/color-mixer/FF8BCB-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-purple-day {
    background-color: #9334E6; /* purple 600 */
    color: white; }
.sw-btn-purple-night {
    background-color: #C58AF9; /* purple 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-purple-day:hover, .sw-btn-purple-day:focus {
    background-color: #812ECA; /* purple 600 + 12% black https://colors.dopely.top/color-mixer/9334E6-88-000000-12 */
    color: white; }
.sw-btn-purple-night:hover, .sw-btn-purple-night:focus {
    background-color: #CC98FA; /* purple 300 + 12% white https://colors.dopely.top/color-mixer/C58AF9-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-cyan-day {
    background-color: #12B5CB; /* cyan 600 */
    color: #202124; }
.sw-btn-cyan-night {
    background-color: #78D9EC; /* cyan 300 */
    color: #202124; /* grey 900 */ }
.sw-btn-cyan-day:hover, .sw-btn-cyan-day:focus {
    background-color: #109FB3; /* cyan 600 + 12% black https://colors.dopely.top/color-mixer/12B5CB-88-000000-12 */
    color: #202124; }
.sw-btn-cyan-night:hover, .sw-btn-cyan-night:focus {
    background-color: #88DEEE; /* cyan 300 + 12% white https://colors.dopely.top/color-mixer/78D9EC-88-FFFFFF-12 */
    color: #202124; /* grey 900 */ }
.sw-btn-grey-day {
    background-color: rgba(0, 0, 0, 0.08);
    color: #202124; }
.sw-btn-grey-night {
    background-color: rgba(255, 255, 255, 0.08);
    color: white; }
.sw-btn-grey-day:hover, .sw-btn-grey-day:focus {
    background-color: rgba(0, 0, 0, 0.12);
    color: #202124; }
.sw-btn-grey-night:hover, .sw-btn-grey-night:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: white; }
.sw-btn-outline-day {
    border:1px solid rgba(0, 0, 0, 0.12);
    background: none; }
.sw-btn-outline-night {
    border:1px solid rgba(255, 255, 255, 0.12);
    background: none; }
.sw-btn-outline-day:hover, .sw-btn-outline-day:focus {
    border:1px solid rgba(0, 0, 0, 0.12);
    background-color: rgba(0, 0, 0, 0.08); }
.sw-btn-outline-night:hover, .sw-btn-outline-night:focus {
    border:1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.08); }
.sw-btn-clean-day { background: none; }
.sw-btn-clean-night { background: none; }
.sw-btn-clean-day:hover, .sw-btn-clean-day:focus { background-color: rgba(0, 0, 0, 0.08); }
.sw-btn-clean-night:hover, .sw-btn-clean-night:focus { background-color: rgba(255, 255, 255, 0.08); }
.sw-btn-icon-day {
    background: none;
    color: rgba(32, 33, 36, 0.7); }
.sw-btn-icon-night {
    background: none;
    color: rgba(255, 255, 255, 0.8); }
.sw-btn-icon-day:hover, .sw-btn-icon-day:focus {
    background-color:rgba(0, 0, 0, 0.08);
    color: rgba(32, 33, 36, 0.7); }
.sw-btn-icon-night:hover, .sw-btn-icon-night:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8); }

/* border */
.sw-border-day { border-color: rgba(0, 0, 0, 0.12) !important; /* grey 300 */ }
.sw-border-night { border-color: rgba(255, 255, 255, 0.12) !important; /* grey 700 */ }
.sw-border-blue-day { border-color: #1A73E8 !important; /* blue 600 */ }
.sw-border-blue-night { border-color: #8AB4F8 !important; /* blue 300 */ }
.sw-border-red-day { border-color: #D93025 !important; /* red 600 */ }
.sw-border-red-night { border-color: #F28B82 !important; /* red 300 */ }
.sw-border-yellow-day { border-color: #B06000 !important; /* yellow 600 */ }
.sw-border-yellow-night { border-color: #FDD663 !important; /* yellow 300 */ }
.sw-border-green-day { border-color: #188038 !important; /* green 700 */ }
.sw-border-green-night { border-color: #90CFA2 !important; /* green 300 */ }
.sw-border-orange-day { border-color: #B06000 !important; /* orange 900 */ }
.sw-border-orange-night { border-color: #FCAD70 !important; /* orange 300 */ }
.sw-border-pink-day { border-color: #D01884 !important; /* pink 700 */ }
.sw-border-pink-night { border-color: #FF8BCB !important; /* pink 300 */ }
.sw-border-purple-day { border-color: #9334E6 !important; /* purple 600 */ }
.sw-border-purple-night { border-color: #C58AF9 !important; /* purple 300 */ }
.sw-border-cyan-day { border-color: #007B83 !important; /* cyan 900 */ }
.sw-border-cyan-night { border-color: #78D9EC !important; /* cyan 300 */ }
/* for focused input fields */
.sw-border-default-day { border-color: #1A73E8 !important; /* blue 600 */ }
.sw-border-default-night { border-color: #8AB4F8 !important; /* blue 300 */ }

/* input */
.sw-input-day { background: rgba(0, 0, 0, 0.04) !important; }
.sw-input-day:hover { background: rgba(0, 0, 0, 0.06) !important; }
.sw-input-day:focus { background: rgba(0, 0, 0, 0.1) !important; }
.sw-input-day:disabled { background: rgba(0, 0, 0, 0.12) !important; }
.sw-input-night { background: rgba(255, 255, 255, 0.04) !important; }
.sw-input-night:hover { background: rgba(255, 255, 255, 0.06) !important; }
.sw-input-night:focus { background: rgba(255, 255, 255, 0.1) !important; }
.sw-input-night:disabled { background: rgba(255, 255, 255, .12) !important; }