@media(max-width:600px){/*small screen*/
    .md-stepper-horizontal .md-step{
        padding:14px 14px 10px 14px !important;
    }    
}

@media (min-width:620px){ /*big screen*/
    .md-stepper-horizontal .md-step{
        padding:24px 24px 15px 24px;
    }
}


.md-stepper-horizontal .md-step.processing .md-step-circle {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.md-stepper-horizontal .md-step.booked .md-step-circle *,
.md-stepper-horizontal .md-step.beginforcol .md-step-circle *,
.md-stepper-horizontal .md-step.completed .md-step-circle *,
.md-stepper-horizontal .md-step.cancelled .md-step-circle *,
.md-stepper-horizontal .md-step.assigned .md-step-circle *,
.md-stepper-horizontal .md-step.processing .md-step-circle * {
    display:none;
}

.md-stepper-horizontal .md-step.active.booked .md-step-title,
.md-stepper-horizontal .md-step.active.completed .md-step-title,
.md-stepper-horizontal .md-step.active.cancelled .md-step-title,
.md-stepper-horizontal .md-step.active.beginforcol .md-step-title,
.md-stepper-horizontal .md-step.active.assigned .md-step-title,
.md-stepper-horizontal .md-step.active.processing .md-step-title {
    font-weight:600;
}



.md-stepper-horizontal .md-step.booked .md-step-circle:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f073";
}

.md-stepper-horizontal .md-step.completed .md-step-circle:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f560";
}

.md-stepper-horizontal .md-step.cancelled .md-step-circle:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
}

.md-stepper-horizontal .md-step.beginforcol .md-step-circle:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f84a";
}

.md-stepper-horizontal .md-step.processing .md-step-circle:before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f492";
}

.md-stepper-horizontal .md-step.assigned .md-step-circle:before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f183";
    /*    f492*/
}

.md-stepper-horizontal {
    display:table;
    width:100%;
    margin:0 auto;
    background-color:#FFFFFF;
    box-shadow: 0 3px 8px -6px rgba(0,0,0,.50);
}
.md-stepper-horizontal .md-step {
    display:table-cell;
    position:relative;
    padding:24px 24px 15px 24px;
}
.md-stepper-horizontal .md-step:hover,
.md-stepper-horizontal .md-step:active {
    background-color:rgba(0,0,0,0.04);
}
.md-stepper-horizontal .md-step:active {
    border-radius: 15% / 75%;
}
.md-stepper-horizontal .md-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.md-stepper-horizontal .md-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.md-stepper-horizontal .md-step:hover .md-step-circle {
    background-color:#757575;
}
.md-stepper-horizontal .md-step:first-child .md-step-bar-left,
.md-stepper-horizontal .md-step:last-child .md-step-bar-right {
    display:none;
}
.md-stepper-horizontal .md-step .md-step-circle {
    width:20px;
    height:20px;
    margin:0 auto;
    background-color:#999999;
    border-radius: 50%;
    text-align: center;
    line-height:21px;
    font-size: 11px;
    font-weight: 600;
    color:#FFFFFF;
}
.md-stepper-horizontal.green .md-step.active .md-step-circle {
    background-color:#00AE4D;
}
.md-stepper-horizontal.orange .md-step.active .md-step-circle {
    background-color:#4c8256;
}

.md-stepper-horizontal.orange .md-step.active .cancel {
    background-color:#dc1313;
}

.md-stepper-horizontal .md-step.active .md-step-circle {
    background-color: rgb(33,150,243);
}
.md-stepper-horizontal .md-step .md-step-title {
    margin-top:10px;
    font-size:10px;
    font-weight:600;
}
.md-stepper-horizontal .md-step .md-step-title,
.md-stepper-horizontal .md-step .md-step-optional {
    text-align: center;
    color:rgba(0,0,0,.26);
}
.md-stepper-horizontal .md-step.active .md-step-title {
    font-weight: 600;
    color:rgba(0,0,0,.87);
}
.md-stepper-horizontal .md-step .md-step-optional {
    font-size:12px;
}
.md-stepper-horizontal .md-step.active .md-step-optional {
    color:rgba(0,0,0,.54);
}
.md-stepper-horizontal .md-step .md-step-bar-left,
.md-stepper-horizontal .md-step .md-step-bar-right {
    position:absolute;
    top:36px;
    height:1px;
    border-top:1px solid #DDDDDD;
}
.md-stepper-horizontal .md-step .md-step-bar-right {
    right:0;
    left:50%;
    margin-left:20px;
}
.md-stepper-horizontal .md-step .md-step-bar-left {
    left:0;
    right:50%;
    margin-right:20px;
}