.ltr, .LTR {
    direction: ltr
}

.rtl, .RTL {
    direction: rtl
}

.icon-gallerymedia i {
    position: absolute;
    top: 45%;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 43px;
    color: #fff;
    z-index: 999;
}


.currency-rls:after {
    font-size: 0.6em;
    content: "ریال";
    margin-right: 2px;
}

.currency-tmn:after {
    font-size: 0.6em;
    content: "تومان";
    margin-right: 2px;
}

.currency-tmn-m:after {
    font-size: 0.6em;
    content: "تومان/ماه";
    margin-right: 2px;
}

.currency-tmn-y:after {
    font-size: 0.6em;
    content: "تومان/سال";
    margin-right: 2px;
}

label.required:after {
    content: "*";
    color: #ff0000;
    margin: 0;
    font-weight: bold;
    margin: 0 0 0 5px;
    width: 3px;
    height: 3px;
}

.quantity {
    position: relative;
    height: 100%;
    width: 80px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.quantity input {
    width: 100%;
    height: 35px;
    line-height: 1.65;
    float: right;
    display: block;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    border: 1px solid #c9c9c9;
    text-align: center;
}

    .quantity input:focus {
        outline: 0;
    }

.quantity-nav {
    float: left;
    position: relative;
    height: 35px;
    left: 25px;
}

.quantity-button {
    position: relative;
    cursor: pointer;
    border-right: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    border-top: 1px solid #c9c9c9;
    width: 25px;
    text-align: center;
    color: #333;
    font-size: 13px;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.7;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    line-height: 2.7;
}

    .quantity-button.quantity-up {
        position: absolute;
        height: 100%;
        left: 0;
    }

    .quantity-button.quantity-down {
        position: absolute;
        height: 100%;
        right: -103px;
    }


.form-group.FileUploader label {
    display: block;
}

.form-group.FileUploader .btn:not(.fileinput-exists):before, .form-group.uploader .btn.upload:before, .FileUploader .btn:not(.fileinput-exists):before {
    content: '\f0ee';
    margin-left: 4px;
    font-family: 'Font Awesome\ 5 Pro';
}



.jcrop-holder {
    width: 100% !important;
}


.form-group.FileUploader .btn--sm {
    padding-right: 0.85714286em;
    padding-left: 0.85714286em;
}

    .form-group.FileUploader .btn--sm * {
        cursor: pointer;
    }

.form-group.FileUploader input[type="file"] {
    font-size: 12px !important;
    top: -8px;
    height: 50px;
}

.uploader .FilePreview {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
    display: block;
    padding: 25px;
}

    .uploader .FilePreview i {
        font-size: 3em;
    }

#cropper img {
    max-width: 400px;
    max-height: inherit !important;
}

.fa-li {
    right: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit;
}

.swal-icon {
    margin-bottom: 10px !important;
}

.swal-title {
    color: #000 !important;
    font-weight: 900 !important;
    padding: 0 !important;
    font-size: 32px !important;
}

.swal-text {
    text-align: center !important;
    font-size: 21px !important;
    color: #5a5a5a !important;
}

.swal-footer {
    text-align: center !important;
}

.swal-icon--error {
    border-color: #ff0000 !important;
}

.swal-icon--error__line {
    background-color: #ff0000 !important;
}

.swal-icon--success__ring {
    border: 4px solid hsla(98,55%,69%,0.5) !important;
}

.swal-button {
    background-color: #377dff !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    padding: 12px 24px !important;
}

    .swal-button:hover {
        background-color: #1f66ea !important;
        box-shadow: 0 4px 11px rgba(55, 125, 255, 0.35) !important;
    }

    .swal-button:focus {
        box-shadow: none !important;
    }



/* Timer */
.countdown {
    text-align: center;
    direction: ltr
}

.jst-hours {
    display: none;
}

.jst-minutes {
    display: inline
}

.jst-seconds {
    display: inline
}

.jst-clearDiv {
}

.jst-timeout {
    color: red;
}

/*slider Swiper*/

.btn-link.dropdown-toggle::after {
    transition: all 0.2s ease-in-out;
}

.form-group {
    margin-bottom: 1.5rem;
}

.error {
    border-color: #dc3545;
    color: #dc3545;
}

span.error {
    border-color: #dc3545;
    color: #dc3545;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
}

