progress::-moz-progress-bar {
    background: red;
}

progress[value]::-webkit-progress-bar {
    background-color: red;
}

progress::-webkit-progress-value {

    background: lightgreen;


}

progress[value] {
    appearance: none; /* Needed for Safari */
    border: none; /* Needed for Firefox */
    color: lightgreen; /* Fallback to a solid color */
}

 WebKit styles
progress[value]::-webkit-progress-value {
    /*background-image: linear-gradient(*/
            /*to right,*/
            /*#ff8a00, #e52e71*/
    /*);*/
    /*transition: width 1s linear;*/
     background-color:lightgreen;
     color: lightgreen;
}

/* Firefox styles */
progress[value]::-moz-progress-bar {
    /*background-image: -moz-linear-gradient(*/
            /*right,*/
            /*#ff8a00, #e52e71*/
    /*);*/
    background-color: lightgreen;
    color: lightgreen;

}

.invWidth{
    width: 150px;
}

.dateLabel{
    font-size: small;
    color: gray;;
}

.bold{
    font-weight: bold;
}

.onxCell{
    background: rgb(236 241 236);
    border-radius: 5px;
    min-height: 50px;
    padding: 5px 10px;
    font-size: small;
    border: 1px solid #dedada;
}

.onxHeaderCell{
    min-height: 50px;
    padding: 3px;
}


.activeBubble{
    background-color: #2cd47b;
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.draftBubble{
    background-color: rgb(145, 88, 138);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.pendingBubble{
    background-color: rgb(210, 153, 31);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.completedBubble{
    background-color: rgb(74, 81, 155);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.incompletedBubble{
    background-color: rgb(129, 160, 168);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

#leftMenu{
    width:200px;
    height: 100vh;
    background-color: white;
    display: inline-block;
}

.evenRow{
    background-color: white;
    padding: 10px;
}

.oddRow{
    padding: 10px;
}

.orderMenueOverlay{
    background-color: rgb(169, 133, 133);
    color: white;
}

.paymentsMenueOverlay{
    background-color: rgb(133, 133, 169);
    color: white;
}

.makeGoodMenueOverlay{
    background-color: rgb(133, 169, 156);
    color: white;
}

.reportingMenueOverlay{
    background-color: rgb(169, 133, 164);
    color: white;
}

.inventoryMenueOverlay{
    background-color: rgb(168, 169, 133);
    color: white;
}

.dashboardMenueOverlay{
    background-color: rgb(136, 133, 169);
    color: white;
}

.panelHeader{
    font-weight: bold;
    font-size: 20px;
    color: #7aadb7;
    margin-bottom: 0px;
}

.pageHeader{
    font-weight: bold;
    font-size: 26px;
    color: #7aadb7;

}


.panelSubheader{
    margin-bottom: 3px;
    font-weight: bold;
    margin-top: 20px;
}

.onxLabel{
    font-weight: bold;
    color: #b4b4b4;
}

.offcanvas-start{
    width:600px
}

.onxLabel2{
    color: #b4b4b4;
    /* font-weight: 100; */
    font-size: small;;
    margin-bottom: 3px;
    padding-left: 10px;
}

.onxValue{
    color: #7aadb7;
}

.metricRow{
    margin-bottom: 5px;;
}

.onxPanel{
    padding: 20px;
    background: white;
    border-radius: 10px;
    /* width:300px; */
    /* height: 100%; */
}

.leftMenuItem-selected{
    font-weight: bold;
    /* background: #f7f7f7; */
    /* color: white; */
    padding: 15px 20px;
    /* color:#7aadb7; */
}

#leftMenuHeader{
    background-color: black;
    color:white;
    /* height: 60px; */
}

.leftMenuItem{
    padding: 15px 20px;
}

.leftMenuItem:hover{
    background: #f7f7f7;
    /* color: white; */
    cursor:pointer !important;
}

a:hover{
    color:#7aadb7;
}

.onxInput{
    padding: 10px 20px;
    background: transparent;
    border-radius: 30px;
}

.onxInput_sm{
    padding: 5px 10px;
    background: transparent;
    border-radius: 30px;
}

.ellipsesOneLineField{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
}

.canvas{
    padding: 40px;
    min-width:1500px;
    overflow: scroll;
    height: 100vh;
}

.onxLink{
    text-decoration: none;
    color:inherit;
}

.onxIcon{
    font-size: 26px;
}

.onxIcon:hover{
    cursor: pointer;
    color: gray;
}

.roundButton{
    padding: 10px;
    border-radius: 50%;
}

.roundButton:hover{
    background-color: #efefef;
    cursor: pointer;
}

.onxSelect{
    background-color: transparent;
    color: white;
    border-radius:20px;
    padding: 10px;
}

.onxSelect_sm{
    background-color: transparent;
    color: white;
    border-radius:20px;
    padding: 5px 10px;
}

.onxSelectDark{
    background-color: transparent;
    color: rgb(55, 52, 52);
    border-radius:20px;
    padding: 10px;
}

body{
    background-color: rgb(247, 247, 247);
}

.proposal{
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.proposal:hover{
    cursor: pointer;
    background-color: white;
}