html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

*:focus-visible {
    outline: none;
}

.progressbar {
    counter-reset: step;
}

    .progressbar li {
        list-style-type: none;
        width: 25%;
        float: left;
        font-size: 12px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        color: #7d7d7d;
    }

        .progressbar li:before {
            width: 30px;
            height: 30px;
            content: counter(step);
            counter-increment: step;
            line-height: 30px;
            border: 2px solid #7d7d7d;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            border-radius: 40%;
            background-color: white;
        }

        .progressbar li:after {
            width: 80%;
            height: 2px;
            content: '';
            position: absolute;
            background-color: #7d7d7d;
            top: 15px;
            left: -40%;
        }

        .progressbar li:first-child:after {
            content: none;
        }

        .progressbar li.complete {
            color: green;
            font-weight: bold;
        }

            .progressbar li.complete:before {
                border-color: green;
            }

            .progressbar li.complete + li:after {
                background-color: green;
            }

        .progressbar li.active {
            color: blue;
            font-weight: bold;
        }

            .progressbar li.active:before {
                border-color: blue;
            }

            /*.progressbar li.active + li:after {
                background-color: #55b776;
            }*/



#progressbarcontainer {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

/*Icon progressbar*/
#progressbar {
    margin-bottom: 10px;
    overflow: hidden;
    color: lightgrey;
}

    #progressbar .active {
        color: #3b71ca;
        font-weight: bold;
    }

    #progressbar .cancelled {
        color: #000000;
    }

    #progressbar .completed {
        color: #14A44D;
    }

        #progressbar .completed.clarification {
            color: #ffc107;
        }

    #progressbar li {
        list-style-type: none;
        font-size: 12px;
        width: 10%;
        float: left;
        position: relative;
        text-align: center;
        z-index: 2;
    }

    /*Icons in the ProgressBar*/

    #progressbar .completed:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f00c";
        z-index: 2;
    }

    #progressbar .completed.clarification:before{
        content: "\e1e7";
    }

    #progressbar .customer:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f007";
        z-index: 2;
    }

    #progressbar .customerref:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f007";
        z-index: 2;
    }

    #progressbar .testpieces:before {
        font-family: "Font Awesome 6 Pro";
        content: "\e438";
        z-index: 2;
    }

    #progressbar .tests:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f733";
        z-index: 2;
    }

    #progressbar .materialgrade:before {
        font-family: "Font Awesome 6 Pro";
        content: "\e1cf";
        z-index: 2;
    }

    #progressbar .witness:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f1e5";
        z-index: 2;
    }

    #progressbar .heattreatment:before {
        font-family: "Font Awesome 6 Pro";
        content: "\e00c";
        z-index: 2;
    }

    #progressbar .servicelevel:before {
        font-family: "Font Awesome 6 Pro";
        content: "\e29e";
        z-index: 2;
    }

    #progressbar .pricing:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f154";
        z-index: 2;
    }

    #progressbar .additionalcosts:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f217";
        z-index: 2;
    }

    #progressbar .clarifications:before {
        font-family: "Font Awesome 6 Pro";
        content: "\e1e3";
        z-index: 2;
    }

    #progressbar .create:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f11e";
        z-index: 2;
    }

    #progressbar .notching:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f02e";
        z-index: 2;
    }

    #progressbar .sawing:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f275";
        z-index: 2;
    }
    #progressbar .roughmachining:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f013";
        z-index: 2;
    }

    #progressbar .machining:before {
        font-family: "Font Awesome 6 Pro";
        content: "\e5e9";
        z-index: 2;
    }

    #progressbar .testuseother:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f737";
        z-index: 2;
    }

    #progressbar .hold:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f256";
        z-index: 2;
    }

    #progressbar .test:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f46c";
        z-index: 2;
    }

    #progressbar .outsourced:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f46c";
        z-index: 2;
    }

    #progressbar .complete:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f00c";
        z-index: 2;
    }

    #progressbar .cancelled:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f00d";
        z-index: 2;
        background: #000000 !important;
    }


    /*Icon ProgressBar before any progress*/
    #progressbar li:before {
        position: relative;
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 20px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px;
        z-index: 2;
    }

    #progressbar li.small:before {
        position: relative;
        width: 37px;
        height: 37px;
        line-height: 34px;
        display: block;
        font-size: 15px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 8px auto;
        padding: 2px;
        z-index: 2;
    }

    /*ProgressBar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: 1;
    }

    #progressbar li.small:after {
        top: 17px;
    }

    /*Color number of the step and the connector before it*/
    #progressbar li.active:before, #progressbar li.active:after {
        background: #3b71ca;
    }

    #progressbar li.completed:before, #progressbar li.completed:after {
        background: #14A44D;
    }

    #progressbar li.completed.clarification:before, #progressbar li.completed.clarification:after {
        background: #ffc107;
    }

    #progressbar li.cancelled:before, #progressbar li.cancelled:after {
        background: #000000;
    }

    #progressbar a {
        color: #14A44D;
    }

.tooltip-inner {
    font-size: 0.75rem;
    text-align: left;
    max-width: 350px;
}

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

.invoice-text-small {
    font-size: 12px;
}

.invoice-text-medium {
    font-size: 14px;
}