.media {
    display: flex;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.h-250rem {
    height: 15.625rem;
}

.interactive-banners-style-11 .interactive-banners-box, .interactive-banners-style-11 .interactive-banners-box .interactive-banners-box-image {
    position: relative;
    overflow: hidden;
}

    .interactive-banners-style-11 .interactive-banners-box-image .interactive-banners-text-overlay, .interactive-banners-style-11 .interactive-banners-box .interactive-banners-text-content, .interactive-banners-style-11 .interactive-banners-box .interactive-banners-box-image img {
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
    }

.interactive-banners-style-11 .interactive-banners-box-image .interactive-banners-text-overlay {
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}

.interactive-banners-style-11 .interactive-banners-box:hover .interactive-banners-text-overlay {
    opacity: .77;
}

.interactive-banners-style-11 .interactive-banners-box:hover .interactive-banners-box-image img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

.interactive-banners-style-11 .interactive-banners-box .interactive-banners-text-content {
    position: absolute;
    width: 100%;
    left: 0px;
    top: auto;
    z-index: 9;
    bottom: 0px;
    height: auto;
    transform: translateY(73px);
    -webkit-transform: translateY(73px);
    -moz-transform: translateY(73px);
    -ms-transform: translateY(73px);
}

.interactive-banners-style-11 .interactive-banners-box:hover .interactive-banners-text-content {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
}

.interactive-banners-style-11 .interactive-banners-box .interactive-banners-text-content .btn {
    opacity: 0;
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
}

.interactive-banners-style-11 .interactive-banners-box:hover .interactive-banners-text-content .btn {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
}

.hover-img-blur-zome .img-hover, .hover-img-blur-zome .card-footer {
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

.hover-img-zome .blog-post-image img {
    -webkit-transition: all 1s cubic-bezier(0,0,.2,1);
    -moz-transition: all 1s cubic-bezier(0,0,.2,1);
    -ms-transition: all 1s cubic-bezier(0,0,.2,1);
    transition: all 1s cubic-bezier(0,0,.2,1);
}

.hover-img-zome .blog-post-image {
    overflow: hidden;
    position: relative;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.bg-gradient-red-orange {
    background-image: linear-gradient(45deg,#ff0000 0,rgba(232,166,38,.9) 100%);
}


.hover-card-style-1:hover .blog-post-image img {
    opacity: 0.6 !important;
}

.hover-img-zome:hover .blog-post-image img {
    opacity: 1;
    -webkit-transform: scale3d(1.1,1.1,1.1);
    -moz-transform: scale3d(1.1,1.1,1.1);
    -ms-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
}



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

.text-justify {
    text-align: justify;
}

/* border style */
.border-dotted {
    border-style: dotted !important;
}

.border-dashed {
    border-style: dashed !important;
}

.border-solid {
    border-style: solid !important;
}

.border-double {
    border-style: double !important;
}

.border-groove {
    border-style: groove !important;
}

.border-ridge {
    border-style: ridge !important;
}

.border-inset {
    border-style: inset !important;
}

.border-outset {
    border-style: outset !important;
}

.border-none {
    border-style: none !important;
}

.border-hidden {
    border-style: hidden !important;
}

.border-transperent {
    border-color: transparent !important;
}


.avatar-xxl.avatar-circle .avatar-status {
    bottom: 0.3rem;
    right: 0.3rem;
}


.blur-img {
    -webkit-filter: blur(64px);
    filter: blur(64px);
}

    .blur-img:after {
        content: '';
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.60);
        z-index: 1;
    }
/***********************rate*/
.rate {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    padding: 0 10px;
}

    .rate:not(:checked) > input {
        position: absolute;
        top: -9999px;
    }

    .rate:not(:checked) > label {
        float: right;
        width: 1em;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 30px;
        color: #ccc;
    }

        .rate:not(:checked) > label:before {
            content: '★ ';
        }

    .rate > input:checked ~ label {
        color: #ffc700;
    }

    .rate:not(:checked) > label:hover,
    .rate:not(:checked) > label:hover ~ label {
        color: #deb217;
    }

    .rate > input:checked + label:hover,
    .rate > input:checked + label:hover ~ label,
    .rate > input:checked ~ label:hover,
    .rate > input:checked ~ label:hover ~ label,
    .rate > label:hover ~ input:checked ~ label {
        color: #c59b08;
    }

.jcrop-holder {
    width: 100% !important;
}

.help-block-error {
    color: #ff0000;
    margin-top: 10px;
    display: block;
}


.form-group.FileUploader label {
    display: block;
}

.form-group.FileUploader .btn:not(.fileinput-exists):before, .form-group.uploader .btn.upload:before, .FileUploader .btn:not(.fileinput-exists):before {
    content: '\f0ee';
    margin-left: 4px;
    font-family: 'Font Awesome\ 5 Pro';
}


.form-group.FileUploader .btn {
    padding-right: 0.85714286em;
    padding-left: 0.85714286em;
}

    .form-group.FileUploader .btn * {
        cursor: pointer;
    }

.form-group.FileUploader input[type="file"] {
    font-size: 12px !important;
    top: -8px;
    height: 50px;
    z-index: 1;
}

.uploader .FilePreview {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
    display: block;
    padding: 25px;
}

    .uploader .FilePreview i {
        font-size: 3em;
    }




.hotspots {
    position: relative;
}

    .hotspots img {
        display: block;
        width: 100%;
    }

.hotspot {
    position: absolute;
    width: 3.625rem;
    height: 3.625rem;
    border-radius: 50%;
    z-index: 5;
    cursor: pointer;
}

    .hotspot::before, .hotspot::after {
        position: absolute;
        border-radius: 50%;
    }

    .hotspot::before {
        top: 50%;
        left: 50%;
        width: 2.375rem;
        height: 2.375rem;
        margin-top: -1.1875rem;
        margin-left: -1.1875rem;
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
        background-color: #fff;
        color: #000;
        font-family: "Font Awesome 5 Pro";
        font-size: 1rem;
        text-align: center;
        line-height: 2.375rem;
        box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.2);
        content: "\f067";
    }

    .hotspot::after {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #faf3f3;
        content: "";
    }

    .hotspot:hover::before {
        background-color: #000;
        color: #fff;
    }

.ColorBadge {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    vertical-align: middle
}

.form-control-xs {
    min-height: calc(1.2em + 1.125rem);
    padding: 0.2rem 1rem;
    font-size: 0.8rem;
    border-radius: 0.3125rem;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn {
    padding: 8px 10px;
    left: 0;
    height: 25px !important;
    width: 25px !important;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
    top: 26px !important;
}

.bootstrap-touchspin .input-group-btn-vertical i {
    top: 6px !important;
    left: 9px !important;
}

.bootstrap-touchspin input.TouchSpin {
    height: 51px !important;
    margin-left: 28px !important;
}


.overlay:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0;
    width: var(--width, 100%);
    height: 100%;
    border-radius: 0;
    background-color: var(--background-color, #000);
    right: 0;
    opacity: var(--opacity, 0.3);
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    visibility: visible;
    z-index: 1000;
    top: 0;
    display: none;
}

    #overlay.show {
        display: block;
    }

    #overlay.hide {
        display: none;
    }

    #overlay .overlay-container {
        text-align: center;
        top: calc( 50% - 100px);
        position: relative;
        z-index: 10001;
        width: 200px;
        margin: auto;
        background: #fff;
        border-radius: 10px;
        padding: 20px;
    }

