:root {
    /*Primary Colors*/
    --green-01: #367E87;
    --salmon-01: #f85e43;
    --black-02: #333;

    /*Secondary Colors*/
    --black-01: #000000;
    --white-01: #ffffff;
    --gray-02: #E4E4E4;
    --gray-03: #CCCCCC;
    --gray-04: #777;
    --gray-05: #999999;
    /*Utility Colors*/
    --green-04: #47AC34;
    --red-01: #E83F21;
    --yellow-01: #FFC500;
    --green-completed: #277F55;
    
    /*Alert Colors*/
    --green-alert-font: #155724;
    --green-alert-bg: #D4EDDA;
    --green-alert-border: #C3E6CB;
    --yellow-alert-font: #856404;
    --yellow-alert-bg: #FFF3CD;
    --yellow-alert-border: #FFEEBA;
    --red-alert-font: #842029;
    --red-alert-bg: #F8D7DA;
    --red-alert-border: #F5C2C7;

    /*Events*/

    --yellow-01-mouse-over: #FCA952;
    --red-01-mouse-over: #C83414;

    /*Hover Colors*/
    --green-02: #EAF2F4;
    --salmon-02: #e83e20;
    --green-03: #22646E;
    --gray-01: #F2F2F2;

    /*Base color set*/
    --white: #fff;
    --pale-petrol: #E1F0EB;
    --light-petrol: #A5DCD7;
    --petrol: #00787A;
    --dark-petrol:#003C3C;
    --lime:#D2E100;

    /*Hover*/
    --lime-hover:#D7EB00;
    --petrol-hover:#008C91;
}

.gray03 {
    color: var(--gray-05);
    font-size: 12px;
}

.color-gray04 {
    color: var(--gray-04);
}