.woocommerce-MyAccount-content { max-width: 400px; margin-left: calc(50vw - 200px); } .container-progressbar { width: 80%; transform: translate(0, 0); margin: 18px 10% 90px; } .steps { position: relative; display: flex; justify-content: space-between; width: 100%; } .step { width: 20px; height: 20px; background: #fff; border: 2px solid #acaca6; border-radius: 50%; transition: background 1s; position: relative; .status-image { width: 80px; height: 80px; position: absolute; top: 25px; left: -32px; } } .step.selected { border: 2px solid #f9b004; } .step.completed { border: 2px solid #f9b004; background: #f9b004; } .step.cancelled { background: #d7120b; border: 2px solid #d7120b; } .progress { position: absolute; width: 100%; height: 50%; border-bottom: 2px solid #acaca6; z-index: -1; } .percent { position: absolute; width: 0; top: 2px; height: 100%; border-bottom: 2px solid #f9b004; z-index: 1; transition: width 1s; } p { margin: 16px 0; } .woocommerce-order-details { &__title { font-weight: 600; font-size: 18px; } } .woocommerce-table { border: 2px solid #dee2e6; border-radius: 0.25rem; border-collapse: separate; text-align: left; margin-top: 8px; th { font-weight: 600; } th, td { padding: 0.7rem 1.5rem; border-bottom: 2px solid #dee2e6; } } .woocommerce-column { &__title { margin-top: 16px; font-weight: 600; font-size: 18px; } } address { border: 1px solid #dee2e6; border-bottom-width: 2px; border-right-width: 2px; text-align: left; width: 100%; border-radius: 5px; padding: 10px 12px; margin-top: 8px; }