.form-switch .form-check-input {
    width: 2.8125em;
    height: 1.5125em;
    border-width: 0;
    margin-top: -0.25em;
    margin-left: 0.75rem;
}

.form-switch.text-end {
    padding: 0;
}

.form-check-label {
    vertical-align: top;
}

.form-check.text-end .form-check-input {
    float: inherit;
    margin: 0;
}


.list-group.selectable .active {
    background: #fff;
    border-color: #1aba17;
    color: #39434d !important;
}

    .list-group.selectable .active .badge {
        background: #1aba17;
        color: #fff;
    }

.list-group.selectable .list-group-item {
    padding-right: 100px;
    color: #39434d;
}

    .list-group.selectable .list-group-item.active:before {
        content: '\f00c';
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        background: #1aba17;
        border-left: 1px solid #1aba17;
        color: #fff;
    }

    .list-group.selectable .list-group-item:before {
        content: '\f0c8';
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 20px;
        display: block;
        float: right;
        height: 100%;
        padding-top: 25px;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 85px;
        border-left: 1px solid #ddd;
    }

.list-group .list-group-item .price {
    border-right: 1px solid #ddd;
    float: left;
    padding: 0 10px 0 0;
    min-width: 100px;
    text-align: left;
    font-size: 18px;
    line-height: 24px;
}

