/* yekanbakh */
@font-face {
font-display:swap;
    font-family: "yekanbakh";
    src: url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Light.eot');
    src: url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Light.eot?#iefix') format("embedded-opentype"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Light.woff2') format("woff2"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Light.woff') format("woff"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Light.ttf') format("truetype"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Light.svg#YekanBakhFaNum-Light') format("svg");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
font-display:swap;
    font-family: "yekanbakh";
    src: url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Regular.eot');
    src: url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Regular.eot?#iefix') format("embedded-opentype"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Regular.woff2') format("woff2"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Regular.woff') format("woff"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Regular.ttf') format("truetype"), url('/wp-content/plugins/hyperwidget/assets/css/../fonts/yekanbakh/YekanBakhFaNum-Regular.svg#YekanBakhFaNum-Regular') format("svg");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

body.rtl, body.rtl .press-this a.wp-switch-editor {
    font-family: 'yekanbakh';
    font-weight: 200;
}

.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6 {
    font-family: 'yekanbakh';
    font-weight: 200;
}

.csf-nav-normal+.csf-content {
    margin-left: 0;
}

.rtl #wpadminbar * {
    font-family: yekanbakh;
}

.csf-field-text input, .csf-field-textarea textarea, .csf-field-number input, .csf-field-slider input[type="number"] {
    width: 100%;
    border: 1px solid #eee;
    background: #f7f7f7;
    padding: 8px;
    transition: 0.2s;
}

.csf-field .wp-picker-container .wp-color-result.button {
    min-height: 40px;
    margin: 0 0 6px 6px;
    padding: 0 30px 0px 7px;
    font-size: 11px;
    border-radius: 10px;
    border: transparent;
}

.csf-field .wp-color-result-text {
    background: #f6f7f7;
    border-radius: 10px;
    border-right: 1px solid #c3c4c7;
    color: #50575e;
    display: block;
    line-height: 2.54545455;
    padding: 0 6px;
    text-align: center;
}

#pweb_metabox .csf-nav ul {
    display: flex;
}

#pweb_metabox .csf-nav {
    width: 100%;
}

#pweb_metabox .csf-nav ul li {
    display: flex;
    margin: 10px 10px 10px 5px;
}

#pweb_metabox .csf-theme-dark .csf-nav-normal ul li a {
    width: 100%;
    border-radius: 10px;
}

#pweb_metabox .csf-sections {
    width: 100%;
}

#pweb_metabox .csf-theme-dark .csf-nav-background {
    background-color: #222;
    display: none;
}

#pweb_metabox .csf-field .csf-fieldset {
    width: 100%;
    margin-top: 25px;
}

#pweb_metabox .csf-field .csf-title {
    position: relative;
    width: 20%;
    float: left;
    width: 100%;
}

#pweb_metabox .csf-nav-normal+.csf-content {
    margin: 0;
}

@media only screen and (max-width: 1200px) {
    #pweb_metabox .csf-metabox .csf-field .csf-fieldset {
        float: right;
    }
}

.rtl #wpadminbar * {
    font-family: Tahoma, sans-serif;
    font-family: 'yekanbakh';
    font-weight: 200;
}

.rtl #adminmenu .wp-submenu-head, .rtl #adminmenu a.menu-top, .rtl #adminmenu .wp-submenu a {
    font-weight: 200;
}

