.vertical-hr-home {
    border-left: 3px solid #39A92B;
    height: 500px;
    margin: auto;
    display: table;
    align-items: center;
    text-align: center;
}


.form-control.is-valid, .form-control.is-invalid {
    background-position: right calc(1em + .1875rem) center !important;
}

@font-face {
    font-family: Poppins;
    src: url('../fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-light;
    src: url('../fonts/poppins/Poppins-Light.ttf');
}

@font-face {
    font-family: Poppins-thin;
    src: url('../fonts/poppins/Poppins-Thin.ttf');
}

@font-face {
    font-family: Poppins-medium;
    src: url('../fonts/poppins/Poppins-Medium.ttf');
}
@font-face {
    font-family: Poppins-semibold;
    src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}

html {
    height: 100%
}

body {
    font-family: Poppins !important;
}

.text-dark{
    color:#000!important;
}

small{
    font-size:12px!important;
}

.small{
    font-size:12px!important;
}

.poppins-light {
    font-family: Poppins-extralight !important;
}

.poppins-thin {
    font-family: Poppins-thin !important;
}

.poppins-medium {
    font-family: Poppins-medium !important;
}

.swiper-button-grey {
    --swiper-theme-color: #707070;
}

.d-content-green-pea {
    display: contents !important;
}

.container-side-by-side-greenpea {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.readonly-input {
    background-color: #e9ecef;
    opacity: 1;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    pointer-events: none !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
}

.poppins-font {
    font-family: Poppins !important;
}

b{
    font-family: Poppins-semibold !important;
}

p {
    color: grey
}

.footer-green-pea {
    flex-shrink: 0;
}

.heading {
    text-transform: uppercase;
    color: #25b702;
    font-weight: normal
}

.table-filter-focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,.25);
}

.mg-top-home {
    margin-top: -22%;
}

.form-green-pea {
    text-align: center;
    position: relative;
}

    .form-green-pea fieldset {
        background: white;
        border: 0 none;
        border-radius: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding-bottom: 20px;
        position: relative
    }

.form-card {
    text-align: left
}

.form-green-pea fieldset:not(:first-of-type) {
    display: none
}

.form-green-pea input:focus,
.form-green-pea textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #25b702;
    outline-width: 0
}

.home-bg-building {
    background: url("../img/building-home.png");
    background-repeat: no-repeat;
    background-position: right bottom !important;
}

.rounded-greenpea {
    border-radius: 0.45rem !important;
}

.greenpea-border-success {
    border-color: #5EAC41 !important;
}

.border-greenpea {
    border: 2px solid #5EAC41 !important;
}

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

.otium-static-width {
    max-width: 1700px;
}
.otium-static-width p{
    max-width: 1700px;
    color: #35413B !important;
}

.otium-static-width b {
    font-family: Poppins-semibold;
}

.otium-title-purchase {
    font-family: Poppins;
    height: 3.125rem;
    width: 25rem;
    font-size: 3.125rem;
    font-weight: 100 !important;
    letter-spacing: 0;
    line-height: 3.125rem;
    text-align: center;
}

.otium-info-subtitle {
    height: 4.5rem;
    width: 34.563rem;
    font-size: 0.875rem;
    letter-spacing: 6px;
    text-align: center;
    line-height: 1.5rem;
}

.otium-landing-subtitle {
    height: 1.5rem;
    width: 34.563rem;
    font-family: Poppins;
    font-size: 0.875rem;
    letter-spacing: 6px;
    line-height: 1.5rem;
    text-align: center;
}

.otium-landing-text6 {
    height: 3.5rem;
    width: 34.563rem;
    font-family: Poppins-semibold;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.75rem;
    text-align: center;
}

.otium-info-body, .otium-landing-body {
    width: 34.313rem;
    font-family: Poppins-light;
    font-size: 0.813rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5rem;
}

.btn-otium-purchase {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2.4px;
}

.border-green {
    border-color: #5EAC41 !important;
}

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

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

.line-steps {
    position: relative;
    top: 1.1rem;
    z-index: -1;
    border-top: 3px solid;
    color: #39A92B !important;
}

