/* Extra CSS for the FlexiContact Plus demo site Version 18.03 */

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.step_outer {background-color:white}

.step {display:inline-block;width:calc(25% - 26px);height:50px;box-sizing:border-box;position:relative;vertical-align:middle;
    border-top-left-radius:3px;border-bottom-left-radius:3px;
    line-height:50px;margin:0 25px 3px 0;text-align:center;font-size:22px;color:white;font-family:Roboto;
    text-transform:uppercase;white-space:nowrap}

.step:after {content:"";position:absolute;right:-25px;bottom:0;width:0;height:0;
      border-top:25px solid transparent;border-bottom:25px solid transparent}

.step-done {background:#009688}
.step-done:after {border-left:25px solid #009688}

.step-this {background:coral}
.step-this:after {border-left:25px solid coral}

.step-to-do {background:lightgray}
.step-to-do:after {border-left:25px solid lightgray}

@media screen and (max-width:1000px) {.step {font-size:18px;}}

@media screen and (max-width:600px) {.step {font-size:15px;white-space:normal;line-height:16px;padding-top:10px}}

.fcp_table td {padding:4px 25px}