.list-group .list-group-item.active .price {
}

.list-group .list-group-item .price .currency {
    font-size: 12px;
}

.list-group.selectable.narrow .list-group-item:before {
    padding-top: 12px;
}


.list-group.not-selectable .list-group-item {
    padding-right: 12px;
    cursor: default;
}

    .list-group.not-selectable .list-group-item:hover {
        background: none;
    }

    .list-group.not-selectable .list-group-item.disabled:hover, .list-group-item.disabled:focus {
        cursor: not-allowed;
        background-color: #eee;
    }

.list-group .list-group-item .price {
    border-right: 1px solid #ddd;
    float: left;
    padding: 0 10px 0 0;
    min-width: 100px;
    text-align: left;
    font-size: 18px;
    line-height: 24px;
}

    .list-group .list-group-item .price .currency {
        font-size: 12px;
    }

.list-group.not-selectable.narrow .list-group-item:before {
    padding-top: 12px;
}

.list-group-icon {
    font-size: 21px;
    padding: 5px 0 5px 10px;
    vertical-align: middle;
}

#OnlineGateways {
    margin-top: 10px;
}

    #OnlineGateways li {
        list-style: none;
        display: inline-block;
        padding: 5px;
        border: #ced6de 1px solid;
        margin-left: 5px;
        position: relative;
    }

        #OnlineGateways li.select {
            border: #1aba17 1px solid;
        }

            #OnlineGateways li.select:before {
                content: '';
                width: 0;
                height: 0;
                border-top: 20px solid #1aba17;
                border-left: 20px solid transparent;
                position: absolute;
                top: 0;
                right: 0;
            }

        #OnlineGateways li img {
            width: 55px;
            height: 55px;
        }

.menu-cart-count {
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    right: -7px;
    font-size: 0.8rem;
    background: var(--bs-primary);
    color: #fff;
}

/*******************************************************Audio**/
.plyr--audio .plyr__controls {
    background-color: transparent !important;
    border-radius: 34px !important;
    color: #0153dc !important;
    padding: 10px !important;
}

.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
    background: #0153dc !important;
    color: #fff !important;
}

.plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 5px rgba(1, 83, 220, 0.45) !important;
    outline: 0 !important;
}

.plyr--full-ui input[type=range] {
    color: #0153dc !important;
}

#tracks {
    text-align: center;
}

    #tracks a {
        cursor: pointer;
        margin: 0 5px;
        color: #0153dc !important;
    }


#plList li {
    position: relative;
    cursor: default;
    display: block;
    margin: 0 0 5px 0px;
    padding: 10px 0;
    border-radius: 5px;
}

    #plList li:hover {
        background-color: rgba(0,0,0,.1);
    }

.plItem {
    position: relative;
}

.plTitle {
    left: 50px;
    overflow: hidden;
    position: absolute;
    right: 65px;
    text-overflow: ellipsis;
    top: 0;
    white-space: nowrap;
}

.plNum {
    padding-right: 21px;
    width: 25px;
}

.plLength {
    padding-right: 21px;
    position: absolute;
    left: 21px;
    top: 0;
    cursor: pointer;
}

.btn-download {
    position: absolute;
    left: 10px;
    top: 10px;
    cursor: pointer;
}

.plSel,
.plSel:hover {
    background-color: rgba(0,0,0,.1);
    color: #0153dc !important;
    cursor: default !important;
}

.plyr button {
    height: 2.5em;
}

.plSel.video .plLength {
    padding-right: 5px;
    position: absolute;
    left: 0px;
    top: -2px;
    cursor: pointer;
    width: 60%;
}

#plList li.video {
    position: relative;
    background: #fff;
    padding: 11.5px 0;
}


    #plList li.video:hover {
        background-color: rgba(0,0,0,.1);
    }

.plSel.video .plItem {
    position: unset;
}

.video .plTitle {
    left: unset;
    overflow: hidden;
    position: static;
    right: unset;
    text-overflow: ellipsis;
    top: unset;
    white-space: nowrap;
    margin-right: 23px;
    width: 40%;
    font-size: 15px;
}


/*******************************************************Audio**/