.progressed {
    overflow: hidden;
    color: #39A92B;
}

    .progressed .active {
        color: white;
        background-color: #5EAC41;
    }

    .progressed li {
        list-style-type: none;
        display: inline-block;
        background: #fff;
        width: 5rem;
        height: 5rem;
        border-radius: 40px;
        border: 1px solid #5EAC41;
        font-size: 2rem;
    }

        .progressed li:before {
            width: 5rem;
            height: 5rem;
            line-height: 45px;
            display: block;
            font-size: 3.3rem;
            color: #ffffff;
            background: lightgray;
            border-radius: 50%;
        }

        .progressed li.active:before,
        .progressed li.active:after {
            background: #25b702
        }

.progress {
    height: auto;
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: right;
}

.progress-container {
    font-family: Poppins;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: right;
}

.progress-bar {
    background-color: #25b702;
}

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

.iti {
    display: block !important;
}

.text-invalid-feed {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: 'Carica' !important;
}

.img-checkbox {
    width: auto !important;
    height: auto !important;
    margin-top: -19px;
}

.state-mg {
    margin-top: 0;
}

.pretty.p-image .state img {
    width: auto;
    height: auto
}

.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #5EAC41 !important;
    border-color: #5EAC41 !important;
}

.btn-outline-success:hover {
    color: #fff;
    background-color: #5EAC41 !important;
    border-color: #5EAC41 !important;
}

table.dataTable thead tr {
    background-color: #F5F6FA !important;
}

    table.dataTable thead tr th {
        border: none !important;
    }

