:root {
    /* color variables */
    --color-green: #72BF44;
    --color-darkgreen: #4FAE3E;
    --color-turquoise: #53ABAA;
    --color-turquoise-80: #75BBBB;
    --color-coral: #EA5441;
    --color-orange: #EA9F41;
    --color-darkorange: #C68A17;
    --color-darkgray: #505050;
    --color-darkgray-80: #737373;
    --color-darkgray-50: #A7A7A7;
    --color-gray: #C8C8C8;
    --color-medium-gray: #DFE0E1;
    --color-light-gray: #EEEEEE;
    /* Quadient guidelines colors and filters */
    --color-pantone-298c: #05b9f0;
    --filter-black-to-pantone-298c: invert(76%) sepia(84%) saturate(4762%) hue-rotate(156deg) brightness(100%) contrast(96%);
    --color-pantone-298c-dark: #009bd2;
    --filter-black-to-pantone-298c-dark: invert(41%) sepia(33%) saturate(4624%) hue-rotate(169deg) brightness(98%) contrast(102%);
    --color-pantone-368c: #72bf44;
    --filter-black-to-pantone-368c: invert(71%) sepia(17%) saturate(1517%) hue-rotate(54deg) brightness(93%) contrast(82%);
    --color-pantone-368c-dark: #4fae3e;
    --filter-black-to-pantone-368c-dark: invert(58%) sepia(13%) saturate(2966%) hue-rotate(65deg) brightness(103%) contrast(61%);
    --color-pantone-388c: #d9fa4f;
    --filter-black-to-pantone-388c: invert(84%) sepia(79%) saturate(391%) hue-rotate(12deg) brightness(99%) contrast(98%);
    --color-pantone-388c-1655c-mix: #ec9e27;
    --filter-black-to-pantone-388c-1655c-mix: invert(62%) sepia(67%) saturate(505%) hue-rotate(355deg) brightness(94%) contrast(96%);
    --color-pantone-2097: #7536f0;
    --filter-black-to-pantone-2097: invert(25%) sepia(58%) saturate(3278%) hue-rotate(250deg) brightness(91%) contrast(107%);
    --color-pantone-2097-dark: #5718d2;
    --filter-black-to-pantone-2097-dark: invert(20%) sepia(87%) saturate(3119%) hue-rotate(255deg) brightness(77%) contrast(121%);
    --color-pantone-1935c: #d6084d;
    --filter-black-to-pantone-1935c: invert(13%) sepia(98%) saturate(7491%) hue-rotate(336deg) brightness(86%) contrast(94%);
    --color-pantone-1655c: #ff4200;
    --filter-black-to-pantone-1655c: invert(33%) sepia(36%) saturate(4129%) hue-rotate(358deg) brightness(98%) contrast(113%);
    --color-pantone-1655c-dark: #e63b00;
    --filter-black-to-pantone-1655c-dark: invert(23%) sepia(93%) saturate(2146%) hue-rotate(8deg) brightness(103%) contrast(109%);
    /* functional color variables */
    --color-success: var(--color-green);
    --color-error: var(--color-coral);
    --color-warning: var(--color-orange);
    /* filters changing color of black images  */
    --filter-black-to-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --filter-black-to-green: invert(71%) sepia(17%) saturate(1517%) hue-rotate(54deg) brightness(93%) contrast(82%);
    --filter-black-to-darkgreen: invert(58%) sepia(13%) saturate(2966%) hue-rotate(65deg) brightness(103%) contrast(61%);
    --filter-black-to-darkgray: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(37%);
    --filter-black-to-darkgray-80: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(10%);
    --filter-black-to-darkgray-50: invert(69%) sepia(65%) saturate(0%) hue-rotate(143deg) brightness(86%) contrast(91%);
    --filter-black-to-gray: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(57%);
    --filter-black-to-coral: invert(37%) sepia(22%) saturate(4314%) hue-rotate(338deg) brightness(103%) contrast(84%);
    --filter-black-to-orange: invert(78%) sepia(86%) saturate(2574%) hue-rotate(327deg) brightness(95%) contrast(92%);
    --filter-black-to-darkorange: invert(75%) sepia(46%) saturate(6064%) hue-rotate(8deg) brightness(92%) contrast(82%);
    --filter-black-to-turquoise: invert(61%) sepia(31%) saturate(558%) hue-rotate(130deg) brightness(93%) contrast(90%);
    --filter-black-to-turquoise-80: invert(67%) sepia(33%) saturate(377%) hue-rotate(131deg) brightness(97%) contrast(89%);
    /* fonts */
    --font-roboto: 'Roboto Condensed', sans-serif;
    --font-roboto-bold: 'Roboto Condensed Bold', sans-serif;
    --font-raw: "Courier New", Courier, monospace;
    --font-standard: "Tahoma", arial, sans-serif;
    --font-quicksand: 'Quicksand', sans-serif;
    --font-quicksand-bold: 'Quicksand Bold', sans-serif;
}

@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}