.size-18 {
        width: 16px;
        height: 16px;
    }

    .size-28 {
        width: 24px;
        height: 24px;
    }

    .size-38 {
        width: 38px;
        height: 38px;
    }

    .size-48 {
        width: 48px;
        height: 48px;
    }

    .size-60 {
        width: 60px;
        height: 60px;
    }

    .size-20p {
        width: 20%;
        height: 20%;
    }

    .size-30p {
        width: 30%;
        height: 30%;
    }

    .size-50p {
        width: 50%;
        height: 50%;
    }

    .cardprogress {
        z-index: 0;
        border: none;
        position: relative
    }

    .fs-title {
        font-size: 25px;
        color: #3ab767;
        margin-bottom: 15px;
        font-weight: normal;
        text-align: left
    }

    .purple-text {
        color: #3ab767;
        font-weight: normal
    }

    .steps {
        font-size: 25px;
        color: gray;
        margin-bottom: 10px;
        font-weight: normal;
        text-align: right
    }

    .fieldlabels {
        color: gray;
        text-align: left
    }

    #progressbar {
        margin-bottom: 30px;
        margin-right: 30px;
        overflow: hidden;
        color: lightgrey
    }

    #progressbar .active {
        color: #3ab767
    }
    #progressbar .notactive {
        color: #FF0000;
    }

    #progressbar li {
        list-style-type: none;
        font-size: 15px;
        width: 12.5%;
        float: left;
        position: relative;
        font-weight: 400
    }

    #progressbar #write:before {
        font-family: Feather;
        content: "\e958"
    }

    #progressbar #submit:before {
        font-family: Feather;
        content: "\e9c2"
    }
    #progressbar #check:before {
        font-family: Feather;
        content: "\e9c1"
    }


    #progressbar #considering:before {
        font-family: Feather;
        content: "\e9f6"
    }

    #progressbar #consideration:before {
        font-family: Feather;
        content: "\e919"
    }

    #progressbar #signcontract:before {
        font-family: Feather;
        content: "\e95a"
    }

    #progressbar #Operations:before {
        font-family: Feather;
        content:  "\e94d"
    }
    #progressbar #completion:before {
        font-family: Feather;
        content: "\e92c"
    }

    #progressbar li:before {
        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
    }

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

    #progressbar li.active:before,
    #progressbar li.active:after {
        background: #3ab767
    }
    #progressbar li.notactive:before,
    #progressbar li.notactive:after {
        background: #FF0000;
    }
    .progress {
        height: 20px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    .progress-bar {
        background-color: #673AB7;
        width: 20%;
    }

    .fit-image {
        width: 100%;
        object-fit: cover
    }