.dashicons-admin-generic-pweb-options {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashicons-admin-generic-pweb-options::before {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='30' viewBox='0 0 53 30' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.3869 0.121496C9.78383 0.485614 6.85791 1.9468 4.18081 4.72C2.67267 6.28131 1.65276 7.94848 0.980262 9.95166C-0.0337743 12.9713 -0.0795507 16.5252 0.857024 19.4997C2.23841 23.886 6.04339 27.6751 10.4094 29.0106C15.3622 30.5261 21.1166 29.2381 24.7667 25.797C25.8417 24.7827 26.364 24.1474 26.2631 23.9748C26.1035 23.7018 21.8654 18.7164 21.7926 18.7174C21.7563 18.7179 21.5978 18.9484 21.4405 19.2295C20.4476 20.9999 18.7024 22.3604 16.7471 22.8878C15.5065 23.2223 13.698 23.1747 12.4081 22.7739C9.79439 21.9611 7.93884 19.8239 7.31798 16.9092C7.11846 15.9728 7.09616 13.9185 7.27573 13.0292C7.99166 9.48931 10.7251 6.93931 14.0594 6.70319C16.6074 6.52249 19.0134 7.4499 21.0838 9.4119C22.6212 10.8682 23.9792 12.7714 26.3476 16.7886C28.8721 21.0717 30.2746 23.0341 32.1607 24.9245C35.231 27.9998 38.4937 29.4558 42.7259 29.6387C45.315 29.7506 47.1388 29.322 48.9826 28.1686C50.4849 27.2282 51.5835 25.9684 52.3217 24.3404C52.8123 23.256 52.9965 22.2975 53.0001 20.7968C53.0083 17.6411 51.6961 15.4201 48.6305 13.3986C48.0508 13.0159 46.4041 12.107 44.9711 11.3787C41.1614 9.44284 40.8657 9.20672 40.8657 8.10072C40.8657 7.66884 40.9349 7.52837 41.3328 7.14849C41.8116 6.6906 42.5323 6.42519 43.2893 6.4279C44.4089 6.4319 45.9194 7.14284 47.2715 8.30131L48.1505 9.05449L50.3335 6.86001L52.5177 4.66566L52.0013 4.02621C50.7772 2.50865 48.2609 0.932873 46.2058 0.396932C44.9605 0.072214 42.8832 -0.0368333 41.5828 0.154273C38.2332 0.64599 35.4023 2.91145 34.4963 5.82401C34.0092 7.39131 34.069 9.34366 34.6488 10.7813C35.6781 13.3325 37.7003 15.1001 42.2471 17.4238C43.5005 18.0642 44.7751 18.7935 45.0791 19.0441C46.2926 20.0452 46.6553 21.0334 46.1436 21.9472C45.6213 22.8808 44.6918 23.3148 43.2247 23.3104C40.3434 23.3018 37.8776 21.872 35.4258 18.7891C34.2392 17.2972 33.5233 16.2467 31.4365 12.933C29.5892 9.99837 29.2653 9.5206 27.8299 7.60543C25.4638 4.44745 22.9017 2.27477 20.227 1.15794C18.125 0.280178 15.6016 -0.102257 13.3869 0.121496Z' fill='%23F0F0F1'/%3E%3Cpath d='M4.21364 4.72273C6.88722 1.94791 9.80609 0.485861 13.4022 0.121532C15.6122 -0.102351 18.1308 0.280309 20.2293 1.15859C22.8982 2.27607 25.4556 4.45003 27.817 7.60978C29.25 9.52613 29.5728 10.0041 31.4166 12.9405C27.912 11.9397 26.5952 14.9305 26.337 16.7985C23.9744 12.7788 22.6189 10.8746 21.0849 9.41743C19.0169 7.45425 16.6168 6.52637 14.0735 6.70707C10.7462 6.94331 8.01745 9.49484 7.30387 13.0368C7.1243 13.9266 7.14659 15.9821 7.34611 16.9191C7.96463 19.8355 9.81665 21.9739 12.4257 22.7872C13.7132 23.1884 15.5183 23.2358 16.7553 22.9012C18.7082 22.3734 20.4499 21.0123 21.4393 19.2408C21.5966 18.9594 21.7551 18.7288 21.7926 18.7284C21.8642 18.7273 26.0941 23.7157 26.2525 23.9888C26.3534 24.1615 25.8323 24.7972 24.7596 25.8121C21.1166 29.2553 15.3739 30.544 10.4305 29.0275C6.07388 27.6913 2.27594 23.9 0.896897 19.5111C-0.0373304 16.5348 0.00843702 12.9788 1.02013 9.95754C1.69145 7.95319 2.70901 6.28496 4.21364 4.72273Z' fill='%23F0F0F1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -11px;
}

.progstat {
    position: absolute;
    top: 50%;
    margin-top: -40px;
    width: 100%;
    display: flex;
    justify-content: center
}

.three-quarter-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #000;
    border-top: 3px solid transparent;
    border-radius: 50%;
    animation: spin .5s linear infinite
}

.lds-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.lds-ellipsis {
    display: flex;
    position: absolute;
    width: 65px;
    height: 65px
}

