:root {
    --color-main-900: #293763;
    --color-main-800: #505A89;
    --color-main-700: #5470CB;
    --color-main-600: #00CCCC;
    --color-main-500: #CEF9F9;
    --color-main-400: #BCCDE7;
    --color-main-300: #F6FAFF;
    --color-main-200: #FCFDFF;
    /* hover colors */
    --color-main-700-hover: #4d66b9;
    /* material gray */
    --material-color-grey: #8f9bb3;
    --material-color-grey-50: #fafafa;
    --material-color-grey-100: #f5f5f5;
    --material-color-grey-200: #eee;
    --material-color-grey-300: #e0e0e0;
    --material-color-grey-400: #bdbdbd;
    --material-color-grey-500: var(--material-color-grey);
    --material-color-grey-600: #757575;
    --material-color-grey-700: #616161;
    --material-color-grey-800: #424242;
    --material-color-grey-900: #212121;
    /* ACTIVE */
    --active: #36f;
    /* INACTIVE / EMPTY */
    --passive: #f3f3f3;
    /* GRAPHICAL */
    --border: #e8ebef;
    /* TYPO */
    --main-typo: var(--color-main-800);
    --second-typo: #737376;
    /* MATERIAL https://github.com/shuhei/material-colors/blob/master/dist/colors.var.css */
    --md-orange-50: #fff3e0;
    --md-orange-100: #ffe0b2;
    --md-orange-200: #ffcc80;
    --md-orange-300: #ffb74d;
    --md-orange-400: #ffa726;
    --md-orange-500: #ff9800;
    --md-orange-600: #fb8c00;
    --md-orange-700: #f57c00;
    --md-orange-800: #ef6c00;
    --md-orange-900: #e65100;
    --md-orange-a100: #ffd180;
    --md-orange-a200: #ffab40;
    --md-orange-a400: #ff9100;
    --md-orange-a700: #ff6d00;
}
.bg-color-main-300 {
    background: var(--color-main-300);
}
.bg-color-gray-50 {
    background: var(--material-color-grey-50);
}