:root {
    --black: #0f1620;
    --gray100: #f5f8fa;
    --gray200: #e1e1e1;
    --gray300: #d0d0d0;
    --gray400: #a8a8a8;
    --gray500: #86909c;
    --white: #feffff;
    --whiteStatic: #feffff;
    --blackStatic: #0f1620;
    --disabled: #86909c;
    --accent: #46aef5;
    --green: #45be88;
    --blue: #46aef5;
    --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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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);
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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);
}

a:link {
    color: var(--accent);
}

a:visited {
    color: var(--accent);
}

a:active {
    color: var(--accent);
}