.lds-ellipsis div {
    position: absolute;
    top: 26px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #000;
    animation-timing-function: cubic-bezier(0, 1, 1, 0)
}

.lds-ellipsis div:first-child {
    left: 6px;
    animation: lds-ellipsis1 .6s infinite
}

.lds-ellipsis div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 .6s infinite
}

.lds-ellipsis div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 .6s infinite
}

.lds-ellipsis div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 .6s infinite
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(0)
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(19px, 0)
    }
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #000;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, .2, .8, 1) infinite
}

.lds-ripple div:nth-child(2) {
    animation-delay: -.5s
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1
    }

    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0
    }
}

.loadingcip {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.loadingcip-bar {
    height: 50px;
    width: 6px;
    margin: 0 2px;
    border-radius: 4px;
    animation: loadingcip 1s ease-in-out infinite
}

.loadingcip-bar:first-child {
    background-color: #000;
    animation-delay: .1s
}

.loadingcip-bar:nth-child(2) {
    background-color: #000;
    animation-delay: .2s
}

.loadingcip-bar:nth-child(3) {
    background-color: #000;
    animation-delay: .3s
}

.loadingcip-bar:nth-child(4) {
    background-color: #000;
    animation-delay: .4s
}

.loadingcip-bar:nth-child(5) {
    background-color: #000;
    animation-delay: .5s
}

.loadingcip-bar:nth-child(6) {
    background-color: #000;
    animation-delay: .6s
}

.loadingcip-bar:nth-child(7) {
    background-color: #000;
    animation-delay: .7s
}

.loadingcip-bar:nth-child(8) {
    background-color: #000;
    animation-delay: .8s
}

.loadingcip-bar:nth-child(9) {
    background-color: #000;
    animation-delay: .9s
}

.loadingcip-bar:nth-child(10) {
    background-color: #000;
    animation-delay: 1s
}

@keyframes loadingcip {
    0% {
        transform: scale(1)
    }

    20% {
        transform: scale(1, 1.5)
    }

    40% {
        transform: scale(1)
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.loadermbu {
    width: 13px;
    height: 13px;
    position: relative;
    left: -20px;
    border-radius: 50%;
    color: var(--theme-main-opaque-color);
    background: currentColor;
    box-shadow: 32px 0, -32px 0, 64px 0
}

.loadermbu::after {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 13px;
    height: 13px;
    border-radius: 10px;
    background: #000;
    animation: movembu 1.5s linear infinite alternate
}

@keyframes movembu {
    0%, 5% {
        left: -32px;
        width: 13px
    }

    15%, 20% {
        left: -32px;
        width: 48px
    }

    30%, 35% {
        left: 0;
        width: 13px
    }

    45%, 50% {
        left: 0;
        width: 48px
    }

    60%, 65% {
        left: 32px;
        width: 13px
    }

    75%, 80% {
        left: 32px;
        width: 48px
    }

    100%, 95% {
        left: 64px;
        width: 13px
    }
}

.loadercua {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    color: #000;
    left: -100px;
    box-sizing: border-box;
    animation: shadowRolling 2s linear infinite
}

@keyframes shadowRolling {
    0% {
        box-shadow: 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0)
    }

    12% {
        box-shadow: 100px 0 #000, 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0)
    }

    25% {
        box-shadow: 110px 0 #000, 100px 0 #000, 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0)
    }

    36% {
        box-shadow: 120px 0 #000, 110px 0 #000, 100px 0 #000, 0 0 rgba(255, 255, 255, 0)
    }

    50% {
        box-shadow: 130px 0 #000, 120px 0 #000, 110px 0 #000, 100px 0 #000
    }

    62% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #000, 120px 0 #000, 110px 0 #000
    }

    75% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #000, 120px 0 #000
    }

    87% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #000
    }

    100% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0)
    }
}

.loaderbri {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    transform: rotate(45deg)
}

.loaderbri::before {
    content: '';
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: -24px;
    animation: animloader 4s ease infinite
}

.loaderbri::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: #000;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    animation: animloader2 2s ease infinite
}

