:root {
    --black: rgb(41, 41, 41);
    --gray50: #fbfdff;
    --gray100: #f5f8fa;
    --gray200: #e1e1e1;
    --gray300: #d0d0d0;
    --gray400: #a8a8a8;
    --gray500: #86909c;
    --white: #feffff;
    --whiteStatic: #feffff;
    --blackStatic: #0f1620;
    --disabled: #86909c;
    --accent: rgb(176, 229, 134);
    --green: rgb(176, 229, 134);
    --blue: rgb(26, 115, 232);
    --red: #FF3347;
    --yellow: #FFB841;
}

body {
    background-color: #feffff;
    color: #0f1620;
}

.back {
    background-color: #feffff;
}

input,
md-select {
    background: var(--white);
}


/*https://codepen.io/sosuke/pen/Pjoqqp*/

.img-white {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(213deg) brightness(101%) contrast(103%);
}

.img-black {
    filter: invert(5%) sepia(25%) saturate(1307%) hue-rotate(176deg) brightness(101%) contrast(93%);
}

.img-gray {
    filter: invert(64%) sepia(12%) saturate(353%) hue-rotate(173deg) brightness(86%) contrast(87%);
}

.img-accent {
    filter: invert(67%) sepia(35%) saturate(3727%) hue-rotate(178deg) brightness(97%) contrast(104%);
}

.img-blue {
    filter: invert(34%) sepia(82%) saturate(5280%) hue-rotate(235deg) brightness(99%) contrast(98%);
}

.img-green {
    filter: invert(54%) sepia(22%) saturate(7296%) hue-rotate(124deg) brightness(100%) contrast(98%);
}

.img-red {
    filter: invert(35%) sepia(79%) saturate(2026%) hue-rotate(328deg) brightness(105%) contrast(94%);
}

.img-yellow {
    filter: invert(80%) sepia(82%) saturate(3759%) hue-rotate(327deg) brightness(108%) contrast(98%);
}

.img-normal {
    filter: none;
}

.back-black {
    background: var(--black);
}

.back-white {
    background: var(--white);
}

.back-green {
    background: var(--green);
}

.back-red {
    background: var(--red);
}

.back-blue {
    background: var(--blue);
}

.back-accent {
    background: var(--accent);
}

.back-yellow {
    background: var(--yellow);
}

.back-black-10 {
    background: color-mix(in srgb, var(--black), transparent 90%);
}

.back-black-20 {
    background: color-mix(in srgb, var(--black), transparent 80%);
}

.back-black-50 {
    background: color-mix(in srgb, var(--black), transparent 50%);
}

.back-white-10 {
    background: color-mix(in srgb, var(--white), transparent 90%);
}

.back-white-20 {
    background: color-mix(in srgb, var(--white), transparent 80%);
}

.back-white-50 {
    background: color-mix(in srgb, var(--white), transparent 50%);
}

.back-green-10 {
    background: color-mix(in srgb, var(--green), transparent 90%);
}

.back-green-20 {
    background: color-mix(in srgb, var(--green), transparent 80%);
}

.back-green-50 {
    background: color-mix(in srgb, var(--green), transparent 50%);
}

.back-red-10 {
    background: color-mix(in srgb, var(--red), transparent 90%);
}

.back-red-20 {
    background: color-mix(in srgb, var(--red), transparent 80%);
}

.back-red-50 {
    background: color-mix(in srgb, var(--red), transparent 50%);
}

.back-blue-10 {
    background: color-mix(in srgb, var(--blue), transparent 90%);
}

.back-blue-20 {
    background: color-mix(in srgb, var(--blue), transparent 80%);
}

.back-blue-50 {
    background: color-mix(in srgb, var(--blue), transparent 50%);
}

.back-accent-10 {
    background: color-mix(in srgb, var(--accent), transparent 90%);
}

.back-accent-20 {
    background: color-mix(in srgb, var(--accent), transparent 80%);
}

.back-accent-50 {
    background: color-mix(in srgb, var(--accent), transparent 50%);
}

.back-yellow-10 {
    background: color-mix(in srgb, var(--yellow), transparent 90%);
}

.back-yellow-20 {
    background: color-mix(in srgb, var(--yellow), transparent 80%);
}

.back-yellow-50 {
    background: color-mix(in srgb, var(--yellow), transparent 50%);
}

.back-gray50 {
    background: var(--gray50);
}

.back-gray100 {
    background: var(--gray500);
}

.back-gray200 {
    background: var(--gray200);
}

.back-gray300 {
    background: var(--gray300);
}

.back-gray400 {
    background: var(--gray400);
}

.back-gray, .back-gray500 {
    background: var(--gray500);
}



.hover-black:hover {
    background: var(--black);
}

.hover-white:hover {
    background: var(--white);
}

.hover-green:hover {
    background: var(--green);
}

.hover-red:hover {
    background: var(--red);
}

.hover-accent:hover {
    background: var(--accent);
}

.hover-gray50:hover {
    background: var(--gray50);
}

.hover-gray:hover,
.hover-gray100:hover {
    background: var(--gray100);
}

.hover-gray200:hover {
    background: var(--gray200);
}

.hover-gray300:hover {
    background: var(--gray300);
}

.hover-gray400:hover {
    background: var(--gray400);
}

.hover-gray500:hover {
    background: var(--gray500);
}

.hover-active:hover {
    background: var(--gray200);
}

.hover-yellow:hover {
    background: var(--yellow);
}


a {
    text-decoration: none;
    color: inherit;
}

a:link,
a:visited,
a:active,
a:hover {
    color: inherit;
}

.text-black {
    color: var(--black);
}

.text-white {
    color: var(--white);
}

.text-gray {
    color: var(--gray500);
}

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

.text-red {
    color: var(--red);
}

.text-blue {
    color: var(--blue);
}

.text-accent {
    color: var(--accent);
}

.border-black {
    border: 1px solid var(--black);
}

.border-white {
    border: 1px solid var(--white);
}

.border-green {
    border: 1px solid var(--green);
}

.border-red {
    border: 1px solid var(--red);
}

.border-blue {
    border: 1px solid var(--blue);
}

.border-accent {
    border: 1px solid var(--accent);
}

.border-yellow {
    border: 1px solid var(--yellow);
}

.border-white {
    border: 1px solid var(--white);
}

.border-gray100 {
    border: 1px solid var(--gray100);
}

.border-gray200 {
    border: 1px solid var(--gray200);
}

.border-gray, .border-gray300 {
    border: 1px solid var(--gray300);
}

.border-gray400 {
    border: 1px solid var(--gray400);
}

.border-gray500 {
    border: 1px solid var(--gray500);
}