progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Get rid of default border in Firefox. */
    border: none;
    /* Dimensions */
    
}



progress[value]::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}



.progress-100 {
    color: seagreen;
}

    .progress-100::-webkit-progress-value {
        background-color: seagreen;
    }

    .progress-100::-moz-progress-bar {
        background-color: seagreen;
    }

.progress-75 {
    color: darkorange;
}

    .progress-75::-webkit-progress-value {
        background-color: darkorange;
    }

    .progress-75::-moz-progress-bar {
        background-color: darkorange;
    }

.progress-50 {
    color: indianred;
}

    .progress-50::-webkit-progress-value {
        background-color: indianred;
    }

    .progress-50::-moz-progress-bar {
        background-color: indianred;
    }

.progress-bar {
    background-color: whiteSmoke;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    width: 250px;
    height: 20px;
    position: relative;
    display: block;
}

    .progress-bar > span {
     
        border-radius: 2px;
        display: block;
        text-indent: -9999px;
    }

.mid-blue {
    background-color: #4ba3c4
}

.dark-blue {
    background-color: #175676;
    color: #fff
}

.pink {
    background-color: pink
}

.orange {
    background-color: #f47b1f;
    color: #fff
}

    .orange i {
        color: #fff
    }

.orange-50 {
    background-color: rgba(244,123,31,.5);
    color: #fff
}

.orange-75 {
    background-color: rgba(244,123,31,.75);
    color: #fff
}



.button--small--orange {
    padding: 8px 10px;
    font-size: 14px;
    background-color: #175676; /* dark blue for contrast */
    border-radius: 3px;
}


.sgreen {
    background-color: #49a34f;
    color: white
}

.sgreen-75 {
    background-color: #73b677;
    color: white;
}

.border-sgreen {
    background-color: #73b677;
    padding: 1em;
    border-bottom: 0.25em solid #73b677;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

.sred {
    background-color: #e31736;
    color: white
}

.sred-75 {
    background-color: #e64d64;
    color: white;
}

.border-sred {
    background-color: #e64d64;
    padding: 1em;
    border-bottom: 0.25em solid #e64d64;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

.sorange {
    background-color: #f47b1f;
    color: white
}

.sorange-75 {
    background-color: #f39853;
    color: white;
}

.border-sorange {
    background-color: #f39853;
    padding: 1em;
    border-bottom: 0.25em solid #f39853;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}



.sblue {
    background-color: #175676;
    color: white
}

.sblue-75 {
    background-color: #4ba3c3;
    color: white;
}

.border-sblue {
    background-color: #4ba3c3;
    padding: 1em;
    border-bottom: 0.25em solid #4ba3c3;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

.sgrey {
    background-color: silver;
    color: white
}

.sgrey-75 {
    background-color: gainsboro;
    color: white;
}

.border-sgrey {
    background-color: gainsboro;
    padding: 1em;
    border-bottom: 0.25em solid gainsboro;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}


.red {
    background-color:#CD5C5C;
    color:white;
}

.red-75 {
    background-color: #CD5C5C75;
    color: white;
}