@keyframes animloader {
    0% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0 48px rgba(255, 255, 255, 0)
    }

    12% {
        box-shadow: 0 24px #000, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0 48px rgba(255, 255, 255, 0)
    }

    25% {
        box-shadow: 0 24px #000, 24px 24px #000, 24px 48px rgba(255, 255, 255, 0), 0 48px rgba(255, 255, 255, 0)
    }

    37% {
        box-shadow: 0 24px #000, 24px 24px #000, 24px 48px #000, 0 48px rgba(255, 255, 255, 0)
    }

    50% {
        box-shadow: 0 24px #000, 24px 24px #000, 24px 48px #000, 0 48px #000
    }

    62% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px #000, 24px 48px #000, 0 48px #000
    }

    75% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px #000, 0 48px #000
    }

    87% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0 48px #000
    }

    100% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0 48px rgba(255, 255, 255, 0)
    }
}

@keyframes animloader2 {
    0% {
        transform: translate(0, 0) rotateX(0) rotateY(0)
    }

    25% {
        transform: translate(100%, 0) rotateX(0) rotateY(180deg)
    }

    50% {
        transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
    }

    75% {
        transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
    }

    100% {
        transform: translate(0, 0) rotateX(0) rotateY(360deg)
    }
}

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 6px;
    box-sizing: border-box;
    border: 26px solid #000;
    border-color: #000 transparent #000 transparent;
    animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

.loaderl15 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #00000000;
    border-radius: 50%;
    border-right-color: #000;
    animation: l15 1s infinite linear;
}

.loaderl15::before,
.loaderl15::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}

.loaderl15::after {
    margin: 8px;
    animation-duration: 3s;
}

@keyframes l15 {
    100% {
        transform: rotate(1turn)
    }
}

@media (max-width:700px) {
    .search_popup_inner, .video_popup_inner {
        width: 300px
    }
}

.loaderanimFw {
    width: 0;
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: #000;
    box-sizing: border-box;
    animation: animFw 8s linear infinite;
}

.loaderanimFw::after,
.loaderanimFw::before {
    content: '';
    width: 10px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 9px;
    right: -2px;
    opacity: 0;
    transform: rotate(-45deg) translateX(0px);
    box-sizing: border-box;
    animation: coli1 0.3s linear infinite;
}

.loaderanimFw::before {
    top: -4px;
    transform: rotate(45deg);
    animation: coli2 0.3s linear infinite;
}

@keyframes animFw {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes coli1 {
    0% {
        transform: rotate(-45deg) translateX(0px);
        opacity: 0.7;
    }

    100% {
        transform: rotate(-45deg) translateX(-45px);
        opacity: 0;
    }
}

@keyframes coli2 {
    0% {
        transform: rotate(45deg) translateX(0px);
        opacity: 1;
    }

    100% {
        transform: rotate(45deg) translateX(-45px);
        opacity: 0.7;
    }
}

#stsho-lms-add-course #sections-container {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-block: 20px;
    display: grid;
    gap: 40px;
}

.lessons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.lessons-container .lesson {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-block: 20px;
    border-bottom: 1px solid #dddddded;
    padding-bottom: 25px;
    width: 45%;
    padding: 20px;
    box-shadow: 0px 9px 16px -2px #eee;
    background: #e8e8e8;
    border-radius: 20px;
}

.lessons-container .lesson .remove-lesson {
    position: absolute;
    top: 15px;
    left: 15px;
}

.lessons-container .lesson .duplicate-lesson {
    position: absolute;
    top: 15px;
    left: 100px;
}

#sections-container .section {
    border-top: 1px solid #eee;
    padding-top: 25px;
    position: relative;
}

.section-number {
    background: #1d2327;
    padding: 20px;
    color: #fff;
    border-radius: 50px;
    width: 10px;
    height: 10px;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    font-size: 20px;
    transform: scale(0.8);
    cursor: all-scroll;
}

.lesson-number {
    background: #2271b1;
    padding: 20px;
    color: #fff;
    border-radius: 50px;
    width: 10px;
    height: 10px;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    font-size: 20px;
    transform: scale(0.8);
    cursor: all-scroll;
}

.add-lesson {
    position: absolute;
    top: 30px;
    left: 185px;
}

.remove-section {
    position: absolute;
    top: 30px;
    left: 90px;
}

.duplicate-section {
    position: absolute;
    top: 30px;
    left: 0;
}