@media print {
    .no-print {
        display: none
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    .print-consents {
        display: grid;
        justify-content: center;
        align-items: center;
        width: 60% !important;
        height: 100%;
        font-size: 1.4rem !important
    }

    .print-signature {
        margin-top: 5rem
    }

    .print-consents-member-card {
        display: grid;
        justify-content: center;
        align-items: center;
        width: 0% !important;
        margin-left: -19%;
        height: 100%;
        font-size: 1.4rem !important
    }
}

.profile-user:active,
.profile-user:hover,
.profile-user:focus {
    text-decoration: none;
    outline: none;
}

.profile-user::before {
    background-color: black;
    position: absolute;
    content: '';
    height: 2%;
    left: 83%;
    top: 35%;
    -webkit-transition: width 0.2s ease-in;
    transition: 0.4s ease all;
    width: 0;
    z-index: -1;
}

.profile-user:hover::before {
    width: 14%;
}

.profile-user-reg:active,
.profile-user-reg:hover,
.profile-user-reg:focus {
    text-decoration: none;
    outline: none;
}

    .profile-user-reg:hover::before {
        width: 11%;
    }

.profile-user-reg::before {
    background-color: black;
    position: absolute;
    content: '';
    height: 2%;
    left: 86%;
    top: 88%;
    -webkit-transition: width 0.2s ease-in;
    transition: 0.4s ease all;
    width: 0;
    z-index: -1;
}

.circle-sm {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    margin-top: 0.5rem !important;
}

.circle-md {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    margin-top: 1rem !important;
}

.circle-lg {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    margin-top: 1.5rem !important;
}

.circle-green {
    background-color: #39A92B;
}

.circle-navbar-white {
    margin-top: -2rem !important;
    height: 3rem;
    width: 3rem;
    background-color: white;
    border-radius: 50%;
    padding-top: 1rem;
    display: flex
}

.circle-navbar {
    height: 2rem;
    width: 2rem;
    background-color: white;
    border-radius: 50%;
    margin-top: 1rem !important;
}

.circle-navbar-small {
    height: 1rem;
    width: 1rem;
    background-color: #39A92B;
    border-radius: 50%;
    margin-top: 0.5rem !important;
}

.clr-bg-green {
    background-color: #5EAC41 !important
}

.clr-bg-lightgreen {
    background-color: #5eac4124 !important
}

.clr-bg-yellow-light {
    background-color: #F8F5DA !important
}

.clr-bg-grey {
    background-color: #707070 !important
}

.clr-bg-blue {
    background-color: #05293A !important
}

.clr-bg-blue-light {
    background-color: #668F9A !important
}

.clr-bg-light-white-blue {
    background-color: #CCE6EC !important
}

.clr-bg-white {
    background-color: #F8F5DA !important
}

.clr-bg-grey-light {
    background-color: #F5F6FA !important
}

.clr-green {
    color: #5EAC41 !important
}

.clr-grey {
    color: #707070 !important
}

.clr-lightgrey {
    color: #d3d3d3 !important
}

.clr-blue {
    color: #05293A !important
}

.clr-blue-light {
    color: #668F9A !important
}

.clr-light-white-blue {
    color: #CCE6EC !important
}

.clr-white {
    color: #F8F5DA !important
}

.clr-grey-light {
    color: #CBC9C9 !important
}

.mg-top-images {
    margin-top: -2.5rem
}

.horizontal-hr-green {
    display: block;
    border: 3px;
    border-top: 3px solid #39A92B;
    margin: 0.5rem 0;
    padding: 0;
}

.horizontal-hr-white {
    display: block;
    border: 3px;
    border-top: 1px solid white;
    margin: 0.3rem 0;
    padding: 0;
    margin-left: 14rem;
    margin-right: 14rem;
}

.horizontal-hr-black {
    display: block;
    border: 3px;
    border-top: 1px solid black;
    margin: 0.3rem 0;
    padding: 0;
    margin-left: 14rem;
    margin-right: 14rem;
}

.membership-hr-green {
    display: block;
    border: 3px;
    border-top: 1px solid #39A92B;
    padding: 0;
    width: 100%;
    margin-left: 0rem;
    margin-right: 0rem;
}

.sidebar-container {
    position: fixed;
    width: 220px;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #5EAC41;
    color: #fff;
}

.content-container {
    padding-top: 20px;
}

.sidebar-logo {
    padding: 10px 15px 10px 30px;
    font-size: 20px;
    background-color: #2574A9;
}

.sidebar-navigation {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}

    .sidebar-navigation li {
        background-color: transparent;
        position: relative;
        display: inline-block;
        width: 100%;
        line-height: 10px;
    }

        .sidebar-navigation li a {
            padding: 10px 15px 10px 30px;
            display: block;
            color: #fff;
        }

        .sidebar-navigation li .fa {
            margin-right: 10px;
        }

        .sidebar-navigation li a:active,
        .sidebar-navigation li a:hover,
        .sidebar-navigation li a:focus {
            text-decoration: none;
            outline: none;
        }

        .sidebar-navigation li:not(.collapse)::before {
            background-color: #fff;
            position: absolute;
            content: '';
            height: 1.9px;
            left: 24%;
            top: 100%;
            -webkit-transition: width 0.2s ease-in;
            transition: 0.4s ease all;
            width: 0;
            z-index: -1;
        }

        .sidebar-navigation li:hover::before {
            width: 40%;
        }

    .sidebar-navigation .header {
        font-size: 12px;
        text-transform: uppercase;
        background-color: #151515;
        padding: 10px 15px 10px 30px;
    }

        .sidebar-navigation .header::before {
            background-color: transparent;
        }

.sub-lvl-navigation {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}

    .sub-lvl-navigation li {
        background-color: transparent;
        position: relative;
        display: inline-block;
        width: 100%;
        line-height: 20px;
    }

        .sub-lvl-navigation li a {
            padding: 10px 15px 10px 15px;
            display: block;
            color: #fff;
        }

        .sub-lvl-navigation li .fa {
            margin-right: 10px;
        }

        .sub-lvl-navigation li a:active,
        .sub-lvl-navigation li a:hover,
        .sub-lvl-navigation li a:focus {
            text-decoration: none;
            outline: none;
        }

        .sub-lvl-navigation li:not(.collapse)::before {
            background-color: #fff;
            position: absolute;
            content: '';
            height: 2px;
            left: 24%;
            top: 100%;
            -webkit-transition: width 0.2s ease-in;
            transition: 0.4s ease all;
            width: 0;
            z-index: -1;
        }

        .sub-lvl-navigation li:hover::before {
            width: 40%;
        }

    .sub-lvl-navigation .header {
        font-size: 12px;
        text-transform: uppercase;
        background-color: #151515;
        padding: 10px 15px 10px 30px;
    }

        .sub-lvl-navigation .header::before {
            background-color: transparent;
        }

.content-container {
    padding-left: 220px;
}

.btm-position-sidebar {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.underline .custom-underline::after {
    top: 62.5%;
    height: 2px;
    width: 90%;
    left: 5%;
    background-color: rgba(255, 255, 255, 0.6);
    transition: 0.3s ease all .1s;
}

.underline:hover .custom-underline::after {
    top: 67.5%;
    transition: 0.4s ease all;
}

.card {
    border: none !important
}

.card-code {
    font-size: 90%;
    font-weight: 700 !important;
    letter-spacing: 0.25px;
}

.page-link {
    color: black !important;
    background-color: white !important;
    border-color: black !important;
    border-radius: 3rem !important;
    padding: 0.3rem .70rem;
}

.active > .page-link {
    color: #fff !important;
    background-color: #5EAC41 !important;
    border-color: #5EAC41 !important;
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #5EAC41;
}

.fnt-size-table {
    font-size: small;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control:before {
    background-color: #5EAC41 !important
}

.fnt-size-password {
    font-size: 1.4rem !important
}

.disabled-link {
    pointer-events: none;
    opacity: .65;
}

.fnt-size-detail {
    font-size: 20px !important;
}

#progressbar li:nth-child(2) {
    border-left: 0 !important;
    position: relative;
    left: -1rem;
    z-index: -1;
}

#progressbar li:nth-child(3) {
    border-left: 0 !important;
    position: relative;
    left: -2rem;
    z-index: -2;
}

#progressbar li:last-child {
    border-left: 0 !important;
    position: relative;
    left: -3rem;
    z-index: -3;
}

