.box_account {
    padding: 80px 0;
}

.box_account h3 {
    font-size: 1.125rem;
    margin-bottom: 10px;
}

.box_account .form_container {
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    padding: 25px;
    position: relative;
}

.box_account .form_container hr {
    margin: 0 0 10px 0;
    border-color: #ededed;
}

.box_account .form_container a.social_bt {
    margin-bottom: 0;
    min-width: inherit;
}

@media (max-width: 991px) {
    .box_account .form_container a.social_bt {
        margin-bottom: 5px;
    }
}

.box_account .form_container .form-group {
    margin-bottom: 10px;
}

.box_account .form_container #forgot_pw {
    height: 100% !important;
    min-height: inherit;
    background-color: #f4f4f4;
    padding: 15px;
}

.bg-white {
    background: #FFFFFF;
    border-radius: 4px;
}

.account-account ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-account .title {
    border-bottom: 2px solid #f8f8f8;
    padding: 15px 20px;
}

.account-account .title h1,
.account-account .title h3 {
    margin: 0;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}

.transaction {
    position: relative;
    background: #efefef;
    padding: 30px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
}

.transaction span {
    display: block;
    font-weight: bold;
}

.transaction .transaction-title {
    margin-bottom: 15px;
    border-bottom: 1px solid #f8f8f8;
    padding-bottom: 15px;
    line-height: 1;
}

.account-list + .account-list {
    margin-top: 15px;
}

.account-list .lists {
    padding: 0 15px;
}

.account-list + .account-list .lists {
    padding: 15px;
    border-top: 2px solid #f8f8f8;
}

.account-list .lists li + li {
    margin-top: 5px;
}

.account-list .lists li a {
    height: 35px;
    line-height: 35px;
    display: block;
    color: #000000;
    padding: 0 10px;
}

.account-list .lists li a.active,
.account-list .lists li a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.account-list .lists li a i {
    margin-left: 10px;
    font-size: 20px;
}

.bg-white .form-group [class*="col-"] {
    padding: 0 !important;
}

.bg-white .content {
    padding: 0 20px 20px;
}

.bg-white .pt-20 {
    padding-top: 20px;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}
.orders .box-order {
    border-radius: 3px;
    margin-bottom: 16px;
    border: 1px solid #eaeaea;
    padding: 10px 6px;
    display: block;
}
.box-order .info-order h3 {
    font-size: 17px;
}
.box-order .box-order-header .date {
    color: rgba(0,0,0,.74);
    font-size: 12px;
}
.box-order .box-order-header h3 {
    font-size: 17px;
    font-weight: bold;
    color: #000;
}
.order-step-container {
    padding: 15px 16px 45px;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    z-index: 0;
}
.container-steps {
    position: relative;
    z-index: 0
}

.completed + .only-border:before {
    border: 2px solid #77c323 !important
}

.pause + .only-border:before {
    border: 2px solid #f8db69 !important
}

.step:not(.completed):not(.canceled):not(.returned):not(.invalid):not(.pause):before {
    background-color: #fff;
    border: 2px solid #e1e1e1
}

.steps {
    display: flex;
    justify-content: space-between
}

.step, .steps {
    position: relative
}

.step {
    height: 12px;
    flex: 1
}

.step:last-child {
    flex: 0.2
}

.step:not(:last-child):after {
    content: "";
    height: 62%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    border-bottom: 2px solid #e1e1e1
}

.step.completed:not(:last-child):after {
    border-bottom: 2px solid #77c323
}

.step.pause:not(:last-child):after {
    border-bottom: 2px solid #f8db69
}

.step.invalid:not(:last-child):after {
    border-bottom: 2px solid #818181
}

.step.canceled:not(:last-child):after {
    border-bottom: 2px solid #d0021b
}

.step:before {
    content: "\f00c";
    position: absolute;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    top: 1px;
    right: 0;
    left: 0;
    font-size: 7px;
    border-radius: 100%;
    width: .7rem;
    height: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #b4b4b4;
    z-index: 9
}