@media (max-width: 990px) {
    .plyr button {
        margin-top: 0;
    }

    .plyr__controls .plyr__controls__item:first-child {
        margin-top: 0;
    }

    .plSel.video .plLength {
        padding-right: 0;
        position: relative;
        left: 0px;
        top: 0;
        cursor: pointer;
        width: 100%;
        display: block;
    }
}


/* arabic symbols */

.symbol {
}
/*.symbol:after {
    content: '';
    width: 100px;
    height: 100px;
    display:inline-block
}
.salavat {
    background: url(../svg/symbols/salavat.svg) no-repeat center;
    background-size: cover;
}
.rahmatollah {
    background: url(../svg/symbols/salavat.svg) no-repeat center;
    background-size: contain;
}*/


.admin_bar {
    background: #000;
    color: #fff !important;
    font-size: .8em;
    position: fixed;
    bottom: 0;
    padding: 0 10px;
    z-index: 9999;
}

    .admin_bar ul {
        padding: 0;
        margin: 0;
    }

    .admin_bar li {
        display: inline;
    }

    .admin_bar a {
        background: #000;
        color: #fff !important;
        padding: 5px;
        display: inline-block
    }


.admin_edit {
    position: relative;
}

    .admin_edit:hover {
        border: 1px dashed #ccc;
        ;
    }

.admin_edit_btn {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    content: 'ویرایش';
    background: #ccc;
    padding: 5px;
}

.admin_edit:hover .admin_edit_btn {
    display: block;
}

.hs-mega-menu-desktop-lg, .hs-sub-menu-desktop-lg {
    right: 0;
}

.hs-mega-menu .hs-mega-menu, .hs-mega-menu .hs-sub-menu, .hs-menu-vertical .hs-mega-menu, .hs-menu-vertical .hs-sub-menu, .hs-sub-menu .hs-mega-menu, .hs-sub-menu .hs-sub-menu {
    right: 80%;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.navbar-dark .navbar-nav .dropdown-menu .nav-link {
    color: #677788;
}

    .navbar-dark .navbar-nav .dropdown-menu .nav-link:hover {
        color: #0153dc;
    }


.navbar-dark .logo-dark {
    display: block
}

.navbar-dark .logo-light {
    display: none
}

.navbar-light .logo-light {
    display: block
}

.navbar-light .logo-dark {
    display: none
}

.navbar-scrolled {
    box-shadow: 0 0 5px rgba(33, 50, 91, 0.35)
}

.main-firstpage {
    margin-top: -112px
}

main:has(> header.navbar-sticky-top:not(.header-first-page)) {
    margin-top: 112px;
}

#post-detail video {
    object-fit: cover;
    border-radius: 10px
}


.swiper-button-prev:after,
.swiper-button-next:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300; /* برای Solid */
    background-image: none;
    font-size: 1.1em;
    padding: 0 4px;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
    background-image: none;
}


.swiper-button-prev:after {
    content: "\f054" !important; /* chevron-left */
}

.swiper-button-next:after {
    content: "\f053" !important; /* chevron-right */
}

.swiper-button-next-soft-white, .swiper-button-prev-soft-white {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
}

.content-list article {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
    position: relative
}

    .content-list article:last-child {
        margin-bottom: 0;
        border-bottom: 0px solid #ededed;
    }

    .content-list article i {
        position: absolute;
        top: 5px;
        right: 0;
        font-size: 0.8em;
    }

    .content-list article h6 {
        line-height: 1.5em;
        padding-right: 15px;
        display: block
    }

    .content-list article a:hover h6 {
        color: #0153dc;
    }

.badge-xs {
    font-size: 0.7em;
    font-weight: normal;
    padding: 2px 3px 0 3px
}

.step-icon-sm .step-icon::after, .step-icon-sm.step-icon::after {
    top: 2.7rem;
    left: inherit;
    width: 1.625rem;
    height: calc(100% - 1.75rem);
    right: 1.3rem
}

.device-iphone-x {
    border-radius: 2.75rem;
    box-shadow: 0px 12px 15px rgba(140, 152, 164, 0.1);
}

.device {
    position: relative;
}

.device-iphone-x-frame {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
}

.device-iphone-x-screen {
    position: absolute;
    top: 2.4%;
    left: 4%;
    width: 92.4%;
    height: 96%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0.5rem;
}