.preActiveCreate {
    font-weight: bold !important;
    border-color: #FFF !important;
    color: #FFF !important;
}

#progressbar li.active {
    font-weight: bold !important;
    background-color: #ffc107 !important;
    color: #FFF !important;
}

#progressbar li.rounded-right {
    color: #ffc107;
    font-weight: lighter;
    border-left: 0 !important;
    border-top-right-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
    font-size: 0.75rem !important;
}

#wizard fieldset:not(:first-of-type) {
    display: none;
}

#progressbar li {
    list-style-type: none;
}

#wizard fieldset:not(:first-of-type) {
    display: none
}

#progressbar li {
    list-style-type: none;
}

.select2-container *:focus {
    outline: none;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #5EAC41;
}

.select2-selection__choice__remove {
    color: white !important;
}

.select2-selection__choice {
    color: white !important;
}

.h-100px {
    height: 100px;
}

.h-500px {
    height: 500px;
}

.select2-container-restyle {
    min-width: 15rem !important;
    min-width: 100% !important;
}

.select2-container-restyle-product {
    min-width: 35rem !important;
    min-width: 100% !important;
}

.bg-color-light-brown {
    background-color: #f9f5d7 !important;
}

.input-preview-src {
    visibility: hidden;
    position: absolute;
}

.width-preview-image {
    width: 11rem !important;
    height: 6rem !important;
}

.input-preview {
    border-radius: 4px;
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: ease-in-out 750ms;
    cursor: pointer;
    border: 1px solid #5EAC41;
}

    .input-preview::after {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translateY(50%);
        content: "Aggiungi...";
        font-style: italic;
        font-size: 0.7em;
    }

.has-image::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.5);
    content: " ";
    transition: ease-in-out 750ms;
}

.image-delete {
    right: 1px;
    cursor: pointer;
}

.pointer{
    cursor:pointer;
}

.preview-img-template {
    max-width: 25%;
}

.remove_field{
    display:none;
}

.remove_field.show{
    display:block!important;
}

@media all and (min-width:375px) {
    .line-steps {
        top: 1.6rem !important;
    }
}

@media all and (min-width:991px) {
    .line-steps {
        top: 2.1rem !important;
    }
}

@media all and (min-width:1199px) {
    .line-steps {
        top: 2.6rem !important;
    }

    .swiper-max-height {
        max-height: 14rem;
    }
}

@media (max-width: 1440px) {
    .fnt-size-18 {
        font-size: 11px !important;
    }

    .fnt-size-detail {
        font-size: 18px !important;
    }

    .fnt-size-16 {
        font-size: 16px !important;
    }

    .swiper-max-height {
        max-height: 8rem;
    }
}

@media all and (max-width: 1199px) {

    .swiper-max-height {
        max-height: 15rem;
    }

    .fnt-size-18 {
        font-size: 11px !important;
    }

    .fnt-size-16 {
        font-size: 14px !important;
    }

    .fnt-size-detail {
        font-size: 11px !important;
    }

    .progressed {
        overflow: hidden;
        color: #39A92B;
    }

        .progressed .active {
            color: white;
            background-color: #5EAC41;
        }

        .progressed li {
            list-style-type: none;
            display: inline-block;
            background: #fff;
            width: 4rem;
            height: 4rem;
            border-radius: 40px;
            border: 1px solid #5EAC41;
            font-size: 1.5rem;
        }

            .progressed li:before {
                width: 5rem;
                height: 5rem;
                line-height: 45px;
                display: block;
                font-size: 3.3rem;
                color: #ffffff;
                background: lightgray;
                border-radius: 50%;
            }

            .progressed li.active:before,
            .progressed li.active:after {
                background: #25b702
            }
}

