﻿
.workflowSteps {
    margin: 0 0 1em 0;
    border: solid 1px #d6d6d6;
    padding: 0 0.5em;
    background: #dedede;
    background: -moz-linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebebeb));
    background: -webkit-linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
    background: -o-linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
    background: -ms-linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 );
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #a7a7a7 0 1px 0;
    -moz-box-shadow: #a7a7a7 0 1px 0;
    box-shadow: #a7a7a7 0 1px 0;
}

    .workflowSteps input {
        cursor: pointer;
        border: none;
        font-size: 110%;
        padding: 0.5em 1em 0.5em 0.5em;
        margin: 0;
        color: #000;
        background: url("https://comuneparma.elixforms.it/rwe2/images/wf_bar.png") right no-repeat;
    }

        .workflowSteps input.current {
            background: url("https://comuneparma.elixforms.it/rwe2/images/wf_bar_active.png") right no-repeat;
            /*	background: url("/rwe2/images/wf_bar_active__new.png") right no-repeat;
	color: white;*/
        }

            .workflowSteps input.current:hover {
                background-image: url("https://comuneparma.elixforms.it/rwe2/images/wf_bar_active_hover.png");
                /*	background-image: url("/rwe2/images/wf_bar_active_hover__new.png");
	color: white;*/
            }

        .workflowSteps input.confirmed {
            color: #757575;
        }

            .workflowSteps input.confirmed:hover {
                background-image: url("https://comuneparma.elixforms.it/rwe2/images/wf_bar_active_hover.png");
                color: #000;
                /*	background-image: url("/rwe2/images/wf_bar_active__new.png");
	color: white;*/
            }

        .workflowSteps input.notConfirmed {
            color: #8f2cb2;
        }

            .workflowSteps input.notConfirmed:hover {
                background-image: url("https://comuneparma.elixforms.it/rwe2/images/wf_bar_active_hover.png");
                color: #000;
                /*	background-image: url("/rwe2/images/wf_bar_active__new.png");
	color: white;*/
            }
        /* DISABLED */
        .workflowSteps input[type="button"][disabled] {
            color: #000;
        }

        .workflowSteps input.current[type="button"][disabled],
        .workflowSteps input.current:hover[type="button"][disabled] {
            cursor: not-allowed;
        }

        .workflowSteps input.confirmed[type="button"][disabled],
        .workflowSteps input.confirmed:hover[type="button"][disabled] {
            color: grey;
            cursor: not-allowed;
        }

        .workflowSteps input.notConfirmed[type="button"][disabled],
        .workflowSteps input.notConfirmed:hover[type="button"][disabled] {
            color: #8f2cb2;
            cursor: not-allowed;
        }
    /* SEPARATOR */
    .workflowSteps .separator {
        width: 1px;
        padding: 12px 0 10px 0;
        font-size: 1px;
        background: #d6d6d6;
        border-left: solid 1px #fff;
        border-right: solid 1px #fff;
    }


/*OVERRIDE*/
.workflowSteps {
    margin-bottom: 2.222rem;
    border: 0;
    padding: 0;
}

    .workflowSteps input:first-child {
        border-left: 1px solid #c5c7c9 !important;
    }


    .workflowSteps input {
        border-right: 1px solid #c5c7c9 !important;
        padding-right: 30px !important;
        padding-left: 30px !important;
        text-transform: uppercase;
        width: 100%;
        display:block;
    }
@media (min-width: 992px) {
    .workflowSteps input {
        width: auto;
        display: inline;
    }
}

        .workflowSteps input:hover,
        .workflowSteps input:focus {
            background-image: none;
            border-bottom: 2px solid #007a52 !important;
            border-right: 1px solid #c5c7c9 !important;
        }

        .workflowSteps input.current {
            border-bottom: 2px solid #007a52 !important;
            background: none;
            font-weight: 700;
            color: #007a52;
        }

        .workflowSteps input.notConfirmed {
            background: none;
            color: #191919 !important;
            font-weight: 400;
        }

            .workflowSteps input.notConfirmed:hover {
                background-image: none;
                color: #004d99;
            }

            .workflowSteps input.notConfirmed[type="button"][disabled],
            .workflowSteps input.notConfirmed[type="button"][disabled]:hover {
                color: #445668 !important; /*template #5d7083*/
            }

.workflowSteps input.confirmed,
.workflowSteps input.confirmed:hover,
.workflowSteps input.current[data-is-confirmed="true"] {
    font-weight: 700;
    color: #007a52;
    background-image: url("https://comuneparma.elixforms.it/elixFormsCustom/images/PNRR_Comuni_rwe2/icon_step_completed.png");
    background-position: 95%;
    background-repeat: no-repeat;
    padding-right: 40px !important;
}
.workflowSteps {
    background: white;
    box-shadow: none;
}

    .workflowSteps input[type="button"][disabled] {
        cursor: not-allowed;
        pointer-events: all !important; /*this is needed in order to change the cursor*/
        filter: alpha(opacity=65);
        opacity: .65;
    }

        .workflowSteps input[type="button"][disabled]:hover {
            background: none;
        }

    .workflowSteps input {
        font-size: 16px;
    }


        .workflowSteps input.current {
            border-bottom: 2px solid #0c1a57 !important;
            color: #0c1a57;
        }

        .workflowSteps input:hover,
        .workflowSteps input:focus {
            border-bottom: 2px solid #0c1a57 !important;
        }

        .workflowSteps input.confirmed,
        .workflowSteps input.confirmed:hover,
        .workflowSteps input.current[data-is-confirmed="true"] {
            color: #0c1a57;
        }