.step.invalid:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjUgLS41KSIgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMy4yNjQiIGN5PSIxMy4wOTMiIHI9IjExLjI5NCIgZmlsbD0iIzgxODE4MSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik05LjcyMSA4LjU5N2wzLjQxNCAzLjQxNCAzLjQxNi0zLjQxNGEuNzk0Ljc5NCAwIDExMS4xMjQgMS4xMjRsLTMuNDE1IDMuNDE0IDMuNDE1IDMuNDE2YS43OTQuNzk0IDAgMDEtLjU2MiAxLjM1OC43OS43OSAwIDAxLS41NjItLjIzNGwtMy40MTYtMy40MTUtMy40MTQgMy40MTVhLjc5Ljc5IDAgMDEtMS4xMjQgMCAuNzk0Ljc5NCAwIDAxMC0xLjEyNGwzLjQxNC0zLjQxNi0zLjQxNC0zLjQxNGEuNzk0Ljc5NCAwIDExMS4xMjQtMS4xMjR6Ii8+PC9nPjwvc3ZnPg==) 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: ""
}
.step.canceled:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjUgLS41KSIgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMy4yNjQiIGN5PSIxMy4wOTMiIHI9IjExLjI5NCIgZmlsbD0iI0QwMDIxQiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik05LjcyMSA4LjU5N2wzLjQxNCAzLjQxNCAzLjQxNi0zLjQxNGEuNzk0Ljc5NCAwIDExMS4xMjQgMS4xMjRsLTMuNDE1IDMuNDE0IDMuNDE1IDMuNDE2YS43OTQuNzk0IDAgMDEtLjU2MiAxLjM1OC43OS43OSAwIDAxLS41NjItLjIzNGwtMy40MTYtMy40MTUtMy40MTQgMy40MTVhLjc5Ljc5IDAgMDEtMS4xMjQgMCAuNzk0Ljc5NCAwIDAxMC0xLjEyNGwzLjQxNC0zLjQxNi0zLjQxNC0zLjQxNGEuNzk0Ljc5NCAwIDExMS4xMjQtMS4xMjR6Ii8+PC9nPjwvc3ZnPg==) 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: ""
}

.step.completed:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTEgMTEuNSkiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMTEiIGZpbGw9IiM3N0MzMjMiLz48cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0xMC4zNTcgMTQuODNsMi40NzItMi42MjFMOC4zMSA3LjY5Ii8+PC9nPjwvc3ZnPg==) 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: ""
}
.step.pause:before {
    background: url(data:image/svg+xml;base64,DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIzIiBoZWlnaHQ9IjIzIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMSAxMS41KSIgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSIxMSIgZmlsbD0iI2Y4ZGI2OSIvPjxwYXRoIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNCIgZD0iTTEwLjM1NyAxNC44M2wyLjQ3Mi0yLjYyMUw4LjMxIDcuNjkiLz48L2c+PC9zdmc+) 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: ""
}

.step.returned:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTEgMTEpIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9Im5vbmUiPjxjaXJjbGUgY3g9IjExIiBjeT0iMTEiIHI9IjExIiBmaWxsPSIjNjFCRkUzIi8+PHBhdGggZmlsbD0iI0ZGRiIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii4yIiBkPSJNOS41MjQgOC40MTh2Ni4xMDJsLTEuMjQ4LTEuMjQ4YS40NS40NSAwIDAwLS42MzcuNjM2bDIuMDE3IDIuMDE3YS40NS40NSAwIDAwLjYzNyAwbDIuMDE2LTIuMDE3YS40NDguNDQ4IDAgMDAwLS42MzYuNDQ5LjQ0OSAwIDAwLS42MzYgMGwtMS4yNDkgMS4yNDhWOC40MThhMS43NyAxLjc3IDAgMDExLjc2Ny0xLjc2NyAxLjc3IDEuNzcgMCAwMTEuNzY3IDEuNzY3djMuNzEyYS40NS40NSAwIDEwLjkgMFY4LjQxOGEyLjY3IDIuNjcgMCAwMC0yLjY2Ny0yLjY2NyAyLjY3IDIuNjcgMCAwMC0yLjY2NyAyLjY2N3oiLz48L2c+PC9zdmc+) 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: ""
}

.step.selected:before {
    content: "";
    border: 2px solid #77c323;
    background: #fff
}
@media (max-width: 992px) {
    .order-step-container {
        padding: 15px 16px 40px !important
    }
}

.order-progress-step .step:before {
    height: 25px;
    width: 25px;
    font-size: 11px
}

.order-progress-step .step {
    padding: 12px 2px
}
.container-steps .steps p {
    font-size: 12px;
    position: absolute;
    top: 34px;
    right: -30px;
    text-align: justify;
    padding: 0 9px;
    width: 105px;
}

.total-item {
    font-size: 17px;
}
.box-order .box-order-body {
    padding: 10px;
}
.box-order .box-order-body .list-order-image li {
    padding: 5px;
}