@media all and (max-width:991px) {

    .swiper-max-height {
        max-height: 12rem;
    }

    .fnt-size-18 {
        font-size: 8px !important;
    }

    .fnt-size-16 {
        font-size: 8px !important;
    }

    .fnt-size-detail {
        font-size: 8px !important;
    }

    .progressed {
        overflow: hidden;
        color: #39A92B;
    }

        .progressed .active {
            color: white;
            background-color: #5EAC41;
        }

        .progressed li {
            list-style-type: none;
            display: inline-block;
            background: #fff;
            width: 3rem;
            height: 3rem;
            border-radius: 40px;
            border: 1px solid #5EAC41;
            font-size: 1.3rem;
            padding: .5rem !important
        }

            .progressed li:before {
                width: 5rem;
                height: 5rem;
                line-height: 45px;
                display: block;
                font-size: 3.3rem;
                color: #ffffff;
                background: lightgray;
                border-radius: 50%;
            }

            .progressed li.active:before,
            .progressed li.active:after {
                background: #25b702
            }

    .sidebar-container {
        position: fixed;
        width: 20%;
        height: 100%;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: #5EAC41;
        color: #fff;
    }

    .content-container {
        padding-top: 20px;
    }

    .sidebar-logo {
        padding: 10px 15px 10px 30px;
        font-size: 20px;
        background-color: #2574A9;
    }

    .sidebar-navigation {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: relative;
    }

        .sidebar-navigation li {
            background-color: transparent;
            position: relative;
            display: inline-block;
            width: 100%;
            line-height: 20px;
        }

            .sidebar-navigation li a {
                padding: 10px 15px 10px 30px;
                display: block;
                color: #fff;
            }

            .sidebar-navigation li .fa {
                margin-right: 10px;
            }

            .sidebar-navigation li a:active,
            .sidebar-navigation li a:hover,
            .sidebar-navigation li a:focus {
                text-decoration: none;
                outline: none;
            }

            .sidebar-navigation li::before {
                background-color: #fff;
                position: absolute;
                content: '';
                height: 5%;
                left: 24%;
                top: 100%;
                -webkit-transition: width 0.2s ease-in;
                transition: 0.4s ease all;
                width: 0;
                z-index: -1;
            }

            .sidebar-navigation li:hover::before {
                width: 40%;
            }

        .sidebar-navigation .header {
            font-size: 12px;
            text-transform: uppercase;
            background-color: #151515;
            padding: 10px 15px 10px 30px;
        }

            .sidebar-navigation .header::before {
                background-color: transparent;
            }
}

@media all and (max-width:991px) {

    .swiper-max-height {
        max-height: 8rem;
    }

    .sidebar-container {
        position: fixed;
        width: 21%;
        height: 100%;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: #5EAC41;
        color: #fff;
    }

    .sidebar-navigation li {
        background-color: transparent;
        position: relative;
        display: inline-block;
        width: 100%;
        line-height: 20px;
        font-size: 10px;
    }
}

@media all and (max-width: 767px) {

    .swiper-max-height {
        max-height: 17rem;
    }

    .progressed {
        overflow: hidden;
        color: #39A92B;
    }

        .progressed .active {
            color: white;
            background-color: #5EAC41;
        }

        .progressed li {
            list-style-type: none;
            display: inline-block;
            background: #fff;
            width: 3rem;
            height: 3rem;
            border-radius: 40px;
            border: 1px solid #5EAC41;
            font-size: 1.3rem;
        }

            .progressed li:before {
                width: 5rem;
                height: 5rem;
                line-height: 45px;
                display: block;
                font-size: 2.3rem;
                color: #ffffff;
                background: lightgray;
                border-radius: 50%;
            }

            .progressed li.active:before,
            .progressed li.active:after {
                background: #25b702
            }
}

