/* --progress bar css -- */
#progressbar {
    margin: 0px 0;
    overflow: hidden;
    color: rgb(88, 45, 206);
    display: flex;
    overflow-x: auto;
    padding: 40px 0;
}

#progressbar .active {
    color: red;
}

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: -webkit-fill-available;
    float: left;
    position: relative;
    font-weight: 400;
    text-align: center;
    flex: 0 0 20%;
    max-width: 20%;
    width: 100%;
}

#progressbar #account:before {
    font-family: FontAwesome;
    content: "\f251";
}

#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f058";
}

#progressbar #payment:before {
    font-family: FontAwesome;
    content: "\f0d1";
}

#progressbar #confirm:before {
    font-family: FontAwesome;
    content: "\f110";
}

#progressbar #delivered:before {
    font-family: FontAwesome;
    content: "\f164";
}

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #f79999;
    background: rgb(48, 147, 172);
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    text-align: center;
    position: relative;
    z-index: 1;
}

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

#progressbar li.active:before,
#progressbar li.active:after {
    background: green;
}
#progressbar li strong {
    color: green;
}

#progressbar::-webkit-scrollbar {
    width: 10px;
    height: 5px;
}

/* Track */
#progressbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
#progressbar::-webkit-scrollbar-thumb {
    background: #dcdcdc;
}
.package-detail-info {
    row-gap: 20px;
}

.packege-progress {
    margin: 0px 0;
    overflow: hidden;
    color: rgb(88, 45, 206);
    display: flex;
    overflow-x: auto;
    padding: 40px 0;
}
.packege-progress li {
    list-style-type: none;
    font-size: 15px;
    float: left;
    position: relative;
    font-weight: 400;
    text-align: center;
    flex: 0 0 20%;
    max-width: 20%;
    width: 100%;
}
.icon-div .icon-bg {
    width: 50px;
    height: 50px;
    background: #dcdcdc;
    border-radius: 50%;
    display: inline-flex;
    z-index: 1;
    position: relative;
    align-items: center;
    justify-content: center;
}
.progress-text p {
    color: #dcdcdc;
}
.icon-div .icon-bg .ti, .icon-div .icon-bg .fa {
    color: #ffffff;
    font-size: 22px;
}

.icon-div {
    position: relative;
    margin-bottom: 10px;
}
.icon-div:after {
    content: "";
    width: 100%;
    height: 2px;
    background: #dcdcdc;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: 0;
}
.packege-progress li.active .icon-bg,
.packege-progress li.active .icon-div:after {
    background: green;
}
.packege-progress li.active .progress-text p {
    color: #000000;
}
/* --progress bar  meadia css -- */
@media only screen and (max-width: 1300px) {
    .packege-progress li {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    .packege-progress li {
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
    }
}
@media only screen and (max-width: 460px) {
    .packege-progress li {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    #progressbar::-webkit-scrollbar {
        height: 7px;
    }
}

/* theme setup - accordion css */
.setting-accordion .accordion-item {
    border: 1px solid #e0e6ef !important;
}

.setting-accordion .accordion-header {
    background: #f8f8f8;
    /* border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px; */
}

.accordion-header {
    background: #f8f8f8;
}

.setting-accordion .accordion-header .accordion-button {
    background: #f8f8f8 !important;
    display: flex;
    justify-content: space-between;
    box-shadow: none;
    border-bottom: 1px solid transparent;
}

.setting-accordion .accordion-header .accordion-button:not(.collapsed) {
    border-color: #e0e6ef;
}

.setting-accordion .accordion-header .accordion-button span {
    flex: 1;
}

.setting-accordion .accordion-header .accordion-button::after {
    margin: -6 3 0 8px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath opacity='0.4' d='M12 22.4146C17.5228 22.4146 22 17.9374 22 12.4146C22 6.8917 17.5228 2.41455 12 2.41455C6.47715 2.41455 2 6.8917 2 12.4146C2 17.9374 6.47715 22.4146 12 22.4146Z' fill='%2325314C'/%3E%3Cpath d='M15.5301 12.8845C15.2371 12.5915 14.762 12.5915 14.469 12.8845L12.749 14.6045V8.41455C12.749 8.00055 12.413 7.66455 11.999 7.66455C11.585 7.66455 11.249 8.00055 11.249 8.41455L11.249 14.6035L9.52908 12.8835C9.23608 12.5905 8.76104 12.5905 8.46804 12.8835C8.17504 13.1765 8.17504 13.6516 8.46804 13.9446L11.468 16.9446C11.537 17.0136 11.62 17.0684 11.711 17.1064C11.802 17.1444 11.9001 17.1646 11.9981 17.1646C12.0961 17.1646 12.1929 17.1444 12.2849 17.1064C12.3769 17.0684 12.4591 17.0136 12.5281 16.9446L15.5281 13.9446C15.8231 13.6516 15.8231 13.1775 15.5301 12.8845Z' fill='%2325314C'/%3E%3C/svg%3E");
    background-size: 24px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.setting-accordion .accordion-item:not(:last-of-type) {
    margin-bottom: 15px;
}
