@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    --primary: #175cff;
    --primary-rgb: 23, 92, 255;
    --secondary: #ff5e29;
    --secondary-rgb: 255, 94, 41;
    --primary-contrast: white;
    --primary-contrast-rgb: 255, 255, 255;
    --secondary-contrast: white;
    --secondary-contrast-rgb: 255, 255, 255;
    --body-bg: white;
    --body-bg-rgb: 255, 255, 255;
    --body-text-primary: black;
    --body-text-primary-rgb: 0, 0, 0;
    --body-text-secondary: #666666;
    --body-text-secondary-rgb: 102, 102, 102;
    --topbar-bg: #175cff;
    --topbar-bg-rgb: 23, 92, 255;
    --topbar-fg: white;
    --topbar-fg-rgb: 255, 255, 255;
    --headings: black;
    --headings-rgb: 0, 0, 0;
    --cover-home: white;
    --cover-home-rgb: 255, 255, 255;
    --cover-sales: white;
    --cover-sales-rgb: 255, 255, 255;
    --video-player: white;
    --video-player-rgb: 255, 255, 255;
    --icons-1: black;
    --icons-1-rgb: 0, 0, 0;
    --icons-2: #ff5e29;
    --icons-2-rgb: 255, 94, 41;
    --font-family: Inter, sans-serif;
    --base-font-size: 13px;
    --progress-lecture: 0%;
}

* {
    box-sizing: border-box;
}

::before,
::after {
    box-sizing: inherit;
}

html {
    font-size: var(--base-font-size);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'kern', 'liga' 0, 'calt' 0;
    -moz-font-feature-settings: 'kern', 'liga' 0, 'calt' 0;
    -ms-font-feature-settings: 'kern', 'liga' 0, 'calt' 0;
    font-feature-settings: 'kern', 'liga' 0, 'calt' 0;
}

body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--body-text-primary, #000);
    background-color: var(--body-bg, #fff);
}

hr {
    margin: 0;
    color: var(--body-text-primary, #000);
    background-color: currentColor;
    border: 0;
    border-radius: 0.5px;
    height: 1px;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

button {
    background-color: transparent;
    color: inherit;
    border-width: 0;
    padding: 0;
}

ul:not(.initial) {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: bottom;
}

#nprogress .spinner-icon {
    width: 30px !important;
    height: 30px !important;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d !important;
}

strong {
    font-weight: 700;
}

button,
input,
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
}

[type='checkbox'] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

[type='radio'] {
    -webkit-appearance: radio;
    appearance: radio;
}

button,
select {
    text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

button[disabled],
[type='button'][disabled],
[type='reset'][disabled],
[type='submit'][disabled] {
    cursor: default;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

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

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

[type='search'] {
    outline-offset: -2px;
}

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

label[for] {
    cursor: pointer;
}

pre {
    margin: 0;
}

main {
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead > tr {
    border-bottom: 1px solid #000;
}

th,
td {
    padding: 20px 0;
}

th {
    padding-top: 0;
    text-align: left;
}

th:last-child,
td:last-child {
    text-align: right;
}

.sales-list .icn {
    float: left;
    margin-right: 15px;
    margin-bottom: 20px;
}

.sales-list dd {
    margin-left: 0;
}

.sales-list dt {
    margin-top: 20px;
    margin-bottom: 10px;
}

body {
    font-family: var(--font-family);
}

.fwr {
    font-weight: 400;
}

.fwm {
    font-weight: 500;
}

.fwb {
    font-weight: 700;
}

.fwh {
    font-weight: 900;
}

.fzr {
    font-size: 1rem;
    line-height: 1.5;
}

.fzs {
    font-size: 0.8rem;
    line-height: 1.5;
}

.fzl {
    font-size: 1.25rem;
    line-height: 1.4;
}

.fzlp {
    font-size: 1.25rem;
    line-height: 1.5;
}

.fzt {
    font-size: 1.5rem;
    line-height: 1.5;
}

.fzh {
    font-size: 1.75rem;
    line-height: 1.33;
}

.fzxh {
    font-size: 2.25rem;
    line-height: 1.33;
}

.fzxl {
    font-size: 3.5rem;
    line-height: 1.1;
}

.fz2xl {
    font-size: 4.5rem;
    line-height: 1.1;
}

.fzg {
    font-size: 6rem;
    line-height: 1.1;
}

.mt {
    margin-top: 20px;
}

.mt-icn {
    position: relative;
    top: 5px;
}

@font-face {
    font-family: 'OldLondon';
    src: url('../../../fonts/OldLondon.ttf') format('truetype');
}

@font-face {
    font-family: 'EmbassyBT';
    src: url('../../../fonts/EmbassyBT.ttf') format('truetype');
}

.ff-old-london {
    font-family: 'OldLondon';
}

.ff-embassy-bt {
    font-family: 'EmbassyBT';
}

.serif {
    font-family: serif;
}

.container {
    width: 100%;
    max-width: 1170px;
    padding: 0 15px;
    margin: 0 auto;
}

.container-sm {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

@media only screen and (min-width: 550px) {
    .container-sm {
        padding: 0 40px;
    }
}

@media only screen and (min-width: 1000px) {
    .container-sm {
        padding: 0 15px;
        max-width: 780px;
    }
}

.vnz-container {
    display: grid;
    grid-template-rows: 72px auto auto;
    grid-template-areas: 'header' 'nav' 'content';
}

@media only screen and (min-width: 1170px) {
    .vnz-container {
        grid-template-columns: 351px auto;
        grid-template-areas: 'header header' 'nav content';
    }

    .fixed {
        position: fixed;
    }
}

.aside-container {
    grid-area: nav;
}

@media only screen and (min-width: 1170px) {
    .vnz-container .aside-container {
        position: relative;
    }

    .vnz-container .aside-container::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px;
        background: var(--body-text-primary, #000);
        opacity: 0.07;
        pointer-events: none;
    }
}

.form-page-wrapper {
    --bg: #175cff;
    --bg-opacity: 0.08;
    flex: 1;
    position: relative;
}

body > .form-page-wrapper {
    padding: 50px 0;
}

body > .form-page-wrapper .form-page-notice {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.form-page-wrapper.form-without-cover::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--bg, var(--primary, #175cff));
    opacity: var(--bg-opacity, 0.08);
    pointer-events: none;
}

@media only screen and (min-width: 550px) {
    .form-page-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: var(--primary, #175cff);
        opacity: 0.08;
        pointer-events: none;
    }
}

.profile-wrapper {
    flex: 1;
    position: relative;
}

body > .profile-wrapper {
    padding: 50px 0;
}

@media only screen and (min-width: 550px) {
    .profile-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: var(--primary, #175cff);
        opacity: 0.08;
        pointer-events: none;
    }
}

.profile-container {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding-top: 30px;
}

@media only screen and (min-width: 1170px) {
    .profile-container {
        overflow: initial;
    }
}

.profile-aside {
    display: none;
    width: 260px;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 15px;
    position: -webkit-sticky;
    position: sticky;
    top: 30px;
    z-index: 3;
    background-color: #fff;
    border-radius: 8px;
}

@media only screen and (min-width: 1170px) {
    .profile-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.profile-avatar {
    position: relative;
    flex: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 15px;
    margin-bottom: 25px;
    color: var(--body-text-primary, #000);
}

.profile-avatar > img {
    border-radius: 50%;
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.profile-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

.profile-avatar .icn-100 {
    border-radius: 50%;
    overflow: hidden;
}

.profile-avatar .svg-cc {
    fill-opacity: 0.4;
}

.profile-avatar > .dropdown {
    position: absolute;
    right: 10px;
    bottom: -10px;
    width: 28px;
    height: 28px;
}

.profile-avatar-action {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--body-bg, #fff);
    border: 2px solid var(--body-bg, #fff);
    background-color: var(--primary, #175cff);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

.profile-avatar-action .icn {
    display: flex;
}

.profile-avatar-action .svg-cc {
    fill-opacity: 1;
}

.profile-user-name {
    margin-bottom: 5px;
}

.profile-user-email {
    margin-bottom: 25px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-nav {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
}

.profile-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
    border-top: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
}

.profile-nav > a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 11px 0;
}

.profile-nav > a.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.04;
    pointer-events: none;
}

.profile-nav > a::after {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
    border-bottom: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.profile-nav > a .icn {
    display: flex;
}

.profile-nav .profile-nav-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
}

.profile-main {
    flex: 1;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    min-width: 0;
}

.profile-main-sm {
    flex: 1;
    position: relative;
}

@media only screen and (min-width: 1170px) {
    .profile-main {
        max-width: calc(100% - 260px);
    }
}

.profile-main-section {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 30px;
}

@media only screen and (min-width: 550px) {
    .profile-main-section {
        padding: 30px;
    }
}

.profile-section-subheading {
    margin-bottom: 30px;
}

.subscription-item {
    position: relative;
    padding: 16px 15px;
}

.subscription-item + .subscription-item {
    margin-top: 15px;
}

.subscription-item.with-img {
    padding-top: 120px;
}

.subscription-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.1;
    border-radius: 4px;
    pointer-events: none;
}

.cookie-notice {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    z-index: 99;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.cookie-notice-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 20px;
    pointer-events: auto;
    max-width: min(90%, 900px);
}

.cookie-notice-wrapper button {
    flex-shrink: 0;
}

@media only screen and (min-width: 600px) {
    .subscription-item.with-img {
        padding-top: 16px;
        padding-left: 120px;
    }

    .cookie-notice-wrapper {
        flex-direction: row;
    }
}

.subscription-item-img {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    margin: auto;
    width: 80px;
    height: 90px;
}

@media only screen and (min-width: 600px) {
    .subscription-item-img {
        top: 0;
        bottom: 0;
        left: 20px;
        right: auto;
    }
}

.profile-payment-saved {
    display: flex;
    align-items: center;
    position: relative;
    padding: 20px;
    margin-bottom: 30px;
}

.profile-payment-saved::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.1;
    border-radius: 4px;
    pointer-events: none;
}

.profile-payment-saved-action {
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 5px 6px;
}

.profile-payment-saved-action svg {
    width: 100%;
    height: 100%;
}

.profile-dashboard {
    margin-bottom: 30px;
}

.dashboard-grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dashboard-grid-item {
    position: relative;
    border-radius: 8px;
    padding: 20px 25px;
}

.dashboard-grid-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 8px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

@media only screen and (min-width: 550px) {
    .dashboard-grid-item {
        background-color: var(--body-bg, #fff);
    }

    .dashboard-grid-item::before {
        display: none;
    }
}

.dashboard-stat-label {
    color: var(--body-text-secondary, #666);
    margin-top: 11px;
}

.profile-courses .subscription-item {
    flex-direction: column;
    align-items: initial;
    border-radius: 8px;
    background-color: var(--body-bg, #fff);
}

.profile-courses .subscription-item::before {
    border-radius: 8px;
    opacity: 0.07;
}

.profile-courses .progress-container {
    position: relative;
    margin-top: 25px;
    margin-bottom: 15px;
    overflow: visible;
}

.profile-courses .progress-bar {
    width: 100%;
}

.profile-courses .progress-label {
    position: absolute;
    bottom: -20px;
    right: 0;
}

@media only screen and (min-width: 550px) {
    .profile-courses {
        grid-column: span 2;
    }
}

.profile-degrees {
    position: relative;
    align-self: flex-start;
    background-color: var(--body-bg, #fff);
    border-radius: 8px;
}

.profile-degrees::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    border-radius: 8px;
    pointer-events: none;
}

.profile-degrees header {
    position: relative;
    padding: 10px 15px;
}

.profile-degrees header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.profile-degrees ul {
    padding: 10px 15px;
}

.profile-degrees li {
    display: flex;
    align-items: flex-start;
}

.profile-degrees li + li {
    margin-top: 10px;
}

.topbar-container {
    grid-area: header;
    height: 72px;
}

.vnz-full .topbar-container {
    padding: 10px 0;
}

.topbar-container > .container {
    display: flex;
    justify-content: center;
}

.topbar-container .topbar-sm {
    display: flex;
}

.vnz-container .topbar-container .topbar-lg,
.vnz-full .topbar-container .topbar-lg {
    display: none;
}

@media only screen and (min-width: 1170px) {
    .vnz-account .topbar-container {
        display: none;
    }

    .vnz-full .topbar-container {
        padding: 0;
    }

    .vnz-container .topbar-container .topbar-lg,
    .vnz-full .topbar-container .topbar-lg {
        display: flex;
        flex: 1;
    }

    .vnz-container .topbar-container .topbar-sm,
    .vnz-full .topbar-container .topbar-sm {
        display: none;
    }
}

.main-content {
    grid-area: content;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    color: var(--topbar-fg, #fff);
    min-width: 0;
    max-width: 100%;
}

.topbar-sm .logo {
    margin-left: 48px;
}

.logo img {
    max-height: 62px !important;
    margin-top: -10px;
    margin-bottom: -10px;
}

@media only screen and (min-width: 550px) {
    .topbar-sm .logo {
        margin-left: 0;
    }
}

.logo-alt {
    color: var(--topbar-fg, #fff);
    margin-right: 100px;
    max-width: 250px;
}

.vnz-ribbon {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
    width: 105px;
    height: 105px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.1s ease-in;
    pointer-events: none;
    will-change: transform;
}

.vnz-ribbon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background: #175cff;
    transition: all 0.1s ease-in;
}

.vnz-ribbon::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6px;
    height: 6px;
    background: #175cff;
    transition: all 0.1s ease-in;
}

.vnz-ribbon:hover {
    transform: scale(1.04);
}

.vnz-ribbon:hover::before,
.vnz-ribbon:hover::after {
    width: 8px;
    height: 8px;
    background-color: #175cff;
}

.ribbon-content {
    position: relative;
    top: 21px;
    left: -11px;
    z-index: 1;
    display: block;
    width: 160px;
    padding: 9px 0 6px 0;
    color: var(--body-bg, #fff);
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background-color: #175cff;
    transform: rotate(45deg);
    transition: all 0.1s ease-in;
    pointer-events: auto;
}

.ribbon-powered-by {
    margin-left: -7px;
    color: var(--body-bg, #fff);
    font-size: 8px;
    text-transform: uppercase;
    display: block;
}

.ribbon-brand {
    margin-left: -7px;
    color: var(--body-bg, #fff);
    font-size: 14px;
    display: block;
}

@media only screen and (min-width: 1170px) {
    .lead-page > .container > h1 {
        padding: 0 120px 20px;
    }

    .lead-page > .container > p {
        width: 500px;
        margin: 0 auto 50px;
    }
}

.lead-form {
    position: relative;
    padding: 20px 25px 25px;
}

.lead-form::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    border-radius: 8px;
    pointer-events: none;
}

.lead-form h2 {
    margin-bottom: 10px;
}

.lead-form p {
    margin-bottom: 25px;
}

.lead-form .form-input + .form-input {
    margin-top: 10px;
}

.lead-form .btn {
    margin-top: 20px;
}

.vnz-faqs .faq-title {
    border: 0 !important;
}

.vnz-faqs .faq-row {
    position: relative;
    padding: 15px 20px !important;
    border: 0 !important;
}

.vnz-faqs .faq-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.1;
    border-radius: 8px;
    pointer-events: none;
}

.vnz-faqs .faq-row + .faq-row {
    margin-top: 20px;
}

.vnz-faqs .row-title {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    color: var(--body-text-primary, black) !important;
    font-weight: 700 !important;
    font-size: 1.33rem !important;
    line-height: 1.33;
    cursor: pointer;
    align-items: center;
}

.vnz-faqs .icon-wrapper {
    max-width: 25px;
    max-height: 25px;
}

.vnz-faqs .row-content {
    font-size: 1.1rem;
}

.vnz-faqs .closed + .row-content {
    height: 0;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.upsell-countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.upsell-countdown > * {
    position: relative;
}

.upsell-countdown > * + * {
    margin-left: 20px;
}

.upsell-countdown h2 {
    padding-top: 45px;
    margin-bottom: -85px;
}

.upsell-countdown svg {
    transform: scale(-1, 1) rotate(-90deg);
}

.upsell-countdown svg #bg {
    stroke: var(--body-text-secondary, #666);
    stroke-width: 2;
    stroke-opacity: 0.2;
}

.upsell-countdown svg #fg {
    stroke: var(--primary, #175cff);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 66.5326, 72.7152;
}

.upsell-countdown > *:nth-child(3) #fg {
    stroke-dasharray: 21.5326, 72.7152;
}

.subscription-item {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 25px 40px 25px 25px;
    margin-bottom: 15px;
}

.subscription-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.04;
    pointer-events: none;
}

.topbar-container {
    display: flex;
    background-color: var(--topbar-bg, #175cff);
}

.menu-toggle {
    position: absolute;
    top: 12px;
    left: 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
    color: var(--topbar-fg, #fff);
}

.menu-toggle svg {
    fill: currentColor;
}

.menu-toggle .mt-expanded {
    display: none;
}

body.menu-open .menu-toggle .mt-collapsed {
    display: none;
}

body.menu-open .menu-toggle .mt-expanded {
    display: block;
}

@media only screen and (min-width: 1170px) {
    .menu-toggle {
        display: none;
    }
}

.aside-header {
    flex: none;
    position: relative;
    width: 351px;
    height: 72px;
    background-color: var(--topbar-bg, #175cff);
    padding: 15px 0;
}

@media only screen and (min-width: 1170px) {
    .aside-header::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.12);
    }

    .vnz-full .aside-header::before {
        display: none;
    }
}

.go-back {
    position: relative;
    width: 42px;
    height: 42px;
    margin-left: 8px;
    cursor: pointer;
    color: var(--topbar-fg, #fff);
}

.topbar-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.topbar-link {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    color: var(--topbar-fg, #fff);
    border-radius: 21px;
}

.topbar-link > span {
    position: relative;
}

.topbar-link > span:first-child {
    margin-right: 10px;
}

.topbar-link > span:last-child {
    margin-left: 10px;
}

.dropdown > .topbar-link {
    margin-left: 15px;
}

.topbar-link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 21px;
    pointer-events: none;
    opacity: 0;
    background-color: var(--topbar-fg, #fff);
}

.topbar-link:hover::before,
.topbar-link.has-dd::before {
    opacity: 0.06;
}

.open > .topbar-link::before,
.topbar-link:active::before {
    opacity: 0.12;
}

.topbar-user {
    cursor: pointer;
    margin: 0 15px;
    color: var(--topbar-fg, #fff);
}

.topbar-user-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--topbar-fg, #fff);
}

.topbar-user-avatar > img {
    max-width: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin: 2px 0 0 2px;
    object-fit: cover;
}

.topbar-user-avatar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    background-color: var(--topbar-fg, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.topbar-user-avatar:hover::after,
.open > .topbar-user-avatar::after {
    opacity: 0.2;
}

.prev-next-nav {
    display: flex;
    align-items: center;
    width: 100%;
}

.pn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 25px 0;
    color: var(--topbar-fg, #fff);
}

.pn-link:hover {
    color: var(--topbar-bg, #175cff);
    background-color: var(--topbar-fg, #fff);
}

.pn-link > span:first-child {
    margin-right: 10px;
}

.pn-link > span:last-child {
    margin-left: 10px;
}

.main-nav {
    display: none;
    align-items: center;
    margin-left: auto;
    padding-left: 15px;
    min-width: 0;
}

.main-nav > .btn {
    margin-left: 15px;
    flex: none;
}

.main-nav > .dropdown > .nav-link,
.main-nav > .nav-link {
    display: block;
    position: relative;
    padding: 10px 19px;
    color: var(--topbar-fg, #fff);
    border: 1px solid transparent;
    border-radius: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-nav > .dropdown > .nav-link.active,
.main-nav > .nav-link.active {
    border-color: var(--topbar-fg, #fff);
}

.main-nav > .dropdown > .nav-link:focus,
.main-nav > .nav-link:focus {
    outline: 0;
}

.main-nav > .dropdown > .nav-link::before,
.main-nav > .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 21px;
    pointer-events: none;
}

.main-nav > .dropdown > .nav-link:hover::before,
.main-nav > .nav-link:hover::before {
    background-color: var(--topbar-fg, #fff);
    opacity: 0.06;
}

.main-nav > .dropdown > .nav-link:active::before,
.main-nav > .nav-link:active::before {
    background-color: var(--topbar-fg, #fff);
    opacity: 0.12;
}

.main-nav > .nav-link + .nav-link {
    margin-left: 15px;
}

.main-nav > .dropdown.open > .nav-link {
    border-color: var(--topbar-fg, #fff);
}

@media only screen and (min-width: 1170px) {
    .main-nav {
        display: flex;
    }
}

.responsive-nav {
    background-color: var(--topbar-bg, #175cff);
    display: none;
    justify-content: center;
    flex-wrap: wrap;
}

body.menu-open .responsive-nav {
    display: flex;
}

.responsive-nav > .btn {
    margin: 30px 25px;
}

.responsive-nav > .nav-link {
    position: relative;
    color: var(--topbar-fg, #fff);
    flex-basis: 100%;
    padding: 25px;
    display: flex;
    justify-content: center;
}

.responsive-nav > .nav-link.active::before,
.responsive-nav > .nav-link:active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--topbar-fg, #fff);
    opacity: 0.1;
}

@media only screen and (min-width: 1170px) {
    .responsive-nav {
        display: none !important;
    }
}

.topbar-sm {
    flex: 1;
    overflow: hidden;
}

@media only screen and (min-width: 550px) {
    .topbar-sm {
        justify-content: center;
    }
}

.tbsm-title {
    align-self: center;
    padding-left: 60px;
    color: var(--topbar-fg, #fff);
}

.tbsm-back,
.tbsm-avatar {
    color: var(--topbar-fg, #fff);
    position: absolute;
}

.tbsm-back {
    width: 48px;
    height: 48px;
    top: 12px;
    left: 0;
    cursor: pointer;
    z-index: 1;
}

.tbsm-avatar {
    top: 15px;
    right: 15px;
    color: var(--topbar-bg, #175cff);
}

.vnz-cart + .tbsm-avatar {
    right: 83px;
}

.tbsm-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--topbar-fg, #fff);
    border-radius: 50%;
}

@media only screen and (max-width: 1170px) {
    .tbsm-avatar {
        top: 22px;
    }

    .tbsm-avatar .topbar-user-avatar {
        width: 28px;
        height: 28px;
    }

    .tbsm-avatar .topbar-user-avatar > img {
        width: 24px;
        height: 24px;
    }
}

.vnz-cart {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 15px;
    padding: 9px 19px;
    cursor: pointer;
    color: var(--topbar-fg, #fff);
    border: 1px solid transparent;
    border-radius: 21px;
}

.topbar-sm .vnz-cart {
    position: absolute;
    top: 15px;
    right: 1px;
    padding: 9px 13px;
    margin: 0;
}

.topbar-user + .vnz-cart {
    margin-left: 0;
}

.vnz-cart::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 21px;
    pointer-events: none;
}

.vnz-cart:hover::before {
    background-color: var(--topbar-fg, #fff);
    opacity: 0.06;
}

.vnz-cart:active::before {
    background-color: var(--topbar-fg, #fff);
    opacity: 0.12;
}

@media only screen and (max-width: 550px) {
    .topbar-sm .vnz-cart {
        border-color: transparent !important;
    }
}

.cart-number {
    margin-left: 10px;
}

.aside-content {
    position: relative;
    padding-bottom: 30px;
}

.aside-content .tab-label {
    justify-content: center;
}

@media only screen and (min-width: 1170px) {
    .aside-content {
        padding: 0;
        min-height: calc(100vh - 72px);
    }

    .aside-content .tab-label {
        justify-content: flex-start;
    }
}

.course-img-container {
    position: relative;
    margin: 15px 2px;
    height: 196px;
    border-radius: 8px;
    overflow: hidden;
}

.course-img-container > img {
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
    border-radius: 8px;
}

.course-img-container > .icn {
    z-index: -1;
}

.course-img-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.course-img-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 8px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.course-img-container.img-added::after {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
}

@media only screen and (min-width: 550px) {
    .course-img-container {
        margin: 15px;
    }
}

.course-completion {
    display: flex;
    align-items: center;
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #fff;
    z-index: 1;
}

.aside-lecture .course-completion {
    position: relative;
    left: 0;
    bottom: 0;
    color: var(--secondary, #ff5e29);
    padding-bottom: 25px;
}

.aside-lecture .course-completion::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    width: var(--progress-lecture);
    background-color: var(--secondary, #ff5e29);
    pointer-events: none;
}

.course-completion > .fwb {
    margin-left: 14px;
    margin-right: 3px;
}

.course-completion > .icn svg {
    transform: rotate(-90deg);
}

.course-completion > .icn svg #bg {
    stroke: #fff;
    stroke-width: 2;
}

.course-completion > .icn svg #fg {
    stroke: var(--secondary, #ff5e29);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 21.5326, 72.7152;
}

.course-title {
    color: var(--headings, #000);
    margin: 10px 15px 5px;
}

.aside-lecture .course-title {
    margin: 27px 15px 5px;
}

.course-enrollment-date {
    margin: 0 15px;
    color: var(--body-text-secondary, #666);
}

.course-nav {
    position: relative;
    padding-top: 19px;
}

.course-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 1px;
    height: 1px;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.course-navlink {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--body-text-primary, #000);
    min-width: 0;
    margin-right: 15px;
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
}

.course-navlink > span {
    margin-top: 2px;
    margin-left: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-navlink::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 3px;
    border-radius: 1.5px;
    pointer-events: none;
}

.course-navlink::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 8px 8px 0;
    pointer-events: none;
}

.course-navlink:hover::before {
    background-color: var(--body-text-primary, #000);
    opacity: 0.2;
}

.course-navlink:hover::after {
    background-color: var(--body-text-primary, #000);
    opacity: 0.05;
}

.active .course-navlink::before {
    background-color: var(--secondary, #ff5e29);
    opacity: 1;
}

.active .course-navlink::after {
    background-color: var(--secondary, #ff5e29);
    opacity: 0.15;
}

.course-instructor {
    padding: 15px 15px 0;
}

.course-instructor-bio {
    font-size: 1.1rem !important;
    margin-top: 18px;
    color: var(--body-text-primary, #000);
}

.course-instructor-bio > p {
    margin-bottom: 10px;
}

.course-instructor-bio > * {
    font-size: 1.1rem !important;
}

.course-instructor-name {
    margin-top: 25px;
    margin-bottom: 6px;
}

.course-instructor-stats {
    display: flex;
    color: var(--body-text-secondary, #666);
}

.course-instructor-stats span + span {
    margin-left: 20px;
}

.course-instructor-stats .fwb {
    color: var(--body-text-primary, #000);
}

.course-instructor-photo {
    position: relative;
    flex: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    color: var(--body-text-primary, #000);
}

.course-instructor-photo > img {
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.course-instructor-photo::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

.course-instructor-photo .svg-cc {
    fill-opacity: 0.4;
}

.main-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: #eff2f6;
}

.ls + .ls {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

@keyframes loaderBounce {
    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.btn {
    position: relative;
    display: inline-block;
    user-select: none;
    border: 0;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    color: var(--primary-contrast, #fff);
    background-color: var(--primary, #175cff);
    height: 42px;
    line-height: 20px;
    min-width: 42px;
    border-radius: 21px;
    padding: 11px 20px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 21px;
}

.btn:not[disabled]:hover::before {
    background-color: rgba(255, 255, 255, 0.12);
}

.btn:not[disabled]:active::before {
    background-color: rgba(0, 0, 0, 0.12);
}

.btn > span {
    position: relative;
}

.btn.is-processing {
    opacity: 0.2;
    pointer-events: none;
}

.btn > .loader {
    top: -1px;
}

.btn > .loader + span {
    margin-left: 20px;
}

.btn-lg {
    height: 50px;
    min-width: 50px;
    border-radius: 25px;
    padding: 15px 30px;
}

.btn-lg::before {
    border-radius: 25px;
}

.btn-lg.fzl {
    padding: 15px 30px;
}

.btn-outline {
    color: var(--primary, #175cff);
    background-color: var(--primary-contrast, #fff);
    box-shadow: 0 0 1px 1px var(--primary, #175cff);
}

.btn-secondary {
    color: var(--secondary-contrast, #fff);
    background-color: var(--secondary, #ff5e29);
}

.btn-topbar {
    color: var(--topbar-bg, #175cff);
    background-color: var(--topbar-fg, #fff);
}

.btn-download {
    display: inline-flex;
    height: 43px;
    margin-top: -1px;
    padding: 14px 20px 0;
    border-radius: 0 0 8px 8px;
}

.btn-download::before {
    border-radius: 0 0 8px 8px;
}

.btn-download > span {
    margin-top: -2px;
    margin-left: 10px;
}

.btn-ghost {
    color: var(--secondary, #ff5e29);
    background-color: rgba(0, 0, 0, 0);
}

.btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--secondary, #ff5e29);
    border-radius: 21px;
    pointer-events: none;
}

.btn-ghost:hover {
    color: var(--body-bg, #fff);
    background-color: var(--secondary, #ff5e29) !important;
}

.btn-ghost.btn-lg::before {
    border-radius: 25px;
}

.btn-black {
    color: var(--body-bg, #fff);
    background-color: var(--body-text-primary, #000);
}

.btn-muted {
    color: var(--body-bg, #fff);
    background-color: var(--body-text-secondary, #666);
}

.btn-primary-contrast {
    color: var(--primary, #175cff);
    background-color: var(--primary-contrast, #fff);
}

.btn-cancel {
    color: var(--body-text-primary, #000);
    background-color: rgba(0, 0, 0, 0);
}

.btn-cancel:hover::before {
    background-color: rgba(0, 0, 0, 0);
}

.btn-cancel:active::before {
    background-color: rgba(0, 0, 0, 0);
}

.btn-input {
    text-align: left;
    padding: 11px 20px;
    color: var(--body-text-primary, #000);
    background-color: var(--body-bg, #fff);
    background-clip: padding-box;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-input::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.1;
    pointer-events: none;
}

.btn-input.has-placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.btn-input.has-placeholder:hover > .caret {
    color: var(--body-text-primary, #000);
}

.open > .btn-input.has-placeholder:hover > .caret {
    color: var(--primary, #175cff);
}

.btn-input > .caret {
    position: absolute;
    top: 13px;
    right: 20px;
}

.btn-input.btn-lg > .caret {
    position: absolute;
    top: 17px;
    right: 20px;
}

.btn-input:hover::before {
    opacity: 1;
}

.btn-input:active::before {
    background-color: var(--body-bg, #fff);
}

.open > .btn-input::before {
    border: 1px solid var(--primary, #175cff);
    opacity: 1;
}

.open > .btn-input > .caret {
    color: var(--primary, #175cff);
}

.btn-block {
    width: 100%;
}

.price-text-btn {
    position: relative;
    padding-left: 41px;
}

.price-text-btn::before {
    content: '';
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: 21px;
    width: 1px;
    background: var(--primary-contrast, #fff);
    opacity: 0.3;
    pointer-events: none;
}

.btn-txticn {
    display: inline-flex;
    align-items: center;
}

.btn-txticn .icn {
    margin-right: 10px;
}

.btn-shadow {
    color: var(--primary, #175cff);
    background-color: var(--body-bg, #fff);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-shadow:active {
    box-shadow: none;
}

.btn-shadow:active::before {
    background-color: var(--primary, #175cff);
    opacity: 0.2;
}

@media only screen and (min-width: 550px) {
    .btn-shadow {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    }
}

.btn-time-confirm {
    display: inline-flex;
    justify-content: center;
}

.btn-time-confirm .fwb {
    position: relative;
    padding-left: 41px;
    display: none;
}

.btn-time-confirm .fwb::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 20px;
    width: 1px;
    background: var(--body-bg, #fff);
    opacity: 0.3;
    pointer-events: none;
}

.btn-time-confirm:hover {
    background-color: var(--body-text-primary, #000);
    color: white;
}

.btn-time-confirm:hover .fwb {
    display: block;
}

.checkbox {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    padding-left: 2.25em;
    color: var(--body-text-secondary, #666);
}

.checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
}

.checkbox .icn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1.25em;
    height: 1.25em;
    border-radius: 0.25em;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.1;
    pointer-events: none;
}

.checkbox input:checked ~ .icn {
    color: var(--body-bg, #fff);
}

.checkbox input:checked ~ .icn::before {
    opacity: 1;
    background-color: var(--primary, #175cff);
    border: 1px solid var(--primary, #175cff);
}

.checkbox span {
    display: inline-block;
}

.checkbox a {
    display: inline-block;
}

.checkbox a:hover {
    color: var(--primary, #175cff);
}

.checkbox > .icn {
    width: 0.75em !important;
    height: 0.75em !important;
    position: absolute;
    left: 0;
    top: 0.25em;
    display: block;
}

.checkbox .svg-cc {
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    fill-opacity: 0.3;
}

.checkbox input:checked ~ .icn .svg-cc {
    fill-opacity: 1;
}

.radio {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    padding-left: 26px;
    color: var(--body-text-secondary, #666);
}

.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
}

.radio .select-indicator::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.1;
    pointer-events: none;
}

.radio .select-indicator::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--body-text-primary, #000);
    opacity: 0.3;
    pointer-events: none;
}

.radio input:checked ~ .select-indicator::before {
    opacity: 1;
    background-color: var(--primary, #175cff);
    border-color: var(--primary, #175cff);
}

.radio input:checked ~ .select-indicator::after {
    opacity: 1;
    background-color: var(--body-bg, #fff);
}

.icn {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

.icn > svg {
    width: 100%;
    height: 100%;
}

.icn.icn-auto {
    display: flex;
    justify-content: center;
}

.icn.icn-auto > svg {
    width: auto;
    height: auto;
}

.is-centered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.tempcircle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: currentColor;
}

.tempicn {
    width: 100%;
    height: 100%;
    background-color: var(--body-text-primary, #000);
    border-radius: 50%;
}

.icn-9 {
    width: 9px;
    height: 9px;
}

.icn-10 {
    width: 10px;
    height: 10px;
}

.icn-12 {
    width: 12px;
    height: 12px;
}

.icn-14 {
    width: 14px;
    height: 14px;
}

.icn-16 {
    width: 16px;
    height: 16px;
}

.icn-18 {
    width: 18px;
    height: 18px;
}

.icn-20 {
    width: 20px;
    height: 20px;
}

.icn-22 {
    width: 22px;
    height: 22px;
}

.icn-24 {
    width: 24px;
    height: 24px;
}

.icn-28 {
    width: 28px;
    height: 28px;
}

.icn-32 {
    width: 32px;
    height: 32px;
}

.icn-42 {
    width: 42px;
    height: 42px;
}

.icn-52 {
    width: 52px;
    height: 52px;
}

.icn-60 {
    width: 60px;
    height: 60px;
}

.icn-100 {
    width: 100px;
    height: 100px;
}

.icn-200 {
    width: 200px;
    height: 200px;
}

.icn-7-16 {
    width: 7px;
    height: 16px;
}

.icn-8-9 {
    width: 8px;
    height: 9px;
}

.icn-11-10 {
    width: 11px;
    height: 10px;
}

.icn-9-8 {
    width: 9px;
    height: 8px;
}

.icn-10-12 {
    width: 10px;
    height: 12px;
}

.icn-10-16 {
    width: 10px;
    height: 16px;
}

.icn-12-10 {
    width: 12px;
    height: 10px;
}

.icn-14-10 {
    width: 14px;
    height: 10px;
}

.icn-18-16 {
    width: 18px;
    height: 16px;
}

.icn-21-19 {
    width: 21px;
    height: 19px;
}

.icn-22-20 {
    width: 22px;
    height: 20px;
}

.icn-20-22 {
    width: 20px;
    height: 22px;
}

.icn-26-32 {
    width: 26px;
    height: 32px;
}

.icn-64-60 {
    width: 64px;
    height: 60px;
}

.svg-cc {
    fill: currentColor;
}

.icn .svg-sc {
    fill: var(--secondary-contrast, #fff);
}

.icn .svg-se {
    fill: var(--secondary, #ff5e29);
}

.icn .svg-bbg {
    fill: var(--body-bg, #fff);
}

.icn .svg-i1 {
    fill: var(--icons-1, #000);
}

.icn .svg-i2 {
    fill: var(--icons-2, #ff5e29);
}

.icn-circle {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--secondary, #ff5e29);
    border-radius: 50%;
    transition: border 0.25s ease;
}

:hover > div > div > .icn-circle,
.is-active > div > div > .icn-circle {
    border-color: var(--body-text-primary, #000);
}

.icn-menu {
    position: relative;
    display: block;
    width: 14px;
    height: 2px;
    background-color: var(--topbar-fg, #fff);
    border-radius: 1px;
}

.icn-menu::before,
.icn-menu::after {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    background-color: var(--topbar-fg, #fff);
    border-radius: 1px;
}

.icn-menu::before {
    width: 18px;
    top: 8px;
}

.icn-menu::after {
    width: 8px;
    top: 16px;
}

.more-dots-wrap {
    height: 34px;
    width: 34px;
    padding: 15px 9px;
    cursor: pointer;
}

.icn-more-dots {
    display: block;
    height: 4px;
    width: 4px;
    border-radius: 2px;
    background-color: var(--body-text-secondary, #666);
    box-shadow: 6px 0 0 0 var(--body-text-secondary, #666), 12px 0 0 0 var(--body-text-secondary, #666);
}

.open > * > .icn-more-dots,
[aria-expanded='true'] > * > .icn-more-dots,
:hover > * > .icn-more-dots {
    background-color: var(--body-text-primary, #000);
    box-shadow: 6px 0 0 0 var(--body-text-primary, #000), 12px 0 0 0 var(--body-text-primary, #000);
}

.icn-cross,
.icn-close {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M9.414 8l4.3 4.3a1 1 0 01-1.414 1.411L8 9.414l-4.3 4.3A1 1 0 012.289 12.3L6.586 8l-4.3-4.3A1 1 0 013.7 2.289L8 6.586l4.3-4.3A1 1 0 1113.711 3.7z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.attachment-actions .icn-cross,
.attachment-actions .icn-close {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M9.414 8l4.3 4.3a1 1 0 01-1.414 1.411L8 9.414l-4.3 4.3A1 1 0 012.289 12.3L6.586 8l-4.3-4.3A1 1 0 013.7 2.289L8 6.586l4.3-4.3A1 1 0 1113.711 3.7z' fill-rule='evenodd'/%3E%3C/svg%3E")
        no-repeat !important;
}

.badge {
    display: inline-block;
    color: var(--secondary-contrast, #fff);
    background-color: var(--secondary, #ff5e29);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
}

.dropup,
.dropdown {
    position: relative;
}

.dropdown .caret {
    color: rgba(0, 0, 0, 0.35);
}

.dropdown:hover .caret {
    color: var(--body-text-primary, #000);
}

.dropdown.open .caret,
.dropdown.open:hover .caret {
    color: var(--primary, #175cff);
}

.dropdown-toggle {
    white-space: nowrap;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: none;
    min-width: 140px;
    margin: 6px 0 0;
    text-align: left;
    background-color: #fff;
    border-radius: 8px;
    background-clip: padding-box;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.form-group .dropdown-menu {
    width: 100%;
}

.order-form .form-group .dropdown-menu {
    width: auto;
    min-width: 100%;
}

.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
}

.dropdown-item {
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
    width: 100%;
    padding: 7px 20px;
    margin: 3px 0 6px;
    clear: both;
    cursor: pointer;
    color: #000;
}

.dropdown-item:first-child {
    margin-top: 8px;
}

.dropdown-item:last-child {
    margin-bottom: 8px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary, #175cff);
}

.dropdown-item:hover::before,
.dropdown-item:focus::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.07;
    pointer-events: none;
}

.dropdown-item.active {
    color: var(--primary, #175cff);
}

.no-results {
    padding: 15px 20px;
    color: var(--body-text-secondary, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.open > .dropdown-menu {
    display: block;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}
.dropdown-menu-chat-box {
    top: 274px;
    left: -300px;
}

.dropdown-title {
    padding: 15px 20px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-icons .icn {
    margin-right: 10px;
}

.tooltip {
    position: absolute;
    z-index: 90;
    display: block;
    word-wrap: break-word;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.tooltip.in {
    opacity: 1;
}

.tooltip-inner {
    position: relative;
    padding: 5px 10px;
    color: var(--body-bg, #fff);
    text-align: center;
    background-color: var(--body-text-primary, #000);
    border-radius: 8px;
}

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

body.is-processing .modal {
    pointer-events: none;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 540px;
    margin: 150px auto;
    pointer-events: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(73, 134, 153, 0.15);
    outline: 0;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 20px 0;
    border-radius: 8px 8px 0 0;
}

.modal-users .modal-title-container {
    max-width: calc(100% - 23px);
}

.modal-title {
    margin-bottom: 0;
}

.fzm {
    font-size: 1.25rem;
    line-height: 1.4;
}

.modal-note-1 {
    position: relative;
    margin-bottom: 15px;
}

.modal-note {
    color: #57586e;
    margin-bottom: 15px;
}

.modal-users .modal-note-1,
.modal-users .activeUsers-activity {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-header .close {
    margin: -6px -11px 0 0;
}

.btn-circle.btn-sm {
    min-width: 34px;
}

.btn-circle {
    min-width: 42px;
}

.btn-icn {
    padding: 0;
}

.btn-hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0);
}

.btn-sm {
    height: 34px;
    padding: 7px 16px;
}

.btn-icn .icn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.icn-close {
    width: 12px;
    height: 12px;
    background-position: -1292px -2px;
}

.icn {
    background-image: url(../images/sprite-icons-3x.png);
    background-repeat: no-repeat;
    background-size: 2600px 800px;
    -webkit-background-size: 2600px 800px;
    display: block;
}

.modal-users .modal-body {
    padding-top: 16px;
    padding-bottom: 9px;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 34px 20px 25px;
}

.modal-users .activeUsers-item {
    padding: 14px 0;
    cursor: initial;
}

.activeUsers-item {
    padding-left: 40px;
}

.activeUsers-item,
.bestSellers-item {
    position: relative;
    display: flex;
    padding: 9px 20px;
    cursor: pointer;
    min-width: 0;
    transition: 0.25s ease;
}

.modal-users .activeUsers-user {
    margin-right: 0;
    margin-top: 0;
}

.activeUsers-user {
    display: flex;
    margin-top: 1px;
    min-width: 0;
    margin-right: 20px;
}

.activeUsers-user,
.activeUsers-purchases,
.bestSellers-info {
    flex: 1;
}

.modal-dialog-scrollable {
    display: flex;
    max-height: calc(100% - 200px);
}

.avatar-status-container {
    position: relative;
    margin-right: 12px;
}

.activeUsers-action,
.avatar-status-container,
.bestSellers-thumb,
.bestSellers-action {
    flex: none;
}

.modal-users .activeUsers-info {
    padding-right: 20px;
}

.modal-users .activeUsers-info {
    flex: 1;
}

.activeUsers-info {
    min-width: 0;
}

.activeUsers-action,
.avatar-status-container,
.bestSellers-thumb,
.bestSellers-action {
    flex: none;
}

.modal-users .activeUsers-item {
    padding: 14px 0;
    cursor: initial;
}

.activeUsers-item,
.bestSellers-item {
    position: relative;
    display: flex;
    padding: 9px 20px;
    cursor: pointer;
    min-width: 0;
    transition: 0.25s ease;
}

.avst-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ecf2ff;
    transition: 0.25s ease;
}

.modal-users .activeUsers-name {
    display: flex;
    align-items: center;
    text-overflow: initial;
}

.activeUsers-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-users .activeUsers-name span.fwsb {
    flex-shrink: 0;
}

.modal-users .activeUsers-name span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fwsb {
    font-weight: 600;
}

.activeUsers-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-users .activeUsers-name span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dot-sep-sm {
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #b4c6cc;
    border-radius: 1px;
    margin: 4px 6px;
    flex-shrink: 0;
}

.text-muted {
    color: #526275;
}

.modal-users .modal-note,
.modal-users .activeUsers-activity {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-dim {
    color: #57586e;
}

.activeUsers-action,
.avatar-status-container,
.bestSellers-thumb,
.bestSellers-action {
    flex: none;
}

.modal-users .modal-footer {
    padding-bottom: 45px;
}

.justify-center {
    justify-content: center;
}

.modal-footer {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 200px);
    overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 200px);
}

.modal-dialog-centered::before {
    display: block;
    height: calc(100vh - 200px);
    content: '';
}

.modal-dialog-centered.modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
    content: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--body-text-primary, #000);
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.15);
    outline: 0;
}

body.is-processing .modal-content {
    pointer-events: none;
}

.modal-checkout {
    max-width: fit-content !important;
}

.modal-content-customer {
    max-width: 90%;
    width: fit-content;
}

.form-outer-new .form-container + .form-container::before {
    opacity: 0 !important;
}

.modal-content-inner {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

.modal-upsell .modal-content-inner {
    max-width: 780px;
}

.modal-content-sm {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.modal-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--body-text-primary, #000);
    pointer-events: auto;
    background-color: var(--body-bg, #fff);
    background-clip: padding-box;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.15);
    outline: 0;
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 30px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8);
}

.modal-close {
    position: relative;
    padding: 7px;
    cursor: pointer;
}

.modal-close:hover::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 50%;
    background-color: var(--body-text-primary, #000);
    opacity: 0;
}

.modal-close:hover::before {
    opacity: 0.06;
}

.modal-close:active::before {
    opacity: 0.12;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.modal-header .modal-close {
    margin: -3px -9px 0 0;
}

.modal-title {
    margin-bottom: 0;
    padding-right: 24px;
}

.modal-note {
    position: relative;
    margin-bottom: -20px;
    padding: 15px 20px;
}

.modal-note::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 22px 30px 25px;
}

.modal-body .modal-close {
    cursor: pointer;
    position: absolute;
    top: 51px;
    right: 21px;
    z-index: 1;
}

.modal-body > .loader {
    position: absolute;
    right: 36px;
    top: 66px;
}

.modal-body > .loader-lg {
    padding: 12px 0;
    margin-bottom: 54px;
}

.modal-body .qeditor-container {
    padding-bottom: 50px;
    border: 0;
    position: relative;
}

.modal-body .qeditor-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.1;
    pointer-events: none;
}

.modal-body .qeditor-toolbar,
.modal-body #qeditor-toolbar {
    background-color: transparent;
}

.modal-body .qeditor-container + .qeditor-toolbar,
.modal-body .qeditor-container + #qeditor-toolbar {
    margin-top: -50px;
    position: relative;
}

.modal-body .qeditor-container + .qeditor-toolbar::before,
.modal-body .qeditor-container + #qeditor-toolbar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.1;
    pointer-events: none;
}

.modal-upsell .container .modal-body {
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (min-width: 600px) {
    .modal-content-sm .modal-body .modal-close {
        right: -9px;
    }
}

.modal-footer {
    display: flex;
    align-items: center;
    padding: 30px;
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

.modal-agree-terms .link-active {
    display: inline-block;
}

.modal-agree-terms .link-active:hover {
    color: var(--secondary, #ff5e29);
}

.modal-btn {
    width: 200px;
}

.modal-btn.btn-cancel {
    margin-top: 14px;
    margin-bottom: -16px;
}

.modal-order-title {
    margin-top: 1px;
    margin-bottom: 28px;
}

.modal-order-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 25px;
    padding-bottom: 5px;
}

.modal-order-footer .btn + .btn {
    margin-top: 10px;
}

@media only screen and (min-width: 600px) {
    .modal-order-footer {
        flex-direction: row;
    }

    .modal-order-footer .btn + .btn {
        margin-top: 0;
        margin-left: 10px;
    }
}

.modal-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-wait-loader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 0 8px rgba(73, 134, 153, 0.15);
    margin-top: -74px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: spin 1s linear infinite;
}

.modal-wait-loader > svg {
    width: 50px;
    height: 50px;
}

.modal-wait-loader > svg #fg {
    stroke-dasharray: 0, 119.381;
    stroke-dasharray: 71.202, 48.1786;
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.file-drop {
    position: relative;
    text-align: center;
    padding: 60px 50px;
}

.file-drop::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px dashed var(--body-text-primary, #000);
    opacity: 0.1;
    border-radius: 8px;
    pointer-events: none;
}

.link-primary {
    color: var(--primary, #175cff);
}

.link-secondary {
    color: var(--secondary, #ff5e29);
}

.link-cc {
    position: relative;
}

.link-cc:after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    border-radius: 0.5px;
    background-color: currentColor;
    opacity: 0;
    transition: 0.25s ease;
}

.link-cc:hover::after {
    opacity: 1;
}

.link-active {
    position: relative;
}

.link-active:after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    border-radius: 0.5px;
    background-color: currentColor;
    opacity: 1;
}

.link-ql {
    color: var(--primary, #175cff);
    position: relative;
}

.link-ql:after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    border-radius: 0.5px;
    background-color: var(--primary, #175cff);
    opacity: 0;
    transition: 0.25s ease;
}

.link-ql:hover::after {
    opacity: 1;
}

.alert {
    position: relative;
    padding: 10px 20px;
    margin: 15px auto;
    border: 1px solid transparent;
    border-radius: 21px;
    pointer-events: all;
}

.alert-flex {
    display: flex;
}

.alert-success {
    color: #fff;
    background-color: #175cff;
    border-color: #175cff;
}

.alert-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 3px 18px;
    color: var(--body-bg, #fff);
    background-color: var(--body-text-primary, #000);
    border-radius: 16px;
    margin-left: -13px;
    margin-right: -13px;
}

.alert-input .fzl {
    flex-basis: 100%;
    margin-top: 10px;
    margin-bottom: 14px;
}

.alert-input .alert-action {
    margin-left: 0;
    margin-bottom: 15px;
}

@media only screen and (min-width: 600px) {
    .alert-input {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (min-width: 600px) {
    .alert-input {
        flex-wrap: nowrap;
        border-radius: 25px;
        padding-right: 3px;
    }

    .alert-input .fzl {
        flex-basis: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .alert-input .alert-action {
        margin-left: auto;
        margin-bottom: 0;
    }
}

.alert-danger {
    color: var(--body-bg, #fff);
    background-color: #ff430a;
    border-color: #ff430a;
}

.alert-clickable {
    cursor: pointer;
}

.alert-action {
    display: flex;
    align-items: center;
    flex: none;
    margin-left: auto;
    padding-left: 20px;
}

.alert-container {
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0 20px;
}

.alert-container .alert {
    padding: 15px 14px 13px 38px;
    margin: 30px auto 50px;
    border-radius: 8px;
}

.page-alert-container {
    position: fixed;
    bottom: 0;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 21;
}

@media only screen and (min-width: 1000px) {
    .page-alert-container {
        top: 0;
        bottom: auto;
    }
}

.banner-container {
    position: relative;
    padding: 93px 0;
}

.banner-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.banner-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.banner-image > img {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.5;
}

.banner-content {
    position: relative;
    color: var(--body-bg, #fff);
    z-index: 1;
}

.video-container {
    position: relative;
    padding: 43px 0 50px;
}

@media only screen and (min-width: 550px) {
    .video-container {
        padding: 93px 0 100px;
    }
}

.video-content {
    padding: 0;
}

@media only screen and (min-width: 550px) {
    .video-content {
        padding: 0 25px;
    }
}

@media only screen and (min-width: 601px) {
    .video-content {
        text-align: center;
    }
}

@media only screen and (min-width: 1000px) {
    .video-content {
        padding: 0 105px;
    }
}

@media only screen and (min-width: 1170px) {
    .video-content {
        padding: 0 230px;
    }
}

.video-title {
    color: var(--headings, #000);
}

.video-subtitle {
    color: var(--body-text-primary, #000);
    margin: 7px 0 44px;
}

.video-wrapper {
    position: relative;
    padding: 0;
    border-radius: 8px;
}

@media only screen and (min-width: 550px) {
    .video-wrapper {
        padding: 0 25px;
    }
}

@media only screen and (min-width: 1000px) {
    .video-wrapper {
        padding: 0 60px;
    }
}

.video-loading {
    position: relative;
    height: 0;
    padding-top: 56%;
}

.video-loading::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.testimonials-container {
    position: relative;
    padding: 50px 0 0;
}

@media only screen and (min-width: 550px) {
    .testimonials-container {
        padding: 100px 0 40px;
    }
}

.testimonial-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 50px;
}

@media only screen and (min-width: 550px) {
    .testimonial-wrapper {
        flex-wrap: nowrap;
        margin-bottom: 60px;
    }
}

.testimonials-container-v2 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.testimonial-wrapper-v2 {
    position: relative;
    padding: 20px;
}

.testimonial-wrapper-v2::before,
.testimonial-wrapper-v2::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
}

.testimonial-wrapper-v2::before {
    background-color: var(--body-text-primary, #000);
    opacity: 0.02;
}

.testimonial-wrapper-v2::after {
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.1;
}

.testimonial-wrapper-v2 .testimonial-image {
    margin: 0 auto;
}

@media only screen and (min-width: 550px) {
    .testimonial-wrapper-v2 {
        display: flex;
        flex: 1;
        flex-direction: row-reverse;
        align-items: flex-start;
    }

    .testimonial-wrapper-v2 .testimonial-content {
        margin-left: 0;
        margin-right: 30px;
    }
}

.testimonial-image {
    position: relative;
    flex: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    color: var(--body-text-primary, #000);
}

.testimonial-image > img {
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.testimonial-image::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

.testimonial-image .svg-cc {
    fill-opacity: 0.4;
}

.testimonial-content {
    margin-top: 20px;
}

@media only screen and (min-width: 550px) {
    .testimonial-content {
        margin-top: 0;
        margin-left: 30px;
    }
}

.testimonial-quote {
    color: var(--body-text-primary, #000);
    margin-top: 3px;
    margin-bottom: 12px;
}

.testimonial-user {
    display: flex;
    color: var(--body-text-secondary, #666);
    margin-bottom: -5px;
}

.instructor-bio-container {
    position: relative;
    padding-top: 50px;
    padding-bottom: 35px;
}

@media only screen and (min-width: 550px) {
    .instructor-bio-container {
        padding-top: 100px;
        padding-bottom: 85px;
    }
}

@media only screen and (min-width: 650px) {
    .instructor-bio-container .container-sm {
        display: flex;
    }
}

.instructor-image {
    position: relative;
    flex: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
}

.instructor-image .icn {
    width: 100px;
    height: 100px;
}

.instructor-image > img {
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.instructor-image::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

.instructor-image .svg-cc {
    fill-opacity: 0.4;
}

@media only screen and (min-width: 650px) {
    .instructor-image {
        width: 200px;
        height: 200px;
    }

    .instructor-image .icn {
        width: 200px;
        height: 200px;
    }
}

.instructor-intro {
    margin-top: 24px;
    color: var(--body-text-primary, #000);
}

.instructor-intro > p {
    margin-bottom: 10px;
}

@media only screen and (min-width: 650px) {
    .instructor-intro {
        margin-top: 14px;
        margin-left: 30px;
    }
}

.footer-container {
    position: relative;
    background-color: var(--topbar-bg, #175cff);
    padding: 35px 0;
    margin-top: auto;
}

.footer-container > .container {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.footer-column {
    flex: none;
    flex-basis: 100%;
    padding: 0 15px;
    color: var(--topbar-fg, #fff);
}

.footer-column > p {
    padding: 10px 0;
}

.footer-column > a {
    padding: 10px 0;
    display: block;
}

.footer-column.copyright-info {
    order: 3;
    padding-top: 20px;
}

.footer-column.footer-links-section + .footer-column.footer-links-section {
    padding-top: 20px;
}

@media only screen and (min-width: 650px) {
    .footer-column {
        flex-basis: 50%;
    }

    .footer-column.copyright-info {
        flex-basis: 100%;
    }

    .footer-column.footer-links-section + .footer-column.footer-links-section {
        padding-top: 0;
    }
}

@media only screen and (min-width: 1000px) {
    .footer-container > .container {
        flex-wrap: nowrap;
    }

    .footer-column {
        flex-basis: 25%;
    }

    .footer-column.copyright-info {
        order: -1;
        flex-basis: 50%;
        flex: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.form-control {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 19px;
    color: var(--body-text-primary, #000);
    background-color: var(--body-bg, #fff);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0;
}

.form-control:focus {
    outline: 0;
}

.form-control::placeholder {
    color: rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.form-control-md {
    padding: 10px 15px;
}

.form-control.fzl {
    padding: 9px 15px;
}

.form-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
}

.form-row .checkbox {
    margin-top: 3px;
    margin-bottom: 58px;
}

.form-row .w-half {
    flex-basis: 100%;
}

.form-row .w-half + .w-half.without-label {
    margin-left: 0;
    margin-top: -10px;
}

.form-row .w-eq {
    flex: 100%;
}

.form-row.form-footer-row {
    padding-top: 25px;
}

.form-row.form-checkbox-row {
    padding-bottom: 24px;
}

@media only screen and (min-width: 550px) {
    .form-row {
        flex-wrap: nowrap;
    }

    .form-row .w-half {
        width: calc(50% - 10px);
    }

    .form-row .w-half + .w-half.without-label {
        margin-top: 0;
        margin-left: 20px;
    }

    .form-row .w-half + .w-half {
        margin-left: 20px;
    }

    .form-row .form-group + .form-group {
        margin-left: 20px;
    }
}

.form-row-grid {
    display: grid;
}

.form-row-grid .form-group + .form-group {
    margin-left: 0;
}

@media only screen and (min-width: 550px) {
    .form-row-grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 20px;
    }
}

@media only screen and (min-width: 1000px) {
    .form-row-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 0 20px;
    }
}

.form-group {
    position: relative;
    margin-bottom: 25px;
    max-width: 100%;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    color: var(--body-text-primary, #000);
}

.has-error .form-label {
    color: #ff430a;
}

textarea {
    resize: none;
}

.form-container {
    position: relative;
    background-color: var(--body-bg, #fff);
    border-radius: 16px;
    width: 100%;
    padding: 53px 60px 60px;
    margin: 0 auto;
}

.form-container .btn-lg {
    padding-left: 60px;
    padding-right: 60px;
}

.modal .form-container {
    padding-left: 30px;
    padding-right: 30px;
}

.form-title {
    color: var(--headings, #000);
    margin-bottom: 18px;
}

.modal .form-title {
    margin-top: 1px;
    padding-right: 46px;
    margin-bottom: 19px;
}

.form-subtitle {
    display: flex;
    color: var(--body-text-primary, #000);
    margin-bottom: 20px;
}

.modal .form-subtitle {
    margin-bottom: 50px;
}

.form-subtitle .form-link {
    margin: 0 0 0 3px;
}

.modal .form-subtitle .form-link {
    margin-bottom: 0;
}

.form-link {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: var(--primary, #175cff);
}

.modal .form-link {
    margin-bottom: 30px;
}

.form-input {
    position: relative;
}

.form-input::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.1;
    pointer-events: none;
}

.form-input:focus-within::before {
    opacity: 1;
    border-color: var(--primary, #175cff);
}

.has-error .form-input::before {
    opacity: 1;
    border-color: #ff430a;
}

.form-input > .password-action {
    right: 8px;
    top: 4px;
}

.form-input > .add-image {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 1;
    cursor: pointer;
}

.form-input > .loader {
    position: absolute;
    top: 25px;
    right: 29px;
    color: var(--primary, #175cff);
}

.form-input > .btn {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 8px 8px 0;
}

.form-input > .btn::before {
    border-radius: 0 8px 8px 0;
}

.password-action {
    width: 42px;
    height: 42px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    color: var(--primary, #175cff);
}

.password-action .icn {
    display: block;
}

.password-action + .form-control {
    padding-right: 56px;
}

.loader + .form-control {
    padding-right: 56px;
}

.add-image + .form-control {
    padding-right: 43px;
}

.form-info {
    display: none;
    position: relative;
    flex: auto;
    color: var(--cover-home, #fff);
    padding-top: 50px;
    margin-right: 70px;
}

@media only screen and (min-width: 1000px) {
    .form-info {
        display: block;
    }
}

@media only screen and (min-width: 1170px) {
    .form-info {
        margin-right: 120px;
    }
}

.form-info-links {
    position: absolute;
    left: 0;
    bottom: 55px;
    display: flex;
}

.form-info-links > a + a,
.form-info-links > .dropup {
    margin-left: 30px;
}

.coupon-input .form-control {
    padding-right: 120px;
}

.coupon-input:focus-within::before {
    border-color: var(--secondary, #ff5e29);
}

.help-block {
    display: block;
    color: var(--body-text-secondary, #666);
    margin: 5px 0 -5px;
}

.has-error .help-block {
    color: #ff430a;
}

.form-select .caret {
    position: absolute;
    top: 17px;
    right: 20px;
}

.form-select:focus-within {
    color: var(--primary, #175cff);
}

.form-outer .form-container + .form-container::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    border-radius: 0.5px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

@media only screen and (min-width: 600px) {
    .form-outer {
        display: flex;
        flex-direction: row-reverse;
    }

    .form-outer .form-container {
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }

    .form-outer .form-container.guest-checkout-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 30px;
        width: 279px;
    }

    .form-outer .form-container.guest-checkout-form .form-subtitle {
        margin-bottom: 25px;
    }

    .form-outer .form-container.member-checkout-form {
        width: 471px;
        padding-left: 31px;
    }
}

.has-dropdown > .caret {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
    color: rgba(0, 0, 0, 0.35);
}

.has-dropdown:hover > .caret,
.has-dropdown:focus-within > .caret,
.open > .has-dropdown > .caret {
    color: var(--body-text-primary, #000);
}

.tabs-container > input {
    display: none;
}

.tabs-content > .tab-panel {
    height: 100%;
    flex-direction: column;
    display: none;
}

.tabs-radio:first-child:checked ~ .tabs-content > .tab-panel:first-child,
.tabs-radio:nth-child(2):checked ~ .tabs-content > .tab-panel:nth-child(2),
.tabs-radio:nth-child(3):checked ~ .tabs-content > .tab-panel:nth-child(3),
.tabs-radio:nth-child(4):checked ~ .tabs-content > .tab-panel:nth-child(4) {
    display: flex;
}

.tabs-radio:first-child:checked ~ .tabs-nav li:first-child .tab-label,
.tabs-radio:nth-child(2):checked ~ .tabs-nav li:nth-child(2) .tab-label,
.tabs-radio:nth-child(3):checked ~ .tabs-nav li:nth-child(3) .tab-label,
.tabs-radio:nth-child(4):checked ~ .tabs-nav li:nth-child(4) .tab-label {
    color: var(--secondary, #ff5e29);
}

.tabs-radio:first-child:checked ~ .tabs-nav li:first-child .tab-label::after,
.tabs-radio:nth-child(2):checked ~ .tabs-nav li:nth-child(2) .tab-label::after,
.tabs-radio:nth-child(3):checked ~ .tabs-nav li:nth-child(3) .tab-label::after,
.tabs-radio:nth-child(4):checked ~ .tabs-nav li:nth-child(4) .tab-label::after {
    /* background-color: var(--secondary, #ff5e29); */
    opacity: 1;
}

.tabs-nav ul {
    display: flex;
    margin: 0 0 15px;
}

.tabs-nav li {
    flex: 1;
    min-width: 0;
}

.tab-label {
    position: relative;
    display: flex;
    align-items: center;
    padding: 28px 20px 29px;
    border-radius: 8px 8px 0 0;
}

.tab-label::after {
    content: '';
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.tab-label:hover::after {
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.tab-label > .icn {
    flex-shrink: 0;
    margin: 0 10px 0 0;
}

.tab-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabs-container-sm .tabs-nav ul {
    margin: 0;
}

.tabs-container-sm .tabs-nav li {
    flex: none;
}

.tabs-container-sm .tab-label {
    padding: 11px 20px 12px;
}

.tabs-container-sm .tab-label::after {
    left: 20px;
    right: 20px;
}

@media only screen and (min-width: 550px) {
    .tabs-container-sm .tabs-nav ul {
        margin: 0 0 0 10px;
    }
}

.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
    position: relative;
    z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
    z-index: 3;
}

.input-group-prepend {
    order: -1;
    border-radius: 8px 0 0 8px;
}

.input-group-append {
    border-radius: 0 8px 8px 0;
}

.input-group > .input-group-append > .btn {
    border-radius: 0 8px 8px 0;
}

.account-form-container {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.account-form-container > .container {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.account-form-container .form-container {
    flex-shrink: 0;
    padding: 43px 15px 50px;
}

.account-form-container .form-container .form-row.jcc {
    padding-top: 10px;
}

@media only screen and (min-width: 601px) {
    .account-form-container .form-container {
        padding: 43px 50px 50px;
    }
}

@media only screen and (min-width: 1000px) {
    .account-form-container {
        min-height: 100vh;
        padding-left: 25px;
        padding-right: 25px;
    }

    .account-form-container::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--body-text-primary, #000);
        opacity: 0.07;
        pointer-events: none;
    }

    .account-form-container > .container {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .account-form-container .form-container {
        max-width: 460px;
        padding: 53px 60px 60px;
    }

    .account-form-container .form-container .form-row.jcc {
        padding-top: 0;
    }
}

@media only screen and (min-width: 1170px) {
    .account-form-container {
        padding: 0;
    }

    .account-form-container .form-container {
        max-width: 510px;
    }
}

.account-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

.account-image > img {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-image::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.5;
}

@media only screen and (min-width: 1000px) {
    .account-image {
        display: block;
    }
}

.featured-courses-container {
    padding-top: 43px;
    padding-bottom: 50px;
}

.featured-courses-container.membership-tiers {
    padding-bottom: 0 !important;
}

@media only screen and (min-width: 550px) {
    .featured-courses-container {
        padding-top: 93px;
        padding-bottom: 100px;
    }
}

.section-title {
    color: var(--headings, #000);
}

.section-subtitle {
    color: var(--body-text-primary, #000);
}

.featured-courses-title {
    color: var(--headings, #000);
    margin-bottom: 28px;
}

.featured-courses-footer {
    margin-top: 20px;
}

@media only screen and (min-width: 601px) {
    .section-title,
    .section-subtitle,
    .featured-courses-title,
    .featured-courses-footer {
        text-align: center;
    }
}

.filter-courses-container {
    padding-top: 100px;
}

.filter-courses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}

.filter-courses-dd {
    display: flex;
}

.filter-courses-dd-item {
    display: flex;
}

.filter-courses-dd-item + .filter-courses-dd-item {
    margin-left: 50px;
}

.filter-courses-dd-item .dropdown > .fzl {
    cursor: pointer;
    color: var(--secondary, #ff5e29);
}

.filter-courses-search {
    width: 360px;
}

.featured-courses-container .courses-container {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px 0 30px;
    min-width: 0;
    max-width: 100vw;
    overflow-x: auto;
}

.featured-courses-container .card-wrapper {
    position: relative;
    width: 280px;
    flex-shrink: 0;
}

.featured-courses-container .card-wrapper:first-child {
    margin-left: 15px;
}

.featured-courses-container .card-wrapper:last-child {
    width: 295px;
}

.featured-courses-container .card-wrapper:last-child > * {
    margin-right: 15px;
}

.featured-courses-container .card-wrapper + .card-wrapper {
    margin-left: 20px;
}

.products-tokens .courses-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    padding: 0;
    grid-gap: 30px 10px;
}

@media only screen and (min-width: 600px) {
    .products-tokens .courses-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 275px);
        justify-content: center;
        padding: 0;
        grid-gap: 30px 20px;
    }

    .featured-courses-container .courses-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 275px);
        grid-gap: 30px 20px;
        justify-content: center;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }

    .card-wrapper {
        width: 275px;
    }

    .featured-courses-container .card-wrapper {
        margin-left: 0;
    }

    .featured-courses-container .card-wrapper:first-child {
        margin-left: 0;
    }

    .featured-courses-container .card-wrapper:last-child {
        width: 275px;
    }

    .featured-courses-container .card-wrapper:last-child > * {
        margin-right: 0;
    }

    .featured-courses-container .card-wrapper + .card-wrapper {
        margin-left: 0;
    }
}

@media only screen and (min-width: 650px) {
    .products-tokens .courses-container {
        grid-template-columns: repeat(auto-fill, 280px);
    }

    .featured-courses-container .courses-container {
        grid-template-columns: repeat(auto-fill, 280px);
        grid-gap: 30px 20px;
    }

    .card-wrapper {
        width: 280px;
    }

    .featured-courses-container .card-wrapper:last-child {
        width: 280px;
    }
}

@media only screen and (min-width: 1170px) {
    .featured-courses-container .courses-container {
        grid-template-columns: repeat(auto-fill, 360px);
        grid-gap: 30px;
    }

    .featured-courses-container .card-wrapper {
        width: 360px;
    }

    .featured-courses-container .card-wrapper:last-child {
        width: 360px;
    }
}

.products-main-container {
    padding: 43px 0 50px;
}

@media only screen and (min-width: 550px) {
    .products-main-container {
        padding: 53px 0 120px;
    }
}

.products-inner-wrapper {
    position: relative;
    display: flex;
}

.products-container {
    position: relative;
}

.products-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    padding: 0;
    grid-gap: 20px 10px;
}

@media only screen and (min-width: 600px) {
    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 275px);
        grid-gap: 20px;
        justify-content: center;
    }

    .products-container .card-wrapper {
        width: 275px;
    }
}

@media only screen and (min-width: 650px) {
    .products-container {
        grid-template-columns: repeat(auto-fill, 280px);
    }

    .products-container .card-wrapper {
        width: 280px;
    }
}

.products-message {
    position: relative;
    border-radius: 8px;
    padding: 73px 15px 154px;
    overflow: hidden;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.filter-tokens-container + .products-message {
    margin-top: -34px;
}

.products-message > svg {
    width: 240px;
    position: absolute;
    right: 15px;
    bottom: -90px;
    fill: var(--body-text-secondary, #666);
    fill-opacity: 0.2;
}

@media only screen and (min-width: 550px) {
    .products-message {
        padding: 113px 15px 114px;
    }

    .products-message > svg {
        width: 268px;
    }
}

@media only screen and (min-width: 600px) {
    .products-message {
        padding: 113px 50px 114px;
    }

    .products-message > svg {
        right: 50px;
    }
}

@media only screen and (min-width: 1170px) {
    .products-message {
        padding: 233px 60px 234px;
    }

    .products-message > svg {
        width: 390px;
        right: 60px;
        bottom: -100px;
    }
}

.products-sep {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.prod-msg-heading {
    margin-bottom: 7px;
    color: var(--primary, #175cff);
    max-width: 400px;
}

.prod-msg-text {
    color: var(--body-text-secondary, #666);
    max-width: 400px;
}

.products-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 43px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 550px) {
    .products-main-header {
        margin-bottom: 53px;
    }
}

@media only screen and (min-width: 1170px) {
    .products-main-header {
        max-width: none;
    }
}

.products-tokens {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.products-tokens.is-loading {
    margin-top: 10px;
}

.filter-tokens-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 880px;
    margin: -4px auto 30px;
}

@media only screen and (min-width: 1170px) {
    .filter-tokens-container {
        margin-top: 0;
        margin-bottom: 34px;
    }
}

.filter-clear-all {
    color: var(--primary, #175cff);
    padding: 8px 11px 6px 12px;
    margin-top: 4px;
    margin-right: 4px;
    cursor: pointer;
}

.filter-clear-all .link-cc {
    display: inline-block;
}

.filter-clear-all:hover .link-cc::after {
    opacity: 1;
}

.filter-token {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--body-text-primary, #000);
    background-color: var(--body-bg, #fff);
    padding: 6px 10px 6px 12px;
    border-radius: 17px;
    margin-top: 4px;
    margin-right: 4px;
    cursor: pointer;
}

.filter-token::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 17px;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.2;
}

.filter-token span {
    display: inline-block;
    margin-top: 1px;
    margin-right: 9px;
}

.filter-token .close svg {
    fill-opacity: 0.5;
}

.filter-token:hover {
    color: var(--body-bg, #fff);
    background-color: var(--body-text-primary, #000);
}

.filter-token:hover .close svg {
    fill-opacity: 1;
}

.filter-token .rating-star {
    margin-top: 3px;
    margin-right: 8px;
}

.token-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: currentColor;
    margin-left: -3px;
    margin-top: 3px;
    margin-right: 8px;
}

.filter-token:hover .token-color {
    border: 2px solid var(--body-bg, #fff);
}

.products-heading {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.products-sort {
    display: none;
    flex-shrink: 0;
    margin-left: 20px;
    cursor: pointer;
}

.products-sort .dropdown-menu {
    margin-top: 0;
    margin-right: -6px;
}

.products-sort svg {
    fill-opacity: 0.5;
}

.products-sort:hover svg,
.products-sort .open svg {
    fill-opacity: 1;
}

.products-settings-toggle {
    position: relative;
    cursor: pointer;
    margin-right: -1px;
}

@media only screen and (min-width: 1170px) {
    .products-sort {
        display: block;
    }

    .products-settings-toggle {
        display: none;
    }
}

body.settings-open {
    overflow: hidden;
}

.products-settings-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    display: none;
}

.settings-open .products-settings-container {
    display: block;
}

.products-settings-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.5;
}

.products-settings-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 75vw;
    min-width: 290px;
    background-color: var(--body-bg, #fff);
    padding: 15px 15px 99px;
    overflow-y: auto;
}

.products-settings-wrapper .form-input {
    margin-bottom: 18px;
}

.products-settings-wrapper .filter-sep {
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0;
}

.products-settings-footer {
    position: fixed;
    left: 0;
    width: 75vw;
    min-width: 290px;
    bottom: 0;
    padding: 15px;
    background-color: var(--body-bg, #fff);
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15);
}

.products-sort-text {
    display: flex;
    align-items: center;
}

.products-sort-text .icn {
    margin-left: 10px;
}

.products-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.products-pagination .dropdown-menu {
    width: 100%;
}

.products-pagination .dropdown {
    flex: 1;
}

@media only screen and (min-width: 550px) {
    .products-pagination {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 600px) {
    .products-pagination .dropdown {
        max-width: 280px;
    }
}

.pagination-prev,
.pagination-next {
    flex-shrink: 0;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 13px 0;
    color: var(--body-bg, #fff);
    border-radius: 21px;
    cursor: pointer;
}

.pagination-prev::before,
.pagination-next::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 21px;
    opacity: 0.35;
    pointer-events: none;
}

.products-pagination.is-loading .pagination-prev::before,
.products-pagination.is-loading .pagination-next::before {
    opacity: 0.15;
}

.pagination-prev:hover::before,
.pagination-next:hover::before {
    opacity: 1;
}

.pagination-prev {
    margin-right: 15px;
    padding-left: 16px;
}

.pagination-next {
    margin-left: 15px;
    padding-left: 19px;
}

@media only screen and (min-width: 600px) {
    .pagination-prev {
        margin-right: 20px;
    }

    .pagination-next {
        margin-left: 20x;
    }
}

.products-filter {
    display: none;
    flex-shrink: 0;
    width: 230px;
    margin-right: 30px;
    margin-bottom: -12px;
}

.search-input {
    margin-bottom: 18px;
}

.search-input .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    padding: 0;
    border-radius: 17px;
    color: var(--primary-contrast, #fff);
    top: 4px;
    right: 4px;
}

.search-input .btn::before {
    border-radius: 17px;
}

@media only screen and (min-width: 1170px) {
    .products-filter {
        display: block;
    }
}

.products-settings-wrapper .search-input .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    padding: 0;
    border-radius: 17px;
    color: var(--primary-contrast, #fff);
    top: 4px;
    right: 4px;
}

.products-settings-wrapper .search-input .btn::before {
    border-radius: 17px;
}

.filter-sep {
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    margin: 18px 0;
}

.filter-heading {
    position: relative;
    color: var(--body-text-primary, #000);
    padding-top: 7px;
    padding-bottom: 7px;
    cursor: pointer;
}

.filter-heading .icn {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
}

.filter-heading svg {
    fill-opacity: 0.5;
}

.filter-heading:hover svg {
    fill-opacity: 1;
}

.is-expanded > .filter-heading {
    color: var(--primary, #175cff);
}

.is-expanded > .filter-heading .icn {
    transform: rotate(180deg);
}

.is-expanded > .filter-heading svg {
    fill-opacity: 1;
}

.filter-list {
    display: none;
}

.is-expanded .filter-list {
    display: block;
}

.filter-list + .filter-list {
    margin-top: 24px;
}

.filter-list .icn-arrow {
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(270deg);
}

.filter-list.filter-list-rating {
    padding-bottom: 3px;
}

.filter-list-rating .rating-container {
    position: relative;
    padding: 9px 0;
    color: var(--body-text-primary, #000);
    cursor: pointer;
}

.filter-list-rating .rating-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0;
    border-radius: 8px;
    pointer-events: none;
}

.filter-list-rating .rating-container:hover {
    color: var(--primary, #175cff);
}

.filter-list-rating .rating-container:hover::before {
    opacity: 0.07;
}

.filter-list-rating .active > .rating-container {
    color: var(--primary, #175cff);
}

.filter-list-rating .active > .rating-container::before {
    opacity: 0.07;
}

.filter-list-rating .rating-star + .rating-star {
    margin-left: 10px;
}

.filter-list-link {
    position: relative;
    display: block;
    padding: 7px 0 7px 21px;
}

.filter-list-link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    right: -10px;
    background-color: var(--primary, #175cff);
    opacity: 0;
    border-radius: 8px;
    pointer-events: none;
}

.filter-list-link:hover {
    color: var(--primary, #175cff);
}

.filter-list-link:hover::before {
    opacity: 0.07;
}

.active > .filter-list-link {
    color: var(--primary, #175cff);
}

.active > .filter-list-link::before {
    opacity: 0.07;
}

.filter-section-footer {
    position: relative;
    color: var(--primary, #175cff);
    display: none;
}

.is-expanded .filter-section-footer {
    display: block;
}

.filter-section-footer.filter-view-more::before,
.filter-section-footer::after {
    content: '';
    position: absolute;
    border-radius: 1px;
    background-color: var(--primary, #175cff);
}

.filter-section-footer.filter-view-more::before {
    width: 2px;
    height: 10px;
    top: 0.9em;
    left: 7px;
}

.filter-section-footer::after {
    width: 10px;
    height: 2px;
    left: 3px;
    top: calc(0.9em + 4px);
}

.filter-list-color {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: currentColor;
}

.filter-list-cb {
    margin-top: 7px;
    padding-bottom: 7px;
    display: none;
}

.is-expanded .filter-list-cb {
    display: block;
}

.filter-list-cb .checkbox {
    display: block;
}

.filter-list-cb .checkbox + .checkbox {
    margin-top: 14px;
}

.course-card {
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.course-card:hover {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.product-card {
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 1;
}

.product-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-bg, #fff);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 1;
}

.product-card:hover {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.product-card:hover::before {
    opacity: 0;
}

.product-card:hover::after {
    opacity: 1;
}

.card-img {
    position: relative;
    height: 200px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.card-img img {
    position: absolute;
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.card-img::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    z-index: -1;
    pointer-events: none;
}

.products-container .card-img::before {
    opacity: 0;
}

.card-img .svg-i1,
.card-img .svg-i2 {
    fill: var(--body-text-primary, #000);
}

.card-img .svg-i1 {
    fill-opacity: 0.15;
}

.card-img .svg-i2 {
    fill-opacity: 0.4;
}

.is-loading.card-wrapper .product-card .card-img::before {
    opacity: 0.07;
}

.card-tags {
    position: absolute;
    bottom: 4px;
    left: 4px;
    display: flex;
    max-width: calc(100% - 8px);
    z-index: 2;
}

.product-card .card-tags {
    left: 5px;
    max-width: calc(100% - 10px);
}

.card-tags::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    border-radius: 4px;
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
}

.tag-count {
    position: relative;
    flex-shrink: 0;
    color: var(--body-bg, #fff);
    padding: 2px 4px;
    margin-left: 7px;
}

.tag-count::before,
.tag-count::after {
    content: '';
    position: absolute;
    border-radius: 1px;
    background-color: var(--body-bg, #fff);
}

.tag-count::before {
    width: 0.2em;
    height: 0.6em;
    top: calc(50% - 0.3em);
    left: -0.1em;
}

.tag-count::after {
    width: 0.6em;
    height: 0.2em;
    top: calc(50% - 0.1em);
    left: -0.3em;
}

.card-tag {
    display: block;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-tag + .card-tag {
    margin-left: 4px;
}

.category-tag {
    color: var(--body-bg, #fff);
    background-color: var(--body-text-primary, #000);
}

.blue {
    background-color: #07f;
}

.green {
    background-color: #14c773;
}

.yellow {
    background-color: #fab650;
}

.skyblue {
    background-color: #00bbe0;
}

.red {
    background-color: #f04943;
}

.pink {
    background-color: #ff357c;
}

.purple {
    background-color: #2d085f;
}

.grey {
    background-color: #8e968d;
}

.dark {
    background-color: #869ea6;
}

.orange {
    background-color: #fe7b01;
}

.dull-green {
    background-color: #829962;
}

.card-desc {
    position: relative;
    padding: 10px 15px;
    border-radius: 0 0 8px 8px;
}

.card-desc.spacer-2 {
    padding: 20px 15px;
}

.products-container .card-desc::before,
.products-container .card-desc::after {
    display: none;
}

.card-desc::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    opacity: 0.07;
    pointer-events: none;
    transition: 0.25s ease;
}

.card-desc::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-bg, #fff);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
}

.course-card:hover .card-desc::before {
    opacity: 0;
}

.course-card:hover .card-desc::after {
    opacity: 1;
}

.card-featured {
    position: relative;
    padding: 2px 6px;
}

.card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.1;
    border-radius: 4px;
}

.card-colors {
    display: flex;
    padding-top: 1px;
    padding-bottom: 6px;
}

.card-colors-none {
    padding-top: 2px;
    padding-bottom: 2px;
}

.card-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 4px 0;
    border-radius: 50%;
    background-color: currentColor;
}

.card-color.snorkel-blue {
    color: #035184;
}

.card-color.limpet-shell {
    color: #96dbde;
}

.card-color.lilac-gray {
    color: #9896a4;
}

.card-color.fiesta {
    color: #df4831;
}

.card-color.iced-coffee {
    color: #b28e6a;
}

.card-color.green-flash {
    color: #76c453;
}

.card-color + .card-color {
    margin-left: 10px;
}

.color-count {
    position: relative;
    flex-shrink: 0;
    color: var(--body-text-secondary, #666);
    padding: 2px 4px;
    margin-left: 17px;
}

.color-count::before,
.color-count::after {
    content: '';
    position: absolute;
    border-radius: 1px;
    background-color: var(--body-text-secondary, #666);
}

.color-count::before {
    width: 2px;
    height: 8px;
    top: 8px;
    left: -4px;
}

.color-count::after {
    width: 8px;
    height: 2px;
    left: -7px;
    top: 11px;
}

.card-title {
    color: var(--headings, #000);
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-category {
    color: var(--body-text-secondary, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-subtitle {
    color: var(--body-text-secondary, #666);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-price {
    color: var(--secondary, #ff5e29);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h-auto > .card-price {
    position: static;
    max-width: none;
    margin-top: 10px;
    margin-bottom: 5px;
}

.card-user {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 15px 15px 0;
}

.user-avatar {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    color: var(--body-text-primary, #000);
}

.user-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

.card-wrapper.is-loading .user-avatar::before {
    opacity: 0.15;
}

.user-avatar > img {
    position: relative;
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.user-avatar .svg-cc {
    fill-opacity: 0.4;
}

.user-name {
    color: var(--body-text-primary, #000);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pricePlan-container {
    padding: 43px 0 50px;
}

@media only screen and (min-width: 550px) {
    .pricePlan-container {
        padding: 93px 0 100px;
    }
}

.pricePlan-plans {
    padding-top: 43px;
    margin-left: -13px;
    margin-right: -13px;
}

.cart-inner-container .pricePlan-plans {
    padding-top: 30px;
}

.cart-inner-container .pricePlan-form-label + .pricePlan-plans {
    padding-top: 0;
}

.pricePlan-form-label {
    padding-top: 25px;
    display: block;
    margin-bottom: 5px;
    color: var(--body-text-primary, #000);
}

@media only screen and (min-width: 550px) {
    .pricePlan-plans {
        margin: 0;
    }

    .pricePlan-title {
        text-align: center;
    }
}

.pricePlan-label {
    display: flex;
    position: relative;
    padding: 20px 15px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: 0.25s ease;
}

.pricePlan-label:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.pricePlan-label:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pricePlan-label::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
    transition: 0.25s ease;
}

.pricePlan-label:first-child::before {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.pricePlan-label:last-child::before {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pricePlan-label.is-selected::before {
    background: var(--secondary, #ff5e29);
}

.pricePlan-label:not(.is-selected):hover {
    z-index: 1;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.pricePlan-label:not(.is-selected):hover::before {
    opacity: 0;
}

.pricePlan-input {
    flex: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 58px;
    height: 58px;
}

.pricePlan-input input {
    width: 0;
    height: 0;
    opacity: 0;
}

.pricePlan-input .icn {
    display: block;
}

.pricePlan-input .svg-sc {
    fill: var(--body-text-primary, #000);
    fill-opacity: 0.2;
}

.is-selected .pricePlan-input .svg-sc {
    fill: var(--secondary, #ff5e29);
    fill-opacity: 1;
}

.pricePlan-name {
    flex: 1;
    margin-left: 43px;
    color: var(--body-text-primary, #000);
}

.pricePlan-price {
    flex: none;
    margin-left: 15px;
    color: var(--body-text-primary, #000);
}

.cart-inner-container .pricePlan-price {
    width: auto;
}

@media only screen and (min-width: 550px) {
    .pricePlan-price {
        width: 250px;
    }
}

.is-selected .pricePlan-name > .fwb,
.is-selected .pricePlan-price {
    color: var(--secondary, #ff5e29);
    font-weight: 700;
}

.pricePlan-btn {
    padding-top: 48px;
}

@media only screen and (min-width: 550px) {
    .pricePlan-btn {
        text-align: center;
    }
}

.pricing-table-container {
    padding-bottom: 100px;
}

.pricing-table-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 90px 210px;
    text-align: center;
}

.pricing-table-title {
    color: var(--body-text-primary, #000);
    margin-bottom: 24px;
}

.pricing-table-subtitle {
    color: var(--body-text-secondary, #666);
    margin-bottom: 92px;
}

.pricing-tabs {
    display: flex;
    position: relative;
    margin-bottom: 10px;
}

.pricing-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
    border-radius: 21px;
    z-index: -1;
}

.cb-tabs {
    position: relative;
    display: inline-flex;
    width: 140px;
    height: 42px;
    padding: 4px;
    color: var(--body-text-secondary, #666);
    user-select: none;
    cursor: pointer;
}

.cb-tabs input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

.cb-tabs span {
    flex: 1;
    padding: 8px 0 6px;
    text-align: center;
    border-radius: 17px;
}

.cb-tabs input:checked ~ span {
    color: var(--secondary, #ff5e29);
    background-color: var(--body-bg, #fff);
}

.pricing-table-content {
    display: flex;
    align-items: center;
    padding: 0 80px;
    text-align: center;
}

.pricing-table-item {
    flex-basis: 326px;
    position: relative;
    border-radius: 8px;
}

.pricing-table-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
    border-radius: 8px;
}

.pricing-table-item.is-current {
    flex-basis: 328px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.most-popular {
    position: relative;
    text-transform: uppercase;
    color: var(--body-text-primary, #000);
    height: 42px;
    padding: 12px 0 10px;
}

.most-popular::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.pricing-table-info {
    padding: 47px 30px 45px;
}

.pt-price {
    padding-top: 34px;
}

.is-current .pt-price {
    color: var(--secondary, #ff5e29);
}

.pt-price span {
    color: var(--body-text-secondary, #666);
}

.pt-action {
    height: 136px;
    padding-top: 44px;
    padding-bottom: 50px;
}

.pt-action .selected-plan {
    color: var(--primary, #175cff);
}

.pt-fee {
    position: relative;
    padding-top: 47px;
    padding-bottom: 45px;
}

.pt-fee::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28px;
    right: -28px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.pt-fee > a {
    display: block;
    margin-top: 10px;
}

.pt-package {
    min-height: 346px;
    padding-top: 46px;
}

.pt-package p {
    margin-top: 20px;
}

.cart-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding-top: 30px;
}

@media only screen and (min-width: 1170px) {
    .cart-container {
        overflow: initial;
    }
}

.cart-aside {
    display: none;
    width: 330px;
    margin-left: 30px;
    padding-top: 18px;
    position: -webkit-sticky;
    position: sticky;
    top: 30px;
    z-index: 3;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.cart-aside .card-wrapper {
    margin: 20px auto 40px;
}

.cart-aside .course-card:hover {
    box-shadow: none;
}

.cart-aside .course-card:hover .card-desc::before {
    opacity: 0.07;
    z-index: 1;
    transition: none;
}

.course-summary {
    max-width: 330px;
    margin: 0 auto;
}

.course-summary .card-wrapper {
    margin: 0 auto 40px;
}

@media only screen and (min-width: 1170px) {
    .cart-aside {
        display: block;
    }
}

.cart-summary {
    margin-top: 25px;
    margin-bottom: 25px;
    padding-top: 18px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

@media only screen and (min-width: 550px) {
    .cart-summary {
        margin-top: 35px;
    }
}

@media only screen and (min-width: 1170px) {
    .cart-summary,
    .course-summary {
        display: none;
    }
}

.cart-inner-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    min-width: 0;
}

.cart-inner-container .tabs-container {
    margin-top: -30px;
}

.cart-inner-container .tabs-nav {
    position: relative;
}

.cart-inner-container .tabs-nav::before {
    content: '';
    position: absolute;
    right: -30px;
    bottom: 0;
    width: 1000%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.cart-inner-container .tab-label {
    justify-content: center;
}

.cart-inner-container .tab-label .icn {
    display: none;
}

@media only screen and (min-width: 550px) {
    .cart-inner-container {
        padding: 0 25px;
    }

    .cart-inner-container .tab-label .icn {
        display: block;
    }
}

@media only screen and (min-width: 1170px) {
    .cart-inner-container {
        /* max-width: calc(100% - 360px); */
        max-width: 100%;
        /* padding-right: 31px; */
    }

    .cart-inner-container::before {
        content: '';
        position: absolute;
        top: -30px;
        right: 0;
        width: 1px;
        height: calc(100% + 30px);
        background-color: var(--body-text-primary, #000);
        opacity: 0.07;
    }

    .cart-inner-container .tabs-container {
        margin-top: 0;
    }
}

.cart-inner-container,
.cart-item,
.cartItem-info,
.cartItem-header {
    flex: 1;
}

.cart-items-container {
    padding-bottom: 60px;
}

.cart-item,
.cartItem-header {
    display: flex;
    min-width: 0;
}

.cart-container-title {
    position: relative;
    padding: 13px 0;
}

.cart-sep + .cart-container-title {
    padding-top: 43px;
}

@media only screen and (min-width: 550px) {
    .cart-container-title {
        position: relative;
        padding: 23px 0;
    }

    .cart-sep + .cart-container-title {
        padding-top: 53px;
    }
}

.cart-item {
    position: relative;
    padding-top: 30px;
}

.order-confirmed-wrapper .cart-item {
    background-color: var(--body-bg, #fff);
    padding: 20px;
    border-radius: 8px;
}

.cart-item + .cart-item {
    margin-top: 30px;
}

.cart-item + .cart-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.cartItem-info {
    position: relative;
    min-width: 0;
}

.cartItem-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartItem-img {
    position: relative;
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
}

.cartItem-img > img {
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.cartItem-img::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

@media only screen and (min-width: 600px) {
    .cartItem-img {
        width: 160px;
        height: 160px;
    }

    .order-confirmed-wrapper .cartItem-img {
        width: 100px !important;
        height: 100px !important;
    }
}

.cartItem-price {
    margin-left: auto;
    padding-left: 15px;
    flex-shrink: 0;
}

.cartItem-price .tdl {
    margin-left: 5px;
}

.cartItem-category {
    display: flex;
    color: var(--body-text-secondary, #666);
    margin-bottom: 10px;
    min-height: 20px;
    min-width: 0;
}

.cartItem-category span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartItem-brand {
    position: relative;
    padding-right: 21px;
}

.cartItem-brand:before {
    content: '';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--body-text-secondary, #666);
}

.cartItem-misc {
    display: flex;
    flex-wrap: wrap;
    min-height: 20px;
    margin-bottom: 0.5em;
}

.cartItem-misc .cartItem-block {
    margin-right: 20px;
}

.cartItem-misc .cartItem-block:last-child {
    margin-right: 0;
}

.cartItem-qty {
    position: relative;
    margin-top: 14px;
    margin-left: -95px;
    width: calc(100% + 95px);
}

.cartItem-qty .form-label {
    display: none;
}

.cartItem-qty .input-group {
    width: auto;
    flex-shrink: 0;
}

.cartItem-qty .form-input {
    display: none;
    text-align: center;
}

.cartItem-qty .form-input:focus-within::before {
    border-color: var(--secondary, #ff5e29);
}

.cartItem-qty .form-input:focus-within ~ .input-group-prepend .btn-qty,
.cartItem-qty .form-input:focus-within ~ .input-group-append .btn-qty {
    color: var(--secondary-contrast, #fff);
}

.cartItem-qty .form-input:focus-within ~ .input-group-prepend .btn-qty::before,
.cartItem-qty .form-input:focus-within ~ .input-group-append .btn-qty::before {
    background-color: var(--secondary, #ff5e29);
    opacity: 1;
}

.cartItem-qty .form-input::before {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

@media only screen and (min-width: 600px) {
    .cartItem-qty {
        margin: 0;
        width: 100%;
    }

    .cartItem-qty .input-group {
        width: 164px;
    }

    .cartItem-qty .form-input,
    .cartItem-qty .form-label {
        display: block;
    }

    .cartItem-qty .cartItem-qty-sm {
        display: none;
    }
}

.cartItem-remove {
    position: absolute;
    bottom: 0;
    right: 0;
}

.cartItem-remove .btn-ghost {
    padding: 11px 13px;
}

.cartItem-qty-info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 42px;
    min-width: 0;
}

.cartItem-qty-sm {
    padding-left: 15px;
    flex-shrink: 0;
    flex-basis: 100%;
}

.cartItem-stock {
    padding-left: 15px;
    padding-right: 15px;
    color: var(--secondary, #ff5e29);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -1px;
}

@media only screen and (min-width: 600px) {
    .cartItem-stock {
        padding: 11px 20px;
        margin: 0;
    }
}

.cartItem-note {
    position: absolute;
    left: 0;
    right: 57px;
    bottom: 11px;
}

.cartItem-note span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-qty {
    position: relative;
    width: 40px;
    color: var(--body-text-primary, #000);
    border-radius: 8px;
}

.btn-qty::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: currentColor;
    border-radius: 8px;
    opacity: 0.1;
    pointer-events: none;
}

.input-group-prepend .btn-qty::before {
    border-radius: 8px 0 0 8px;
}

.input-group-append .btn-qty::before {
    border-radius: 0 8px 8px 0;
}

.btn-qty:hover {
    color: var(--secondary-contrast, #fff);
}

.btn-qty:hover::before {
    background-color: var(--secondary, #ff5e29);
    opacity: 1;
}

.btn-qty .icn-minus::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
}

.btn-qty .icn-plus::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
}

.btn-qty .icn-plus::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    transform: rotate(90deg);
}

@media only screen and (min-width: 600px) {
    .btn-qty {
        position: relative;
        width: 42px;
    }
}

.cart-container-footer {
    padding-top: 25px;
    padding-bottom: 50px;
}

@media only screen and (min-width: 550px) {
    .cart-container-footer {
        padding-top: 35px;
        padding-bottom: 100px;
    }
}

.cart-sep {
    position: relative;
    height: 1px;
}

.order-form + .cart-sep {
    margin-top: 25px;
}

.pricePlan-plans + .cart-sep,
.cart-shippingPlan + .cart-sep {
    margin-top: 50px;
}

.cart-sep::before {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    top: 0;
    width: calc(100% + 30px);
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

@media only screen and (min-width: 550px) {
    .order-form + .cart-sep {
        margin-top: 35px;
    }

    .pricePlan-plans + .cart-sep,
    .cart-shippingPlan + .cart-sep {
        margin-top: 60px;
    }

    .cart-sep::before {
        left: -225px;
        right: -225px;
        width: calc(100% + 500px);
    }
}

@media only screen and (min-width: 1170px) {
    .cart-sep::before {
        left: auto;
        right: -30px;
        width: 1000%;
    }
}

.cart-aside-heading {
    padding: 9px 30px;
}

.cartSummary-container {
    margin-top: 13px;
    margin-bottom: 27px;
}

.cartSummary-item {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}

.cartSummary-item + .cartSummary-item {
    margin-top: 20px;
}

.cartSummary-coupon {
    position: relative;
}

.cartSummary-coupon::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    z-index: -1;
}

.cartSummary-coupon .search-input {
    padding: 4px 0;
    margin-bottom: 0;
}

.cartSummary-coupon .search-input .form-control {
    background-color: transparent;
    padding-left: 29px;
    padding-right: 86px;
}

.cartSummary-coupon .search-input .btn {
    top: 8px;
    right: 30px;
    height: 33px;
}

.cartSummary-coupon .search-input::before {
    opacity: 0;
}

.cartSummary-total {
    position: relative;
    padding: 28px 30px 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary, #175cff);
}

.cartSummary-total::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.cartSummary-coupon + .cartSummary-total {
    padding-top: 27px;
}

.cartSummary-coupon + .cartSummary-total::after {
    opacity: 0;
}

.cart-shippingPlan + .cart-shippingPlan {
    margin-top: 20px;
}

@media only screen and (min-width: 550px) {
    .cart-shippingPlan + .cart-shippingPlan {
        margin-top: 30px;
    }
}

.credit-card-saved {
    width: 100%;
    position: relative;
    height: 50px;
    display: flex;
}

.credit-card-saved::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.1;
    pointer-events: none;
}

.credit-card-num {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.card-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--body-text-primary, #000);
    margin-right: 3px;
}

.card-dot:nth-child(4n) {
    margin-right: 12px;
}

.credit-card-action {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    color: var(--body-text-primary, #000);
}

.credit-card-action:hover {
    color: var(--primary, #175cff);
}

.form-page-header {
    position: relative;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    margin-left: -13px;
    margin-right: -13px;
}

@media only screen and (min-width: 550px) {
    .form-page-header {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 50px;
    }
}

.form-page-section {
    position: relative;
    background-color: var(--body-bg, #fff);
    border-radius: 16px;
    padding: 19px 25px 0 25px;
}

.form-page-notice {
    position: relative;
    background-color: var(--body-bg, #fff);
    border-radius: 16px;
    padding: 19px 0 50px;
    margin-bottom: -5px;
}

.form-page-notice .btn {
    width: 100%;
}

.form-without-cover .form-page-notice {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: -13px;
    margin-right: -13px;
    padding: 19px 15px 50px;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.08);
}

@media only screen and (min-width: 550px) {
    .form-page-section {
        padding: 19px 50px 0;
        box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.08);
    }

    .form-page-notice {
        padding: 19px 50px 50px;
        box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.08);
    }

    .form-page-notice .btn {
        width: auto;
    }

    .form-without-cover .form-page-notice {
        margin-top: 100px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 19px 50px 50px;
    }
}

.form-page-title {
    color: var(--primary, #175cff);
    margin: 0 30px 17px;
}

.form-section-title {
    padding-top: 24px;
    margin-bottom: 12px;
}

.form-section-info + .form-section-title {
    padding-top: 0;
}

.form-notice-title {
    padding-top: 24px;
    margin-bottom: 12px;
}

.form-page-description {
    margin: 0 30px;
    padding-bottom: 24px;
}

.form-notice-description {
    padding-bottom: 24px;
    margin-bottom: 20px;
}

.form-notice-description p + p {
    margin-top: 13px;
}

.form-section-description {
    color: var(--body-text-secondary, #666);
    padding-top: 25px;
    margin-bottom: 13px;
}

.form-section-info + .form-section-description {
    padding-top: 9px;
}

.form-section-title + .form-section-description {
    padding-top: 0;
}

.form-section-info {
    padding-top: 26px;
    color: var(--primary, #175cff);
    text-transform: uppercase;
}

.form-page-footer {
    padding-bottom: 45px;
}

@media only screen and (min-width: 550px) {
    .form-page-footer {
        padding-top: 50px;
        padding-bottom: 95px;
    }
}

.form-footer-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 45px;
}

.form-footer-btns .btn + .btn {
    margin-top: 10px;
}

@media only screen and (min-width: 550px) {
    .form-footer-btns {
        flex-wrap: nowrap;
    }

    .form-footer-btns .btn {
        max-width: 370px;
    }

    .form-footer-btns .btn + .btn {
        margin-top: 0;
        margin-left: 10px;
    }
}

.form-footer-note {
    text-align: center;
    color: var(--body-text-secondary, #666);
}

.form-footer-note p + p {
    margin-top: 10px;
}

.form-footer-note a {
    display: inline-block;
    color: var(--primary, #175cff);
}

.form-footer-note a + a {
    margin-left: 10px;
}

.form-page-form {
    padding-top: 26px;
    padding-bottom: 25px;
}

.form-page-form .is-required .form-label {
    position: relative;
}

.form-page-form .is-required .form-label::before {
    content: '';
    position: absolute;
    top: 9px;
    left: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ff430a;
}

.form-page-form .form-input::before {
    z-index: 1;
}

.form-page-form .react-datepicker-wrapper {
    display: block;
}

@media only screen and (min-width: 550px) {
    .form-page-form .is-required .form-label::before {
        top: 8px;
        left: -28px;
        width: 6px;
        height: 6px;
    }
}

.form-media-preview {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 60%;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 20px;
    transition: box-shadow 0.25s ease;
}

.form-media-preview > img {
    position: absolute;
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.form-media-preview::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.form-media-preview:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.form-media-preview:hover {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.form-media-preview .svg-i1,
.form-media-preview .svg-i2 {
    fill: var(--body-text-primary, #000);
}

.form-media-preview .svg-i1 {
    fill-opacity: 0.4;
}

.form-media-preview .svg-i2 {
    fill-opacity: 0.15;
}

@media only screen and (min-width: 550px) {
    .form-media-preview {
        width: 280px;
        height: 160px;
        padding: 0;
    }
}

@media only screen and (min-width: 1000px) {
    .form-media-preview.image-preview::after {
        opacity: 0;
    }

    .form-media-preview.image-preview:hover::after {
        opacity: 0.35;
    }
}

.form-media-action {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
}

.form-media-action .preview-svg {
    fill: var(--body-bg, #fff);
    fill-opacity: 1;
}

@media only screen and (min-width: 1000px) {
    .form-media-action .preview-svg {
        fill-opacity: 0;
    }

    .form-media-preview:hover .form-media-action .preview-svg {
        fill-opacity: 1;
    }
}

.form-element-group {
    margin-top: 20px;
    margin-bottom: -5px;
}

.form-media-preview + .form-element-group {
    margin-top: 25px;
}

.form-element-group .checkbox,
.form-element-group .radio {
    display: block;
    margin: 0;
    color: var(--body-text-primary, #000);
}

.form-element-group .checkbox + .checkbox,
.form-element-group .radio + .radio {
    margin-top: 20px;
}

.form-element-group .form-media-preview {
    margin-top: 15px;
    margin-bottom: 25px;
    margin-left: 26px;
    max-width: calc(100% - 26px);
}

.form-page-sep {
    position: relative;
    height: 71px;
}

.form-page-sep::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 25px;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

@media only screen and (min-width: 550px) {
    .form-page-sep::before {
        left: -50px;
        right: -50px;
        width: calc(100% + 100px);
    }
}

.form-title-description {
    margin-top: -1px;
    margin-bottom: -6px;
}

.form-title-description > .fzlp + .fzlp {
    margin-top: 8px;
}

.form-media-wrapper {
    flex: 1;
    padding-bottom: 5px;
}

.form-media-wrapper .form-media-preview {
    margin-top: 5px;
}

@media only screen and (min-width: 550px) {
    .form-media-wrapper .form-media-preview.image-preview {
        width: 100%;
        height: auto;
        padding-bottom: 60%;
    }

    .form-media-wrapper .form-media-preview.video-preview {
        width: 352px;
        height: 220px;
        padding: 0;
    }
}

.form-media-title {
    padding-bottom: 10px;
}

.form-media-preview.video-preview .media-video-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 20px;
    width: 64px;
    height: 64px;
    color: var(--body-bg, #fff);
    background-color: var(--body-text-primary, #000);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.form-attach-file .help-block {
    margin: -5px 0 15px;
}

.attachments-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.attachment-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 1px 16px;
    border-radius: 8px;
}

.attachment-item + .attachment-item {
    margin-top: 10px;
}

.attachment-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.attachment-item.has-error::before {
    border-color: #ff430a;
    opacity: 1;
}

@media only screen and (min-width: 550px) {
    .attachment-item {
        align-items: center;
    }
}

.attachment-info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 0;
    padding-right: 20px;
}

.attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    flex-basis: 100%;
    max-width: 100%;
}

.attachment-size {
    color: var(--body-text-secondary, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    flex-basis: 100%;
}

@media only screen and (min-width: 550px) {
    .attachment-info {
        flex-wrap: nowrap;
        padding-top: 0;
        padding-bottom: 0;
    }

    .attachment-name,
    .attachment-size {
        flex-basis: auto;
    }

    .attachment-size {
        margin-left: 10px;
    }
}

.attachment-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-right: -10px;
    width: 100px;
}

.attachment-actions .progress-container {
    position: absolute;
    bottom: 19px;
    right: 16px;
}

@media only screen and (min-width: 550px) {
    .attachment-actions {
        width: auto;
    }

    .attachment-actions .progress-container {
        margin-right: 44px;
        position: static;
    }

    .has-error .attachment-actions .progress-container {
        margin-right: 0;
    }
}

.attachment-remove {
    padding: 12px 8px;
    cursor: pointer;
}

.attachment-reupload {
    padding: 10px;
    cursor: pointer;
    margin-right: -3px;
    margin-left: 7px;
}

.progress-container {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar {
    position: relative;
    width: 100px;
    height: 4px;
    z-index: 1;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    border-radius: 2px;
}

.progress-indicator {
    height: 4px;
    border-radius: 2px;
    background-color: var(--primary, #175cff);
}

.has-error .progress-indicator {
    background-color: #ff430a;
}

.form-group-input {
    margin: 15px 0 5px 26px;
}

.form-required-error {
    color: #ff430a;
    margin-bottom: 20px;
}

@media only screen and (min-width: 650px) {
    .form-table {
        width: 100%;
        display: table;
        table-layout: fixed;
    }
}

.form-table-heading {
    display: none;
}

@media only screen and (min-width: 650px) {
    .form-table-heading {
        display: block;
        padding-top: 35px;
        padding-bottom: 5px;
    }
}

@media only screen and (min-width: 650px) {
    .form-table-row {
        display: table-row-group;
    }
}

@media only screen and (min-width: 650px) {
    .table-row-inner {
        display: table-row;
    }
}

.form-table-cell {
    position: relative;
}

.form-table-cell.fzlp {
    margin-bottom: -1px;
}

.form-table-cell + .form-table-cell {
    margin-top: 20px;
}

.form-table-cell .checkbox,
.form-table-cell .radio {
    margin: 0;
}

@media only screen and (min-width: 650px) {
    .form-table-cell {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .form-table-cell.fzlp {
        margin-bottom: 0;
    }

    .form-table-cell + .form-table-cell {
        margin-top: 0;
    }

    .form-table-cell:first-child {
        width: 30%;
        text-align: left;
        color: var(--body-text-secondary, #666);
    }

    .form-table-cell .checkbox,
    .form-table-cell .radio {
        vertical-align: middle;
        margin: -2px 0 0 0;
        padding: 0;
        width: 16px;
        height: 16px;
    }

    .form-table-cell .checkbox > .icn {
        top: 0;
    }

    .form-table-cell .checkbox span:not(.icn),
    .form-table-cell .radio span:not(.select-indicator) {
        display: none;
    }
}

.form-table-values {
    position: relative;
    padding: 24px 0 25px;
    margin-top: 25px;
}

.form-table-values + .form-table-values {
    margin-top: 2px;
}

.form-table-values::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -13px;
    right: -13px;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.05;
    pointer-events: none;
}

@media only screen and (min-width: 550px) {
    .form-table-values + .form-table-values {
        margin-top: 5px;
    }

    .form-table-values::after {
        left: -45px;
        right: -45px;
    }
}

@media only screen and (min-width: 650px) {
    .form-table-values {
        padding: 14px 0;
        margin-top: 0;
    }
}

.checkout-container {
    position: relative;
    padding: 50px 0;
}

.checkout-container .checkbox {
    margin-bottom: 48px;
}

@media only screen and (min-width: 550px) {
    .checkout-container {
        padding: 100px 0;
    }
}

.contact-container {
    position: relative;
    padding: 50px 0;
    flex: 1;
}

.contact-container .alert {
    margin-top: 0;
    margin-bottom: 30px;
}

@media only screen and (min-width: 550px) {
    .contact-container {
        padding: 100px 0;
    }
}

.checkout-inner-wrapper {
    position: relative;
    margin-bottom: 46px;
    margin-left: -13px;
    margin-right: -13px;
}

.checkout-inner-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 16px;
    opacity: 0.05;
    pointer-events: none;
}

.contact-container .checkout-inner-wrapper {
    margin-bottom: 0;
}

@media only screen and (min-width: 550px) {
    .checkout-inner-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}

.checkout-section {
    position: relative;
    padding-top: 45px;
}

.checkout-section + .checkout-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.checkout-box-title {
    color: var(--headings, #000);
    margin-left: 15px;
}

.checkout-box {
    position: relative;
    padding: 50px 15px;
    border-radius: 8px;
}

@media only screen and (min-width: 550px) {
    .checkout-box-title {
        margin-left: 50px;
    }

    .checkout-box {
        padding: 50px;
    }
}

.order-summary-inner {
    margin-top: -5px;
    margin-bottom: 1px;
}

.order-summary-row {
    position: relative;
    display: flex;
}

.order-summary-img {
    position: relative;
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
}

.order-summary-img > img {
    max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -2px;
    margin-left: -2px;
    object-fit: cover;
}

.order-summary-img::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

@media only screen and (min-width: 600px) {
    .order-summary-img {
        width: 100px;
        height: 100px;
    }
}

.order-summary-info {
    position: relative;
    flex: auto;
    min-width: 0;
}

.order-summary-price {
    position: absolute;
    bottom: -2px;
    left: 0;
}

.order-summary-price .tdl {
    padding-left: 8px;
    color: var(--body-text-secondary, #666);
}

.order-summary-price .fwb {
    display: inline-block;
}

.order-summary-coupon {
    flex-basis: 100%;
    margin-top: 30px;
}

.order-summary-coupon .form-group {
    margin: 0;
}

.order-summary-plan {
    margin-bottom: -6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-summary-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-summary-total {
    flex-basis: 100%;
    display: flex;
    margin-top: 44px;
    margin-bottom: -8px;
}

.order-grand-total,
.order-discount {
    color: var(--secondary, #ff5e29);
}

.order-discount {
    padding-left: 8px;
    display: none;
}

@media only screen and (min-width: 600px) {
    .order-discount {
        display: inline;
    }
}

.order-form {
    margin-top: -10px;
}

.cart-inner-container .order-form {
    margin-top: 25px;
}

.order-form .checkbox {
    margin-bottom: -1px;
}

.cart-inner-container .order-form .checkbox {
    margin-top: 33px;
    margin-bottom: 23px;
}

.order-payment .order-form .checkbox {
    margin-bottom: -2px;
}

.cart-inner-container .order-form .checkbox-lg {
    color: var(--body-text-primary, #000);
    margin-top: 22px;
    margin-bottom: 22px;
}

.order-form .form-row:not(.form-row-grid) {
    flex-wrap: wrap;
}

.order-form .form-row:not(.form-row-grid) .w-half {
    flex-basis: 100%;
}

.order-form .form-row:not(.form-row-grid) .form-group + .form-group {
    margin-left: 0;
}

@media only screen and (min-width: 550px) {
    .cart-inner-container .order-form .checkbox-lg {
        margin-top: 32px;
    }

    .order-form .form-row:not(.form-row-grid) {
        flex-wrap: nowrap;
    }

    .order-form .form-row:not(.form-row-grid) .form-group + .form-group {
        margin-left: 20px;
    }
}

.price-help-note {
    display: block;
    color: var(--body-text-secondary, #666);
    margin-top: 15px;
    margin-bottom: -5px;
}

.table-data-container {
    position: relative;
    padding: 16px 2px 14px;
}

.table-data-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 16px;
    opacity: 0.05;
    pointer-events: none;
}

@media only screen and (min-width: 1000px) {
    .table-data-container {
        padding-top: 2px;
    }
}

.table-row {
    position: relative;
    margin-bottom: 2px;
    padding-left: 13px;
    transition: box-shadow 0.25s ease;
}

.table-row:not(.table-heading) {
    background-color: var(--body-bg, #fff);
}

.table-row:not(.table-heading):hover {
    z-index: 1;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

@media only screen and (min-width: 1000px) {
    .table-row {
        display: flex;
    }
}

.table-heading {
    display: none;
}

.table-heading .table-cell {
    padding: 17px 15px 17px 0;
}

@media only screen and (min-width: 1000px) {
    .table-heading {
        display: flex;
    }
}

.table-cell {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 15px 15px 15px 0;
}

.table-cell::before {
    content: attr(data-col);
    font-weight: bold;
    flex-basis: 130px;
    flex-shrink: 0;
}

.table-cell:last-child {
    padding-right: 13px;
}

.table-cell.alignr {
    justify-content: flex-end;
}

.table-cell span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-cell .svg-sort {
    margin-left: 8px;
}

.table-cell.no-flex::before {
    display: none;
}

.table-cell.py0 {
    padding-top: 0;
    padding-bottom: 0;
}

.table-cell.flex-2 {
    flex: 2;
}

.table-cell.flex-3 {
    flex: 3;
}

.table-cell.flex-4 {
    flex: 4;
}

.table-cell.flex-5 {
    flex: 5;
}

.table-cell.flex-6 {
    flex: 6;
}

.table-cell.flex-8 {
    flex: 8;
}

.btn-cancel-sub {
    padding-left: 37px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.btn-cancel-sub .icn {
    position: absolute;
    left: 13px;
    top: 13px;
}

@media only screen and (min-width: 1000px) {
    .table-cell {
        flex-wrap: nowrap;
    }

    .table-cell::before {
        display: none;
    }

    .btn-cancel-sub {
        padding: 0;
        margin: 4px 0;
    }

    .btn-cancel-sub::before {
        opacity: 0.2;
    }

    .btn-cancel-sub .icn {
        position: static;
        margin: 0 auto;
    }

    .btn-cancel-sub span {
        display: none;
    }
}

.richtext-container {
    padding: 50px 0 43px;
    word-break: break-word;
}

.richtext-container .container-sm {
    position: relative;
}

.richtext-container ul {
    list-style: initial;
    padding-left: 30px;
}

@media only screen and (min-width: 550px) {
    .richtext-container {
        padding: 100px 0 93px;
    }
}

.social-icons {
    position: absolute;
    left: -85px;
    top: 0;
}

.social-icons .icon {
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.social-icons .icon svg {
    width: 100%;
    height: 100%;
}

.loader {
    position: relative;
    pointer-events: none;
    z-index: 1;
}

.loader:before,
.loader:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 5px);
    border-radius: 50%;
    background-color: currentColor;
    animation: loaderBounce 1.5s infinite ease-in-out;
    animation-fill-mode: both;
}

.loader:before {
    margin: 0 0 0 -4px;
}

.loader:after {
    animation-delay: 0.3s;
    margin: 0 0 0 6px;
}

.loader-lg .loader:before,
.loader-lg .loader:after {
    width: 16px;
    height: 16px;
}

.loader-lg .loader:before {
    margin: 0 0 0 -8px;
}

.loader-lg .loader:after {
    margin: 0 0 0 12px;
}

.product-details-container {
    padding: 60px 0 120px;
}

.product-details-container > .df {
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap;
}

@media only screen and (min-width: 1000px) {
    .product-details-container > .df {
        padding-left: 0;
        padding-right: 0;
        flex-wrap: nowrap;
    }
}

@media only screen and (min-width: 1260px) {
    .product-details-container {
        padding: 60px 30px 120px;
    }
}

.pinfo-sep {
    margin: 96px 0 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

@media only screen and (min-width: 1000px) {
    .pinfo-sep {
        margin: 96px -30px 0;
    }
}

.product-images {
    position: relative;
    padding-left: 60px;
    margin-bottom: 53px;
    flex: 0 0 100%;
    margin-right: 30px;
}

@media only screen and (min-width: 1000px) {
    .product-images {
        flex: 1 1 0;
    }
}

.product-images-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    height: 658px;
    border-radius: 8px;
}

.product-images-preview::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.product-image-container {
    display: flex;
    justify-content: center;
    max-height: 80%;
}

.product-image-container .LazyImage-Actual {
    display: flex;
    justify-content: center;
}

.product-image-container .LazyImage-Actual > img {
    object-fit: contain;
}

.product-images-nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.pi-nav-prev,
.pi-nav-next {
    position: relative;
    width: 84px;
    height: 42px;
    padding: 13px 0;
    color: var(--body-bg, #fff);
    border-radius: 21px;
    cursor: pointer;
}

.pi-nav-prev::before,
.pi-nav-next::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 21px;
    opacity: 0.35;
    pointer-events: none;
}

.pi-nav-prev:hover::before,
.pi-nav-next:hover::before {
    opacity: 1;
}

.pi-nav-prev {
    padding-left: 38px;
}

.pi-nav-next {
    padding-left: 39px;
    margin-left: 20px;
}

.product-images-more {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 658px;
    overflow: hidden;
}

.pi-more-container {
    margin-top: -24px;
    margin-bottom: -24px;
    max-height: 590px;
    overflow: hidden;
}

.pi-more-item {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

.pi-more-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
}

.pi-more-item + .pi-more-item {
    margin-top: 10px;
}

.pi-more-item > img {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pi-more-item:hover {
    border-color: var(--primary, #175cff);
}

.pi-more-item.active::before {
    border: 0;
}

.pi-more-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.35;
    border-radius: 8px;
}

.pi-more-scroller {
    position: absolute;
    left: 0;
    padding: 4px 20px;
    height: 24px;
    z-index: 1;
    color: var(--body-bg, #fff);
    background-color: var(--body-text-primary, #000);
    border-radius: 8px;
    cursor: pointer;
}

.pi-more-scroller:hover {
    color: var(--primary-contrast, #fff);
    background-color: var(--primary, #175cff);
}

.pi-more-scroller.scroller-down {
    bottom: 0;
}

.pi-more-scroller.scroller-up {
    top: 0;
}

.pi-more-scroller.scroller-up .icn {
    transform: rotate(180deg);
}

.product-info {
    position: relative;
    width: 0 0 100%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    margin-bottom: 47px;
}

@media only screen and (min-width: 1000px) {
    .product-info {
        flex: 0 0 360px;
    }
}

.pinfo-header {
    display: flex;
    margin-bottom: 5px;
}

.pinfo-category {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--body-text-secondary, #666);
}

.pinfo-category:hover {
    color: var(--primary, #175cff);
}

.pinfo-category .link-cc {
    display: inline-block;
}

.pinfo-brand {
    position: relative;
    padding-right: 18px;
}

.pinfo-brand:before {
    content: '';
    position: absolute;
    top: 7px;
    right: 9px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--body-text-secondary, #666);
}

.pinfo-title {
    margin-bottom: 18px;
    line-height: 26px;
}

.pinfo-stock {
    color: var(--primary, #175cff);
    margin-top: -13px;
    margin-bottom: 18px;
}

.pinfo-reviews {
    display: flex;
    align-items: center;
    padding-top: 2px;
    margin-bottom: 18px;
    cursor: pointer;
}

.rating-container {
    display: flex;
    color: var(--primary, #175cff);
}

.rating-star {
    width: 16px;
    height: 16px;
    cursor: pointer;
    line-height: 0;
}

.rating-star + .rating-star {
    margin-left: 4px;
}

.rating-star svg {
    width: 100%;
    height: 100%;
}

.pinfo-review-text {
    margin-left: 10px;
}

.pinfo-review-text:hover {
    color: var(--primary, #175cff);
}

.pinfo-price {
    margin-bottom: 16px;
}

.pinfo-offer {
    margin-top: -13px;
    color: var(--secondary, #ff5e29);
    margin-bottom: 18px;
}

.pinfo-subtitle {
    padding-top: 1px;
    margin-bottom: 17px;
}

.pinfo-color-heading {
    padding-top: 2px;
    margin-bottom: 13px;
}

.pinfo-colors-container {
    padding-bottom: 8px;
    margin-bottom: 23px;
}

.pinfo-colors-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-gap: 20px 4px;
}

.pinfo-color {
    position: relative;
    justify-self: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.pinfo-color::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -14px;
    width: 48px;
    height: 36px;
    border: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    border-radius: 8px;
}

.pinfo-color:hover::before {
    opacity: 1;
}

.pinfo-color.active::before {
    opacity: 1;
    border-color: currentColor;
}

.snorkel-blue {
    color: #035184;
}

.limpet-shell {
    color: #96dbde;
}

.lilac-gray {
    color: #9896a4;
}

.fiesta {
    color: #df4831;
}

.iced-coffee {
    color: #b28e6a;
}

.green-flash {
    color: #76c453;
}

.pinfo-size {
    padding-top: 7px;
    margin-bottom: 24px;
}

.pinfo-size .dropdown-menu {
    width: 100%;
}

.pinfo-footer-actions {
    display: flex;
    padding-top: 6px;
    margin-bottom: 24px;
}

.pinfo-footer-actions .btn {
    flex: 1;
}

.pinfo-footer-actions .btn + .btn {
    margin-left: 10px;
}

.pinfo-footer-warranty {
    padding-top: 31px;
    color: var(--body-text-secondary, #666);
    margin-bottom: 9px;
}

.pinfo-footer-return .link-active {
    display: inline-block;
    color: var(--primary, #175cff);
}

.product-details-extra {
    flex-basis: 100%;
}

.pd-heading {
    margin-bottom: 22px;
}

.pd-tabs {
    position: relative;
}

.pd-tabs .tab-label {
    padding: 26px 10px;
    justify-content: center;
}

.pd-tabs .tab-label::after {
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.pd-tabs .tab-label:hover::after {
    opacity: 1;
}

.pd-tabs .tab-label .icn {
    display: none;
    margin-top: 2px;
}

.pd-tabs .tabs-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--body-bg, #fff);
    z-index: 3;
}

@media only screen and (min-width: 1000px) {
    .pd-tabs .tab-label {
        padding: 26px 20px;
    }

    .pd-tabs .tab-label .icn {
        display: block;
        margin-top: 2px;
    }
}

.specs-care-tab {
    position: relative;
    padding-top: 38px;
}

.pd-wrapper > .specs-care-tab {
    padding-top: 55px;
    margin-top: 30px;
}

.pd-wrapper > .specs-care-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.sc-heading {
    padding-top: 2px;
    margin-bottom: 29px;
    color: var(--body-text-primary, #000);
}

.pinfo-list + .sc-heading {
    margin-top: 29px;
}

.pinfo-list {
    display: flex;
    flex-wrap: wrap;
    list-style: disc;
    padding-left: 17px;
    color: var(--body-text-primary, #000);
}

.pinfo-list li {
    flex-basis: 100%;
    margin-bottom: 18px;
    padding-left: 6px;
    padding-right: 47px;
}

@media only screen and (min-width: 1000px) {
    .pinfo-list li {
        flex-basis: 50%;
    }

    .pinfo-list.list-full-w li {
        flex-basis: 100%;
        margin-bottom: 0;
    }

    .pinfo-list.list-full-w li + li {
        margin-top: 18px;
    }
}

.highlights-tab {
    position: relative;
    padding-top: 38px;
    padding-bottom: 1px;
}

.pd-wrapper > .highlights-tab {
    padding-top: 55px;
    margin-top: 30px;
}

.pd-wrapper > .highlights-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.ht-heading {
    position: relative;
    text-align: center;
    padding-bottom: 58px;
    margin-bottom: 63px;
    color: var(--body-text-primary, #000);
}

.ht-heading > .icn {
    margin: 0 auto;
    top: auto;
}

.ht-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ht-item + .ht-item {
    margin-top: 112px;
}

.ht-item.without-img {
    padding-top: 113px;
}

.ht-item.without-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 180px;
    height: 1px;
    margin: auto;
    background-color: var(--body-text-primary, #000);
}

.ht-img {
    margin-bottom: 52px;
}

.ht-text {
    padding: 0 15px;
    line-height: 32px;
    text-align: center;
    color: var(--body-text-primary, #000);
}

.ht-item:last-child .ht-text {
    margin-bottom: 15px;
}

@media only screen and (min-width: 1000px) {
    .ht-text {
        padding: 0 60px;
    }
}

.description-tab {
    position: relative;
    padding-top: 38px;
    padding-bottom: 18px;
}

.pd-wrapper > .description-tab {
    padding-top: 55px;
    margin-top: 30px;
}

.pd-wrapper > .description-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.dt-heading {
    margin-bottom: 47px;
    color: var(--body-text-primary, #000);
}

.dt-subheading {
    margin-top: 49px;
    margin-bottom: 19px;
    color: var(--body-text-primary, #000);
}

.dt-text {
    color: var(--body-text-primary, #000);
}

.dt-img {
    padding-top: 24px;
    padding-bottom: 6px;
}

.related-products {
    padding-top: 53px;
    padding-bottom: 28px;
}

.products-tokens .related-products {
    padding-top: 43px;
    padding-bottom: 0;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

@media only screen and (min-width: 550px) {
    .products-tokens .related-products {
        padding-top: 53px;
        padding-bottom: 4px;
    }
}

.rp-heading {
    margin-bottom: 53px;
}

.products-tokens .rp-heading {
    margin-bottom: 43px;
}

@media only screen and (min-width: 550px) {
    .products-tokens .rp-heading {
        margin-bottom: 53px;
    }
}

.rp-wrapper {
    display: flex;
    padding-bottom: 20px;
    max-width: 100%;
    overflow-x: auto;
}

.products-tokens .rp-wrapper {
    min-width: 0;
    max-width: 100vw;
    overflow-x: auto;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
}

@media only screen and (min-width: 600px) {
    .products-tokens .rp-wrapper {
        overflow: hidden;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
    }
}

.rp-item {
    max-width: 360px;
    flex: 1;
}

.products-tokens .rp-item {
    max-width: 280px;
}

.products-tokens .rp-item:last-child {
    max-width: 295px;
}

.products-tokens .rp-item:last-child .card-wrapper {
    width: 295px;
}

.products-tokens .rp-item:last-child .card-wrapper > * {
    margin-right: 15px;
}

.rp-item + .rp-item {
    margin-left: 30px;
}

.rp-item .card-img::before {
    display: none;
}

.rp-item .card-price {
    position: static;
}

.rp-item .card-desc {
    height: auto;
    padding-bottom: 11px;
    background-color: var(--body-bg, #fff);
}

.rp-item .card-desc::before,
.rp-item .card-desc::after {
    display: none;
}

.rp-item .card-title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media only screen and (min-width: 600px) {
    .products-tokens .rp-item {
        max-width: none;
    }

    .products-tokens .rp-item:last-child {
        max-width: none;
        display: none;
    }

    .products-tokens .rp-item .card-wrapper {
        flex-basis: 50%;
        width: auto;
    }
}

@media only screen and (min-width: 1000px) {
    .rp-item .card-wrapper {
        width: 360px;
    }

    .products-tokens .rp-item {
        max-width: 280px;
    }

    .products-tokens .rp-item:last-child {
        max-width: 280px;
        display: block;
    }

    .products-tokens .rp-item:last-child .card-wrapper {
        width: 280px;
    }

    .products-tokens .rp-item:last-child .card-wrapper > * {
        margin-right: 0;
    }

    .products-tokens .rp-item .card-wrapper {
        width: 280px;
    }
}

.products-tokens .rp-item + .rp-item {
    margin-left: 20px;
}

.rp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
}

.products-tokens .rp-nav {
    display: none;
}

@media only screen and (min-width: 600px) {
    .products-tokens .rp-nav {
        display: flex;
    }
}

.rp-navitem {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--body-text-primary, #000);
    cursor: pointer;
}

.rp-navitem + .rp-navitem {
    margin-left: 20px;
}

.rp-navitem::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.rp-navitem.active::before {
    background-color: var(--secondary, #ff5e29);
}

.product-reviews {
    padding-top: 53px;
}

.pdr-ratings-overall {
    display: flex;
    color: var(--primary, #175cff);
    margin-bottom: 16px;
}

.pdr-overall {
    text-align: center;
    margin-right: 20px;
}

.pdr-reviews .rating-container {
    margin-top: 5px;
}

.pdr-reviews-text {
    margin-top: 3px;
}

.pdrb-item {
    position: relative;
}

.pdrb-item + .pdrb-item {
    margin-top: 25px;
}

.pdrb-item .text-muted {
    position: absolute;
    top: 0;
    right: 0;
}

.pdrb-progress {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    margin-top: 5px;
}

.pdrb-progress::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
    background-color: var(--body-text-secondary, #666);
    opacity: 0.1;
}

.pdrb-current {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    background-color: var(--primary, #175cff);
    border-radius: 50%;
}

.pdr-ratings {
    flex-basis: 100%;
}

@media only screen and (min-width: 1000px) {
    .pdr-ratings {
        flex-basis: auto;
        width: 360px;
        margin-right: 30px;
        position: -webkit-sticky;
        position: sticky;
        top: 66px;
        z-index: 3;
    }
}

.pdr-comments {
    flex: 1;
    padding-top: 6px;
}

.pdr-heading {
    margin-bottom: 13px;
}

@media only screen and (min-width: 1000px) {
    .pdr-heading {
        position: -webkit-sticky;
        position: sticky;
        top: 24px;
        z-index: 3;
    }
}

.pdr-inner {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (min-width: 1000px) {
    .pdr-inner {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
}

.pdr-comments {
    flex: 0 0 100%;
}

.pdr-comments .pd-tabs {
    margin-top: -8px;
}

@media only screen and (min-width: 1000px) {
    .pdr-comments {
        flex: 1 1 0;
    }
}

.pdrc-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    padding-bottom: 18px;
}

.pdrc-item-heading .rating-container {
    color: var(--body-text-primary, #000);
}

.pdrc-item + .pdrc-item {
    margin-top: 33px;
}

.pdrc-timestamp {
    color: var(--body-text-secondary, #666);
}

.pdrc-title {
    padding-top: 1px;
    margin-bottom: 17px;
}

.pdrc-text {
    line-height: 24px;
    margin-bottom: 6px;
}

.pdrc-name {
    padding-top: 12px;
    color: var(--primary, #175cff);
    margin-bottom: -5px;
}

.pdrc-footer {
    display: flex;
    justify-content: center;
    padding-top: 60px;
}

.pdrc-footer .btn .loader {
    display: none;
}

.pdrc-footer .btn.is-processing {
    opacity: 1;
}

.pdrc-footer .btn.is-processing::before {
    border-color: transparent;
}

.pdrc-footer .btn.is-processing span {
    display: none;
}

.pdrc-footer .btn.is-processing .loader {
    display: block;
}

.scheduling-container {
    position: relative;
    flex: 1;
    padding-top: 100px;
    padding-bottom: 100px;
}

.scheduling-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.08;
    pointer-events: none;
}

.scheduling-section {
    position: relative;
    padding: 45px 15px 44px;
    background-color: var(--body-bg, #fff);
    border-radius: 8px;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.08);
}

.scheduling-section.is-expanded {
    max-width: none;
}

@media only screen and (min-width: 600px) {
    .scheduling-section {
        padding-left: 50px;
        padding-right: 50px;
    }
}

.scheduling-user {
    margin-bottom: 8px;
    color: var(--body-text-secondary, #666);
}

.scheduling-title {
    margin-bottom: 12px;
}

.scheduling-info {
    display: flex;
    align-items: start;
    gap: 5px;
}

.scheduling-info svg {
    flex-shrink: 0;
}

.scheduling-info + .scheduling-info {
    margin-top: 10px;
}

.scheduling-title + .scheduling-info {
    margin-top: 18px;
}

.scheduling-info-block {
    position: relative;
    padding: 20px;
    margin: 44px 0;
}

.scheduling-info-block::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.1;
    pointer-events: none;
}

.scheduling-footer {
    text-align: center;
    padding-top: 45px;
    padding-bottom: 95px;
    color: var(--body-text-secondary, #666);
}

.scheduling-footer a {
    display: inline-block;
    color: var(--primary, #175cff);
}

.scheduling-calendar-container {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

.scheduling-calendar-label {
    margin-bottom: 15px;
}

.scheduling-calendar-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (min-width: 1000px) {
    .scheduling-calendar-wrapper {
        flex-wrap: nowrap;
    }
}

.scheduling-date-timezone {
    flex: 1;
    min-width: 325px;
    max-width: 430px;
}

.scheduling-date-picker {
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    padding: 5px;
}

.scheduling-timezone .dropdown-menu {
    width: 100%;
}

.scheduling-time-picker {
    display: none;
}

.scheduling-section.is-expanded .scheduling-time-picker {
    display: block;
    width: 100%;
    max-width: 220px;
    padding-left: 20px;
    flex-shrink: 0;
}

.scheduling-time-picker li + li {
    margin-top: 20px;
}

.scheduling-time-picker .scheduling-calendar-label {
    margin-top: 30px;
}

@media only screen and (min-width: 1000px) {
    .scheduling-time-picker .scheduling-calendar-label {
        margin-top: -37px;
    }
}

.scheduling-form {
    padding-top: 40px;
}

.scheduling-form-title {
    margin-bottom: 20px;
}

.scheduling-form-footer {
    display: flex;
    margin-top: -10px;
    padding-bottom: 6px;
}

.certificate-template-wrapper {
    --template-bg: #fff;
    --template-fg: #abc722;
    --color-primary: #231f20;
    --color-secondary: #000;
    background-color: var(--body-bg, #fff);
}

.certificate-template-bg {
    background-color: rgba(var(--body-text-primary-rgb), 0.07);
    padding: 20px;
    color: var(--template-fg);
}

.ct-frame {
    position: relative;
    background-color: var(--template-bg);
    border: 1px solid currentColor;
    width: 684px;
    height: 516px;
    margin: 0 auto;
    padding: 40px;
}

.ct-frame > svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 0;
}

.ct-content {
    position: relative;
    height: 100%;
    z-index: 1;
    padding: 20px 40px;
    text-align: center;
}

.ct-content .pinfo-list {
    display: inline-block;
    color: var(--color-primary);
    list-style: revert;
}

.ct-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    max-width: 100px;
    max-height: 100px;
    margin: 0 auto;
}

.ct-logo > img {
    object-fit: contain;
}

.ct-primary {
    color: var(--color-primary);
}

.ct-serial {
    font-size: 11px !important;
    line-height: 16px !important;
    position: absolute;
    right: 40px;
    top: 45px;
    text-decoration: underline;
}

.ct-heading {
    margin: 10px 0;
    font-size: 26px;
    line-height: 35px;
}

.ct-name {
    margin: 15px 0;
    font-size: 45px;
    line-height: 60px;
    color: var(--color-secondary);
}

.template-2 .ct-name {
    font-size: 50px;
    line-height: 60px;
}

.ct-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ct-copy {
    font-size: 13px !important;
    line-height: 20px !important;
    text-transform: uppercase;
    padding: 0 20px;
}

.ct-copy.fzs {
    font-size: 11px !important;
    line-height: 16px !important;
}

.ct-copy.fzl {
    font-size: 16px !important;
    line-height: 22px !important;
}

.ct-footer {
    position: absolute;
    bottom: 30px;
    min-height: 22px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
}

.ct-signature {
    position: absolute;
    width: 120px;
}

.ct-signature:first-of-type {
    right: 50px;
    left: auto !important;
}

.ct-signature:last-of-type {
    left: 50px;
}

.ct-signature::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
}

.ct-footer-logo {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}

.ct-footer-logo > img {
    object-fit: contain;
}

.sales-cover {
    --bg: #ff5e29;
    --bg-opacity: 0.06;
}

.sales-cover .container {
    position: relative;
    z-index: 1;
}

.sales-cover .cover-container::before {
    background: var(--bg, var(--secondary, #ff5e29));
    opacity: var(--bg-opacity, 0.06);
}

.sales-cover .cover-image::after {
    display: none;
}

.sales-cover-content {
    position: relative;
    max-width: 500px;
}

.sales-cover-content p {
    padding-top: 20px;
    padding-right: 100px;
}

.sales-cover-sm {
    --bg: #ff5e29;
    --bg-opacity: 0.9;
    position: relative;
    text-align: center;
    color: var(--body-bg, #fff);
    padding: 100px 0;
}

.sales-cover-sm .fzxl,
.sales-cover-sm .btn,
.sales-cover-sm svg {
    position: relative;
    z-index: 2;
}

.sales-cover-sm::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg, var(--secondary, #ff5e29));
    opacity: var(--bg-opacity, 0.9);
    pointer-events: none;
    z-index: 1;
}

.sales-form {
    position: relative;
    background-color: var(--body-bg, #fff);
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.sales-form .cart-container-footer {
    padding-bottom: 0;
}

.em-tabs {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -30px;
}

.em-tabs .tabs-container {
    height: calc(100vh - 382px);
    min-height: 400px;
}

.em-tabs .tabs-container .tabs-content {
    height: calc(100% - 54px);
}

.em-tabs .tab-label {
    padding: 0 20px;
    height: 54px;
}

@media only screen and (min-width: 550px) {
    .em-tabs {
        margin-left: -30px;
        margin-right: -30px;
    }
}

.emails-container {
    position: relative;
    display: flex;
    height: 100%;
}

.emails-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    z-index: 2;
    pointer-events: none;
}

.emails-list-view {
    position: relative;
    flex: auto;
    min-width: 0;
}

.emails-list-view::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    z-index: 2;
    pointer-events: none;
}

.view-details .emails-list-view {
    display: none;
}

@media only screen and (min-width: 1000px) {
    .emails-list-view {
        flex: 0 0 33.33%;
    }
}

.emails-list-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
}

.emails-list-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.email-list-items {
    height: calc(100% - 60px);
    overflow-y: auto;
}

.email-list-items.without-header {
    height: 100%;
}

.email-list-nav {
    display: flex;
    margin-left: 15px;
}

.email-list-nav .pagination-prev,
.email-list-nav .pagination-next {
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 6px 10px !important;
}

.email-list-nav .pagination-next {
    margin-left: 10px !important;
}

.emails-list-reload {
    display: flex;
    padding: 0 10px;
    cursor: pointer;
}

.emails-list-pagination {
    margin-left: auto;
}

.email-list-item {
    position: relative;
    display: flex;
    padding: 10px 20px;
    cursor: pointer;
}

.email-list-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.email-list-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.04;
    pointer-events: none;
}

.email-item-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.email-item-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    border-radius: 50%;
    pointer-events: none;
}

.email-item-info {
    margin-left: 12px;
    flex: 1;
    min-width: 0;
}

.email-item-info > .email-info-name {
    margin-top: 3px;
    margin-bottom: 4px;
}

.email-name-timestamp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.email-info-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-info-timestamp {
    flex-shrink: 0;
}

.email-info-subject {
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-info-body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-details {
    display: none;
    position: relative;
    flex: 1;
    padding: 0 20px;
    max-height: 100%;
    overflow-y: auto;
}

.email-details .pie-chart-wrapper {
    padding-left: 0;
}

.email-details .bar-graph-wrapper {
    overflow: hidden;
}

.email-details .bar-graph-wrapper.graph-vertical {
    margin-left: 0;
    width: 100%;
}

.email-details .graph-vertical-captions {
    margin-left: 0;
}

.view-details .email-details {
    display: block;
}

@media only screen and (min-width: 1000px) {
    .email-details {
        display: block;
    }
}

.email-details-header {
    position: relative;
    padding: 20px;
    margin-left: -20px;
    margin-right: -20px;
}

.email-details-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

@media only screen and (min-width: 550px) {
    .email-details-header {
        display: flex;
    }
}

@media only screen and (min-width: 1000px) {
    .email-details-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: #fff;
    }
}

.email-details-body {
    padding-bottom: 25px;
}

.email-details-attachments {
    padding-top: 50px;
}

.email-details-attachments .email-attachment-heading {
    margin-left: 0;
}

.email-details-attachments .email-attachment-heading:after {
    left: 0;
    right: 0;
}

.email-details-actions {
    display: flex;
}

.email-details-actions > a {
    display: flex;
}

.email-details-actions > a + a {
    margin-left: 20px;
}

.email-details-timestamp {
    margin-left: auto;
    text-align: right;
}

.email-details-user {
    display: flex;
    padding: 25px 0;
}

.email-details-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.email-details-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    border-radius: 50%;
    pointer-events: none;
}

.email-details-userinfo {
    margin-left: 10px;
    flex: 1;
}

.email-details-subject {
    margin-bottom: 20px;
}

.email-reply-container {
    position: relative;
    margin-top: 100px;
    margin-left: -20px;
    margin-right: -20px;
}

.email-reply-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.email-reply-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 15px 9px;
}

.email-reply-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.email-reply-icon {
    padding: 0 10px;
}

.email-reply-user .fz14 {
    margin-bottom: 2px;
}

.email-reply-body {
    position: relative;
    padding: 0 10px;
}

.email-reply-body .qeditor-container {
    border: 0;
}

.email-reply-body .ql-editor {
    max-height: 140px;
}

.email-reply-body .ql-snow.ql-toolbar {
    background-color: transparent;
}

.email-reply-body .qeditor-container.with-btn-inside + .qeditor-btn {
    left: 25px;
}

.email-reply-body .qeditor-container.with-btn-inside .ql-toolbar {
    padding-left: 106px;
}

.no-data-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.no-data-illustration {
    display: flex;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    border-radius: 50%;
}

.no-data-title,
.no-data-desc {
    text-align: center;
    max-width: 500px;
}

.no-data-title {
    margin-top: 26px;
}

.no-data-desc {
    margin-top: 9px;
}

.new-msg-container {
    position: fixed;
    z-index: 999;
    right: 10px;
    bottom: 10px;
    height: 0;
    display: flex;
    align-items: flex-end;
}

.new-msg {
    display: flex;
    flex-direction: column;
    width: 580px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.new-msg :not(.form-group) > .form-control {
    border: 0;
}

.new-msg .adjustable-textarea {
    min-height: 40px;
}

.nm-heading {
    display: flex;
    align-items: center;
    padding: 9px 20px 4px;
}

.tab-panel .nm-heading {
    padding-top: 13px;
    padding-bottom: 7px;
}

.nm-actions {
    display: flex;
    margin-left: auto;
    margin-right: -11px;
}

.nm-recipient {
    position: relative;
    padding: 0 5px;
}

.nm-recipient::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    z-index: 2;
    pointer-events: none;
}

.nm-recipient .tokens-container {
    top: 3px;
    left: 20px;
    max-width: calc(100% - 80px);
}

.nm-recipient .dropdown-menu {
    width: 100%;
}

.nm-recipient > .react-msd {
    padding: 0;
}

.nm-recipient > .react-msd .select__control {
    border: 0 !important;
}

.nm-recipient > .react-msd .select__menu {
    width: calc(100% - 24px) !important;
}

.new-msg-body {
    position: relative;
    padding: 0 5px;
}

.new-msg-body .ql-snow.ql-toolbar {
    background-color: transparent;
    border-radius: 0;
    margin-top: 20px;
}

.nm-subject {
    position: relative;
}

.nm-subject::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--body-text-primary, #000);
    opacity: 0.07;
    z-index: 2;
    pointer-events: none;
}

.nm-content {
    position: relative;
    max-height: 286px;
    overflow-y: auto;
}

.nm-content .qeditor-container {
    border: 0;
}

.nm-content .ql-editor {
    min-height: 148px;
    max-height: none;
}

.nm-content .attachments-container {
    margin-top: 10px;
}

.new-msg-footer {
    position: relative;
    padding: 5px;
}

.page-title {
    position: relative;
    margin-top: 8px;
    margin-bottom: 23px;
    color: var(--headings, #000);
}

.curriculum-container > .page-title {
    display: none;
}

.lecture-container .page-title {
    margin-bottom: 53px;
    padding-left: 28px;
}

.lecture-container .page-title > .icn {
    position: absolute;
    left: -1px;
    top: 2px;
}

.contact-container .page-title {
    margin-top: -7px;
}

@media only screen and (min-width: 1170px) {
    .curriculum-container > .page-title {
        display: block;
    }
}

.curriculum-container {
    padding: 15px;
}

.curriculum-container .container-sm {
    width: auto;
    padding: 20px 0;
    margin-left: -13px;
    margin-right: -13px;
}

@media only screen and (min-width: 550px) {
    .curriculum-container .container-sm {
        width: 100%;
        margin: 0 auto;
        padding: 70px 25px;
    }
}

@media only screen and (min-width: 1170px) {
    .vnz-container .curriculum-container {
        padding: 15px;
    }

    .curriculum-container .container-sm {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.curriculum-heading {
    position: relative;
    margin-top: 8px;
    margin-bottom: 43px;
    margin-left: 13px;
    color: var(--headings, #000);
}

@media only screen and (min-width: 550px) {
    .curriculum-heading {
        text-align: center;
        margin-left: 0;
    }
}

.next-lecture {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
    margin-left: -13px;
    margin-right: -13px;
}

.next-lecture::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 21px;
    background-color: var(--secondary, #ff5e29);
    opacity: 0.15;
}

.next-lecture > .btn {
    flex-shrink: 0;
}

@media only screen and (min-width: 550px) {
    .next-lecture {
        margin-left: 0;
        margin-right: 0;
    }
}

.next-lecture-label {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--body-text-primary, #000);
    margin: 0 15px;
    min-width: 0;
}

.next-lecture-label > span {
    margin-left: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curriculum-list {
    position: relative;
    padding: 2px;
    margin-bottom: 15px;
    margin-left: -13px;
    margin-right: -13px;
    border-radius: 8px;
}

.container-sm .curriculum-list {
    margin-left: 0;
    margin-right: 0;
}

.curriculum-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 8px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.curriculum-list.list-locked::before {
    background-color: var(--secondary, #ff5e29);
    opacity: 0.15;
}

@media only screen and (min-width: 550px) {
    .curriculum-list {
        margin-left: 0;
        margin-right: 0;
    }
}

.curriculum-list-heading,
.curriculum-list-item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 2px;
}

.curriculum-list-item {
    display: none;
}

.is-expanded .curriculum-list-item {
    display: flex;
}

.curriculum-list-item:last-child {
    margin-bottom: 15px;
}

.curriculum-list-heading {
    color: var(--headings, #000);
    padding: 0 13px;
    flex-wrap: wrap;
    cursor: pointer;
}

.curriculum-list-heading > span {
    padding: 14px 0;
}

.curriculum-list-heading .caret {
    display: flex;
}

.is-expanded .curriculum-list-heading .caret {
    transform: rotate(180deg);
}

.coming-soon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-basis: 100%;
    color: var(--secondary, #ff5e29);
    margin-top: -14px;
    margin-bottom: 14px;
}

.coming-soon > span {
    margin-left: 10px;
}

@media only screen and (min-width: 1000px) {
    .curriculum-list-heading {
        flex-wrap: nowrap;
    }

    .coming-soon {
        margin-top: 0;
        margin-bottom: 0;
        flex-basis: auto;
        margin-left: auto;
        padding-left: 15px;
    }
}

.curriculum-list-item {
    align-items: flex-start;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.curriculum-list-item.is-locked {
    pointer-events: none;
}

.curriculum-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-bg, #fff);
    pointer-events: none;
}

.curriculum-list-item.is-locked::before {
    opacity: 0.6;
}

.curriculum-list-item:hover {
    z-index: 1;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.curriculum-list-item:hover::before {
    background: var(--body-bg, #fff);
}

.curriculum-item-status {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    flex-shrink: 0;
}

.curriculum-item-status::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    pointer-events: none;
    transition: background-color 0.25s ease;
}

:hover > .curriculum-item-status::before,
.is-complete > .curriculum-item-status::before,
.is-next > .curriculum-item-status::before {
    background-color: var(--secondary, #ff5e29);
}

.is-locked > .curriculum-item-status .icn {
    top: 4px;
    left: 4px;
}

.is-locked > .curriculum-item-status::before {
    opacity: 0.6;
}

@media only screen and (min-width: 550px) {
    .curriculum-item-status {
        width: 50px;
    }
}

.curriculum-status-icon {
    position: relative;
    height: 100%;
}

.curriculum-item-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 54px;
    width: 22px;
    height: 22px;
}

.curriculum-item-icon:first-child {
    left: 14px;
}

@media only screen and (min-width: 550px) {
    .curriculum-item-icon {
        left: 64px;
    }
}

.curriculum-item-label {
    position: relative;
    color: var(--body-text-primary, #000);
    padding: 14px 0;
    margin-left: 90px;
    margin-right: 15px;
}

@media only screen and (min-width: 550px) {
    .curriculum-item-label {
        margin-left: 100px;
    }
}

.curriculum-item-actions {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 14px;
    margin-right: 13px;
}

.curriculum-item-actions .badge {
    display: none;
}

.curriculum-item-actions .badge-xs {
    display: block;
}

@media only screen and (min-width: 550px) {
    .curriculum-item-actions .badge {
        display: block;
    }

    .curriculum-item-actions .badge-xs {
        display: none;
    }
}

.curriculum-container .tabs-container .tab-label {
    padding: 25px 20px 26px;
    justify-content: center;
}

.curriculum-container .tabs-container .tab-label::after {
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.tab-curriculum {
    padding: 15px;
}

.courseinfo-content {
    position: relative;
}

.courseinfo-content .course-completion {
    display: none;
    margin-left: 14px;
    margin-bottom: 5px;
    position: static;
    color: var(--secondary, #ff5e29);
}

.courseinfo-content .course-completion > .icn svg #bg {
    stroke: var(--body-text-primary, #000);
    stroke-opacity: 0.07;
}

.courseinfo-content .course-completion > .icn svg #fg {
    stroke: var(--secondary, #ff5e29);
}

@media only screen and (min-width: 600px) and (max-width: 1170px) {
    .tab-courseinfo {
        display: flex;
        align-items: flex-end;
    }

    .tab-courseinfo .course-img-container {
        width: 320px;
        flex: none;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .tab-courseinfo .course-img-container::after {
        opacity: 0;
    }

    .tab-courseinfo .course-img-container .course-completion {
        display: none;
    }

    .tab-courseinfo .courseinfo-content {
        padding: 10px 0;
    }

    .tab-courseinfo .courseinfo-content .course-completion {
        display: flex;
    }

    .tab-instructor {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1170px) {
    .curriculum-container .tabs-container {
        display: none;
    }
}

body.drawer-open {
    overflow: hidden;
}

.drawer-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    display: none;
}

.drawer-open .drawer-menu {
    display: block;
}

.drawer-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.5;
}

.drawer-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 75vw;
    min-width: 290px;
    background-color: var(--body-bg, #fff);
    padding: 15px 0 0;
    overflow-y: auto;
}

.drawer-user {
    display: flex;
    margin-bottom: 15px;
    padding: 0 15px;
}

.drawer-user-name {
    margin-left: 10px;
    margin-top: 10px;
}

.drawer-user-avatar > img {
    max-width: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.drawer-list-item {
    position: relative;
    display: flex;
    padding: 15px;
}

.drawer-list-item:hover,
.drawer-list-item:active {
    color: var(--primary, #175cff);
}

.drawer-list-item:hover::before,
.drawer-list-item:active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.07;
    pointer-events: none;
}

.drawer-list-item.active {
    color: var(--primary, #175cff);
}

.drawer-list-item .dropdown {
    flex: 1;
}

.drawer-list-item .dropdown [data-toggle] {
    position: relative;
    display: flex;
}

.drawer-list-item .dropdown [data-toggle] > .icn {
    position: absolute;
    right: 0;
    top: 13px;
}

.drawer-list-item .dropdown-menu {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0;
}

.drawer-list-text {
    margin-left: 10px;
    margin-top: 10px;
}

.drawer-list-icon {
    position: relative;
    width: 42px;
    height: 42px;
}

.lecture-container {
    padding: 15px 15px 0;
}

.lecture-container .prev-next-nav {
    position: relative;
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 23px;
    padding-bottom: 1px;
    width: calc(100% + 30px);
}

.lecture-container .prev-next-nav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.lecture-container .pn-link {
    position: relative;
    color: var(--body-text-primary, #000);
}

.lecture-container .pn-link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0;
}

.lecture-container .pn-link:first-child {
    width: 72px;
    flex: none;
    padding: 28px 0;
}

.lecture-container .pn-link:first-child::before {
    opacity: 0.07;
}

.lecture-container .pn-link:first-child .icn {
    margin-right: 2px;
}

.lecture-container .pn-link:first-child .fzl {
    display: none;
}

.lecture-container .pn-link:hover::before {
    opacity: 0.07;
}

@media only screen and (min-width: 550px) {
    .lecture-container .pn-link:first-child {
        width: auto;
        flex: 1;
        padding: 25px 0;
    }

    .lecture-container .pn-link:first-child .fzl {
        display: block;
    }

    .lecture-container .pn-link:first-child::before {
        opacity: 0;
    }

    .lecture-container .pn-link:first-child:hover::before {
        opacity: 0.07;
    }
}

@media only screen and (min-width: 1170px) {
    .lecture-container .prev-next-nav {
        display: none;
    }
}

.lecture-item {
    margin-bottom: 30px;
    margin-left: -13px;
    margin-right: -13px;
}

@media only screen and (min-width: 550px) {
    .lecture-item {
        margin-left: 0;
        margin-right: 0;
    }
}

.lecture-preview-container {
    display: flex;
    justify-content: center;
}

.lecture-preview {
    position: relative;
    min-width: 0;
}

.lecture-preview-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.lecture-preview-image.image-loading {
    width: 530px;
    max-width: 100%;
    padding-top: 66%;
}

.is-downloadable .lecture-preview-image {
    border-bottom-left-radius: 0;
}

.lecture-preview-image::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.is-downloadable .lecture-preview-image::before {
    border-bottom-left-radius: 0;
}

.lecture-preview-image::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.is-downloadable .lecture-preview-image::after {
    border-bottom-left-radius: 0;
}

.lecture-preview-image:hover {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.lecture-preview-image .svg-i1,
.lecture-preview-image .svg-i2 {
    fill: var(--body-text-primary, #000);
}

.lecture-preview-image .svg-i1 {
    fill-opacity: 0.4;
}

.lecture-preview-image .svg-i2 {
    fill-opacity: 0.15;
}

@media only screen and (min-width: 1000px) {
    .lecture-preview-image::after {
        opacity: 0;
    }

    .lecture-preview-image:hover::after {
        opacity: 0.35;
    }
}

.lecture-media-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 15px;
}

@media only screen and (min-width: 600px) {
    .lecture-media-title {
        margin-right: 20px;
    }
}

.lecture-preview-audio {
    height: 38px;
    background-color: #000;
    border-radius: 8px;
}

.lecture-preview-light {
    position: relative;
    padding: 20px 15px;
    border-radius: 0 0 8px 8px;
    z-index: 1;
}

.lecture-preview-light::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    opacity: 0.12;
    pointer-events: none;
    transition: 0.25s ease;
}

.is-downloadable > .lecture-preview-light {
    border-bottom-left-radius: 0;
}

.is-downloadable > .lecture-preview-light::before {
    border-bottom-left-radius: 0;
}

.lecture-preview-dark {
    position: relative;
    margin-top: -1px;
    padding: 20px 15px;
    color: var(--body-bg, #fff);
    background-color: #000;
    border-radius: 0 0 8px 8px;
    z-index: 1;
}

.is-downloadable > .lecture-preview-dark {
    border-bottom-left-radius: 0;
}

@media only screen and (min-width: 600px) {
    .lecture-preview-dark,
    .lecture-preview-light {
        padding: 20px;
    }
}

.lecture-preview-code {
    font-family: monospace;
    font-size: 1.1rem;
    line-height: 1.45;
}

.lecture-preview-html > * + * {
    margin-top: 10px;
}

.lecture-preview-video {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}

.is-downloadable .lecture-preview-video {
    border-bottom-left-radius: 0;
}

.lecture-preview-video::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.2;
    pointer-events: none;
}

.is-downloadable .lecture-preview-video::before {
    border-bottom-left-radius: 0;
}

.lecture-preview-video::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 50%);
    border-radius: 8px;
    pointer-events: none;
}

.is-downloadable .lecture-preview-video::after {
    border-bottom-left-radius: 0;
}

.lecture-text {
    position: relative;
    padding: 20px;
    background-color: #fff;
}

.lecture-text::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* border: 1px solid var(--body-text-primary, #000); */
    border-radius: 8px;
    opacity: 0.12;
    pointer-events: none;
    transition: 0.25s ease;
}

.lecture-text .ql-size-huge {
    font-size: 25px;
    line-height: 30px;
}

.lecture-text h2 {
    font-size: 2.4rem;
}

.lecture-text .ql-size-large {
    font-size: 17px;
    line-height: 22px;
}

.lecture-media {
    display: flex;
    align-items: center;
    padding-left: 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 86px;
    border-radius: 8px;
    transition: box-shadow 0.25s ease;
}

.lecture-media::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.12;
    pointer-events: none;
    transition: 0.25s ease;
}

.lecture-media::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-bg, #fff);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
}

.is-downloadable > .lecture-media {
    border-bottom-left-radius: 0;
}

.is-downloadable > .lecture-media::before,
.is-downloadable > .lecture-media::after {
    border-bottom-left-radius: 0;
}

.item-preview > .lecture-media {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.item-preview > .lecture-media::before,
.item-preview > .lecture-media::after {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.lecture-media.has-preview {
    cursor: pointer;
}

.lecture-media.has-preview:hover {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.lecture-media.has-preview:hover::before {
    opacity: 0;
}

.lecture-media.has-preview:hover::after {
    opacity: 1;
}

@media only screen and (min-width: 600px) {
    .lecture-media {
        padding-left: 115px;
        height: 96px;
    }
}

.lecture-media-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 85px;
    height: 100%;
}

.lecture-media-icon::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 0;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
    border-top-left-radius: 7px;
}

@media only screen and (min-width: 600px) {
    .lecture-media-icon {
        width: 95px;
    }
}

.lecture-media-label {
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 35px;
}

@media only screen and (min-width: 600px) {
    .lecture-media-label {
        margin-right: 20px;
        max-width: 100%;
    }
}

.lecture-media-preview {
    position: absolute;
    top: 6px;
    right: 6px;
}

.lecture-media-preview .preview-svg {
    fill: var(--body-text-primary, #000);
    fill-opacity: 1;
}

.lecture-preview-image .lecture-media-preview {
    z-index: 1;
}

.lecture-preview-image .lecture-media-preview .preview-svg {
    fill: var(--body-bg, #fff);
    fill-opacity: 1;
}

@media only screen and (min-width: 1000px) {
    .lecture-media-preview .preview-svg {
        fill-opacity: 0.4;
    }

    .lecture-media:hover .lecture-media-preview .preview-svg {
        fill-opacity: 1;
    }

    .lecture-preview-image .lecture-media-preview .preview-svg {
        fill-opacity: 0;
    }

    .lecture-preview-image:hover .lecture-media-preview .preview-svg {
        fill-opacity: 1;
    }
}

.lecture-nav.collapsed {
    height: auto !important;
    overflow: hidden;
}

.lecture-nav.collapsed .lecture-list {
    display: none;
}

.lecture-nav-toggle {
    display: none;
}

.collapsed > .lecture-nav-toggle {
    display: block;
    margin-top: 10px;
}

@media only screen and (min-width: 1170px) {
    .lecture-nav-toggle {
        display: none !important;
    }

    .lecture-nav.collapsed .lecture-list {
        display: block !important;
    }
}

.lecture-list {
    position: relative;
    padding: 3px 5px 12px 4px;
}

.lecture-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 1px;
    height: 1px;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.lecture-list-item {
    position: relative;
    margin-bottom: 2px;
}

.lecture-list-heading {
    position: relative;
    color: var(--headings, #000);
    padding: 0 13px;
    margin-bottom: 2px;
}

.lecture-list-heading > span {
    display: block;
    padding: 14px 0;
}

.lecture-list-heading .coming-soon {
    margin: -14px 0 16px;
    padding: 0;
}

.lecture-list-item {
    position: relative;
    background-color: var(--body-bg, #fff);
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.lecture-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    opacity: 0.05;
    pointer-events: none;
}

.lecture-list-item.is-locked {
    pointer-events: none;
}

.lecture-list-item.is-active::before,
.lecture-list-item.is-locked::before {
    background-color: var(--secondary, #ff5e29);
    opacity: 0.15;
}

.lecture-list-item:hover {
    z-index: 1;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.lecture-list-item:hover::before {
    background: var(--body-bg, #fff);
}

.lecture-list-item.is-active::before {
    left: -4px;
    right: -5px;
}

.lecture-list-item.is-active:hover {
    box-shadow: none;
}

.lecture-list-item.is-active:hover::before {
    background: var(--secondary, #ff5e29);
}

.lecture-item-status {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px;
    flex-shrink: 0;
}

.lecture-item-status::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    background-color: var(--body-text-primary, #000);
    transition: background-color 0.25s ease;
}

:hover > .lecture-item-status::before,
.is-complete > .lecture-item-status::before,
.is-next > .lecture-item-status::before,
.is-active > .lecture-item-status::before {
    background-color: var(--secondary, #ff5e29);
}

.is-locked > .lecture-item-status .icn {
    top: 4px;
    left: 4px;
}

.is-locked > .lecture-item-status::before {
    background-color: var(--body-text-primary, #000);
    opacity: 0.6;
}

.lecture-status-icon {
    position: relative;
    height: 50px;
}

.lecture-item-icon {
    position: absolute;
    top: 14px;
    left: 44px;
    width: 22px;
    height: 22px;
}

.lecture-item-label {
    display: block;
    position: relative;
    padding: 14px 0;
    color: var(--body-text-primary, #000);
    margin-left: 80px;
    margin-right: 15px;
}

.quiz-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.quiz-options-list {
    padding-top: 1px;
    counter-reset: options;
}

.quiz-options-list > li {
    counter-increment: options;
    margin-top: 20px;
}

.quiz-options-list label > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
}

.quiz-options-list label > span {
    position: relative;
    display: block;
    padding: 11px 20px 11px 80px;
    cursor: pointer;
    user-select: none;
}

.quiz-options-list label > span::before {
    content: ' ' counter(options, upper-alpha) ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    padding: 11px 0;
    text-align: center;
    color: var(--body-text-primary, #000);
    background-color: rgba(var(--body-text-primary-rgb), 0.1);
    border-radius: 8px 0 0 8px;
}

.quiz-options-list-n label > span::before {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-options-list label > span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-left: 0;
    opacity: 0.1;
    border-radius: 0 8px 8px 0;
    z-index: -1;
}

.quiz-options-list label > input:checked ~ span {
    color: var(--primary, #175cff);
}

.quiz-options-list label > input:checked ~ span::before {
    color: var(--primary-contrast, #fff);
    background-color: var(--primary, #175cff);
}

.quiz-options-list label > input:checked ~ span::after {
    border-color: var(--primary, #175cff);
    opacity: 1;
}

.quiz-footer {
    display: flex;
    padding: 50px 0;
}

.quiz-result-container > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
    margin-bottom: 50px;
    color: var(--primary-contrast, #fff);
    background-color: var(--primary, #175cff);
}

.quiz-result-details {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.quiz-result-item {
    position: relative;
    background-color: rgba(var(--body-text-primary-rgb), 0.03);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.quiz-result-item > .fzlp {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--body-text-primary-rgb), 0.1);
}

.quiz-result-item.is-correct::after,
.quiz-result-item.is-incorrect::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
}

.quiz-result-item.is-correct::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 17.45 17.45'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M8.72 16.7a7.97 7.97 0 117.98-7.98 7.97 7.97 0 01-7.98 7.98z' fill='%237feb14' stroke='%237feb14'/%3E%3Cpath d='M12.27 6.95l-4.43 4.43-2.66-2.66' fill='none' stroke='%23fff'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat;
}

.quiz-result-item.is-incorrect::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 17.45 17.45'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M8.72 16.7a7.97 7.97 0 117.98-7.98 7.97 7.97 0 01-7.98 7.98z' fill='%23ff3f20' stroke='%23ff3f20'/%3E%3Cpath d='M8.73 8.72L6.65 10.8l2.08-2.08-2.08-2.08 2.08 2.08 2.08-2.08-2.08 2.08 2.08 2.08z' fill='none' stroke='%23fff'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat;
}

.cover-container {
    position: relative;
    padding: 80px 15px;
}

.cover-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
    z-index: -1;
}

.cover-container.is-loading::before {
    opacity: 0.15;
}

.cover-container .form-label {
    color: var(--cover-home, #fff);
}

.cover-container .topbar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: transparent;
}

@media only screen and (min-width: 550px) {
    .cover-container:not(.form-cover-container) {
        padding: 90px 20px;
    }
}

@media only screen and (min-width: 1170px) {
    .cover-container:not(.form-cover-container) {
        padding: 190px 20px;
    }
}

.cover-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.cover-image > .LazyImage-Actual {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.cover-image > img,
.cover-image > .LazyImage-Actual > img {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.35;
    pointer-events: none;
}

.cover-container.is-loading .cover-image::after {
    opacity: 0;
}

.cover-content-narrow {
    position: relative;
    z-index: 1;
    color: var(--cover-home, #fff);
}

.cover-content-narrow .cover-title {
    font-family: serif;
}

@media only screen and (min-width: 1170px) {
    .cover-content-narrow .cover-title,
    .cover-content-narrow .cover-subtitle {
        max-width: 400px;
    }
}

.cover-content {
    position: relative;
    color: var(--cover-home, #fff);
    padding: 0;
    z-index: 1;
}

@media only screen and (min-width: 550px) {
    .cover-content {
        padding: 0 20px;
    }
}

@media only screen and (min-width: 601px) {
    .cover-content {
        text-align: center;
    }
}

@media only screen and (min-width: 1000px) {
    .cover-content {
        padding: 0 100px;
    }
}

@media only screen and (min-width: 1170px) {
    .cover-content {
        padding: 0 225px;
    }
}

.cover-title {
    font-size: 2.25rem;
    line-height: 1.33;
}

@media only screen and (min-width: 550px) {
    .cover-title {
        font-size: 3.5rem;
        line-height: 1.1;
    }
}

.cover-subtitle {
    padding-top: 13px;
    padding-bottom: 3px;
}

@media only screen and (min-width: 550px) {
    .cover-subtitle {
        padding-top: 23px;
    }
}

.cover-btn {
    margin-top: 20px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 550px) {
    .cover-btn {
        margin-top: 30px;
    }
}

.error-container {
    flex: auto;
    display: flex;
    align-items: center;
}

.error-container-new {
    flex: auto;
    display: flex;
    align-items: center;
    background: url('../images/error-bg.svg') bottom repeat-x fixed;
}

.error-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 450px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.error-inner > .fzh {
    margin-top: 20px;
    margin-bottom: 20px;
}

.error-inner > p {
    margin-bottom: 20px;
}

.error-inner-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.error-content {
    max-width: 400px;
    padding-top: 71px;
    padding-bottom: 150px;
    padding-left: 15px;
}

.error-heading {
    font-size: 7rem;
    line-height: 1.1;
    color: var(--primary, #175cff);
    margin-bottom: 13px;
    margin-left: -4px;
}

.error-title {
    margin-bottom: 7px;
}

.error-text {
    margin-bottom: 34px;
}

.error-illustration {
    position: absolute;
    bottom: -100px;
    right: 0;
    margin-left: -15px;
    padding: 0 15px 0 100px;
}

.error-illustration::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100px;
    height: 1px;
    background-color: var(--body-text-primary, #000);
}

.error-illustration > svg {
    width: 240px;
    fill: var(--body-text-secondary, #666);
    fill-opacity: 0.2;
}

@media only screen and (min-width: 550px) {
    .error-content {
        padding-left: 50px;
    }

    .error-illustration {
        padding: 0 50px 0 150px;
    }
}

@media only screen and (min-width: 600px) {
    .error-illustration > svg {
        width: 390px;
    }
}

@media only screen and (min-width: 1170px) {
    .error-inner-container {
        padding: 0 100px;
    }

    .error-content {
        padding-left: 0;
    }

    .error-illustration {
        padding: 0 100px 0 300px;
    }
}

.loading-line {
    position: relative;
    background-color: currentColor;
    height: 6px;
    border-radius: 3px;
    opacity: 0.2;
}

.main-nav .loading-line {
    width: 60px;
    margin-right: 55px;
    opacity: 0.15;
}

.loading-btn {
    position: relative;
    height: 42px;
    background-color: currentColor;
    border-radius: 21px;
    opacity: 0.2;
}

.main-nav .loading-btn {
    width: 120px;
    opacity: 0.15;
}

.main-nav .loading-btn:last-child {
    width: 60px;
    margin-left: 15px;
}

.loading-input {
    position: relative;
    height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
}

.products-filter .loading-input {
    margin-top: 10px;
}

.loading-input .loading-line {
    width: calc(100% - 120px);
    margin-left: 15px;
}

.products-pagination .loading-input .loading-line {
    width: calc(100% - 160px);
    margin: 0 auto;
}

.is-loading.topbar-container {
    color: var(--topbar-fg, #fff);
}

.is-loading .menu-toggle {
    opacity: 0.15;
    pointer-events: none;
}

.is-loading.cover-container {
    color: var(--cover-home, #fff);
}

.is-loading.card-wrapper,
.is-loading.products-pagination {
    pointer-events: none;
}

.loading-circle {
    background-color: currentColor;
    border-radius: 50%;
}

.logo .loading-circle {
    opacity: 0.15;
    width: 52px;
    height: 52px;
}

@media only screen and (min-width: 601px) {
    .cover-container.is-loading .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.cover-btn-loading {
    width: 140px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 10px;
    opacity: 0.3;
}

@media only screen and (min-width: 601px) {
    .cover-btn-loading {
        width: 200px;
    }
}

.cover-title-loading {
    width: 100%;
    max-width: 500px;
    margin-bottom: 55px;
}

.cover-title-loading .loading-line {
    margin-top: 22px;
    width: 60vw;
    height: 10px;
    border-radius: 5px;
    opacity: 0.3;
}

@media only screen and (min-width: 601px) {
    .cover-title-loading .loading-line {
        width: 100%;
    }
}

.cover-subtitle-loading {
    width: 100%;
    max-width: 580px;
    margin-bottom: 43px;
}

.cover-subtitle-loading .loading-line {
    width: 75vw;
    height: 10px;
    border-radius: 5px;
    opacity: 0.3;
}

.cover-subtitle-loading .loading-line:last-child {
    width: 30vw;
    margin-top: 20px;
}

@media only screen and (min-width: 601px) {
    .cover-subtitle-loading .loading-line {
        width: 100%;
    }

    .cover-subtitle-loading .loading-line:last-child {
        width: 300px;
        margin: 20px auto 0;
    }
}

.featured-title-loading {
    width: 200px;
    margin-top: 10px;
    margin-bottom: 38px;
}

.featured-title-loading .loading-line {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    opacity: 0.15;
}

@media only screen and (min-width: 601px) {
    .featured-title-loading {
        margin-left: auto;
        margin-right: auto;
    }
}

.card-title-loading {
    margin-top: 8px;
}

.card-title-loading .loading-line {
    width: 160px;
    opacity: 0.15;
}

.card-price-loading {
    margin-top: 103px;
}

.card-price-loading .loading-line {
    width: 60px;
    opacity: 0.15;
}

.product-card .card-price-loading {
    margin-top: 58px;
}

.user-name .loading-line {
    margin-top: 7px;
    width: 60px;
    opacity: 0.15;
}

.products-heading-loading {
    margin-top: 10px;
}

.products-heading-loading .loading-line {
    width: 120px;
    opacity: 0.15;
    height: 10px;
    border-radius: 5px;
}

.products-sort-loading {
    margin-top: 10px;
}

.products-sort-loading .loading-line {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.15;
}

@media only screen and (min-width: 1170px) {
    .products-sort-loading .loading-line {
        width: 60px;
        height: 6px;
        border-radius: 3px;
    }
}

.filter-heading-loading {
    padding-top: 14px;
    padding-bottom: 14px;
}

.filter-heading-loading .loading-line {
    width: 100px;
}

.filter-list-loading {
    display: block;
    color: var(--body-text-primary, #000);
    pointer-events: none;
}

.filter-list-loading .svg-cc {
    fill-opacity: 0.15;
}

.filter-list-loading .loading-line {
    margin-top: 7px;
    margin-bottom: 7px;
}

.card-colors-loading {
    margin-top: 10px;
    margin-bottom: 23px;
}

.card-colors-loading .loading-line {
    width: 42px;
}

.ttu {
    text-transform: uppercase;
}

.tac {
    text-align: center;
}

.tdu {
    text-decoration: underline;
}

.tdl {
    text-decoration: line-through;
    text-decoration-color: var(--secondary, #ff5e29);
}

.jcc {
    justify-content: center;
}

.bdrsb {
    overflow: hidden;
    border-radius: 8px;
}

.text-primary,
.c-primary {
    color: var(--primary, #175cff);
}

.text-secondary,
.c-secondary {
    color: var(--secondary, #ff5e29);
}

.text-light {
    color: #fff;
}

.text-muted {
    color: var(--body-text-secondary, #666);
}

.text-danger {
    color: #ff430a;
}

.icn-file-ext {
    position: absolute;
    left: 5px;
    top: 31px;
    line-height: 13px;
    text-transform: uppercase;
    color: var(--body-bg, #fff);
    background-color: var(--icons-2, #ff5e29);
    padding: 1px 3px 0;
    border-radius: 3px;
}

.df,
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flxc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flx1 {
    flex: 1;
}

.no-flex {
    flex: none;
}

.fdc {
    flex-direction: column;
}

.aife {
    align-items: flex-end;
}

.aifs {
    align-items: flex-start;
}

.asfs {
    align-self: flex-start;
}

.jcfs {
    justify-content: flex-start;
}

.aib {
    align-items: baseline;
}

.aic {
    align-items: center;
}

.wsn {
    white-space: normal;
}

.mla {
    margin-left: auto;
}

.p0 {
    padding: 0;
}

.m0 {
    margin: 0;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.ml10,
.ml-10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.ml8 {
    margin-left: 8px;
}

.ml4 {
    margin-left: 4px;
}

.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: 5px;
}

.mt8 {
    margin-top: 8px;
}
.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt50 {
    margin-top: 50px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb50 {
    margin-bottom: 50px;
}

.my0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.my10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.my50 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mt-2 {
    margin-top: -2px;
}

.px0 {
    padding-left: 0;
    padding-right: 0;
}

.px25 {
    padding-left: 25px;
    padding-right: 25px;
}

.px50 {
    padding-left: 50px;
    padding-right: 50px;
}

.pl50 {
    padding-left: 50px;
}

.pt0 {
    padding-top: 0;
}

.pb0 {
    padding-bottom: 0;
}

.pt50 {
    padding-top: 50px;
}

.pb50 {
    padding-bottom: 50px;
}

.py5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.py25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.py50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.py100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.dot-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--body-text-secondary, #666);
    border-radius: 2px;
    margin: 3px;
}

.tag-sep {
    display: inline-block;
    width: 2px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    margin: 3px 6px;
}

.paging-sep {
    display: inline-block;
    width: 4px;
    height: 2px;
    background-color: var(--body-text-secondary, #666);
    border-radius: 1px;
    margin: 4px 6px 4px 4px;
}

.show-xs {
    display: block;
}

.hide-xs {
    display: none;
}

@media only screen and (min-width: 600px) {
    .show-xs {
        display: none;
    }

    .hide-xs {
        display: block;
    }
}

.w-50 {
    width: 50px;
}

.w-60 {
    width: 60px;
}

.w-70 {
    width: 70px;
}

.w-80 {
    width: 80px;
}

.w-90 {
    width: 90px;
}

.w-half {
    width: 50% !important;
}

.w-80p {
    width: 80%;
}

.w-full {
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.pt-none {
    pointer-events: none;
}

.pt-auto {
    pointer-events: auto;
}

.ql-align-center,
.text-center {
    text-align: center;
}

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

.ql-align-right {
    text-align: right;
}

.align-self-center {
    align-self: center !important;
}

blockquote {
    border: 1px solid #d8e4e8;
    border-left-width: 5px;
    border-radius: 0 8px 8px 0;
}

.justify-self-center {
    justify-self: center !important;
}

.split {
    display: flex;
    flex-direction: column;
}

.split > * + * {
    margin: 40px 0 0 0;
}

.split > * {
    flex-basis: 100%;
    min-width: 0;
}

@media (min-width: 1000px) {
    .split {
        flex-direction: row;
    }

    .split > * + * {
        margin: 0 0 0 20px;
    }
}

.bg-gray {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
}

.bg-gray::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
}

.bg-secondary {
    --bg: #ff5e29;
    --bg-opacity: 0.06;
    position: relative;
    padding: 100px 0;
}

.bg-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--bg, var(--secondary, #ff5e29));
    opacity: var(--bg-opacity, 0.06);
    pointer-events: none;
    z-index: -1;
}

.h-auto {
    height: auto !important;
}

.w-auto {
    width: auto !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.dblock {
    display: block;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

.funnels-list li,
.list-p {
    padding-left: 26px;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 17.32 17.32'%3E%3Cpath d='M8.66 16.57h0a7.91 7.91 0 117.91-7.91h0a7.91 7.91 0 01-7.91 7.91' fill='%23175cff' stroke='%23175cff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' opacity='.08'/%3E%3Cpath d='M11.471 7.254L7.955 10.77 5.849 8.665' fill='none' stroke='%23175cff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position-y: 3px;
}

.funnels-list li.fzl,
.funnels-list li.fzlp,
.list-p.fzl,
.list-p.fzlp {
    background-position-y: 4px;
}

.aib,
.item-baseline {
    align-items: baseline;
}

.no-bg {
    background-color: transparent;
}

.community-item {
    position: relative;
    padding: 20px;
    background-color: var(--body-bg, #fff);
    border-radius: 8px;
    margin-bottom: 15px;
}

.community-actions {
    position: absolute;
    top: 2px;
    right: 9px;
    display: flex;
    align-items: center;
    height: 56px;
}

.community-actions .switch {
    height: 28px;
    margin-right: 10px;
}

.community-actions .switch .slider {
    top: 3px;
    bottom: 3px;
}

.community-timestamp {
    color: var(--primary, #175cff);
}

.community-title {
    padding: 5px 0;
}

.community-shortdesc {
    color: var(--body-text-secondary, #666);
}

.is-expanded .community-shortdesc {
    display: none;
}

.community-body {
    display: none;
}

.is-expanded .community-body {
    display: block;
}

.community-body > * + * {
    margin-top: 15px;
}

.community-info {
    display: flex;
    padding: 15px 0 20px;
}

.community-likes-count,
.community-comments-count {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.community-likes-count span:not([class]),
.community-comments-count span:not([class]) {
    display: flex;
    flex-shrink: 0;
}

.community-likes-count .community-info-text,
.community-comments-count .community-info-text {
    margin-left: 8px;
}

.community-likes-count {
    margin-left: 20px;
}

.community-likes-count svg {
    fill: none;
    stroke: var(--body-text-secondary, #666);
}

.community-likes-count.active svg {
    fill: var(--primary, #175cff);
    stroke: var(--primary, #175cff);
}

.community-comments {
    display: none;
    border-top: var(--body-text-secondary, #666);
    border-bottom: var(--body-text-secondary, #666);
    margin: 0 -20px 20px;
    padding: 20px 20px 10px;
}

.is-expanded .community-comments {
    display: block;
}

.community-comments footer {
    padding: 10px 0;
}

.community-comment {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 20px;
    position: relative;
    border-radius: 8px;
    margin-bottom: 10px;
}

.community-comment::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 8px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.03;
    pointer-events: none;
}

.community-comment .user-avatar {
    background-color: var(--body-bg, #fff);
}

.community-comment .user-name {
    margin-top: 0;
}

.user-comment {
    margin-top: 5px;
}

.community-post-comment {
    position: relative;
}

.community-post-comment svg {
    position: absolute;
    top: 11px;
    right: 20px;
    cursor: pointer;
}

.community-cover {
    background-color: var(--body-bg, #fff);
    border-radius: 0 0 8px 8px;
    margin-bottom: 20px;
}

.community-cover-img {
    position: relative;
    min-height: 330px;
}

.community-cover-img img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
}

.community-cover-img button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.community-details {
    padding: 20px 20px 0;
}

.community-name {
    display: flex;
    align-items: center;
}

.community-name > i {
    cursor: pointer;
}

.community-members-overview {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.community-members-overview .user-avatar {
    margin: 0;
}

.community-members-overview .user-avatar + .user-avatar {
    margin-left: 10px;
}

.community-members-overview .text-dim {
    margin-left: 10px;
}

.community-activity,
.community-settings {
    padding: 20px;
    margin-bottom: 40px;
    background-color: var(--body-bg, #fff);
    border-radius: 0 0 8px 8px;
}

.community-meta,
.community-member {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

.community-meta .user-avatar,
.community-member .user-avatar {
    width: 40px;
    height: 40px;
}

.community-meta-details {
    flex: 1;
    min-width: 0;
}

.community-desc {
    margin-bottom: 20px;
}

.community-tabs {
    position: relative;
    border-top: 1px solid transparent;
    margin-left: -20px;
    margin-right: -20px;
}

.community-tabs::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
    pointer-events: none;
}

.community-tabs a {
    position: relative;
    display: block;
    padding: 15px 20px;
}

.community-tabs a.active {
    color: var(--primary, #175cff);
}

.community-tabs a.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--primary, #175cff);
}

.community-members {
    padding: 20px;
    margin-bottom: 40px;
    background-color: var(--body-bg, #fff);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.community-member {
    margin-bottom: 0;
    border: 1px solid var(--body-text-secondary, #666);
    border-radius: 8px;
    padding: 20px;
}

.community-header {
    padding: 6px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (min-width: 1170px) {
    .membership-section {
        padding: 80px 0;
    }

    .membership-section .section-title,
    .membership-section .section-subtitle {
        max-width: 660px;
        margin-left: auto;
        margin-right: auto;
    }
}

.membership-feature {
    padding: 20px;
    border-radius: 12px;
    transition: box-shadow 0.25s ease;
}

.membership-feature:hover {
    box-shadow: 0px 67.11px 109.06px rgba(0, 0, 0, 0.05);
}

.membership-feature-img {
    display: grid;
    place-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary, #175cff);
    margin-bottom: 30px;
}

.membership-about {
    padding-top: 50px;
    padding-bottom: 50px;
}

@media only screen and (min-width: 1170px) {
    .membership-about p {
        padding-right: 100px;
    }
}

.subscribtion-form {
    padding-top: 100px;
    padding-bottom: 120px;
}

.membership-subscribe {
    position: relative;
    display: flex;
    max-width: 500px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 8px;
}

.membership-subscribe .btn {
    flex: none;
}

.membership-subscribe .form-input {
    flex-basis: 100%;
}

.membership-subscribe .form-input::before {
    border: 0;
}

.membership-plan-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px 20px 20px;
}

.membership-plan-card.active {
    color: var(--primary-contrast, #fff);
    background-color: var(--primary, #175cff);
}

.membership-tiers .is-selected .course-card {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.membership-tiers .is-selected::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent var(--body-text-primary, #000) transparent;
    opacity: 0.03;
}

.membership-tiers .card-desc {
    min-height: 180px;
}

.membership-tier-card {
    display: flex;
    justify-content: center;
}

.membership-tier-card .card-wrapper {
    width: 360px;
}

.membership-tier-card .card-desc {
    min-height: 139px;
    background-color: #fff;
}

.lesson-progress {
    padding: 20px 0 10px;
}

.lesson-progress .progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
}

.lesson-progress .progress-indicator {
    height: 8px;
    border-radius: 4px;
}

.lesson-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.lesson-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--body-text-secondary, #666);
    opacity: 0.1;
    border-radius: 8px;
    pointer-events: none;
}

.lesson-item.active {
    color: var(--primary-contrast, #fff);
    background-color: var(--primary, #175cff);
}

.tier-cards-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.tier-cards-wrapper .membership-tier-card {
    flex-basis: calc(50% - 10px);
}

.tiers-container .card-desc {
    min-height: 180px;
}

.media-preview {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: box-shadow 0.25s ease;
}

.media-preview::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--body-text-primary, #000);
    border-radius: 8px;
    opacity: 0.07;
    pointer-events: none;
}

.media-preview.preview-image {
    width: 280px;
    height: 160px;
}

.community-comment-new .media-preview.preview-image {
    width: 200px;
    height: 160px;
}

.react-calendar {
    width: 100% !important;
    border: 0 !important;
    font-family: inherit !important;
}

.react-calendar__navigation {
    height: 50px !important;
    margin-bottom: 0 !important;
    text-align: center;
}

.react-calendar__navigation__arrow {
    font-size: 24px;
}

.react-calendar__month-view__weekdays {
    font-size: 11px !important;
    line-height: 16px !important;
}

.react-calendar__month-view__weekdays__weekday {
    padding: 7px !important;
}

.react-calendar__tile {
    position: relative;
    padding: 14px 10px !important;
    border-radius: 21px;
    margin-bottom: 2px !important;
    background: none !important;
}

.react-calendar__year-view__months__month,
.react-calendar__decade-view__years__year,
.react-calendar__century-view__decades__decade {
    margin-bottom: 10px !important;
}

.react-calendar__tile::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    right: 5px;
    border-radius: 21px;
    background-color: var(--primary, #175cff);
    opacity: 0.1;
}

.react-calendar__tile abbr {
    position: relative;
}

.react-calendar__month-view__days__day--weekend,
.react-calendar__month-view__days__day--neighboringMonth {
    color: inherit !important;
}

.react-calendar__tile {
    color: var(--body-text-primary, #000) !important;
}

.react-calendar__tile--active {
    color: var(--primary-contrast, #fff) !important;
}

.react-calendar__navigation__arrow:disabled,
.react-calendar__tile:disabled {
    color: var(--body-text-secondary, #666) !important;
}

.react-calendar__tile:disabled::before {
    background-color: var(--body-text-primary, #000);
    opacity: 0.02;
}

.react-calendar__tile--active::before {
    background-color: var(--primary, #175cff);
    opacity: 1;
}

.react-calendar__year-view,
.react-calendar__decade-view,
.react-calendar__century-view {
    padding-top: 10px;
    padding-bottom: 3px;
}

.react-calendar__navigation button {
    position: relative;
    background: none !important;
}

.react-calendar__navigation button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--body-text-primary, #000);
    opacity: 0.05;
}

.react-calendar__navigation__prev2-button::before {
    border-radius: 8px 0 0 8px;
}

.react-calendar__navigation__next2-button::before {
    border-radius: 0 8px 8px 0;
}

.react-calendar__navigation button:not(:disabled) {
    font-weight: bold;
}

.react-calendar__navigation button:not(:disabled):hover::before,
.react-calendar__navigation button:not(:disabled):focus::before {
    opacity: 0.1;
}

.timezone-picker {
    display: block !important;
    font: inherit !important;
}

.timezone-picker-textfield input {
    display: block;
    color: var(--body-text-primary, #000) !important;
    background-color: var(--body-bg, #fff) !important;
    padding: 14px 19px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
}

.timezone-picker-list {
    max-height: 170px !important;
    border: 0 !important;
    margin: 6px 0 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.timezone-picker-list-item {
    position: relative;
    padding: 7px 20px !important;
    color: #000 !important;
}

.timezone-picker-list-item:hover,
.timezone-picker-list-item:focus,
.timezone-picker-list-item-active {
    color: var(--primary, #175cff) !important;
    background-color: transparent !important;
}

.timezone-picker-list-item:hover::before,
.timezone-picker-list-item:focus::before,
.timezone-picker-list-item-active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #175cff);
    opacity: 0.07;
    pointer-events: none;
}

.Toastify__toast-container {
    color: var(--body-text-primary, #000) !important;
    width: 380px !important;
}

.Toastify__close-button {
    color: var(--body-text-primary, #000) !important;
}

.Toastify__toast {
    border-radius: 8px !important;
    min-height: 72px !important;
    font-family: inherit !important;
}

.Toastify__toast--success {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.16 18.04'%3E%3Cg fill='%23abc722' stroke='%23abc722' stroke-width='.8'%3E%3Cpath d='M9.14.4a8.62 8.62 0 106.1 2.52A8.62 8.62 0 009.13.4zm0 16.43a7.82 7.82 0 117.82-7.81 7.83 7.83 0 01-7.82 7.81zm0 0'/%3E%3Cpath d='M13.24 6.37L8.06 11.3 5.24 8.5a.4.4 0 00-.56.57l3.1 3.1a.4.4 0 00.28.11.39.39 0 00.28-.1l5.45-5.22a.4.4 0 00-.55-.58zm0 0'/%3E%3C/g%3E%3C/svg%3E")
        10px 15px/18px no-repeat !important;
}

.Toastify__toast--error {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.82 16.71'%3E%3Cg fill='%23ff430a' stroke='%23ff430a' stroke-width='.8'%3E%3Cpath d='M8.47.4a7.96 7.96 0 105.63 2.33A7.96 7.96 0 008.46.4zm0 15.17a7.22 7.22 0 117.22-7.21 7.22 7.22 0 01-7.22 7.21zm0 0'/%3E%3Cpath d='M11.49 5.33a.37.37 0 00-.53 0l-2.5 2.5L5.82 5.2a.37.37 0 00-.52.52l2.64 2.63L5.3 11a.37.37 0 000 .52.36.36 0 00.26.1.38.38 0 00.27-.1l2.63-2.64 2.5 2.5a.36.36 0 00.27.12.38.38 0 00.26-.11.37.37 0 000-.52L9 8.36l2.5-2.51a.38.38 0 000-.52zm0 0'/%3E%3C/g%3E%3C/svg%3E")
        11px 15px/17px no-repeat !important;
}

.Toastify__toast--info {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.17 12'%3E%3Cpath d='M3.1 10.23c-1.81 1.94-2.04.5-2.04.5h0c0-1.02 2.04-3.06 2.04-4.08h0s-.2-1.47-2.04.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M2.08 0A2.04 2.04 0 11.04 2.04 2.04 2.04 0 012.08 0z' fill='%23abc722' fill-rule='evenodd'/%3E%3C/svg%3E")
        16px 18px/5px 12px no-repeat !important;
}

.Toastify__toast--warning {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.94 11.99'%3E%3Cpath d='M13.65 10.02L8.03.7a1.23 1.23 0 00-2.11 0L.29 10.02a1.23 1.23 0 001.06 1.87H12.6a1.23 1.23 0 001.05-1.87zm-.76.8a.34.34 0 01-.3.18H1.35a.34.34 0 01-.3-.52l5.63-9.33a.34.34 0 01.58 0l5.63 9.33a.34.34 0 010 .35z' fill='%23fe7b01' stroke='%23fe7b01' stroke-width='.2'/%3E%3Cpath d='M6.98 3.77c-.34 0-.6.19-.6.5 0 1 .11 2.4.11 3.4 0 .25.23.36.5.36.2 0 .47-.1.47-.36 0-.99.12-2.4.12-3.4a.53.53 0 00-.6-.5zM6.98 8.6a.64.64 0 100 1.28.64.64 0 000-1.28z' fill='%23fe7b01' stroke='%23fe7b01' stroke-width='.2'/%3E%3C/svg%3E")
        12px 18px/14px 12px no-repeat !important;
}

.Toastify__toast--default {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.36 16.36'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M9.67 6.7h1.48a4.46 4.46 0 014.46 4.45v3.72a.74.74 0 01-.74.74h-5.2a4.46 4.46 0 010-8.91z' fill='rgba(153,182,194,0)' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.7.75h1.48a5.95 5.95 0 010 11.9H1.5a.74.74 0 01-.74-.75V6.7A5.95 5.95 0 016.7.75z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8.18 5.95H6.7a.74.74 0 010-1.48h1.5a.74.74 0 010 1.48zM6.7 7.44h1.5a.74.74 0 010 1.48h-1.5a.74.74 0 010-1.48z' fill='%23abc722'/%3E%3C/g%3E%3C/svg%3E")
        11px 16px/16px no-repeat !important;
}

.Toastify__toast--default,
.Toastify__toast--info,
.Toastify__toast--success,
.Toastify__toast--warning,
.Toastify__toast--error {
    color: var(--body-text-primary, #000) !important;
    background-color: var(--body-bg, #fff) !important;
}

.Toastify__toast-body {
    padding-left: 30px;
}

.Toastify__toast-body > h1 {
    margin-bottom: 4px;
}

.Toastify__progress-bar {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

.rc-time-picker-input {
    padding: 14px 19px !important;
    height: auto !important;
    font: inherit !important;
    line-height: inherit !important;
    color: var(--body-text-primary, #000) !important;
    background-color: var(--body-bg, #fff) !important;
    border: 1px solid rgba(var(--body-text-primary-rgb), 0.1) !important;
    border-radius: 8px !important;
    transition: none !important;
}

.rc-time-picker-panel {
    width: 240px !important;
}

.rc-time-picker-panel-inner {
    font: inherit !important;
    line-height: inherit !important;
    background-color: var(--body-bg, #fff) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15) !important;
    border: 0 !important;
}

.rc-time-picker-panel-input-wrap {
    border-bottom: 1px solid var(--body-text-secondary, #666) !important;
}

.rc-time-picker-panel-select {
    font: inherit !important;
    line-height: inherit !important;
    width: 80px !important;
    max-height: 200px !important;
    border: 1px solid var(--body-text-secondary, #666) !important;
}

.rc-time-picker-panel-select li {
    padding: 8px 0 8px 16px !important;
    height: auto !important;
    outline: 0 !important;
}

.rc-time-picker-panel-select li.rc-time-picker-panel-select-option-selected {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
}

/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.qeditor-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--body-text-secondary, #666);
    border-radius: 8px;
    background-color: #fff;
}

.qeditor-container .ql-toolbar {
    order: 1;
}

.qeditor-container.with-btn-inside .ql-toolbar {
    padding-left: 116px;
}

.qeditor-container.with-btn-inside + .qeditor-btn {
    position: absolute;
    left: 5px;
    bottom: 5px;
}

.ql-container {
    position: relative;
    height: 100%;
    margin: 0;
}

.ql-container.ql-disabled .ql-tooltip {
    visibility: hidden;
}

.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
    pointer-events: none;
}

.ql-clipboard {
    position: absolute;
    top: 50%;
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
}

.ql-clipboard p {
    margin: 0;
    padding: 0;
}

.ql-editor {
    line-height: 1.42;
    height: 100%;
    min-height: 60px;
    max-height: 300px;
    outline: none;
    overflow-y: auto;
    padding: 11px 15px;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ql-editor.ql-blank::before {
    color: rgba(0, 0, 0, 0.35);
    content: attr(data-placeholder);
    left: 15px;
    pointer-events: none;
    position: absolute;
    right: 15px;
}

.ql-editor > * {
    cursor: text;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    margin: 0;
    padding: 0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol,
.ql-editor ul {
    padding-left: 1.5em;
}

.ql-editor ol > li,
.ql-editor ul > li {
    list-style-type: none;
}

.ql-editor ul > li::before {
    content: '•';
}

.ql-editor ul[data-checked='true'],
.ql-editor ul[data-checked='false'] {
    pointer-events: none;
}

.ql-editor ul[data-checked='true'] > li *,
.ql-editor ul[data-checked='false'] > li * {
    pointer-events: all;
}

.ql-editor ul[data-checked='true'] > li::before,
.ql-editor ul[data-checked='false'] > li::before {
    color: #777;
    cursor: pointer;
    pointer-events: all;
}

.ql-editor ul[data-checked='true'] > li::before {
    content: '☑';
}

.ql-editor ul[data-checked='false'] > li::before {
    content: '☐';
}

.ql-editor li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
}

.ql-editor li:not(.ql-direction-rtl)::before {
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
}

.ql-editor li.ql-direction-rtl::before {
    margin-left: 0.3em;
    margin-right: -1.5em;
}

.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
    padding-left: 1.5em;
}

.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
    padding-right: 1.5em;
}

.ql-editor ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    counter-increment: list-0;
}

.ql-editor ol li:before {
    content: counter(list-0, decimal) '. ';
}

.ql-editor ol li.ql-indent-1 {
    counter-increment: list-1;
}

.ql-editor ol li.ql-indent-1:before {
    content: counter(list-1, lower-alpha) '. ';
}

.ql-editor ol li.ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol li.ql-indent-2 {
    counter-increment: list-2;
}

.ql-editor ol li.ql-indent-2:before {
    content: counter(list-2, lower-roman) '. ';
}

.ql-editor ol li.ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol li.ql-indent-3 {
    counter-increment: list-3;
}

.ql-editor ol li.ql-indent-3:before {
    content: counter(list-3, decimal) '. ';
}

.ql-editor ol li.ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol li.ql-indent-4 {
    counter-increment: list-4;
}

.ql-editor ol li.ql-indent-4:before {
    content: counter(list-4, lower-alpha) '. ';
}

.ql-editor ol li.ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
}

.ql-editor ol li.ql-indent-5 {
    counter-increment: list-5;
}

.ql-editor ol li.ql-indent-5:before {
    content: counter(list-5, lower-roman) '. ';
}

.ql-editor ol li.ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
}

.ql-editor ol li.ql-indent-6 {
    counter-increment: list-6;
}

.ql-editor ol li.ql-indent-6:before {
    content: counter(list-6, decimal) '. ';
}

.ql-editor ol li.ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
}

.ql-editor ol li.ql-indent-7 {
    counter-increment: list-7;
}

.ql-editor ol li.ql-indent-7:before {
    content: counter(list-7, lower-alpha) '. ';
}

.ql-editor ol li.ql-indent-7 {
    counter-reset: list-8 list-9;
}

.ql-editor ol li.ql-indent-8 {
    counter-increment: list-8;
}

.ql-editor ol li.ql-indent-8:before {
    content: counter(list-8, lower-roman) '. ';
}

.ql-editor ol li.ql-indent-8 {
    counter-reset: list-9;
}

.ql-editor ol li.ql-indent-9 {
    counter-increment: list-9;
}

.ql-editor ol li.ql-indent-9:before {
    content: counter(list-9, decimal) '. ';
}

.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
}

.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em;
}

.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 3em;
}

.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 4.5em;
}

.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
}

.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em;
}

.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 6em;
}

.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 7.5em;
}

.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
}

.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em;
}

.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 9em;
}

.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 10.5em;
}

.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
}

.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em;
}

.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 12em;
}

.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 13.5em;
}

.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
}

.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em;
}

.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 15em;
}

.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 16.5em;
}

.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
}

.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em;
}

.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 18em;
}

.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 19.5em;
}

.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
}

.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 22.5em;
}

.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 21em;
}

.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 22.5em;
}

.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em;
}

.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em;
}

.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 24em;
}

.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 25.5em;
}

.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 27em;
}

.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 28.5em;
}

.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 27em;
}

.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 28.5em;
}

.ql-editor .ql-video {
    display: block;
    max-width: 100%;
}

.ql-editor .ql-video.ql-align-center {
    margin: 0 auto;
}

.ql-editor .ql-video.ql-align-right {
    margin: 0 0 0 auto;
}

.ql-editor .ql-size-large {
    font-size: 17px;
    line-height: 22px;
}

.ql-editor .ql-size-huge {
    font-size: 25px;
    line-height: 30px;
}

.ql-editor .ql-align-center {
    text-align: center;
}

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

.ql-editor .ql-align-right {
    text-align: right;
}

.ql-snow.ql-toolbar button {
    border-radius: 8px;
}

.ql-snow.ql-toolbar button:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.15);
}

.ql-snow.ql-toolbar button:active,
.ql-snow.ql-toolbar button.ql-active {
    color: #000;
    background-color: rgba(0, 0, 0, 0.15);
}

.ql-snow.ql-toolbar button svg {
    float: left;
    height: 100%;
}

.ql-snow.ql-toolbar button + button {
    margin-left: 2px;
}

.ql-snow .ql-hidden {
    display: none;
}

.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
    visibility: hidden;
}

.ql-snow .ql-tooltip {
    position: absolute;
    transform: translateY(10px);
}

.ql-snow .ql-tooltip a {
    cursor: pointer;
    text-decoration: none;
}

.ql-snow .ql-tooltip.ql-flip {
    transform: translateY(-10px);
}

.ql-snow .ql-formats {
    display: inline-block;
    vertical-align: middle;
}

.ql-snow .ql-stroke {
    fill: none;
    stroke: #666;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ql-snow .ql-stroke-miter {
    fill: none;
    stroke: #666;
    stroke-miterlimit: 10;
    stroke-width: 2;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #666;
}

.ql-snow .ql-empty {
    fill: none;
}

.ql-snow .ql-even {
    fill-rule: evenodd;
}

.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
    stroke-width: 1;
}

.ql-snow .ql-editor a {
    text-decoration: underline;
}

.ql-snow .ql-editor blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}

.ql-snow .ql-editor img {
    max-width: 100%;
}

.ql-snow .ql-picker {
    color: #666;
    display: inline-block;
    height: 26px;
    position: relative;
    vertical-align: middle;
    border-radius: 8px;
}

.ql-snow .ql-picker:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.15);
}

.ql-snow .ql-picker:focus {
    outline: 0;
}

.ql-snow .ql-picker:active,
.ql-snow .ql-picker.ql-expanded {
    color: #000;
    background-color: rgba(0, 0, 0, 0.15);
}

.ql-snow .ql-picker-label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    padding-left: 8px;
    padding-right: 2px;
    position: relative;
    width: 100%;
}

.ql-snow .ql-picker-label:focus {
    outline: 0;
}

.ql-snow .ql-picker-label::before {
    display: inline-block;
    line-height: 30px;
}

.ql-snow .ql-picker-options {
    background-color: #fff;
    display: none;
    width: 182px;
    padding: 10px 0;
    position: absolute;
    white-space: nowrap;
}

.ql-snow .ql-picker-options:focus {
    outline: 0;
}

.ql-snow .ql-picker-options .ql-picker-item {
    color: #000;
    cursor: pointer;
    display: block;
    padding: 0 20px;
}

.ql-snow .ql-picker-options .ql-picker-item:focus {
    outline: 0;
}

.ql-snow .ql-picker-options .ql-picker-item:hover,
.ql-snow .ql-picker-options .ql-picker-item.ql-selected {
    background-color: #666;
}

.ql-snow .ql-picker-options .ql-picker-item + .ql-picker-item {
    margin-top: 10px;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: #000;
    z-index: 2;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: #000;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: #000;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    display: block;
    margin-bottom: 6px;
    bottom: 100%;
    z-index: 1;
}

.ql-snow .ql-color-picker {
    width: 26px;
}

.ql-snow .ql-color-picker .ql-picker-label {
    padding: 0;
}

.ql-snow .ql-color-picker .ql-picker-options {
    padding: 49px 19px 19px;
}

.ql-snow .ql-color-picker .ql-picker-options::before {
    content: 'Text Color';
    color: #000;
    font-weight: 600;
    position: absolute;
    top: 15px;
    left: 20px;
}

.ql-snow .ql-color-picker .ql-picker-item {
    border: 1px solid transparent;
    float: left;
    width: 16px;
    height: 16px;
    margin: 1px !important;
    padding: 0;
    border-radius: 1px;
}

.ql-snow .ql-picker:not(.ql-color-picker) svg {
    position: absolute;
    margin-top: -9px;
    right: 0;
    top: 50%;
    width: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
    content: attr(data-label);
}

.ql-snow .ql-picker.ql-size {
    width: 98px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: 'Normal';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: 'Large';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: 'Huge';
}

.ql-snow .ql-picker.ql-size .ql-picker-item {
    padding-top: 6px;
    padding-bottom: 4px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    font-size: 14px;
    line-height: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large'] {
    padding-top: 5px;
    padding-bottom: 4px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    font-size: 17px;
    line-height: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge'] {
    padding-top: 4px;
    padding-bottom: 4px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    font-size: 25px;
    line-height: 30px;
}

.ql-snow .ql-color-picker.ql-color .ql-picker-item {
    background-color: #000;
}

.ql-snow.ql-toolbar {
    border-radius: 0 0 8px 8px;
    color: #666;
    background-color: #f5f6fa;
    padding: 12px;
}

.ql-snow.ql-toolbar .ql-formats {
    margin-right: 10px;
}

.ql-snow.ql-toolbar .ql-picker-options {
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
}

.ql-snow.ql-toolbar .ql-color-picker .ql-picker-item.ql-selected,
.ql-snow.ql-toolbar .ql-color-picker .ql-picker-item:hover {
    border-color: #000;
}

.ql-snow.ql-toolbar + .ql-container.ql-snow {
    border-top: 0px;
}

.ql-snow .ql-tooltip {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 20px;
    white-space: nowrap;
    z-index: 1;
}

.ql-snow .ql-tooltip input[type='text'] {
    width: 250px;
    height: 42px;
    display: none;
    color: var(--body-text-primary, #000);
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 14px 19px;
}

.ql-snow .ql-tooltip input[type='text']:focus {
    outline: 0;
}

.ql-snow .ql-tooltip input[type='text']::placeholder {
    color: rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.ql-snow .ql-tooltip a.ql-preview {
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.ql-snow .ql-tooltip a.ql-remove::before {
    content: 'Cancel';
    color: #000;
    font-weight: 500;
    padding: 13px 20px 12px;
}

.ql-snow .ql-tooltip a {
    display: inline-block;
    height: 30px;
    margin-top: 22px;
}

.ql-snow .ql-tooltip.ql-editing a.ql-preview {
    display: none;
}

.ql-snow .ql-tooltip.ql-editing input[type='text'] {
    display: block;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: 'Add';
    background-color: var(--primary, #175cff);
    border-radius: 21px;
    color: var(--primary-contrast, #fff);
    font-weight: 600;
    padding: 13px 20px 12px;
}

.ql-snow a {
    color: #06c;
}

.qeditor-icon {
    fill: currentColor;
    width: 26px !important;
    height: 26px !important;
}

.faq-row .row-content a {
    text-decoration: underline;
}

.ps__rail-x,
.ps__rail-y {
    z-index: 1;
}

.select__control {
    border: 1px solid rgba(var(--body-text-primary-rgb), 0.1) !important;
    border-radius: 8px !important;
    padding: 6px 11px !important;
}

.select__control.select__control--is-focused {
    border-color: var(--primary, #175cff) !important;
    box-shadow: none !important;
}

.select__menu {
    border-radius: 8px !important;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.15) !important;
}

.select__option {
    padding: 7px 20px !important;
}

.select__option:first-child {
    margin-top: 8px;
}

.select__option:last-child {
    margin-bottom: 8px;
}

.select__option.select__option--is-focused {
    background-color: rgba(var(--primary-rgb), 0.07) !important;
}

.select__option.select__option--is-selected {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
}

.counter-parent > div {
    margin-top: 20px !important;
}

.or-seperator {
    position: relative;
    padding: 26px 0 25px;
}

.or-seperator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    width: 100%;
    height: 1px;
    background-color: var(--body-text-primary, #000);
    opacity: 0.07;
}

.or-seperator span {
    position: absolute;
    top: -2px;
    background-color: #fff;
    width: fit-content;
    padding: 2px 10px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    text-align: center;
}

.hidden {
    display: none;
}

.vnz-inner-container .topbar-container {
    display: none;
}

.vnz-inner-container {
    display: grid;
    grid-template-areas: 'nav' 'content';
    grid-template-rows: auto;
}

@media only screen and (min-width: 1170px) {
    .vnz-inner-container {
        grid-template-columns: 351px auto;
        grid-template-areas: 'header header' 'nav content';
    }

    .vnz-inner-container .topbar-container {
        display: flex;
    }
}

.btn-buy-now {
    border: 1px solid #ff5e29;
    border-width: 1px !important;
}

.arrow_prev_next {
    border: 2px solid;
}

.btn-buy-now:hover {
    color: #ff5e29;
}

.product-details-modal {
    max-width: 840px;
}

.product-details-modal .modal-content,
.product-details-modal-rating .modal-content {
    background-color: #fff;
}

.is-locked,
.is-list-locked {
    background-color: #f1f1f16e;
    opacity: 0.5;
    pointer-events: none;
}

.is-list-locked {
    opacity: 0.15;
}

.change-lecture {
    color: #000;
    background: white;
}

.change-lecture:hover {
    color: #0e946a;
}

.rotate-180 {
    rotate: 180deg;
}

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

.-ml-10 {
    margin-left: -10px !important;
}

.community-item-desc {
    font-size: 12px;
    max-width: 610px;
    padding: 0 20px 20px 20px;
}

.community-video-post {
    position: relative;
}

.community-video-post video {
    width: 100%;
}

.community-like {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.community-video-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -20px);
}

.community-like-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid #e4e5ec;
    border-bottom: 1px solid #e4e5ec;
    position: relative;
}

.community-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
    height: 40px;
}

.community-action.active {
    background-color: #f9f9f9;
    border-radius: 6px;
}

.community-reacts {
    display: flex;
    gap: 15px;
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;
    position: absolute;
    left: -11px;
    top: -65px;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.relevant-dropdown {
    background-color: #fff;
    min-width: 360px;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 35px;
    z-index: 10;
    border-radius: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.max-w-300 {
    max-width: 300px;
}

.max-w-480 {
    max-width: 480px;
}

.relevant-dropdown-item {
    padding: 10px;
}

.relevant-dropdown-item:hover {
    background-color: #e4e5ec;
    border-radius: 8px;
}

.community-comment-new {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.community-comment-chat {
    background-color: #f9f9f9;
    border-radius: 8px;
    display: flex;
    align-items: start;
    padding: 15px;
    position: relative;
}

.community-line {
    position: absolute;
    bottom: -67px;
    left: 30px;
}

.fz12 {
    font-size: 12px;
    line-height: 16px;
}

.ml-55 {
    margin-left: 45px;
}

@media (min-width: 960px) {
    .ml-55 {
        margin-left: 55px;
    }

    .community-comment-new .media-preview.preview-image {
        width: 280px;
        height: 160px;
    }
}

.community-action-new {
    position: absolute;
    top: 8px;
    right: 36px;
}

.community-action-new svg {
    position: relative;
    inset: 0;
}

.like-count {
    /* background-color: #fff; */
    position: absolute;
    right: -10px;
    bottom: -3px;
    border-radius: 8px;
    padding-right: 8px;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}

.community-img-overlay {
    position: absolute;
    background-color: rgb(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    inset: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.community-search-n {
    position: absolute;
    top: 17px !important;
    left: 20px;
}

.community-recent-s {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    padding: 10px;
    margin: 20px;
}

.community-recent-s:hover {
    background-color: #e4e6eb;
}

.community-cross {
    background-color: white;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.community-cross:hover {
    background-color: #f0f2f5;
}

.community-members-n {
    display: grid;
    grid-template-columns: 400px 1fr;
    row-gap: 10px;
    column-gap: 20px;
    padding: 20px;
    padding-top: 10px;
}

.notification-item-new {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding: 10px 15px;
    border: 1px solid #e4e5ec;
    border-radius: 8px;
}

.community-author {
    background-color: #dee7f6;
    border-radius: 4px;
    padding: 4px;
    font-size: 10px;
    color: #175cff;
}

.item-center {
    align-items: center;
}

.gap-6 {
    gap: 6px;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-12 {
    gap: 12px;
}

.gap-15 {
    gap: 15px;
}

.p-20 {
    padding: 20px;
}

.p-0 {
    padding: 0;
}

.flex-col {
    flex-direction: column;
}

.mt-15 {
    margin-top: 15px;
}

.relative {
    position: relative;
}

.z-10 {
    z-index: 10;
}

.fz14 {
    font-size: 14px;
    line-height: 16px;
}

.fz13 {
    font-size: 13px;
    line-height: 20px;
}

.ml-20 {
    margin-left: 20px;
}

.pb-50 {
    padding-bottom: 50px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.community-post-comment .form-control {
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.justify-between {
    justify-content: space-between;
}

.like-anims:hover {
    cursor: pointer;
    animation: 0.8s forwards grow;
}

@keyframes grow {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-25px);
    }

    from {
        transform: translateY(0);
    }
}

.justify-evenly {
    justify-content: space-evenly;
}

.modal-header-likes {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 20px 0;
    border-radius: 8px 8px 0 0;
}

.like-modal-close {
    background-color: #f0f2f5;
    width: 42px;
    height: 42px;
    border-radius: 25px;
}

.border-t {
    border-top: 1px solid #e4e5ec;
    padding-top: 20px;
    padding-bottom: 10px;
}

.modal-sort .active {
    background-color: #f5f6fa;
    border-radius: 6px;
}

.fill-emoji-close {
    fill: #a5a2a2;
}

.modal-container-width {
    max-width: 1000px;
    padding: 0px;
}

.community-grid-img {
    flex: 1;
    min-width: 100px;
}

.community-grid-img img {
    width: 100%;
    object-fit: cover;
    max-height: 400px;
}

.community-grid-img img:fullscreen {
    width: 100%;
    object-fit: contain;
    max-height: 400px;
}

.community-grid-img .plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
    width: 100%;
    height: 400px !important;
    max-height: 400px;
}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.justify-end {
    justify-content: end;
}

.search-post {
    position: absolute;
    right: 31px;
    z-index: 10;
}

.shrink-0 {
    flex-shrink: 0;
}

.gap-5 {
    gap: 5px;
}

.adjustable-textarea {
    white-space: normal !important;
}

ul.initial {
    list-style: disc;
    margin: 0;
    padding: 0;
}

ol.initial {
    list-style: decimal;
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

.new-dashboard {
    font-family: 'Manrope', sans-serif;
    --body-text-primary: #322659;
}

.new-dashboard .container {
    width: 100%;
    max-width: 1526px;
    padding: 0px 80px;
}

@media only screen and (max-width: 1440px) {
    .new-dashboard .container {
        padding: 0px 80px;
        max-width: 1440px;
    }
}

@media only screen and (max-width: 1280px) {
    .new-dashboard .container {
        padding: 0px 70px;
        max-width: 1280px;
    }
}

@media only screen and (max-width: 1024px) {
    .new-dashboard .container {
        padding: 0px 40px;
        max-width: 1024px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .container {
        padding: 0px 50px;
        max-width: 768px;
    }
}

@media only screen and (max-width: 640px) {
    .new-dashboard .container {
        padding: 0px 25px;
        max-width: 640px;
    }
}

@media only screen and (max-width: 450px) {
    .new-dashboard .container {
        padding: 0px 20px;
        max-width: 450px;
    }
}

.new-dashboard .btn-message {
    width: 50px;
    height: 50px;
    background-color: #322659;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px;
    position: fixed;
    right: 20px;
    bottom: 35px;
    z-index: 3;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.new-dashboard .main-header {
    position: relative;
}

.new-dashboard .main-header .main-header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header .main-header-inner {
        padding-top: 11px;
        padding-right: 7px;
        padding-bottom: 11px;
        padding-left: 15px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner {
        padding-top: 10px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 15px;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-logo {
        width: 100%;
        max-width: 80px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-logo {
        width: 100%;
        max-width: 80px;
    }
}

.new-dashboard .main-header .main-header-inner .main-header-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-form {
        display: none;
        padding-top: 8px;
        padding-right: 10px;
        padding-bottom: 8px;
        padding-left: 10px;
    }

    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-form input {
        padding-top: 8px;
        padding-right: 10px;
        padding-bottom: 8px;
        padding-left: 10px;
        height: 35px;
        font-size: 12px;
        font-weight: 500;
        line-height: 35px;
    }

    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-form span {
        font-size: 12px;
        font-weight: 500;
    }

    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-form span img {
        width: 14px;
        height: 14px;
        margin-right: 7px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-search-icon {
        font-size: 20px;
        margin-right: 10px;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-search-icon {
        display: none;
    }
}

.new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: fit-content;
    cursor: pointer;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile {
        margin-right: -3px;
        margin-left: 14px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile {
        margin-right: -2px;
        margin-left: 10px;
    }
}

.new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile .img {
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile .img {
        margin-right: 8px;
        padding: 4px;
        width: 47px;
        height: 47px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile .img {
        margin-right: 0;
        padding: 3px;
        width: 40px;
        height: 40px;
    }
}

.new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile .img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: block;
}

.new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile span {
    color: #10192d;
    white-space: nowrap;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile span {
        font-size: 13px;
        font-weight: 600;
        line-height: 19px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-inner .main-header-content .main-header-profile span {
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        display: none;
    }
}

.new-dashboard .main-header .main-header-serach-mobile {
    display: none;
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header .main-header-serach-mobile {
        padding: 15px;
        background-color: #ffffff;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.3);
    }

    .new-dashboard .main-header .main-header-serach-mobile .main-header-form {
        width: 100%;
        min-width: fit-content;
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
    }

    .new-dashboard .main-header .main-header-serach-mobile .main-header-search-close {
        color: #10192d;
        background-color: #ece7ff;
        font-size: 28px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 6px;
        height: 45px;
        width: 45px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .new-dashboard .main-header .main-header-serach-mobile.show {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

.new-dashboard .dashboard-new-content {
    min-height: calc(100vh - 125px);
}

.new-dashboard .header-bg-react {
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
    max-width: 380px !important;
    height: 270px;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .header-bg-react {
        width: 100%;
        max-width: 440px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .header-bg-react {
        width: 100%;
        max-width: 300px;
    }
}

.new-dashboard .text-left {
    text-align: left;
}

.new-dashboard .text-center {
    text-align: center;
}

.new-dashboard .text-right {
    text-align: right;
}

.new-dashboard .bg-dark {
    background-color: #10192d;
}

.new-dashboard .bg-success {
    background-color: #019fa9;
}

.new-dashboard .main-hero-section {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 220px);
}

.community-join-sidebar-cover.community-main-cover-image{
    width: 100%;
    max-height: 343px;
    object-fit: cover;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section:not(.custom-padding) {
        padding-top: 4.5rem;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section:not(.custom-padding) {
        padding-top: 2rem;
        padding-right: 0;
        padding-bottom: 4rem;
        padding-left: 0;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: start;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar {
    background-color: #ffffff;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    box-shadow: 0 0 18px 2px rgba(13, 46, 97, 0.05);
    z-index: 12;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn.active {
    color: #322659;
    margin-bottom: 1rem !important;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar {
        width: 100%;
        max-width: 250px;
        padding-top: 30px;
        padding-right: 25px;
        padding-bottom: 35px;
        padding-left: 25px;
        position: sticky;
        top: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar {
        padding: 15px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar {
        width: 100%;
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    color: #322659;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn {
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn {
        margin-bottom: 1.5rem;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn .main-arrow {
        margin-right: 1rem;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn .main-arrow {
        margin-right: 0.75rem;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn .main-arrow {
        width: 22px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn .main-arrow {
        width: 16px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .hero-sidebar-btn .down-arrow {
    margin-left: auto;
    width: 10px;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs {
    position: relative;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs:not(:last-child) {
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs:not(:last-child) {
        margin-bottom: 1.5rem;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs ul {
    height: 0;
    margin-top: 1rem;
    overflow: hidden;
    transition: height 300ms;
    transition-timing-function: linear;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs ul {
        padding-left: 52px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs ul {
        padding-left: 52px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs ul li {
    width: 100%;
    color: #322659;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs ul li {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs ul li {
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 15px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-sidebar .main-hero-sidebar-tabs .hero-sidebar-btn {
    margin-bottom: 0;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-sidebar
    .main-hero-sidebar-tabs
    .hero-sidebar-btn
    .down-arrow {
    transition: transform 0.3s;
    transition-timing-function: linear;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-sidebar
    .main-hero-sidebar-tabs.open
    .hero-sidebar-btn
    .down-arrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content {
        padding-left: 33px;
        width: 100%;
        max-width: calc(100% - 233px);
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content {
        width: 100%;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper {
    margin-bottom: 15px;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper .transactions-card {
    box-shadow: 0 0 18px 2px rgba(13, 46, 97, 0.05);
}

@media only screen and (min-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper .transactions-card {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 28px;
        padding-right: 20px;
        padding-bottom: 28px;
        padding-left: 20px;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper .transactions-card {
        padding: 15px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper .transactions-card .icon {
    background-color: rgba(142, 155, 174, 0.1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .icon {
        width: 70px;
        height: 70px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .icon {
        width: 55px;
        height: 55px;
        padding: 15px;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text {
        padding-left: 30px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text {
        padding-left: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text {
        padding-top: 10px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .transactions-wrapper
    .transactions-card
    .text
    > *:not(:first-child) {
    margin-top: 4px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .transactions-wrapper
    .transactions-card
    .text
    h2 {
    font-weight: 700;
    color: #10192d;
}

@media only screen and (min-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text
        h2 {
        font-size: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text
        h2 {
        font-size: 16px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .transactions-wrapper .transactions-card .text p {
    font-weight: 400;
    color: #322659;
}

@media only screen and (min-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text
        p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .transactions-wrapper
        .transactions-card
        .text
        p {
        font-size: 13px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .community-none {
    padding: 20px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    box-shadow: 0 0 18px 2px rgba(13, 46, 97, 0.05);
    background-color: #fff;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .community-none::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .main-hero-content-header
        > *:not(:first-child) {
        margin-top: 5px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .main-hero-content-header
        > *:not(:first-child) {
        margin-top: 6px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-header .last-login {
    padding-left: 10px;
    border-style: solid;
    border-color: #322659;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 2px;
    line-height: 0.9;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-inner {
        margin-top: 80px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-inner {
        margin-top: 40px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-inner .hero-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-inner .hero-info-wrapper {
        width: 100%;
        max-width: 390px;
    }

    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .main-hero-content-inner
        .hero-info-wrapper
        > *:not(:first-child) {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .main-hero-content-inner .hero-info-wrapper {
        width: 100%;
    }

    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .main-hero-content-inner
        .hero-info-wrapper
        > *:not(:first-child) {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .main-hero-content-inner
        .hero-info-wrapper
        .wrapper-img {
        max-width: 250px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .main-hero-content-inner
    .hero-info-wrapper
    .wrapper-img,
.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .main-hero-content-inner
    .hero-info-wrapper
    .normol-text {
    padding-bottom: 17px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new {
        margin-top: 30px;
    }

    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new > *:not(:first-child) {
        margin-top: 0;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new {
        margin-top: 25px;
    }

    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new > *:not(:first-child) {
        margin-top: 20px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-form
    .form-row
    + .form-inner-heading {
    margin: 20px 0 10px;
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-form
        .form-row
        + .form-inner-heading {
        text-align: left;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-form
        .form-help {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 5px;
    }

    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-form
        .form-help
        .normol-text {
        color: #10192d;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-form
        .form-help {
        display: none;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-form
    .btn-primary {
    min-width: 145px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-form
        .btn-primary {
        margin-top: 25px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new .dashboard-welcome-back {
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    background-image: url('https://assets.vonza.com/static/dashboard-new/welcome-back-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-welcome-back
    > *:not(:first-child) {
    margin-top: 10px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new .dashboard-welcome-back {
        padding: 20px;
        width: 100%;
        height: 300px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new .dashboard-welcome-back {
        width: 100%;
        height: fit-content;
        min-height: 220px;
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-welcome-back
    .normol-text {
    max-width: 500px;
    padding-bottom: 20px;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-state-new .dashboard-state-cards {
    position: relative;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    > *:not(:first-child) {
    margin-top: 15px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card {
    padding: 15px;
    position: relative;
    box-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-img {
        width: 100%;
        max-width: 400px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-img {
        max-width: 100%;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    > *:not(:first-child) {
    margin-top: 12px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-text {
        padding-left: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-text {
        padding-top: 20px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-text
        .dashboard-state-card-grid {
        width: 100%;
        max-width: 340px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-text
        .dashboard-state-card-grid {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    .dashboard-state-card-grid
    form {
    position: relative;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    .dashboard-state-card-grid
    form
    > *:not(:first-child) {
    margin-top: 10px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    .dashboard-state-card-grid
    form
    .normol-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    .dashboard-state-card-grid
    form
    .progressBar {
    width: 100%;
    height: 9px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: rgba(142, 155, 174, 0.35);
    position: relative;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    .dashboard-state-card-grid
    form
    .progressBar
    .value {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80%;
    height: 100%;
    background-color: #322659;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-text
    .normol-text.text-right {
    margin-top: auto;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-tag {
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    color: #ffffff;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-tag {
        height: 50px;
        min-width: 150px;
        font-size: 13px;
        font-weight: 600;
    }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-tag {
        height: 38px;
        width: 110px;
        min-width: inherit;
        font-size: 12px;
    }
}

@media only screen and (min-width: 500px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-tag {
        border-bottom-left-radius: 12px;
        border-top-right-radius: 12px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards
        .dashboard-state-card
        .dashboard-state-card-tag {
        height: 30px;
        width: 85px;
        min-width: inherit;
        font-size: 8px;
        font-weight: 600;
        border-bottom-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-tag.tag-dark {
    background-color: #10192d;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards
    .dashboard-state-card
    .dashboard-state-card-tag.tag-success {
    background-color: #019fa9;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-state-new
    .dashboard-state-cards-action {
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .dashboard-state-new
        .dashboard-state-cards-action {
        padding-top: 23px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section {
        margin-top: 25px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section-grid {
    margin-top: 20px;
}

@media only screen and (min-width: 960px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media only screen and (min-width: 1440px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section-grid > *:not(:first-child) {
        margin-top: 15px;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .course-section-grid .course-section-card {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 26px -5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-img {
    width: 100%;
    height: 220px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-img
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .course-section-grid
        .course-section-card
        .course-section-card-text {
        padding: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .course-section-grid
        .course-section-card
        .course-section-card-text {
        padding-top: 12px;
        padding-right: 15px;
        padding-bottom: 16px;
        padding-left: 15px;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-text
    > *:not(:first-child) {
    margin-top: 10px;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-pagination {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-pagination.has-paddingTop {
        padding-top: 2.6rem;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-pagination.has-paddingTop {
        padding-top: 1rem;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-pagination .pagination-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-top: 15px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-pagination .pagination-list.right {
        display: flex;
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .dashboard-pagination .pagination-list.right {
        display: flex;
        justify-content: center;
    }
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-pagination
    .pagination-list:not(.right) {
    display: flex;
    justify-content: center;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-pagination
    .pagination-list
    .pagination-item {
    min-width: 24px;
    min-height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .dashboard-pagination
    .pagination-list
    .pagination-item.active {
    color: #10192d;
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBarWithActions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 15px;
}

@media only screen and (max-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBarWithActions {
        display: flex;
        gap: 10px;
    }

    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .product-searchBarWithActions
        .product-searchBar {
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
    }

    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .product-searchBarWithActions
        .product-searchBar
        .main-header-form {
        width: 100%;
        max-width: 100%;
        min-width: fit-content;
    }

    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBarWithActions .btn-light {
        padding-right: 15px;
        padding-left: 15px;
        min-width: fit-content;
    }

    .new-dashboard
        .main-hero-section
        .main-hero-inner
        .main-hero-content
        .product-searchBarWithActions
        .btn-light
        span {
        display: none;
    }

    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBarWithActions .btn-light img {
        margin-left: 0;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBarWithActions .main-header-form {
    margin-top: 0px !important;
}

@media only screen and (min-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBar {
        max-width: 300px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBar {
        width: 100%;
        max-width: 100%;
    }
}

.new-dashboard .main-hero-section .main-hero-inner .main-hero-content .product-searchBar .main-header-form {
    margin-top: 25px;
}

.new-dashboard .main-header-form {
    position: relative;
    width: 100%;
    min-width: 287px;
    width: 100%;
}

.new-dashboard .main-header-form input {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    height: 45px;
    font-size: 14px;
    font-weight: 500;
    line-height: 45px;
    color: #10192d;
    background-color: #ece7ff;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-form input {
        border-radius: 11px;
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        -ms-border-radius: 11px;
        -o-border-radius: 11px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-form input {
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
}

.new-dashboard .main-header-form input::placeholder {
    color: transparent;
}

.new-dashboard .main-header-form span {
    display: none;
    font-size: 14px;
    font-weight: 500;
    color: #322659;
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.new-dashboard .main-header-form span img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.new-dashboard .main-header-form:focus + span {
    display: none;
}

.new-dashboard .main-header-form span {
    font-size: 14px;
    font-weight: 500;
    color: #322659;
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.new-dashboard .main-header-form span img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.new-dashboard .main-heading {
    font-weight: 800;
    color: #10192d;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-heading {
        font-size: 26.5px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-heading {
        font-size: 18px;
    }
}

.new-dashboard .sub-heading {
    font-weight: 800;
    color: #10192d;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .sub-heading {
        font-size: 21px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .sub-heading {
        font-size: 16.3px;
    }
}

.new-dashboard .section-heading {
    font-weight: 700;
    color: #10192d;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .section-heading {
        font-size: 24px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .section-heading {
        font-size: 16.5px;
    }
}

.new-dashboard .title {
    font-weight: 600;
    color: #10192d;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .title {
        font-size: 16px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .title {
        font-size: 14px;
    }
}

.new-dashboard .normol-text {
    font-weight: 500;
    color: #322659;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .normol-text {
        font-size: 12.8px;
        line-height: 1.7;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .normol-text {
        font-size: 12px;
        line-height: 1.5;
    }
}

.new-dashboard .btn-primary {
    font-weight: 600;
    min-width: 173px;
    padding-right: 28px;
    padding-left: 28px;
    color: #ffffff;
    background-color: #322659;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    letter-spacing: 0.5px;
    text-align: center;
}
.btn-primary {
    font-weight: 600;
    min-width: 173px;
    padding-right: 28px;
    padding-left: 28px;
    color: #ffffff;
    background-color: #322659;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    letter-spacing: 0.5px;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .btn-primary {
        height: 50px;
        font-size: 12.8px;
        line-height: 50px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .btn-primary {
        height: 45px;
        font-size: 12px;
        line-height: 45px;
    }
}

.btn-primary-sm {
    font-weight: 500;
    min-width: 90px;
    padding-right: 18px;
    padding-left: 18px;
    color: #ffffff;
    background-color: #322659;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    letter-spacing: 0.5px;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .btn-primary-sm {
        height: 30px;
        font-size: 12px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 992px) {
    .btn-primary-sm {
        height: 27px;
        font-size: 12px;
        line-height: 25px;
    }
}

.new-dashboard .btn-light {
    height: 45px;
    min-width: 125px;
    padding-right: 23px;
    padding-left: 23px;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 45px;
    color: #322659;
    background-color: #ece7ff;
    border-width: 1px;
    border-style: solid;
    border-color: #ece7ff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    letter-spacing: 0.5px;
}

.new-dashboard .btn-light img {
    margin-left: 8px;
}

@media only screen and (min-width: 960px) {
    .new-dashboard .form-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: start;
    }

    .new-dashboard .form-row .form-group + .form-group {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 960px) {
    .new-dashboard .form-row {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .new-dashboard .form-row .form-group + .form-group {
        margin-left: 0px;
    }
}

.new-dashboard .form-row .form-group {
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .form-row .form-group {
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .form-row .form-group {
        width: 100%;
    }

    .new-dashboard .form-row .form-group + .form-group {
        margin-left: 0;
    }
}

.new-dashboard .form-row .form-group label:not(.cusotm-check-box) {
    font-weight: 600;
    color: #10192d;
    margin-bottom: 8px;
    display: inline-block;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .form-row .form-group label:not(.cusotm-check-box) {
        font-size: 14px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .form-row .form-group label:not(.cusotm-check-box) {
        font-size: 13px;
    }
}

.new-dashboard .form-row .form-group .form-control {
    width: 100%;
    max-width: 100%;
    min-height: 45px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    font-size: 13px;
    font-weight: 500;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.new-dashboard .form-row .form-group .form-control:focus {
    outline: none;
    border-color: blue;
}

.new-dashboard .form-row .has-custom-placeholder {
    position: relative;
}

.new-dashboard .form-row .has-custom-placeholder .custom-placeholder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: calc(100% - 40px);
    opacity: 0.8;
    filter: alpha(opacity=80);
    pointer-events: none;
}

.new-dashboard .form-row .has-custom-placeholder .custom-placeholder .content-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-dashboard .form-row .has-custom-placeholder .custom-placeholder .content-item span {
    margin-left: 10px;
    font-weight: 400;
}

.new-dashboard .form-row .form-control {
    width: 100%;
    max-width: 100%;
    min-height: 45px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.new-dashboard .form-row .form-control:focus {
    outline: none;
    border-color: blue;
}

.new-dashboard .dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.new-dashboard .dropdown .dropdown-toggle:not(.main-header-profile) {
    background-image: url('https://assets.vonza.com/static/dashboard-new/select-down-arrow.svg');
    background-size: 10px 10px;
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-right: 0 !important;
}

.new-dashboard .dropdown .dropdown-menu {
    /* display: none; */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 240px;
    background-color: #ffffff;
    z-index: 9;
}

.new-dashboard .dropdown .dropdown-menu .dropdown-item {
    font-size: 12px;
    font-weight: 500;
    color: #322659;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.new-dashboard .dropdown .dropdown-menu .dropdown-item:hover {
    color: #322659;
}

.new-dashboard .dropdown .dropdown-menu.show {
    display: block;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .space-form-bottom {
        padding-bottom: 3rem !important;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .space-form-bottom {
        padding-bottom: 1.5rem !important;
    }
}

.new-dashboard .modal-wait {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.new-dashboard .modal-wait .modal-wait-inner {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background-color: #ffffff;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 0 18px 2px rgba(13, 46, 97, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media only screen and (min-width: 500px) {
    .new-dashboard .modal-wait .modal-wait-inner {
        padding: 50px;
    }

    .new-dashboard .modal-wait .modal-wait-inner > *:not(:first-child) {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .new-dashboard .modal-wait .modal-wait-inner {
        padding: 30px;
    }

    .new-dashboard .modal-wait .modal-wait-inner > *:not(:first-child) {
        margin-top: 10px;
    }
}

.new-dashboard .modal-wait .modal-wait-inner .modal-wait-icon {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 163, 250, 0.06);
}

@media only screen and (min-width: 768px) {
    .new-dashboard .modal-wait .modal-wait-inner .modal-wait-icon {
        width: 80px;
        height: 80px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .modal-wait .modal-wait-inner .modal-wait-icon {
        width: 60px;
        height: 60px;
    }
}

.new-dashboard .modal-wait .modal-wait-inner .modal-wait-icon img {
    animation: rotate 2s infinite linear;
    -webkit-animation: rotate 2s infinite linear;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .modal-wait .modal-wait-inner .modal-wait-icon img {
        width: 24px;
        height: 42px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .modal-wait .modal-wait-inner .modal-wait-icon img {
        width: 18px;
        height: 36px;
    }
}

.new-dashboard .modal-wait .modal-wait-inner .normol-text {
    color: #10192d;
    font-weight: 500;
    line-height: 1.8;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .modal-wait .modal-wait-inner .normol-text {
        font-size: 16px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .modal-wait .modal-wait-inner .normol-text {
        font-size: 13px;
    }
}

.new-dashboard .main-footer {
    padding-top: 15px;
    padding-bottom: 15px;
    border-style: solid;
    border-color: #322659;
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-color: rgb(232 237 240/1);
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-footer .main-footer-inner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-footer .main-footer-inner {
        align-items: start;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-footer .main-footer-inner {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-footer .main-footer-inner::before {
        content: '';
        display: none;
        width: 20px;
        flex: 1;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-footer .main-footer-inner::before {
        display: none;
    }
}

.new-dashboard .main-footer .main-footer-inner .main-footer-center {
    white-space: nowrap;
}

/* .new-dashboard .main-footer .main-footer-inner .first-ul {
  display: flex;
  gap: 12px;
}
.new-dashboard .main-footer .main-footer-inner .first-ul-direction-col {
  flex-direction: column;
}
.new-dashboard .main-footer .main-footer-inner .first-ul-direction-row {
  flex-direction: row;
}
.new-dashboard .main-footer .main-footer-inner .second-ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: center;
  width: 100%;
} */

@media only screen and (min-width: 992px) {
    .new-dashboard .main-footer .main-footer-inner .main-footer-center {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .new-dashboard .main-footer .main-footer-inner .main-footer-center > *:not(:first-child) {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-footer .main-footer-inner .main-footer-center {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .new-dashboard .main-footer .main-footer-inner .main-footer-center > *:not(:first-child) {
        margin-top: 5px;
    }

    .new-dashboard .main-footer .main-footer-inner .main-footer-center span.normol-text {
        display: none;
    }
}

.new-dashboard .main-footer .main-footer-inner .main-footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    max-width: 124px;
    margin-left: auto;
}

/* .new-dashboard .main-footer .main-footer-inner .main-footer-center-menu {
  display: flex;
  gap: 40px 20px;
} */

@media only screen and (min-width: 768px) {
    .new-dashboard .main-footer .main-footer-inner .main-footer-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-footer .main-footer-inner .main-footer-right {
        margin-right: auto;
    }
}

/* .new-dashboard .main-footer .main-footer-inner .main-footer-right > *:not(:first-child) {
	margin-left: 15px;
} */

.new-dashboard .main-footer .main-footer-inner .main-footer-right a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-width: 2px;
    border-style: solid;
    border-color: #322659;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    padding-top: 5px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    transition: all 0.3s;
    transition-timing-function: linear;
}

.new-dashboard .main-footer .main-footer-inner .main-footer-right a:hover {
    color: #ffffff;
    background-color: #322659;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

.new-dashboard .table-outer {
    margin-top: 2rem;
    overflow: auto hidden;
}

.new-dashboard .table-outer .table {
    width: 100%;
}

.new-dashboard .table-outer .table thead tr {
    border-width: 0;
}

.new-dashboard .table-outer .table thead tr th {
    background-color: rgba(142, 155, 174, 0.1);
}

@media only screen and (min-width: 768px) {
    .new-dashboard .table-outer .table thead tr th:first-child {
        border-radius: 12px 0 0 12px;
        -webkit-border-radius: 12px 0 0 12px;
        -moz-border-radius: 12px 0 0 12px;
        -ms-border-radius: 12px 0 0 12px;
        -o-border-radius: 12px 0 0 12px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .table-outer .table thead tr th:first-child {
        border-radius: 8px 0 0 8px;
        -webkit-border-radius: 8px 0 0 8px;
        -moz-border-radius: 8px 0 0 8px;
        -ms-border-radius: 8px 0 0 8px;
        -o-border-radius: 8px 0 0 8px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .table-outer .table thead tr th:last-child {
        border-radius: 0 12px 12px 0;
        -webkit-border-radius: 0 12px 12px 0;
        -moz-border-radius: 0 12px 12px 0;
        -ms-border-radius: 0 12px 12px 0;
        -o-border-radius: 0 12px 12px 0;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .table-outer .table thead tr th:last-child {
        border-radius: 0 8px 8px 0;
        -webkit-border-radius: 0 8px 8px 0;
        -moz-border-radius: 0 8px 8px 0;
        -ms-border-radius: 0 8px 8px 0;
        -o-border-radius: 0 8px 8px 0;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .table-outer .table thead tr th.paddingRight {
        padding-right: 3.5rem;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .table-outer .table thead tr th.paddingRight {
        padding-right: 2rem;
    }
}

.new-dashboard .table-outer .table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(142, 155, 174, 0.5);
}

.new-dashboard .table-outer .table tbody tr:last-child td,
.new-dashboard .table-outer .table tbody tr:last-child th {
    padding-bottom: 0;
}

.new-dashboard .table-outer .table tbody tr td:first-child div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
}

.new-dashboard .table-outer .table tbody tr td:first-child div img {
    margin-right: 10px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .table-outer .table tbody tr td:first-child div img {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .table-outer .table tbody tr td:first-child div img {
        width: 28px;
        height: 28px;
    }
}

.new-dashboard .table-outer .table tbody tr td:first-child div span {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.new-dashboard .table-outer .table tbody tr td .table-label {
    width: fit-content;
    display: inline-block;
    line-height: 1;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .table-outer .table tbody tr td .table-label {
        padding: 8px 13px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .table-outer .table tbody tr td .table-label {
        padding: 6px 11px;
    }
}

.new-dashboard .table-outer .table tbody tr td .table-label.primary {
    color: #10192d;
    background-color: rgba(142, 155, 174, 0.3);
}

.new-dashboard .table-outer .table tbody tr td .table-label.secondary {
    color: #322659;
    background-color: rgba(0, 163, 250, 0.12);
}

.new-dashboard .table-outer .table tbody tr td .table-label.success {
    color: #019fa9;
    background-color: #ffffff;
}

.new-dashboard .table-outer .table th,
.new-dashboard .table-outer .table td {
    color: #10192d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .table-outer .table th,
    .new-dashboard .table-outer .table td {
        font-size: 14px;
        padding-top: 14px;
        padding-right: 25px;
        padding-bottom: 14px;
        padding-left: 25px;
        min-height: 50px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .table-outer .table th,
    .new-dashboard .table-outer .table td {
        font-size: 12px;
        padding-top: 8px;
        padding-right: 15px;
        padding-bottom: 8px;
        padding-left: 15px;
        min-height: 45px;
    }
}

.new-dashboard .table-outer .table th {
    font-weight: 600;
}

.new-dashboard .table-outer .table td {
    font-weight: 400;
}

.new-dashboard .cusotm-check-box {
    display: inline-flex;
    justify-content: start;
    align-items: center;
    padding-left: 26px;
    cursor: pointer;
    font-weight: 500;
    color: #10192d;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .cusotm-check-box {
        font-size: 12.8px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .cusotm-check-box {
        font-size: 12px;
    }
}

.new-dashboard .cusotm-check-box input[type='checkbox'] {
    display: none;
}

.new-dashboard .cusotm-check-box .checkmark {
    width: 17px;
    height: 16px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: absolute;
    left: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
}

.new-dashboard .cusotm-check-box .checkmark::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-image: url('https://assets.vonza.com/static/dashboard-new/checkbox-checkmark.svg');
    background-size: 8px;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
    transition-timing-function: linear;
    opacity: 0;
    filter: alpha(opacity=0);
}

.new-dashboard .cusotm-check-box input[type='checkbox']:checked ~ .checkmark::after {
    opacity: 1;
    filter: alpha(opacity=100);
}

.new-dashboard .main-header-compose .new-msg-container .new-msg {
    width: 100%;
    max-width: 580px;
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .new-msg-container .new-msg {
        margin: 0 15px;
    }
}

.new-dashboard .main-header-compose .new-msg-container .new-msg .new-msg-body .ql-main {
    background-color: rgba(142, 155, 174, 0.1);
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .new-msg-container .new-msg .new-msg-body .ql-main {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
        align-items: baseline;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .new-msg-container .new-msg .new-msg-body .ql-main {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }
}

.new-dashboard .main-header-compose .new-msg-container .new-msg .new-msg-body .ql-snow.ql-toolbar {
    margin-top: 0;
}

.new-dashboard .main-header-compose .new-msg-container .new-msg .new-msg-body .new-msg-footer .dashboard-compose {
    height: 45px;
    color: #ffffff;
    background-color: #322659;
    min-width: 80px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    text-align: center;
}

.new-dashboard .main-header-compose .community-none {
    padding-bottom: 0 !important;
}

.new-dashboard .main-header-compose .community-none .main-header-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.new-dashboard .main-header-compose .community-none .main-header-inner .dashboard-compose {
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    background-color: #322659;
    font-weight: 600;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .community-none .main-header-inner .dashboard-compose {
        height: 50px;
        min-width: 160px;
        font-size: 13px;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .community-none .main-header-inner .dashboard-compose {
        height: 42px;
        min-width: 120px;
        font-size: 12px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .new-dashboard .main-header-compose .community-none .main-header-inner .dashboard-compose img {
        width: 19px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .community-none .main-header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
}

.new-dashboard .main-header-compose .community-none .email-compose-select {
    gap: 20px;
    margin-top: 20px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .community-none .email-compose-select {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        gap: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .community-none .email-compose-select {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
}

.new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #322659;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox {
        font-size: 14px;
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox {
        padding: 4px 10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox .email-svg {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox .email-svg {
        display: none;
    }
}

.new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox:hover {
    color: #322659;
    background-color: rgba(142, 155, 174, 0.1);
}

.new-dashboard .main-header-compose .community-none .email-compose-select .email-compose-inbox.active {
    color: #322659;
    background-color: rgba(142, 155, 174, 0.1);
}

.new-dashboard .main-header-compose .email-tabs {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header-compose .email-tabs {
        margin: 40px -20px 0;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header-compose .email-tabs {
        margin: 20px -20px 0;
    }
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats {
        border-style: solid;
        border-color: rgba(142, 155, 174, 0.5);
        border-top-width: 0;
        border-right-width: 1px;
        border-bottom-width: 0;
        border-left-width: 0;
        width: 100%;
        max-width: 350px;
        align-self: stretch;
    }
}

@media only screen and (max-width: 992px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats {
        width: 100%;
        max-width: 100%;
    }
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-width: 0;
    border-style: solid;
    border-color: rgba(142, 155, 174, 0.5);
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats .email-header {
        padding: 14px 20px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats .email-header {
        padding: 10px 13px;
    }
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-header .email-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats .email-header .email-pagination {
        margin-right: 2rem;
    }
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-header .email-pagination span {
    font-size: 14px;
    font-weight: 600;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-header .email-pagination .email-btn {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-header .email-pagination .email-btn span {
    background-color: rgba(142, 155, 174, 0.1);
    width: 25px;
    height: 25px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-checkbox {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-checkbox .form-group {
    margin-bottom: 0;
    margin-top: -6px;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items {
    max-height: fit-content;
    overflow: hidden;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items .email-lists-item {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    border-width: 0;
    border-style: solid;
    border-color: rgba(142, 155, 174, 0.5);
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items .email-lists-item {
        padding: 25px 20px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items .email-lists-item {
        padding: 10px 13px;
    }
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items .email-lists-item:hover {
    background-color: #f5f6f7;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items .email-lists-item.active {
    background-color: #f5f6f7;
}

.new-dashboard .main-header-compose .email-tabs .email-chats .email-list-items .email-lists-item .email-item-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-chats
    .email-list-items
    .email-lists-item
    .email-item-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(142, 155, 174, 0.1);
    opacity: 100;
    filter: alpha(opacity=10000);
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-chats
    .email-list-items
    .email-lists-item
    .email-item-info
    .email-name-timestamp {
    font-weight: 500;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-header-compose
        .email-tabs
        .email-chats
        .email-list-items
        .email-lists-item
        .email-item-info
        .email-name-timestamp {
        font-size: 12px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-header-compose
        .email-tabs
        .email-chats
        .email-list-items
        .email-lists-item
        .email-item-info
        .email-name-timestamp {
        font-size: 10px;
        margin-bottom: 0;
    }
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-chats
    .email-list-items
    .email-lists-item
    .email-item-info
    .email-name-timestamp
    .email-info-name {
    width: 100%;
    max-width: 100px;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-chats
    .email-list-items
    .email-lists-item
    .email-item-info
    .email-item-subject {
    font-weight: 700;
    color: #10192d;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-header-compose
        .email-tabs
        .email-chats
        .email-list-items
        .email-lists-item
        .email-item-info
        .email-item-subject {
        font-size: 14px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-header-compose
        .email-tabs
        .email-chats
        .email-list-items
        .email-lists-item
        .email-item-info
        .email-item-subject {
        font-size: 12px;
    }
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-chats
    .email-list-items
    .email-lists-item
    .email-item-info
    .email-info-body {
    font-weight: 400;
    color: #10192d;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard
        .main-header-compose
        .email-tabs
        .email-chats
        .email-list-items
        .email-lists-item
        .email-item-info
        .email-info-body {
        font-size: 13px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard
        .main-header-compose
        .email-tabs
        .email-chats
        .email-list-items
        .email-lists-item
        .email-item-info
        .email-info-body {
        font-size: 11px;
    }
}

.new-dashboard .main-header-compose .email-tabs .email-details {
    padding: 0;
}

@media only screen and (min-width: 992px) {
    .new-dashboard .main-header-compose .email-tabs .email-details {
        min-height: 450px;
    }
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-headers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-width: 0;
    border-style: solid;
    border-color: rgba(142, 155, 174, 0.5);
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-details
    .email-details-headers
    .email-details-actions
    > *:not(:first-child) {
    margin-left: 25px;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-headers .email-details-actions a {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-headers .email-details-actions a span {
    background-color: rgba(142, 155, 174, 0.1);
    width: 25px;
    height: 25px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-headers .email-details-actions a div {
    font-size: 14px;
    font-weight: 600;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-user {
    padding: 25px 20px;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-user .email-details-avatar {
    width: 40px;
    height: 40px;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-details
    .email-details-user
    .email-details-userinfo
    .email-item-subject {
    font-size: 14px;
    font-weight: 700;
    color: #10192d;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-details
    .email-details-user
    .email-details-userinfo
    .email-details-email {
    color: #322659;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-subject {
    padding: 0 20px;
    color: #10192d;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-body {
    padding: 0 20px;
    color: #10192d;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-body > *:not(:first-child) {
    margin-top: 28px;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-body span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 2;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-forward {
    margin-top: 28px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 20px;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-forward .text {
    margin-left: 15px;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-forward .text h4 {
    font-size: 13px;
    font-weight: 500;
    color: #10192d;
}

.new-dashboard .main-header-compose .email-tabs .email-details .new-msg-container {
    position: inherit;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    z-index: 0;
    margin-top: 28px;
    padding: 0 20px;
    width: unset;
    max-width: unset;
    min-width: fit-content;
    height: fit-content;
    display: block;
    overflow: hidden;
}

.new-dashboard .main-header-compose .email-tabs .email-details .new-msg-container .new-msg {
    max-width: 100%;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    padding: 0;
}

.new-dashboard .main-header-compose .email-tabs .email-details .new-msg-container .new-msg .new-msg-body {
    padding: 0;
}

.new-dashboard .main-header-compose .email-tabs .email-details .new-msg-container .new-msg .new-msg-body .nm-content {
    max-height: 50px;
    overflow: hidden;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-details
    .new-msg-container
    .new-msg
    .new-msg-body
    .nm-content
    .qeditor-container
    .ql-container
    .ql-editor {
    color: #10192d;
    padding: 0;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-details
    .new-msg-container
    .new-msg
    .new-msg-body
    .nm-content
    .qeditor-container
    .ql-container
    .ql-editor::before {
    color: #10192d;
    left: 0;
}

.new-dashboard .main-header-compose .email-tabs .email-details .new-msg-container .new-msg .new-msg-body .ql-main {
    padding: 0;
    margin: 0 0 20px;
    background-color: transparent;
}

.new-dashboard
    .main-header-compose
    .email-tabs
    .email-details
    .new-msg-container
    .new-msg
    .new-msg-body
    .ql-main
    .new-msg-footer {
    padding: 0;
}

.new-dashboard .main-header-compose .email-tabs .email-details .email-details-timestamp {
    font-size: 12px;
    font-weight: 500;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .dashboard-profile {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .dashboard-profile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .dashboard-profile .main-img {
        margin-right: 20px;
        width: 130px;
        height: 130px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .dashboard-profile .main-img {
        margin-bottom: 15px;
        width: 120px;
        height: 120px;
    }
}

.new-dashboard .dashboard-profile .dashboard-profile-text {
    position: relative;
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .dashboard-profile .dashboard-profile-text > *:not(:first-child) {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .dashboard-profile .dashboard-profile-text {
        text-align: center;
    }

    .new-dashboard .dashboard-profile .dashboard-profile-text > *:not(:first-child) {
        margin-top: 10px;
    }
}

@media only screen and (min-width: 768px) {
    .new-dashboard .dashboard-profile .dashboard-profile-text .actions {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .new-dashboard .dashboard-profile .dashboard-profile-text .actions > *:not(:first-child) {
        margin-left: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .dashboard-profile .dashboard-profile-text .actions {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .new-dashboard .dashboard-profile .dashboard-profile-text .actions > *:not(:first-child) {
        margin-left: 10px;
    }
}

.new-dashboard .dashboard-profile .dashboard-profile-text .actions button {
    width: 104px;
    height: 43px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 6px 15px;
    text-align: center;
    font-size: 12.8px;
    font-weight: 500;
}

.new-dashboard .dashboard-profile .dashboard-profile-text .actions button.outline {
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    color: #322659;
}

.new-dashboard .dashboard-profile .dashboard-profile-text .actions button.dark {
    border-width: 1px;
    border-style: solid;
    border-color: #869ea6;
    color: #ffffff;
}

@media only screen and (min-width: 768px) {
    .new-dashboard .contact-form .form-row + .main-hero-content-header {
        margin: 30px 0 20px;
    }
}

@media only screen and (max-width: 768px) {
    .new-dashboard .contact-form .form-row + .main-hero-content-header {
        margin: 15px 0 20px;
    }
}

.new-dashboard .header-profile-dropdown {
    padding: 13px 20px;
    left: unset !important;
    right: 0 !important;
}

.new-dashboard .header-profile-dropdown .header-profile-detals {
    margin-bottom: 10px;
}

.new-dashboard .header-profile-dropdown .header-profile-detals .name {
    font-size: 13px;
    font-weight: 700;
    color: #10192d;
}

.new-dashboard .header-profile-dropdown .header-profile-links {
    transition: all 0.3;
    transition-timing-function: linear;
}

.new-dashboard .header-profile-dropdown .header-profile-links > *:not(:first-child) {
    margin-top: 8px;
}

.new-dashboard .header-profile-dropdown .header-profile-links .item {
    display: flex;
    justify-content: start;
    align-items: center;
}

.new-dashboard .header-profile-dropdown .header-profile-links .item img,
.new-dashboard .header-profile-dropdown .header-profile-links .item svg {
    margin-right: 10px;
    width: 18px;
}

.new-dashboard .header-profile-dropdown .header-profile-links .item:hover,
.new-dashboard .header-profile-dropdown .header-profile-links .item.active {
    color: #322659;
}

.dropdown-menu.notifaction-dropdown {
    left: unset !important;
    margin-top: 22px;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown {
        right: 0 !important;
        min-width: 430px;
    }
}

@media only screen and (min-width: 400px) and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown {
        min-width: 92vw;
        right: -12vw !important;
    }
}

@media only screen and (max-width: 400px) {
    .dropdown-menu.notifaction-dropdown {
        min-width: 90vw;
        right: -15vw !important;
    }
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .notifaction-header {
        padding: 13px 20px;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .notifaction-header {
        padding: 13px;
    }
}

.dropdown-menu.notifaction-dropdown .notifaction-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-menu.notifaction-dropdown .notifaction-dropdown-header .sub-heading:not(.with-back-btn) img,
.dropdown-menu.notifaction-dropdown .notifaction-dropdown-header .sub-heading:not(.with-back-btn) .chat-action-btn,
.dropdown-menu.notifaction-dropdown .notifaction-dropdown-header .sub-heading:not(.with-back-btn) .dropdown {
    display: none;
}

.dropdown-menu.notifaction-dropdown .notifaction-dropdown-header .dropdown {
    max-width: fit-content;
    cursor: pointer;
}

.dropdown-menu.notifaction-dropdown .notifaction-dropdown-header .close-notifaction-popup {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-notifaction {
    margin-top: 15px;
    background-color: #ece7ff;
    border-width: 1px;
    border-style: solid;
    border-color: #10192d;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-notifaction {
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-notifaction {
        padding: 8px 12px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-notifaction .normal-text {
    color: #10192d;
    margin-bottom: 7px;
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-notifaction .normal-text {
        font-size: 12px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-notifaction .allow-desktop-notifaction-btns > *:not(:first-child) {
    margin-left: 10px;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    max-height: 56vh;
    overflow-y: auto;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats {
        margin-top: 5px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    border-style: solid;
    border-color: rgba(16, 25, 45, 0.3);
    border-top-width: 0px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat {
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat {
        padding: 13px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat > *:not(:first-child) {
    margin-left: 5px;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat.unread {
    background-color: #f2faff;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat.with-checkbox {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat.with-checkbox .chat-profile {
    margin-right: 13px;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat.with-checkbox .chat-profile {
        width: 43px;
        height: 43px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat.with-checkbox .cusotm-check-box {
    position: relative;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat.with-checkbox .chat-sender {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat:not(:last-child) {
    border-width: 0;
    border-bottom: 1px solid #d9e1ec;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .isOnline {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #322659;
    position: absolute;
    z-index: 1;
    left: 5px;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .isOnline {
        width: 8px;
        height: 8px;
        min-width: 8px;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .isOnline {
        width: 5px;
        height: 5px;
        min-width: 5px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .chat-profile {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .chat-profile {
        width: 50px;
        height: 50px;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .chat-profile {
        width: 30px;
        height: 30px;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat p.normal-text {
    max-width: 260px;
}

@media only screen and (min-width: 768px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat p.normal-text span {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media only screen and (max-width: 768px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat p.normal-text span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat p.normal-text b {
    color: #10192d;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat p.normal-text .seeMoreBtn {
    color: #322659;
}

.dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat div.normal-text {
    white-space: nowrap;
    margin-left: auto;
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown .allow-desktop-chats .allow-desktop-chat .normal-text {
        font-size: 11px;
    }
}

.dropdown-menu.notifaction-dropdown.notifaction-popup {
    position: fixed;
    top: unset;
    right: 1rem !important;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup.allowNotifaction #allowNotifaction {
    display: block;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup.allowNotifaction #searchBarWithDropdown {
    display: none;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup:not(.allowNotifaction) #allowNotifaction {
    display: none;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup:not(.allowNotifaction) #searchBarWithDropdown {
    display: flex;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup.inbox-popup #allowNotifaction,
.dropdown-menu.notifaction-dropdown.notifaction-popup.inbox-popup #searchBarWithDropdown {
    display: none;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .allow-desktop-chats:not(.active) {
    display: none;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown.notifaction-popup {
        max-width: 430px;
    }

    .dropdown-menu.notifaction-dropdown.notifaction-popup .allow-desktop-chats:not(#chat3) {
        min-height: 64vh;
    }

    .dropdown-menu.notifaction-dropdown.notifaction-popup .allow-desktop-chats#chat3 {
        min-height: 72vh;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown.notifaction-popup {
        top: unset;
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem;
        width: 100%;
        max-width: calc(100% - 25px);
        min-width: fit-content;
    }

    .dropdown-menu.notifaction-dropdown.notifaction-popup .allow-desktop-chats {
        max-height: calc(100vh - 180px);
        min-height: 64vh;
    }
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .main-header-form {
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

@media only screen and (min-width: 500px) {
    .dropdown-menu.notifaction-dropdown.notifaction-popup .main-header-form {
        max-width: 326px;
        min-width: unset;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-menu.notifaction-dropdown.notifaction-popup .main-header-form {
        max-width: 225px;
        min-width: unset;
    }
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .main-header-form input {
    height: 40px;
    line-height: 40px;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .popup-with-searchBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .popup-with-searchBar .popup-with-searchBar-inner {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .popup-with-searchBar .popup-with-searchBar-inner .dropdown {
    max-width: fit-content;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup
    .popup-with-searchBar
    .popup-with-searchBar-inner
    .dropdown
    .item {
    color: #10192d;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .popup-no-content {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 350px;
    padding: 30px 15px;
    margin-left: auto;
    margin-right: auto;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .popup-no-content > *:not(:first-child) {
    margin-top: 18px;
}

.dropdown-menu.notifaction-dropdown.notifaction-popup .popup-no-content .btn-primary-sm {
    min-width: 130px;
    min-height: 38px;
    line-height: 32px;
}

.dropdown-menu.notifaction-dropdown.dropdown-main-chats .dropdown {
    max-width: fit-content;
}

.dropdown-menu.notifaction-dropdown.dropdown-main-chats .dropdown .item {
    color: #10192d;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.dropdown-menu.notifaction-dropdown.dropdown-main-chats .dropdown .item.is-red {
    color: #ff0000;
}

.dropdown-menu.notifaction-dropdown.notifaction-with-filter .main-header-form .dropdown-popup-header-outer {
    position: absolute;
    top: 50%;
    right: 13px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.dropdown-menu.notifaction-dropdown.notifaction-with-filter
    .main-header-form
    .dropdown-popup-header-outer
    .dropdown-toggle {
    opacity: 60%;
    filter: alpha(opacity=6000%);
}

.dropdown-menu.notifaction-dropdown.notifaction-with-filter
    .main-header-form
    .dropdown-popup-header-outer
    .dropdown-menu {
    margin: 11px 0 0 0;
    min-width: 165px;
    right: 0 !important;
}

.dropdown-menu.notifaction-dropdown.notifaction-with-filter
    .main-header-form
    .dropdown-popup-header-outer
    .dropdown-menu
    .header-profile-links
    > *:not(:first-child) {
    margin-top: 18px;
}

.dropdown-menu.notifaction-dropdown:not(.notifaction-with-filter) .main-header-form .dropdown-popup-header-outer {
    display: none;
}

.dropdown-dots.dropdown-toggle {
    cursor: pointer;
    width: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.custom-radio-outer input[type='checkbox'] {
    display: none;
}

.custom-radio-outer .custom-radio {
    position: relative;
    width: 24px;
    height: 17px;
    background-color: #757575;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s;
    transition-timing-function: linear;
}

.custom-radio-outer .custom-radio .radio-toggler {
    width: 13px;
    height: 13px;
    background-color: #ffffff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: transform 0.15s;
    transition-timing-function: linear;
}

.custom-radio-outer input[type='checkbox']:checked ~ .custom-radio {
    background-color: #322659;
}

.custom-radio-outer input[type='checkbox']:checked ~ .custom-radio .radio-toggler {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

.course-section-card.has_border {
    border-width: 1.5px;
    border-style: solid;
    border-color: #ece7ff;
    transition: all 0.3s;
    transition-timing-function: linear;
    display: block;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.course-section-card.has_border:hover {
    border-color: #322659;
}

.course-section-card.has_border .course-section-card-text .title ~ .normal-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-new-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 163, 250, 0.5);
}

.header_with_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .header_with_btn .btn-primary {
        min-width: 120px;
        height: 41px;
        line-height: 39px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

.dashboard-community-details {
    position: relative;
}

.dashboard-community-details .main-community-img {
    width: 100%;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    display: block;
}

@media only screen and (min-width: 768px) {
    .dashboard-community-details .main-community-img {
        margin: 13px 0 20px;
    }
}

@media only screen and (max-width: 768px) {
    .dashboard-community-details .main-community-img {
        margin: 10px 0;
        min-height: 150px;
        object-fit: cover;
    }
}

.bold {
    font-weight: 700;
}

.dashboard-community-content {
    position: relative;
    margin-top: 30px;
}

@media only screen and (min-width: 992px) {
    .dashboard-community-content .dashboard-community-content-grid {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 992px) {
    .dashboard-community-content .dashboard-community-content-grid {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 768px) {
    .dashboard-community-content .dashboard-community-content-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .dashboard-community-content .dashboard-community-content-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 20px;
    }
}

@media only screen and (max-width: 500px) {
    .dashboard-community-content .dashboard-community-content-grid {
        display: grid;
        gap: 50px;
    }
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 20px 15px 15px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card > *:not(:first-child) {
    margin-top: 12px;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .icon {
    position: relative;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.13);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -51px;
}

@media only screen and (min-width: 992px) {
    .dashboard-community-content .dashboard-community-content-grid .community-content-card .icon {
        width: 115px;
        height: 100px;
        border-radius: 16px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        -ms-border-radius: 16px;
        -o-border-radius: 16px;
    }
}

@media only screen and (max-width: 992px) {
    .dashboard-community-content .dashboard-community-content-grid .community-content-card .icon {
        width: 90px;
        height: 75px;
        border-radius: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        -ms-border-radius: 9px;
        -o-border-radius: 9px;
    }

    .dashboard-community-content .dashboard-community-content-grid .community-content-card .icon img {
        max-height: 40px;
        max-width: 50px;
    }
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .icon.blue {
    background-color: #ece7ff;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .icon.yellow {
    background-color: #fff5cd;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .icon.green {
    background-color: #e9fff7;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .icon.red-shade {
    background-color: #fdeef4;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .title {
    font-weight: 800;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .community-content-list {
    margin-bottom: 14px;
}

.dashboard-community-content
    .dashboard-community-content-grid
    .community-content-card
    .community-content-list
    > *:not(:first-child) {
    margin-top: 5px;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .community-content-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
}

.dashboard-community-content
    .dashboard-community-content-grid
    .community-content-card
    .community-content-list
    li
    span:not(.colors) {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-community-content
    .dashboard-community-content-grid
    .community-content-card
    .community-content-list
    li
    span.colors {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.dashboard-community-content
    .dashboard-community-content-grid
    .community-content-card
    .community-content-list
    li
    .profile-pic {
    width: 18px;
    height: 18px;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-right: 8px;
}

.dashboard-community-content
    .dashboard-community-content-grid
    .community-content-card
    .community-content-list
    li
    .profile-pic
    img {
    width: 100%;
    height: 100%;
    display: block;
}

.dashboard-community-content
    .dashboard-community-content-grid
    .community-content-card
    .community-content-list
    li
    .profile-pic
    .isOnline {
    width: 5px;
    height: 5px;
    background-color: #13e30f;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 16px;
    right: 0;
}

.dashboard-community-content .dashboard-community-content-grid .community-content-card .card-btn {
    margin-top: auto !important;
    margin-left: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #322659;
    background-color: #ece7ff;
}

@media only screen and (min-width: 768px) {
    .dashboard-community-content .dashboard-community-content-grid .community-content-card .card-btn {
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        width: 140px;
        height: 40px;
        font-size: 14px;
        font-weight: 500;
    }

    .dashboard-community-content .dashboard-community-content-grid .community-content-card .card-btn img {
        margin-left: 7px;
    }
}

@media only screen and (max-width: 768px) {
    .dashboard-community-content .dashboard-community-content-grid .community-content-card .card-btn {
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        width: 106px;
        height: 35px;
        font-size: 12px;
        font-weight: 500;
    }

    .dashboard-community-content .dashboard-community-content-grid .community-content-card .card-btn img {
        margin-left: 5px;
        width: 8px;
    }
}

.with-back-btn {
    display: flex;
    align-items: center;
    gap: 13px;
}

.with-back-btn .dropdown {
    margin-left: -13px;
}

.dropdown-popup-header .dropdown-menu {
    left: unset !important;
    right: unset !important;
    cursor: auto;
}

@media only screen and (min-width: 500px) {
    .dropdown-popup-header .dropdown-menu {
        margin: 17px 0 0 15px;
    }
}

@media only screen and (max-width: 500px) {
    .dropdown-popup-header .dropdown-menu {
        margin: 17px 0 0 -47px;
    }
}

.dropdown-popup-header .dropdown-menu .header-profile-links > *:not(:first-child) {
    margin-top: 15px;
}

.dropdown-popup-header .dropdown-menu .header-profile-links .item {
    color: #10192d !important;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.dropdown-popup-header .dropdown-menu .header-profile-links .item .item-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-transform: capitalize;
}

.dropdown-popup-header .dropdown-menu .header-profile-links .item .item-inner img {
    height: 18px;
}

.dropdown-popup-header .dropdown-menu .header-profile-links .item.is-red {
    color: #ff0000 !important;
}

.content-with-tabs .tabs-header {
    position: relative;
    max-width: 400px;
    display: flex;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    overflow: hidden auto;
}

.content-with-tabs .tabs-header .tabs-btn {
    height: 39px;
    padding: 5px 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 35px;
    color: #757575;
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #dedaec;
}

@media only screen and (max-width: 768px) {
    .content-with-tabs .header_with_btn {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: stretch;
    }

    .content-with-tabs .header_with_btn .tabs-header {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
        overflow: auto hidden;
    }
}

@media only screen and (min-width: 768px) {
    .content-with-tabs .header_with_btn .btn-primary {
        max-width: fit-content;
    }
}

@media only screen and (max-width: 768px) {
    .content-with-tabs .header_with_btn .btn-primary {
        width: 100%;
        max-width: 100%;
    }
}

.content-with-tabs input[type='radio'].isTabs {
    display: none;
}

.content-with-tabs #tab1:checked ~ .tab-content-outer > .tab-content:nth-of-type(1),
.content-with-tabs #tab2:checked ~ .tab-content-outer > .tab-content:nth-of-type(2),
.content-with-tabs #tab3:checked ~ .tab-content-outer > .tab-content:nth-of-type(3),
.content-with-tabs #tab4:checked ~ .tab-content-outer > .tab-content:nth-of-type(4),
.content-with-tabs #tab5:checked ~ .tab-content-outer > .tab-content:nth-of-type(5),
.content-with-tabs #tab6:checked ~ .tab-content-outer > .tab-content:nth-of-type(6),
.content-with-tabs #tab7:checked ~ .tab-content-outer > .tab-content:nth-of-type(7),
.content-with-tabs #tab8:checked ~ .tab-content-outer > .tab-content:nth-of-type(8),
.content-with-tabs #tab9:checked ~ .tab-content-outer > .tab-content:nth-of-type(9),
.content-with-tabs #tab10:checked ~ .tab-content-outer > .tab-content:nth-of-type(10) {
    display: block;
}

.content-with-tabs #tab1:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(1),
.content-with-tabs #tab2:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(2),
.content-with-tabs #tab3:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(3),
.content-with-tabs #tab4:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(4),
.content-with-tabs #tab5:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(5),
.content-with-tabs #tab6:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(6),
.content-with-tabs #tab7:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(7),
.content-with-tabs #tab8:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(8),
.content-with-tabs #tab9:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(9),
.content-with-tabs #tab10:checked ~ .header_with_btn .tabs-header > .tabs-btn:nth-of-type(10) {
    color: #322659;
    background-color: #ece7ff;
    border-bottom: 1px solid #322659;
    font-weight: bold;
}

.content-with-tabs .tab-content-outer .tab-content {
    display: none;
    padding-top: 0;
}

.content-with-tabs .tab-content-outer .tab-content .main-hero-content-header .main-heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.content-with-tabs .tab-content-outer .tab-content .main-hero-content-header .main-heading > *:not(:first-child) {
    margin-left: 10px;
}

.content-with-tabs .tab-content-outer .tab-content .main-hero-content-header .main-heading a,
.content-with-tabs .tab-content-outer .tab-content .main-hero-content-header .main-heading button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media only screen and (max-width: 500px) {
    .content-with-tabs .tab-content-outer .tab-content .main-hero-content-header .product-searchBarWithActions {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .content-with-tabs
        .tab-content-outer
        .tab-content
        .main-hero-content-header
        .product-searchBarWithActions
        .filter-menu {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    #viewGrid:checked
    ~ .main-hero-content-header
    .filter-nevagitor
    .btn-filter:nth-of-type(1),
.content-with-tabs
    .tab-content-outer
    .tab-content
    #viewList:checked
    ~ .main-hero-content-header
    .filter-nevagitor
    .btn-filter:nth-of-type(2),
.content-with-tabs
    .tab-content-outer
    .tab-content
    #viewGrid1:checked
    ~ .main-hero-content-header
    .filter-nevagitor
    .btn-filter:nth-of-type(1),
.content-with-tabs
    .tab-content-outer
    .tab-content
    #viewList1:checked
    ~ .main-hero-content-header
    .filter-nevagitor
    .btn-filter:nth-of-type(2) {
    background-color: #dbe2f2;
}

.content-with-tabs .tab-content-outer .tab-content #viewGrid:checked ~ .dashboard-state-new .view-mode:nth-of-type(1),
.content-with-tabs .tab-content-outer .tab-content #viewList:checked ~ .dashboard-state-new .view-mode:nth-of-type(2),
.content-with-tabs .tab-content-outer .tab-content #viewGrid1:checked ~ .dashboard-state-new .view-mode:nth-of-type(1),
.content-with-tabs .tab-content-outer .tab-content #viewList1:checked ~ .dashboard-state-new .view-mode:nth-of-type(2) {
    display: block;
}

.content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode:not(:only-child):not(.show-mode) {
    display: none;
}

@media only screen and (min-width: 768px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-grid {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-grid {
        margin-bottom: 20px;
    }
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-grid
    .course-section-card
    .course-section-card-text
    .counter {
    font-weight: 600;
    color: #757575;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-grid
    .course-section-card
    .course-section-card-text
    .course-section-card-action {
    display: flex;
    justify-content: flex-end;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-grid
    .course-section-card
    .course-section-card-text
    .btn-primary-sm {
    height: 35px;
}

.content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-list {
    position: relative;
    margin-bottom: 40px;
}

@media only screen and (min-width: 992px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .view-mode
        .course-section-list
        > *:not(:first-child) {
        margin-top: 18px;
    }
}

@media only screen and (max-width: 992px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 18px;
    }
}

.content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-list .list-card {
    padding: 14px;
    background-color: #ffffff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    border-width: 1.5px;
    border-style: solid;
    border-color: transparent;
    transition: all 0.3s;
    transition-timing-function: linear;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card:hover {
    border-color: #322659;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text {
    max-width: 300px;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text
    > *:not(:first-child) {
    margin-top: 6px;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text
    .counter {
    font-weight: 600;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text
    .counter.has-list {
    display: flex;
    align-items: center;
    gap: 5px 15px;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text
    .normal-text:not(.counter) {
    margin-bottom: 20px;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .counter {
    font-weight: 600;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .counter.has-list {
    display: flex;
    align-items: center;
    gap: 5px 15px;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .counter.has-list
    b {
    margin-left: 4px;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .list-img {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    display: block;
    width: 100%;
    max-width: 400px;
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .view-mode
        .course-section-list
        .list-card
        .list-img {
        min-height: 180px;
    }
}

@media only screen and (max-width: 500px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .view-mode
        .course-section-list
        .list-card
        .list-img {
        min-height: 150px;
    }
}

@media only screen and (max-width: 768px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .view-mode
        .course-section-list
        .list-card
        .list-img {
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .view-mode
    .course-section-list
    .list-card
    .btn-primary-sm {
    height: 36px;
    line-height: 36px;
    white-space: nowrap;
    padding-left: 25px;
    padding-right: 25px;
}

@media only screen and (min-width: 768px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .view-mode
        .course-section-list
        .list-card
        .btn-primary-sm.has-possition {
        position: absolute;
        top: 50%;
        right: 20px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-list .list-card {
        width: calc(50% - 9px);
    }
}

@media only screen and (max-width: 768px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .view-mode .course-section-list .list-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 15px;
    }
}


@media only screen and (min-width: 768px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .view-mode
        .course-section-list
        .list-card
        > *:not(:first-child) {
        margin-left: 15px;
    }
}

.custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #10192d;
    z-index: 4;
}

.custom-overlay:not(.active) {
    display: none;
}

.overflow-hidden {
    overflow: hidden;
}

.inbox-popup .notifaction-header {
    border-style: solid;
    border-color: #ece7ff;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    margin-bottom: 15px;
}

.inbox-popup .allow-desktop-chats .allow-desktop-chat {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0 !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-top-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
}

.inbox-popup .allow-desktop-chats .allow-desktop-chat .normal-text {
    margin-left: 15px !important;
}

.inbox-popup .allow-desktop-chats .allow-desktop-chat .normal-text .message-sender-details {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.inbox-popup .allow-desktop-chats .allow-desktop-chat .normal-text .message-sender-details b {
    color: #10192d;
}

.inbox-popup .allow-desktop-chats .allow-desktop-chat .normal-text .message-sender-details ~ span {
    white-space: normal;
    color: #10192d;
}

.inbox-popup .allow-desktop-chats .allow-desktop-chat .normal-text .message-sender-details span {
    margin-left: 14px;
}

.inbox .allow-desktop-chat {
    margin-bottom: 0 !important;
    position: relative;
    transition: background-color 0.3s;
    transition-timing-function: linear;
    border-bottom-width: 1px !important;
}

.inbox .allow-desktop-chat:hover {
    background-color: #eff6fa;
}

.inbox .allow-desktop-chat .img {
    position: relative;
    margin-right: 5px;
    align-self: start;
}

@media only screen and (min-width: 500px) {
    .inbox .allow-desktop-chat .img .chat-profile {
        width: 45px;
        height: 45px;
    }
}

.inbox .allow-desktop-chat p.normal-text span {
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inbox .allow-desktop-chat p.normal-text .name {
    color: #10192d;
}

.inbox .allow-desktop-chat div.normal-text {
    min-height: 40px;
}

.inbox .allow-desktop-chat div.normal-text .time {
    color: #526275;
}

.inbox .allow-desktop-chat div.normal-text .not-counter {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #322659;
    margin: 3px 0 0 auto;
}

.inbox .allow-desktop-chat:not(:hover) .hover-menu {
    opacity: 0;
    filter: alpha(opacity=0);
    pointer-events: none;
}

.inbox .allow-desktop-chat .hover-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 86px;
    height: 90%;
    padding-right: 20px;
    background-color: #eff6fa;
    position: absolute;
    top: 50%;
    right: 0px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: opacity 0.3s;
    transition-timing-function: linear;
    opacity: 1;
    filter: alpha(opacity=100);
    pointer-events: all;
    z-index: 2;
}

.inbox .allow-desktop-chat .hover-menu .dropdown {
    width: fit-content;
}

.inbox .allow-desktop-chat .hover-menu .dropdown .dropdown-menu {
    margin-left: 0 !important;
    right: 0 !important;
}

.status {
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1px;
    bottom: 3px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #36b37e;
}

.status .offline {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #ffffff;
}

.members-card {
    display: flex;
    justify-content: space-between !important;
    width: 100%;
}

.members-card .members-card-left {
    display: flex;
    justify-content: flex-start;
}

@media only screen and (min-width: 768px) {
    .members-card .members-card-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .members-card .members-card-left > *:not(:first-child) {
        margin-left: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .members-card .members-card-left {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .members-card .members-card-left > *:not(:first-child) {
        margin-top: 15px;
    }
}

.members-card .members-card-left .profile-picture {
    width: 62px;
    height: 62px;
    position: relative;
    overflow: hidden;
}

.members-card .members-card-left .profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    overflow: hidden;
}

.members-card .members-card-left .text-content .location {
    font-size: 10.8px;
    font-weight: 500;
    color: #9a9ea6;
}

.members-card .dropdown {
    display: flex;
    justify-content: flex-end;
}

@media only screen and (min-width: 768px) {
    .members-card .dropdown {
        max-width: 200px;
    }
}

@media only screen and (max-width: 768px) {
    .members-card .dropdown {
        max-width: fit-content;
    }

    .members-card .dropdown .dropdown-menu {
        margin-top: 0px;
        margin-bottom: 6px;
        top: unset;
        bottom: 100%;
    }
}

.members-card .dropdown .dropdown-toggle {
    min-width: 40px;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .members-card .dropdown .dropdown-toggle {
        text-align: center;
    }
}

@media only screen and (max-width: 768px) {
    .members-card .dropdown .dropdown-toggle {
        text-align: right;
    }
}

.chat-text-editor {
    padding: 20px;
    margin-top: auto;
    border-style: solid;
    border-color: #322659;
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
}

.chat-text-editor .chat-text-editor-inner {
    background-color: #f5f6fa;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: relative;
}

.chat-text-editor .chat-text-editor-inner .qeditor-container {
    background-color: transparent;
    border-width: 0 !important;
}

.chat-text-editor .chat-text-editor-inner .ql-toolbar {
    background-color: transparent;
    padding-bottom: 10px;
}

.chat-text-editor .chat-text-editor-inner .ql-toolbar .ql-image use {
    -webkit-transform: translate(6px, 6px);
    -moz-transform: translate(6px, 6px);
    -ms-transform: translate(6px, 6px);
    -o-transform: translate(6px, 6px);
    transform: translate(6px, 6px);
}

.chat-text-editor .chat-text-editor-inner .btn-primary-sm {
    min-width: 80px;
    position: absolute;
    right: 10px;
    bottom: 7px;
}

.new-msg-container.custom-editor {
    position: inherit;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    z-index: 0;
    padding: 0px;
    width: 100%;
    max-width: 100%;
    min-width: fit-content;
    height: fit-content;
}

.new-msg-container.custom-editor .new-msg {
    width: 100%;
    height: 100%;
}

.new-msg-container.custom-editor .new-msg .nm-content {
    max-height: 50px;
}

.Input-rounded {
    border-radius: 24px !important;
    -webkit-border-radius: 24px !important;
    -moz-border-radius: 24px !important;
    -ms-border-radius: 24px !important;
    -o-border-radius: 24px !important;
}

.new-chat-wrapper:not(.active) {
    display: none;
}

.new-chat-wrapper .new-msg {
    width: 100%;
    max-width: 580px;
}

.new-chat-wrapper .ql-image use {
    -webkit-transform: translate(6px, 6px);
    -moz-transform: translate(6px, 6px);
    -ms-transform: translate(6px, 6px);
    -o-transform: translate(6px, 6px);
    transform: translate(6px, 6px);
}

.new-chat-wrapper .modal-close.modal-close-n {
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-chat-wrapper .modal-close.modal-close-n div {
    margin-top: 3px !important;
}

.new-chat-wrapper .ql-main {
    padding: 15px;
    position: relative;
}

.new-chat-wrapper .ql-main .ql-toolbar {
    background-color: #322659;
    padding-left: 108px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.new-chat-wrapper .ql-main .new-msg-footer {
    position: absolute;
    left: 27px;
    bottom: 22px;
    padding: 0;
}

.new-chat-wrapper .ql-main .new-msg-footer .dashboard-compose {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 23px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    background-color: #322659;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.current-plan-details {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-radius: 11px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    padding: 0px 20px;
    height: 45px;
    width: 100%;
    max-width: fit-content;
    font-size: 14px;
    font-weight: 500;
    line-height: 45px;
    color: #322659;
    background-color: #ece7ff;
}

.product-searchBar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.product-searchBar-right > *:not(:first-child) {
    margin-left: 12px;
}

.cusotm-radio {
    position: relative;
    cursor: pointer;
}

.cusotm-radio input[type='radio'] {
    display: none;
}

.cusotm-radio input[type='radio']:not(:checked) ~ .cusotm-radio-inner .radioMain {
    border-color: #d1d3db;
}

.cusotm-radio input[type='radio']:not(:checked) ~ .cusotm-radio-inner .normal-text {
    color: #526275;
}

.cusotm-radio input[type='radio']:checked ~ .cusotm-radio-inner .radioMain {
    border-color: #322659;
}

.cusotm-radio input[type='radio']:checked ~ .cusotm-radio-inner .radioMain::before {
    opacity: 1;
    filter: alpha(opacity=100);
}

.cusotm-radio input[type='radio']:checked ~ .cusotm-radio-inner .normal-text {
    color: #10192d;
}

.cusotm-radio .cusotm-radio-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cusotm-radio .cusotm-radio-inner > *:not(:first-child) {
    margin-left: 8px;
}

.cusotm-radio .cusotm-radio-inner .radioMain {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    position: relative;
}

.cusotm-radio .cusotm-radio-inner .radioMain::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #322659;
    transition: all 0.3s;
    transition-timing-function: linear;
    opacity: 0;
    filter: alpha(opacity=0);
}

.course-section-card.has_border.choose-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 30px 20px;
}

.course-section-card.has_border.choose-plan:nth-child(even) .plan-head img {
    margin-top: -6px;
    margin-bottom: -5px;
}

.course-section-card.has_border.choose-plan .plan-head {
    min-height: 130px;
}

.course-section-card.has_border.choose-plan .plan-head h3.title {
    color: #322659;
    font-weight: 600;
    margin: 10px 0 10px;
}

.course-section-card.has_border.choose-plan .plan-head .price {
    font-weight: 700;
}

.course-section-card.has_border.choose-plan .plan-head .price span.title {
    color: #526275;
    font-weight: 400;
    padding-left: 3px;
}

.course-section-card.has_border.choose-plan .plan-body {
    position: relative;
    padding: 18px 0 25px;
}

.course-section-card.has_border.choose-plan .plan-body ul > *:not(:first-child) {
    margin-top: 20px;
}

.course-section-card.has_border.choose-plan .plan-body ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.course-section-card.has_border.choose-plan .plan-body ul li > *:not(:first-child) {
    margin-left: 12px;
}

.course-section-card.has_border.choose-plan .plan-body ul li img {
    width: 23px;
}

.course-section-card.has_border.choose-plan .plan-body ul li .title {
    color: #526275;
    font-weight: 400;
}

.course-section-card.has_border.choose-plan .plan-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

.course-section-card.has_border.choose-plan .plan-footer > *:not(:first-child) {
    margin-top: 14px;
}

.course-section-card.has_border.choose-plan .plan-footer .normal-text {
    color: #322659;
}

.course-section-card.has_border.choose-plan .plan-footer .btn-primary-sm {
    height: 36px;
    padding-left: 23px;
    padding-right: 23px;
}

.course-section-card.has_border.choose-plan .current-plan {
    padding: 3px 30px;
    height: 30px;
    width: 170px;
    -webkit-transform: rotate(45deg) translate(51px, -16px);
    -moz-transform: rotate(45deg) translate(51px, -16px);
    -ms-transform: rotate(45deg) translate(51px, -16px);
    -o-transform: rotate(45deg) translate(51px, -16px);
    transform: rotate(45deg) translate(51px, -16px);
    font-size: 12px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #019fa9;
    position: absolute;
    top: 0;
    right: 0;
}

.curriculum-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #10192d;
    z-index: 4;
}

.curriculum-popup-overlay:not(.active) {
    display: none;
}

.curriculum-popup .curriculum-popup-inner {
    position: relative;
    padding-top: 25px;
    padding-bottom: 25px;
}

.curriculum-popup .curriculum-popup-inner .close-curriculum-popup {
    position: absolute;
    z-index: 3;
}

@media only screen and (min-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .close-curriculum-popup {
        top: 20px;
        right: 18px;
    }
}

@media only screen and (max-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .close-curriculum-popup {
        top: 9px;
        right: 9px;
        width: 16px;
        height: 16px;
    }
}

@media only screen and (min-width: 768px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-head {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .curriculum-popup .curriculum-popup-inner .curriculum-head > *:not(:first-child) {
        margin-top: 10px;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-head .btn-toggle-state {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    height: 31px;
    min-width: 150px;
    padding: 3px 12px;
    font-size: 12.8px;
    font-weight: 400;
    color: #ffffff;
    background-color: #322659;
}

.curriculum-popup .curriculum-popup-inner .curriculum-head .btn-toggle-state img {
    margin-right: 4px;
}

.curriculum-popup .curriculum-popup-inner .curriculum-content {
    margin-top: 20px;
    overflow: visible auto;
}

@media only screen and (min-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
}

@media only screen and (min-width: 768px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content {
        height: 88%;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content {
        height: 75%;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar {
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

@media only screen and (min-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar {
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 360px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar {
        padding: 0 20px 20px;
    }
}

@media only screen and (max-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar {
        width: 100%;
        max-width: 100%;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar .curriculum-sidebar-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar .curriculum-sidebar-header .title {
    font-weight: 700;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-header
    .btn-primary-sm {
    height: 36px;
    color: #322659;
    background-color: #ece7ff;
    border-color: #ece7ff;
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-sidebar .curriculum-sidebar-tabs {
    margin-top: 15px;
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab {
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab:not(.active) {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn {
    width: 100%;
    padding: 12px 15px;
    color: #757575;
    background-color: #f6faff;
    border-style: solid;
    border-color: rgba(142, 155, 174, 0.2);
    border-top-width: 1px;
    border-bottom-width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn
    > *:not(:first-child) {
    margin-left: 8px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn
    span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media only screen and (min-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-btn
        span {
        font-size: 15px;
        font-weight: 400;
    }
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-btn
        span {
        font-size: 12px;
        font-weight: 400;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn
    .text-with-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn
    .text-with-flex
    .main-text {
    width: 100%;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn
    .text-with-flex
    .with-icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-btn
    .text-with-flex
    .with-icon
    img {
    margin-right: 6px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body {
    position: relative;
    overflow: hidden;
    transition: height 0.35s;
    transition-timing-function: linear;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body:not(.activeMenu) {
    height: 0;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content {
    padding: 20px 15px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-body
        .curriculum-tab-body-content
        ul
        > *:not(:first-child) {
        margin-top: 18px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-body
        .curriculum-tab-body-content
        ul
        > *:not(:first-child) {
        margin-top: 13px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content
    ul
    li
    .sideBar-tab-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.activeQuiz {
    background: #f6faff !important;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content
    ul
    li
    .sideBar-tab-btn
    div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: color 0.3s;
    transition-timing-function: linear;
    max-width: 240px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-body
        .curriculum-tab-body-content
        ul
        li
        .sideBar-tab-btn
        div {
        font-size: 13px;
        font-weight: 400;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-body
        .curriculum-tab-body-content
        ul
        li
        .sideBar-tab-btn
        div {
        font-size: 11px;
        font-weight: 400;
    }

    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-body
        .curriculum-tab-body-content
        ul
        li
        .sideBar-tab-btn
        div
        svg,
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-sidebar
        .curriculum-sidebar-tabs
        .curriculum-sidebar-tab
        .curriculum-sidebar-tab-body
        .curriculum-tab-body-content
        ul
        li
        .sideBar-tab-btn
        div
        ~ img {
        width: 13px;
        height: 13px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content
    ul
    li
    .sideBar-tab-btn
    div
    > *:not(:first-child) {
    margin-left: 9px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content
    ul
    li
    .sideBar-tab-btn
    div
    span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content
    ul
    li
    .sideBar-tab-btn:not(.active)
    div {
    color: #322659;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-sidebar
    .curriculum-sidebar-tabs
    .curriculum-sidebar-tab
    .curriculum-sidebar-tab-body
    .curriculum-tab-body-content
    ul
    li
    .sideBar-tab-btn.active
    div {
    color: #322659;
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper:not(.completed)
    .curriculum-wrapper-incomplete {
    display: block;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper:not(.completed)
    .curriculum-wrapper-complete {
    display: none;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper.completed
    .curriculum-wrapper-incomplete {
    display: none;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper.completed
    .curriculum-wrapper-complete {
    display: block;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-complete
    .curriculum-complete-inner {
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    background-color: #ffffff;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-complete
    .curriculum-complete-inner
    > *:not(:first-child) {
    margin-top: 15px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner {
        padding: 20px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-complete
    .curriculum-complete-inner
    .curriculum-complete-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0.2%, rgba(215, 241, 255, 0.39) 100%);
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner
        .curriculum-complete-content {
        min-height: 410px;
        padding: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner
        .curriculum-complete-content {
        min-height: 300px;
        padding: 15px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-complete
    .curriculum-complete-inner
    .curriculum-complete-content
    .card-actions {
    margin-top: 18px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner
        .curriculum-complete-content
        .card-actions {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner
        .curriculum-complete-content
        .card-actions
        > *:not(:first-child) {
        margin-left: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner
        .curriculum-complete-content
        .card-actions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-complete
        .curriculum-complete-inner
        .curriculum-complete-content
        .card-actions
        > *:not(:first-child) {
        margin-top: 10px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-complete
    .curriculum-complete-inner
    .curriculum-complete-content
    .card-actions
    .btn-primary {
    height: 44px;
    min-width: 146px;
    line-height: 40px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-complete
    .curriculum-complete-inner
    .curriculum-complete-content
    .card-actions
    .btn-primary.outline {
    color: #322659;
    background-color: #cdecfd;
    border-color: #322659;
}

@media only screen and (min-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper {
        padding-left: 25px;
    }
}

@media only screen and (max-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper {
        padding-top: 25px;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper .curriculum-wrapper-card {
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    background-color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    > *:not(:first-child) {
    margin-top: 15px;
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper .curriculum-wrapper-card.main-card {
    padding-bottom: 25px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card {
        min-height: 500px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card {
        min-height: 300px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .main-heading
    .title {
    color: #13ab73;
    font-weight: 800;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .main-heading
        .title {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .main-heading
        .title {
        display: block;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper {
    margin-top: 20px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    > *:not(:first-child) {
    margin-top: 20px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item {
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    .title {
    font-weight: 700;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    ul {
    margin-top: 15px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    ul
    > *:not(:first-child) {
    margin-top: 12px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    form {
    margin-top: 10px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    form
    > *:not(:first-child) {
    margin-top: 15px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    form
    textarea.form-control {
    color: #322659;
    background-color: #f2f2f2;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    form
    .btn-primary-sm {
    min-height: 36px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    .quiz-pagination-wrapper {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .quiz-wrapper
        .quiz-item
        .quiz-pagination-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .quiz-wrapper
        .quiz-item
        .quiz-pagination-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .quiz-wrapper
        .quiz-item
        .quiz-pagination-wrapper
        > *:not(:first-child) {
        margin-top: 10px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    .quiz-pagination-wrapper
    form {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .quiz-wrapper
        .quiz-item
        .quiz-pagination-wrapper
        form {
        width: 100%;
        max-width: 60%;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .quiz-wrapper
        .quiz-item
        .quiz-pagination-wrapper
        form {
        width: 100%;
        max-width: 100%;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    .quiz-img {
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card.quiz-wrapper-outer
    .quiz-wrapper
    .quiz-item
    .quiz-img
    img {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card.quiz-wrapper-outer
        .quiz-wrapper
        .quiz-item
        .quiz-img
        img {
        min-height: 120px;
        object-fit: cover;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card
    .next-quiz-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card
        .next-quiz-btn {
        width: 160;
        height: 40px;
        font-size: 14px;
        font-weight: 500;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card
        .next-quiz-btn {
        width: 120px;
        height: 36px;
        margin-left: auto;
        font-size: 13px;
        font-weight: 500;
    }

    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card.main-card
        .next-quiz-btn
        img {
        height: 12px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card
    .next-quiz-btn:not(.success) {
    color: #ffffff;
    background-color: #becadc;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card
    .next-quiz-btn.success {
    color: #ffffff;
    background-color: #13ab73;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.main-card
    .next-quiz-btn
    img {
    margin-left: 7px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card.side-bar-content:not(.show) {
    display: none;
}

@media only screen and (min-width: 992px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper .curriculum-wrapper-card {
        padding: 20px 20px 30px;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper .curriculum-wrapper-card .video {
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .video
    .overlay {
    background-color: #10192d;
    position: relative;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    overflow: hidden;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .video
    .overlay
    .overlay-img {
    width: 100%;
    display: block;
    object-fit: cover;
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .video
        .overlay
        .overlay-img {
        min-height: 250px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .video
    .overlay
    .overlay-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .video
    .overlay
    .overlay-btn
    .video-btn-icn {
    position: absolute;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr {
    position: relative;
    margin: 20px 0;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    > *:not(:first-child) {
    margin-top: 10px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    h1,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    h2,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    h3,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    h4,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    h5,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    h6,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    p,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    ul,
.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .html-previewr
    ol {
    font-size: revert;
    font-weight: revert;
    color: #10192d;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .pdf-content {
    margin-top: 25px;
    width: 100%;
    max-width: 270px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .pdf-content
    > *:not(:first-child) {
    margin-top: 18px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .pdf-content
    li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .pdf-content
    li
    .document {
    margin-right: 10px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .pdf-content
    li
    button {
    margin-left: auto;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass {
        margin-top: 0px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head {
    background: linear-gradient(180deg, #fff 0%, rgba(215, 241, 255, 0.29) 100%);
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-head {
        padding: 20px;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-head {
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        padding: 14px 0 14px 14px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .quiz-prgrass-head-main {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .quiz-prgrass-head-main
    .normal-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .quiz-prgrass-head-main
    .normal-text
    img {
    margin-right: 6px;
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-head
        .quiz-prgrass-head-main
        .normal-text
        ~ .normal-text {
        font-size: 0px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .main-heading {
    color: #13ab73;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .main-heading
    .title {
    margin-left: 5px;
    font-weight: 700;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .main-heading
    .text-black {
    margin-left: 5px;
    color: #10192d;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .progress-statistics {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media only screen and (min-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-head
        .progress-statistics
        > *:not(:first-child) {
        margin-left: 27px;
    }
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-head
        .progress-statistics {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-head
        .progress-statistics
        > *:not(:first-child) {
        margin-top: 4px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .progress-statistics
    .statistics-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .progress-statistics
    .statistics-item
    > *:not(:first-child) {
    margin-left: 6px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-head
    .progress-statistics
    .statistics-item
    span.normal-text {
    font-weight: 700;
    color: #10192d;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-body {
        margin-top: 25px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-body {
        margin-top: 17px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body
    .title {
    color: #757575;
    font-weight: 500;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-body
        .quiz-prgrass-grid {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 20px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-body
        .quiz-prgrass-grid {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px 20px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body
    .quiz-prgrass-grid
    .quiz-prgrass-item {
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body
    .quiz-prgrass-grid
    .quiz-prgrass-item
    button {
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #757575;
    font-weight: 600;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body
    .quiz-prgrass-grid
    .quiz-prgrass-item
    button
    span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: 15px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body
    .quiz-prgrass-grid
    .quiz-prgrass-item
    button
    div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}

@media only screen and (min-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-body
        .quiz-prgrass-grid
        .quiz-prgrass-item
        button
        div
        img {
        margin-left: 13px;
    }
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-wrapper-card
        .quiz-prgrass
        .quiz-prgrass-body
        .quiz-prgrass-grid
        .quiz-prgrass-item
        button
        div
        img {
        margin-left: 7px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-wrapper-card
    .quiz-prgrass
    .quiz-prgrass-body
    .quiz-prgrass-grid
    .quiz-prgrass-item
    .quiz-prgrass-item-body {
    padding: 0 15px 15px;
}

@media only screen and (max-width: 768px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper #sideBarMenu6 {
        padding-bottom: 0 !important;
        box-shadow: none !important;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper #sideBarMenu7 {
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu7
    .pdf-previewr
    .next-quiz-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper #sideBarMenu8 .quiz-prgrass-head {
        padding-bottom: 15px;
    }
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .quiz-prgrass-head
    .quiz-prgrass-head-main {
    margin-bottom: 0;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid {
    width: 100%;
    max-width: 350px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    > *:not(:first-child) {
    margin-top: 23px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    .assignments-submission-item {
    position: relative;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    .assignments-submission-item
    > *:not(:first-child) {
    margin-top: 10px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    .assignments-submission-item
    .title {
    color: #757575;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    .assignments-submission-item
    .card {
    min-height: 48px;
    width: 100%;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: #f8faff;
    padding: 5px 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    .assignments-submission-item
    .card
    span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: 20px;
    margin-left: 8px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    #sideBarMenu8
    .assignments-submission-grid
    .assignments-submission-item
    .card
    button {
    margin-left: auto;
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper .curriculum-pagination {
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 15px;
    margin-top: 20px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-pagination
    > *:not(:first-child) {
    margin-left: 15px;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-pagination
    .curriculum-pagination-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #10192d;
}

.curriculum-popup
    .curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .curriculum-pagination
    .curriculum-pagination-btn.active {
    color: #322659;
}

@media only screen and (max-width: 500px) {
    .curriculum-popup
        .curriculum-popup-inner
        .curriculum-content
        .curriculum-wrapper
        .curriculum-pagination
        .curriculum-pagination-btn
        span {
        display: none;
    }
}

.curriculum-popup .curriculum-popup-inner .curriculum-content .curriculum-wrapper .curriculum-wrapper-comments {
    margin-top: 25px;
}

.curriculum-popup .course-certifactie {
    z-index: 2;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup .course-certifactie .close-curriculum-popup {
        top: 28px;
    }
}

.curriculum-popup .course-certifactie.curriculum-popup-inner .curriculum-content {
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
}

.curriculum-popup .course-certifactie.curriculum-popup-inner .curriculum-content .curriculum-wrapper {
    padding-left: 0;
}

.curriculum-popup
    .course-certifactie.curriculum-popup-inner
    .curriculum-content
    .curriculum-wrapper
    .course-certificate-main {
    display: flex;
    justify-content: center;
}

.curriculum-popup .course-certifactie .certificate-wrapper {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 0 20px 20px;
}

.curriculum-popup .course-certifactie .certificate-wrapper > *:not(:first-child) {
    margin-top: 20px;
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card {
    position: relative;
    margin-bottom: 40px;
}

@media only screen and (min-width: 992px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card > *:not(:first-child) {
        margin-top: 18px;
    }
}

@media only screen and (max-width: 992px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 18px;
    }
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card {
    padding: 14px;
    background-color: #ffffff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    border-width: 1.5px;
    border-style: solid;
    border-color: transparent;
    transition: all 0.3s;
    transition-timing-function: linear;
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card:hover {
    border-color: #322659;
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-card-text {
    max-width: 300px;
}

.curriculum-popup
    .course-certifactie
    .certificate-wrapper
    .certificate-card
    .list-card
    .list-card-text
    > *:not(:first-child) {
    margin-top: 6px;
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-card-text .counter {
    font-weight: 600;
}

.curriculum-popup
    .course-certifactie
    .certificate-wrapper
    .certificate-card
    .list-card
    .list-card-text
    .counter.has-list {
    display: flex;
    align-items: center;
    gap: 5px 15px;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.curriculum-popup
    .course-certifactie
    .certificate-wrapper
    .certificate-card
    .list-card
    .list-card-text
    .normal-text:not(.counter) {
    margin-bottom: 20px;
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-card-text-outer .counter {
    font-weight: 600;
}

.curriculum-popup
    .course-certifactie
    .certificate-wrapper
    .certificate-card
    .list-card
    .list-card-text-outer
    .counter.has-list {
    display: flex;
    align-items: center;
    gap: 5px 15px;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.curriculum-popup
    .course-certifactie
    .certificate-wrapper
    .certificate-card
    .list-card
    .list-card-text-outer
    .counter.has-list
    b {
    margin-left: 4px;
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-img {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    display: block;
    width: 100%;
    max-width: 400px;
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-img {
        min-height: 180px;
    }
}

@media only screen and (max-width: 500px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-img {
        min-height: 150px;
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .list-img {
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
}

.curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card .btn-primary-sm {
    height: 36px;
    line-height: 36px;
    white-space: nowrap;
    padding-left: 25px;
    padding-right: 25px;
}

@media only screen and (min-width: 768px) {
    .curriculum-popup
        .course-certifactie
        .certificate-wrapper
        .certificate-card
        .list-card
        .btn-primary-sm.has-possition {
        position: absolute;
        top: 50%;
        right: 20px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card {
        width: calc(50% - 9px);
    }
}

@media only screen and (max-width: 768px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 15px;
    }
}

@media only screen and (min-width: 768px) {
    .curriculum-popup .course-certifactie .certificate-wrapper .certificate-card .list-card > *:not(:first-child) {
        margin-left: 15px;
    }
}

@media only screen and (min-width: 768px) {
    .space-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: start;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: start;
    }
}

.space-wrapper .space-wrapper-left {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .space-wrapper .space-wrapper-left {
        width: 100%;
        max-width: 65%;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper .space-wrapper-left {
        width: 100%;
        max-width: 100%;
    }
}

.space-wrapper .space-wrapper-left.has-shadow {
    box-shadow: 2px 24px 24px -6px rgba(0, 0, 0, 0.03);
    padding: 0 15px;
    border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    -o-border-radius: 0 0 8px 8px;
    overflow: hidden;
    padding: 20px;
}

.space-wrapper .space-wrapper-left .space-wrapper-head {
    position: relative;
    padding: 20px 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #f0f2f4;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (min-width: 992px) {
    .space-wrapper .space-wrapper-left .space-wrapper-head {
        width: 100%;
        height: 70px;
    }
}

@media only screen and (max-width: 992px) {
    .space-wrapper .space-wrapper-left .space-wrapper-head {
        width: 100%;
        height: 50px;
    }
}

.space-wrapper .space-wrapper-left .space-wrapper-head input {
    align-self: stretch;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

@media only screen and (max-width: 500px) {
    .space-wrapper .space-wrapper-left .space-wrapper-head input {
        font-size: 12px;
    }
}

.space-wrapper .space-wrapper-left .space-wrapper-head .add-space-btn {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #322659;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 992px) {
    .space-wrapper .space-wrapper-left .space-wrapper-head .add-space-btn {
        width: 32px;
        height: 32px;
    }
}

@media only screen and (max-width: 992px) {
    .space-wrapper .space-wrapper-left .space-wrapper-head .add-space-btn {
        width: 25px;
        height: 25px;
    }

    .space-wrapper .space-wrapper-left .space-wrapper-head .add-space-btn img {
        width: 15px;
        height: 15px;
    }
}

.space-wrapper .space-wrapper-left .space-wrapper-body {
    position: relative;
}

.space-wrapper .space-wrapper-left .space-wrapper-body:not(.active) .no-content {
    display: block;
}

.space-wrapper .space-wrapper-left .space-wrapper-body:not(.active) .has-content {
    display: none;
}

.space-wrapper .space-wrapper-left .space-wrapper-body.active .no-content {
    display: none;
}

.space-wrapper .space-wrapper-left .space-wrapper-body.active .has-content {
    display: block;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .no-content {
    margin-top: 30px;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .no-content .no-content-inner {
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .space-wrapper .space-wrapper-left .space-wrapper-body .no-content .no-content-inner {
        min-height: 400px;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper .space-wrapper-left .space-wrapper-body .no-content .no-content-inner {
        min-height: 300px;
    }
}

.space-wrapper .space-wrapper-left .space-wrapper-body .no-content .no-content-inner > *:not(:first-child) {
    margin-top: 15px;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .has-content {
    padding: 20px 0px;
    min-height: 450px;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .has-content .has-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .has-content .has-content-head .dropdown-popup-header {
    width: fit-content;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-head
    .dropdown-popup-header
    .dropdown-toggle {
    min-width: 30px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-head
    .dropdown-popup-header
    .dropdown-menu {
    margin-left: 0px;
    left: unset !important;
    right: 0 !important;
    min-width: 180px;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .has-content .has-content-body {
    position: relative;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .has-content .has-content-body .space-featured-post {
    width: 100%;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .post-aurthor {
    margin: 20px 0 18px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .post-aurthor
    .aurthor-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .post-aurthor
    .aurthor-img
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .post-aurthor
    .aurthor-details {
    margin-left: 10px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .post-aurthor
    .aurthor-details
    .title {
    font-size: 14px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .post-aurthor
    .aurthor-details
    .normal-text {
    font-size: 12px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-featured-post
    .space-featured-img {
    width: 100%;
    margin-top: 20px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.space-wrapper .space-wrapper-left .space-wrapper-body .has-content .has-content-body .space-post-comments {
    position: relative;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-head {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-head
        .actions
        > *:not(:first-child) {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 400px) and (max-width: 768px) {
    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-head
        .actions
        > *:not(:first-child) {
        margin-left: 6px;
    }

    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-head
        .actions
        img {
        width: 15px;
    }
}

@media only screen and (max-width: 400px) {
    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-head
        .actions {
        position: absolute;
        top: 50%;
        right: 13px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #ffffff;
    }

    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-head
        .actions
        > *:not(:first-child) {
        margin-left: 4px;
    }

    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-head
        .actions
        img {
        width: 12px;
    }
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body {
    margin-top: 25px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body
    > *:not(:first-child) {
    margin-top: 20px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body
    .wrapper-comments-item {
    border: none !important;
    padding: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: #f9f9f9;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body
    .wrapper-comments-item
    .comments-text
    .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body
    .wrapper-comments-item
    .comments-text
    .normal-text {
    max-width: 400px;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body
    .reaction-wrapper {
    padding-bottom: 0 !important;
    border: none !important;
}

.space-wrapper
    .space-wrapper-left
    .space-wrapper-body
    .has-content
    .has-content-body
    .space-post-comments
    .wrapper-comments-main
    .wrapper-comments-body
    .wrapper-comments-head {
    background-color: #ffffff;
    border-color: transparent;
    margin-top: 20px;
    min-height: unset;
    padding: 10px 13px;
}

@media only screen and (min-width: 768px) {
    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-body
        .wrapper-comments-head
        .img {
        width: 34px;
        height: 34px;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper
        .space-wrapper-left
        .space-wrapper-body
        .has-content
        .has-content-body
        .space-post-comments
        .wrapper-comments-main
        .wrapper-comments-body
        .wrapper-comments-head
        .img {
        width: 26px;
        height: 26px;
    }
}

@media only screen and (min-width: 768px) {
    .space-wrapper .space-wrapper-right {
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        padding-left: 25px;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper .space-wrapper-right {
        padding-bottom: 20px;
    }
}

.space-wrapper .space-wrapper-right > *:not(:first-child) {
    margin-top: 20px;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item {
    background-color: #ffffff;
    position: relative;
    box-shadow: 0 0 18px 2px rgba(13, 46, 97, 0.05);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    display: block;
    overflow: hidden;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-img {
    position: relative;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-img img {
    display: block;
    width: 100%;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media only screen and (min-width: 768px) {
    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text {
        padding: 15px 20px 0;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text {
        padding: 15px 13px 0;
    }
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .head > *:not(:first-child) {
    margin-top: 5px;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .head .title {
    font-weight: 700;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .item-grid .item-grid-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 8px;
    line-height: 1;
}

.space-wrapper
    .space-wrapper-right
    .space-wrapper-right-item
    .item-text
    .item-grid
    .item-grid-card
    > *:not(:first-child) {
    margin-top: 4px;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .item-grid .item-grid-card:nth-of-type(2) {
    border-style: solid;
    border-color: #322659;
    border-top-width: 0;
    border-right-width: 1px;
    border-bottom-width: 0;
    border-left-width: 1px;
}

@media only screen and (min-width: 768px) {
    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .members-images {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .members-images > *:not(:first-child) {
        margin-left: 5px;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .members-images {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .members-images img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #d2d0d0;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .chat-now-btn {
    padding: 5px 15px;
    width: calc(100% + 40px);
    height: 40px;
    color: #322659;
    background-color: #ece7ff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 768px) {
    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .chat-now-btn {
        margin-left: -20px;
        margin-right: -20px;
    }
}

@media only screen and (max-width: 768px) {
    .space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .chat-now-btn {
        margin-left: -13px;
        margin-right: -13px;
    }
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .chat-now-btn > *:not(:first-child) {
    margin-left: 6px;
}

.space-wrapper .space-wrapper-right .space-wrapper-right-item .item-text .chat-now-btn img {
    width: 16px;
}

.space-wrapper .space-wrapper-right .tranding-wrapper > *:not(:first-child) {
    margin-top: 12px;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .title {
    padding: 12px 15px 0;
    font-weight: 700;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards {
    position: relative;
    padding: 0px 8px;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card {
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card:not(:last-child) {
    border-style: solid;
    border-color: #dfe2e5;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card .tranding-card-img {
    width: 38px;
    height: 38px;
    position: relative;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card .tranding-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card .tranding-card-text {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    padding-left: 20px;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card .tranding-card-text h3 {
    font-size: 12px;
    font-weight: 600;
    color: #10192d;
    line-height: 1.3;
}

.space-wrapper .space-wrapper-right .tranding-wrapper .tranding-cards .tranding-card .tranding-card-text .normal-text {
    font-size: 10px;
}

.create-post-wrapper {
    position: relative;
}

.create-post-wrapper:not(.active) {
    display: none;
}

.create-post-wrapper .create-post-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: #10192d;
}

.create-post-wrapper .new-msg-container {
    top: 50%;
    left: 50%;
    right: unset;
    bottom: unset;
    height: fit-content;
    min-height: 395px;
    width: 100%;
    max-width: 620px;
    padding: 20px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.create-post-wrapper .new-msg-container:not(.active) {
    display: none;
}

.create-post-wrapper .new-msg-container .new-msg {
    width: 100%;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading {
    align-items: flex-start;
    padding: 15px;
    border-width: 0;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header {
    width: fit-content;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-toggle {
    cursor: pointer;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-profile {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-profile .img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    padding: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #10192d;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-profile .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-profile .data {
    margin-left: 15px;
}

.create-post-wrapper
    .new-msg-container
    .new-msg-header
    .nm-heading
    .dropdown-popup-header
    .dropdown-profile
    .data
    .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.create-post-wrapper
    .new-msg-container
    .new-msg-header
    .nm-heading
    .dropdown-popup-header
    .dropdown-profile
    .data
    .title
    img {
    margin-left: 5px;
}

.create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-menu {
    margin: 0;
    top: 51%;
    left: 88% !important;
    right: unset !important;
    min-width: 250px;
}

@media only screen and (min-width: 768px) {
    .create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-menu {
        left: 88% !important;
    }
}

@media only screen and (max-width: 768px) {
    .create-post-wrapper .new-msg-container .new-msg-header .nm-heading .dropdown-popup-header .dropdown-menu {
        left: 25% !important;
    }
}

.create-post-wrapper
    .new-msg-container
    .new-msg-header
    .nm-heading
    .dropdown-popup-header
    .dropdown-menu
    .header-profile-links
    > *:not(:first-child) {
    margin-top: 20px;
}

.create-post-wrapper .new-msg-container .ql-main .ql-actions-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media only screen and (min-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left > *:not(:first-child) {
        margin-left: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left > *:not(:first-child) {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left button {
        font-size: 10px;
    }
}

@media only screen and (min-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left button img {
        width: 23px;
        height: 23px;
    }
}

@media only screen and (max-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left button img {
        width: 18px;
        height: 18px;
    }
}

.create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .btn-primary {
    margin-left: 20px;
}

@media only screen and (min-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .btn-primary {
        height: 42px;
        line-height: 42px;
        min-width: 140px;
    }
}

@media only screen and (max-width: 768px) {
    .create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .btn-primary {
        height: 37px;
        line-height: 37px;
        min-width: 100px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.create-post-wrapper .new-msg-container .file-uploader-body {
    min-height: 300px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.create-post-wrapper .new-msg-container .file-uploader-body > *:not(:first-child) {
    margin-top: 12px;
}

.create-post-wrapper .new-msg-container .file-uploader-body .title.blueText {
    color: #322659;
}

.create-post-wrapper .new-msg-container .file-uploader-body .file-upload {
    width: 140px;
    height: 40px;
    color: #322659;
    background-color: #e4e5ec;
    line-height: 40px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.create-post-wrapper .new-msg-container .file-uploader-body .file-upload input {
    display: none;
}

.create-post-wrapper .new-msg-container .file-uploader-body .file-uploader-body-inner {
    margin-bottom: 7px;
}

.create-post-wrapper .new-msg-container .completed-post-wrapper {
    position: relative;
    padding: 0 20px;
}

@media only screen and (min-width: 768px) {
    .create-post-wrapper .new-msg-container .completed-post-wrapper .sub-heading {
        font-size: 18px;
    }
}

@media only screen and (max-width: 768px) {
    .create-post-wrapper .new-msg-container .completed-post-wrapper .sub-heading {
        font-size: 16px;
    }
}

.create-post-wrapper .new-msg-container .completed-post-wrapper .normal-text {
    margin-bottom: 10px;
}

.wrapper-comments-main {
    margin-top: 25px;
}

.wrapper-comments-main .wrapper-comments-head {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    border-color: #dfe2e5;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: hidden;
}

.wrapper-comments-main .wrapper-comments-head > *:not(:first-child) {
    margin-left: 10px;
}

@media only screen and (min-width: 768px) {
    .wrapper-comments-main .wrapper-comments-head {
        min-height: 60px;
    }
}

@media only screen and (min-width: 768px) {
    .wrapper-comments-main .wrapper-comments-head {
        padding: 10px 18px;
    }
}

@media only screen and (max-width: 768px) {
    .wrapper-comments-main .wrapper-comments-head {
        min-height: 40px;
        padding: 5px 8px;
    }
}

.wrapper-comments-main .wrapper-comments-head .img {
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.wrapper-comments-main .wrapper-comments-head .img img {
    display: block;
    width: 100%;
}

.wrapper-comments-main .wrapper-comments-head .normal-text {
    color: #10192d;
}

.wrapper-comments-main .wrapper-comments-head input {
    color: #10192d;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    padding: 0;
    border-width: 0 !important;
    align-self: stretch;
}

.wrapper-comments-main .wrapper-comments-body {
    position: relative;
    margin-top: 10px;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item {
    display: flex;
    justify-content: flex-start;
    align-items: start;
}

@media only screen and (min-width: 768px) {
    .wrapper-comments-main .wrapper-comments-body .wrapper-comments-item {
        padding: 20px 40px 15px;
        margin: 0 -20px;
    }
}

@media only screen and (max-width: 768px) {
    .wrapper-comments-main .wrapper-comments-body .wrapper-comments-item {
        padding: 15px 14px;
        margin-left: -10px;
    }
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item > *:not(:first-child) {
    margin-left: 10px;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item:not(:last-of-type) {
    border-style: solid;
    border-color: #f4f2f2;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-img {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-img img {
    width: 100%;
    height: 100%;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-text {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-text .title {
    margin-bottom: 4px;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-text .title .normal-text {
    margin-left: 8px;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-text .normal-text {
    color: #526275;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-text .comments-actions-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrapper-comments-main
    .wrapper-comments-body
    .wrapper-comments-item
    .comments-text
    .comments-actions-wrapper
    > *:not(:first-child) {
    margin-left: 20px;
}

.wrapper-comments-main .wrapper-comments-body .wrapper-comments-item .comments-text .comments-actions-wrapper button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrapper-comments-main
    .wrapper-comments-body
    .wrapper-comments-item
    .comments-text
    .comments-actions-wrapper
    button
    img {
    margin-right: 5px;
}

.reaction-wrapper {
    padding: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-style: solid;
    border-color: #e4e5ec;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

.reaction-wrapper > *:not(:first-child) {
    margin-left: 20px;
}

.reaction-wrapper .reaction-wrapper-item {
    overflow: visible;
}

.reaction-wrapper .reaction-wrapper-item .react-btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.reaction-wrapper .reaction-wrapper-item .react-btn > *:not(:first-child) {
    margin-left: 7px;
}

.reaction-wrapper .reaction-wrapper-item .reaction-items {
    height: 28px;
    padding: 8px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    position: absolute;
    z-index: 2;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
    background-color: #ffffff;
    -webkit-transform: translateY(-51px);
    -moz-transform: translateY(-51px);
    -ms-transform: translateY(-51px);
    -o-transform: translateY(-51px);
    transform: translateY(-51px);
}

.reaction-wrapper .reaction-wrapper-item .reaction-items > *:not(:first-child) {
    margin-left: 8px;
}

.reaction-wrapper .reaction-wrapper-item .reaction-items:not(.active) {
    display: none;
}

.reaction-wrapper .reaction-wrapper-item .reaction-items.active {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.reaction-wrapper .reaction-wrapper-item .reaction-items button img {
    transition: transform 0.18s;
    transition-timing-function: linear;
}

.reaction-wrapper .reaction-wrapper-item .reaction-items button:hover img {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.plan-detail-wrapper-outer {
    margin-top: 10px !important;
}

.plan-detail-wrapper-outer .plan-detail-wrapper {
    padding: 20px;
    border-radius: 11px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    background-color: #ffffff;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
}

.plan-detail-wrapper-outer .plan-detail-wrapper .title {
    font-weight: 600;
}

.plan-detail-wrapper-outer .plan-detail-wrapper .plan-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 30px;
    margin-top: 25px;
}

.plan-detail-wrapper-outer .plan-detail-wrapper .plan-detail-grid .plan-detail-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.plan-detail-wrapper-outer .plan-detail-wrapper .plan-detail-grid .plan-detail-item .plan-detail-item-img {
    width: 100%;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    overflow: hidden;
}

.plan-detail-wrapper-outer .plan-detail-wrapper .plan-detail-grid .plan-detail-item .plan-detail-item-img img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.plan-detail-wrapper-outer .plan-detail-wrapper .plan-detail-grid .plan-detail-item .normal-text {
    text-align: center;
    margin-top: 5px;
}

.plan-detail-wrapper-outer .plan-detail-wrapper .plan-detail-grid .plan-detail-item .course-section-card-action {
    display: flex;
    justify-content: flex-end;
}

.plan-detail-wrapper-outer
    .plan-detail-wrapper
    .course-section-grid
    .course-section-card
    .course-section-card-text
    .aurthor {
    color: #757575;
}

.plan-detail-wrapper-outer
    .plan-detail-wrapper
    .course-section-grid
    .course-section-card
    .course-section-card-text
    .course-section-card-action {
    display: flex;
    justify-content: flex-end;
}

.plan-detail-wrapper-outer
    .plan-detail-wrapper
    .course-section-grid
    .course-section-card
    .course-section-card-text
    .course-section-card-action
    .btn-primary-sm {
    height: 36px;
    color: #757575;
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.plan-detail-wrapper-outer .choose-plan-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}

.plan-detail-wrapper-outer .choose-plan-action .btn-primary-sm.choose-plan {
    width: 100%;
    max-width: 290px;
    min-width: unset;
    height: 38px;
}

.plan-course-curriculum {
    position: relative;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
    min-height: 320px;
}

.plan-course-curriculum .plan-course-curriculum-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.plan-course-curriculum .plan-course-curriculum-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.plan-course-curriculum .plan-course-curriculum-text > *:not(:first-child) {
    margin-top: 15px;
}

.plan-course-curriculum .plan-course-curriculum-text .main-heading {
    color: #ffffff;
    font-weight: 500;
}

.plan-course-curriculum .plan-course-curriculum-text .normal-text {
    padding-bottom: 4px;
    max-width: 450px;
}

.plan-course-description {
    position: relative;
}

.plan-course-description .heading {
    color: #757575;
    font-weight: 700;
    margin-bottom: 5px;
}

.plan-course-tabs {
    position: relative;
}

.plan-course-tabs > *:not(:first-child) {
    margin-top: 12px;
}

.plan-course-tabs .plan-course-tab {
    border-width: 1px;
    border-style: solid;
    border-color: #526275;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: #f9f9f9;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    width: 100%;
    padding: 5px 15px;
    color: #10192d;
    font-weight: 700;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-head .icn {
    position: relative;
    width: 15px;
    height: 15px;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-head .icn span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 1px;
    width: 100%;
    background-color: #757575;
    transition: transform 0.3s;
    transition-timing-function: linear;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-head .icn span:first-child {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

.plan-course-tabs .plan-course-tab .plan-course-tab-head.active .icn span:first-child {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}

.plan-course-tabs .plan-course-tab .plan-course-tab-body {
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: height 0.3s;
    transition-timing-function: linear;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-body .plan-course-tab-body-inner {
    padding: 0 15px 15px;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-body .plan-course-tab-body-inner > *:not(:first-child) {
    margin-top: 12px;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-body .plan-course-tab-body-inner .plan-course-tab-body-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.plan-course-tabs
    .plan-course-tab
    .plan-course-tab-body
    .plan-course-tab-body-inner
    .plan-course-tab-body-item
    > *:not(:first-child) {
    margin-left: 7px;
}

.plan-course-tabs
    .plan-course-tab
    .plan-course-tab-body
    .plan-course-tab-body-inner
    .plan-course-tab-body-item
    .normal-text {
    color: #757575;
}

.plan-course-tabs .plan-course-tab .plan-course-tab-body .plan-course-tab-body-inner .plan-course-tab-body-item img {
    margin-top: 3px;
}

.with-tagline {
    align-items: flex-end;
}

.with-tagline .form-group:not(:has(input)) {
    flex: unset;
    -webkit-flex: unset;
    -ms-flex: unset;
}

@media only screen and (min-width: 500px) {
    .with-tagline .form-group:not(:has(input)) {
        max-width: fit-content;
    }
}

@media only screen and (max-width: 500px) {
    .with-tagline .form-group:not(:has(input)) .current-plan-details {
        width: 100%;
        max-width: 100%;
    }
}

.down-grade-wrapper {
    background-color: #f8fcff;
    margin-bottom: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
}

@media only screen and (min-width: 500px) {
    .down-grade-wrapper {
        padding: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .down-grade-wrapper {
        padding: 15px;
    }
}

.down-grade-wrapper label ~ .normal-text {
    margin-bottom: 8px;
}

.down-grade-wrapper .card-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .down-grade-wrapper .card-input {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 768px) {
    .down-grade-wrapper .card-input img {
        height: 25px;
        margin-right: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .down-grade-wrapper .card-input img {
        height: 15px;
        margin-right: 5px;
    }
}

.down-grade-wrapper .card-input .right {
    margin-left: auto;
    max-width: 30px;
}

.down-grade-wrapper .card-input input:not(.right) {
    max-width: 113px;
}

.down-grade-wrapper .btn-primary {
    margin-top: 0 !important;
    height: 45px;
    line-height: 45px;
    max-width: unset;
    min-width: unset;
    padding-left: 20px;
    padding-right: 20px;
    color: #757575;
    background-color: #d8d8d8;
    border-color: #d8d8d8;
}

.make-payment-wrapper label:not(.cusotm-check-box) {
    font-weight: 700;
}

.make-payment-wrapper .form-inner-heading {
    margin-bottom: 7px;
}

.make-payment-wrapper .form-disclaimer {
    margin: 13px 0;
    border-style: solid;
    border-color: #e0e0e0;
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    padding-top: 10px;
}

.bundle-courses .course-section-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.bundle-courses .course-section-card .course-section-card-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.bundle-courses .course-section-card .course-section-card-text .normal-text.counter {
    margin-bottom: 10px;
}

.bundle-courses .course-section-card .course-section-card-text .course-section-card-action {
    margin-top: auto !important;
}

.products-card .course-section-card-action {
    justify-content: space-between !important;
    padding-top: 10px !important;
}

.products-card .course-section-card-action .btn-primary-sm {
    color: #322659 !important;
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    -moz-border-radius: 30px !important;
    -ms-border-radius: 30px !important;
    -o-border-radius: 30px !important;
}

.products-card .currentStatus {
    font-weight: 600;
    color: #322659;
    margin-left: 4px;
}

.products-card .download-file {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.products-card .download-file > *:not(:first-child) {
    margin-left: 6px;
}

.products-card .download-file .normal-text {
    color: #322659;
}

.products-card .download-file img {
    width: 15px;
}

@media (min-width: 850px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

@media (max-width: 850px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: stretch;
    }
}

@media (min-width: 850px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .view-mode {
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
    }
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card {
    padding: 8px;
    width: 100%;
}

@media only screen and (max-width: 500px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .event-management
        .view-mode
        .course-section-list
        .list-card {
        flex-direction: column;
        padding-bottom: 15px;
    }
}

@media only screen and (min-width: 500px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .event-management
        .view-mode
        .course-section-list
        .list-card
        .list-img {
        max-width: 200px;
    }
}

@media only screen and (max-width: 500px) {
    .content-with-tabs
        .tab-content-outer
        .tab-content
        .dashboard-state-new
        .event-management
        .view-mode
        .course-section-list
        .list-card
        .list-img {
        max-width: 100%;
    }
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .date {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .date
    .normal-text {
    margin-bottom: 0 !important;
    margin-left: 5px;
    color: #10192d;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .duration {
    color: #526275;
    margin-bottom: 0;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card
    .list-card-text-outer
    .duration
    span {
    font-weight: 700;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card
    .link {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 10px;
    color: #322659;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .view-mode
    .course-section-list
    .list-card
    .link
    img {
    margin-left: 10px;
    height: 15px;
}

.content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
}

.content-with-tabs
    .tab-content-outer
    .tab-content
    .dashboard-state-new
    .event-management
    .event-rightBar
    .react-datepicker__month-container {
    width: 100%;
}

@media (min-width: 1300px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
        width: 100%;
        max-width: 350px;
        margin-left: 30px;
    }
}

@media (max-width: 1300px) and (min-width: 992px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
        width: 100%;
        max-width: 250px;
        margin-left: 15px;
    }
}

@media (min-width: 850px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
        margin-left: 15px;
    }
}

@media (max-width: 850px) and (min-width: 500px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
        width: fit-content;
    }
}

@media (max-width: 850px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .event-rightBar {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .content-with-tabs .tab-content-outer .tab-content .dashboard-state-new .event-management .course-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tag {
    color: #ffffff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 12px 0;
    -webkit-border-radius: 0 12px 0;
    -moz-border-radius: 0 12px 0;
    -ms-border-radius: 0 12px 0;
    -o-border-radius: 0 12px 0;
}

@media only screen and (min-width: 500px) {
    .tag {
        position: absolute;
        top: 0;
        right: 0;
        width: 170px;
        height: 45px;
        font-size: 13px;
        font-weight: 600;
        padding: 5px 10px;
    }
}

@media only screen and (max-width: 500px) {
    .tag {
        padding: 5px 18px;
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 11px;
        font-weight: 600;
        height: 38px;
    }
}

.tag.yellow {
    background-color: #f89500;
}

.tag.green {
    background-color: #019fa9;
}

.tag.red {
    background-color: #784a05;
}

.event-curriculum-wrapper {
    position: relative;
    padding-top: 30px;
}

.event-curriculum-wrapper .event-curriculum-main {
    margin-top: 15px;
    overflow: hidden auto;
}

@media only screen and (min-width: 500px) {
    .event-curriculum-wrapper .event-curriculum-main {
        padding-bottom: 20px;
        max-height: 71.5vh;
    }
}

@media only screen and (max-width: 500px) {
    .event-curriculum-wrapper .event-curriculum-main {
        max-height: 74vh;
        padding-bottom: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .event-curriculum-wrapper .event-curriculum-main {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-left {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .wrapper-video {
    width: 100%;
    position: relative;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .wrapper-video img {
    width: 100%;
    display: block;
}

@media only screen and (min-width: 768px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .wrapper-video img {
        border-radius: 16px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        -ms-border-radius: 16px;
        -o-border-radius: 16px;
    }
}

@media only screen and (max-width: 768px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .wrapper-video img {
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .wrapper-video .tag {
    top: unset !important;
    bottom: 0;
    border-radius: 12px 0px 12px 0px;
    -webkit-border-radius: 12px 0px 12px 0px;
    -moz-border-radius: 12px 0px 12px 0px;
    -ms-border-radius: 12px 0px 12px 0px;
    -o-border-radius: 12px 0px 12px 0px;
}

@media only screen and (max-width: 500px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .wrapper-video .tag {
        right: 0;
    }
}

@media only screen and (min-width: 992px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .event-curriculum-left-text {
        padding: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-left .event-curriculum-left-text {
        padding: 20px 0;
    }
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    > *:not(:first-child) {
    margin-top: 15px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    .event-curriculum-profile {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    .event-curriculum-profile
    .img {
    position: relative;
    width: 62px;
    height: 62px;
    margin-right: 15px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    .event-curriculum-profile
    .img
    img {
    width: 100%;
    height: 100%;
    margin-right: 10px;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    .event-curriculum-profile
    .profile-data {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    max-width: 318px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    .event-curriculum-profile
    .profile-data
    .normal-text {
    font-size: 11px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-left
    .event-curriculum-left-text
    .event-curriculum-profile
    .profile-data
    .title {
    margin-right: 8px;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
}

@media only screen and (min-width: 500px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right {
        width: 100%;
        max-width: 400px;
        padding: 25px 20px;
    }
}

@media only screen and (max-width: 500px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right {
        padding: 25px 0px;
        width: 100%;
        max-width: 100%;
    }
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right > *:not(:first-child) {
    margin-top: 15px;
}

@media only screen and (min-width: 992px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right {
        margin-left: 20px;
    }
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-curriculum-actions {
    display: flex;
    gap: 13px;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-curriculum-actions button {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    width: unset;
    max-width: unset;
    min-width: unset;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
}

@media only screen and (min-width: 768px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-curriculum-actions button {
        font-size: 12.8px;
        font-weight: 600;
    }
}

@media only screen and (max-width: 768px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-curriculum-actions button {
        font-size: 12px;
        font-weight: 600;
    }
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-curriculum-actions button.outline {
    color: #322659;
    background-color: transparent;
    border-color: #322659;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-curriculum-actions button.secondary {
    color: #322659;
    background-color: rgba(0, 163, 250, 0.149);
    border-color: #322659;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-details-wrapper {
    position: relative;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-details-wrapper > *:not(:first-child) {
    margin-top: 13px;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-details-wrapper .event-details-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .event-details-wrapper
    .event-details-item
    > *:not(:first-child) {
    margin-left: 10px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .event-details-wrapper
    .event-details-item
    .normal-text {
    color: #10192d;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .event-details-wrapper
    .event-details-item
    img {
    height: 18px;
    margin-top: 3px;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .available-time-slots {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
}

@media only screen and (min-width: 768px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .available-time-slots {
        padding: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .available-time-slots {
        padding: 15px 0;
    }
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs {
    position: relative;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    > *:not(:first-child) {
    margin-top: 15px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab {
    position: relative;
    color: #10192d;
    background-color: #f7f7f7;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-top: 15px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head {
    height: 58px;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    > *:not(:first-child) {
    margin-left: 10px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .left
    > *:not(:first-child) {
    margin-left: 6px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .left
    .normal-text {
    color: #10192d;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .left
    img {
    height: 15px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    color: #ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .right
    span {
    line-height: 1;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .right
    img {
    margin-right: 7px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .right:not(.active) {
    background-color: #322659;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head
    .right.active {
    background-color: #322659;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body {
    border-style: solid;
    border-color: #322659;
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    padding: 15px 15px 0;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body
    > *:not(:first-child) {
    margin-top: 10px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body
    .available-time-slots-form
    .form-group
    .form-control {
    overflow: unset !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body
    .available-time-slots-form
    .form-group
    .form-control
    .dropdown {
    max-width: 50px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body
    .available-time-slots-form
    .form-group
    .form-control
    .dropdown
    .dropdown-menu {
    min-width: 50px;
    margin: 0 0 0 -19px;
    padding: 5px 10px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body
    .available-time-slots-form
    .form-group
    .form-control
    .dropdown
    .dropdown-menu
    .header-profile-links
    > *:not(:first-child) {
    margin-top: 5px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-body
    .available-time-slots-form
    .form-group
    .form-control
    input {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .add-to-calender {
    font-weight: 700;
    display: inline-block;
    color: #322659;
    border-style: solid;
    border-color: #322659;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-attendees .normal-text {
    color: #10192d;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-attendees .event-attendees-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 10px;
}

.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .event-attendees
    .event-attendees-list
    > *:not(:first-child) {
    margin-left: -6px;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-attendees .event-attendees-list img,
.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-attendees .event-attendees-list .more {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    overflow: hidden;
}

.event-curriculum-wrapper .event-curriculum-main .event-curriculum-right .event-attendees .event-attendees-list .more {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: black;
    font-size: 16px;
    font-weight: 600;
}

.available-time-slots-tab-drodown .dropdown-menu {
    padding: 0 !important;
    margin: 10px 0 20px !important;
}

.available-time-slots-tab-drodown .dropdown-menu .available-time-slots {
    max-height: 250px;
    overflow-y: auto;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
}

@media only screen and (min-width: 500px) {
    .list-card .tag {
        border-radius: 0 6px 0 12px;
        -webkit-border-radius: 0 6px 0 12px;
        -moz-border-radius: 0 6px 0 12px;
        -ms-border-radius: 0 6px 0 12px;
        -o-border-radius: 0 6px 0 12px;
    }
}

@media only screen and (max-width: 500px) {
    .list-card .tag {
        border-radius: 0 10px 0;
        -webkit-border-radius: 0 10px 0;
        -moz-border-radius: 0 10px 0;
        -ms-border-radius: 0 10px 0;
        -o-border-radius: 0 10px 0;
    }
}

.filter-menu .dropdown.dropdown-popup-header {
    width: fit-content;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-b2xl {
    font-size: 1.5rem !important;
}

.text-b3xl {
    font-size: 1.875rem !important;
}

.text-b4xl {
    font-size: 2.25rem !important;
}

.text-b5xl {
    font-size: 3rem !important;
}

.text-b6xl {
    font-size: 3.75rem !important;
}

.text-b7xl {
    font-size: 4.5rem !important;
}

.text-b8xl {
    font-size: 6rem !important;
}

.text-b9xl {
    font-size: 8rem !important;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-bbase {
    font-size: 1rem !important;
}

.text-blg {
    font-size: 1.125rem !important;
}

.text-bsm {
    font-size: 0.875rem !important;
}

.text-bxl {
    font-size: 1.25rem !important;
}

.text-bxs {
    font-size: 0.75rem !important;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.leading-loose {
    line-height: 2;
}

.leading-none {
    line-height: 1;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-snug {
    line-height: 1.375;
}

.leading-tight {
    line-height: 1.25;
}

.lg\:text-b2xl {
    font-size: 1.5rem !important;
}

.lg\:text-b3xl {
    font-size: 1.875rem !important;
}

.lg\:text-b4xl {
    font-size: 2.25rem !important;
}

.lg\:text-b5xl {
    font-size: 3rem !important;
}

.lg\:text-b6xl {
    font-size: 3.75rem !important;
}

.lg\:text-b7xl {
    font-size: 4.5rem !important;
}

.lg\:text-b8xl {
    font-size: 6rem !important;
}

.lg\:text-b9xl {
    font-size: 8rem !important;
}

.lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.lg\:text-bbase {
    font-size: 1rem !important;
}

.lg\:text-blg {
    font-size: 1.125rem !important;
}

.lg\:text-bsm {
    font-size: 0.875rem !important;
}

.lg\:text-bxl {
    font-size: 1.25rem !important;
}

.lg\:text-bxs {
    font-size: 0.75rem !important;
}

.lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.lg\:font-medium {
    font-weight: 500;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.main-header-content .btn-outline {
    width: 104px;
    height: 43px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 6px 84px;
    text-align: center;
    font-size: 12.8px;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    color: #322659;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-action
    .course-section-card-action-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-action
    .course-section-card-action-text
    > *:not(:first-child) {
    margin-left: 10px;
}

.new-dashboard
    .main-hero-section
    .main-hero-inner
    .main-hero-content
    .course-section-grid
    .course-section-card
    .course-section-card-action
    .course-section-card-action-text
    + div
    img {
    width: 23px;
}
.event-details-modal {
    background-color: rgba(16, 25, 45, 0.4);
}

.event-management .react-calendar {
    max-width: 300px;
}
.event-management .react-calendar__tile {
    height: 32px;
    padding: 0 !important;
}
.event-management .react-calendar__tile::before {
    background-color: unset;
}
.event-management .react-calendar__tile--active::before {
    background-color: #32265926 !important;
}
.event-management .react-calendar__month-view__weekdays__weekday,
.event-management .react-calendar__tile--active abbr {
    color: #322659;
}
.event-management .react-calendar__navigation {
    background: #ece7ff;
    color: #322659;
}
.space-post .community-item {
    box-shadow: rgba(13, 46, 97, 0.05) 0px 29px 30px 0px;
}

.mt-10 {
    margin-top: 10px;
}

/* adding chat css here  */

.platform-chat-main-class {
    position: fixed;
    bottom: 5px;
    right: 15px;
}

.platform-chat-main-class .modal-container {
    position: fixed;
    bottom: 50px;
    right: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 320px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

@media (min-width: 960px) {
    .platform-chat-main-class .modal-container {
        width: 360px;
    }
}

.platform-chat-main-class .qeditor-container {
    border: none;
    background-color: #f5f6fa;
}

.platform-chat-main-class .chat-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 420px;
    color: #000;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 8px;
    box-shadow: 0 3px 20px 0 rgba(73, 134, 153, 0.15);
    outline: 0;
}

.platform-chat-main-class .chat-icon-container {
    cursor: pointer;
    position: fixed;
    bottom: 25px;
    right: 50px;
    z-index: 9999;
}

.platform-chat-main-class .appbar-notifications {
    padding-right: 10px;
}

.platform-chat-main-class .appbar-notifications .notifications-count {
    position: absolute;
    top: 6px;
    left: 22px;
    font-size: 11px;
    line-height: 14px;
    padding: 0 4px;
    border-radius: 8px;
    color: #fff;
    background-color: #175cff;
    border: 1px solid #fff;
    user-select: none;
}

@media only screen and (max-width: 500px) {
    .platform-chat-main-class .appbar-notifications .dropdown-menu {
        transform: translateX(40px);
    }
}

.platform-chat-main-class .appbar-notifications .notifications-count {
    position: absolute;
    top: 6px;
    left: 22px;
    font-size: 11px;
    line-height: 14px;
    padding: 0 4px;
    border-radius: 8px;
    color: #fff;
    background-color: #175cff;
    border: 1px solid #fff;
    user-select: none;
}

.platform-chat-main-class .appbar-dd-trig {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 42px;
    color: #526275;
    cursor: pointer;
}

.platform-chat-main-class .open > .appbar-dd-trig {
    color: #000;
}
.platform-chat-main-class .appbar-user .appbar-dd-trig span {
    display: none;
}

@media only screen and (min-width: 768px) {
    .platform-chat-main-class .appbar-user .appbar-dd-trig span {
        display: block;
    }
}

.platform-chat-main-class .dropdown-menu-chat-box {
    top: 274px;
    left: -300px;
}

.platform-chat-main-class .dropdown-help {
    max-width: 494px;
    max-height: 550px;
}

@media (min-width: 500px) {
    .platform-chat-main-class .dropdown-help {
        min-width: 360px;
    }
}

.platform-chat-main-class .dropdown-chat-header {
    padding: 15px;
}

.platform-chat-main-class .chat-modal-content .from-row {
    position: relative;
    display: flex;
    border: 0;
}

.platform-chat-main-class .chat-modal-content .dropdown-help .form-row {
    padding: 13px 15px 15px;
    margin-bottom: 12px;
}

.platform-chat-main-class .chat-modal-content .dropdown-help .form-row .form-group {
    flex: 1;
    min-width: 100px;
}

.platform-chat-main-class .chat-modal-content .dropdown-help .form-group {
    margin-bottom: 0;
    position: relative;
}

.platform-chat-main-class .notification-name {
    font-size: 22px !important;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 0 !important;
}

.platform-chat-main-class .form-input-search {
    border-radius: 50px;
    position: relative;
    background-color: #ecf2ff;
}

.platform-chat-main-class .form-input-search > .icn-search {
    position: absolute;
    top: 14px;
    left: 14px;
}

.platform-chat-main-class .icn-search {
    width: 14px;
    height: 14px;
    background-position: -1190px -2px;
}

.platform-chat-main-class .icn-search {
    width: 14px;
    height: 14px;
    background-position: -1190px -2px;
}

.platform-chat-main-class .icn {
    background-image: url(../../images/sprite-icons-3x.png);
    background-repeat: no-repeat;
    background-size: 2600px 800px;
    -webkit-background-size: 2600px 800px;
    display: block;
}

.platform-chat-main-class .form-input-search > .form-control {
    background-color: #f3f5f9;
    border-color: #f3f5f9;
    border-radius: 50px;
    padding-left: 38px;
}

.platform-chat-main-class .form-control {
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-chat-main-class .dropdown {
    width: auto !important;
}

.platform-chat-main-class .fz24 {
    font-size: 24px;
    line-height: 24px;
}

.platform-chat-main-class .mt-20 {
    margin-top: 20px;
}

.platform-chat-main-class .btn {
    margin-top: 15px;
    background-color: #322659 !important;
    border: 1px solid #322659 !important;
    color: #ffffff !important;
}

.platform-chat-main-class .gap-8 {
    gap: 8px;
}

.platform-chat-main-class .appbar-chat-members {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    border-bottom: 1px solid #e4e5ec;
}

.platform-chat-main-class .appbar-flow-avatar-community {
    width: 40px;
    height: 40px;
    border-radius: 25px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.platform-chat-main-class .appbar-chat-members:hover {
    background-color: #e4e5ec;
}

.platform-chat-main-class .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
}

.platform-chat-main-class .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.platform-chat-main-class .switch input:checked + .slider {
    background-color: #322659;
}

.platform-chat-main-class .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 11px;
    background-color: #526275;
    transition: 0.25s ease;
}

.platform-chat-main-class .switch .slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    border-radius: 50%;
    background-color: #fff;
    transition: 0.25s ease;
}

.platform-chat-main-class .switch input:checked + .slider:before {
    transform: translateX(16px);
}

.platform-chat-main-class .dropdown .dropdown-menu .dropdown-item {
    font-size: 13px !important;
}

.platform-chat-main-class .dropdown-help-appbar-chat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e4e5ec;
    position: relative;
}

.platform-chat-main-class .dropdown-help-appbar-chat .dropdown-help-appbar-chat-count {
    position: absolute;
    top: 45px;
    right: 15px;
    background-color: #322659;
    width: 16px;
    height: 16px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #fff;
}

.platform-chat-main-class .dropdown-help-appbar-chat .dropdown-help-appbar-chat:hover {
    background-color: #e4e5ec;
}

.platform-chat-main-class .dropdown-help-appbar-chat .appbar-flow-avatar {
    width: 40px;
    height: 40px;
    border-radius: 25px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}
.main-header
    .main-header-inner
    .main-header-content
    .main-header-notifactions
    .main-header-notifaction-inner
    .btn-message-counter {
    width: 20px;
    height: 20px;
    color: #ffffff;
    background-color: #322659;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: -12px;
    right: 0;
    left: 12px;
}

.platform-chat-main-class .chat-send-icon {
    position: absolute;
    bottom: 8px;
    right: 5px;
}

.platform-chat-main-class .community-group-chat {
    background-color: #f3f5f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 15px;
    border-radius: 5px;
    padding: 10px;
    margin: 20px;
}

.platform-chat-main-class .community-group-chat .appbar-flow-avatar {
    border: 1px solid #d7ddec;
    position: relative;
}

.platform-chat-main-class .community-group-chat .community-group-chat-close {
    width: 14px;
    height: 14px;
    background-color: #175cff;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: -5px;
    cursor: pointer;
}

.platform-chat-main-class .community-group-chat .community-group-chat-btn {
    background-color: #175cff;
    color: #fff;
    cursor: pointer;
    padding: 4px 60px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    border-radius: 5px;
    margin: auto;
}

.platform-chat-main-class .aaron-date {
    font-size: 14px;
    line-height: 1;
    text-align: center;
    position: relative;
    color: #526275;
    margin: 10px 0;
}

.platform-chat-main-class .aaron-date::after {
    content: '';
    position: absolute;
    right: 0;
    top: 7px;
    width: 40%;
    border: 1px solid #e4e5ec;
}

.platform-chat-main-class .aaron-date::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 40%;
    border: 1px solid #e4e5ec;
}

.allow-desktop-chat .unread .notification-item-icon {
    background-color: #ffffff;
}

.notification-item-icon {
    flex: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    color: #526275;
    background-color: #ecf2ff;
}

.community-post-actions {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 5px;
}
.post-in-modal .community-post-actions {
    right: 30px;
}
.community-post-options-container .dropdown-menu {
    right: 12px !important;
    width: 120px !important;
    top: 18px !important;
}
.post-in-modal .community-post-options-container .dropdown-menu {
    right: 30px !important;
    width: 200px !important;
    top: 18px !important;
}
.event-modal-dialog {
    overflow-y: hidden !important;
}
.event-modal-dialog .modal-dialog {
    max-width: 85%;
    margin: 50px auto 0;
}
.event-modal-dialog .modal-content {
    height: 87vh;
}
.event-modal-dialog .curriculum-popup .container {
    max-width: 1320px;
}

.available-time-slots-form .form-row .form-group .form-control {
    min-height: 25px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: #f7f7f7 !important;
    border-color: #dfe0e0 !important;
    border-radius: 5px !important;
}
.event-curriculum-wrapper
    .event-curriculum-main
    .event-curriculum-right
    .available-time-slots
    .available-time-slots-tabs
    .available-time-slots-tab
    .available-time-slots-tab-head-active {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #322659;
    border-top-width: 1px;
}

.platform-chat-main-class .admin-tag {
    background-color: #faad28;
    padding: 2px 4px;
    width: 100%;
    max-width: 60px;
    border-radius: 20px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    position: relative;
    top: -2px;
}

.platform-chat-main-class .sb-processing {
    position: absolute;
    top: 73px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 89;
    background-color: rgba(217, 225, 236, 0.8);
}
.platform-chat-main-class .chat-modal-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    position: absolute;
    top: 140px;
    left: 0;
    right: 0;
    bottom: 0;
}
.platform-chat-main-class .sb-processing .modal-wait {
    padding: 0;
}

.platform-chat-main-class .sb-processing .modal-wait-loader {
    margin: 0 !important;
}

.community-preview-announcement {
    position: absolute;
    top: -20px;
    left: 0;
    background-color: #322659;
    color: #ffffff;
    padding: 12px 10px;
    width: 100%;
    text-align: center;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: 600;
}

.space-wrapper-right-item .members-images .member-avatar {
    height: 26px;
    width: 26px;
}
.space-wrapper-right-item .members-images .members-count {
    width: 28px;
    height: 28px;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 11px;
    padding: 3px;
}
.text-control {
    -webkit-line-clamp: 1;
    /* max-height: 25px; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: fit-content;
}

.lecture-content-html ul,
.lecture-content-html ol {
    padding-left: 14px;
}

.chat-width p,
.chat-width span,
.chat-width a,
.chat-width i,
.chat-width s,
.chat-width b {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@-moz-document url-prefix() {
    .community-grid-img button span span svg {
        margin-top: 4px;
    }
}
.add-post-bottom-icon {
    background-color: #322659;
    width: 40px;
    border-radius: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 55px;
}
.tabs-trig {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background-color: #e9eeff;
    margin-left: 40px;
    cursor: pointer;
    margin-top: 12px;
}
.main-content-space-sales {
    max-width: 100% !important;
    padding-left: 0 !important;
}

.currency-tag,
.currency-dd {
    position: absolute;
    top: 8px;
    right: 7px;
    height: 28px;
    padding: 3px 10px 5px;
    background-color: #d8e4e8;
    border-radius: 14px;
}
.community-join-flow .main-hero-section .main-hero-inner {
    gap: 30px;
}
.community-join-flow .main-hero-section .main-hero-inner .main-community-join-flow {
    padding-left: 0;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    padding: 2rem;
    border-radius: 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-img-grid {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-cover {
    width: 100%;
    height: 365px;
    border-radius: 12px;
    object-fit: cover;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-img-grid-more {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-img-grid-more img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-information {
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: #f8f7f5;
    padding: 1rem;
    border-radius: 12px;
    margin-top: 20px;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-information-item,
.space-wrapper .community-join-flow-information-item {
    display: flex;
    gap: 8px;
    align-items: center;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-information-item-title,
.space-wrapper .community-join-flow-information-item-title {
    font-size: 16px;
    font-weight: 600;
    color: #322659 !important;
    font-family: var(--font-family);
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-flow-information-item-avatar,
.space-wrapper .community-join-flow-information-item-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50px;
    object-fit: cover;
}
.community-join-flow .main-hero-section .main-hero-inner .community-join-text-information {
    color: #252729;
    font-size: 18px;
    margin-top: 15px;
}

.community-join-flow-sidebar .community-join-sidebar {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    max-width: 100%;
    padding: 0;
    border-radius: 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

@media (min-width: 960px) {
    .community-join-flow-sidebar .community-join-sidebar {
        max-width: 330px;
        min-width: 330px;
    }
}

.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-cover {
    width: 100%;
    height: 210px;
    border-radius: 12px 12px 0 0;
}
.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-details {
    padding: 1rem;
}
.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-details.community-main-sidebar {
    padding: 2rem;
}
.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-details-title {
    font-size: 18px;
    font-weight: bold;
    color: #10192d;
    margin-bottom: 5px;
}
.community-join-flow-sidebar .community-join-sidebar .community-join-flow-sidebar-information-item-title {
    color: #526275 !important;
}

.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-details-desc {
    color: #526275 !important;
    font-size: 16px;
    margin: 20px 0 15px 0;
}

.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-details-link {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #322659;
    font-size: 16px;
    margin-bottom: 10px;
}

.community-join-flow-sidebar .community-join-sidebar-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 15px 0;
}

.community-join-flow-sidebar .community-join-sidebar-status .community-join-sidebar-status-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #10192d;
    font-size: 18px;
    font-weight: bolder;
}

.community-join-flow-sidebar
    .community-join-sidebar-status
    .community-join-sidebar-status-details
    .community-join-sidebar-status-details-title {
    font-size: 16px;
    color: #526275;
    font-weight: normal;
}

.community-join-sidebar-status-line {
    width: 2px;
    height: 30px;
    background-color: rgba(142, 155, 174, 0.3);
}

.community-join-flow-sidebar .community-join-sidebar .community-join-sidebar-button button {
    background-color: #322659;
    width: 100%;
    height: 58px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0 0 12px 12px;
}

.community-main-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid;
    border-color: #f0f0f0;
}

.community-join-flow-sidebar .community-join-sidebar-logo {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 16px;
}

.community-main-header .community-header-inner {
    display: flex;
    gap: 10px;
    align-items: center;
}

.community-main-header .community-header-inner span {
    color: #322659;
    font-size: 18px;
    font-weight: bold;
}

.community-main-header .community-header-details {
    width: 52px;
    height: 48px;
    border-radius: 5px;
    background-color: #175cff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.community-main-header .community-header-details-img {
    width: 52px;
    height: 48px;
    border-radius: 5px;
    object-fit: cover;
}

.community-main-header .main-header-content .community-main-button {
    background-color: #e9e9e9;
    border: 1px solid;
    border-color: #e9e9e9;
    width: 100%;
    min-width: 130px;
    height: 48px;
    text-align: center;
    border-radius: 12px;
    color: #7d7d7d;
    font-size: 18px;
    font-weight: 500;
}

.community-main-header .main-header-content .main-header-form {
    min-width: 100%;
}

.community-main-header .main-header-content .main-header-form input {
    background-color: #f5f5f5;
    border-radius: 50px;
}

.community-main-header .main-header-serach-mobile .main-header-form input {
    background-color: #f5f5f5;
    border-radius: 50px;
}

.community-main-header .main-header-serach-mobile .main-header-search-close {
    background-color: #f5f5f5;
}

@media only screen and (min-width: 992px) {
    .community-main-header .main-header-inner {
        padding-top: 15px;
        padding-right: 0;
        padding-bottom: 15px;
        padding-left: 0;
    }
}

.community-join-flow-modal {
    width: 100%;
    max-width: 620px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    padding: 2rem;
}

.community-join-flow-modal .community-main-header {
    border: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.community-join-flow-modal .modal-title {
    font-size: 32px;
    font-weight: 500;
    color: #1a202c;
    margin: 15px 0;
}

.community-join-flow-modal .community-join-flow-modal-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
}

.community-join-flow-modal .community-join-flow-modal-input {
    background-color: #fafafa;
    border: 1px solid;
    border-color: #eaeaea;
    border-radius: 8px;
    padding: 1rem;
    width: 100%;
}

.community-join-flow-modal .community-join-flow-modal-danger {
    font-size: 14px;
    color: #f2451c;
}

.community-join-flow-modal .community-join-flow-modal-button {
    background-color: #1a202c;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    height: 56px;
    border-radius: 12px;
    text-align: center;
    margin-top: 20px;
}

.community-join-flow-modal .community-join-flow-modal-desc {
    text-align: center;
    font-size: 14px;
    color: #10192d;
    margin-top: 20px;
}

.community-join-flow-modal .community-join-flow-modal-title {
    font-size: 14px;
    color: #322659;
}

.community-join-flow-modal .community-join-flow-modal-upload-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

.community-join-flow-modal .community-join-flow-modal-upload {
    background-color: #f1f1f5;
    border: 1px solid;
    border-color: #4c535f;
    border-style: dashed;
    width: 130px;
    height: 132px;
    object-fit: cover;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.community-join-flow-modal .community-join-flow-modal-change {
    background-color: #e4e5ec;
    height: 40px;
    width: 100%;
    max-width: 100px;
    text-align: center;
    color: #526275;
    font-size: 14px;
    border-radius: 5px;
    margin-top: 5px;
}

.community-join-flow-modal .modal-line {
    width: 100%;
    height: 1px;
    background-color: #dadada;
    margin: 30px 0 20px 0;
}

.community-join-flow-modal .card-icon-holder-main {
    position: relative;
}

.community-join-flow-modal .card-icon-holder-main .community-join-flow-modal-input {
    padding: 1rem 1rem 1rem 1rem;
}

.community-join-flow-modal .card-icon-holder {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.5rem;
}

.community-join-flow-modal .payment-option-main {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 12px;
}

.community-join-flow-modal .payment-option-main .payment-option-title {
    background-image: url('https://assets.vonza.com/community-24/payment-option-bg.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1rem;
    font-size: 32px;
    font-weight: 600;
    color: #322659;
    border-radius: 12px 12px 0 0;
}

.community-join-flow-modal .payment-option-main .payment-option-details-wrapper {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-direction: column;
    gap: 3px;
}

.pay-now-modal .pay-now-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.community-join-flow-modal .payment-option-main .payment-option-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 1rem;
}

@media (min-width: 960px) {
    .pay-now-modal .pay-now-wrapper {
        flex-direction: row;
    }

    .community-join-flow-modal .payment-option-main .payment-option-details {
        flex-direction: row;
        gap: 0;
    }
}

.payment-option-details-item {
    max-width: 350px;
    display: flex;
    gap: 8px;
    align-items: start;
}

.pay-now-modal {
    max-width: 1200px;
    max-height: 600px;
}

.flex-col {
    flex-direction: column;
}

.gap-3 {
    gap: 3px;
}

.gap-6 {
    gap: 6px;
}

.gap-15 {
    gap: 15px;
}

.gap-10 {
    gap: 10px;
}

.bg-purpule {
    background-color: #322659 !important;
}

.bg-light-blue {
    background-color: #322659 !important;
}

.bg-light-ghost {
    border: 1px solid #322659 !important;
    background-color: #fff !important;
    color: #322659 !important;
}

.text-purpule {
    color: #322659 !important;
}

.fwsb {
    font-weight: 600;
}

.text-dark {
    color: #0a083b;
}

.text-light-blue {
    color: #322659;
}

.text-decoration-underline {
    text-decoration: underline;
}

.radio-new {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    color: #828282;
}

.radio-post {
    padding-left: 20px;
}

/* Hide the browser's default radio button */
.radio-new input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #322659;
    border-radius: 50%;
}

.radio-post .checkmark {
    border: 1px solid #322659;
}

/* On mouse-over, add a grey background color */
.radio-new:hover input ~ .checkmark {
    background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.radio-new input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-new input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-new .checkmark:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #322659;
}

.radio-post .checkmark:after {
    background-color: #322659;
    top: 5px;
}

.check-new {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    /* cursor: pointer; */
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    color: #828282;
}

/* Hide the browser's default checkbox */
.check-new input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.check-new .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #c9c9c9;
}

/* On mouse-over, add a grey background color */
.check-new:hover input ~ .checkmark {
    background-color: #fff;
    border: 1px solid #c9c9c9;
}

/* When the checkbox is checked, add a blue background */
.check-new input:checked ~ .checkmark {
    background-color: #322659;
}

.check-post input:checked ~ .checkmark {
    background-color: #322659;
    border: 1px solid #322659;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check-new input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check-new .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-head {
    border: 0;
    padding: 0;
}

.community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-head-main {
    border-width: 1px;
    border-style: solid;
    border-color: #f0f2f4;
    padding: 0 10px 15px 10px;
    border-radius: 12px;
    background-color: #fff;
}

@media (min-width: 992px) {
    .community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-head-main {
        padding: 0 20px 15px 20px;
    }
}

.community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-footer {
    display: flex;
    gap: 8px;
    align-items: center;
}

.community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-footer-item {
    background-color: #ece7ff;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    gap: 5px;
    font-size: 14px;
    color: #26282a;
    cursor: pointer;
}

.community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-more-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 25px;
}

@media (min-width: 960px) {
    .community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-more-wrapper {
        flex-wrap: nowrap;
    }
}

.community-join-flow .space-wrapper .space-wrapper-more-wrapper .space-wrapper-more-wrapper-item.all {
    max-width: 100px !important;
}
.community-join-flow
    .space-wrapper
    .space-wrapper-left
    .space-wrapper-more-wrapper
    .space-wrapper-more-wrapper-item:nth-child(2) {
    max-width: 140px;
}
.community-join-flow
    .space-wrapper
    .space-wrapper-left
    .space-wrapper-more-wrapper
    .space-wrapper-more-wrapper-item
    .paid-space {
    max-width: 140px;
    background-color: #f2f3f7;
}

.community-join-flow .space-wrapper .space-wrapper-left .space-wrapper-more-wrapper .space-wrapper-more-wrapper-item {
    background-color: #fcfcfc;
    border-width: 1px;
    border-color: #e0e0e0;
    border-style: solid;
    border-radius: 4px;
    text-align: center;
    padding: 0.5rem;
    width: 100%;
    max-width: 170px;
    position: relative;
}

.community-join-flow .space-wrapper-more-wrapper-item-active {
    background-color: #322659 !important;
    color: #fff !important;
}

.community-join-flow
    .space-wrapper
    .space-wrapper-left
    .space-wrapper-more-wrapper
    .space-wrapper-more-wrapper-item
    .space-wrapper-more-wrapper-item-icon,
.dropdown-item .space-wrapper-more-wrapper-item-icon.paid {
    position: absolute;
    right: -6px;
    top: -10px;
    background: white;
    border-radius: 50%;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
}

.community-join-flow .space-wrapper-more-wrapper-dropdown {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #322659;
    background-color: #ece7ff;
    width: 100%;
    max-width: 80px;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 14px;
    color: #322659;
}

.community-join-flow .dropdown-dots.dropdown-toggle {
    width: 100%;
    max-width: 80px;
    justify-content: center;
}

.space-wrapper-more-wrapper-main {
    display: flex;
    gap: 10px;
    align-items: center;
}

.payment-option-main-post .payment-option-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 15px;
}

.payment-option-main-post .payment-option-details-wrapper .payment-option-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.payment-option-main-post .payment-option-details-wrapper .payment-option-details .payment-option-details-item {
    max-width: 450px;
}

.pricing-plan-mode {
    background-color: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.pricing-plan-mode-item {
    max-width: 400px;
}

.community-join-flow .tabs-header-new {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    max-width: 350px;
    margin-top: 20px;
}

.community-join-flow .tabs-header .tabs-btn-new {
    padding: 30px;
    height: 39px;
    padding: 30px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 35px;
    color: #757575;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
}

.tabs-btn-new-svg {
    color: #757575;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tabs-btn-new-active {
    color: #10192d !important;
    font-weight: 700 !important;
}

.tabs-btn-new-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background-color: #322659;
}

.tabs-btn-new-active > .tabs-btn-new-svg {
    background-color: #322659;
    color: #fff;
    padding: 0.5rem;
    border-radius: 50px;
}

.poll__option {
    border: 1px solid #d8e1ec;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
}

.poll__option .poll__option__wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.poll__option .poll__option__wrapper .poll__option__details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poll__option .poll__option__wrapper .poll-input {
    background-color: #f6f6f6;
    border: 1px solid;
    border-color: #f6f6f6;
    border-radius: 8px;
    padding: 1rem;
    width: 100%;
}

.poll__option .poll__option__wrapper .poll-input::placeholder {
    color: #526275;
}

.poll-button {
    background-color: #fff;
    color: #322659;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    width: fit-content;
}

.poll-button span {
    text-decoration: underline;
}

.post-filter-sort {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.post-filter-sort::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-56%);
    top: 105px;
    height: 1px;
    width: 100%;
    background-color: #dfdfdf;
}

@media (min-width: 960px) {
    .post-filter-sort {
        flex-direction: row;
        gap: 0;
    }

    .post-filter-sort::after {
        transform: translateX(-50%);
        top: 20px;
        height: 170px;
        width: 1px;
    }
}

.post-filter-sort .check-post-active {
    color: #322659 !important;
}

.item-profile-text .head .title {
    font-size: 28px;
    text-align: center;
    color: #0a083b;
    margin-bottom: 0;
}

.item-profile-text .head .email {
    font-size: 16px;
    text-align: center;
    color: #84839d;
    margin-top: 0 !important;
}

.item-profile-text .head .date {
    font-size: 14px;
    text-align: center;
    color: #0a083b;
    margin: 2px 0 15px 0 !important;
}

.item-profile-text .head .normal-text {
    text-align: center;
    color: #0a083b;
}

.poll__post {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll__post .poll__post__wrapper {
    background-color: #f6f6f6;
    padding: 1rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poll__post .poll__post__wrapper-active {
    background-color: rgb(236, 231, 255) !important;
}

.poll__post .poll__post__wrapper .radio-post {
    padding-left: 30px !important;
    font-size: 14px;
}

.poll__post .poll__post__wrapper-active .radio-post {
    color: #10192d;
}

.poll__post .poll-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.poll__post .poll-votes .poll-votes-avatar {
    display: flex;
}

.poll__post .poll-votes .poll-votes-avatar .poll-votes-avatar-img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 50%;
}
.poll__post .poll-votes .poll-votes-avatar .poll-votes-more-users {
    background-color: rgb(50, 38, 89);
    color: rgb(255, 255, 255);
    width: 19px;
    height: 19px;
}

.poll__post .poll-votes .poll-votes-avatar .poll-votes-avatar-img {
    margin-left: -5px;
}

.poll__post .poll-votes .poll-votes-avatar .poll-votes-avatar-img:nth-child(1) {
    margin-left: 0;
}

.community-join-flow-modal-membership {
    padding: 0;
    max-width: 790px;
    height: 480px;
}

.community-join-flow-modal-membership .community-main-header {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.community-join-flow-modal .community-membership-setting {
    display: flex;
    flex-direction: column;
    align-items: start;
    border-top: 1px solid #e0e0e0;
}

.community-join-flow-modal .community-membership-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    width: 100%;
}

.community-join-flow-modal .community-membership-left-item {
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #252729;
    padding: 0.5rem 1rem;
    background-color: #f6f6f6;
}

.community-join-flow-modal .community-membership-left-item-active {
    background-color: #ece7ff !important;
    color: #322659 !important;
}

.community-join-flow-modal .community-membership-right {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    width: 100%;
}

.community-join-flow-modal .member-ship-setting {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.community-join-flow-modal .member-ship-setting .member-ship-setting-title {
    font-size: 24px;
    font-weight: 700;
    color: #252729;
}

.community-join-flow-modal .member-ship-setting .member-ship-setting-btn {
    background-color: #322659;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    height: 50px;
    width: 100%;
    max-width: 220px;
    color: #fff;
    font-size: 16px;
    margin-top: 12px;
}

.community-join-flow-modal-membership .notification-setting-dropdown {
    background-color: #fff;
    border: 1px solid #9a9ea64d;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 40px;
}

.community-join-flow-modal-membership .notification-setting-dropdown .notification-setting-dropdown-item {
    color: #0a083b;
    font-size: 14px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.community-join-flow-modal-membership .notification-setting-dropdown .notification-setting-dropdown-item:hover {
    color: #322659;
    background-color: #ece7ff;
}

.community-join-flow-modal-membership .community-join-flow-modal-input {
    cursor: pointer;
}

.community-join-flow-modal-membership .notification-setting-dropdown-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 992px) {
    .payment-option-main-post .payment-option-details-wrapper .payment-option-details {
        flex-direction: row;
        align-items: start;
    }

    .community-join-flow-modal .community-membership-setting {
        flex-direction: row;
    }

    .community-join-flow-modal .community-membership-left {
        flex-direction: column;
        align-items: start;
        height: 399px;
        border-right: 1px solid #e0e0e0;
        width: auto;
        border-radius: 10px;
    }
}
.hide-scroll {
    overflow-y: hidden !important;
}

.community-join-flow-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px !important;
    height: 32px !important;
    border-radius: 3px !important;
    object-fit: contain !important;
}
.community-join-flow-play-btn.wrapper {
    width: 120px !important;
    height: 120px !important;
}
.payment-option-details.active {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 6px;
}

.community-join-flow-modal .react-phone-number-input .PhoneInputCountrySelect {
    padding: 0px 15px !important;
}

.community-join-flow-modal .PhoneInputInput {
    padding: 0 15px;
}
.more-spaces .dropdown-menu {
    right: 0px !important;
    left: auto !important;
}

.community-setting-modal-icon {
    position: absolute;
    top: 20px;
    right: 25px;
}
.enroll-modal-community .modal-dialog {
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.post-modal-close {
    position: absolute;
    top: -45px;
    right: -15px;
    z-index: 999;
    background: rgba(87, 88, 110, 0.9);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.post-title {
    font-size: 20px;
    font-weight: bold;
}

.post-settings {
    border: 1px solid #322659;
    padding: 2px 4px;
    color: #322659;
    width: 30px;
    height: 30px;
    border-radius: 4px;
}
.community-post-options-container.new .dropdown-menu {
    width: 180px !important;
    top: -5px !important;
    right: 0 !important;
}
.create-post-wrapper .nm-subject::before {
    border-bottom: 0px !important;
}

.post-filters.dropdown-item:hover::before {
    background-color: transparent !important;
}

.emoji-like-arrow {
    position: absolute;
    bottom: 25px;
    left: 72px;
    z-index: 1;
    display: block;
    pointer-events: none;
    overflow: hidden;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}
.mb0 {
    margin-bottom: 0;
}
.new-community-post-video .plyr--video {
    height: 100%;
}

.fz16 {
    font-size: 16px !important;
}

.event-tab-content {
    background-color: #fff;
    border: 1px solid #f0f2f4;
    border-radius: 12px;
    padding: 20px !important;
    margin-top: 30px;
}

.event-tab-content-btn {
    background-color: #9a9ea6;
    color: #fff;
    width: 100%;
    min-width: 110px;
    height: 40px;
    border-radius: 25px;
    text-align: center;
    font-size: 16px;
}

.event-tab-content .list-img {
    min-height: 220px !important;
    object-fit: cover !important;
}

@media (min-width: 960px) {
    .event-tab-content .event-tab-content-b-btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
}

.event-tab-content .tag {
    background-color: #13ab73;
    border-radius: 12px 0 12px 0;
    top: auto !important;
    bottom: 0 !important;
    width: 100px !important;
    height: 40px !important;
}
.fsp-picker__brand-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.community-join-flow-information-item-title.space {
    color: #526275 !important;
}
.line-clamp-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    max-width: 170px;
}
.content-editor a {
    color: #322659;
    text-decoration: underline;
}

.new-post-comment-actions .comments {
    position: absolute;
    top: -5px;
    right: -25px;
}
.new-post-comment-actions .comments .comments-svg,
.rotate-90 {
    rotate: 90deg;
    color: #322659;
    text-decoration: underline;
}

.date-sep {
    display: inline-block;
    width: 4px;
    height: 2px;
    background-color: #b4c6cc;
    border-radius: 1px;
    margin: 4px 7px 4px 8px;
}
.create-new-post-modal-description {
    min-height: 180px;
}
.create-post-wrapper .new-msg-container .ql-main .ql-actions-menu .ql-actions-menu-left button img.__EmojiPicker__ {
    height: 100%;
    width: 100%;
}

.new-dropdown-icons {
    left: 0 !important;
    right: auto !important;
}

@media (min-width: 960px) {
    .new-dropdown-icons {
        left: auto !important;
        right: 0 !important;
    }

    .ml-auto {
        margin-left: auto;
    }

    .course-section-grid-new {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .EmojiPickerReact {
        width: 90% !important;
    }
}

@media (max-width: 960px) {
    .community-item-desc.line-climp-50 p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 50;
    }

    .space-member-drop-down .dropdown-menu {
        left: 40px !important;
    }
}

.py10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.pb10 {
    padding-bottom: 10px;
}
.pt10 {
    padding-top: 10px;
}

.purple-btn {
    background-color: #ffffff !important;
    border: 1px solid #322659 !important;
    color: #322659 !important;
}

.purple-btn:hover {
    background-color: #322659 !important;
    color: #ffffff !important;
}
.short-answer.react-phone-number-input .PhoneInputCountrySelect {
    padding: 10px;
}

@media (min-width: 992px) {
    .payment-option-main-desktop {
   display: none;
 }
 }
 @media (max-width: 992px) {
    .payment-option-main-mobile{
   display: none;
 }
 }

 .custom-parse ol, .custom-parse ul{
    margin: auto;
    padding: revert;
}
.custom-parse ol{
  list-style: decimal;
}
.custom-parse ul{
  list-style: disc;
}
.community-rating-modal .modal-content {
    min-width: 500px !important;
}
.community-rating-modal .modal-checkout {
    max-width: 100% !important;
}
.community-rating-modal .modal-note {
    padding: 0 !important;
}
.community-rating-modal .modal-note::before {
    display: none !important;
}
.load-more-design {
    color: #322659 !important;
    background-color: #ffffff !important;
}
.load-more-design::before {
    border: 1px solid #322659 !important;
}
.load-more-design:hover {
    color: #ffffff !important;
    background-color: #322659 !important;
}

.toprank-main {
    padding: 23px 32px 36px 32px;
    border-radius: 12px;
    border: 1px solid #e4e5ec;
    background: #fff;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 42px;
    margin: 35px 0;
  }
  
  .toprank-main-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
  }
  
  .toprank-main-detail-image {
    position: relative;
  }
  
  .toprank-main-detail-image img {
    position: relative;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.6);
  }
  
    .toprank-main-detail-image-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #322659;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }
  
  .toprank-main-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    justify-content: center;
  }
  
  .toprank-main-content .toprank-main-content-title {
    font-size: 24px;
    color: #0a083b;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: normal;
  }
  
  .toprank-main-content .toprank-main-content-level {
    font-size: 16px;
    color: #322659;
    font-weight: 600;
    line-height: normal;
  }
  
  .toprank-main-content .toprank-main-content-earned-point {
    font-size: 16px;
    color: #0a083b;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 5px;
  }
  
  .toprank-main-content .toprank-main-content-need-point {
    font-size: 14px;
    font-weight: 400;
    color: #526275;
    line-height: normal;
  }
  
  .toprank-main-line {
    background-color: #e4e5ec;
    width: 100%;
    height: 1px;
  }
  
  .toprank-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 42px;
    justify-content: center;
    align-items: center;
  }
  
  .toprank-levels-unlock-b {
    position: relative;
    margin-bottom: 10px;
  }
  
  .toprank-levels-unlock-w {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 25px;
  }
  
  .toprank-levels-title {
    font-size: 16px;
    color: #0a083b;
    font-weight: 600;
    line-height: normal;
  }
  
  .toprank-levels-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #788a9f;
    margin-top: 5px;
  }
  
  .toprank-members {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 24px;
  }
  
  .toprank-members-title {
    font-size: 24px;
    color: #0a083b;
    font-weight: 600;
    line-height: normal;
  }
  
  .toprank-members-dropdown {
    padding: 10px 12px;
    background-color: #e4e5ec;
    border-radius: 4px;
    font-size: 13px;
    color: #526275;
    font-weight: normal;
    cursor: pointer;
    position: relative;
  }
  
  .toprank-members-dropdown-show {
    width: 100%;
    min-width: 140px;
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0px 0px 14.8px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid #e4e5ec;
    z-index: 99999;
  }
  
  .toprank-members-dropdown-show p {
    font-size: 14px;
    font-weight: 400;
    color: #526275;
    padding: 0 10px;
  }
  
  .toprank-member-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 255px;
  }
  
  .toprank-member-detail-title {
    font-size: 16px;
    font-weight: 600;
    color: #0a083b;
    line-height: normal;
    margin-bottom: 17px;
  }
  
  .toprank-member-detail-2 {
    width: 100%;
    max-width: 255px;
    height: 183px;
    border-radius: 16px 16px 0 0;
    border: 1px solid #e4e5ec;
    background: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .toprank-member-detail-1 {
    width: 100%;
    max-width: 255px;
    height: 216px;
    border-radius: 16px 16px 0 0;
    border: 1px solid #e4e5ec;
    background: #fff4d0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .toprank-member-detail-3 {
    width: 100%;
    max-width: 255px;
    height: 150px;
    border-radius: 16px 16px 0 0;
    border: 1px solid #e4e5ec;
    background: #ffdfcd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .toprank-table {
    border: 1px solid #e4e5ec;
    background: #fff;
    box-shadow: 0px 29px 30px 0px rgba(13, 46, 97, 0.05);
    border-radius: 8px;
    position: relative;
    top: -40px;
  }
  
  .toprank-table-header,
  .toprank-table-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e5ec;
  }
  
  .toprank-table-section {
    flex-direction: column;
  }
  
  .toprank-table-header {
    display: none !important;
  }
  
  @media (max-width: 1024px) {
    .toprank-table-flex {
      display: flex;
      width: 100%;
      justify-content: space-between;
      gap: 40px;
    }
  
    .toprank-table-content .toprank-table-header-title {
      justify-content: space-between !important;
      width: 100%;
    }
  
    .toprank-table-content .toprank-table-header-title {
      padding: 0 20px 20px 20px !important;
      min-height: auto !important;
    }
  
    .toprank-table-content {
      display: flex;
      width: 100%;
      justify-content: space-between;
      flex-direction: column;
      align-items: end;
    }
  
    .toprank-table-header-title:nth-child(3),
    .toprank-table-header-title:nth-child(4) {
      padding: 0 !important;
    }
  
    .toprank-table-flex .toprank-table-header-title {
      justify-content: end !important;
    }
  
    .toprank-levels {
      gap: 30px;
    }
  
    .toprank-main {
      padding: 23px 20px 36px 20px;
    }

    .toprank-table-flex .toprank-table-header-title {
        justify-content: end !important;
      }
  }

  .toprank-table-header-subtitle,
.toprank-table-header-name {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  
  .toprank-table-hidden {
    display: block;
  }
  
  .toprank-table-flex .toprank-table-header-title:last-child {
    width: 100%;
    max-width: 100%;
  }
  
  .toprank-table-content {
    display: flex;
    width: 100%;
  }
  
  .toprank-table-header:last-child {
    border-bottom: 0;
  }
  
  .toprank-table-header-title {
    padding: 21px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #0a083b;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  
  .toprank-table-header-title:first-child {
    padding: 21px 20px;
  }
  
  .toprank-table-header-title:last-child {
    text-align: left;
    width: 100%;
    padding: 21px 20px 21px 20px;
  }
  
  .toprank-table-section .toprank-table-header-title {
    padding-top: 24px;
    padding-bottom: 24px;
    min-height: 102px;
  }
  
  .toprank-table-header-subtitle {
    font-size: 16px;
    color: #0a083b;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px;
  }
  
  .toprank-table-header-name {
    font-size: 14px;
    color: #0a083b;
    font-weight: 400;
    line-height: 20px;
  }
  
  .toprank-table-section .toprank-table-header-title:nth-child(3) {
    font-size: 14px;
    font-weight: 400;
  }
  
  .toprank-table-section .toprank-table-header-title:nth-child(4) {
    font-size: 20px;
  }
  
  .toprank-member-detail-1 img,
  .toprank-member-detail-2 img,
  .toprank-member-detail-3 img {
    width: 46px;
  }
  
  @media (min-width: 1024px) {
    .toprank-table-header {
      display: flex !important;
    }
  
    .toprank-table-section {
      flex-direction: row;
    }
  
    .toprank-table-content {
      display: contents;
    }
  
    .toprank-table-flex {
      display: flex;
      width: 100%;
      min-width: 310px;
      gap: 0;
    }
  
    .toprank-table-flex .toprank-table-header-title:last-child {
      width: 100%;
      max-width: 400px;
      text-align: left;
    }
  
    .toprank-table-header-title:first-child {
      padding: 21px 20px;
    }
  
    .toprank-table-header-title:first-child {
      width: 100%;
      max-width: 160px;
    }
  
    .toprank-table-header-title:nth-child(2) {
      width: 100%;
      max-width: 400px;
    }
  
    .toprank-table-header-title:nth-child(3) {
      width: 100%;
      max-width: 160px;
    }
  
    .toprank-table-header-title:last-child {
      text-align: right;
      width: 100%;
      max-width: 160px;
      padding: 21px 20px 21px 20px;
    }
  
    .toprank-table-hidden {
      display: none;
    }
  
    .toprank-member-detail-1,
    .toprank-member-detail-2,
    .toprank-member-detail-3 {
      border-radius: 36px 36px 0 0 !important;
    }
  
    .toprank-member-detail-1 img,
    .toprank-member-detail-2 img,
    .toprank-member-detail-3 img {
      width: 73px;
    }
  }

  @media (min-width: 1280px) {
    .toprank-table-flex {
      min-width: 480px;
    }

    .toprank-table-header-title:first-child {
        max-width: 220px;
      }
  }
  
  @media (min-width: 1380px) {
    .toprank-table-flex {
      gap: 22px;
    }
  
    .toprank-table-header-title:nth-child(3),
    .toprank-table-header-title:nth-child(4) {
      padding: 21px 20px;
      max-width: 160px;
    }
  
    .toprank-table-flex {
      min-width: 685px;
    }

    .toprank-table-header-title:first-child {
        max-width: 220px;
      }
  }
  
  .level-2-information {
    position: relative;
    cursor: pointer;
  }
  
  .level-2-information-dropdown {
    width: 100%;
    min-width: 317px;
    padding: 16px 20px;
    position: absolute;
    top: 50px;
    left: -50px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 14.8px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: none;
    transition: 0.2s all ease-in-out;
    z-index: 1;
  }
  
  .toprank-btn {
    display: flex;
  }
  
  .rank-desktop-btn {
    display: none;
  }
  
  @media (min-width: 1024px) {
    .level-2-information-dropdown {
      min-width: 416px;
      left: -100px;
    }
  
    .toprank-btn {
      display: none;
    }
  
    .rank-desktop-btn {
      display: block;
    }
  }
  
  .level-2-information:hover .level-2-information-dropdown {
    display: block;
  }
  
  .level-2-information-dropdown-title {
    font-size: 16px;
    color: #0a083b;
    line-height: normal;
    padding-bottom: 14px;
    position: relative;
    font-weight: 600;
  }
  
  .level-2-information-dropdown-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    background-color: #e4e5ec;
    width: 112%;
    height: 1px;
    left: -20px;
  }
  
  .level-2-information-dropdown-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }
  
  .level-2-information-dropdown-detail .title {
    font-size: 16px;
    color: #0a083b;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .level-2-information-dropdown-detail .point {
    font-size: 14px;
    color: #322659;
    line-height: normal;
  }
  
  .level-2-information-dropdown-detail .subtitle {
    font-size: 14px;
    color: #788a9f;
    line-height: normal;
    margin-top: 5px;
  }
  
  .level-2-information-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .level-2-information-dropdown-information {
    background-color: #f0f5f8;
    border-radius: 13px;
    padding: 20px;
  }
  
  .level-2-information-dropdown-information .title {
    font-size: 16px;
    color: #0a083b;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 11px;
  }
  
  .level-2-information-dropdown-information .subtitle {
    font-size: 14px;
    color: #322659;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 11px;
  }
  
  .level-2-information-dropdown-information .desc {
    font-size: 14px;
    color: #788a9f;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 5px;
  }

  .top-rank-date-range-picker .dropdown .dropdown-menu {
    left: -810px !important;
  }

  .celebration-modal {
    max-width: 700px;
    width: 100%;
}
.celebration-modal h3 {
    font-size: 32px;
    font-weight: 700;
    font-family: "Buenard", serif;
    color: rgba(23, 92, 255, 1);
}
.celebration-modal .modal-content {
    background-image: url('https://assets.vonza.com/static/dashboard-new/model-bg.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.celebration-modal .modal-body, .celebration-modal .modal-footer {
    position: relative;
    z-index: 1;
}
.celebration-modal-closeButton {
    position: absolute;
    padding: 0;
    z-index: 2;
    color: white !important;
    cursor: pointer;
    top: -12px !important;
    right: -12px !important;
    width: 28px !important;
    height: 28px !important;
    background-color: rgba(87, 88, 110, .9) !important;
    border: 1px solid rgba(var(--accent-100)) !important;
    color: rgba(var(--accent-100)) !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
}
.form-additional-fee .switch {
    height: 28px;
}
.form-additional-fee .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
}
.form-additional-fee .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.form-additional-fee .switch .slider {
    top: 3px;
    bottom: 3px;
}
.form-additional-fee .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 11px;
    background-color: #526275;
    transition: 0.25s ease;
}
.form-additional-fee .switch input:checked + .slider {
    background-color: #0047f0;
}
.form-additional-fee .switch input:checked + .slider:before {
    transform: translateX(16px);
}
.form-additional-fee .switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    border-radius: 50%;
    background-color: #fff;
    transition: 0.25s ease;
}

.payment-separator {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #999;
  font-weight: bold;
  font-size: 14px;
}

.payment-separator .line {
  flex: 1;
  height: 1px;
  background-color: #d1d1d1;
  border: none;
  margin: 0 10px;
}