:root {
    --bg-primary: #2D80BD;
    --bg-secondary: #FDE8E8;
    --bg-success: #15ab94;
    --bg-white: white;
    --bg-danger: #DC505C;
    --bg-category: #F13F3F;

    --line-primary: #eee;

    --btn-primary: #22578D;
    --btn-secondary: #1C3A58;
    --btn-success: #15ab94;

    --color-primary: #22578D;
    --color-secondary: #F13F3F;
    --color-white: white;
    --color-eee: #eee;
    --color-ddd: #ddd;
    --color-danger: #F13F3F;
    --color-base: #444A5A;

    --size-px-8: 8px;
    --size-px-10: 10px;
    --size-px-11: 11px;
    --size-px-12: 12px;
    --size-px-13: 13px;
    --size-px-14: 14px;
    --size-px-15: 15px;
    --size-px-16: 16px;
    --size-px-18: 18px;
    --size-px-20: 20px;
    --size-px-24: 24px;
    --size-px-28: 28px;
    --size-px-30: 30px;
    --size-px-32: 32px;
    --size-px-36: 36px;

    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;
    --weight-bold: bold;

    --pa-10: 10px;
    --pa-20: 20px;
    --pa-30: 30px;
    --pa-40: 40px;
    --pa-50: 50px;

    --solid-ddd: 1px solid #ddd;
    --dashed-ddd: 1px dashed #ddd;
    --dot-ddd: 1px dotted #ddd;

}

@media screen and (min-width: 481px) {
    :root{
        --width-base: 1020px;
    }
}