@media all and (max-width:575px) {

    .swiper-max-height {
        max-height: 12rem;
    }

    .vertical-hr-home {
        display: block;
        margin-top: 3rem !important;
        height: 5rem;
        border: 3px;
        border-top: 3px solid #39A92B;
        margin: 3em 0;
        padding: 0;
    }

    @media all and (max-width:543px) {
        .progressed li {
            list-style-type: none;
            display: inline-block;
            background: #fff;
            width: 3rem;
            height: 3rem;
            border-radius: 40px;
            border: 1px solid #5EAC41;
            font-size: 1.3rem;
        }
    }

    @media (max-width: 532px) {
        .progressed {
            overflow: hidden;
            color: #39A92B;
        }

            .progressed .active {
                color: white;
                background-color: #5EAC41;
            }

            .progressed li {
                list-style-type: none;
                display: inline-block;
                background: #fff;
                width: 3rem;
                height: 3rem;
                border-radius: 40px;
                border: 1px solid #5EAC41;
                font-size: 1.3rem;
            }

                .progressed li:before {
                    width: 5rem;
                    height: 5rem;
                    line-height: 45px;
                    display: block;
                    font-size: 3.3rem;
                    color: #ffffff;
                    background: lightgray;
                    border-radius: 50%;
                }

                .progressed li.active:before,
                .progressed li.active:after {
                    background: #25b702
                }
    }

    @media (max-width: 496px) {
        .progressed {
            overflow: hidden;
            color: #39A92B;
        }

            .progressed .active {
                color: white;
                background-color: #5EAC41;
            }

            .progressed li {
                list-style-type: none;
                display: inline-block;
                background: #fff;
                width: 3rem;
                height: 3rem;
                border-radius: 40px;
                border: 1px solid #5EAC41;
                font-size: 1.3rem;
            }

                .progressed li.active:before,
                .progressed li.active:after {
                    background: #25b702
                }
    }

    @media (max-width: 456px) {
        .progressed {
            overflow: hidden;
            color: #39A92B;
        }

            .progressed .active {
                color: white;
                background-color: #5EAC41;
            }

            .progressed li {
                list-style-type: none;
                display: inline-block;
                background: #fff;
                width: 3rem;
                height: 3rem;
                border-radius: 40px;
                border: 1px solid #5EAC41;
                font-size: 1.3rem;
            }

                .progressed li.active:before,
                .progressed li.active:after {
                    background: #25b702
                }
    }

    @media (max-width: 437px) {
        .progressed {
            overflow: hidden;
            color: #39A92B;
        }

            .progressed .active {
                color: white;
                background-color: #5EAC41;
            }

            .progressed li {
                list-style-type: none;
                display: inline-block;
                background: #fff;
                width: 3rem;
                height: 3rem;
                border-radius: 40px;
                border: 1px solid #5EAC41;
                font-size: 1.3rem;
            }

                .progressed li.active:before,
                .progressed li.active:after {
                    background: #25b702
                }
    }

    @media (max-width: 375px) {
        .progressed {
            overflow: hidden;
            color: #39A92B;
        }

            .progressed .active {
                color: white;
                background-color: #5EAC41;
            }

            .progressed li {
                list-style-type: none;
                display: inline-block;
                background: #fff;
                width: 2rem;
                height: 2rem;
                border-radius: 40px;
                border: 1px solid #5EAC41;
                font-size: 0.7rem;
            }

                .progressed li:before {
                    width: 5rem;
                    height: 5rem;
                    line-height: 45px;
                    display: block;
                    font-size: 3.3rem;
                    color: #ffffff;
                    background: lightgray;
                    border-radius: 50%;
                }

                .progressed li.active:before,
                .progressed li.active:after {
                    background: #25b702
                }
    }

    @media (max-width: 320px) {
        .progressed {
            overflow: hidden;
            color: #39A92B;
        }

            .progressed .active {
                color: white;
                background-color: #5EAC41;
            }

            .progressed li {
                list-style-type: none;
                display: inline-block;
                background: #fff;
                width: 2rem;
                height: 2rem;
                border-radius: 40px;
                border: 1px solid #5EAC41;
                font-size: 0.7rem;
            }

                .progressed li:before {
                    width: 5rem;
                    height: 5rem;
                    line-height: 45px;
                    display: block;
                    font-size: 3.3rem;
                    color: #ffffff;
                    background: lightgray;
                    border-radius: 50%;
                }

                .progressed li.active:before,
                .progressed li.active:after {
                    background: #25b702
                }
    }
}