@import url(https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Delicious+Handrawn:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Raleway&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap);
:root {
  --main-primary: #08a4bd;

  --main-primary-transparent: #08a4bd1f;
  --main-secondary: rgba(8, 164, 189, 0.5);
  --sub-primary: #878f9d;

  --danger-primary: #ef476f;
  --danger-secondary: #ef476f;

  --success-primary: #4fb286;
  --success-secondary: #4fb286;

  --warning-primary: #ffb60d;

  --text-black: #000;
  --text-label: #140f2d;
  --text-primary: #2d3142;
  --text-secondary: #4f5d75;

  --shadow-1-color: #babecc;

  --border-secondary: rgba(79, 93, 117, 0.25);

  --main-background: #e5e5e5;
  --white-background: #fff;
}

#__next {
  background-color: #fafafa !important;
  min-height: 100vh !important;
  /* overflow: scroll; */
}

.hand-cursor {
  cursor: pointer !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.default-card {
  border-radius: 4px;
  background-color: var(--white-background);
  box-shadow: 0 0 4px var(--shadow-1-color);
}

.react_times_button {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-secondary) !important;
  height: 31px !important;
}

.react_times_button .preview_container {
  left: 0% !important;
  width: 100% !important;
  transform: translateX(0%) !important;
  padding-left: 0px !important;
  height: 31px !important;
  line-height: 31px !important;
}

.react_times_button .preview_container svg {
  right: 6px !important;
  left: auto !important;
  height: 18px !important;
  top: auto !important;
  bottom: 6px !important;
}

.icon-value svg {
  color: black;
}

.icon-value-value {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-primary);
}

.icon-value-label {
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  color: var(--text-primary);
}

.customtag {
  padding: 5px 13px;
  border-radius: 4px;
  border: 1px solid;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  margin: 2px;
}

.default-tag {
  border-color: var(--sub-primary);
  color: var(--sub-primary);
}

.primary-tag {
  border-color: var(--main-primary);
  color: var(--main-primary);
}

.danger-tag {
  border-color: var(--danger-primary);
  color: var(--danger-primary);
}

.success-tag {
  border-color: var(--success-primary);
  color: var(--success-primary);
}

.warning-tag {
  border-color: var(--warning-primary);
  color: var(--warning-primary);
}

.default-tag-filled {
  background-color: var(--sub-primary);
  color: #fff;
}

.primary-tag-filled {
  background-color: var(--main-primary);
  color: #fff;
}

.danger-tag-filled {
  background-color: var(--danger-primary);
  color: #fff;
}

.success-tag-filled {
  background-color: var(--success-primary);
  color: #fff;
}

.warning-tag-filled {
  background-color: var(--warning-primary);
  color: #fff;
}

.success-color {
  color: var(--success-primary);
}

.failed-color {
  color: var(--danger-primary);
}

.warning-color {
  color: var(--warning-primary);
}

.question_index_box {
  background-color: var(--border-secondary);
  border-radius: 4px;
  height: 40px;
  width: 45px;
  /* margin: 5px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.btn-icon {
  width: 16px !important;
}

.btn-icon-left {
  margin-right: 10px;
}

.btn-icon-right {
  margin-left: 10px;
}

.custom-btn {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  /* line-height: 15px; */
  text-shadow: none;
}

.custom-btn-circular > .ant-btn-loading-icon .anticon {
  padding-right: 0;
}

.custom-btn-circular-loading .MuiSvgIcon-root {
  display: none;
}

.custom-btn-circular-transparent {
  border-color: transparent !important;
  background-color: transparent !important;
}

.default-btn,
.default-btn:focus,
.default-btn:hover {
  border-color: var(--sub-primary);
  background-color: transparent;
  color: var(--sub-primary);
}

.default-btn-filled,
.default-btn-filled:focus,
.default-btn-filled:hover {
  border-color: var(--sub-primary);
  background-color: var(--sub-primary);
  color: #fff;
}

.primary-btn,
.primary-btn:focus,
.primary-btn:hover {
  border-color: var(--main-primary) !important;
  background-color: transparent !important;
  color: var(--main-primary) !important;
}

.primary-btn-filled,
.primary-btn-filled:focus,
.primary-btn-filled:hover {
  border-color: var(--main-primary) !important;
  background-color: var(--main-primary) !important;
  color: #fff !important;
}

.danger-btn,
.danger-btn:focus,
.danger-btn:hover {
  border-color: var(--danger-primary) !important;
  background-color: transparent !important;
  color: var(--danger-primary) !important;
}

.danger-btn-filled,
.danger-btn-filled:focus,
.danger-btn-filled:hover {
  border-color: var(--danger-primary) !important;
  background-color: var(--danger-primary) !important;
  color: #fff !important;
}

.success-btn,
.success-btn:focus,
.success-btn:hover {
  border-color: var(--success-primary) !important;
  background-color: transparent !important;
  color: var(--success-primary) !important;
}

.success-btn-filled,
.success-btn-filled:focus,
.success-btn-filled:hover {
  border-color: var(--success-primary) !important;
  background-color: var(--success-primary) !important;
  color: #fff !important;
}

.warning-btn,
.warning-btn:focus,
.warning-btn:hover {
  border-color: var(--warning-primary) !important;
  background-color: transparent !important;
  color: var(--warning-primary) !important;
}

.warning-btn-filled,
.warning-btn-filled:focus,
.warning-btn-filled:hover {
  border-color: var(--warning-primary) !important;
  background-color: var(--warning-primary) !important;
  color: #fff !important;
}

.input-label {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;
  margin-bottom: 14px;
  color: var(--text-label);
}

.custom-input input,
.custom-input input:focus,
.custom-input input:hover {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
  border-bottom-color: var(--border-secondary);
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 21px;
}

.custom-input input:placeholder-shown {
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 21px;
}

.custom-input .ant-input-number,
.custom-input .ant-input-number:focus,
.custom-input .ant-input-number:hover {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
  border-bottom-color: var(--border-secondary);
  width: 100%;
}

.custom-input .ant-picker,
.custom-input .ant-picker:focus,
.custom-input .ant-picker:hover {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
  border-bottom-color: var(--border-secondary);
}

.error-label {
  color: var(--danger-primary);
  margin-top: 6px;
}

.preview-form.error-label {
  display: none;
}

.customCheckbox .ant-checkbox {
  border-radius: 4px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-primary);
  margin-right: 20px;
}

.customCheckbox .ant-checkbox-inner {
  background-color: transparent;
  border: none;
}

.customCheckbox .ant-checkbox-checked .ant-checkbox-inner,
.customCheckbox .ant-checkbox-checked::after {
  background-color: transparent;
  border: none;
}

.customCheckbox {
  display: flex;
}

.customCheckbox .ant-checkbox-input:focus + .ant-checkbox-inner,
.customCheckbox .ant-checkbox:hover .ant-checkbox-inner,
.customCheckbox:hover .ant-checkbox-inner {
  border-color: transparent;
}

.customCheckbox-label {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;
  color: var(--text-label);
}

.customCheckbox .ant-checkbox-checked .ant-checkbox-inner::after {
  width: 14px;
  height: 14px;
  background-color: var(--text-label);
  transform: none;
  left: 2px;
  top: 2px;
  border-radius: 4px;
  border: none;
}

.customTab .ant-tabs-tab,
.customTab .ant-tabs-tab:focus,
.customTab .ant-tabs-tab:hover {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-secondary);
}

.customTab .ant-tabs-tab-active,
.customTab .ant-tabs-tab-active:focus,
.customTab .ant-tabs-tab-active:hover {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-primary);
}

.customTab .ant-tabs-ink-bar {
  background-color: var(--main-primary);
}

/* OVERRIDE DEFAULTS START */

strong {
  font-weight: bold !important;
}

/* OVERRUDE DEFAULTS END */

/* OVERRIDE ANTD START */

.ant-modal-confirm-btns {
  display: flex;
}

.ant-input-number-handler-wrap {
  display: none;
}

.ant-select .ant-select-selector {
  border: 1px solid #08a4bd !important;
  border-radius: 4px !important;
  background: inherit !important;
  color: var(--main-primary) !important;
}

.no-border-select .ant-select-selector {
  border: none !important;
  border-radius: 0px !important;
}

.ant-select .ant-select-arrow {
  color: var(--main-primary);
}

.ant-btn {
  border-radius: 4px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.ant-btn-circle,
.ant-btn-circle-outline {
  border-radius: 50% !important;
}

.ant-modal-footer {
  display: flex;
  justify-content: flex-end;
}

/* .ant-btn-primary[disabled] {
    color: black !important;
    background-color: #f5f5f5 !important;
    border-color: #d9d9d9 !important;
}
.ant-btn-primary {
    background-color: var(--main-primary) !important;
    border-color: var(--main-primary) !important;
}

.ant-btn[disabled] span {
    color: var(--text-black) !important;
}
.ant-btn[disabled] svg {
    color: var(--text-black) !important;
}

.ant-btn svg {
    height: 15px;
    width: 15px;
    margin-right: 6px;
    color: #fff !important;
}
.ant-btn span {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 15px !important;
} */

/* OVERRIDE ANTD ENND */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--main-primary);
  border-radius: 10px;
}

.not-selectable-text {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.not-selectable-text input {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
}

.icon-image {
  width: 100%;
  height: 100%;
}

.custom-progress-bar {
  width: max-content;
  margin: 2px;
}

.custom-progress-bar-label {
  font-weight: 500;
  margin-top: 0.3125rem;
  margin-bottom: 0;
}

.custom-progress-bar .ant-progress-text {
  font-size: 0.875rem;
  color: var(--main-primary);
  font-weight: 500;
  line-height: 1.2;
}

.custom-progress-bar-divider {
  border: 0.5px solid var(--main-primary);
  margin: 0.3125rem;
  background: var(--main-primary);
  min-width: 35px;
}

.custom-progress-bar .ant-progress-status-success .ant-progress-text {
  color: var(--main-primary);
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.question-bank-exam__exam-container {
    display: block;
}

.question-bank-exam__exam-container-mobile {
    display: none;
}

@media only screen and (max-width: 760px) {
    .question-bank-exam__exam-container {
        display: none;
    }

    .question-bank-exam__exam-container-mobile {
        display: block;
    }
}

.report-table .ant-table-row {
    cursor: pointer;
}

:root {
    --display-flex: flex;
}

.on-boarding-container {
    display: var(--display-flex);
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
    background: var(--new-background);
}

.on-boarding-container .top-header {
    position: sticky;
}

.on-boarding-container__body {
    flex: 1;
    display: var(--display-flex);
    align-items: center;
    justify-content: center;
}

.on-boarding-container__body .tag-selector-container {
    width: 520px;
}

.on-boarding-container__body .tag-selector-container .exam-types-wrapper.selected-exam-types {
    height: fit-content;
}

.on-boarding-container__body .tag-selector-container .exam-types-wrapper {
    height: 150px;
}

.on-boarding-container__body .tag-selector-container .exam-types-wrapper,
.on-boarding-container__body .tag-selector-container .exam-types-wrapper.selected-exam-types {
    overflow: auto;
    padding-bottom: 10px;
}

.mcq-landing-header {
    /*min-height: fit-content;*/
    height: 90vh;
    background: var(--new-background);
    padding: 0 10%;
}

/*main-header*/

.mcq-landing-header__main {
    background: var(--new-background);
    height: 64px;
}

.mcq-landing-header__main--logo-container img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.mcq-landing-header__main--logo-container h2 {
    color: var(--white-background);
}

.mcq-landing-header__main--navigation-list {
    display: flex;
    align-content: center;
    list-style-type: none;
    margin-bottom: 0;
}

.mcq-landing-header__main--navigation-list li .filter-text {
    margin-right: 30px;
    font-weight: 400;
    color: var(--white-background);
}

.mcq-landing-header__main--navigation-button button {
    width: 90px;
    height: 36px;
    border-radius: 1px;
}

.mcq-landing-header__main--navigation-button button.primary-btn-filled {
    background: var(--white-background);
    border: none;
    color: #4D4D4D !important;
}

.mcq-landing-header__main--navigation-button button.primary-btn {
    border: 1px solid var(--white-background);
    color: var(--white-background);
}

/*hero*/

.mcq-landing-header__hero {
    margin-top: 6.3vw;
    gap: 40px;
}

.mcq-landing-header__hero--description,
.mcq-landing-header__hero--stats {
    flex: 1;
}

.mcq-landing-header__hero--description h1 {
    color: var(--white-background);
}

.mcq-landing-header__hero--description p {
    font-style: normal;
    font-weight: 500;
    font-size: 56px;
    line-height: 66px;
    color: #FFFFFF;
    margin-bottom: 0;
}

.mcq-landing-header__hero--stats-list {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
}

.mcq-landing-header__hero--stats-description {
    margin-top: 35px;
    gap: 40px;
}

.mcq-landing-header__hero--stats-description .admin-status-text {
    line-height: 20px;
    font-weight: 500;
    color: var(--white-background);
}

.mcq-landing-header__hero--stats-description-arrow {
    width: 64px;
    height: 64px;
    border-radius: 1px;
    background: var(--white-background);
}

.mcq-landing-header__hero--stats-description-arrow h2 {
    display: none;
}

/*carousel*/
.mcq-landing-header__carousel {
    position: relative;
    bottom: -8%;
}

.mcq-landing-header__carousel .slick-slider .slick-dots {
    top: 50%;
    left: 0;
    width: fit-content;
    transform: translate(-100%, -70%);
}

.mcq-landing-header__carousel .slick-slider .slick-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mcq-landing-header__carousel .slick-slider .slick-dots .mcq-slick-dots {
    padding: 0;
}

.mcq-landing-header__carousel .slick-slider .slick-dots li {
    display: flex;
    margin: 20px 0;
    width: fit-content;
    height: fit-content;
}

.mcq-landing-header__carousel .slick-dots li button:before {
    content: '';
    display: none;
}

.mcq-landing-header__carousel .slick-dots li button {
    width: 10px;
    height: 10px;
    border: 1px solid var(--white-background);
    border-radius: 50%;
    transition: all .3s;
}

.mcq-landing-header__carousel .slick-dots li.slick-active button {
    border: none;
    background: var(--white-background);
    box-shadow: 0 0 0 4px var(--new-background), 0 0 0 6px var(--white-background);
}

.mcq-slick-line {
    width: 0;
    height: 64px;
    border-left: 1px solid #FFFFFF;
    margin-top: 50px;
}

.mcq-slick-title {
    color: var(--white-background);
    transform: rotate(270deg);
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.04em;
}

/*mobile-carousel*/
.mcq-landing-header__carousel--mobile {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .mcq-landing-header {
        padding: 0 5%;
    }

    /*hero*/
    .mcq-landing-header__hero--description h1 {
        font-size: 26px;
        line-height: 30px;
    }

    .mcq-landing-header__hero--description p {
        font-size: 52px;
        line-height: 56px;
    }

    /*carousel*/
    .mcq-landing-header__carousel .slick-slider .slick-dots {
        transform: translate(-70%, -50%);
    }
}

@media only screen and (max-width: 768px) {
    /*header*/
    .mcq-landing-header {
        padding: 0 16px 64px;
    }

    .mcq-landing-header__main--navigation {
        display: none !important;
    }

    .mcq-landing-header__hero--stats-description {
        flex-direction: column;
    }

    /*hero*/
    .mcq-landing-header__hero {
        flex-direction: column;
    }

    .mcq-landing-header__hero {
        margin-top: 50px;
    }

    .mcq-landing-header__hero--description h1 {
        font-size: 24px;
        line-height: 28px;
    }

    .mcq-landing-header__hero--description p {
        font-size: 48px;
        line-height: 57px;
    }

    .mcq-landing-header__hero--stats-description-arrow {
        width: 60%;
    }

    .mcq-landing-header__hero--stats-description-arrow.flex-center {
        justify-content: space-around;
    }

    .mcq-landing-header__hero--stats-description-arrow h2 {
        display: block;
        font-weight: 400;
        color: #323232;
    }

    /*carousel*/
    .mcq-landing-header__carousel {
        display: none;
    }

    /*mobile-carousel*/
    .mcq-landing-header__carousel--mobile {
        display: block;
    }

    .mcq-slick-line,
    .mcq-slick-title {
      display: none;
    }

    .mcq-landing-header__carousel--mobile .slick-dots {
        bottom: -40px;
    }
}

@media only screen and (max-width: 400px) {
    .mcq-landing-header__hero--stats-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
}
.stats-container {
    flex-direction: column;
}

.stats-container-stat {
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 47px;
    margin-bottom: 12px;
}

.stats-container p,
.stats-container h4 {
    color: var(--white-background);
}

@media only screen and (max-width: 1024px) {
    .stats-container-stat {
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
    }

    .stats-container h4 {
        font-size: 14px;
        line-height: 16px;
    }
}

@media only screen and (max-width: 768px) {
    .stats-container-stat {
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
    }

    .stats-container h4 {
        font-size: 14px;
        line-height: 16px;
    }
}
.mcq-landing-gogreen {
    height: 300px;
    background: var(--white-background);

}

.mcq-landing-gogreen__content {
    margin-top: 80px;
}

.mcq-landing-gogreen__content h1 {
    color: #387C18;
    margin-left: 15px;
}

@media only screen and (max-width: 768px) {
    .mcq-landing-gogreen {
        height: 200px;
    }

    .mcq-landing-gogreen__content {
        margin-top: 0;
    }
}
.mcq-landing-features {
    background: #FAFAFA;
    height: 330px;
    padding: 0 10%;
    gap: 30px;
}

@media only screen and (max-width: 1024px) {
    .mcq-landing-features {
        padding: 0 5%;
    }
}

@media only screen and (max-width: 768px) {
    .mcq-landing-features {
        padding: 20% 5%;
        flex-direction: column;
        height: fit-content;
    }

    .mcq-landing-features.flex-center {
        gap: 42px;
        align-content: flex-start;
    }
}
.mcq-feature {
    align-items: flex-start;
    gap: 10px;
}

.mcq-feature__desc h3 {
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.25px;
    color: #323232;
}

.mcq-feature__desc .tab-bar-normal {
    line-height: 20px;
    letter-spacing: 0.25px;
    color: rgba(50, 50, 50, 0.8);
}

@media only screen and (max-width: 768px) {

}
.landing-best-features {
    padding: 120px 0 120px 10%;
    background: var(--white-background);
}

.landing-best-features__list-container {
    border: 8px solid rgba(192, 179, 214, 0.3);
    box-sizing: border-box;
    border-radius: 2px;
    border-right: none;
    margin-left: 44px;
    padding: 60px 60px 60px 0;
    list-style-type: none;
}

@media only screen and (max-width: 1024px) {
    .landing-best-features {
        padding: 80px 0 80px 5%;
    }
}


body {
    counter-reset: ssection;
}

.best-features {
    position: relative;
    padding: 14px 0 14px 10vw;
    min-height: 110px;
    height: fit-content;
    margin-bottom: 60px;
    counter-increment: section;
}

.best-features:last-child {
    margin-bottom: 0;
}

.best-features h2 {
    font-weight: 500;
    color: #323232;
    margin-bottom: 0.5em;
}

.best-features .tab-bar-normal {
    font-weight: 400;
    line-height: 1.5em;
    color: rgba(50, 50, 50, 0.8);
}

.best-features::before {
    /*counter-increment: section;*/
    content: counter(section, decimal-leading-zero);
    position: absolute;
    width: 100px;
    height: 100px;
    background: #EDE9F3;
    border-radius: 50%;
    top: 4.2%;
    left: -50px;
    font-weight: 500;
    font-size: 36px;
    line-height: 109px;
    color: #323232;
    display: grid;
    place-content: center;
}

@media only screen and (max-width: 768px) {
    .best-features {
        padding: 14px 0 14px 20vw;
    }
}
.landing-tags {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/LandingPage/tagsBackground.png');
}

.landing-tags__tags-container {
    width: 80%;
    height: 80%;
    background: var(--white-background);
    padding: 120px 100px 70px;
}

.landing-tags__tags-container--header__desc {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: rgba(50, 50, 50, 0.8);
}

.landing-tags__tags-container--body {
    margin-top: 35px;
}

.landing-tags__tags-container--body__filter-container {
    gap: 20%;
}

.landing-tags__tags-container--body__filter-container .ant-input-search {
    height: 53px;
    display: flex;
    flex: 1;
    align-items: center;
}

.landing-tags__tags-container--body__filter-container .ant-input-search input {
    border: none !important;
}

.landing-tags__tags-container--body__filter-container .ant-input-search,
.landing-tags__tags-container--body__filter-container .ant-input-search:hover,
.landing-tags__tags-container--body__filter-container .ant-input-search:focus {
    border: 1px solid #CBCBCB;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.landing-tags__tags-container--body__filter-container .ant-input-search-icon::before {
    border-left: none;
}

.landing-tags__tags-container--body__filter {
    flex: 1;
    gap: 8px;
}

.landing-tags__tags-container--body__filter .tags-main-container {
    width: 70px;
    border: 1px solid rgba(213, 213, 213, 0.72);
    box-sizing: border-box;
    border-radius: 2px;
}

.landing-tags__tags-container--body__tags-wrapper {
    height: 240px;
    overflow: scroll;
}

.landing-tags__tags-container--body__tags-list {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    gap: 10px;
}

.landing-tags-mobile,
.landing-tags-mobile__tags-container {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .landing-tags__tags-container {
        padding: 60px;
    }

    .landing-tags__tags-container--body__tags-wrapper {
        height: 310px;
    }

    .landing-tags__tags-container--body__filter-container {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .landing-tags__tags-container--body__filter {
        margin: 20px 0;
    }
}

@media only screen and (max-width: 768px) {
    .landing-tags {
        height: fit-content;
    }

    .landing-tags__tags-container {
        display: none;
    }

    .landing-tags-mobile {
        display: block;
        padding: 45px;
    }

    .landing-tags-mobile .landing-title.landing-title-center,
    .landing-tags__tags-container--header__desc {
        color: var(--white-background);
    }

    .landing-tags-mobile .landing-title.landing-title-center::after {
        border-bottom: 3px solid var(--white-background)
    }

    .landing-tags-mobile__tags-container {
        display: block;
        background: var(--white-background);
        min-height: 300px;
        padding: 24px;
    }

    .landing-tags-mobile__tags-container--list {
        display: flex;
        flex-flow: row wrap;
        gap: 8px;
    }
}
:root {
    --main-primary: #08A4BD;
    --main-secondary: rgba(8, 164, 189, 0.5);
    --sub-primary: #878F9D;

    --danger-primary: #EF476F;
    --danger-secondary: #EF476F;
    --success-primary: #4FB286;
    --success-secondary: #4FB286;

    --warning-primary: #FFB60D;

    --text-black: #000;
    --text-label: #140F2D;
    --text-primary: #2D3142;
    --text-secondary: #4F5D75;

    --shadow-1-color: #BABECC;

    --border-secondary: rgba(79, 93, 117, 0.25);

    --main-background: #F6F8FF;
    --white-background: #fff;

}

.home-content-title {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-primary);
}

.post-title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--text-primary);
}

.post-subtitle {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 14px;
    color: var(--text-primary);
}

.live-exam-info {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}

.filter-text {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-secondary);
}

.price-text {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    color: var(--main-primary);
}

.question-stat-text {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: var(--text-primary);
}

.question-set-title {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: var(--text-primary);
}

.question-set-subtitle {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 15px;
    color: var(--text-secondary);
}

.exam-info {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--main-primary);
}

.stats-value {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-primary);
}

.stats-label {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 15px;
    color: var(--text-primary);
}

.exam-info-value {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 15px;
    color: var(--text-secondary);
}

.sidebar-header {
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;
    color: var(--text-secondary);
}

.sidebar-title {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-secondary);
}

.sidebar-subtitle {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-secondary);
}

.left-sidebar-menu {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    color: var(--text-secondary);
}

.price-information {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;

    color: #08A4BD;
}

.left-sidebar-menu-highlighted {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    color: var(--text-primary);
}

.right-sidebar-menu {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-primary);
}

.hall-creator-profile {
    font-family: Raleway;
    font-style: normal;
    font-weight: 300;
    font-size: 9px;
    line-height: 11px;
    text-align: center;

    color: var(--text-secondary);
}

.icon-description {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 14px;

    color: rgba(0, 0, 0, 0.6);
}

.right-sidebar-menu-highlighted {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-primary);
}

.sidebar-content-header {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    color: var(--main-primary);
}

.mcq-title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--text-primary);
}

.sidebar-content-title {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: var(--text-secondary);
}

.sidebar-content-subtitle {
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 13px;
    color: var(--text-secondary);
}

.tab-bar-selected {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-primary);
}

.privacy-policy-dark-paragraph {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: var(--text-primary);
}

.pp-normal-paragraph {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
    color: var(--text-primary);
}

.tab-bar-normal {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-secondary);
}

.start-test {
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
}

.recommended-institute {
    font-style: normal;
    font-weight: 300;
    font-size: 10px;
    line-height: 12px;
    text-align: center;

    color: var(--text-secondary);
}

.sub-header {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0.5px;
    text-align: left;
    color: rgba(0, 0, 0, 0.8);
}

.mock-exam-publish-details {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;

    color: rgba(0, 0, 0, 0.6);
}

.creator-landing-title {
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    text-align: center;

    color: white;
}

.creator-landing-description {
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    line-height: 31px;
    text-align: center;

    color: #FFFFFF;
}

.step-title {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;

    color: rgba(0, 0, 0, 0.8);
}

.library-description {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;

    color: var(--text-primary);
}

.error-redirect-link, .preview-form-input-fields .custom-input .error-label {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
}

.library-creator-name {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;

    color: var(--main-primary);
}

.admin-stat-value {
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 45px;
    text-align: center;

    color: var(--main-primary);
}

.admin-status-text {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
}

.publish-exam {
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;

    color: rgba(0, 0, 0, 0.7);
}

.library-mobile-exam-type {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 16px;

    color: rgba(0, 0, 0, 0.7);
}

.exam-page-header-title {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    text-align: center;

    color: #210454;
}

.landing-title {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #210454;
    position: relative;
}

.landing-title.landing-title-center {
    color: #323232;
    text-align: center;
}

.landing-title::after {
    content: '';
    position: absolute;
    width: 44px;
    border-bottom: 3px solid var(--new-background);
    left: 0;
    bottom: -10px;
}

.landing-title.landing-title-center::after {
    left: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 3px solid #323232;
}

.f-32-lh-40 {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
    color: #323232;
}

.f-56-lh-66 {
    font-style: normal;
    font-weight: 600;
    font-size: 56px;
    line-height: 66px;
    text-align: center;
    color: #323232;
}

h1 {
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;
    color: var(--text-primary);
}

h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: var(--text-primary);
}

h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-primary);
}

h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--text-primary);
}

h5 {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-secondary);
}

h6 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    color: var(--text-secondary);
}

/*@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap");*/
body {
  /* font-family: Encode Sans !important; */
  font-family: Inter !important;
  line-height: 16px;
  scroll-behavior: smooth;
  /*overflow-y: auto !important;
    -ms-overflow-y: auto !important;*/
}

:root {
  --main-primary: #08a4bd;
  --main-secondary: rgba(8, 164, 189, 0.5);
  --sub-primary: #878f9d;

  --danger-primary: #ef476f;
  --danger-secondary: #ef476f;
  --success-primary: #4fb286;
  --success-secondary: #4fb286;

  --warning-primary: #ffb60d;

  --warning-error: #fd6f8d;

  --text-black: #000;
  --text-primary: #2d3142;
  --text-secondary: #4f5d75;

  --shadow-1-color: #babecc;

  --border-secondary: rgba(79, 93, 117, 0.25);

  --main-background: #f6f8ff;
  --white-background: #fff;
  --header-background: #2d3142;

  --new-background: #210454;
}

.expand-hover:hover {
  transform: scale(1.08);
}

.marked-indicator {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--warning-primary);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.marked-indicator .marked-icon {
  height: 13px;
  color: white;
}

/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
  background-color: var(--main-background);
}

/* Firefox syntax */
:-moz-full-screen {
  background-color: var(--main-background);
}

/* IE/Edge syntax */
:-ms-fullscreen {
  background-color: var(--main-background);
}

/* Standard syntax */
:fullscreen {
  background-color: var(--main-background);
}

.index-viewer-card {
  height: 100%;
}

.item-enter {
  opacity: 0;
  transform: translate(0px, -20px);
}

.item-enter-active {
  opacity: 1;
  transition: all 300ms ease-in;
  transform: translate(0px, 0px);
}

.item-exit {
  opacity: 1;
  transform: translate(0px, 0px);
}

.item-exit-active {
  opacity: 0;
  transition: all 300ms ease-in;
  transform: translate(0px, 20px);
}

.question_popup .ant-popover-arrow {
  display: none !important;
}

.question_popup .ant-popover-content {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 4px var(--shadow-1-color);
}

.underline_input,
.underline_input:hover {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
  border-bottom-color: var(--border-secondary);
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  /*line-height: 21px;*/
}

.underline_input:focus,
.underline_input.ant-input-affix-wrapper-focused {
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3);
  border-bottom-color: var(--border-secondary);
}

.right-sidebar-mains {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.home-right-sidebar {
  min-width: 300px;
}

.home-right-sidebar-icon {
  color: var(--text-black);
  height: 20px;
  margin-right: 16px;
}

.top-header {
  background-color: var(--new-background);
  height: 64px;
  display: flex;
  position: fixed;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.logo-image {
  width: 28px;
}

.logo-title {
  /* font-style: normal; */
  font-weight: bold;
  font-size: 18px;
  line-height: 16px;
  color: white;
  margin-left: 10px;
}

.search-input-wrapper {
  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.search-input {
  width: 40dvw;
}

.search-input input {
  border-radius: 5px;
}

.search-input input,
.search-input .ant-input-group-addon button {
  height: 40px;
}

.search-input .ant-input-group-addon button {
  background: var(--new-background);
  border: 1px solid transparent;
}

.header-search {
  width: 600px;
}

.header-search,
.header-search:hover {
  background-color: transparent;
  border: 1px solid var(--text-secondary);
  border-radius: 4px;
}

.header-search.ant-input-affix-wrapper-focused {
  border: 1px solid #ffffff;
}

.header-search input {
  background-color: transparent;
  border: none;
  height: 32px;
}

.header-search input:focus {
  background: white;
  color: var(--text-primary);
}

.header-search .ant-input:placeholder-shown {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  /* color: var(--text-secondary) !important; */
}

.header-search .ant-input-group-addon button {
  background: var(--new-background);
  border: 1px solid var(--main-primary);
  border-radius: 0 4px 4px 0 !important;
  height: 40px;
}

.header-search .ant-input-group {
  display: flex;
}

.header-search svg {
  color: #ffffff;
}

.header-search .ant-input {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  color: white;
}

.right-sidebar-highlighter {
  height: 2px;
  background-color: var(--main-primary);
  width: 100%;
}

.side-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 12px;
  /*position: relative;*/
}

/*.side-menu-item:hover::before,
.side-menu-item-selected::before {
    content: '';
    position: absolute;
    width: 0.2rem;
    left: 0;
    height: 100%;
    background: var(--danger-primary);

}*/

.side-menu-item:hover {
  /*padding-left: 20px;*/
  background: var(--main-primary);
}

.side-menu-item span {
  color: white;
}

.side-menu-item svg,
.side-menu-item-selected svg {
  color: white;
}

.side-menu-item-selected {
  background-color: var(--main-primary);
}

/*.side-menu-item-selected svg {
    color: var(--main-primary);
}*/

.customDragger {
  background-color: transparent !important;
  border: none !important;
}

.customDragger .ant-upload-drag-container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

.upload-title {
  margin-top: 40px;
  font-weight: normal;
  font-size: 24px;
  line-height: 28px;
  color: var(--main-primary);
}

.upload-main-title {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.upload-trigger {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  border-radius: 4px;
  padding: 10px;
  margin-top: 40px;
  margin-bottom: 40px;
  border: 1px solid var(--main-primary);
}

.back-header-back-icon {
}

.back-header-back-label {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-secondary);
}

.back-header-title {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  color: var(--text-primary);
}

.underline-link {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  text-decoration-line: underline;
  color: var(--main-primary);
}

.result-question-item {
  width: 40px;
  height: 40px;
  margin-right: 2px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: normal;
  font-size: 14px;
  line-height: 24px;
}

.result-question-item:hover {
  transform: scale(1.07);
}

.result-indicator {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  margin-left: 28px;
}

.result-title {
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 28px;
  color: var(--text-primary);
}

.exam-overview-time {
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
}

.result-congratulation-wrapper {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-congratulation-wrapper a {
  width: 100%;
  display: flex;
  justify-content: center;
}

.result-congratulation {
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  color: var(--main-primary);
  margin-bottom: 20px;
}

.user-passed {
  color: var(--success-primary);
}

.user-failed {
  color: var(--danger-primary);
}

.result-action-button {
  display: flex;
  padding-top: 22px;
  flex-wrap: wrap;
}

.result-stat-container {
  padding: 20px;
}

.result-stat-container > .admin-status-text {
  color: var(--main-primary);
  text-align: center;
}

.result-stat-container > .result-progress-bar-container {
  flex-flow: row wrap;
}

.exam-page-container .ant-progress .ant-progress-inner,
.mobile-timer-progress .ant-progress-inner {
  width: 24px !important;
  height: 24px !important;
}

.progress-bar-text {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
}

.result-progress-bar-container .custom-progress-bar h4 {
  font-size: 14px;
  line-height: 16px;
}

.result-stat-container__purchase-question-bank {
  /*margin: 0 auto;*/
  padding: 20px;
}

.result-stat-container__purchase-question-bank
  .individual-mcq-description-container__exam-desc {
  width: 100%;
}

.result-stat-container__purchase-question-bank
  .individual-mcq-description-container__exam-desc--price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-icon-container {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.stat-icon-image {
  width: 100%;
  height: 100%;
}

.width-70 {
  width: 70%;
}

.width-30 {
  width: 30%;
}

.width-60 {
  width: 60%;
}

.width-40 {
  width: 40%;
}

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

.margin-bottom-10 {
  margin-bottom: 10px;
}

.overview-text {
  margin-bottom: 12px;
}

.result-self-rank {
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  color: var(--main-primary);
  margin-top: 8px;
}

.top-score-title {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 19px;
  color: var(--main-primary);
}

.top-score-label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: var(--text-primary);
}

.top-score-score {
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  columns: var(--text-secondary);
}

.question-viewer-container {
  background-color: var(--white-background);
  box-shadow: 0 0 4px var(--shadow-1-color);
  border-radius: 4px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  /* margin: 8px; */
  height: 100%;
  overflow: hidden;
}

.question-switcher .arrow {
  height: 30px;
  width: 30px;
  color: var(--main-primary);
}

.question-switcher .index-shower {
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 23px;
  color: var(--text-black);
}

.question-title {
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 33px;
  color: var(--text-primary);
  text-align: center;
}

.question-title-width {
  width: 94%;
}

.question-image {
  margin-top: 70px;
}

.question-image img {
  max-width: 100%;
  min-height: 100px;
}

.hint-container {
  border-radius: 5px;
  padding: 20px;
  background: #08a4bd1f;
  margin-top: 15px;
  /*align-items: center;*/
}

.hint-container .hint-icon {
  width: 20px;
  height: 18px;
  margin-right: 5px;
  position: relative;
  top: -3px;
}

.result-report-item {
  position: absolute;
  right: 0;
  height: 25px;
  width: 25px;
  background: white;
}

.result-report-item.open {
  /*right: 0;*/
}

.report-result-data-dropdown .ant-dropdown-menu-item {
  font-size: 12px;
}

.report-result-data-dropdown .ant-dropdown-menu-item:hover {
  background: var(--main-primary);
  color: white;
}

.hint-container p {
  margin-bottom: 0;
  /*align-items: center;*/
}

.hint-container,
.hint-container p,
.hint-text-wrapper,
.tip-image-container {
  display: flex;
}

.hint-type-image-wrapper {
  margin-left: 10px;
}

.tip-image-container {
  flex-flow: wrap;
  margin-bottom: 10px;
}

.tip-image-container img {
  max-width: 100%;
  max-height: 200px;
}

.hint-container .right-sidebar-menu-highlighted.answer {
  white-space: break-spaces;
  font-weight: 400;
  line-height: 18px;
  margin-left: 10px;
}

.hint-container .right-sidebar-menu-highlighted.answer.hint-type-image {
  margin-left: 0;
}

.question-description {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: var(--text-primary);
}

.question-match-title {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.question-match-option {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
}

.option-item-string {
  border: 2px solid var(--border-secondary);
  border-radius: 4px;
  color: var(--text-secondary);
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  padding: 13px 40px;
  margin-bottom: 18px;
}

.option-item-image-label {
  border: 2px solid var(--border-secondary);
  border-radius: 4px;
  width: 100%;
  color: var(--text-secondary);
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  padding: 13px 0px;
  margin-bottom: 10px;
}

.option-item-image-img {
  height: 200px;
  width: 200px;
  margin-bottom: 10px;
}

.option-item-image {
  border: 2px solid var(--border-secondary);
  align-self: stretch;
  max-height: 200px;
  margin: 10px;
  border-radius: 4px;
  padding: 12px;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  /* max-width: 200px; */
}

/* STYLES.CSS START */

/*.container{
    height: inherit;
}*/

/*questionListView*/
.question-heading {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  font-style: normal;
}

.question-details {
  padding-top: 13px;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  text-align: left;

  color: #2d3142;
}

.channel .hall-name {
  width: max-content;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;

  color: #08a4bd;
}

.rating-details {
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  margin-left: 8px;
  color: #000000;
}

.rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  /* position: absolute; */
}

.rating span {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */

  color: #2d3142;
}

.purchase {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.purchase span {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */

  color: #2d3142;
}

.avg-score {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.avg-score span {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */

  color: #2d3142;
}

.price-button {
  display: flex;

  width: 102px;
  height: 27px;
  background: white;
  color: #08a4bd;

  border: 1px solid #08a4bd;
  box-sizing: border-box;
  border-radius: 4px;
}

.price-button span {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
}

.reviewer {
  display: flex;
}

.reviewer-rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 6px;
}

.reviewer span {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;

  color: #4f5d75;
}

.review-date {
  display: flex;
  justify-content: flex-end;
  padding-right: 4%;

  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */

  color: #4f5d75;
}

.review-details {
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;

  color: #2d3142;
}

.exam-details-container {
  width: 290px;
  height: fit-content;
  border: 1px solid rgba(79, 93, 117, 0.25);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 8px 16px 8px 16px;
}

.exam-details-container .ant-row {
  margin-bottom: 4px;
}

.exam-details-text {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;

  color: #08a4bd;
}

.exam-details-numbers {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  text-align: right;

  color: #4f5d75;
}

/* .justify-right{
    display: flex;
    justify-content: flex-end;
} */

/* .rating-details{
    font-family: Raleway,serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 15px;
    margin-left: 8px;
    color: #000000;
} */

.display-flex {
  display: flex;
  flex-direction: column;
}

.hall-name-details {
  font-style: normal;
  font-weight: 300;
  font-size: 9px;
  line-height: 11px;
  /* identical to box height */

  color: #4f5d75;
}

/*
.main-container{
    height: 100%;
    min-height: 100vh;
    width: 100%;
}
*/

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.login-form{
    padding: 51px 13px 16px 12px;
    width: 317px;
    height: fit-content;
    !*border: 1px solid #fff;*!
    border-radius: 4px;
    !* height: 498px; *!
    box-shadow: 0 0 4px rgba(79, 93, 117, 0.25);
}*/

/*.heading-container{
    padding-bottom: 38px;
    font-family: Raleway, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;

    color: #2D3142;
}*/

.login-form-forgot,
.login-form-forgot:hover,
.login-form-forgot:focus {
  float: right;
  padding-right: 20px;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */

  text-align: center;
  text-decoration-line: underline;

  color: #4f5d75;
}

.login-form-button,
.login-form-button:hover,
.login-form-button:focus {
  background: #08a4bd;
  border-radius: 4px;
  border-color: #08a4bd;
  width: 100%;
}

.login-form-button span {
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  text-align: center;

  color: #ffffff;
}

.hr-text {
  margin: 0;
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: 0.5;
}

.hr-text:before {
  content: "";
  background: rgba(79, 93, 117, 0.25);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.hr-text:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  color: #000000;
  padding: 0 0.5em;
  line-height: 1.5em;

  background-color: #fcfcfa;
}

/*.padding-left-right{
    padding: 0 15px 0 14px;
}*/

.login-options {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 15px;
  text-align: center;

  color: #140f2d;
}

.login-items {
  display: flex;
  flex-direction: row;
}

.login-option-items .ant-form-item-control-input-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-option-items {
  padding-top: 20px;
  margin: 0;
  padding-bottom: 20px;
}

/*.new-account{
    font-family: Raleway,serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 15px;
    text-align: center;

    color: #2D3142;
}

.new-account a{
    text-decoration-line: underline;
    font-weight: 600;
    color: #08A4BD;
}*/

.username-container span,
.password-container span {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;

  color: #140f2d;
}

.username-container input,
.password-container input {
  border-radius: 0;
  padding: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid rgba(79, 93, 117, 0.25);
  background-color: transparent !important;
}

.username-container .has-error input,
.password-container .has-error input {
  border-radius: 0;
  padding: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid red;
}

.username-container input:focus,
.username-container input:hover,
.password-container input:focus,
.password-container input:hover {
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgba(79, 93, 117, 0.25);
  box-shadow: rgba(0, 0, 0, 0);

  -webkit-box-shadow: none;
}

.username-container .ant-form-item-has-error input:focus,
.username-container .has-error input:hover,
.password-container .ant-form-item-has-error input:focus,
.password-container .has-error input:hover {
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid red;
  box-shadow: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
}

.radio-group .ant-radio-inner {
  width: 14px;
  height: 14px;
}

.radio-group .ant-radio-inner::after {
  width: 6px;
  height: 6px;
}

.radio-group label {
  font-size: 14px;
}

.ant-form-item-explain {
  font-size: 12px;
}

.radio-group .ant-form-item-explain {
  margin-left: -89px;
}

.confirm-password-error {
  color: #ff4d4f;
  padding-left: 14px;
}

.ant-form-item-label > label.ant-form-item-required::before {
  content: "";
  padding-left: 11px;
}

/* STYLES.CSS END */

.mobile-view {
  display: none;
}

.normal-view {
  display: initial;
}

.wrap-row-mobile-only {
  flex-wrap: nowrap;
}

.ant-modal.result-solution-modal {
  width: 625px !important;
}

.result-solution-chevron {
  width: 40px;
}
.result-solution-chevron.hand-cursor {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.exam-filter-item-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-filter-item-list .ant-form-item {
  margin-bottom: 0;
}

.exam-filter-item-list__selectors {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1 1 560px;
}

.exam-filter-item-list__selectors .ant-form-item {
  flex: 1 1 180px;
  min-width: 170px;
}

.exam-filter-item-list__selectors .ant-select {
  width: 100%;
}

.exam-filter-item-list__selectors .ant-select-selector {
  width: 100% !important;
  min-height: 40px !important;
  align-items: center;
}

.exam-filter-item-list__selectors
  .ant-select-selector
  .ant-select-selection-search-input {
  height: 100% !important;
}

.exam-filter-item-list__selectors
  .ant-select-multiple
  .ant-select-selection-item {
  max-width: 100px;
}

.exam-search-input {
  width: 100%;
  max-width: 420px;
  height: 40px;
}

.exam-filter-item-list > .ant-form-item {
  flex: 1 1 320px;
  min-width: 220px;
}

.exam-filter-item-list > .ant-form-item .ant-form-item-control,
.exam-filter-item-list > .ant-form-item .ant-form-item-control-input,
.exam-filter-item-list > .ant-form-item .ant-form-item-control-input-content {
  width: 100%;
}

@media only screen and (max-width: 992px) {
  .exam-filter-item-list {
    align-items: stretch;
  }

  .exam-filter-item-list__selectors {
    flex: 1 1 100%;
    gap: 8px;
  }

  .exam-filter-item-list__selectors .ant-form-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
  }

  .exam-filter-item-list > .ant-form-item {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .exam-search-input {
    width: 100%;
    max-width: none;
  }
}

@media only screen and (max-width: 640px) {
  .exam-filter-item-list__selectors .ant-form-item {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

.clear-all-filter-btn {
  cursor: pointer;
  background: transparent;
  border: none;
}

.exam-details-popover-content {
  padding: 15px;
}

.mobile-exam-submit-btn,
.mobile-exam-submit-btn:hover,
.mobile-exam-submit-btn:focus {
  background-color: var(--new-background) !important;
  border-color: var(--new-background) !important;
}

@media only screen and (max-width: 1100px) {
  .home-question-overview {
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }

  .home-overview {
    flex: 1;
    min-width: 100%;
    max-width: 100%;
  }
}

.mobile-question-container .carousel-root,
.mobile-question-container .carousel-root .carousel,
.mobile-question-container .slider-wrapper,
.mobile-question-container .slider-wrapper ul {
  height: 100% !important;
}

.mobile-exam-prev-btn {
  border-color: #d9d9d9 !important;
  color: #303030 !important;
}

.carousel .slide {
  background-color: transparent !important;
}

.result-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 20px;
}

.result-container.review-given {
  /*margin-bottom: 20px;*/
}

.collection-result-mcq-container {
  padding: 20px;
}

.collection-result-mcq-container__list {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

.collection-result-mcq-container {
}

svg.mobile-view-header-search-icon {
  display: none;
}

.mobile-view-search.ant-input-affix-wrapper:hover {
  border-color: transparent;
}

.MathJax_CHTML {
  font-size: 100% !important;
}

.ant-modal.image-preview-modal {
  /* width: 600px !important; */
  max-width: fit-content;
}

.ant-modal.image-preview-modal .ant-modal-body {
  padding: 0;
}

.ant-modal.image-preview-modal img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.payment-ui-modal {
}

.premium-feature-modal {
}

@media only screen and (max-width: 992px) {
  .ant-modal.result-solution-modal {
    width: 625px !important;
  }
}

/* MOBILE CSS OVERRIDE START*/

@media only screen and (max-width: 768px) {
  .ant-btn.result-action-button__check-answer {
    display: none !important;
  }

  .result-stat-container__purchase-question-bank
    .individual-mcq-description-container__exam-desc--price-container {
    display: none;
  }

  .collection-result-mcq-container {
    margin-bottom: 50px;
  }

  .header-search {
    display: none;
  }

  .mobile-view-header-search-icon {
    margin-right: 20px;
  }

  svg.header-input-back-icon,
  svg.mobile-view-header-search-icon {
    fill: white;
  }

  svg.header-input-back-icon {
    margin-right: 20px;
  }

  svg.mobile-view-header-search-icon {
    display: flex;
    width: 25px;
    height: 25px;
    /*transform: rotate(90deg);*/
  }

  /*.hint-container .right-sidebar-menu-highlighted.answer {
        !*font-size: 13px;*!
        line-height: 18px;
    }*/
  .creator-left {
    display: none;
  }

  .creator-right {
    width: 100% !important;
  }

  .hint-container {
    flex-direction: column;
    padding: 10px;
  }

  .hint-text-wrapper {
    margin-bottom: 10px;
  }

  .tip-image-container .hint-image {
    max-width: 100%;
  }

  .mjx-mrow {
    /* display:flex !important; */
    /* align-items:baseline; */
  }

  .mobile-question-container {
    /* max-width: calc(100vw - 100px); */
  }

  .react-mathjax-preview-result {
    display: flex;
    flex-wrap: wrap;
    overflow-x: scroll;
    max-width: 70vw;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .react-mathjax-preview-result::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .react-mathjax-preview-result {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .mobile-view {
    display: initial;
  }

  .normal-view {
    display: none;
  }

  .result-overview {
    width: 100% !important;
  }

  .result-container {
    flex-direction: column-reverse !important;
    padding: 10px;
    max-width: 100%;
    width: 100%;
  }
}

@media only screen and (max-width: 760px) {
  .ant-modal.result-solution-modal {
    width: 95% !important;
  }

  .wrap-row-mobile-only {
    flex-wrap: wrap;
  }

  .result-main-staftus {
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .result-question-item {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .result-overview {
    width: 100% !important;
    height: auto !important;
  }

  .result-main {
    padding: 12px !important;
  }

  .result-container {
    flex-direction: column-reverse !important;
    /*padding-top: 10px;*/
  }

  .result-indicator {
    margin-left: 8px;
    /*margin-top: 8px;*/
  }

  .result-main-status {
    margin-top: 10px;
  }

  .mobile-question-container .carousel-root,
  .mobile-question-container .carousel-root .carousel,
  .mobile-question-container .slider-wrapper,
  .mobile-question-container .slider-wrapper ul {
    height: 100% !important;
  }

  .carousel .slide {
    background-color: transparent !important;
  }

  .question-item {
    /* height: null !important; */
    /* overflow: null !important; */
    padding: 20px;
  }

  .question-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
  }

  .option-item-image-img {
    height: 100px;
    width: 100px;
  }

  .image-col {
    min-width: 140px !important;
  }

  .index-viewer-card {
    padding: 8px !important;
    box-shadow: none !important;
    /* height: 260px !important; */
  }

  .option-item-string {
    font-size: 14px !important;
    padding: 14px 10px;
    display: flex;
    border-radius: 5px;
  }

  .option-item-image-label {
    font-size: 14px;
    padding: 8px 0px;
  }

  .question-match-group {
    width: 100%;
    margin-top: 8px;
  }

  .question-match-option {
    font-size: 14px;
  }
}

@media only screen and (max-width: 568px) {
  .hint-container {
    padding: 5px;
  }

  .result-solution-modal .ant-modal-body {
    padding: 20px 0 0;
  }

  .ant-modal.result-solution-modal {
    width: 95% !important;
  }
}

/* MOBILE CSS OVERRIDE END*/

.exam-list-item {
  border: 1px solid var(--border-secondary);
  padding: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-radius: 5px;
  margin-bottom: 8px;
}

.exam-list-item-selected {
  background-color: var(--main-primary);
  color: #ffffff;
}

.creator-right {
  padding-top: 64px;
  width: calc(100% - 250px);
  /*padding: 10px;*/
  min-height: 100vh;
}

.creator-left {
  width: 250px;
  position: relative;
}

.question-toggle-arrow {
  border: none;
  height: 200px;
  background: var(--border-secondary);
  border-radius: 0px !important;
  display: flex !important;
  justify-content: center !important;
  width: 38px;
  margin: 0 !important;
  /* background: rgba(0,0,0,0.4) ; */
}

.question-toggle-arrow:not(.disabled):hover,
.question-toggle-arrow:not(.disabled):focus {
  background: var(--border-secondary) !important;
  border-radius: 4px !important;
  transform: scale(1) !important;
}

.question-toggle-arrow svg {
  font-size: 60px;
}

.hall-main-container {
  min-height: 100vh;
}

.hall-page-wrapper {
  flex: 1;
  padding-top: 63px;
}

.hall-main-wrapper {
  /*padding: 20px;*/
  width: 100%;
}

.hall-wrapper {
  padding: 8px;
  max-width: 33.33%;
  flex: 0 0 33.33%;
}

.hall-container {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

.stat-wrapper {
  justify-content: space-between;
  align-items: center;
}

.hall-image {
  margin-right: 15px;
}

.hall-stat-container {
  justify-content: space-between;
}

.hc-cover-image {
  object-fit: cover;
  width: 100%;
  height: 116px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.hc-profile-wrapper {
  display: flex;
  height: 60px;
  align-items: center;
}

.hc-profile-wrapper h3 {
  margin-left: 30px;
  font-weight: 500;
}

.hc-profile-image {
  width: 83px;
  height: 83px;
  background: white;
  position: relative;
  padding: 5px;
  left: 20px;
  bottom: 30px;
}

/*.hc-profile-image .ant-avatar-square {
    min-width: 75px;
}*/

.hc-container-wrapper {
  padding: 0 20px 20px;
}

/* individual hall */

.individual-hall {
  display: flex;
  flex-direction: column;
}

.individual-hall__header--profile {
  margin-left: 10px;
}

.individual-hall__body--tags-container {
  margin: 20px 0;
  display: flex;
}

.individual-hall__body-tags-container__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
  overflow: hidden;
  max-width: 100%;
}

.individual-hall__body-tags-container__row .tag-content__tag {
  white-space: nowrap;
  flex-shrink: 0;
}

.tag-content__tag--more {
  background: rgba(111, 108, 144, 0.12);
  color: #6f6c90;
  font-weight: 600;
}

.individual-hall__body-tags-container__column {
  padding: 4px;
}

.individual-hall__body-tags-container__column.hidden-item-count {
  display: flex;
  align-items: flex-end;
}

.individual-hall__body > .question-stat-text {
  color: rgba(0, 0, 0, 0.6);
}

.individual-hall__body--description {
  height: calc(15px * 4);
}

.hall-description {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  position: relative;
  padding-right: 10px;
  max-height: calc(15px * 4);
  overflow: hidden;
  margin: 0;
  text-align: justify;

  color: rgba(0, 0, 0, 0.6);
}

.hall-description::before {
  position: absolute;
  content: "...";
  bottom: 0;
  right: 0;
}

.hall-description::after {
  position: absolute;
  content: "";
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}
/* end individual hall */

.hall-desc-container {
  margin-top: 20px;
}

.hall-description-wrapper {
  height: 56px;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 992px) {
  .hall-wrapper {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .hc-profile-wrapper h3 {
    font-size: 16px;
    line-height: 19px;
  }
}

@media only screen and (max-width: 768px) {
  .normal-view {
    display: none;
  }

  .hall-wrapper {
    max-width: 50%;
    flex: 0 0 50%;
  }
}

@media only screen and (max-width: 576px) {
  .hall-wrapper {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

@media only screen and (max-width: 200px) {
  .hall-wrapper {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

.user-profile-main-container {
  display: flex;
  flex-direction: column;
  /*min-height: 100vh;*/
}

.user-profile-main-row {
  position: relative;
  flex: 1;
  top: 63px;
  /*padding: 20px;*/
}

.user-profile-main-col {
  padding: 0 20px 20px;
  flex: 1;
  width: calc(100% - 250px);
}

.user-profile-main-col .customTab {
  padding: 0 !important;
}

.side-bar-main-container.box-container {
  width: 90%;
  height: 100%;
}

.profile-container {
  margin: 30px 0;
  flex-direction: column;
}

.user-info {
  margin-top: 20px;
}

.user-info > p {
  text-align: center;
  margin-bottom: 5px;
}

.user-stat-heading {
  margin: 20px 0;
}

/*.chart-container{*/
/*    height: 450px;*/
/*}*/

.user-profile-main-col .chart-container .bar-chart,
.user-profile-main-col .chart-container .bar-chart canvas,
.user-profile-main-col .chart-container .line-chart,
.user-profile-main-col .chart-container .line-chart canvas {
  width: 100%;
  height: 100% !important;
  max-height: 100%;
}

.user-graph-container canvas {
  width: 100% !important;
  /*height: 40vh !important;*/
}

.user-profile-main-col .chart-container .line-chart canvas,
.user-profile-main-col .chart-container .bar-chart canvas {
  padding: 20px 10px 10px;
}

.user-profile-main-col .chart-container .bar-chart,
.user-profile-main-col .chart-container .line-chart {
  background: #fff;
}

.user-profile-wrapper {
  /*height: 200px;*/
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  background: transparent !important;
  box-shadow: none !important;
  /*border: 1px solid #DDDDDD;*/
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-bg-header {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100vw - 90px);
  height: 50px;
  background: #edf5f8;
  z-index: -1;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.user-info-wrapper {
  align-items: center;
  /*width: 50%;*/
}

.user-info-wrapper__action-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}

.user-info-wrapper__action-menu--menu-item {
  list-style: none;
  margin-bottom: 0;
  height: 32px;
  padding: 0 10px;
  width: 100px;
  cursor: pointer;
}

.user-info-wrapper__action-menu--menu-item:hover {
  background: var(--main-primary);
}

.user-info-wrapper__action-menu--menu-item:hover > li {
  color: #ffffff;
}

.user-info-wrapper__action-menu--menu-item li {
  height: 100%;
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  color: var(--text-secondary);
}

.user-info-wrapper__action-menu--menu-item li > svg {
  margin-right: 10px;
}

.user-full-name {
  margin-left: 10px;
}

.user-full-name > h1,
.user-full-name > p {
  margin: 0;
}

.upload-button-container {
  position: absolute;
  z-index: 1;
  bottom: -8%;
  right: -8%;
}

.image-container {
  position: relative;
}

.profile-image-upload-button {
  border-radius: 50% !important;
  border: none;
  padding: 0;
  height: 23px;
  width: 23px;
}

.profile-image-upload-button,
.profile-image-upload-button:hover,
.profile-image-upload-button:focus {
  background: #d9d9d9;
}

.profile-image-upload-button svg {
  fill: #000000 !important;
}

.profile-image-upload-button span {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-image-upload-button svg {
  width: 0.5em;
  height: 0.5em;
  fill: #fff;
}

.profile-container .customDragger {
  position: absolute;
  bottom: 17px;
  right: -5px;
  z-index: 1;
  width: 36px;
}

.profile-image-container {
  position: relative;
  width: 100px;
  /* border-radius: 5px; */
  /* overflow: hidden; */
}

.edit-image-container {
  margin: 10px 0;
}

.edit-profile-submit-button {
  border: none;
}

.edit-user-form-item-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edit-user-form-item-list .ant-form-item-label {
  padding-bottom: 10px;
}

.edit-user-form-item-list .ant-input,
.edit-user-form-item-list .ant-select .ant-select-selector {
  height: 44px;
}

.edit-user-form-item-list .ant-select .ant-select-selector {
  display: flex;
  align-items: center;
}

.submit-change-password-button-wrapper {
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
  /* margin-top: 20px; */
  gap: 10px;
}

.submit-change-password-button-wrapper .ant-form-item {
  margin-bottom: 0 !important;
  flex: 1;
}

.change-password-button {
  margin: 0 !important;
  height: 50px;
  flex: 1;
}

.edit-profile-submit-button {
  height: 50px;
}

.edit-profile-submit-button,
.edit-profile-submit-button:hover,
.edit-profile-submit-button:focus {
  background: var(--main-primary);
}

.user-stat-main-row {
  /*width: 50%;*/
}

.user-graph-main-tooltip {
  padding: 5px 10px;
  width: fit-content;
  height: fit-content;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 5px;
}

.user-graph-main-tooltip p {
  margin: 0;
}

.exam-index-wrapper {
  align-items: center;
}

.exam-status-index {
  width: 10px;
  height: 10px;
  background: var(--success-primary);
  border-radius: 50%;
  margin-right: 5px;
}

.exam-status-index.live-exam {
  background: var(--success-primary);
}

.exam-status-index.mock-exam {
  background: var(--danger-primary);
}

/*user profile creator*/
.upc-main-container {
  min-height: 100vh;
}

.upc-body-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.upc-left-side-bar {
  width: 250px;
  position: relative;
}

.upc-main-wrapper {
  /*padding: 20px 20px;*/
}

.hi-container {
  background: white;
  border: 1px solid #dddddd;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(79, 93, 117, 0.25);
}

.hi-container .web-view-hall-cover-image {
  border-radius: 8px;
}

.profile-cover-image-container {
  position: relative;
}

.avatar-profile-image-container {
  width: 160px;
  height: 160px;
  background: #ffffff;
  position: absolute;
  border-radius: 50%;
  left: 45%;
  bottom: -30px;
}

.login-form-button.creator-edit-button {
  margin-top: 20px;
}

.loading-spin {
  height: 14px;
  margin-right: 10px;
}

.loading-spin svg {
  fill: #ffffff;
}

.update-cover-image-container {
  position: absolute;
  height: 35px;
  left: 10px;
  bottom: 5px;
  background: var(--main-primary);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.update-cover-image-container.clickable {
  pointer-events: auto;
}

.update-cover-image-container.not-clickable {
  pointer-events: none;
  z-index: 10;
}

.update-cover-image-container p {
  margin-bottom: 0;
  font-weight: 600;
  color: white;
}

.hi-wrapper {
  padding: 30px 20px 20px;
}

.hi-name-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hi-name-location p.sidebar-title {
  margin: 0;
}

.hi-desc {
  padding: 20px 0;
  margin: 0;
  width: 75%;
}

.hi-links-wrapper {
  display: flex;
}

.hi-links-wrapper a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.75rem;
}

.hall-info-container {
  margin-top: 24px;
}

.hall-detail-info-wrapper,
.hall-detail-info {
  display: flex;
  align-items: center;
}

.hall-detail-info p {
  margin: 0;
}

.hall-detail-info-wrapper {
  justify-content: space-between;
  padding: 6px 0;
}

.detail-heading,
.detail-info {
  font-style: normal;
  font-size: 14px;
  line-height: 16px;
}

.detail-heading {
  font-weight: 600;
  padding-right: 40px;
}

.detail-info {
  font-weight: 400;
}

.bank-information-container h3 {
  margin-bottom: 20px;
}

.detail-info.verified,
.detail-info.not-verified {
  font-weight: 500;
}

.verified {
  color: var(--success-primary);
}

.not-verified {
  color: var(--danger-primary);
}

.bank-name {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0;
  color: var(--text-primary);
}

.hall-profile-image-container {
  margin-top: 20px;
}

.image-upload-container {
  position: relative;
}

.edit-creator-button {
  position: absolute;
  right: 10px;
  bottom: 5px;
}

.user-stat-container {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 20px;
  height: 68px;
  min-width: 185px;
}

.user-stat-desc {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.user-stat-desc p {
  font-size: 13px;
  line-height: 16px;
  color: #6f6c90;
  margin-bottom: 0;
}

.user-stat-desc h3 {
  color: #303030;
  margin-bottom: 0;
}

.profile-view-more-wrapper .vm-main-container {
  margin-bottom: 0;
}

.purchased-exam-title {
  color: var(--main-primary) !important;
}

.purchased-exam-title:hover {
  text-decoration: underline;
}

.profile-table-main-container {
  background: #ffffff;
  padding: 20px;
}

.table-subtract-data {
  color: var(--danger-primary) !important;
}

.table-add-data {
  color: var(--success-primary) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

@media only screen and (max-width: 1217px) {
  .user-stat-main-row {
    margin-top: 10px;
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .update-cover-image-container p {
    display: none;
  }

  .update-cover-image-container svg,
  .edit-creator-button button > svg {
    margin-right: 0 !important;
  }

  .edit-creator-button button > div {
    display: none;
  }

  .profile-view-more-wrapper .vm-main-container {
    margin-bottom: 1.25rem;
  }

  .left-side-bar {
    display: none;
  }

  .user-profile-main-col {
    width: 100%;
  }

  .avatar-profile-image-container {
    left: 27%;
  }
}

@media only screen and (max-width: 576px) {
  .hall-detail-info-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .hall-detail-info {
    margin-bottom: 10px;
  }

  .user-profile-wrapper {
    padding: 6px;
  }
}

@media only screen and (max-width: 600px) {
  .user-info-wrapper,
  .user-stat-main-row {
    width: 100%;
  }

  .user-profile-wrapper {
    height: fit-content;
  }
}

@media only screen and (max-width: 360px) {
  .user-info-wrapper {
    flex-direction: column !important;
  }

  .user-full-name {
    width: 100%;
    margin: 0;
    padding: 8px;
    justify-content: center;
    align-items: center;
  }

  .user-full-name button {
    width: 100%;
  }
}

.user-profile-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.user-profile-body__user-desc {
  display: flex;
  gap: 24px;
  align-items: center;

  @media only screen and (max-width: 768px) {
    align-items: flex-start;
  }

  @media only screen and (max-width: 576px) {
    align-items: center;
    flex-direction: column;
  }
}

.user-profile-body__user-image {
  min-width: 175px;
  width: 175px;
  height: 175px;
  border: 5px solid #ffffff;
  border-radius: 20px;
  /* background: #ffffff; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  line-height: 175px;
  color: #ffffff;

  @media only screen and (max-width: 768px) {
    min-width: 120px;
    width: 120px;
    height: 120px;
    font-size: 50px;
    line-height: 120px;
  }
}

.user-profile-body__user-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-body__user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;

  @media only screen and (max-width: 1200px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

.user-profile-body__user-info-name-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-profile-body__user-info-name-list {
  display: flex;
  flex-direction: column;
  gap: 8px;

  @media only screen and (max-width: 576px) {
    align-items: center;
    justify-content: center;
  }
}

.user-profile-body__user-info-name-list h4 {
  margin-bottom: 0;
  font-weight: 600;
}

.user-profile-body__user-info-name-list p {
  margin-bottom: 0;
  color: #808080;
}

.user-profile-body__user-info-button {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;

  @media only screen and (max-width: 576px) {
    flex-direction: row-reverse;
  }
}

.user-profile-body__user-kpi {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.user-id-card {
  background: white;
  border: 1px solid #e4e4e4;
  padding: 0 10px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 13px;
  line-height: 16px;
  color: #505050;
}

.user-id-card .ant-typography {
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
}

.user-id-card .ant-typography svg {
  width: 20px;
  height: 20px;
}

.verify-email-container{
    padding: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.verify-image-container{
    width: 170px;
    height: 145px;
    margin-bottom: 20px;
}

.verify-image-container img{
    width: 100%;
    height: 100%;
}

.verify-texts{
    color: white;
    text-align: center;
}

.verify-button-wrapper{
    margin-top: 20px;
}

.verify-button{
    /*margin-top: 20px !important;*/
    height: 35px;
}

/*Box container design*/

.verify-email-box-container{
    width: 630px;
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.verify-email-box-container .verify-texts{
    color: inherit;
    text-align: center;
}

.verify-email-box-container h1{
    font-size: 24px;
}

.verify-email-box-container h3{
    font-size: 13px;
}

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

@media (max-width: 768px){
    .verify-email-container h1{
        font-size: 24px;
    }

    .verify-email-container h3{
        font-size: 12px;
    }

    .verify-email-box-container{
        width: 100%;
    }
}
.ml-form-wrapper {
    width: 325px;
}

.ml-header-wrapper {
    display: flex;
}

.ml-header-wrapper h3 {
    margin-bottom: 0;
    margin-left: 20px;
    color: rgba(0, 0, 0, 0.7);
}

.ml-form .form-input-label {
    margin-top: 30px;
}

.ml-form .recaptcha-container {
    margin: 15px 0 30px;
}

.ml-form .recaptcha-container .g-recaptcha {
    transform: scaleX(0.92);
}

.ml-login-message {
    font-style: normal;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
}

.ml-form button {
    margin: 20px 0;
}

.ml-form .ant-btn[disabled] span {
    color: rgba(0, 0, 0, 0.25);
}

.back-text {
    margin: 0;
    color: var(--main-primary);
    font-size: 13px;
    line-height: 15px;
    font-style: normal;
    font-weight: normal;
}

.back-text:hover {
    text-decoration: underline;
}

.ant-input-group.ant-input-group-compact.phone-number-group {
    display: flex;
}

.ant-input-group.ant-input-group-compact.phone-number-group .ant-select-selector {
    height: 35px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ml-form .ant-row.ant-form-item.phone-number-input {
    width: 100%;
}

.mobile-input-field.validated .ant-input-wrapper.ant-input-group{
    border: 1px solid #ff4d4f;
}

.error-message {
    font-size: 12px;
    display: none;
    color: #ff4d4f;
}

.error-message.validate {
    display: flex;
}

@media only screen and (max-width: 400px) {
    .ml-form-wrapper {
        width: 90%;
    }
}
.otp-confirm-container {
  padding: 30px 20px;
  width: 317px;
}

.otp-confirm-container .header-text {
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
}

.form-input-label input {
  height: 35px;
}

.OTP-timing-constraint {
  margin: 20px 0 10px;
  font-size: 12px;
  line-height: 14px;
  font-style: normal;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

.resend-section-container {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resend-section-container p {
  font-size: 12px;
  line-height: 14px;
  font-style: normal;
  font-weight: 500;
  margin: 0;
  color: rgba(0, 0, 0, 0.6);
}

.resend-timer-counter {
  margin-top: 10px;
  text-align: center;
  margin-bottom: 0;
  font-size: 12px;
}

.otp-field-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.otp-field {
  width: 40px !important;
  border-radius: 4px;
  height: 35px;
  text-align: center !important;
  border: 1px solid #aaaaaa !important;
}

.otp-field-wrapper > div:focus {
  border: 1px solid #aaaaaa !important;
}

.otp-field:focus {
  box-shadow: 0 0 4px #aaaaaa !important;
}

@media only screen and (max-width: 400px) {
  .otp-confirm-container {
    width: 90%;
  }
}

.otp-container {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.otp-title {
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 0%;
  text-align: center;
  color: #303030;
  margin-bottom: 0;
}

.otp-sub-title {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0%;
  text-align: center;
  color: #808080;
  margin-bottom: 0;
}

.form-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-content .ant-form-item {
  margin-bottom: 0;
}

.form-content .ant-form-item .ant-form-item-label {
  padding-bottom: 10px;
}

.form-content .ant-form-item .ant-form-item-label > label {
  font-weight: 500;
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
  color: #696969;
}

.form-content .otp-field {
  width: 60px !important;
  height: 60px;
}

.counter-text {
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
}

.resend-text {
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  color: #30b3c8;
  cursor: pointer;
}

.form-code-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-content-wrapper button {
  height: 50px;
  border-radius: 50px !important;
}

.el-go-back {
  margin-bottom: 10px;
}

.main-login-form {
  height: fit-content;
}

.login-links-wrapper {
  display: flex;
  flex-direction: column;
}

.login-form-content {
  display: flex;
  flex-direction: column;
}

.login-form-content__title {
  color: var(--new-background);
  margin-bottom: 0;
  text-align: center;
}

.login-form-content__method-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 45px;
}

.login-form-content__method-item {
  border: 1px solid var(--new-background);
  border-radius: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-form-content__method-item span {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: var(--new-background);
}

.login-form-content_footer {
  margin-top: 65px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-form-content__footer-register {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #303030;
  text-align: center;
}

.login-form-content__footer-register a {
  color: #30b3c8;
}

.login-form-content__footer-text {
  font-size: 14px;
  line-height: 17px;
  color: #808080;
  text-align: center;
}

/* email login form */
.email-login-form-wrapper {
  display: flex;
  flex-direction: column;
}

.email-login-form-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.email-login-form-header button {
  border: none;
  background: var(--new-background);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-login-form-title {
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;
}

.email-login-form {
  margin-top: 30px;
}

.email-login-form .ant-form-item .ant-form-item-label > label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: #696969;
}

.email-login-form .ant-form-item .ant-input {
  height: 44px;
  border-radius: 4px;
}

.email-login-form .ant-form-item .ant-input-password {
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.email-login-form .ant-form-item .ant-input-password .ant-input {
  height: 100%;
}

.email-login-form .ant-form-item .ant-input-number {
  height: 44px;
  width: 100%;
}

.email-login-form .ant-form-item .ant-input-number .ant-input-number-input-wrap,
.email-login-form
  .ant-form-item
  .ant-input-number
  .ant-input-number-input-wrap
  .ant-input-number-input {
  height: 100%;
}

.forget-pw-text {
  font-size: 14px;
  line-height: 17px;
  color: #808080;
  text-align: right;
  margin-top: 10px;
}

.email-login-btn {
  height: 50px;
  border-radius: 50px !important;
}

.email-login-divider-content {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.email-login-divider-content p {
  font-size: 14px;
  line-height: 17px;
  color: #808080;
  margin-bottom: 0;
}

.email-login-divider {
  border-top: 1px solid #e4e4e4;
  flex: 1;
}

.otp-text-content {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 26px;
}

.otp-text-content p {
  font-size: 12px;
  line-height: 15px;
  color: #808080;
  margin-bottom: 0;
}

.table-share-button {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.table-function-button {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.table-input-search {
    /*flex: 0 0 50%;*/
    width: 49%;
    margin-right: 20px;
}

.table-radio-button {
    margin-right: 20px;
}

.table-sort-function {
    width: 100%;
    /*flex: 0 0 50%;*/
    display: flex;
    justify-content: space-between;
}

.table-input-search button {
    background: var(--main-primary);
    border: 1px solid var(--main-primary);
}

.table-function-left-button {
    display: flex;
    justify-content: flex-end;
}

.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    background: var(--main-primary);
    border: 1px solid var(--main-primary);
}

.ant-radio-button-wrapper:hover {
    color: inherit;
}

.exam-filter-main-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.exam-filter-main-row.see-more {
    align-items: flex-end;
}

.exam-filter-wrapper {
    flex-wrap: wrap;
    width: 90%;
}

.exam-see-more-button {
    width: 90px;
    border: 1px solid var(--main-primary);
    border-radius: 10px;
    cursor: pointer;
}

.exam-filter-reset-button,
.exam-filter-reset-button:hover,
.exam-filter-reset-button:focus {
    border: none;
    width: fit-content;
    color: #FFFFFF;
    background: var(--main-primary);
}

.question-sets .ant-table-row {
    cursor: pointer;
}

.rtp-action-proceed {
    color: var(--main-primary);
}

.rtp-action-remove {
    color: var(--danger-primary);
}

.rtp-action-proceed:hover,
.rtp-action-remove:hover {
    text-decoration: underline;
}

.rtp-main-container {
    /*padding: 20px;*/
}

.rtp-go-back {
    display: flex;
}

.rtp-go-back h3 {
    margin-left: 10px;
    margin-bottom: 0;

    color: var(--main-primary);
}

.rtp-go-back h3:hover {
    text-decoration: underline;
}

.rtp-form-main-wrapper,
.rtp-form-container {
    margin-top: 30px;
}

.rtp-publish-heading-wrapper p {
    margin-bottom: 5px;
}

.rtp-exam-details-wrapper,
.rtp-exam-pricing-details,
.rtp-exam-type-wrapper {
    display: flex;
    margin: 0 -8px;
}

.rtp-details-description,
.rtp-details-marks-timing {
    padding: 0 8px;
    flex: 0 0 50%;
}

.rtp-details-input-field-container {
    padding: 0 8px;
}

.rtp-details-marks-input-field {
    flex: 0 0 33.33%;
}

.rtp-details-time-input-field {
    flex: 0 0 50%;
}

.rtp-details-marks-detail,
.rtp-details-time-detail {
    display: flex;
    margin: 0 -8px;
}

.rtp-details-time-detail {
    margin-top: 32px;
}

.rtp-review-check-box {
    margin: 40px 0 50px;
}

.rtp-publish-button-wrapper {
    display: flex;
    justify-content: flex-end;
}

.rtp-live-exam-check-box {
    display: flex;
    align-items: center;
}

.rtp-divider {
    margin: 50px 0;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.ant-typography.copy-link-typography {
    margin-bottom: 0;
}

.rtp-form-items-margin {
    margin-bottom: 30px;
}

.rtp-form-items-margin > .preview-title > span {
    margin-left: 10px;
}

.mcq-cover-image {
    width: 10.25rem;
    height: 6.25rem;
    object-fit: contain;
}

.mcq-cover-image-container {
    position: relative;
}

.mcq-cover-image-close {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    fill: var(--main-primary) !important;
    height: 0.875em !important;
    width: 0.875em !important;
}

.publish-question-button {
    width: 272px;
    height: 42px;
}

@media only screen and (max-width: 1075px) {
    .table-function-button {
        flex-direction: column;
    }

    .table-input-search {
        width: 100%;
    }

    .table-sort-function {
        margin-top: 10px;
        width: 100%;
        justify-content: space-between;
    }

    .rtp-live-exam-check-box .rtp-details-marks-input-field {
        flex: 0 0 50%;
    }

}

@media only screen and (max-width: 768px) {
    .rtp-exam-details-wrapper {
        flex-direction: column;
    }

    .rtp-details-description,
    .rtp-details-marks-timing {
        flex: 0 0 100%;
    }

    .rtp-details-description {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 576px) {
    .preview-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .rtp-form-items-margin > .preview-title > span {
        margin-left: 0;
        margin-top: 8px;
    }

    .rtp-live-exam-check-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .rtp-live-exam-check-box .rtp-details-marks-input-field {
        flex: 0 0 100%;
        width: 100%;
    }

    .rtp-live-exam-check-box .rtp-details-marks-input-field:first-child {
        margin-bottom: 20px;
    }

    .review-and-demo-exam-button-container {
        flex-direction: column;
    }

    .review-and-demo-exam-button-container > a > button {
        width: 100%;
    }

    .creator-demo-exam-button {
        margin: 20px 2px 2px !important;
    }

    .publish-question-button {
        width: 100%;
    }

    .table-sort-function {
        align-items: flex-end;
    }

    .mcq-filter-action {
        flex-direction: column !important;
    }

    .mcq-filter-action .ant-select {
        margin-top: 10px;
    }

    .ant-modal.upload-question-modal {
        width: 95% !important;
    }
}

@media only screen and (max-width: 415px) {
    .rtp-details-marks-detail, .rtp-details-time-detail {
        flex-flow: row wrap;
    }

    .rtp-details-marks-input-field {
        flex: 0 0 50%;
    }

    .rtp-details-marks-input-field:nth-child(3) {
        margin-top: 20px;
    }
}

.individual-mcq-description-container__exam-desc {
  width: 310px;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.individual-mcq-description-container__exam-desc--features {
  background: #edf5f8;
  border-radius: 10px;
  padding: 10px;
}

.individual-mcq-description-container__exam-desc--price-container-mobile-view {
  display: none;
}

.individual-mcq-description-container__exam-desc--features ul {
  list-style-type: none;
  padding: 0;
}

.individual-mcq-description-container__exam-desc--features
  ul
  .feature-list-title {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  color: #202020;
  margin-bottom: 16px;
}

.individual-mcq-description-container__exam-desc--features
  ul
  .feature-list-item {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #6f6c90;
  display: flex;
  align-items: center;
  gap: 6px;
}

.individual-mcq-description-container__exam-desc--features
  ul
  .feature-list-item:not(:last-child) {
  margin-bottom: 16px;
}

.individual-mcq-description-container__exam-desc--validity {
  margin: 8px 0;
}

.individual-mcq-description-container__exam-desc--validity .sidebar-title {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
}

.individual-mcq-description-container__exam-desc--validity
  .sidebar-title
  label {
  color: var(--new-background);
}

.individual-mcq-description-container__exam-desc--price-container {
  /*margin: 24px 0 12px;*/
}

.individual-mcq-description-container__exam-desc--price-container .step-title {
  font-weight: 600;
  color: #000000;
  margin-bottom: 0;
}

.current-price-content {
  margin-block: 9px 27px;
  display: flex;
  align-items: center;
  gap: 1px;
}

.price-save-wrapper {
  background: #edf8ef;
  padding: 7px 8px;
  border-radius: 50px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  color: #6ab089;
  display: flex;
  align-items: center;
  gap: 4px;
}

.individual-mcq-description-container__exam-desc--price-container
  .step-title
  del {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #808080;
}

.set-current-price {
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  color: #210454;
  margin-bottom: 0;
}

.individual-mcq-description-container__exam-desc--price-container
  .admin-stat-value {
  margin-bottom: 0.5em;
}

.individual-mcq-description-container__exam-desc--price-container
  .step-title
  label,
.individual-mcq-description-container__exam-desc--price-container
  .admin-stat-value {
  color: #210454;
  text-align: left;
}

.individual-mcq-description-container__exam-desc--button-container {
  margin-top: 26px;
}

.individual-mcq-description-container__exam-desc--button-container button {
  width: 100%;
  margin-bottom: 12px !important;
  height: 44px !important;
  background: #08a4bdd6;
  border-color: #08a4bdd6;
}

.individual-mcq-description-container__exam-desc--button-container
  button:hover {
  background: #08a4bd99;
  border-color: #08a4bd99;
}

@media only screen and (max-width: 768px) {
  .individual-mcq-description-container__exam-desc {
    width: 100%;
  }

  .individual-mcq-description-container__exam-desc--price-container {
    display: none;
  }

  .individual-mcq-description-container__exam-desc--features {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column-reverse;
  }

  .individual-mcq-description-container__exam-desc--validity {
    display: none;
  }

  .individual-mcq-description-container__exam-desc--price-container-mobile-view {
    display: block;
  }

  .individual-mcq-description-container__exam-desc--button-container {
    display: none;
  }

  .individual-mcq-description-container__exam-desc--price-container-mobile-view
    .step-title {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 0.2em;
    font-size: 15px;
    line-height: 16px;
  }

  .individual-mcq-description-container__exam-desc--price-container-mobile-view
    .step-title
    label,
  .individual-mcq-description-container__exam-desc--price-container-mobile-view
    .admin-stat-value {
    color: #210454;
    text-align: left;
  }
}

:root {
  --submitted-text: #078da3;
}

.library-main-wrapper {
  width: 100%;
  margin: 8px 0;
}

.saved-main-row .mock-exam-main-container {
  /* display: none; */
}

.library-main-container,
.library-mobile-body-container {
  /*margin: 8px;*/
  position: relative;
}

.library-mobile-main-container.box-container {
  padding: 0;
}

.library-mobile-body-container {
  padding: 20px;
}

.bookmark-container {
  top: 0;
  right: 20px;
}

.bookmark-container,
.mobile-bookmark-container {
  position: absolute;
}

.mobile-bookmark-container {
  top: 0;
  right: 20px;
}

.library-title-container {
  align-items: center;
}

.wishlist.library-title-container {
  width: 95%;
  justify-content: space-between;
}

.exam-status-container {
  height: inherit;
  width: fit-content;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-left: 10px;
  padding: 4px 15px;
}

.exam-status-submitted {
  background: rgba(8, 164, 189, 0.15);
  color: var(--submitted-text);
}

.exam-status-not-submitted {
  background: rgba(239, 71, 111, 0.15);
  color: var(--danger-primary);
}

.es-timer-container {
  width: 85%;
  margin-left: 0;
  margin-top: 5px;
  height: 35px;
}

.exam-types-container h5 {
  font-size: 12px;
  text-align: left;
  margin: 0;
}

.library-desc-container {
  margin: 10px 0 20px;
}

.library-profile-stat-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.library-hall-profile {
  width: 50%;
  align-items: center;
}

.library-question-stat {
  width: 50%;
  justify-content: flex-end;
}

/*.library-hall-profile,
.library-question-stat {
    flex: 1 1 0%;
}*/

.icon-description-wrapper {
  height: 30px;
  align-items: center;
}

.icon-data-wrapper {
  width: 150px;
  justify-content: space-between;
}

.wrapper-no-width {
  width: auto;
}

.library-creator-image,
.library-icon {
  margin-right: 10px;
}

.library-icon {
  width: 30px;
  height: 30px;
}

.stat-number {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: var(--text-primary);
}

.mobile-library-title-container h4 {
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.exam-status-wrapper {
  margin-top: 20px;
}

.title-half-wrapper,
.title-second-half-wrapper {
  width: 50%;
  flex: 0 0 50%;
}

.title-second-half-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.library.library-title-container {
  width: 95%;
  justify-content: space-between;
}

.library-filter-wrapper,
.library-filters {
  display: flex;
}

.library-filters {
  flex-flow: wrap;
  width: 100%;
}

.library-filter-wrapper {
  align-items: center;
  justify-content: space-between;
}

.library-see-more-wrapper {
  display: flex;
  align-items: flex-start;
}

.library-see-more-wrapper.active {
  align-items: flex-end;
}

.library-filter-see-more {
  border: 1px solid var(--main-primary);
  background: var(--main-primary);
  color: white;
  border-radius: 20px;
  padding: 0 7px;
  height: 30px;
  display: flex;
  align-items: center;
  width: 94px;
}

/*.library-filter-see-more:hover {
    background: var(--main-primary);
    color: white;
}*/

.library-filter-see-more span {
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.published-and-complete-wrapper,
.not-published-and-complete-wrapper {
  width: 100%;
  height: 100%;
}

.published-and-complete-wrapper {
  color: var(--main-primary);
}

.not-published-and-complete-wrapper,
.published-and-not-complete {
  color: var(--danger-primary);
}

@media only screen and (max-width: 992px) {
  .library-hall-profile {
    width: 33.33%;
  }

  .library-question-stat {
    width: 66.67%;
    justify-content: space-between;
  }

  .icon-data-wrapper {
    width: max-content;
  }
}

.mobile-library-profile-stat-container {
  flex-direction: column;
}

/*.mobile-library-hall-profile {
    width: 100%;
}*/

.mobile-library-question-stat {
  margin-top: 20px;
  width: 100%;
  /*padding: 0 10px;*/
  justify-content: space-around;
}

.library-mobile-exam-status {
  margin-left: 0;
  margin-right: 20px;
}

.library-filter-wrapper.exam {
  margin-bottom: 15px;
}

.library-mobile-hall-date-wrapper,
.library-mobile-exam-type-wrapper {
  margin-top: 10px;
}

.library-mobile-exam-type-wrapper {
  margin-bottom: 25px;
}

.library-mobile-score-rank-container {
  border: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 42px;
  margin-top: 15px;
  background: rgba(239, 71, 111, 0.12);
}

.library-mobile-score-rank-container.user-submitted {
  background: rgba(8, 164, 189, 0.12);
}

@media only screen and (max-width: 768px) {
  .saved-main-row .library-main-wrapper {
    display: none;
  }

  .saved-main-row .mock-exam-main-container {
    display: flex;
    margin: 8px 0;
  }

  .library-filter-wrapper.exam {
    margin-bottom: 0;
  }

  .library-filter-wrapper {
    align-items: flex-start;
    flex-direction: column;
  }

  .library-filters,
  .library-see-more-wrapper {
    width: 100%;
  }

  .library-see-more-wrapper {
    margin: 10px 0 20px;
    justify-content: center;
  }

  .es-timer-container {
    width: 250px;
  }

  .wishlist.library-title-container {
    /*width: 100%;*/
    flex-direction: column;
    align-items: flex-start;
  }

  .wishlist.library-title-container span {
    margin-top: 5px;
  }
}

@media only screen and (max-width: 576px) {
  .library-profile-stat-container {
    flex-direction: column;
  }

  .library-hall-profile {
    width: 100%;
  }

  .library-question-stat {
    margin-top: 20px;
    width: 100%;
  }
}

@media only screen and (max-width: 360px) {
  /*.library-question-stat.flex-direction-row {
        flex-direction: column;
    }*/

  /*.icon-data-wrapper {
        width: 100%;
        justify-content: unset;
        align-items: center;
    }*/

  /*.icon-data-wrapper .library-description.margin-bottom-0 {
        margin-left: 10px;
    }*/
}

.acs-main-container {
    padding: 50px 10%;
    display: flex;
    flex: 1;
    height: 438px;
    background: #F9F9F9;
}

.acs-first-half,
.acs-second-half {
    width: 50%;
}

.acs-first-half h1,
.acs-first-half h3 {
    margin-bottom: 40px;
}

.acs-first-half h3{
    font-weight: normal;
    font-size: 16px;
    line-height: 25px;
    color: rgba(0,0,0,0.6);
}

.acs-android-apple {
    height: 44px;
    display: flex;
    width: 70%;
    justify-content: space-between;
}

.acs-android-apple img {
    width: 125px;
    height: 100%;
}

.acs-second-half{
    position: relative;
}

.acs-second-half img{
    position: absolute;
    right: -134px;
    bottom: -106px;
}

@media (max-width: 768px) {
    .acs-main-container {
        height: fit-content;
        padding: 30px;
    }

    .acs-first-half h1 {
        font-size: 26px;
        text-align: center;
    }

    .acs-second-half {
        display: none;
    }

    .acs-first-half {
        width: 100%;
    }

    .acs-android-apple {
        width: 100%;
        justify-content: space-around;
    }
}

@media (max-width: 500px) {
    .acs-android-apple {
        /*justify-content: center;*/
        align-items: center;
    }

    /*.acs-apple {
        margin-top: 10px;
    }*/

    .acs-android h1,
    .acs-apple h1 {
        font-size: 20px;
    }
}




.exam-rules-modal {
  /* display: flex; */
}

.exam-rules-drawer {
  display: none;
}

.exam-rules-container {
  width: 100%;
  background: #ffffff;
}

.exam-rules-container__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e4e4;
}

.start-time-bar {
  background: rgba(79, 178, 134, 0.15);
  color: var(--success-primary);
  height: 24px;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 4px;
  margin-left: 20px;
}

.start-time-circle {
  width: 10px;
  height: 10px;
  background: var(--success-primary);
  border: none;
  border-radius: 50%;
  margin-right: 15px;
}

.exam-rules-wrapper {
  margin-top: 15px;
}

.exam-rule-heading {
  font-style: normal;
  font-size: 15px;
  line-height: 17px;
  font-weight: 500;
  color: #202020;
}

.exam-name.step-title {
  color: #303030;
}

.modal-close-btn {
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rules-list-container li,
.error-redirect-link.margin-bottom-0 {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.rules-list-container li {
  padding-bottom: 20px;
}

.rules-list-container {
  margin: 0;
  padding-left: 16px;
}

.rules-list-container .error-redirect-link {
  /*line-height: 30px;*/
  font-size: 14px;
  line-height: 17px;
  color: #505050;
  font-weight: 400;
}

.color-labels-container {
  margin: 0 0 15px 15px;
}

.color-labels-container.flex-direction-row {
  /*align-items: center;*/
}

.color-labels-wrapper {
  margin-right: 20px;
  align-items: center;
}

.color-labels {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-left: 10px;
}

.rules-image-main-container {
  margin-left: 74px;
}

.rules-footer-container {
  justify-content: flex-end;
  margin-top: 40px;
}

.learn-more-container {
  /*height: 37px;*/
  background: rgba(8, 164, 189, 0.1);
  border-radius: 4px;
  padding: 12px;
}

.learn-more a {
  color: var(--main-primary);
}

.learn-more a:hover {
  text-decoration: underline;
}

.rules-start-exam-button {
  height: 50px;
  width: 100%;
}

.color-labels-wrapper .error-redirect-link.margin-bottom-0,
.rules-footer-container,
.exam-rules-wrapper {
  display: flex;
}

.rules-footer-container,
.color-labels-container.flex-direction-row,
.color-labels-wrapper .error-redirect-link.margin-bottom-0 {
  align-items: center;
}

@media (max-width: 768px) {
  .exam-rules-modal {
    display: none;
  }

  .exam-rules-drawer {
    display: flex;
  }

  .exam-rules-wrapper,
  .rules-footer-container {
    margin-top: 30px;
  }

  .exam-rules-drawer .rules-list-container li {
    font-weight: 500;
    padding-bottom: 10px;
    line-height: 17px;
  }

  .exam-rules-container {
    width: 100%;
    padding: 0;
  }

  .rules-image-main-container {
    display: none;
  }

  .color-labels-container.flex-direction-row {
    flex-direction: column;
  }

  .color-labels-sub-container {
    width: 100%;
    justify-content: space-around;
  }

  .rules-mobile-view {
    margin-top: 10px;
    padding: 0 18px;
  }

  .flex-row-reverse.flex-direction-row {
    flex-direction: row-reverse;
  }

  .flex-row-reverse .color-labels {
    margin-left: 0;
    margin-right: 10px;
  }

  .rules-footer-container {
    flex-direction: column;
  }

  .learn-more-container {
    width: 100%;
  }

  .rules-start-exam-button {
    margin-top: 20px !important;
    width: 80%;
  }

  .rules-footer-container.rules-footer-drawer {
    margin-bottom: 40px;
  }

  .rules-start-button-container {
    position: fixed;
    bottom: 0;
    padding: 10px;
    border: none;
    width: 100%;
    background: #ffffff;
  }

  .rules-drawer-button {
    width: 48%;
    height: 35px;
  }
}

.gg-main-container {
    background: #F9F9F9;
    padding: 50px 10%;
}

.gg-heading-container {
    display: flex;
    align-items: center;
}

.gg-image {
    margin-right: 10px;
}

.gg-heading {
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 35px;
    color: #35A209;
    margin: 0;
}

.gg-desc-container {
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
}

.gg-desc-container h3 {
    font-weight: normal;
    line-height: 25px;
    width: 100%;
    margin-bottom: 30px;
    color: rgba(0,0,0,0.6);
}

.gg-stat-container {
    /*width: 50%;*/
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.gg-button-container {
    margin-top: 20px;
}

.gg-button-container a button {
    width: 266px;
    height: 50px;
}

@media (max-width: 768px) {
    .gg-main-container {
        padding: 30px;
    }

    .gg-heading-container {
        justify-content: center;
    }

    .gg-desc-container {
        flex-direction: column;
    }

    /*.gg-button-container {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }*/
}

@media only screen and (max-width: 576px) {
    .gg-stat-container {
        justify-content: space-around;
    }
}

/*web view*/

.hall-body-container {
  display: flex;
  flex-direction: row;
  top: 65px;
  position: relative;
}

.hall-hero-container {
  display: flex;
  flex: 1;
}

.hall-web-view-wrapper {
  /* width: calc(100% - 300px); */
  width: 100%;
  gap: 15px;
}

.hall-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.go-back-btn {
  width: 34px;
  height: 34px;
  background: white;
  border: none;
  outline: 0;
  border-radius: 4px;
  box-shadow: 4px 4px 36px 0 rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hall-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #210454;
  margin-bottom: 0;
}

.hall-image-desc-content {
  display: flex;
  height: 300px;

  @media only screen and (max-width: 1200px) {
    flex-direction: column;
    height: fit-content;
  }
}

.hall-image-content {
  flex: 1;
}

.hall-desc-content {
  padding: 20px;
  width: 315px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hall-desc__title-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hall-desc__title-content img {
  width: 32px;
  height: 32px;
}

.hall-desc__title-content h4 {
  font-weight: 600;
  color: #202020;
  margin-bottom: 0;
}

.hall-desc__contact-info-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hall-desc__contact-info-content h5 {
  color: #202020;
  font-weight: 600;
  margin-bottom: 0;
}

.hall-desc__contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hall-desc__contact-info-list-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hall-desc__contact-info-list-item p {
  color: #505050;
  margin-bottom: 0;
}

.hall-desc__social-media-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hall-desc__social-media-list-item {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e4e4e4;
}

.hall-description-content {
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  color: #202020;
}

.hall-exam-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hall-exam-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hall-exam-content-header h4 {
  font-weight: 700;
  color: #202020;
  margin-bottom: 0;
}

.hall-exam-content-header p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.hall-exam-content-header p span {
  color: var(--new-background);
  font-weight: 700;
}

.hall-exam-content__tag-content {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hall-exam-content__filter-text {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 0;
  white-space: nowrap;
}

.hall-exam-content__tag-list {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hall-exam-content__tag-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.hall-exam-content__tag-item {
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 22px;
  color: var(--new-background);
  width: fit-content;
  white-space: nowrap;
  cursor: pointer;
}

.hall-exam-content__question-list-content {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.hall-exam-content__pagination {
  border-block: 1px dashed #e4e4e4;
  padding-block: 10px;
}

.hall-exam-content__question-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  @media only screen and (max-width: 1024px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.hall-exam-content__tag-content p .hall-description-mobile {
  padding: 0 10px;
  text-align: justify;
}

.hall-web-right-side-bar {
  padding: 20px 20px 20px 0;
  position: sticky;
  height: 90vh;
  top: 65px;
  width: 300px;
}

.hmv-image-container {
  padding-top: 63px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.hmv-image-container img {
  height: auto;
  width: 100%;
}

.hmv-questions-section {
  padding: 10px;
}

.hmv-questions-section__list-main-row {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 16px;
}

.hmv-questions-section__list-main-row .rw-main-container {
  margin: 0;
}

.web-view-hall-cover-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  transition: 0.3s;

  @media only screen and (max-width: 1200px) {
    height: auto;
  }
}

.web-view-hall-cover-image:hover {
  opacity: 0.7;
}

.full-screen-modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /*background-color: rgb(0,0,0);    */
  background-color: rgba(0, 0, 0, 0.6);
}

.full-screen-modal-container img {
  max-width: 80%;
  max-height: 80vh;
}

.image-close-button {
  position: fixed;
  top: 20px;
  right: 20px;
}

.image-close-button svg {
  fill: #ffffff;
}

/*.image-close-button:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: var(--main-primary);
}*/

.hall-web-view-institute-wrapper {
  border: 1px solid var(--main-primary);
  box-sizing: border-box;
  border-radius: 4px;
  margin-left: 8px;
  padding: 7px 8px 9px 10px;
  width: 250px;
  height: 133px;
  flex-direction: row;
}

.web-view-institute-name {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: var(--text-primary);
  margin-left: 10px;
}

/*hall tag carousel*/
.hall-tag-container {
  position: sticky;
  top: 65px;
  z-index: 10;
}

.hall-tag-container .tags-main-container.tags-for-exam-box {
  margin-right: 10px;
}

.hall-tag-carousel {
  overflow: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* firefox */
}

.hall-tag-carousel::-webkit-scrollbar {
  display: none;
}

@media only screen and (max-width: 576px) {
  .hmv-questions-section__list-main-row {
    grid-template-columns: auto;
  }
}

.recent-result-main-container{
    padding: 12px;
    position: relative;
    overflow: hidden;
}

h4.recent-result-title{
    line-height: 20px;
}

.date-attended-container{
    margin: 10px 0 20px;
}

.date-attended-container p{
    margin-bottom: 0;
    display: flex;
}

.result-rank-container{
    height: 160px;
}

.date-attended-container,
.result-name-rank{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-name-rank{
    padding: 6px 0;
}

.feedback-main-container {
    width: 50px;
    height: 50px;
    background: var(--new-background);
    border: none;
    z-index: 10;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    box-shadow: 0 0 10px var(--shadow-1-color);
    transition: all .5s;
}

.feedback-main-container img {
    width: 25px;
    height: 25px;
}

.feedback-main-container:hover {
    transform: scale(1.09);
}

.feedback-modal-container {
    position: fixed;
    bottom: 90px;
    border: none;
    width: 300px;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 10px var(--shadow-1-color);
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feedback-wrapper {
    padding: 15px;
    position: relative;
}

.cross-button {
    position: absolute;
    top: 5px;
    right: 7px;
    cursor: pointer;

}

.cross-button,
.cross-button svg {
    width: 20px;
    height: 20px;
}

.fb-title {
    text-align: center;
    margin-bottom: 20px;
}

.feedback-modal-container.open-feedback {
    right: 20px;
}

.feedback-modal-container.hide-feedback {
    right: -1000px;
}

.submit-feedback-button {
    border-radius: 4px;
}

.submit-feedback-button,
.submit-feedback-button:focus,
.submit-feedback-button:hover {
    background: var(--main-primary);
    border: none;
    color: white;
}

@media only screen and (max-width: 768px) {
    .feedback-main-container:hover {
        transform: scale(1);
    }

    .feedback-modal-container{
        width: 250px;
    }
}
/*
.result-display-container {

}

.result-display-container a{
    color: var(--main-primary);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    float: right;
    margin-bottom: 10px;
}

.result-display-container a:hover {
    text-decoration: underline;
}*/

.download-link {
    color: var(--main-primary);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    /*float: right;*/
    margin-bottom: 10px;
}

.search-left-side-bar {
  width: 250px;
}

/*.search-body-container {
    width: calc(100% - 250px);
    padding: 20px;
}*/

.hall-title-wrapper p {
  cursor: pointer;
}

.hall-title-wrapper p:hover {
  color: var(--main-primary);
  text-decoration: underline;
}

.hall-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-hall-carousel {
  padding: 20px 20px;
  max-width: 100%;
  margin: 0;
}

.chevron-left,
.chevron-right {
  border: none;
  border-radius: 50% !important;
  background: var(--main-primary) !important;
}

.chevron-left svg,
.chevron-right svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.sc-ifAKCX.geRExE.sc-EHOje.dFFQiB,
.sc-ifAKCX.geRExE.sc-bZQynM.kaHnvc {
  width: 40px;
}

.sc-ifAKCX.geRExE.sc-EHOje.dFFQiB {
  right: -20px;
}

.sc-ifAKCX.geRExE.sc-bZQynM.kaHnvc {
  left: -20px;
}

.carousel-md,
.carousel-sm {
  display: none;
}

.us-price-filter {
  margin-right: 20px;
}

.all-search-container,
.mcq-search-web-view {
  display: flex;
}

.all-search-container-mobile-view,
.mcq-search-mobile-view {
  display: none;
}

.mcq-search-list-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  @media only screen and (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media only screen and (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media only screen and (max-width: 1024px) {
  .carousel-lg {
    display: none;
  }

  .carousel-md {
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  .all-search-container,
  .mcq-search-web-view {
    display: none;
  }

  .all-search-container-mobile-view,
  .mcq-search-mobile-view {
    display: flex;
    flex-flow: row wrap;
  }

  /* .all-search-exam-component {
    flex: 0 0 50%;
    max-width: 50%;
  } */

  .search-body-container {
    width: 100%;
    padding: 10px;
  }

  .search-filter-radio {
    display: none;
  }
}

@media only screen and (max-width: 576px) {
  .all-search-exam-component {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .carousel-sm {
    display: block;
  }

  .carousel-md {
    display: none;
  }
}

.eimc {
  padding: 10px;
}

.exam-info-modal {
  width: 80% !important;
}

.emic-tc {
  width: 100%;
}

.emict {
  flex: 0 0 70%;
  max-width: 70%;
}

.emict.exam-page-header-title {
  margin: 0;
  color: rgba(0, 0, 0, 0.7);
  text-align: left;
}

.emic-exam-type-container p {
  text-align: left;
}

.emic-description {
  margin-top: 10px;
}

.emic-exam-stat-wrapper {
  margin-top: 20px;
}

.emic-exam-stat-icons,
.emic-exam-stat-table {
  flex: 0 0 50%;
  width: 50%;
}

.emic-exam-stat-icons {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.emic-exam-stat-table {
  border: 1px solid rgba(79, 93, 117, 0.25);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px;
}

.emic-exam-stat-table p {
  margin-bottom: 5px;
}

.exam-info-icon-mobile {
  position: fixed;
  bottom: 40px;
  right: 10px;
}

@media only screen and (max-width: 760px) {
  .exam-info-modal {
    width: 95% !important;
  }

  .emict {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .emic-tc.flex {
    flex-direction: column;
  }

  .emic-tc.aic {
    gap: 4px;
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .emic-exam-stat-wrapper {
    flex-direction: column;
  }

  .emic-exam-stat-icons,
  .emic-exam-stat-table {
    flex: 0 0 100%;
    width: 100%;
  }

  .emic-exam-stat-icons {
    flex-direction: row;
    margin-bottom: 25px;
  }

  .exam-info-modal .ant-modal-body {
    padding: 15px;
  }

  .exam-info-modal .ant-modal-close-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
  }
}

.add-exam-wrapper,
.classroom-exam-search {
    margin-top: 20px;
}

.add-exam-table-wrapper {
    margin-top: 20px;
}


.pp-main-wrapper {
    width: 100%;
    margin-top: 64px;
    display: flex;
    flex: 1;
}

.margin-bottom-16 {
    margin-bottom: 16px;
}

.margin-bottom-24 {
    margin-bottom: 24px;
}

.pp-content-section {
    width: 55%;
    margin: 40px 0;
}

.pp-content-section .title {
    font-weight: 500;
}

.privacy-policy-dark-paragraph.dark-paragraph {
    margin-bottom: 15px;
}

.letter-spacing {
    letter-spacing: 0.02rem;
}

a.pp-website-link {
    color: var(--main-primary);
}

a.pp-website-link:hover {
    text-decoration: underline;
}

.pp-normal-paragraph.span,
.pp-normal-paragraph .span {
    font-weight: 600;
}

.normal-sub-header {
    font-weight: 700;
    font-style: normal;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #373F41;
}

.pp-list-container {
    padding-left: 18px;
}

.mobile-privacy-terms-container {
    flex: 1;
    display: flex;
    min-height: 100vh;
}

.mobile-privacy-terms-container .pp-content-section {
    width: 100%;
    padding: 20px;
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .pp-content-section {
        width: 100%;
        padding: 20px;
        margin: 15px 0;
    }
}

.class-main-container {
    padding: 0 !important;
}

.cc-main-image {
    width: 100%;
    height: 115px;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.class-content-body-wrapper {
    padding: 20px;
}

.cc-divider {
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 15px 0;
}

.cc-icon .icon-data-wrapper{
    width: fit-content;
}

.student-classroom-image-wrapper {
    width: 100%;
    height: 300px;
    /*margin-bottom: 20px;*/
}

.classroom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    object-position: center;
    transition: 0.3s;
}

.classroom-image:hover {
    opacity: 0.7;
}

.classroom-title-description-wrapper {
    background: #FFFFFF;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

@media only screen and (max-width: 768px) {
    /*.classroom-title-description-wrapper {
        padding: 10px;
    }*/
}


.cmmv-main-container {
    position: relative;
    padding: 0 !important;
}

.cmmv-wrapper {
    padding: 20px;
}

.cmmv-bookmark-wrapper {
    position: absolute;
    top: 0;
    right: 10px;
    height: 24px;
}

.cmmv-bookmark-wrapper img {
    height: 100%;
}

.cmmv-institute-wrapper {
    margin-bottom: 10px;
}

.cmmv-institute-wrapper.live-and-joined .creator {
    width: 70%;
}

.cmmv-institute-wrapper.live-and-joined .channel {
    text-overflow: ellipsis;
    width: calc(100% - 35px);
    white-space: nowrap;
    overflow: hidden;
}

.cmmv-joined {
    padding: 10px;
    width: fit-content;
    background: rgba(8, 164, 189, 0.15);
    border-radius: 4px;
    color: var(--main-primary);
}

.cmmv-joined img {
    height: 14px;
    width: 14px;
    margin-left: 5px;
}

.cmmv-timer-container {
    height: 34px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.cmmv-timer-container p {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    text-align: center;

    margin-bottom: 0;
}

.cmmv-description-wrapper {
    height: 64px;
    max-height: 64px;
}

.ss-title {
    margin: 20px 0;
}

.ad-stat-wrapper {
    margin: -20px;
    display: flex;
    flex-direction: column;
}

.admin-stat-row {
    display: flex;
    flex-flow: row wrap;
    /*justify-content: space-between;*/
}

.ad-graph-container {
    margin-top: 40px;
    padding: 20px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
}

/*.admin-line-chart-container,
.admin-pie-chart-container {
    padding: 10px;
    flex: 0 0 50%;
}*/

.admin-line-chart-container {
    /*padding: 5px;*/
    flex: 1;
    max-width: 100%;
}

.admin-line-chart-container .recharts-responsive-container {
    width: 100% !important;
}

.action-content-text {
    color: var(--main-primary);
    cursor: pointer;
}

.action-content-text:hover {
    text-decoration: underline;
}

.ad-main-container .ant-divider {
    /*margin: 10px 0;*/
    border-top: 1.5px solid #aeb8c2 !important;
}

.customized-tooltip-container {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 8px;
    min-width: 150px;
}

.tooltip-data-index-container {
    margin-top: 0.5em;
}

.tooltip-data-index {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 10px;
}

.tooltip-data-index.exam-count {
    background: var(--success-primary);
}

.tooltip-data-index.answer-consumed {
    background: var(--danger-primary);
}

.customized-tooltip-container p {
    color: #FFFFFF;
    margin-bottom: 0;
    font-weight: 500;
}

.customized-tooltip-container p label {
    margin-left: 10px;
    font-weight: 600;
}


.add-element-button {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.action-column-icon svg {
    cursor: pointer;
}

.action-column-icon {
    justify-content: space-around;
}

/*tag action form*/
.admin-tag-action-modal__form {
    display: inline-block;
    width: 100%;
}

.admin-tag-action-modal__form--title {
    margin-bottom: 20px;
}

.admin-tag-action-modal__form .ant-form-item .ant-form-item-label {
    flex: 0 0 100px;
    text-align: left;
}

.admin-tag-action-modal__form .ant-form-item .ant-form-item-label > label {
    font-weight: 400;
}

.admin-tag-action-modal__form .ant-form-item .ant-form-item-label > label::after {
    content: '';
}

.admin-tag-action-modal__form .ant-form-item input{
    height: 35px;
    border: 1.5px solid #cccccc;
    border-radius: 4px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 15px;
    color: rgba(0, 0, 0, 0.6);
    transition: .3s;
}

.admin-tag-action-modal__form .ant-form-item input:focus {
    border: 2px solid #cccccc;
    box-shadow: 0 0 1px;
}



.modal-submit-button-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.modal-submit-button-wrapper button,
.modal-submit-button-wrapper button:hover,
.modal-submit-button-wrapper button:focus{
    width: 150px;
}

.hall-action-selector {
    margin-top: 20px;
    display: flex;
}

.hall-action-selector .ant-select {
    width: 230px;
}

.hall-action-selector .ant-select .ant-select-selector {
    height: 42px;
    display: flex;
    align-items: center;
}
.classroom-title-container {
  margin-bottom: 40px;
}

.classroom-button-stat-wrapper {
}

.classroom-table .ant-table-row:hover {
  cursor: pointer;
}

.classroom-modal .step-title {
  font-weight: 500;
}

.classroom-modal .classname-input-field {
  height: 42px;
}

.classroom-next-button {
  margin-top: 20px;
}

.classroom-next-button button,
.classroom-next-button button:hover,
.classroom-next-button button:focus {
  width: 200px;
  height: 42px;
}

.cd-title-button {
  margin: 20px 0 40px;
}

.cd-title-button .icon-description {
  color: #000000;
}

.go-back-title.step-title {
  font-weight: 500;
  color: var(--main-primary);
  margin-left: 10px;
  margin-bottom: 0;
}

.go-back-title:hover {
  text-decoration: underline;
}

.pop-over .ant-popover-arrow {
  display: none;
}

.pop-over .ant-popover-content {
  width: 243px;
  margin-right: 20px;
}

.pop-over-content {
  /*padding-top: 23px;*/
}

.pop-over-item {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 42px;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;

  color: rgba(0, 0, 0, 0.7);
}

.pop-over-item:hover {
  background: var(--main-primary);
  color: #ffffff;
}

.remove-button-wrapper {
  margin-top: 48px;
}

.classroom-search .ant-input-search {
  width: 245px;
  height: 42px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.classroom-search input {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
}

.classroom-search .ant-input-search:hover {
  border: 2px solid rgba(0, 0, 0, 0.5);
}

.classroom-search .ant-input-search-icon::before {
  border: none;
}

.upload > span,
.upload .ant-upload,
.upload .library-creator-name {
  width: 100%;
  height: 100%;
}

.upload-student-modal {
  width: 50% !important;
}

.upload .library-creator-name {
  color: rgba(0, 0, 0, 0.7);
}

p.upload-student-notice {
  text-align: left;
  margin-bottom: 3px;
  font-weight: 500;
}

.download-student-list-format p {
  margin: 0;
  font-size: 10px;
}

.upload-student-main-container {
}

.upload-student-list .upload-trigger {
  background: var(--main-primary);
  border: none;
  color: #ffffff;
}

.download-student-list-format {
  color: var(--main-primary);
}

.download-student-list-format:hover {
  text-decoration: underline;
}

.upload-student-list {
  margin-top: 20px;
}

.upload-student-list .default-card {
  background: rgba(8, 164, 189, 0.05);
  border: 1px solid #08a4bd;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: none;
}

.classroom-breadcrumb.ant-breadcrumb a:hover {
  color: rgba(0, 0, 0, 0.45);
}

.classroom-breadcrumb .ant-breadcrumb-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.classroom-breadcrumb.ant-breadcrumb > span:last-child,
.classroom-breadcrumb .ant-breadcrumb-link {
  font-size: 16px;
  font-weight: 600;
}

.classroom-breadcrumb.ant-breadcrumb
  > span:last-child
  .ant-breadcrumb-link:hover {
  text-decoration: none;
}

.classroom-image-wrapper {
  margin: 20px 0;
  position: relative;
}

.classroom-image-wrapper img {
  width: 100%;
  height: 225px;
  object-fit: cover;
  object-position: center;
  transition: 0.3s;
}

.classroom-image-wrapper img:hover {
  opacity: 0.7;
}

.classroom-detail-overlay {
  position: absolute;
  width: 100%;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  max-height: 90px;
  padding: 15px 10px;
  z-index: 10;
}

.classroom-upload-image-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.classroom-upload-image-icon img {
  width: 24px;
  height: 24px;
}

.upload-menu-wrapper {
  width: fit-content;
}

.chd-dropdown-menu.upload-menu {
  width: fit-content;
  padding: 0 5px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.chd-dropdown-menu.upload-menu:hover {
  background: var(--main-primary);
}

.chd-dropdown-menu.upload-menu:hover * {
  color: white;
}

.chd-dropdown-menu.upload-menu .customDragger {
  height: 100%;
}

.chd-dropdown-menu.upload-menu .ant-upload {
  height: 100%;
  cursor: pointer;
}

.additional-stats-filter-wrapper {
  margin: 40px 0;
  position: relative;
}

.class-exam-purchased-stat {
  margin: 0 10px;
}

.stats-for-creator .as-main-col {
  padding: 0;
}

.stats-for-creator .as-main-col .admin-stat-value {
  margin: 0;
}

.stats-for-creator .as-main-col .tab-bar-normal {
  margin-bottom: 0;
}

.additional-stats-stat-container {
  /* position: absolute; */
  /* right: 0; */
  /* bottom: 0; */
}

.class-stat .as-main-col,
.class-stat .as-main-container {
  height: 100%;
}

.add-classroom-button-mobile {
  display: none !important;
}

.add-student-from-csv-modal {
  width: 50% !important;
}

.cd-tab-extra-container {
  display: block;
}

.classroom-search-mobile {
  display: none;
}

@media only screen and (max-width: 768px) {
  .add-student-from-csv-modal {
    width: 80% !important;
  }
}

@media only screen and (max-width: 576px) {
  .classroom-title-container {
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
  }

  .classroom-button-stat-wrapper {
    margin-top: 20px;
    align-items: center;
  }

  .add-classroom-button {
    display: none !important;
  }

  .add-classroom-button-mobile {
    display: flex !important;
    width: 150px;
    align-self: flex-end;
    margin-top: -25px !important;
  }

  .cd--header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cd--header__action-container {
    margin-top: 12px;
  }

  .add-student-from-csv-modal {
    width: 90% !important;
  }

  .cd-tab-extra-container {
    display: none;
  }

  .classroom-search-mobile {
    display: flex;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 600px) {
  .additional-stats-filter-wrapper {
    flex-direction: column;
    justify-content: flex-start;
  }

  .additional-stats-filter-wrapper > .stats-for-creator {
    margin-top: 10px;
  }

  
}

@media only screen and (max-width: 400px) {
  .classroom-button-stat-wrapper {
    flex-direction: column;
  }

  .classroom-button-stat-wrapper .class-exam-purchased-stat {
    margin: 0 0 10px;
  }
}

.chd-exam-details-wrapper {
    display: flex;
    margin-top: 10px;
}

.chd-exam-type-container {
    flex: 0 0 40%;
}

.chd-exam-extra-details-container {
    flex: 0 0 60%;
}

.chd-exam-extra-details-container {
    display: flex;
    margin: 0 -8px;
    justify-content: flex-end;
}

.gutter-8px {
    padding: 0 8px;
}

.chd-exam-type-container,
.chd-live-information {
    display: flex;
    align-items: center;
}

.chd-live-information,
.chd-price-information {
    background: rgba(79, 178, 134, 0.15);
    border-radius: 4px;
    padding: 7.5px 15px;
}

.chd-live-information {
    color: var(--success-primary);
}

.chd-live-information.chd-practice {
    background: rgba(239, 71, 111, 0.15);
    color: var(--danger-primary);
}

.chd-live-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--success-primary);
    margin-right: 20px;
}

.chd-live-icon.chd-practice-icon{
    background: var(--danger-primary);
}

.chd-live-information p,
.chd-exam-type-container p,
.chd-price-information p{
    margin: 0;
}

.chd-price-information {
    color: var(--main-primary);
}

.chd-mcq-detail-wrapper {
    margin-top: 15px;
}

.chd-mcq-stat-container {
    justify-content: space-between;
    /*padding: 0 40px;*/
    width: 60%;
    margin-top: 30px;
}

.chd .exam-info {
    color: var(--text-primary);
}

.chd .icon-description {
    color: rgba(0,0,0,0.6);
}

.chd-dropdown-icon  {
    width: 47px;
    height: 42px;
}

.chd-dropdown-icon-mobile {
    display: none;
}

.chd-dropdown-wrapper {
    width: 245px;
}

.ant-popover-arrow {
    display: none;
}

.chd-popover-main-wrapper {
    padding: 10px 0;
}

.popover-item-container:hover {
    background: var(--main-primary);
    color: white;
}

.chd-dropdown-menu {
    padding: 10px 0;
}

.chd-dropdown-menu li {
    padding: 0 20px;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.chd-dropdown-menu li p {
    margin: 0;
    color: rgba(0,0,0,0.7);
}

.chd-dropdown-menu li p.chd-danger-text {
    color: var(--danger-primary);
}

.chd-dropdown-menu li:hover {
    background: var(--main-primary);
}

.chd-dropdown-menu li:hover * {
    color: white;
}

.chd-dropdown-menu li.chd-danger-item:hover {
    background: var(--danger-primary);
}

.chd-dropdown-menu li:hover > p.chd-danger-text {
    color: white;
}

.chd-tab-extra-container {
    background: rgba(79, 178, 134, 0.15);
    border-radius: 4px;
    color: var(--success-primary);
    padding: 10px 10px;
    width: 240px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.chd-tab-extra-container .publish-exam {
    color: var(--success-primary);
    margin-right: 10px;
}

.edit-mcq-modal-main-container {
    padding: 10px;
}

.edit-mcq-heading {
    margin-bottom: 30px;
}

.edit-mcq-form-item-margin {
    margin-bottom: 15px;
}

.edit-mcq-form-tag-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 7px;
}

.edit-mcq-form-item-margin__tag-list-row {
    flex-flow: row wrap;
    margin: -4px;
}

.edit-mcq-form-item-margin__tag-list-item {
    padding: 4px;
}

.edit-mcq-marks-time {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 -8px;
}

.edit-mcq-button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.edit-mcq-update-button {
    width: 180px;
    height: 42px;
    border: none;
    background: var(--main-primary);
}

.edit-mcq-update-button,
.edit-mcq-update-button:hover,
.edit-mcq-update-button:focus {
    background: var(--main-primary);

}

.edit-mcq-form-main-container .form-input-label input {
    height: 42px;
}

.edit-mcq-form-main-container .form-input-label label {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 7px;
}



/*published exams stats*/
.msiv-main-container {
    width: 183px;
    height: 107px;
    background: rgba(8, 164, 189, 0.1);
    border-radius: 4px;
    flex-direction: column;
}

.msiv-main-container p{
    margin: 0;
}

.mcq-stat-main-container {
    /*flex: 1;*/
    margin: 0 -8px;
}

.published-mcq-stat-table-wrapper {
    width: 60%;
}

.published-mcq-stat-graph-wrapper {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.stat-graph-stat-row {
    display: flex;
    justify-content: space-between;
}

.stat-graph-container {
    padding-top: 10px;
}

.stat-graph-wrapper {
    padding: 20px 0;
}

.chd-mcq-detail-section-main-wrapper {
    margin-top: 10px;
}

.chd-mcq-detail-stat-wrapper {
    flex: 0 0 75%;
}

.chd-mcq-set-detail-container {
    flex: 0 0 20%;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border-radius: 4px;
    padding: 15px;
}

.chd-mcq-stat-wrapper p {
    margin-bottom: 8px;
}

.edit-exam-detail-modal {
    width: 60% !important;
}

/*.gutter-8px-8px {
    padding: 8px;
}*/

@media only screen and (max-width: 768px) {
    .chd-exam-title {
        font-size: 20px;
        line-height: 30px;
    }

    .chd-exam-details-wrapper {
        flex-direction: column;
    }

    .chd-exam-extra-details-container {
        justify-content: flex-start;
        margin: 10px -8px 0;
    }

    .chd-mcq-detail-section-main-wrapper {
        flex-direction: column;
    }

    .chd-mcq-stat-container {
        width: 100%;
        margin-bottom: 20px;
    }

    .edit-exam-detail-modal {
        width: 90% !important;
    }

    .chd-mcq-set-detail-container {
        width: 60%;
    }
}

@media only screen and (max-width: 576px) {
    .edit-exam-detail-modal {
        width: 95% !important;
    }

    .chd-dropdown-icon  {
        display: none;
    }

    .chd-dropdown-icon-mobile {
        display: block;
    }
}








.open-exam-main-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
}

.open-exam-body-container {
    margin-top: 64px;
    display: flex;
    flex: 1;
}

.open-exam-content-container {
    padding: 20px;
    width: 100%;
}

.open-exam-content-container.with-sidebar {
    width: calc(100% - 250px);
}

.open-exam-main-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.open-exam-list-wrapper {
    display: flex;
    flex-flow: row wrap;
}

.open-exam-list-main-col {
    max-width: 25%;
    flex: 0 0 25%;
    display: flex;
}

.open-exam-list-main-col.for-exam-list {
    max-width: 33.33%;
    flex: 0 0 33.33%;
    display: flex;
}

.open-exam-list-main-col .open-exam-container {
    max-width: 100%;
    flex: 1;
    cursor: pointer;
}

.open-exam-list-main-col a {
    width: 100%;
}

.open-exam-heading-wrapper {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.open-hall-heading-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.open-exam-heading-wrapper p,
.open-hall-heading-wrapper p {
    margin: 0;
}

.open-hall-heading-wrapper .ant-input-search {
    width: 300px;
}

.open-exam-toggle-button {
    margin-left: 20px;
}

.open-exam-search-bar {
    flex: 1;
    margin-right: 20px;
}

.open-exam-title-toggle-button,
.open-exam-search-sort {
    align-items: center;
    flex: 0 0 50%;
}

.open-exam-heading-wrapper__mobile-tag-filter {
    display: none;
}

.open-exam-filter-section {
    width: 200px;
}

.open-exam-filter-section .ant-select {
    width: 100%;
}

.header-menu-bar .sidebar-content-title:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 992px) {
    .open-exam-list-main-col {
        max-width: 33.33%;
        flex: 0 0 33.33%;
    }

    .open-exam-list-main-col.for-exam-list {
        max-width: 50%;
        flex: 0 0 50%;
        display: flex;
    }
}

@media only screen and (max-width: 768px) {
    .open-exam-content-container {
        padding: 10px;
    }

    .open-exam-content-container.with-sidebar {
        width: 100%;
    }

    .open-exam-body-container {
        display: block;
    }

    .open-exam-list-main-col,
    .open-exam-list-main-col.for-exam-list {
        max-width: 50%;
        flex: 0 0 50%;
        display: flex;
    }

    .open-exam-title-toggle-button,
    .open-exam-search-sort {
        flex: 0 0 100%;
    }

    .open-exam-title-toggle-button {
        width: 100%;
        justify-content: space-between;
    }

    .open-exam-heading-wrapper__mobile-tag-filter {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .open-exam-heading-wrapper__mobile-tag-filter .right-sidebar-menu {
        margin-left: 10px;
        font-weight: 500;
    }

    .open-exam-heading-wrapper.exam {
        flex-direction: column;
    }

    .open-exam-search-sort {
        flex-flow: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 10px;
    }

    .open-exam-search-bar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /*.exam-tags-modal {
        width: 95% !important;
    }*/

    .exam-tags-modal .exam-types-wrapper {
        overflow: auto;
        height: 100%;
    }
}

@media only screen and (max-width: 576px) {
    .open-exam-list-main-col,
    .open-exam-list-main-col.for-exam-list {
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
    }

    /*.open-exam-main-wrapper {
        padding: 10px 20px;
    }*/
    .open-hall-heading-wrapper {
        flex-direction: column;
    }

    .open-hall-heading-wrapper .ant-input-search {
        width: 100%;
        margin-top: 10px;
    }

}

@media only screen and (max-width: 350px) {
    .open-exam-title-toggle-button {
        flex-direction: column;
        align-items: flex-start;
    }

    .open-exam-toggle-button {
        margin-left: 0;
        margin-top: 10px;
    }
}

.preview-video-row-container {
  flex-flow: row wrap;
}

.preview-video-col-wrapper {
  max-width: 33.33%;
  flex: 0 0 33.33%;
}

.preview-video-container {
  background: #ffffff;
  border: none;
  border-radius: 4px;
}

.ptv-main-container {
  padding: 0;
}

.preview-image {
  width: 100%;
  height: 180px;
}

.ptv-description-container {
  padding: 10px;
}

.preview-video-body-wrapper {
  padding: 0.625rem;
}

@media only screen and (max-width: 992px) {
  .preview-video-col-wrapper {
    max-width: 50%;
    flex: 0 0 50%;
  }
}

@media only screen and (max-width: 480px) {
  .preview-video-col-wrapper {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

.video-guide-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.video-guide-content__title {
  color: #202020;
  font-weight: 600;
  margin-bottom: 0;
}

.video-guide-content__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(418px, 1fr));
  gap: 20px;

  @media only screen and (max-width: 1024px) {
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  @media only screen and (max-width: 768px) {
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

.mcq-result-main-container {
    flex: 1;
    min-height: 100vh;
    padding: 40px;
    background: var(--new-background);
}

.mcq-result-main-wrapper {
    background: #FFFFFF;
    position: relative;
    width: 60%;
}

.mcq-result-header-wrapper {
    height: 72px;
    align-items: flex-start;
}

.cmrc-result-main-container {
    background: #FFFFFF;
    padding: 20px;
}

.cmrc-mcqhall-logo {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.625rem;
}

.mcq-result-header-wrapper h1 {
    font-weight: 500;
    font-size: 1.125rem;
}

.crf-main-container {
    background: rgba(33, 4, 84, 0.1);
    border-radius: 4px;
    padding: 5px 10px;
}

.smid-sm-icon {
    margin-right: 10px;
    width: 1.125rem;
    height: 1.125rem;
}

.cmrc-table-container {
    margin-bottom: 2.5rem;
    position: relative;
    flex: 1;
}

.cmrc-main-table .ant-table-thead > tr > th {
    background: var(--new-background);
}

.cmrc-main-table .ant-table-tbody > tr > td {
    padding: 5px 16px;

}

.cmrc-main-table .ant-table-tbody > tr > td:nth-child(odd),
.cmrc-main-table .ant-table-tbody > tr.ant-table-row:hover > td:nth-child(odd) {
    background: rgba(33, 4, 84, 0.03);
}

.cmrc-main-table .ant-table-tbody > tr.ant-table-row:hover > td:nth-child(even) {
    background: #FFFFFF;
}

.cmrc-main-table .ant-table-tbody > tr > td,
.cmrc-main-table .ant-table-tbody > tr > td {
    font-weight: 500;
}

.cmrc-table-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 86%;
    /*top: 0;*/
    flex: 1;
    /*right: 0;*/
    bottom: 0;
}

.cmrc-table-background img {
    width: 50%;
    height: 50%;
    opacity: 0.12;
    object-fit: contain;
}

.cmrc-table-background.cmrc-single-image img {
    width: 100%;
    height: 70%;
}

.cmrc-prev-next-button {
    background: #FFFFFF;
    border-radius: 4px;
}

.cmrc-prev-next-button.cmrc-print-result {
    position: absolute;
    top: 40px;
    width: 152px;
    right: -161px;
}

.cmrc-table-pagination-container {
    position: absolute;
    right: -156px;
}

.cmrc-pagination-span {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    display: flex;
    padding: 5px 10px;
}

.cmrc-pagination-span svg {
    width: 0.7em;
}

.cmrc-pagination-span.download svg {
    width: 1em;
    top: 10px;
}

.cmrc-print-result {
    position: relative;
}

.cmrc-print-result svg {
    position: absolute;
    left: 10px;
}


.cmrc-main-table .ant-table-pagination.ant-pagination {
    position: absolute;
    display: flex;
    top: -92px;
    right: -180px;
    margin: 0;
}

.cmrc-main-table .ant-pagination-prev.ant-pagination-disabled .cmrc-prev-next-button,
.cmrc-main-table .ant-pagination-next.ant-pagination-disabled .cmrc-prev-next-button {
    background: #dbdbdb;
}

.mcq-get-result-image {
    margin-left: 10px;
    line-height: 14px;
    font-weight: 400;
    color: var(--main-primary);
}

.tags-carousel-main-container {
  position: relative;
  height: 56px;
  padding: 10px 20px;
  background: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
}

.tags-carousel-chevron {
  z-index: 1;
  /*background: rgba(204, 204, 204, 0.6);*/
  height: 100%;
  width: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
}

#left-chevron {
  background: linear-gradient(
    to right,
    #eeeeee,
    #f2f2f2,
    #f6f6f6,
    #fbfbfb,
    #ffffff
  );
  left: 0;
}

#right-chevron {
  background: linear-gradient(
    to left,
    #eeeeee,
    #f2f2f2,
    #f6f6f6,
    #fbfbfb,
    #ffffff
  );
  right: 0;
}

.tags-carousel-scroll-container {
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.05, 0, 0, 1);
  will-change: transform;
  overflow: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* firefox */
}

.tags-carousel-scroll-container .tags-main-container {
  margin-right: 10px !important;
}

/*hide scroll bar for chrome safari opera*/
.tags-carousel-scroll-container::-webkit-scrollbar {
  display: none;
}

.tags-selector-modal {
  width: 800px !important;
  max-width: 95% !important;
}

.tags-selector-modal .ant-modal-body {
  padding: 0;
}

.tags-selector-modal .ant-modal-body .exam-types-wrapper.selected-exam-types {
  margin-bottom: 20px;
  overflow: hidden;
  height: fit-content;
}

.tags-selector-modal .ant-modal-body .exam-types-wrapper {
  overflow: auto;
  height: fit-content;
  max-height: 150px;
}

@media only screen and (max-width: 768px) {
  #right-chevron,
  #left-chevron {
    display: none;
  }

  .tags-carousel-main-container {
    padding: 10px;
  }
}

@media only screen and (max-width: 576px) {
  .tags-selector-modal
    .ant-modal-body
    .tag-selector-container__body
    .ant-input-affix-wrapper {
    width: 100%;
  }

  .tags-selector-modal .ant-modal-body .tag-selector-container__footer button {
    width: 100%;
  }
}

.get-mobile-app-drawer > .ant-drawer-mask {
    background-color: rgba(0,0,0,0.8);
}

.get-mobile-app-drawer > .ant-drawer-content-wrapper > .ant-drawer-content > .ant-drawer-wrapper-body > .ant-drawer-body {
    padding: 10px;
}

.get-mobile-app-title-wrapper {
    align-items: center;
    margin-right: 30px;
}

.get-mobile-app-title-wrapper > .exam-info-value {
    font-weight: 500;
}

.get-mobile-app-logo-container {
    background: var(--new-background);
    padding: 4px;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    border-radius: 4px;
}

.get-mobile-app-logo-container > img {
    width: 100%;
    height: 100%;
}

.get-mobile-app-text-list-wrapper {
    margin: 20px 0;
}

.get-mobile-app-text-list-wrapper > li {
    margin-bottom: 10px;
    font-weight: 400;
    color: rgba(0,0,0,0.7);
}

.get-mobile-app-button-wrapper {
    width: 100%;
}

.solution-package-payment-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 1px;
  background: white;
  z-index: 1;
  padding: 24px;
}

.solution-package-payment-header {
  justify-content: space-between;
}

.solution-package-payment-description-container > img {
  width: 27px;
  height: 27px;
  margin-right: 10px;
}

.solution-package-description > h3 {
  font-weight: 600;
}

.solution-package-description > p {
  color: rgba(0, 0, 0, 0.7);
}

.solution-package-payment-container
  > .solution-package-payment-header
  > .solution-package-price-tag {
  border: 1px solid var(--main-primary);
  padding: 5px 10px;
  min-width: 80px;
  width: fit-content;
  height: 27px;
  margin-right: 20px;
  border-radius: 4px;
  position: relative;
}

.solution-package-payment-container
  > .solution-package-payment-header
  > .solution-package-price-tag
  > .recommended-institute {
  color: var(--main-primary);
  position: absolute;
  top: 5px;
  right: 5px;
}

.solution-package-payment-container
  > .solution-package-payment-header
  > .solution-package-price-tag
  > .package-price-tag {
  position: absolute;
  bottom: -15px;
  right: -15px;
}

.solution-package-payment-container
  > .solution-package-payment-header
  > .solution-package-price-tag
  > .tab-bar-selected {
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}

.solution-package-payment-option {
  margin-top: 40px;
}

.solution-package-payment-option > .sidebar-content-title,
.solution-package-payment-option > .left-sidebar-menu-highlighted {
  color: rgba(0, 0, 0, 0.6);
}

.solution-package-payment-option > .left-sidebar-menu-highlighted > label {
  font-weight: 600;
}

.solution-package-payment-option
  > .solution-package-payment-option-container
  > .pay-with-esewa {
  margin-top: 10px;
}

.solution-package-payment-footer {
  margin-top: 80px;
  justify-content: space-between;
}

.solution-package-payment-footer > .solution-package-payment-note {
  min-width: 240px;
  height: auto;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background: rgba(8, 164, 189, 0.1);
}

.solution-package-payment-footer
  > .solution-package-payment-note
  > .sidebar-content-title {
  color: var(--main-primary);
  font-weight: 400;
}

.solution-package-payment-footer > .solution-package-payment-cancel-button {
  height: 35px;
  /* margin-right: 20px !important; */
}

@media only screen and (max-width: 768px) {
  .solution-package-payment-option {
    margin-top: 20px;
  }

  .solution-package-payment-footer {
    margin-top: 40px;
  }

  .solution-package-payment-footer > .solution-package-payment-note {
    margin-right: 5px;
  }

  .solution-package-payment-footer
    > .solution-package-payment-note
    > .sidebar-content-title {
    font-size: 10px;
  }
}

@media only screen and (max-width: 359px) {
  .solution-package-payment-footer {
    flex-direction: column;
  }

  .solution-package-payment-footer > .solution-package-payment-note {
    width: 100%;
  }

  .solution-package-payment-footer > .solution-package-payment-cancel-button {
    width: 100%;
    margin: 10px 0 0 !important;
  }
}

.single-solution-package-container {
  min-height: 1px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.single-solution-package-container > .single-solution-package-header {
  margin-bottom: 20px;
}

.single-solution-package-container > .single-solution-package-header > svg {
  width: 35px;
  height: 35px;
  fill: var(--warning-primary);
  margin-right: 12px;
}

.single-solution-package-container > .single-solution-package-header > h4 {
  color: var(--success-primary);
  margin-bottom: 0;
}

.package-need-list-item h5 {
  margin-left: 12px;
}

.single-package-bottom-info-box {
  flex: 1;
  border: 2px solid #00aa63;
  box-sizing: border-box;
  border-radius: 10px;
  min-height: 46px;
  padding: 5px 10px;
  justify-content: space-between;
  margin-top: 10px;
}

.single-package-bottom-info-box .anticon-loading svg {
  fill: var(--success-primary);
}

.single-package-bottom-info-box > div > img,
.single-package-bottom-info-box .anticon-loading svg {
  margin-right: 10px;
}

.single-package-bottom-info-box > div > .pp-normal-paragraph {
  color: #00aa63;
}

.single-package-bottom-info-box > .arrow-forward {
  fill: #00aa63;
}

@media only screen and (max-width: 576px) {
  .single-solution-package-container
    > .single-solution-package-header
    > .tip-crack-image-container {
    padding: 5px;
    height: 40px;
    margin-right: 10px;
  }

  .single-solution-package-container
    > .single-solution-package-header
    > .tip-crack-image-container
    > img {
    width: 30px;
  }

  .single-solution-package-container > .single-solution-package-header > h3 {
    font-size: 14px;
  }

  .single-package-bottom-info-box {
    margin-bottom: 30px;
  }

  .single-package-bottom-info-box > div > .pp-normal-paragraph {
    font-size: 12px;
  }
}

.locked-credit-card {
  background: #edf5f8;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  border-radius: 10px;
}

.locked-credit-card__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.locked-icon-content,
.credit-content {
  display: flex;
  align-items: center;
  gap: 5px;
}

.locked-icon {
  width: 30px;
  height: 30px;
  background: #db406c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.locked-icon-content p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: #db406c;
}

.credit-content p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: #505050;
}

.locked-credit-card__body-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.locked-credit-card__body-content button {
  height: 50px;
}

.what-will-you-get-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.what-will-you-get-content h4 {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 100%;
  font-weight: 600;
  color: #505050;
}

.get-feature-list {
  padding-left: 15px;
}

.get-feature-list-item {
  font-size: 12px;
  line-height: 2;
  color: #505050;
}

.solution-package-main-wrapper {
    margin: 20px 0;
    height: 90%;
}

.solution-package-main-heading {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
}

.solution-package-main-row {
    display: flex;
    flex-flow: row wrap;
    height: 90%;
}

.solution-package-main-column {
    max-width: 33.33%;
    flex: 0 0 33.33%;
}

@media only screen and (max-width: 768px) {
    /*.solution-package-main-column {
        max-width: 100%;
        flex: 0 0 100%;
    }*/
}

@media only screen and (max-width: 576px) {
    .solution-package-main-wrapper {
        display: none;
    }
}

.admin-notification-message {
    flex-direction: column;
}

.admin-notification-message > .ant-form-item {
    width: 100%;
}

.send-message-button {
    margin-top: 20px !important;
    width: 200px;
    align-self: flex-end;
}

.send-message-button,
.send-message-button:hover,
.send-message-button:focus {
    background: var(--main-primary);
    border: none;
}

.result-rank-content {
  background: white;
  border-radius: 5px;
  padding: 4px 14px 5px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.result-rank-content__rank {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-rank-content__rank h4 {
  color: #202020;
  font-weight: 600;
  margin-bottom: 0;
}

.result-rank-content__rank-number {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #30b3c8;
}

.result-rank-content__rank-number span {
  font-size: 14px;
  line-height: 17px;
  font-weight: bold;
  color: #808080;
}

.result-rank-content__analytics-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.result-index-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-index-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e4e4e4;
  margin-top: 26px;
}

.result-index-content__header h4 {
  color: #202020;
  margin-bottom: 0;
}

.result-index-content__status-content-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.result-index-content__status-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.result-index-content__status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.result-index-content__status-count {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #202020;
  margin-bottom: 0;
}

.result-index-content__index-list {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.result-index-content__index-list-item {
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  cursor: pointer;
}

.next-question-collection {
  margin-top: 40px;
}

.next-question-collection__header {
  padding-bottom: 10px;
  border-bottom: 1px dashed #e4e4e4;
}

.next-question-collection__header h4 {
  color: #202020;
  font-weight: 700;
}

.next-question-collection__mcq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
  margin-top: 15px;

  @media only screen and (max-width: 1200px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  @media only screen and (max-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.result-question-content {
}

.result-question-content .question-index {
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: #3090a1;
  margin-bottom: 0;
}

.result-question-content .result-question-title {
  margin-top: 17px;
  margin-bottom: 0;
  color: #202020;
}

.result-option-content {
    margin-top: 17px;
}

.tag-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
  margin-top: 40px;
}

.tag-wrapper.no-margin {
  margin-top: 0;
}

.tag-list-content {
  position: absolute;
  top: 0;
}

.tag-header {
  padding-bottom: 15px;
  border-bottom: 1px dashed #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-header p {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: var(--new-background);
  margin-bottom: 0;
}

.tag-header .ant-input-affix-wrapper {
  width: 325px;
  height: 40px;
  border-radius: 4px;
}

.tag-wrapper .dictionary-container {
  background: transparent;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-inline: 0;
  width: 100%;
}

.tag-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tag-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px dashed #e4e4e4;
}

.tag-detail-header button {
  width: 34px;
  height: 34px;
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 4px 4px 36px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.tag-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: var(--new-background);
  margin-bottom: 0;
}

.tag-detail-body {
  display: flex;
  /* align-items: center; */
  gap: 22px;

  @media only screen and (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 20px;
  }
}

.tag-detail__description {
  flex: 1;
}

.tag-detail__description--label {
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  color: #202020;
}

.tag-detail__description--text {
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: rgba(50, 50, 50, 0.68);
  margin-bottom: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tag-detail__description p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.68);
}

.tag-detail__image {
  width: 310px;
  height: 206px;

  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 300px;
  }
}

.tag-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag-exam-content,
.tag-set-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tag-exam-content__label,
.tag-set-content__label {
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  color: #202020;
  margin-bottom: 0;
}

.tag-exam-content__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 20px;

  @media only screen and (max-width: 1200px) {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  @media only screen and (max-width: 1024px) {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }

  @media only screen and (max-width: 900px) {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  @media only screen and (max-width: 768px) {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    padding: 10px;
  }

  @media only screen and (max-width: 592px) {
    grid-template-columns: repeat(1, minmax(250px, 1fr));
  }

  @media only screen and (max-width: 450px) {
    grid-template-columns: repeat(1, minmax(250px, 1fr));
  }
}

.tag-set-content__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(300px, 1fr));
  gap: 20px;
}

.package-card {
  padding: 20px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.package-card__desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.package-card__desc--header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.package-card__desc--header h3 {
  color: #202020;
  margin-bottom: 0;
}

.package-feature-list {
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.package-feature-list li {
  font-size: 12px;
  line-height: 15px;
  color: #505050;
}

.package-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.package-pricing p {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #30b3c8;
  margin-bottom: 0;
}

.package-pricing p span {
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: #808080;
}

.exam-detail-content-wrapper {
  height: calc(100vh - 60px - 45px);
  overflow-y: hidden;

  @media only screen and (max-width: 768px) {
    height: fit-content;
    overflow-y: auto;
  }
}

.exam-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow: hidden;

  @media only screen and (max-width: 768px) {
    overflow: auto;
  }
}

.exam-detail-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 11px;
  gap: 8px;
  border-bottom: 1px dashed #e4e4e4;
}

.exam-detail-content__header--title-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exam-go-back-btn {
  background: #ffffff;
  border: none;
  border-radius: 4px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exam-detail-content__header--title-content p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #210454;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 16px;
  }
}

.exam-detail-content__header--action-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bookmark-btn {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  border: none;
  background: white;
  border: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  @media only screen and (max-width: 768px) {
    width: 32px;
    height: 32px;
  }
}

.exam-action-btn {
  width: 315px;

  @media only screen and (max-width: 1200px) {
    width: 250px;
  }

  @media only screen and (max-width: 768px) {
    display: none !important;
  }
}

.exam-detail-content__body {
  display: flex;
  gap: 20px;
  overflow: hidden;
  height: 100%;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    overflow-y: auto;
  }
}

.exam-detail-content__body-exam-detail-wrapper {
  flex: 1;
  overflow-y: auto;
}

.exam-detail-content__body-exam-detail-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  height: 100%;
}

.exam-detail-content__body-exam-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.exam-detail-content__exam-stat-content {
  background: #edf5f8;
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.exam-detail-content__exam-stat-item {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #505050;
  margin-bottom: 0;
}

.exam-detail-content__description-content p {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 30px;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 24px;
  }
}

.exam-detail-content__description-content-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exam-detail-content__description-toggle-btn {
  background: none;
  border: none;
  color: #30b3c8;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.exam-detail-content__tag-content {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-block: 20px;
}

.exam-detail-content__tag-content-item {
  border-radius: 24px;
  padding: 4px 10px;
  background: #edf5f8;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  color: #4d4d4d;
}

.exam-detail-content__hall-detail-content {
  border-block: 1px dashed #e4e4e4;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.exam-detail-content__hall-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-detail-content__hall-avatar {
  width: 24px;
  height: 24px;
}

.exam-detail-content__hall-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exam-detail-content__hall-content p {
  margin-bottom: 0;
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
  line-clamp: 1;
}

.exam-detail-content__exam-detail-stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.exam-detail-content__exam-stat-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.exam-detail-content__exam-stat-item p {
  font-size: 12px;
  line-height: 15px;
  color: #6f6c90;
  margin-bottom: 0;
}

.exam-detail-content__exam-stat-item p span {
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 17px;
  color: #303030;
}

.user-exam-detail-wrapper {
  position: sticky;
  bottom: 0;
  width: 100%;
}

.user-exam-detail {
  background: #fff;
  border-radius: 5px;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.user-exam-detail__rank-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-exam-detail__action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.user-exam-detail__action-stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.user-exam-detail__action button {
  height: 44px !important;

  @media only screen and (max-width: 768px) {
    display: none !important;
  }
}

.user-exam-detail__action-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.user-exam-detail__action-stat-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.user-exam-detail__action-stat-item p {
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 0;
  color: #202020;
}

.user-exam-detail__rank {
  font-size: 16px;
  font-weight: 600;
  color: #202020;
  margin-bottom: 0;
  white-space: nowrap;
}

.user-exam-detail__rank-value {
  color: #30b3c8;
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 700;
}

.exam-detail-content__body-review-wrapper {
  width: 315px;
  overflow-y: auto;

  @media only screen and (max-width: 1200px) {
    width: 250px;
  }

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.exam-detail-content__body-review {
  height: 100%;
  background: #fff;
  border-radius: 5px;
  padding: 9px 15px;
  display: flex;
  flex-direction: column;
  gap: 18px;

  @media only screen and (max-width: 768px) {
    padding-bottom: 60px;
  }
}

.exam-detail-content__body-review-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exam-detail-content__body-review-header h4 {
  font-weight: 700;
  line-height: 30px;
  color: #202020;
}

.exam-detail-content__body-review-rating-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.exam-detail-content__body-review-rating-content p {
  margin-bottom: 0;
  font-weight: 700;
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
  color: #303030;
}

.exam-detail-content__body-review-rating-list {
  border-block: 1px dashed #e4e4e4;
  display: flex;
  flex-direction: column;
}

.exam-detail-content__body-review-rating-list-item {
  padding-block: 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.exam-detail-content__body-review-rating-list-item-body {
  display: flex;
  align-items: center;
  gap: 7px;
}

.exam-detail-content__body-review-rating-list-item:not(:last-child) {
  border-block-end: 1px dashed #e4e4e4;
}

.exam-detail-content__body-review-rating-list-item-avatar {
  background: #3c877b;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: white;
}

.exam-detail-content__body-review-rating-list-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rating-user-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rating-user-detail p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0;
}

.landing-hero-content {
  background-color: var(--new-background);
  border-radius: 20px;
  padding: 90px;
  display: flex;
  flex-direction: column;
  gap: 47px;

  @media only screen and (max-width: 1200px) {
    padding: 40px;
  }

  @media only screen and (max-width: 768px) {
    padding: 20px;
  }
}

.landing-hero-content__header-content {
  display: flex;
  align-items: center;
  gap: 50px;

  @media only screen and (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.landing-hero-content__header-content-title {
  width: 49%;

  @media only screen and (max-width: 576px) {
    width: 100%;
  }
}

.landing-hero-content__header-content-title p {
  font-weight: 300;
  font-size: 52px;
  line-height: 70px;
  color: white;
  margin-bottom: 0;

  @media only screen and (max-width: 1200px) {
    font-size: 40px;
    line-height: 55px;
  }

  @media only screen and (max-width: 768px) {
    font-size: 22px;
    line-height: 27px;
  }
}

.landing-hero-content__header-content-title p span {
  font-weight: 600;
}

.landing-hero-content__sub-header {
  width: 51%;
  display: flex;
  flex-direction: column;
  gap: 13px;

  @media only screen and (max-width: 576px) {
    width: 100%;
  }
}

.landing-hero-content__sub-header-content {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.landing-hero-content__sub-header-title {
  position: relative;
  width: fit-content;
}

.landing-hero-content__sub-header-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.landing-hero-content__sub-header-title p {
  font-family: "Delicious Handrawn";
  font-size: 36px;
  line-height: 43px;
  color: #00cc66;
  margin-bottom: 0;
}

.landing-sub-title {
  font-size: 16px;
  line-height: 28px;
  color: #e4e4e4;
  margin-bottom: 0;
}

.landing-hero-content__sub-header button {
  width: fit-content;
  border-radius: 50px !important;
  height: 50px;
}

.hero-grid-layout {
  display: grid;
  grid-template-columns: 23% 1fr 30%;
  /* grid-template-columns: 270px 1fr 355px; */
  gap: 10px;
  align-items: end;

  @media only screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.hero-grid-first,
.hero-grid-third {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-grid-first {
  @media only screen and (max-width: 768px) {
    flex-direction: row;
  }
}

.hero-grid-first img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;

  @media only screen and (max-width: 768px) {
    width: 50%;
    height: auto;
  }
}

.hero-grid-second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid white;
  border-radius: 16px;

  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 250px;
  }
}

.hero-grid-third {
  @media only screen and (max-width: 768px) {
    max-width: 100%;
  }
}

.hero-grid-third img {
  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.landing-about-us {
  padding: 70px 90px;
  display: flex;
  gap: 40px;

  @media only screen and (max-width: 1200px) {
    padding: 40px;
  }

  @media only screen and (max-width: 768px) {
    padding: 20px 0;
    flex-direction: column;
    align-items: flex-start;
  }
}

.landing-about-us__description,
.landing-about-us__tag-image-content {
  flex: 1;
}

.landing-about-us__description {
  display: flex;
  flex-direction: column;
  gap: 47px;

  @media only screen and (max-width: 768px) {
    gap: 20px;
  }
}

.landing-about-us__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-about-us__header-title {
  position: relative;
  width: fit-content;
}

.landing-about-us__header-title p {
  font-family: "Delicious Handrawn";
  font-size: 36px;
  line-height: 43px;
  color: #00cc66;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 24px;
  }
}

.landing-about-us__header-title::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.landing-about-us__header-sub-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.landing-about-us__header-sub-title img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 120px;
    height: 10px;
  }
}

.landing-about-us__header-sub-title p {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 16px;
    line-height: 24px;
  }
}

.landing-about-us__description-text {
  font-size: 16px;
  line-height: 28px;
  color: #505050;

  @media only screen and (max-width: 768px) {
    font-size: 12px;
    line-height: 22px;
  }
}
.landing-about-us__stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  auto-rows: auto;

  @media only screen and (max-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.landing-about-us__stat-grid img {
  grid-column: span 2;
  width: 100%;
  height: 145px;
  object-fit: cover;
  border-radius: 10px;

  @media only screen and (max-width: 768px) {
    height: 90px;
    grid-column: span 2;
    order: 5;
  }
}

.landing-about-us__stat-grid-item {
  background: #f3fafc;
  border-radius: 10px;
  height: 145px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-end;

  @media only screen and (max-width: 768px) {
    height: 90px;
  }
}

.landing-about-us__stat-grid-item:nth-child(5) {
  @media only screen and (max-width: 768px) {
    order: 4;
  }
}

.stat-value {
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 18px;
    line-height: 22px;
  }
}

.stat-label {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #505050;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 11px;
    line-height: 13px;
  }
}

.landing-about-us__tag-image {
  position: relative;
}

.landing-about-us__tag-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag-image-blur-section {
  position: absolute;
  top: 0;
  width: 98px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.4) 100%,
    rgba(255, 255, 255, 1) 0%
  );
}

.tag-image-blur-section.left-blur {
  left: 0;
}

.tag-image-blur-section.right-blur {
  right: 0;
}

.landing-feature-exam-set-content,
.landing-feature-wrapper,
.landing-exam-set-wrapper,
.landing-feature-exam-set__header,
.landing-feature-exam-set__header-title-content {
  display: flex;
  flex-direction: column;
}

.landing-feature-exam-set-content {
  gap: 90px;
  padding-block: 80px;

  @media only screen and (max-width: 992px) {
    padding-block: 40px;
  }

  @media only screen and (max-width: 768px) {
    padding-block: 20px;
  }
}

.landing-feature-wrapper {
  gap: 60px;
}

.landing-feature-exam-set__header {
  align-items: center;
  gap: 22px;
}

.landing-feature-exam-set__header-title-content {
  gap: 9px;
}

.landing-feature-exam-set__header-title-content {
  position: relative;
  width: fit-content;
}

.landing-feature-exam-set__header-title-content p {
  font-family: "Delicious Handrawn", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 100%;
  color: #00cc66;
  margin-bottom: 0;
}

.landing-feature-exam-set__header-title-content::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.landing-feature-exam-set__header-sub-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.landing-feature-exam-set__header-sub-label p {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;
}

.landing-feature-exam-set__header-sub-label img {
  width: 170px;
  height: 11px;
}

.landing-feature-exam-set__header-desc {
  font-size: 16px;
  line-height: 28px;
  color: #505050;
  text-align: center;
  margin-bottom: 0;
  width: 70%;

  @media only screen and (max-width: 1024px) {
    width: 100%;
  }
}

.feature-grid {
  border: 1px dashed #e4e4e4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  margin-inline: 90px;

  @media only screen and (max-width: 1200px) {
    margin-inline: 40px;
  }

  @media only screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    margin: 0;
  }
}

.feature-grid-item {
  padding: 90px 0 68px 40px;
  display: flex;
  align-items: center;

  @media only screen and (max-width: 768px) {
    padding: 16px;
  }
}

.feature-grid-circle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid var(--new-background);
  background: white;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.feature-grid-circle.center-circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.feature-grid-circle.bottom-circle {
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
}

.feature-grid-item__description {
  display: flex;
  flex-direction: column;
  gap: 18px;

  @media only screen and (max-width: 768px) {
    gap: 10px;
  }
}

.feature-grid-item__description h3 {
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 17px;
  }
}

.feature-grid-item__description-text {
  font-size: 14px;
  line-height: 24px;
  color: #505050;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 11px;
    line-height: 20px;
  }
}

.feature-grid-item__title-content {
  border: 1px solid #e4e4e4;
  padding: 4px 10px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  line-height: 22px;
  color: var(--new-background);
  width: fit-content;

  @media only screen and (max-width: 768px) {
    font-size: 11px;
    line-height: 13px;
  }
}

.feature-grid-1 {
  border-bottom: 1px dashed #e4e4e4;
  border-right: 1px dashed #e4e4e4;
}

.feature-grid-2 {
  border-bottom: 1px dashed #e4e4e4;
}

.feature-grid-3 {
  border-right: 1px dashed #e4e4e4;

  @media only screen and (max-width: 768px) {
    border-bottom: 1px dashed #e4e4e4;
  }
}

.feature-grid-4 {
}

.feature-grid-item__image {
  /* min-width: 235px;
  width: 235px;
  height: 180px; */
  max-width: 235px;
  width: auto;
  max-height: 180px;
  height: auto;

  @media only screen and (max-width: 1200px) {
    min-width: 170px;
    width: 170px;
    height: 130px;
  }
}

.feature-grid-item__image img {
  width: 100%;
  height: 100%;
}

.landing-exam-set-wrapper {
  gap: 100px;
}

.exam-set-body {
  height: 280px;
  background: var(--new-background);
  border-radius: 20px;
  padding-inline: 60px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  position: relative;

  @media only screen and (max-width: 768px) {
    height: 160px;
    padding-inline: 13px 12px;
  }
}

.exam-set-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/publicHeroBg.png");
  background-repeat: repeat;
  background-position: center;
  background-size: contain;
}

.exam-set-body__title {
  width: fit-content;
  position: relative;
}

.exam-set-body__title p {
  font-family: "Delicious Handrawn", cursive;
  font-size: 36px;
  line-height: 43px;
  color: #00cc66;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 24px;
  }
}

.exam-set-browse-text {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 16px;
    line-height: 19px;
  }
}

.exam-set-body img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 140px;
    height: 10px;
  }
}

.browse-tab-list-wrapper {
  position: absolute;
  bottom: -40px;
}

.browser-tab-list {
  display: flex;
  align-items: center;
  gap: 70px;

  @media only screen and (max-width: 768px) {
    gap: 10px;
    justify-content: space-between;
  }
}

.browser-tab-list-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  @media only screen and (max-width: 768px) {
    gap: 5px;
  }
}

.browser-tab-list-item.active-tab svg {
  fill: #30b3c8;
}

.browser-tab-list-item svg {
  @media only screen and (max-width: 768px) {
    width: 54px;
    height: 54px;
  }
}

.browser-tab-list-item span {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  color: var(--new-background);
}

.browser-tab-list-item.active-tab span {
  color: #30b3c8;
}

.exam-set-body__tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.exam-set-body__tab-content .dictionary-container {
  margin: unset;
  max-width: 100%;
}

.exam-set-body__content-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

  @media only screen and (max-width: 968px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: 1fr;
  }
}

.exam-set-body__content-list.question-bank-list {
  grid-template-columns: repeat(5, 1fr);

  @media only screen and (max-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media only screen and (max-width: 968px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: 1fr;
  }
}

.exam-set-body__content-list.hall-list {
  grid-template-columns: repeat(3, 1fr);

  @media only screen and (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media only screen and (max-width: 576px) {
    grid-template-columns: 1fr;
  }
}

.tab-content-pagination {
  padding: 10px 15px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab-content-pagination__item-text {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #808080;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 12px;
    line-height: 15px;
  }
}

.tab-content-pagination__item-text span {
  color: var(--new-background);
  font-weight: 700;
}

.tab-content-pagination button {
  height: 50px;
  border-radius: 50px !important;

  @media only screen and (max-width: 768px) {
    height: 40px;
  }
}

.app-play-store-content {
  position: relative;
  height: 340px;
  background: var(--new-background);
  border-radius: 20px;
  padding: 50px 70px;
  display: flex;
  flex-direction: column;
  gap: 40px;

  @media only screen and (max-width: 1200px) {
    height: fit-content;
  }

  @media only screen and (max-width: 768px) {
    padding: 17px 40px;
    height: 545px;
    gap: 20px;
  }
}

.app-play-store-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/publicHeroBg.png");
  background-repeat: repeat;
  background-position: center;
  background-size: contain;
}

.app-play-store-content__header {
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
}

.app-play-store-content__header-title {
  font-family: "Delicious Handrawn", cursive;
  font-size: 36px;
  line-height: 43px;
  color: #00cc66;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 24px;
  }
}

.app-play-store-content__header-label {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 16px;
    line-height: 19px;
  }
}

.app-play-store-content__header img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 140px;
    height: 10px;
  }
}

.download-stat-image-content {
  display: flex;
  align-items: center;
  gap: 40px;

  @media only screen and (max-width: 1200px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.download-stat-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.download-stat-content__stat-item {
  display: flex;
  flex-direction: column;
}

.download-stat-content__stat-value {
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;
}

.download-stat-content__stat-label {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #e4e4e4;
  margin-bottom: 0;
}

.download-link-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.download-link-content p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;
}

.download-link-content__list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.download-link-content__list img {
  width: 107px;
  height: 34px;
}

.download-hand-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 565px;
  height: 415px;

  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 246px;
    object-fit: contain;
  }
}

.landing-review-wrapper {
  height: 730px;
  background: var(--new-background);
  position: relative;
  padding-block: 93px 88px;
  padding-inline: 140px;

  @media only screen and (max-width: 1024px) {
    padding: 50px;
  }

  @media only screen and (max-width: 768px) {
    padding-block: 93px 88px;
    padding-inline: 16px;
    height: 395px;
  }
}

.landing-review-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/publicHeroBg.png");
  background-repeat: repeat;
  background-position: center;
  background-size: contain;
}

.landing-review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.landing-review-title {
  width: fit-content;
  position: relative;
}

.landing-review-title p {
  font-family: "Delicious Handrawn", cursive;
  font-size: 36px;
  line-height: 43px;
  color: #00cc66;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 24px;
  }
}

.landing-review-text {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 16px;
    line-height: 19px;
  }
}

.landing-review-header img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 140px;
    height: 10px;
  }
}

.landing-hall-faq {
  padding: 100px 90px;
  display: flex;
  flex-direction: column;
  gap: 95px;

  @media only screen and (max-width: 1200px) {
    padding: 50px 40px;
    gap: 50px;
  }

  @media only screen and (max-width: 768px) {
    padding: 25px 0;
  }
}

.landing-hall-wrapper {
  display: flex;
  gap: 50px;

  @media only screen and (max-width: 768px) {
    gap: 75px;
    flex-direction: column;
  }
}

.landing-hall-desc-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 45px;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.landing-hall-desc__title-desc-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.landing-hall-desc__title-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.landing-hall-desc__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-hall-desc__title p {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #20294c;
  margin-bottom: 0;
}

.landing-hall-desc__title-content img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 120px;
    height: 10px;
  }
}

.landing-hall-desc__desc-text {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 24px;
  color: #505050;
}

.landing-hall-desc__button-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 30%;

  @media only screen and (max-width: 768px) {
    padding-left: 0;
  }
}

.join-as-creator-btn {
  width: fit-content;
  height: 50px;
  border-radius: 50px !important;
}

.learn-creator-btn {
  width: fit-content;
  height: 50px;
  border-radius: 50px !important;
  border-color: #210454 !important;
  color: #210454 !important;
}

.landing-hall-image {
  position: relative;
  width: 50%;
  height: fit-content;
  /* flex: 1;
  width: 100%; */

  @media only screen and (max-width: 768px) {
    width: 75%;
  }
}

.landing-hall-image__dashboard {
  width: 100%;
  height: auto;
  object-fit: cover;

  @media only screen and (max-width: 768px) {
    /* width: 75%; */
  }
}

.landing-hall-image__publish-question {
  position: absolute;
  bottom: -48px;
  right: -30%;
  /* right: -160px; */
  /* width: 260px;
  height: 192px; */
  width: 44%;
  height: 46%;
  object-fit: cover;
}

/* @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");

@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap"); */

* {
  font-family: Inter;
  box-sizing: border-box;
}

:root {
  --main-primary: #08a4bd;
  --main-secondary: rgba(8, 164, 189, 0.5);
  --sub-primary: #878f9d;

  --danger-primary: #ef476f;
  --danger-secondary: #ef476f;
  --success-primary: #4fb286;
  --success-secondary: #4fb286;

  --warning-primary: #ffb60d;

  --text-black: #000;
  --text-primary: #2d3142;
  --text-secondary: #4f5d75;

  --shadow-1-color: #babecc;

  --border-secondary: rgba(79, 93, 117, 0.25);

  --main-background: #f6f8ff;
  --white-background: #fff;
}

.landing-header {
  top: 0;
}

.creator-dashboard-wrapper {
  display: flex;
  /* margin-top: 52px; */
  padding: 0 0 60px 0;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}

.creator-dashboard-left-section {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.revenue-card-section {
  background: #ffffff;
  padding: 23px;
  box-shadow: 0 0 4px rgba(79, 93, 117, 0.25);
  border-radius: 4px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  min-height: 145px;
}

.revenue-card-section .amount-detail {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.amount-detail .amount-earned {
  color: #4fb286;
  font-weight: bold;
  margin-top: 9px;
  margin-bottom: 0;
}

.amount-detail .amount-earned-message {
  color: #4fb286;
  font-weight: normal;
  margin-top: 9px;
}

.revenue-card-section .user-stat-engage {
  align-items: flex-start;
  width: 35%;
}

.user-stat-engage h3 {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
}

.revenue-header,
.mcq-set-header {
  color: rgba(0, 0, 0, 0.7);
}

/*.mcq-set-header {
    margin-top: 35px;
}*/

.chart-container {
  /*
    background: #FFFFFF;
    box-shadow: 0 0 4px rgba(79, 93, 117, 0.25);
    */
  border-radius: 4px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  min-height: 223px;
  margin-top: 12px;
  flex-flow: row wrap;
}

.bar-chart {
  width: 48%;
  display: flex;
  background: #fff;
}

.bar-chart canvas,
.line-chart canvas {
  height: 100% !important;
  padding: 20px 10px 10px;
}

.line-chart {
  width: 48%;
  display: flex;
  background: #fff;
}

.pie-chart-container {
}

.chart-container.revenue-charts > .recharts-responsive-container {
  width: 49% !important;
}

.creator-stat-wrapper {
  flex-flow: row wrap;
  flex: 1;
}

.stat-box-main-container {
  display: flex;
  flex: 0 1 50%;
  flex-direction: column;
  margin: 10px 0;
}

.mcq-set-container {
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(79, 93, 117, 0.25);
  background: #ffffff;
  flex: 1;
  padding: 20px;
  width: 100%;
  min-height: 110px;
  margin-top: 12px;
}

.cd-today-stat-wrapper {
  flex: 1;
  flex-flow: row wrap;
}

.mcq-today-stat-container {
  margin-top: 20px;
}

.mcq-set-container .bar-chart {
  width: 50%;
}

.mcq-set-info {
  /*flex: 0 1 31%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  min-height: 110px;
  padding: 15px;
  flex-direction: column;
}

.mcq-set-info h4 {
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
  /*color: rgba(0, 0, 0, 0.7);*/
}

.mcq-set-info h6 {
  color: #3f88c5;
  font-weight: normal;
  margin-top: 5px;
}

.mcq-set-info .copy-price-wrapper {
  /*margin-top: 9px;*/
  display: flex;
  justify-content: space-between;
  min-height: 42px;
}

.copy-price-wrapper .copy-section {
  width: 100%;
  border: none;
}

.copy-price-wrapper .price-section {
  width: 48%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.copy-price-wrapper .copy-section,
.copy-price-wrapper .price-section {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;
}

.copy-section h4,
.price-section h4 {
  color: #4f5d75;
  font-weight: 500;
}

.copy-section h4 {
  font-size: 24px;
  line-height: 28px;
}

.right-side-bar {
  width: inherit;
  max-width: inherit;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  position: fixed;
  top: 75px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 0 4px #babecc;
}

/*
.creator-dashboard-revenue-section{
    width: 100%;
    background: #FFFFFF;
    display: flex;
    margin-top: 46px;
    min-height: 400px;
    justify-content: center;
    padding: 60px 0 30px;

}
*/
.creator-payment-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: auto;
}

.creator-payment-wrapper {
  display: flex;
  /* margin-top: 52px; */
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}

.creator-payment-left-section {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pending-payout-wrapper {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.pending-payout-wrapper .pending-payout-container {
  width: 49%;
  min-height: 400px;
  display: flex;
  background: #fff;
  border-radius: 4px;
  flex-direction: column;
  padding: 20px;
}

.pending-payout-container .total-pending-payout-request-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  min-height: 32px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.request-payment-button {
  background: var(--main-primary);
  color: white;
  border-radius: 4px;
}

.total-pending-payout-request-section span {
  font-weight: bold;
}

.pending-payout-container .last-payout-detail-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  min-height: 32px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.days-to-withdraw {
  color: var(--main-primary);
  font-weight: 500;
}

.border-bottom {
  display: block;
  height: 28px;
  border-bottom: 1px solid rgba(79, 93, 117, 0.25);
}

.last-payout-detail-section span {
  font-weight: 500;
}

.pending-payout-container .earning-today {
  margin-top: 28px;
}

.pending-payout-container .single-day-earning {
  font-size: 36px;
  line-height: 42px;
  margin-top: 9px;
  margin-bottom: 20px;
}

.pending-payout-container .list-wrapper {
  width: 100%;
  margin-top: 9px;
  display: flex;
  box-shadow: 0px 0px 4px rgba(79, 93, 117, 0.25);
  background: #fff;
  min-height: 52px;
  padding: 7px 12px;
  flex-direction: column;
}

.list-wrapper .mcq-set-name-price-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.mcq-set-name-price-wrapper .mcq-set-name {
  color: #4f5d75;
  font-weight: 500;
}

.mcq-set-name-price-wrapper .mcq-price {
  font-weight: 600;
}

.creator-bank-details {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.user-bank-details {
  margin-top: 0 !important;
}

.creator-bank-detail-container {
  width: 100%;
  min-height: 400px;
  display: flex;
  background: #fff;
  border-radius: 4px;
  flex-direction: column;
  /*padding: 20px;*/
}

.creator-payment-left-section .ant-menu-horizontal {
  background: transparent;
  border-bottom-color: transparent;
}

.creator-payment-left-section .ant-menu-horizontal > .ant-menu-item-selected {
  color: var(--main-primary);
  border-color: var(--main-primary);
  font-weight: 500;
}

.ant-table-thead > tr > th {
  background: #08a4bd;
  color: #fff;
}

.ant-table-row {
  border-bottom: 10px solid #08a4bd;
}

.data-section {
  display: flex;
  flex-direction: row;
}

.filter-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}

.filter-section-user {
  margin-top: 0 !important;
}

.filter-section .filter-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.filter-section .filter-input .label-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 5px 0;
}

.filter-date-wrapper {
  flex-flow: row wrap;
}

.filter-date-wrapper,
.filter-date,
.filter-clear-buttons {
  display: flex;
}

.filter-date,
.filter-clear-buttons {
  /*flex: 0 0 50%;*/
  width: 50%;
}

.filter-clear-buttons {
  align-items: center;
  justify-content: flex-end;
}

.filter-input .ant-picker {
  width: 200px;
}

.filter-input input {
  height: 42px;
}

.filter-input.filter-date-picker input {
  height: 32px;
}

.filter-button,
.filter-button:focus,
.filter-button:hover {
  width: 150px !important;
}

.withdrawal-container {
  display: flex;
  flex-direction: row;
}

.withdrawal-table-container {
  background: #fff;
  flex: 2.3;
  min-height: 50vh;
  margin-right: 20px;
  padding: 20px 10px 20px 10px;
}

.bank-info-container {
  background: #fff;
  flex: 0.7;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  padding: 20px 15px 20px 15px;
  align-items: center;
}

.bank-info-container .info-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 5px;
}

.bank-info-container .info-container .details {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  flex: 1;
}

.bank-info-container .edit-btn {
  width: 60%;
  margin-left: 40%;
  border: 1.5px solid #08a4bd;
  color: #08a4bd;
  background: #fff;
  font-family: "Encode Sans";
  float: left;
  margin-top: 40px;
}

.creator-payment-left-section
  .ant-menu-horizontal:not(.ant-menu-dark)
  > .ant-menu-item {
  margin-right: 20px;
  margin-left: 0;
  font-size: 15px;
}

.creator-payment-left-section
  .ant-menu-horizontal:not(.ant-menu-dark)
  > .ant-menu-item:hover {
  color: var(--main-primary);
  border-bottom: 2px solid var(--main-primary);
}

.payment-action-button-mobile {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .pending-payout-wrapper .pending-payout-container:first-child {
    width: 59%;
  }

  .pending-payout-wrapper .pending-payout-container:last-child {
    width: 39%;
  }

  .filter-date,
  .filter-clear-buttons {
    width: 100%;
  }

  .filter-clear-buttons {
    justify-content: flex-start;
  }

  .filter-section .filter-input {
    width: 50%;
  }
}

@media only screen and (max-width: 992px) {
  .mcq-set-container {
    flex-direction: column;
  }

  .pending-payout-wrapper .pending-payout-container:first-child {
    width: 100%;
  }

  .pending-payout-wrapper .pending-payout-container:last-child {
    width: 100%;
    margin-top: 20px;
  }

  .pending-payout-wrapper {
    flex-flow: row wrap;
  }
}

@media only screen and (max-width: 768px) {
  .creator-dashboard-wrapper {
    flex-direction: column;
  }

  .creator-dashboard-left-section {
    width: 100%;
  }

  .creator-stat-wrapper {
    justify-content: space-around;
  }

  .chart-container {
    flex-direction: column;
  }

  .chart-container.revenue-charts > .recharts-responsive-container {
    width: 100% !important;
  }

  .chart-container.revenue-charts
    > .recharts-responsive-container:nth-child(1) {
    margin-bottom: 20px;
  }

  .bar-chart,
  .line-chart {
    width: 100%;
  }

  .bar-chart canvas,
  .line-chart canvas {
    width: 100%;
  }

  .line-chart {
    margin-top: 20px;
  }

  /*.mcq-set-container {
        flex-direction: column;
    }*/
  .mcq-set-info:nth-child(2),
  .mcq-set-info:nth-child(3) {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 576px) {
  .request-payment-button,
  .days-to-withdraw {
    display: none !important;
  }

  .payment-action-button-mobile {
    display: flex;
    align-content: center;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .payment-action-button-mobile .request-payment-button,
  .payment-action-button-mobile .days-to-withdraw {
    display: flex !important;
    margin: 0;
  }

  .filter-section .filter-input {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .filter-date {
    flex-flow: row wrap;
  }

  .filter-input .ant-picker {
    width: 80%;
  }
}

@media only screen and (max-width: 400px) {
  .filter-input .ant-picker {
    width: 100%;
  }
}

.creator-graph-tooltip {
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
    width: fit-content;
    height: fit-content;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 5px;
}

.creator-graph-tooltip p {
    margin-bottom: 4px;
}

.live-exam-wrapper,
.practice-exam-wrapper {
    display: flex;
    align-items: center;
}

.live-exam-count,
.practice-exam-count {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.live-exam-count {
    background: var(--success-primary);
}

.practice-exam-count {
    background-color: var(--danger-primary);
}
.exam-theme-icon-container{
    margin-right: 15px;
    width: 46px;
    height: 35px;
}

.exam-icon-container,
.hall-icon-container {
    width: 24px;
    height: 24px;
}

.icon-main-container {
    width: 15px;
    height: 15px;
}

.user-stat-icon {
    width: 20px;
    height: 20px;
}

.icon-main-container img {
    max-height: 100%;
    max-width: 100%;
}

.beta-icon-container {
    background: #ffffff;
    border: none;
    border-radius: 5px;
    color: var(--new-background);
    width: 30px;
    height: 12px;
    margin-left: 5px;
    margin-bottom: 20px;
}

.beta-text {
    font-style: normal;
    font-weight: bold;
    font-size: 8px;
    line-height: 8px;
    margin: 0;
}
* {
  font-family: Encode Sans;
  box-sizing: border-box;
}

:root {
  --main-primary: #08a4bd;
  --main-secondary: rgba(8, 164, 189, 0.5);
  --sub-primary: #878f9d;

  --danger-primary: #ef476f;
  --danger-secondary: #ef476f;
  --success-primary: #4fb286;
  --success-secondary: #4fb286;

  --warning-primary: #ffb60d;

  --text-black: #000;
  --text-primary: #2d3142;
  --text-secondary: #4f5d75;

  --shadow-1-color: #babecc;

  --border-secondary: rgba(79, 93, 117, 0.25);

  --main-background: #f6f8ff;
  --white-background: #fff;
}

.contact-page-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: auto;
}

.contact-info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-info-card {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-info-card__image-content {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 768px) {
    width: 50px;
    height: 50px;
  }
}

.contact-info-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;

  @media only screen and (max-width: 768px) {
    width: 18px;
    height: 18px;
  }
}

.contact-info-card__icon svg {
  width: 100%;
  height: 100%;
}

.contact-info-card__info-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-info-card__info-desc p {
  margin-bottom: 0;
}

.contact-info-card__title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #20294c;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 17px;
  }
}

.contact-info-card__value {
  font-size: 16px;
  line-height: 19px;
  color: #505050;

  @media only screen and (max-width: 768px) {
    font-size: 12px;
    line-height: 15px;
  }
}

.contact-page-divider {
  margin: 0;
  border-block: 1px dashed #e4e4e4;
}

.contact-page-form-content {
  display: flex;
  gap: 50px;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
  }
}

.contact-page-form__form {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: 40px;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.contact-page-form__header {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.contact-page-form__header p {
  margin-bottom: 0;
}

.contact-page-form__header-title {
  font-size: 24px;
  line-height: 34px;
  font-weight: bold;
  color: var(--new-background);
}

.contact-page-form__header-sub-title {
  font-size: 16px;
  line-height: 28px;
  color: #505050;
}

.contact-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-form-content {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);

  @media only screen and (max-width: 576px) {
    display: flex;
    flex-direction: column;
  }
}

.contact-form-content .ant-form-item {
  margin-bottom: 0;
}

.contact-form-content .ant-form-item .ant-form-item-label > label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: #696969;
}

.contact-form-content .ant-form-item .ant-input {
  height: 44px;
  border-radius: 4px;
}

.contact-form-content .ant-form-item .ant-input-number {
  width: 100%;
  border-radius: 4px;
  height: 44px;
}

.contact-form-content
  .ant-form-item
  .ant-input-number
  .ant-input-number-input-wrap,
.contact-form-content .ant-form-item .ant-input-number .ant-input-number-input {
  height: 100%;
}

.contact-form-content .ant-form-item textarea.ant-input {
  height: auto;
}

.form-message-item {
  grid-column: span 2;
}

.contact-submit-btn {
  width: fit-content;
  height: 50px;
  border-radius: 50px !important;
}

.contact-page-form__map {
  width: 45%;

  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 300px;
  }
}

.contact-info-wrapper {
  width: 100%;
  background: #ffffff;
  display: flex;
  margin-top: 46px;
  min-height: 400px;
  justify-content: center;
  padding: 60px 0 30px;
}

.landing-header {
  top: 0;
}

.contact-info-section {
  width: 80%;
  display: flex;
  justify-content: space-between;
}

.mobile-info-section {
  width: 80%;
  display: flex;
  justify-content: space-between;
}

.left-section {
  width: 49%;
  display: flex;
  flex-direction: column;
}

.left-section .contact-header {
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 46px;
}

.left-section .contact-detail {
  margin-bottom: 16px;
  font-weight: normal;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.6);
}

.left-section .contact-detail .icon {
  margin-right: 16px;
}

.left-section .left-bottom-info {
  margin-top: 160px;
  width: 100%;
  border-radius: 4px;
  display: flex;
  padding: 20px;
  min-height: 122px;
  flex-direction: column;
  background-color: rgba(8, 164, 189, 0.1);
}

.left-section .left-bottom-info .message-title {
  color: var(--main-primary);
}

.left-section .left-bottom-info .info-message {
  color: rgba(0, 0, 0, 0.6);
  margin-top: 9px;
}

.map-section {
  display: flex;
  flex-direction: column;
  width: 49%;
}

.map-section iframe {
  height: 100% !important;
}

.map-section .right-bottom-info {
  margin-top: 10px;
  width: 100%;
  border-radius: 4px;
  display: none;
  padding: 20px;
  min-height: 122px;
  flex-direction: column;
  background-color: rgba(8, 164, 189, 0.1);
}

.map-section .right-bottom-info .message-title {
  color: var(--main-primary);
}

.map-section .right-bottom-info .info-message {
  color: rgba(0, 0, 0, 0.6);
  margin-top: 9px;
}

.send-email-wrapper {
  width: 100%;
  background: #ffffff;
  display: flex;
  /*min-height: 600px;*/
  justify-content: center;
  padding: 20px 0;
}

.send-email-wrapper .send-email-section {
  width: 80%;
  display: flex;
  /*min-height: 600px;*/
  justify-content: flex-start;
  flex-direction: column;
}

.send-email-header {
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 9px;
}

.sub-email-header {
  font-style: normal;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 44px;
}

.send-mail-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-item {
  display: flex;
  min-height: 65px;
  margin-bottom: 10px;
  flex-direction: column;
  justify-content: flex-start;
}

.form-item .form-input {
  /*min-height: 42px;*/
  width: 65%;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  border-radius: 4px;
}

.form-item-textarea .ant-col.ant-form-item-control {
  min-height: auto;
}

.form-item-textarea label {
  width: 100%;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  display: flex;
  margin-bottom: 5px;
  height: 17px;
  color: rgba(0, 0, 0, 0.6);
}

.form-item-textarea {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  margin-bottom: 10px;
}

.form-item-textarea .form-textarea {
  width: 65%;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  border-radius: 4px;
  min-height: 168px;
}

.form-item label {
  width: 100%;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  display: flex;
  margin-bottom: 5px;
  height: 17px;
  line-height: 17px;
  color: rgba(0, 0, 0, 0.6);
}

.form-item .submit-button {
  background: var(--main-primary);
  color: var(--white-background);
  height: 35px;
  /*margin-top: 40px;*/
  min-width: 230px; /*
    margin-top: 100px;
    */
}

.ant-form-item-label > label.ant-form-item-required::before {
  padding-left: 0;
}

.contact-footer-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #f9f9f9;
  min-height: 450px;
}
.contact-footer-content-container {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact-footer-content-container .new-to-mcqhall-wrapper {
  background: #ffffff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  min-height: 253px;
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex: 0 1 48%;
}
.new-to-mcqhall-wrapper .new-mcqhall-header {
  margin-top: 20px;
  color: var(--main-primary);
  font-weight: normal;
}
.new-to-mcqhall-wrapper .message {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: normal;
}

.contact-footer-content-container a {
  width: 373px;
}

.contact-footer-content-container .become-creator-wrapper {
  background: #ffffff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  min-height: 253px;
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex: 0 1 48%;
}

.become-creator-wrapper .become-creator {
  margin-top: 20px;
  color: var(--main-primary);
  font-weight: normal;
}
.become-creator-wrapper .creator-message {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: normal;
}

.cc-recaptcha-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cc-recaptcha-submit.for-contact {
  width: 65%;
}

.cc-recaptcha-submit.for-modal {
  width: 100%;
}

.cc-recaptcha-submit .form-item {
  margin: 0;
  min-height: 35px;
}

.cc-recaptcha-submit .form-item .submit-button {
  min-width: fit-content;
}

@media only screen and (max-width: 768px) {
  .cc-recaptcha-submit .form-item .submit-button {
    min-width: 100%;
  }

  .cc-recaptcha-submit.for-contact .form-item .submit-button,
  .cc-recaptcha-submit.for-modal .form-item .submit-button {
    margin-top: 0;
  }

  .cc-recaptcha-submit.for-contact {
    width: 100%;
  }

  .send-queries-modal .ant-modal {
    width: 90% !important;
    top: 5%;
  }

  .send-email-wrapper .send-email-section {
    width: 100%;
  }

  .contact-info-wrapper {
    /*        display: flex;
                flex-direction: column;*/
  }

  .contact-info-section {
    flex-direction: column;
  }

  .contact-info-section .left-bottom-info {
    display: none;
  }

  .contact-info-section .left-section {
    width: 100%;
  }

  .map-section {
    width: 100%;
    margin-top: 10px;
  }

  .map-section .right-bottom-info {
    display: flex;
    margin-top: 20px;
  }

  .contact-page-container .send-email-wrapper .send-email-section {
    width: 80%;
  }

  .send-email-wrapper .send-email-section .form-input {
    width: 100%;
  }

  .form-item-textarea .form-textarea {
    width: 100%;
  }

  .form-item .submit-button {
    width: 100%;
    margin-top: 30px;
  }

  .contact-footer-content-container {
    width: 100%;
    flex-direction: column;
    padding: 40px 0;
  }
  .become-creator-wrapper {
    width: 80%;
  }
  .new-to-mcqhall-wrapper {
    width: 80%;
    margin-bottom: 20px;
  }

  h1.send-email-header {
    font-size: 24px;
    line-height: 26px;
  }

  h3.sub-email-header {
    font-size: 16px;
  }

  .contact-footer-content-container a .new-to-mcqhall-wrapper,
  .contact-footer-content-container a .become-creator-wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 520px) {
  .cc-recaptcha-submit {
    align-items: inherit;
    flex-direction: column;
  }

  .cc-recaptcha-submit.for-contact .form-item .submit-button,
  .cc-recaptcha-submit.for-modal .form-item .submit-button {
    margin-top: 20px;
  }

  .cc-recaptcha-submit.for-modal .g-recaptcha {
    transform: scale(0.8) !important;
  }
}

.landing-hero-main-wrapper {
    margin-top: 46px;
    height: 483px;
    padding: 5px 10%;
    width: 100%;
    background: var(--new-background);
    flex-direction: row;
}

.landing-hero-text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mcq-landing-main-heading-1 {
    font-style: normal;
    font-weight: 500;
    font-size: 50px;
    line-height: 50px;

    color: #fff;
}

.mcq-landing-main-heading-2 {
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 40px;

    color: #fff;
}

.sub-heading-container h1 {
    color: #fff;
}

.main-heading-container {
    justify-content: space-around;
}

.landing-hero-image-container{
    width: 341px;
    height: 308px;
}

@media (max-width: 768px) {
    .landing-hero-image-container {
        display: none;
    }

    .landing-hero-text-wrapper{
        justify-content: center;
    }

    .landing-hero-main-wrapper {
        height: 300px;
    }

    .mcq-landing-main-heading-1 {
        font-size: 36px;
    }

    .mcq-landing-main-heading-2 {
        font-size: 26px;
    }

    .sub-heading-container h1 {
        font-size: 16px;
        line-height: 22px;
    }

    .mcq-landing-main-heading-1,
    .mcq-landing-main-heading-2,
    .sub-heading-container h1 {
        text-align: center;
    }
}


.mock-exam-main-container {
  padding: 15px;
}

.mock-exam-main-container .live-exam-container {
  padding: 0;
  display: grid;
  gap: 10px;
}

.mock-exam-main-container .live-exam-container .mcq-title {
  line-height: 24px;
  font-weight: 600;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 19px;
  }
}

.exam-rating-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exam-rating-content__rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.exam-rating-content__rating p {
  font-size: 13px;
  line-height: 16px;
  color: #303030;
  margin-bottom: 0;
}

.hall-published-content__separator {
  width: 3px;
  height: 3px;
  background: #c4c4c4;
  border-radius: 50%;
}

.exam-rating-content__rating .ant-rate {
  font-size: 14px;
}

.exam-rating-content__rating .ant-rate .ant-rate-star:not(:last-child) {
  margin-right: 2px !important;
}

.exam-rating-content__appeared {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  line-height: 16px;
  color: #6f6c90;
}

.exam-rating-content__appeared .attended {
  color: #303030;
  font-weight: 500;
}

.hall-published-content {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  border-block: 1px dashed #e4e4e4;
  padding-block: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.hall-published-content__hall-content {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 25%;
}

.hall-published-content__hall-content .ant-avatar-square {
  min-width: 25px;
}

.hall-published-content__hall-name {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #4d4d4d;
  margin-bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.hall-published-content__published-at {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  line-height: 16px;
  color: #6f6c90;
}

.hall-published-content__published-at .published-date {
  color: #303030;
  font-weight: 500;
}

.tag-content {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tag-content__lock-status-content {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.tag-content__tag {
  background: #f6f6f6;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 22px;
  color: #4d4d4d;
  border-radius: 22px;
  min-width: 45px;
  width: fit-content;
  white-space: nowrap;
}

.mock-exam-main-container .live-exam-container .mock-exam-status-container {
  /* background: #f8f8f8; */
  border-radius: 4px;
}

.live-exam__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-container {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: #30b3c8;
}

.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}

.left-sidebar-remaining-package-container {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px;
    border-radius: 25px;
    width: 95%;
    margin: 10px auto 0;
}

.left-sidebar-remaining-package-container.remaining-sets-0 {
    background: rgba(239, 71, 111, 0.9);
    border: none;
}

.left-sidebar-remaining-package-container > img {
    margin-right: 12px;
    width: 24px;
    height: 24px;
}

.left-sidebar-remaining-package-container > .library-description {
    color: #ffffff !important;
    font-weight: 500;
}

.mh-payment-box {
    width: 240px;
    height: 40px;
    padding: 5px 10px;
    border: 1px solid;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
}

.mh-payment-box > img {
    width: 17px;
    height: 17px;
    position: absolute;
    left: 10px;
}


.solution-package-container {
    border: 2px solid;
    box-sizing: border-box;
    border-radius: 10px;
    min-height: 290px;
    position: relative;
    height: 100%;
}

.solution-package-edit {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 30px;
    height: 30px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: none;
    z-index: 1;
}

.solution-package-edit svg {
    width: 0.8em;
    height: 0.8em;
}

.solution-package-vertical-half {
    position: relative;
    height: 110px;
}

.solution-package-arc {
    height: 100%;
    border: none;
    padding-top: 10px;
    border-radius: 7px 7px 50% 50% / 7px 7px 30% 30%;
}

.solution-package-price-details-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.solution-past-del-price {
    height: 16px;
}

.solution-past-del-price p {
    text-align: center;
}

.solution-past-del-price del {
    color: #FFFFFF;
}

.solution-package-price-details-container h2,
.solution-package-price-details-container h3 {
    color: white !important;
    text-align: center;
}

.solution-package-price-details-container h2 {
    margin-bottom: 10px;
    font-size: 22px;
}

.solution-package-price-details-container p {
    margin-bottom: 0;
}

.solution-package-price-details-container p {
    font-weight: 600;
}

.package-image-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 35px;
    width: 35px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background: white;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.package-image-container > img {
    height: 25px;
    width: 25px;
}

.solution-package-content-container {
    flex-direction: column;
    height: 50%;
    justify-content: center;
    padding: 4px 10px 10px;
    margin-top: 15px;
}

.solution-package-content-container > .sidebar-content-header {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8) !important;
    text-align: center;
}

.solution-package-description-container {
    padding: 0;
    list-style-type: none;
}

.solution-package-description-container > .right-sidebar-menu-highlighted {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0.3rem;
}

.package-buy-button {
    height: 37px;
    border: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    color: #FFFFFF;
}

.package-buy-button > svg {
    margin-left: 12px;
    fill: #FFFFFF;
}

/*@media only screen and (max-width: 768px) {
    .solution-package-container {
        min-height: 180px;
    }

    .solution-package-vertical-half {
        height: 46px;
    }

    .solution-package-arc {
        padding: 0 20px;
        border-radius: 10px 10px 0 0;
        display: flex;
    }

    .solution-package-price-details-container {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .solution-package-price-header {
        flex-direction: row;
        align-items: center;
    }

    .solution-package-price-header > .solution-past-del-price {
        margin-right: 10px;
    }
}*/

@media only screen and (max-width: 576px) {
    .solution-package-arc {
        height: 150px;
    }
}

.try-again-modal-container {

}

.try-again-modal-header {
    margin-bottom: 20px;
}

.try-again-modal-header > svg {
    fill: var(--danger-primary);
    width: 35px;
    height: 35px;
    margin-right: 12px;
}

h5 {
    color: rgba(0, 0, 0, 0.7);
    line-height: 26px;
}

.try-again-package-need-list {
    margin-top: 10px;
    list-style-type: none;
    padding: 0;
}

.try-again-package-need-list-item {
    margin-bottom: 10px;
}

.list-item-image-container {
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: rgba(252, 215, 112, 0.5);

}

.try-again-package-need-list-item > h5 {
    color: rgba(0,0,0,0.6) !important;
    margin-bottom: 0;
    margin-left: 10px;
}

.try-again-modal-container > button {
    margin-top: 40px !important;
    width: 100%;
    height: 35px;
}





.mcq-collection-set {
  background: #ffffff;
  border: 1px solid #ededed;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px;
  /* max-width: 150px; */
  width: 100%;
}

.mcq-collection-set__header {
  margin-bottom: 8px;
}

.mcq-collection-set__header::before {
  content: "";
  height: 18px;
  width: 6px;
  background: var(--main-primary);
  opacity: 0.8;
  margin-right: 8px;
}

.mcq-collection-set__header h4 {
  font-weight: bold;
  line-height: 20px;
  color: rgba(77, 77, 77, 0.88);
  margin-bottom: 0;
}

.mcq-collection-set__status-container {
  width: 100%;
  height: 100px;
  background: #f9f9f9;
  border: 1px solid #f4f4f4;
  box-sizing: border-box;
  border-radius: 2px;
  padding: 18px;
  align-content: center;
  margin-bottom: 10px;
}

.mcq-collection-set__progress-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mcq-collection-set__score-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.last-scored-text {
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  color: #202020;
  margin-bottom: 0;
}

.score-text {
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

.mcq-collection-set__status-container .recommended-institute {
  font-weight: 600;
  color: rgba(77, 77, 77, 0.52);
}

.mcq-collection-set__status-container .ant-progress .library-description {
  font-weight: 600;
  color: #00b850;
}

.mcq-collection-set__status-container
  .ant-progress
  .library-description.change-color {
  color: #b7312c;
}

.mcq-collection-set__status-container .post-subtitle {
  font-weight: normal;
  line-height: 20px;
  color: rgba(77, 77, 77, 0.52);
  text-align: center;
}

.mcq-collection-set__status-container .post-subtitle label {
  font-weight: 600;
  quotes: "\2018" "\2019";
}

.mcq-collection-set__status-container .post-subtitle label::before {
  content: open-quote;
}

.mcq-collection-set__status-container .post-subtitle label::after {
  content: close-quote;
}

.mcq-collection-set__status-container .sidebar-content-header {
  font-weight: 600;
  color: #b7312c;
}

.mcq-collection-set__view-results {
  font-weight: 600;
  color: rgba(77, 77, 77, 0.52);
  margin-bottom: 0.86em;
  margin-top: 0.36em;
  text-align: left;
}

.mcq-collection-set__view-results::after {
  content: "\27F6";
  width: 9px;
  height: 8px;
  margin-left: 7px;
}

.mcq-collection-set__view-results.exam-completed,
.mcq-collection-set__view-results.exam-completed::after {
  color: rgba(33, 4, 84, 0.8);
}

.mcq-collection-set__view-results.exam-completed:hover {
  text-decoration: underline;
}

.mcq-collection-set__start-button-wrapper {
  display: flex;
  gap: 9px;
}

.mcq-collection-set__start-button-wrapper a,
.mcq-collection-set__start-button {
  width: 100%;
}

.mcq-collection-set__start-button-disabled,
.mcq-collection-set__start-button-disabled:active,
.mcq-collection-set__start-button-disabled:focus,
.mcq-collection-set__start-button-disabled:hover {
  color: rgba(0, 0, 0, 0.25) !important;
  border-color: #d9d9d9 !important;
  background: #f5f5f5 !important;
  text-shadow: none;
  box-shadow: none;
}

.mcq-collection {
  /*padding-bottom: 40px;*/
  width: 100%;
}

.mcq-collection__header .admin-status-text {
  font-weight: 500;
  color: var(--main-primary);
}

.mcq-collection__header .admin-status-text:hover {
  text-decoration: underline;
}

.mcq-collection__header-action-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcq-collection__header-action-container .view-all-btn {
  background: var(--main-primary);
  border-color: var(--main-primary);
  flex-direction: row-reverse;
  gap: 10px;
  height: 34px;
}

.mcq-collection__header-carousel-button-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcq-collection__header-carousel-button-content span {
  cursor: pointer;
}

.mcq-collection__header-carousel-button-content span[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/*body*/
.mcq-collection__body {
  border: none;
  width: 100%;
  position: relative;
}

.mcq-collection__body--collection-list {
  padding: 10px 0;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.mcq-collection__body--collection-list-carousel {
  display: flex;
  overflow: auto;
  gap: 10px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mcq-collection__body--collection-list-carousel::-webkit-scrollbar {
  display: none;
}

.mcq-collection__body--right-chevron {
  position: absolute;
  bottom: -20px;
  right: 15px;
}

.mcq-collection__body--right-chevron svg,
.mcq-collection__body--left-chevron svg {
  fill: var(--main-primary);
}

.mcq-collection__body--left-chevron {
  position: absolute;
  bottom: -20px;
  left: 15px;
}

.mcq-collection__body--left-chevron svg {
  transform: rotate(180deg);
}

@media only screen and (max-width: 768px) {
  .mcq-collection__body--left-chevron,
  .mcq-collection__body--right-chevron {
    display: none;
  }
}

/*main*/
.tags-main-container {
    background: rgba(8, 164, 189, 0.12);
    border: none;
    border-radius: 1rem;
    width: fit-content;
    padding: 0 10px;
    margin-right: 8px;
}

.tags-main-container:hover {
    background: rgba(8, 164, 189, 0.2);
}

.tags-main-container .pp-normal-paragraph {
    text-align: center;
    color: var(--main-primary);
    font-weight: 500;
}

/*for exam box*/

.tags-main-container.tags-for-exam-box {
    background: rgba(76, 76, 191, 0.12);
    /*padding: 10px 30px;*/
    padding: 2.5px 10px;
    cursor: pointer;
    margin-right: 0;
    min-width: fit-content;
}

.tags-main-container.tags-for-exam-box:hover,
.tags-main-container.tag-selected {
    background: var(--new-background);
}

.tags-main-container.tags-for-exam-box:hover > .pp-normal-paragraph,
.tags-main-container.tag-selected > .pp-normal-paragraph {
    color: #FFFFFF !important;
}

.tags-main-container.tags-for-exam-box .pp-normal-paragraph,
.tags-main-container.tag-selected > .pp-normal-paragraph{
    color: var(--new-background);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

/*closable*/
.tags-main-container.tag-closable {
    position: relative;
    min-width: 80px
}

.tags-main-container.tag-closable .pp-normal-paragraph {
    margin-right: 20px;
}

.tags-main-container.tag-closable svg {
    fill: #ffffff;
    position: absolute;
    right: 5px;
    width: 18px;
    height: 18px;
}

.landing-question-bank {
    padding: 120px 0 120px 120px;
    background: #FAFAFA;
}

.landing-question-bank__heading h2 {
    font-weight: 500;
    color: rgba(50, 50, 50, 0.4);
}

.landing-question-bank__available-text {
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 57px;
    color: rgba(50, 50, 50, 0.4);
    margin-bottom: 0.5em;
}

.landing-question-bank__body {
    gap: 10%;
}

.landing-question-bank__body--desc {
    width: 30%;
}

.landing-question-bank__body--desc .landing-title {
    color: #323232;
}

.landing-question-bank__body--desc .tab-bar-normal {
    font-weight: 400;
    line-height: 20px;
    color: rgba(50, 50, 50, 0.72);
    margin-bottom: 1.57em;
}

.landing-question-bank__body--desc .exam-page-header-title {
    line-height: 24px;
    color: var(--new-background);
    text-align: left;
}

.landing-question-bank__body--desc .exam-page-header-title:hover {
    text-decoration: underline;
}

.landing-question-bank__carousel {
    width: 70%;
    overflow: hidden;
    position: relative;
}

.landing-question-bank__carousel-list {
    display: flex;
    gap: 8px;
    overflow: auto;
    margin-left: 10%;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.landing-question-bank__carousel-list::-webkit-scrollbar {
    display: none;
}

.landing-question-bank__carousel--left-chevron {
    position: absolute;
    bottom: 50%;
    left: 0;
    transform: translateY(-100%);
}

.landing-question-bank__carousel--left-chevron svg {
    fill: var(--new-background);
}

.landing-question-bank__carousel-mobile {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .landing-question-bank {
        padding: 80px 0 80px 5%;
    }

    .landing-question-bank__heading h2 {
        font-size: 20px;
        line-height: 24px;
    }

    .landing-question-bank__available-text {
        font-size: 46px;
        line-height: 52px;
    }

    .landing-question-bank__body--desc .landing-title {
        font-size: 28px;
        line-height: 44px;
    }

    .landing-question-bank__body--desc .exam-page-header-title {
        font-size: 18px;
        line-height: 21px;
    }

}

@media only screen and (max-width: 768px) {
    .landing-question-bank {
        padding: 64px 0 64px 16px;
    }

    .landing-question-bank__carousel {
        display: none;
    }

    .landing-question-bank__body--desc {
        width: 100%;
    }

    .landing-question-bank__carousel-mobile {
        display: block;
        position: relative;
        margin-top: 32px;
    }

    .landing-question-bank__carousel-list {
        margin-left: 5%;
    }

    .landing-question-bank__heading h2 {
        font-size: 18px;
        line-height: 21px;
    }

    .landing-question-bank__body--desc .landing-title {
        font-size: 24px;
        line-height: 28px;
    }

    .landing-question-bank__body--desc .exam-page-header-title {
        font-size: 16px;
        line-height: 19px;
    }
}
.custom-icon {
    width: 24px;
    height: 24px;
}

.buy-premium-content {
    position: relative;
    padding: 30px 0 30px 40px;
}

.buy-premium-content__info-icon {
    position: absolute;
    top: -10px;
    right: -10px;
}

.buy-premium-content__body .right-sidebar-menu {
    margin-top: 20px;
    line-height: 20px;
    color: rgba(0,0,0,0.7);
}

.buy-premium-content__footer {
    margin-top: 50px;
    gap: 4px;
}

@media only screen and (max-width: 768px) {
    .buy-premium-content {
        padding: 0;
    }

    .buy-premium-content__info-icon {
        width: 50px;
        height: 50px;
    }

    .buy-premium-content__footer {
        margin-top: 30px;
    }
}



.apc-main-container__header button,
.apc-main-container__header button:hover,
.apc-main-container__header button:focus {
    background: var(--main-primary);
    border: none;
}

.apc-main-container__header button {
    width: 120px;
    height: 32px;
    position: relative;
}

.apc-main-container__header button svg {
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 10px;
}

.earning-main-row {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    margin: 15px 0;
}

.earning-main-row .as-main-col {
    padding: 0;
}



.solution-package-main-wrapper.admin-package-container {
    margin: 0;
}

.admin-package__main-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 8px;
}

.solution-package-main-wrapper.admin-package-container .solution-package-main-column {
    max-width: 100%;
    flex: 0 0 100%;
}

/*solution package action form*/
.solution-package-action-form {
    display: inline-block;
}

.solution-package-action-form__item.ant-form-item {
    margin-bottom: 10px;
}

.solution-package-action-form__item .ant-form-item-label {
    padding: 0 0 5px;
}

.solution-package-action-form__item .ant-form-item-label label {
    line-height: 21px;
    color: rgba(0,0,0,0.7);
    font-weight: 500;
}

.solution-package-action-form__item-list-row {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 8px;
}

.solution-package-action-form__item.feature-list .ant-input-affix-wrapper {
    margin-bottom: 8px;
}

.solution-package-action-form__button {
    width: 180px;
    margin-top: 20px !important;
    float: right;
}


/*.collection-active-sets__header .ant-input-search,
.collection-active-sets__header .ant-radio-group,
.collection-active-sets__header .ant-select,
.collection-active-sets__header .ant-btn {
    flex: 1;
}*/

.collection-active-sets__header .ant-input-search {
    width: 250px;
}

.collection-active-sets__header .ant-select {
    width: 200px;
    margin-right: 10px;
}

.collection-active-sets__table {
    margin-top: 20px;
}

.admin-individual-collection__go-back {
    margin-bottom: 10px;
}

.admin-individual-collection__mcq-selector-modal {
    width: 70% !important;
}

.admin-individual-collection__mcq-selector {
    display: inline-block;
    width: 100%;
}

.admin-individual-collection__mcq-selector button {
    float: right;
    height: 42px;
    width: 150px;
}

.admin-mcq-collection-container__modal {
    width: 80% !important;
}

.mcq-collection__table table > tbody > tr {
    cursor: pointer;
}

.create-edit-collection-form .ant-form-item .ant-form-item-label {
    padding: 0;
}

.create-edit-collection-form__collection-detail.from-info,
.create-edit-collection-form__about-exam--form-item.from-info {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E9E9E9;
    box-sizing: border-box;
    border-radius: 4px;
}

.create-edit-collection-form__collection-detail--cover-image {
    margin-bottom: 20px;
}

.create-edit-collection-form__collection-detail--label-container {
    flex-direction: column;
}

.create-edit-collection-form .ant-form-item label {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: rgba(50, 50, 50, 0.8);
}

.create-edit-collection-form .ant-form-item-label > label.ant-form-item-required::before {
    margin: 0;
    content: '';
}

.create-edit-collection-form__sub-label {
    font-weight: normal;
    line-height: 16px;
    color: rgba(50, 50, 50, 0.32);
}

.create-edit-collection-form .ant-input {
    border-radius: 0;
    padding: 4px 0;
}

.create-edit-collection-form .ant-input,
.create-edit-collection-form .ant-input:hover,
.create-edit-collection-form .ant-input:focus,
.create-edit-collection-form .ant-picker,
.create-edit-collection-form .ant-picker:hover,
.create-edit-collection-form .ant-picker:focus {
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(50, 50, 50, 0.1);
    box-shadow: none;
    -webkit-box-shadow: none;
}

.create-edit-collection-form .ant-picker {
    width: 100%;
    padding: 4px 0;
}

.create-edit-collection-form .ant-input-affix-wrapper {
    padding: 4px 0;
    background: transparent;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(50, 50, 50, 0.1);
    box-shadow: none;
    -webkit-box-shadow: none;
}

.create-edit-collection-form .ant-input-affix-wrapper .ant-input,
.create-edit-collection-form .ant-input-affix-wrapper .ant-input:hover {
    border: none;
}

.create-edit-collection-form__features .sidebar-content-header,
.create-edit-collection-form__grid-container--item__tags-container .sidebar-content-header,
.create-edit-collection-form__grid-container--item__exam-type .sidebar-content-header,
.create-edit-collection-form__collection-detail--cover-image .sidebar-content-header {
    line-height: 20px;
    color: rgba(50, 50, 50, 0.8);
}

.create-edit-collection-form__features button {
    margin-top: 8px !important;
}

.create-edit-collection-form__features .input-cancel {
    fill: var(--danger-primary);
}

.create-edit-collection-form__grid-container {
    margin-top: 32px;
}

.create-edit-collection-form__grid-container--item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.create-edit-collection-form__grid-container--item-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.create-edit-collection-form__grid-container--item-3 .ant-select-selector,
.create-edit-collection-form__grid-container--item-3 .ant-select-selector:focus {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(50, 50, 50, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.create-edit-collection-form__grid-container--item .ant-select-selector,
.create-edit-collection-form__grid-container--item-3 .ant-select-selector {
    padding: 0 !important;
}

.create-edit-collection-form__grid-container__logo {
    position: relative;
    width: 150px;
    height: 150px;
    margin-top: 8px;
    border: 1px solid #C6C6C6;
    box-sizing: border-box;
    border-radius: 2px;
}

.create-edit-collection-form__grid-container__logo img {
    width: 100%;
    height: 100%;
}

svg.create-edit-collection-form__grid-container__logo-close-button {
    position: absolute;
    top: -10px;
    right: -10px;
    fill: #C6C6C6;
    width: 20px;
    height: 20px;
    z-index: 1;
}

.create-edit-collection-form__grid-container--item__tags-container--tags {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    margin-top: 10px;
}

.create-edit-collection-form__grid-container--item__exam-type .select-exam-type-button {
    margin-top: 10px !important;
}

.create-edit-collection-form__about-exam.from-info {
    margin-top: 1.5em;
}

.create-edit-collection-form__about-exam-title {
    font-style: normal;
    font-weight: 600;
    font-size: 18.75px;
    line-height: 23px;
    color: #4D4D4D;
}

.create-edit-collection-form__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.create-edit-collection-form__footer button {
    width: 150px;
    height: 42px;
}

.arc-main-container__go-back {
    margin-bottom: 20px;
}

.arc-main-container__go-back img {
    margin-right: 10px;
}

.arc-report-action a {
    display: flex;
    align-items: center;
}

.user-filter-options-container {
  margin: 20px 0;
}

.user-filter-item {
  width: 350px;
  margin-right: 20px;
  align-items: center;
}

.user-filter-item > .right-sidebar-menu {
  margin-right: 10px;
}

.user-filter-item .ant-select {
  flex: 1;
}

/* search dropdown overlay */
.dropdown-overlay {
    left: 0 !important;
    top: 40px !important;
}

.dropdown-overlay .ant-dropdown-menu {
  border-radius: 10px;
  padding: 8px 0;
}

.dropdown-overlay__dropdown-item {
  display: flex;
}

.dropdown-overlay__dropdown-item svg {
  margin-right: 12px;
}

.dropdown-overlay__dropdown-item--title {
    color: rgba(0, 0, 0, 0.7) !important;
    margin-bottom: 0.5rem;
}

.dropdown-overlay__dropdown-item--subtitle {
    color: rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 0;
    font-weight: 500;

}

/* user search group */
.search-item-group {
  display: flex !important;
}

.search-item-group__select-dropdown {
  width: 150px !important;
}

.search-item-group span.ant-select-selection-item {
    display: flex;
    align-items: center;
  }


.user-filter-options-container > button {
  width: 150px;
}

.user-filter-options-container > button > svg {
  fill: #ffffff;
}

.user-search-section {
    position: relative;
}

.user-search-section .ant-input-group-addon button,
.user-search-section .ant-input-group-addon button:hover,
.user-search-section .ant-input-group-addon button:focus {
  background: var(--main-primary);
  border: none;
}

.add-plan-form {
  display: inline-block;
}

.add-plan-form-item .ant-form-item-label {
  width: 100px;
  text-align: left;
}

.add-plan-form .question-sets-price-container .ant-row {
  flex: 0 0 48%;
}

.add-plan-form button {
  width: 250px;
  float: right;
  margin-top: 20px;
}

.add-plan-form button,
.add-plan-form button:hover,
.add-plan-form button:focus {
  background: var(--main-primary);
  border: none;
}

.user-select-action-container > .exam-info {
  color: rgba(0, 0, 0, 0.7);
}

.user-select-action-container .user-select-action-item {
  margin-bottom: 24px;
}

.user-select-action-container
  .user-select-action-item
  .user-select-action-item-label {
  width: 100px;
}

.user-select-action-container
  .user-select-action-item
  .user-select-action-selector {
  width: 200px;
}

.user-select-action-container > button {
  margin-top: 20px !important;
  margin-left: 0 !important;
  width: 80px;
}

.user-select-action-container .select-action-form-item {
  width: 350px;
}

.user-select-action-container .select-action-form-item .ant-form-item-label {
  width: 100px;
  text-align: left;
}

.user-filter-form {
  display: inline-block;
  width: 100%;
}

.user-filter-form .ant-form-item-label {
  width: 170px;
  text-align: left;
}

.user-filter-form > button {
  margin-top: 40px;
  float: right;
}

/* .payment-container .solution-package-main-wrapper {

}

.payment-container .solution-package-main-heading {
    text-align: center;
    margin: 30px 0;
}

.payment-container .solution-package-main-row {
    width: 600px;
    margin: 0 auto;
}

.payment-modal .solution-package-payment-container {
    position: relative;
    padding: 0;
}

.payment-carousel-container {
    display: none;
}

@media only screen and (max-width: 900px) {
    .payment-container .solution-package-main-row {
        width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    .payment-carousel-container {
        display: block;
        height: 65vh;
    }

    .payment-carousel-container > h4 {
        margin: 30px 0;
    }
} */

.payment-container {
  height: 100%;
  width: 80%;
  margin-inline: auto;
  /* display: flex;
  align-items: center;
  justify-content: center; */

  @media only screen and (max-width: 1200px) {
    width: 100%;
  }
}

.payment-container__title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #202020;
  margin-bottom: 30px;
  text-align: center;
}

.package-content {
  margin-top: 50px;
  display: flex;
  align-items: stretch;
  gap: 30px;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
  }
}

.exam-credit-desc {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 335px;

  @media only screen and (max-width: 1200px) {
    width: 330px;
  }

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.exam-credit-desc-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.exam-credit-desc__header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exam-credit-desc__header h4 {
  margin-bottom: 0;
  color: #3a4651;
  font-weight: 600;
}

.exam-credit-desc__description {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.exam-credit-desc__description p {
  font-size: 13px;
  line-height: 16px;
  color: #505050;
}

.exam-credit-desc__description p span {
  font-weight: 600;
}

.exam-credit-desc__footer {
  background: #edf5f8;
  border-radius: 4px;
  padding: 8px 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.exam-credit-desc__footer--label {
  font-size: 12px;
  line-height: 15px;
  color: #505050;
  margin-bottom: 0;
}

.package-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.package-content__footer {
  margin-top: 50px;
}

.package-content__footer p {
  font-size: 13px;
  line-height: 16px;
  color: #808080;
  text-align: center;
}

.package-content__footer p span {
  font-weight: 500;
  color: var(--new-background);
}

.all-mcq-collection {
  display: flex;
  flex-direction: column;
  gap: 40px;

  @media only screen and (max-width: 768px) {
    gap: 20px;
  }
}

.all-mcq-collection__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.all-mcq-collection__header-title-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.all-mcq-collection__header-content .ant-input-affix-wrapper {
  width: 320px;
  height: 40px;

  @media only screen and (max-width: 576px) {
    max-width: 100%;
    width: 100%;
  }
}

.all-mcq-collection__list {
  min-height: 65vh;
  background: #ffffff;
  border: none;
  border-radius: 2px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.all-mcq-collection__list-empty {
  grid-template-columns: repeat(1, 1fr) !important;
}

.all-mcq-collection__list.for-open-data {
  background: transparent;
  padding: 0;
}

.all-mcq-collection__list--loading {
  margin-top: 20px;
}

@media only screen and (max-width: 1200px) {
  .all-mcq-collection__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media only screen and (max-width: 1024px) {
  .all-mcq-collection__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 900px) {
  .all-mcq-collection__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  .all-mcq-collection__list {
    grid-template-columns: repeat(3, 1fr);
    padding: 10px;
  }
}

@media only screen and (max-width: 592px) {
  .all-mcq-collection__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 450px) {
  .all-mcq-collection__list {
    grid-template-columns: repeat(1, 1fr);
  }
}

:root {
  --light-black: rgba(0, 0, 0, 0.7);
  --white: #ffffff;
  --input-background: #fafafa;
}

.tag-selector-container {
  background: var(--white);
  padding: 20px;
}

/*header*/
.tag-selector-container__header {
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e4e4;
}

.tag-selector-container__header h3 {
  @media only screen and (max-width: 768px) {
    font-size: 16px;
  }
}

.tag-selector-container__header > img {
  margin-right: 10px;
}

.tag-selector-container__header > .exam-page-header-title {
  color: var(--light-black);
  line-height: 24px;
  text-align: left;
}

/*sub-header*/
.tag-selector-container__sub-header {
  color: var(--light-black);
  margin-left: 42px;
}

/*body*/
.tag-selector-container__body {
  margin-top: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.tag-body__sub-title {
  font-weight: 400;
  color: #808080;
}

.user-tag-list-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3125rem;
}

.user-selected-tag {
  background: white;
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  width: fit-content;
  min-width: 50px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 22px;
  color: #210454;
}

.user-tag-list-content__title {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  margin-bottom: 0;
  color: #303030;
}

.tag-selector-container__body .exam-types-wrapper {
  overflow: auto;
  height: fit-content;
}

.tag-selector-container__body .ant-input-group-wrapper .ant-input {
  border-color: #e4e4e4 !important;
  background-color: #ffffff;
  height: 40px;
}

.tag-selector-container__body
  .ant-input-group-wrapper
  .ant-input-group-addon
  .ant-btn {
  height: 40px;
  background: var(--new-background);
  border-color: var(--new-background);
}

.tag-selector-container__body
  .ant-input-group-wrapper
  .ant-input-group-addon
  .ant-btn
  svg {
  fill: white;
}

.tag-selector-container__body .ant-input-affix-wrapper {
  background: var(--input-background);
  border: 1px solid var(--light-black);
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  height: 40px;
}

.tag-selector-container__body svg {
  fill: var(--main-primary);
}

.tag-selector-container__body input {
  background: var(--input-background);
}

/*divider*/
.tag-selector-container__divider {
  border-top: 1px solid rgba(33, 4, 84, 0.2);
}

/*footer*/
.tag-selector-container__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

.tag-selector-container__footer button,
.tag-selector-container__footer button:hover,
.tag-selector-container__footer button:focus {
  background: var(--new-background);
  border: none;
  width: 150px;
}

@media only screen and (max-width: 768px) {
  /*header*/
  .tag-selector-container__header > .exam-page-header-title {
    font-size: 16px;
    line-height: 21px;
  }
}

#top-right{
    -webkit-animation: top-right 5s infinite ease;
    animation: top-right 5s infinite ease;

}
@keyframes top-right{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(-30px, 112.5px);
    }

    25% {
        transform: translate(-120px, 30px);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(-120px, 112.5px);
    }
    63.5% {
        transform: translate(-120px, 30px);
    }
    75% {
        transform: translate(-30px, 112.5px);
    }
    87.5% {
        transform: translate(-120px, 112.5px);
    }
    100% {
        transform: translate(0, 0)

    }
}

@-webkit-keyframes top-right{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(-30px, 112.5px);
    }

    25% {
        transform: translate(-120px, 30px);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(-120px, 112.5px);
    }
    63.5% {
        transform: translate(-120px, 30px);
    }
    75% {
        transform: translate(-30px, 112.5px);
    }
    87.5% {
        transform: translate(-120px, 112.5px);
    }
    100% {
        transform: translate(0, 0)

    }
}

#top-left{
    -webkit-animation: top-left 5s infinite ease;
    animation: top-left 5s infinite ease;

}
@keyframes top-left{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(105px, -30px);
    }

    25% {
        transform: translate(0, 90px);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(90px, 90px);
    }
    63.5% {
        transform: translate(0, 90px);
    }
    75% {
        transform: translate(105px, -30px);
    }
    87.5% {
        transform: translate(90px, 90px);
    }
    100% {
        transform: translate(0, 0)

    }
}

@-webkit-keyframes top-left{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(105px, -30px);
    }

    25% {
        transform: translate(0, 90px);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(90px, 90px);
    }
    63.5% {
        transform: translate(0, 90px);
    }
    75% {
        transform: translate(105px, -30px);
    }
    87.5% {
        transform: translate(90px, 90px);
    }
    100% {
        transform: translate(0, 0)

    }
}

#bottom-right{
    -webkit-animation: bottom-right 5s infinite ease;
    animation: bottom-right 5s infinite ease;

}
@keyframes bottom-right{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(-90px, 0);
    }

    25% {
        transform: translate(30px, -112.5px);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(-90px, -90px);
    }
    63.5% {
        transform: translate(30px, -112.5px);
    }
    75% {
        transform: translate(-90px, 0px);
    }
    87.5% {
        transform: translate(-90px, -90px);
    }
    100% {
        transform: translate(0, 0)

    }
}
@-webkit-keyframes bottom-right{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(-90px, 0);
    }

    25% {
        transform: translate(30px, -112.5px);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(-90px, -90px);
    }
    63.5% {
        transform: translate(30px, -112.5px);
    }
    75% {
        transform: translate(-90px, 0px);
    }
    87.5% {
        transform: translate(-90px, -90px);
    }
    100% {
        transform: translate(0, 0)

    }
}

#bottom-left{
    -webkit-animation: bottom-left 5s infinite ease;
    animation: bottom-left 5s infinite ease;

}
@keyframes bottom-left{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(0, -90px);
    }

    25% {
        transform: translate(90px, 0);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(120px, -112.5px);
    }
    63.5% {
        transform: translate(90px, 0);
    }
    75% {
        transform: translate(0px, -90px);
    }
    87.5% {
        transform: translate(120px, -112.5px);
    }
    100% {
        transform: translate(0, 0)

    }
}
@-webkit-keyframes bottom-left{
    0% {
        transform: translate(0, 0)
    }
    12.5%{
        transform: translate(0, -90px);
    }

    25% {
        transform: translate(90px, 0);
    }
    37.5% {
        transform: translate(0, 0)
    }
    50%{
        transform: translate(120px, -112.5px);
    }
    63.5% {
        transform: translate(90px, 0);
    }
    75% {
        transform: translate(0px, -90px);
    }
    87.5% {
        transform: translate(120px, -112.5px);
    }
    100% {
        transform: translate(0, 0)

    }
}
.as-main-container {
    background: var(--main-primary-transparent);
    min-width: 167px;
    position: relative;
    width: fit-content;
    border-radius: 4px;
    padding: 10px;
}

.as-main-container.from-earning {
    width: 100%;
}

.as-main-container .stat-arrow-icon  {
    position: absolute;
    top: 25px;
    left: 20px;
}

.as-main-col {
    padding: 20px;
}

.as-main-col.from-earning {
    width: 33.33%;
}

.as-main-container.from-error {
    background: rgba(239, 71, 111, 0.1);
}

.as-main-container.changeable {
    border: 1px solid var(--main-primary);
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
}

.as-main-container.stat-increase {
    background: rgba(79, 178,134, 0.1);
}

.as-main-container .admin-stat-value {
    margin: 10px 0 20px;
}

.as-main-container .admin-stat-value.stat-error {
    color: var(--danger-primary);
}

.as-main-container .admin-stat-value.stat-increase {
    color: var(--success-primary);
}

.as-main-container .tab-bar-normal {
    font-weight: 500;
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 992px) {
    .as-main-col.from-earning {
        width: 50%;
    }
}

@media only screen and (max-width: 400px) {
    .as-main-col.from-earning {
        width: 100%;
    }
}

/*admin view framework*/
/*user view framework*/

.framework-main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.framework-main-row {
  padding-top: 63px;
  display: flex;
  flex: 1;
}

.user-view .top-header {
  background-color: #fafafa;
  box-shadow: 0px 4px 16px 0 rgba(0, 0, 0, 0.05);
  height: 60px;
}

.les-main-container {
    background: rgba(79, 178, 134, 0.15);
    border-radius: 4px;
    padding: 5px 10px;
}

.les-icon {
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background: var(--success-primary);
    border-radius: 50%;
}

.les-main-container .error-redirect-link {
    color: var(--success-primary);
}

.les-main-container.les-expired {
    background: rgba(239, 71, 111, 0.15);
}

.les-icon.les-expired {
    background: var(--danger-primary);
}

.error-redirect-link.les-expired {
    color: var(--danger-primary);
}

@media only screen and (max-width: 768px) {
    .les-main-container {
        /*margin: 10px 0;*/
    }
}
.aetf-time-min-wrapper,
.aetf-total-question-wrapper {
  width: 49%;
  flex: 0 0 49%;
}

.aetf-negative-marking-wrapper,
.aetf-pass-marks-wrapper,
.aetf-full_marks-wrapper {
  width: 32%;
  flex: 0 0 32%;
}

.aetf-submit-button-wrapper {
  margin-top: 20px;
}

.aetf-submit-button-wrapper button {
  width: 200px;
  border: none;
}

.aetf-submit-button-wrapper button,
.aetf-submit-button-wrapper button:hover,
.aetf-submit-button-wrapper button:focus {
  background: var(--main-primary);
}

.sign-up-form-content {
  display: flex;
  flex-direction: column;
}

.signup-form-content__title {
  color: var(--new-background);
  margin-bottom: 0;
  text-align: center;
}

.signup-form-content__method-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 45px;
}

.signup-form-content__method-item {
  border: 1px solid var(--new-background);
  border-radius: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.signup-form-content__method-item span {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: var(--new-background);
}

.signup-divider-content {
  margin-block: 30px 35px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.signup-divider-content p {
  font-size: 14px;
  line-height: 17px;
  color: #808080;
  margin-bottom: 0;
}

.signup-divider {
  border-top: 1px solid #e4e4e4;
  flex: 1;
}

.sign-up-creator-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sign-up-creator-content__text {
  font-size: 14px;
  line-height: 17px;
  color: #303030;
  text-align: center;
}

.creator-sign-up-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;

  @media only screen and (max-width: 576px) {
    display: flex;
    flex-direction: column;
  }
}

.creator-sign-up-form .ant-form-item {
  margin-bottom: 0;
}

.creator-sign-up-form .ant-input {
  height: 44px;
}

.creator-sign-up-form .ant-input-affix-wrapper {
  height: 44px;
  display: flex;
  align-items: center;
}

.creator-sign-up-form .ant-input-affix-wrapper .ant-input {
  height: 100%;
}

.creator-sign-up-form .ant-select .ant-select-selector {
  border: 1px solid #d9d9d9 !important;
  height: 44px;
  display: flex;
  align-items: center;
}

.hall-signup-footer-btn {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hall-signup-footer-btn .ant-btn {
  height: 50px;
  border-radius: 50px !important;
  margin: 0 !important;
}

.ig-main-container {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ig-image-row {
    display: flex;
    align-items: center;
    max-height: 53vh;
    overflow: auto;
    flex: 1;
    flex-flow: row wrap;
    margin-bottom: 20px;
}

.ig-image-wrapper {
    flex-flow: row wrap;
}

.ig-image-col {
    position: relative;
    border: 1.5px solid #cccccc;
    padding: 5px;
    height: 10rem;
    width: 10rem;
    border-radius: 4px;
}

.ig-image-col:hover {
    border: 1.5px solid #aaaaaa;
    box-shadow: 0 0 6px #cccccc;
}

.ig-image-selected-check {
    position: absolute;
    bottom: 0.625em;
    right: 0.625em;
}

.ig-image-selected-check img {
    width: 24px;
    height: 24px;
}

.ig-image-col.image-is-selected {
    border: 1.5px solid var(--main-primary);
}

.ig-image-col .ant-avatar-square {
    width: 100%;
    height: 100%;
}

.ig-image-col .ant-avatar > img {
    object-fit: cover;
    filter: alpha(opacity=40);
}

.ig-image-upload {
    background-color: #fafafa;
    border: 1.5px dashed #d9d9d9;
    margin: 8px;
    height: 10rem;
    width: 10rem;
}

.ig-pagination-loading {
    flex: 1;
    margin-top: 10px;
}

.ig-pagination-loading svg{
    width: 40px !important;
    height: 40px !important;
}





.survey-modal {
    width: 60% !important;
}

.survey-content-container > .exam-page-header-title {
    text-align: left;
    color: rgba(0, 0, 0, 0.7);
}

.survey-question-container {
    min-height: 35px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    background: rgba(8, 164, 189, 0.1);
    border-radius: 4px;
    color: var(--main-primary);
}

.survey-option-container {
    padding: 10px 0;
}

.survey-option-container .ant-radio-group .ant-radio-wrapper {
    display: block;
    height: 30px;
}

.survey-option-container .ant-radio-group .ant-radio-wrapper.ant-radio-wrapper-checked,
.survey-option-container .ant-checkbox-group .ant-checkbox-group-item.ant-checkbox-wrapper-checked {
    color: var(--main-primary);
    font-weight: 500;
}

.survey-option-container .ant-radio-group .ant-radio-wrapper.ant-radio-wrapper-checked .ant-radio-checked .ant-radio-inner {
    border: none;
}

.survey-option-container .ant-radio-group .ant-radio-wrapper.ant-radio-wrapper-checked .ant-radio-checked .ant-radio-inner::after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--main-primary);
}

.survey-option-container .survey-yes-no-question-item {
    min-height: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: space-between;
    max-width: 60%;
}

.survey-yes-no-question-item .ant-radio-group {
    display: flex;
    align-items: center;
}

.survey-yes-no-question-item .ant-radio-group .ant-radio-wrapper {
    display: inline-block;
}

.survey-option-container .ant-checkbox:hover {
    border: initial;
}

.survey-option-container .ant-checkbox-group .ant-checkbox-group-item {
    display: block;
    height: 30px;
}

.survey-option-container .ant-checkbox-checked .ant-checkbox-inner {
    background-color: var(--main-primary);
    border-color: var(--main-primary);
}

.survey-option-container .ant-checkbox .ant-checkbox-inner {
    border-radius: 50%;
}

.survey-option-container .ant-checkbox:hover .ant-checkbox-inner {
    /*border: none;*/
}

.survey-option-container .ant-checkbox:hover::after,
.survey-option-container .ant-checkbox-wrapper:hover .ant-checkbox::after {
    visibility: hidden;
}

.survey-option-container .ant-checkbox-wrapper:hover .ant-checkbox-inner,
.survey-option-container .ant-checkbox:hover .ant-checkbox-inner {
    border-color: var(--main-primary);
}

.survey-option-container .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: #d9d9d9;
}

.survey-option-container .ant-checkbox-checked .ant-checkbox-inner::after {
    display: none;
}

.survey-submit-bottom-wrapper {
    justify-content: flex-end;
    margin-top: 40px;
}

@media only screen and (max-width: 992px) {
    .survey-option-container .survey-yes-no-question-item {
        max-width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .survey-modal {
        width: 90% !important;
    }

    .survey-option-container .survey-yes-no-question-item {
        max-width: 70%;
    }
}

@media only screen and (max-width: 576px) {
    .survey-modal {
        width: 95% !important;
    }

    .survey-option-container .survey-yes-no-question-item {
        max-width: 100%;
    }
}

.content-copyright-main-wrapper {
    position: absolute;
    left: 0;
    bottom: -85px;
    width: 100%;
}

.content-copyright-main-container {
    background: var(--white-background);
    border-radius: 10px;
    width: 100%;
}

.content-copyright-box {
    width: 100%;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: rgba(239, 71, 111, 0.15);
}

.content-copyright-box > p {
    color: var(--danger-primary);
    text-align: center;
    font-weight: 400;
    margin: 0 20px;
}

.content-copyright-box > svg {
    position: absolute;
    right: 10px;
}

@media only screen and (max-width: 576px) {
    .content-copyright-main-wrapper {
        bottom: -100px;
    }

    .content-copyright-box {
        padding: 5px 10px;
    }

    .content-copyright-box > img {
        display: none;
    }

    .content-copyright-box > p {
        font-size: 10px;
        margin-left: 0;
        text-align: left;
    }

    .content-copyright-box > svg {
        width: 0.5em;
        height: 0.5em;
        top: 10px;
    }
}

.auth-layout {
  height: 100dvh;
  display: flex;
  background-color: #ffffff;
}

.auth-desc {
  width: 45%;
  background: var(--new-background);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-inline: 80px 40px;
  padding-block: 10%;

  @media only screen and (max-width: 1200px) {
    /* display: none; */
    width: 40%;
  }

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.auth-desc__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-desc__header img {
  width: 170px;
  height: 11px;
}

.mcq-hall-sub-label {
  font-size: 26px;
  line-height: 31px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
}

.mcq-hall-desc {
  font-size: 16px;
  line-height: 28px;
  color: #e4e4e4;
  margin-bottom: 0;
}

.auth-form-content-wrapper {
  padding: 20px;
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 1200px) {
    /* display: none; */
    width: 60%;
  }

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.auth-form-content {
  width: 65%;
  margin-inline: auto;
  overflow-y: auto;
  scrollbar-width: none;

  @media only screen and (max-width: 1200px) {
    width: 80%;
  }

  @media only screen and (max-width: 576px) {
    width: 95%;
  }
}

.auth-form-content::-webkit-scrollbar {
  display: none;
}

.auth-form-content__header .logo-title {
  color: var(--new-background);
}

.public-layout-content {
  /* padding: 16px 50px 50px; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.public-header-wrapper {
  display: flex;
  flex-direction: column;
}

.public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 50px;

  @media only screen and (max-width: 768px) {
    padding: 15px 16px;
    background-color: #fafafa;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
  }
}

.public-header-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-header-logo-wrapper button {
  display: none;

  @media only screen and (max-width: 768px) {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
  }
}

.public-header__image-content {
  display: flex;
  align-items: center;
  gap: 5px;
}

.public-header__image-content img {
  width: 33px;
  height: 33px;

  @media only screen and (max-width: 768px) {
    width: 24px;
    height: 24px;
  }
}

.public-header__image-content p {
  margin-bottom: 0;
  font-size: 19px;
  line-height: 23px;
  font-weight: 700;
  color: var(--new-background);

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 17px;
  }
}

.public-header__nav-bar {
  display: flex;
  align-items: center;
  gap: 5px;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.public-header__nav-item {
  padding: 0 10px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #202020;
}

.public-header__nav-item.active {
  color: #30b3c8;
}

.public-header__nav-item-separator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #c4c4c4;
}

.public-header__action-btn-content {
  display: flex;
  align-items: center;
  gap: 5px;
}

.register-btn {
  border-color: var(--new-background) !important;
  color: var(--new-background) !important;
  width: 115px;
}

.public-header__action-btn-content button {
  border-radius: 50px !important;
  height: 50px;
  min-width: 90px;
  margin: 0;
}

.public-layout__hero-content {
  height: 140px;
  border-radius: 20px;
  background: var(--new-background);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 40px;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    height: fit-content;
  }
}

.public-layout__hero-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/publicHeroBg.png");
  background-repeat: repeat;
  background-position: center;
  background-size: contain;
}

.page-title-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.page-title-content img {
  width: 170px;
  height: 11px;
  object-fit: cover;

  @media only screen and (max-width: 768px) {
    width: 72px;
    height: 4px;
  }
}

.page-title-content__title {
  position: relative;
  width: fit-content;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: white;

  @media only screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 24px;
  }
}

.page-title-content__title p {
  margin-bottom: 0;
}

.page-title-content__title p::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.page-description {
  width: 45%;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: #e4e4e4;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    width: 100%;
    font-size: 12px;
    line-height: 18px;
  }
}

.public-layout-body {
  padding: 0 50px 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;

  @media only screen and (max-width: 768px) {
    gap: 20px;
    padding: 16px;
  }
}

/* footer */
/* Footer Main Container */
.footer {
  background: var(--new-background);
  border-radius: 50px;
  color: #ffffff;
  padding-inline: 90px;
  padding-block: 46px 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;

  @media only screen and (max-width: 1200px) {
    padding: 40px;
    border-radius: 40px;
  }

  @media only screen and (max-width: 768px) {
    padding: 16px;
    border-radius: 16px;
  }
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.3fr;
  gap: 40px;
  margin-bottom: 30px;
}

/* Footer Sections */
.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-left {
  grid-column: 1;
}

/* Logo and Text */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.footer-logo img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.logo-dots {
  display: flex;
  gap: 3px;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
}

.footer-logo-text {
  font-size: 19px;
  line-height: 23px;
  font-weight: 700;
  color: #ffffff !important;
}

.footer-description {
  font-size: 14px;
  line-height: 24px;
  color: #e4e4e4;
  margin-bottom: 20px;
  max-width: 300px;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
}

.social-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  color: #ffffff;
  text-decoration: none;
}

.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

/* Payment Partners */
.payment-partners {
  margin-top: 25px;
}

.partners-title {
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  margin-bottom: 12px;
}

.partners-logos {
  display: flex;
  gap: 12px;
}

.partner-logo {
  width: 60px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
}

.partner-logo span {
  color: #ffffff;
}

/* Footer Headings */
.footer-heading {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #ffffff;
}

/* Footer Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-link {
  font-size: 14px;
  line-height: 17px;
  color: #e4e4e4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #ffffff;
}

/* Contact Info */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
}

.contact-item {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #e4e4e4;
}

.contact-item svg {
  min-width: 18px;
  min-height: 18px;
  color: white;
}

.contact-us-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}

.contact-us-link:hover {
  color: #ffffff;
}

/* App Download Section */
.footer-right {
  grid-column: 4;
}

.footer-right .footer-heading {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.footer-app-link-content {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.footer-app-qr-content {
  width: 106px;
  height: 106px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 7px;
}

.footer-app-qr-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.available-on-content {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.available-on-content p {
  font-size: 13px;
  line-height: 16px;
  color: white;
  margin-bottom: 0;
}

.available-on-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.available-on-item {
  padding: 10px;
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.available-on-item p {
  font-size: 13px;
  line-height: 16px;
  color: #505050;
  margin-bottom: 0;
}

/* Rating */
.rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
}

.stars {
  font-size: 14px;
  color: #ffc107;
  letter-spacing: 2px;
}

.rating-value {
  font-size: 13px !important;
  line-height: 16px !important;
  color: white !important;
}

/* Feedback Text */
.feedback-text {
  margin-bottom: 15px;
  font-family: "Delicious Handrawn";
  font-size: 18px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.8);
}

.feedback-arrow {
  color: #4ade80;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* QR Code */
.qr-code-placeholder {
  margin-bottom: 15px;
}

.qr-border {
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.qr-border img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* App Buttons */
.app-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.available-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.buttons-row {
  display: flex;
  gap: 10px;
}

.app-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.app-button.ios {
  background-color: rgba(0, 0, 0, 0.3);
}

.app-button.ios:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.app-button.android {
  background-color: rgba(255, 255, 255, 0.15);
}

.app-button.android:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.app-button svg {
  width: 14px;
  height: 14px;
}

/* Footer Divider */
.footer-divider {
  max-width: 1400px;
  margin: 0 auto 20px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

/* Footer Bottom */
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-copyright {
  margin: 0;
}

.footer-copyright em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom-links {
  display: flex;
  gap: 30px;
}

.bottom-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bottom-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-left {
    grid-column: 1 / -1;
  }

  .footer-right {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .footer {
    padding: 40px 15px 20px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .footer-right {
    grid-column: 1;
  }

  .buttons-row {
    flex-direction: column;
    width: 100%;
  }

  .app-button {
    width: 100%;
  }

  .footer-divider {
    margin: 15px auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }

  .footer-bottom-links {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

.description-mobile-main-container {
    padding: 20px;
}

.description-mobile-exam-type-wrapper {
    margin-bottom: 5px;
}

.description-mobile-title p {
    margin-bottom: 10px;
}

.description-mobile-main-container .exam-types-wrapper {
    justify-content: flex-start;
}

.hall-time-wrapper {
    flex-flow: row wrap;
    align-content: space-between;
    height: 55px;
}

.share-detail-wrapper-col {
    margin-top: 10px;
}

.description-mobile-stats-wrapper {
    margin-top: 10px;
}

.exam-desc-price-section-wrapper {
    margin: 15px 0;
    border-radius: 4px;
    border: none;
    background: rgba(8, 164, 189, 0.1);
    height: 30px;
}

.exam-desc-price-section-wrapper span {
    color: var(--main-primary);
}

.desc-mobile .exam-details-text,
.desc-mobile .exam-details-numbers {
    line-height: 1.5;
    font-size: 12px;
}


.try-again-button-container {
    width: 100%;
}

.try-again-button-container .qde-button-width,
.try-again-button-container a{
    width: 49% !important;
}

.try-again-button-container.has-exam-id .qde-button-width,
.try-again-button-container.has-joined .qde-button-width {
    width: 100% !important;
}

.try-again-button-container.has-joined {
    display: flex;
}

.try-again-button-container.has-joined.joined-not-expired {
    display: none !important;
}

.individual-mcq-description-container {
  align-items: flex-start;
}

.individual-mcq-description-container__exam-detail {
  /* border: 1px solid #dddddd; */
  box-sizing: border-box;
  border-radius: 4px;
  /* padding: 18px; */
  width: 80%;
  gap: 20px;
}

.individual-mcq-description-container__exam-detail.my-collection {
  width: 100%;
  border: none;
  padding: 0;
}

.individual-mcq-description-container__exam-detail--header {
  margin-bottom: 12px;
}

.individual-mcq-description-container__exam-detail--header img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

.individual-mcq-description-container__exam-detail--header h2 {
  margin-bottom: 0;
  line-height: 32px;
}

.individual-mcq-description-container__show {
  line-height: 17px;
  color: #8262b7;
  font-weight: 500;
  position: relative;
  float: left;
}

.individual-mcq-description-container__show::after {
  content: "\2304";
  position: absolute;
  bottom: 2px;
  margin-left: 5px;
}

.individual-mcq-description-container__show:hover {
  text-decoration: underline;
}

.individual-mcq-description-container__show.hide-details::after {
  content: "\2303";
  top: 3px;
}

.individual-mcq-description-container__show.hide-details {
  margin-top: 18px;
}

.individual-mcq-description-container__exam-detail {
  display: flex;
  flex-direction: column;
}

.set-description-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.set-description-content h4 {
  margin-bottom: 0;
}

.individual-mcq-description-container__exam-detail .exam-details-container {
  margin-bottom: 10px;
  min-width: 330px;
}

.individual-mcq-description-container__exam-detail--desc-container {
  height: calc(30px * 3);
  overflow: hidden;
}

.individual-mcq-description-container__exam-detail-info {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.individual-mcq-description-container__exam-detail--desc-container.see-more-clicked {
  height: auto;
}

.individual-mcq-description-container__exam-detail--desc {
  margin-bottom: 0.2em;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: rgba(50, 50, 50, 0.68);
  /*text-align: justify;*/
  /*max-height: calc(24px * 3);*/
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*-webkit-line-clamp: 3;*/
}

.individual-mcq-description-container__exam-detail--desc__show-more-container {
  color: var(--new-background);
}

.individual-mcq-description-container__exam-detail--desc__show-more-container:hover {
  text-decoration: underline;
}

.individual-mcq-description-container__exam-detail--desc__show-more-container
  > p {
  font-weight: 500;
}

.individual-mcq-description-container__exam-detail--desc__show-more-container
  svg {
  margin-right: 10px;
}

.individual-mcq-description-container__exam-detail--tag-container {
  flex-flow: row wrap;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.individual-mcq-description-container__exam-detail--tag {
  padding: 4px 10px;
  background: #edf5f8;
  border-radius: 24px;
  font-size: 12px;
  line-height: 22px;
  color: #4d4d4d;
}

.set-share-content {
  border-block: 1px dashed #e4e4e4;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.set-share-content .social-media-share {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 24px;
  font-weight: 600;
  color: #000000;
}

.set-info-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-flow: row wrap;
}

.set-info-content__icon-desc {
  display: flex;
  align-items: center;
  gap: 2px;
}

.set-info-content__icon-desc .filter-text {
  color: #6f6c90;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 12px;
  }
}

.set-info-content__icon-desc .filter-text strong {
  font-weight: 500;
  color: #303030;
}

.individual-mcq-description-container__exam-detail--publisher {
  font-weight: 400;
  color: rgba(77, 77, 77, 0.72);
  margin-top: 8px;
}

.individual-mcq-description-container__exam-detail--publisher label {
  color: var(--new-background);
  font-weight: 600;
}

.individual-mcq-description-container__exam-detail--about-container {
  gap: 8px;
  margin-bottom: 1em;
}

.individual-mcq-description-container__exam-detail--about {
  background: rgba(8, 164, 189, 0.04);
  border-radius: 4px;
  padding: 12px;
  list-style-type: none;
  width: fit-content;
  margin-bottom: 0;
}

.individual-mcq-description-container__exam-detail--about li {
  color: rgba(90, 138, 146, 1);
  display: inline-block;
}

.individual-mcq-description-container__exam-detail--about li img {
  margin-right: 8px;
}

.individual-mcq-description-container__exam-detail--about li:nth-child(2) {
  margin: 0 12px;
}

.individual-mcq-description-container__exam-details-table .social-media-share {
  margin-bottom: 25px !important;
}

.individual-mcq-description-container__exam-details-table
  .social-media-share
  > span {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.8);
}

.individual-mcq-description-container__icon-desc {
  justify-content: flex-end;
  margin-top: 20px;
  margin-bottom: 0;
}

.individual-mcq-description-container__icon-desc .icon-data-wrapper {
  width: fit-content;
}

.individual-mcq-description-container__purchased-validity {
  background: #f7f7ff;
  border-radius: 4px;
  min-height: 100%;
  padding: 12px;
  flex: 1;
}

.individual-mcq-description-container__purchased-validity
  .sidebar-content-header {
  font-weight: 500;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 0.2em;
}

.individual-mcq-description-container__purchased-validity h1 {
  font-weight: 600;
  color: var(--new-background);
}

.individual-mcq-description-container__share-options > div {
  margin-bottom: 0 !important;
  margin-top: 10px;
}

.individual-mcq-description-container__share-options span {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: rgba(8, 164, 189, 0.84);
}

.individual-mcq-description-container--view-options {
  margin-top: 15px;
  gap: 40px;
}

.individual-mcq-description-container--view-options .sidebar-content-header {
  color: var(--new-background);
  cursor: pointer;
}

.individual-mcq-description-container--view-options
  .sidebar-content-header:hover {
  text-decoration: underline;
}

.individual-mcq-description-container--view-options
  .sidebar-content-header::after {
  content: ">";
  margin-left: 8px;
  width: 5px;
}

.individual-mcq-description-container__about-exam {
  margin-top: 36px;
  margin-bottom: 10px;
}

.individual-mcq-description-container__footer-action {
  flex-flow: row wrap;
}

.individual-mcq-description-container__about-exam h3 {
  color: rgba(77, 77, 77, 1);
}

.individual-mcq-description-container__about-exam--list {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.set-detail-content {
  background: #edf5f8;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  flex-wrap: wrap;
  gap: 10px;

  @media only screen and (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.set-detail-item {
  font-size: 12px;
  line-height: 15px;
  color: #505050;
  margin-bottom: 0;
}

.individual-mcq-description-container__exam-detail-container {
  gap: 20px;
}

@media only screen and (max-width: 1024px) {
  .individual-mcq-description-container__exam-detail {
    width: 70%;
    border: none;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }
}

@media only screen and (max-width: 768px) {
  .individual-mcq-description-container__exam-detail-container {
    flex-direction: column;
  }

  .individual-mcq-description-container__exam-detail {
    width: 100%;
    border: none;
    padding: 0;
  }

  .individual-mcq-description-container__exam-detail--about li {
    display: inline-block;
  }

  .individual-mcq-description-container__exam-detail--about li:nth-child(2) {
    margin: 0 12px;
  }

  .individual-mcq-description-container__exam-detail--about-container {
    flex-direction: column;
  }

  .individual-mcq-description-container__exam-detail--about {
    width: 100%;
  }

  .individual-mcq-description-container__icon-desc {
    margin-bottom: 20px;
    justify-content: flex-start;
  }
}

@media only screen and (max-width: 576px) {
  .individual-mcq-description-container__about-exam--list {
    grid-template-columns: auto auto;
  }
}

@media only screen and (max-width: 380px) {
  .individual-mcq-description-container__about-exam--list {
    grid-template-columns: auto;
  }

  .individual-mcq-description-container__exam-detail .exam-details-container {
    min-width: 290px;
  }
}

.individual-mcq-collection__header {
  /* margin: 10px 0; */
  padding-bottom: 7px;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__go-back {
  width: 34px;
  height: 34px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header__title-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* .header__title-content {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.header__title-content img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.header__title-content h3 {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #210454;
  margin-bottom: 0;
}

.individual-mcq-collection__go-back {
  padding-left: 20px;
}

.individual-mcq-collection__header--title {
  font-style: normal;
  font-weight: 600;
  font-size: 18.75px;
  line-height: 23px;
  color: #4d4d4d;
}

.individual-mcq-collection__header--action__item {
  width: 42px;
  height: 42px;
  background: #ffffff;
  box-shadow: 4px 4px 36px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

.individual-mcq-collection__header--action__item svg {
  fill: var(--new-background);
}

/*body*/
.individual-mcq-collection__body {
  background: #ffffff;
  /*margin-top: 20px;*/
  padding: 20px;
  border-radius: 10px;
}

.individual-mcq-collection__body--view-options {
  margin-top: 15px;
  gap: 40px;
}

.individual-mcq-collection__body--view-options .sidebar-content-header {
  color: var(--new-background);
  cursor: pointer;
}

.individual-mcq-collection__body--view-options .sidebar-content-header:hover {
  text-decoration: underline;
}

.individual-mcq-collection__body--view-options .sidebar-content-header::after {
  content: ">";
  margin-left: 8px;
  width: 5px;
}

.individual-mcq-collection__body--divider {
  border-top: 1px solid #dddddd;
  margin: 36px 0;
}

.individual-mcq-collection__body--free-sets {
  display: grid;
  gap: 20px;
}

.individual-mcq-collection__body--free-sets-title-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.individual-mcq-collection__body--free-sets-title-content h4 {
  color: #202020;
  font-weight: bold;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.individual-mcq-collection__body--free-sets-info {
  padding: 8px 5px;
  border-radius: 4px;
  background-color: #edf5f8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.individual-mcq-collection__body--free-sets-info p {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: #505050;
  margin-bottom: 0;
}

.individual-mcq-collection__body--free-sets__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.individual-mcq-collection__float-action {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .individual-mcq-collection__body--free-sets__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media only screen and (max-width: 992px) {
  .individual-mcq-collection__body--free-sets__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  .individual-mcq-collection__body {
    padding: 10px;
  }

  .individual-mcq-collection__go-back {
    padding-left: 0;
  }

  .individual-mcq-collection__float-action {
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.13);
  }

  .individual-mcq-collection__float-action button {
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.24);
    border-radius: 4px !important;
    height: 42px;
    width: 100%;
  }

  .individual-mcq-collection__float-action button,
  .individual-mcq-collection__float-action a {
    flex: 1;
  }

  .individual-mcq-collection__body--free-sets__list {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 576px) {
  .individual-mcq-collection__body--free-sets__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 500px) {
  .individual-mcq-collection__body--free-sets__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
  }
}

/* Sidebar Container */
.sidebar-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* Header Section */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 24px;
}

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-dots {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
  justify-content: flex-start;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1a0033;
  display: inline-block;
}

.dot-1 {
  background-color: #1a0033;
}

.dot-2 {
  background-color: #1a0033;
}

.dot-3 {
  background-color: #1a0033;
}

.dot-4 {
  background-color: #1a0033;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #1a0033;
  letter-spacing: -0.5px;
}

/* Close Button */
.sidebar-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #000;
  transition: opacity 0.3s ease;
}

.sidebar-close-btn:hover {
  opacity: 0.7;
}

.sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.sidebar-body__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-body__footer {
  display: flex;
  flex-direction: column;
  gap: 27px;
  padding: 0 20px;
}

.download-app-link-list-content {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.download-app-link-list-content p {
  font-size: 11px;
  line-height: 13px;
  color: #202020;
  margin-bottom: 0;
}

.download-app-link-list-content__list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.download-app-link-list-content__list-item {
  border: 1px solid #e4e4e4;
  padding: 7px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.download-app-link-list-content__list-item p {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 15px;
  color: #505050;
}

.footer-social-media-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation Menu */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.sidebar-menu-item {
  padding: 12px 20px;
  font-size: 13px;
  line-height: 16px;
  color: #333333;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  border-left: 4px solid transparent;
}

.sidebar-menu-item:hover {
  background-color: #f5f5f5;
}

.sidebar-menu-item-highlight {
  color: #17a2b8;
  font-weight: 600;
}

.sidebar-menu-item-highlight:hover {
  background-color: #f0f9fb;
}

/* Auth Section */
.sidebar-auth-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px;
}

.auth-btn {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.auth-btn-login {
  color: var(--new-background);
  background-color: #ffffff;
  border-color: var(--new-background);
}

.auth-btn-login:hover {
  background-color: #f5f0ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(26, 0, 51, 0.1);
}

.auth-btn-register {
  color: #ffffff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.auth-btn-register:hover {
  background-color: #138496;
  border-color: #138496;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(23, 162, 184, 0.2);
}

/* Download Section */
.sidebar-download-section {
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.download-title {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #666666;
  font-weight: 500;
  text-align: left;
}

.download-buttons {
  display: flex;
  gap: 12px;
}

.download-btn {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  transition: all 0.3s ease;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.download-btn:hover {
  border-color: #17a2b8;
  background-color: #f0f9fb;
  transform: translateY(-2px);
}

.download-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-text {
  font-size: 14px;
}

/* Social Section */
.sidebar-social-section {
  padding: 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: auto;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f5f5;
  text-decoration: none;
  color: #333333;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}

.social-icon:hover {
  background-color: #17a2b8;
  color: #ffffff;
  border-color: #17a2b8;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.2);
}

.social-icon svg {
  width: 20px;
  height: 20px;
  color: inherit;
}

/* Scrollbar Styling */
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}

/* Responsive Design */
@media (max-width: 480px) {
  .sidebar-header {
    padding: 16px;
  }

  .sidebar-menu-item {
    padding: 12px 16px;
    font-size: 14px;
  }

  .auth-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .sidebar-auth-section,
  .sidebar-download-section,
  .sidebar-social-section {
    padding: 16px;
  }

  .download-buttons {
    gap: 8px;
  }

  .sidebar-social-section {
    gap: 12px;
  }

  .social-icon {
    width: 36px;
    height: 36px;
  }

  .social-icon svg {
    width: 18px;
    height: 18px;
  }
}

.exam-tags-container {
    background: #FFFFFF;
    min-height: 300px;
    padding: 50px 10%;
    margin-bottom: 10px;
}

.exam-tags-container__heading {
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 35px;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.exam-tags-container__body {
    margin-top: 40px;
}

.exam-tags-container__body--main-row {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

@media only screen and (max-width: 768px) {
    .exam-tags-container {
        padding: 30px;
    }
}

.exam-tags {
    background: rgba(76, 76, 191, 0.12);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 10px 30px;
    width: fit-content;
    min-width: 100px;
    cursor: pointer;
}

.exam-tags > .right-sidebar-menu {
    margin-bottom: 0;
    font-weight: 500;
    text-align: center;
    color: var(--new-background);
}

.exam-tags:hover {
    background: var(--new-background);
}

.exam-tags:hover > .right-sidebar-menu {
    color: #FFFFFF;
}

.hall-landing-wrapper {
  padding-block: 10px;
  padding-inline: 90px;

  @media only screen and (max-width: 1200px) {
    padding-inline: 40px;
  }

  @media only screen and (max-width: 1024px) {
    padding-inline: 20px;
  }

  @media only screen and (max-width: 768px) {
    padding: 0;
  }
}

.hall-landing-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 26px;
}

.hall-landing-header__title-content {
  width: fit-content;
  position: relative;
}

.hall-landing-header__title-content p {
  font-family: "Delicious Handrawn", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 100%;
  color: #00cc66;
  margin-bottom: 0;
}

.hall-landing-header__title-content::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.hall-landing-header__sub-title-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hall-landing-header__sub-title-content p {
  font-size: 26px;
  line-height: 31px;
  font-weight: bold;
  color: #20294c;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 16px;
    line-height: 19px;
  }
}

.hall-landing-header__sub-title-content img {
  width: 170px;
  height: 11px;
  margin-inline: auto;

  @media only screen and (max-width: 768px) {
    width: 120px;
    height: 10px;
  }
}

.creator-description-wrapper {
  display: flex;
  flex-direction: column;
  gap: 124px;
  margin-block: 60px;

  @media only screen and (max-width: 1024px) {
    gap: 80px;
  }

  @media only screen and (max-width: 768px) {
    gap: 30px;
    margin-block: 40px;
  }
}

.creator-hall-step-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

.hall-step-connector {
  display: flex;
  align-items: center;
  margin-top: 29px;
  flex-shrink: 0;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.hall-landing-focus-content {
  height: 96px;
  background: var(--new-background);
  margin-inline: -140px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 1200px) {
    margin-inline: -90px;
  }

  @media only screen and (max-width: 768px) {
    margin-inline: -16px;
    height: auto;
    padding-block: 24px;
    padding-inline: 20px;
    text-align: center;
  }
}

.hall-landing-focus-content__label {
  width: fit-content;
  position: relative;
}

.hall-landing-focus-content__label p {
  font-family: "Delicious Handrawn", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 100%;
  color: white;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 22px;
    line-height: 130%;
  }
}

.hall-landing-focus-content__label::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.hall-landing__faq-content {
  padding-top: 60px;

  @media only screen and (max-width: 768px) {
    padding-top: 20px;
  }
}

.hall-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;

  @media only screen and (max-width: 768px) {
    gap: 12px;
  }
}

.index-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid var(--new-background);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 768px) {
    width: 40px;
    height: 40px;
  }
}

.index-content-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--new-background);
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-content-inner span {
  font-size: 40px;
  line-height: 1.5;
  font-family: "Delicious Handrawn", cursive;
  color: white;

  @media only screen and (max-width: 768px) {
    font-size: 24px;
  }
}

.hall-step-card__title {
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  color: var(--new-background);
  text-align: center;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 17px;
  }
}

.hall-step-card__sub-label {
  font-size: 14px;
  line-height: 24px;
  color: #505050;
  margin-bottom: 0;
  text-align: center;

  @media only screen and (max-width: 768px) {
    font-size: 12px;
    line-height: 20px;
  }
}

/* Hall CTA Section */
.hall-cta-wrapper {
  margin-inline: -90px;
  margin-top: 120px;
  margin-bottom: 60px;
  background: var(--new-background);
  border-radius: 20px;
  position: relative;

  @media only screen and (max-width: 1200px) {
    margin-inline: -40px;
    margin-top: 100px;
  }

  @media only screen and (max-width: 1024px) {
    margin-inline: -20px;
    margin-top: 80px;
  }

  @media only screen and (max-width: 768px) {
    margin-inline: 0;
    margin-top: 40px;
    margin-bottom: 60px;
    overflow: hidden;
  }
}

.hall-cta-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-image: url("/publicHeroBg.png");
  background-repeat: repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.hall-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 50px 80px 50px;
  gap: 40px;

  @media only screen and (max-width: 1200px) {
    padding: 40px 60px 40px;
  }

  @media only screen and (max-width: 1024px) {
    padding: 36px 40px 36px;
    gap: 24px;
  }

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 20px 0;
    gap: 24px;
    overflow: hidden;
  }
}

.hall-cta-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  padding-bottom: 10px;

  @media only screen and (max-width: 1024px) {
    max-width: 380px;
  }

  @media only screen and (max-width: 768px) {
    max-width: 100%;
    gap: 16px;
    padding-bottom: 0;
  }
}

.hall-cta-title {
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;

  @media only screen and (max-width: 1024px) {
    font-size: 28px;
    line-height: 36px;
  }

  @media only screen and (max-width: 768px) {
    font-size: 22px;
    line-height: 28px;
  }
}

.hall-cta-underline {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 130px;
    height: 9px;
  }
}

.hall-cta-desc {
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 24px;
  }
}

.hall-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

.hall-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: opacity 0.2s;

  @media only screen and (max-width: 768px) {
    padding: 14px 20px;
    font-size: 15px;
    width: 100%;
  }

  &:hover {
    opacity: 0.85;
  }
}

.hall-cta-btn--primary {
  background: #30b3c8;
  color: white;
}

.hall-cta-btn--outline {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.hall-cta-images {
  position: relative;
  flex-shrink: 0;
  width: 480px;
  height: 340px;
  margin-top: -120px;

  @media only screen and (max-width: 1200px) {
    width: 400px;
    height: 290px;
    margin-top: -100px;
  }

  @media only screen and (max-width: 1024px) {
    width: 320px;
    height: 240px;
    margin-top: -80px;
  }

  @media only screen and (max-width: 768px) {
    height: 200px;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-inline: auto;
  }
}

.hall-cta-image--dashboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  @media only screen and (max-width: 768px) {
    width: 200px;
    left: 0;
    height: 140px;
    object-fit: contain;
  }
}

.hall-cta-image--laptop {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 62%;
  height: auto;
  object-fit: contain;

  @media only screen and (max-width: 768px) {
    width: 185px;
    height: 135px;
    bottom: 0;
    left: 100px;
    object-fit: cover;
  }
}

/* Hall Advantage Section */
.hall-advantage-wrapper {
  display: flex;

  /* @media only screen and (max-width: 1024px) {
    gap: 40px;
    padding-block: 40px;
  } */

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    gap: 30px;
    padding-block: 20px;
  }
}

.hall-advantage-header {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 280px;
  max-width: 300px;
  background-color: #f3fafc;
  padding: 30px;

  @media only screen and (max-width: 1024px) {
    min-width: 220px;
    max-width: 240px;
  }

  @media only screen and (max-width: 768px) {
    min-width: unset;
    max-width: unset;
    align-items: center;
    text-align: center;
  }
}

.hall-advantage-header__tag {
  width: fit-content;
  position: relative;
}

.hall-advantage-header__tag p {
  font-family: "Delicious Handrawn", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 100%;
  color: #00cc66;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 24px;
  }
}

.hall-advantage-header__tag::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.hall-advantage-header__title {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.hall-advantage-header__title p {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;

  @media only screen and (max-width: 1024px) {
    font-size: 22px;
    line-height: 28px;
  }

  @media only screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 24px;
  }
}

.hall-advantage-header__title img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 120px;
    height: 10px;
    margin-inline: auto;
  }
}

.hall-advantage-grid {
  flex: 1;
  border: 1px dashed #e4e4e4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;

  @media only screen and (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.hall-advantage-grid-circle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid var(--new-background);
  background: white;
  z-index: 1;

  @media only screen and (max-width: 480px) {
    display: none;
  }
}

.hall-advantage-grid-circle.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hall-advantage-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 32px;

  @media only screen and (max-width: 1024px) {
    padding: 28px 20px;
    gap: 12px;
  }

  @media only screen and (max-width: 768px) {
    padding: 20px 16px;
    gap: 10px;
  }
}

.hall-advantage-card-1 {
  border-bottom: 1px dashed #e4e4e4;
  border-right: 1px dashed #e4e4e4;
}

.hall-advantage-card-2 {
  border-bottom: 1px dashed #e4e4e4;
}

.hall-advantage-card-3 {
  border-right: 1px dashed #e4e4e4;

  @media only screen and (max-width: 480px) {
    border-right: none;
    border-bottom: 1px dashed #e4e4e4;
  }
}

.hall-advantage-card__image {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  @media only screen and (max-width: 1024px) {
    height: 120px;
  }

  @media only screen and (max-width: 768px) {
    height: 100px;
  }

  @media only screen and (max-width: 576px) {
    justify-content: center;
  }
}

.hall-advantage-card__image img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.hall-advantage-card__title {
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 17px;
  }

  @media only screen and (max-width: 576px) {
    text-align: center;
  }
}

.hall-advantage-card__desc {
  font-size: 14px;
  line-height: 24px;
  color: #505050;
  margin-bottom: 0;

  @media only screen and (max-width: 768px) {
    font-size: 11px;
    line-height: 20px;
  }

  @media only screen and (max-width: 576px) {
    text-align: center;
  }
}

.dictionary-container {
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 24px;
  background-color: #ffffff;
  max-height: 45vh;
  overflow-y: auto;
}

.dictionary-section {
  margin-bottom: 1rem;
}

.dictionary-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;

  @media only screen and (max-width: 768px) {
    gap: 0;
  }
}

.dictionary-letter {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  width: 32px;
  flex-shrink: 0;

  @media only screen and (max-width: 768px) {
    font-size: 14px;
    width: 20px;
  }
}

.dictionary-tags {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}

.tag-button {
  padding: 6px 16px;
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 24px;
  color: #4d4d4d;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;

  @media only screen and (max-width: 768px) {
    font-size: 11px;
  }
}

.tag-button:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.tag-button:active {
  transform: scale(0.98);
}

.dictionary-divider {
  border-bottom: 1px dotted #e4e4e4;
  margin-top: 1rem;
}

.bonus-message-container {
    display: inline-block;
}

.bonus-message-container h3 {
    color: var(--main-primary);
}

.bonus-message-container h4 {

}

.bonus-message-container button {
    margin-top: 20px !important;
    width: 100px;
    float: right;
}

.preview-mcq__form .ant-form-item .ant-form-item-label > label,
.preview-mcq__form--exam-type-label{
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.preview-mcq__form .ant-form-item .ant-form-item-label > label.ant-form-item-required::before {
    margin-right: 0;
    content: '';
}

.preview-mcq__form--mcq-description,
.preview-mcq__form--mcq-description__about-exam--top,
.preview-mcq__form--mcq-description__about-exam--bottom {
    gap: 10px;
}

.preview-mcq__form--mcq-description__text-area,
.preview-mcq__form--mcq-description__about-exam,
.preview-mcq__form--mcq-description__about-exam--bottom .ant-form-item {
    flex: 1;
}

.preview-mcq__form .ant-divider {
    border-top: 3px solid rgba(0, 0, 0, 0.1);
}

.preview-mcq__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.preview-mcq__footer button {
    width: 150px;
}

.collection-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 200px;
  /* height: 100%; */
  background: #ffffff;
  /* border: 1px solid #f2f2f2; */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 12px;
  /* transition: all 0.3s cubic-bezier(0.55, 0.06, 0.4, 1.34); */
}

.collection-item:hover {
  /* transform: translateY(-4px); */
  background-color: #edf5f8;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

.collection-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.collection-item__header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.collection-item__header img {
  /*border: 2px solid var(--new-background);*/
  border-radius: 50%;
  width: 50px;
  height: 50px;
  /* margin-right: 8px; */
  /* margin-bottom: 8px; */
}

.collection-item__header--status {
  color: #00b850;
  height: 15px;
}

.collection-item__header--status svg {
  width: 0.58em;
  height: 0.58em;
  margin-right: 0.2em;
}

.collection-item__header--status .error-redirect-link {
  font-weight: 500;
  line-height: 15px;
  color: #6ab089;
}

/* .collection-item__description {
  background: rgba(8, 164, 189, 0.1);
  justify-content: center;
  align-items: flex-start;
  border-radius: 2px;
  width: 100%;
  height: 100px;
  padding: 8px;
  max-height: 100px;
  margin-bottom: 10px;
} */

.collection-item .sidebar-subtitle {
  color: #323232;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.4;
  height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-item__price-container {
  width: 100%;
  border-block: 1px dashed #e4e4e4;
  padding-block: 10px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #202020;
}

.collection-item__price-container-price {
  font-weight: 700;
  color: var(--main-primary);
}

.collection-item__price-container-original-price {
  text-decoration: line-through;
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: #808080;
}

.collection-item__description {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collection-item__description-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #808080;
}

.collection-item .step-title {
  color: var(--new-background);
  text-align: center;
  width: 100%;
}

.collection-item__footer {
  width: 100%;
}

.collection-item__footer-unlock {
  border: 1px solid #e4e4e4;
  padding: 8px 5px;
  border-radius: 4px;
  background-color: #edf5f8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.collection-item__footer-unlock svg {
  min-width: 24px;
  width: 24px;
  height: 24px;
}

.collection-item__footer-unlock-text {
  font-size: 11px;
  line-height: 13px;
  font-weight: 500;
  color: #505050;
}

@media only screen and (max-width: 768px) {
  .collection-item:hover {
    transform: translateY(0px);
  }
}

.result-body-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  margin: -20px;
  height: calc(100dvh - 60px);
  overflow-y: hidden;

  @media only screen and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.result-detail-content {
  padding: 18px 20px;
  overflow-y: auto;
}

.result-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.result-detail-header__back-btn {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: white;
  border: none;
  box-shadow: 4px 4px 36px 0 rgba(0, 0, 0, 0.06);
  align-content: center;
  cursor: pointer;
}

.result-detail-header__title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: var(--new-background);
  margin-bottom: 0;
}

.result-question-answer-content {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.question-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-inline: 14%;
  overflow: hidden;

  @media only screen and (max-width: 1024px) {
    padding-inline: 10%;
  }
}

.question-view-header {
  color: #3090a1;
  padding-block: 20px 12px;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.question-view-container-inner {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.question-view-container-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-view-container-content h4 {
  color: #3090a1;
  margin-bottom: 0px;
  font-weight: 700;
}

.question-view-btn-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  padding-block: 20px 40px;
}

.question-view-btn-content .custom-btn {
  flex: 1;
  height: 50px;
}

.question-view-btn-content .custom-btn.primary-btn:not(.primary-btn-filled) {
  border-color: #d9d9d9 !important;
  color: #303030 !important;
}

.notice-section-container {
  flex-shrink: 0;
  border-top: 1px solid #f0f0f0;
  padding: 20px;
}

.question-package-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-package-list__header {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.package-desc-text {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #202020;
  margin-bottom: 0;
}

.landing-media {
    background: linear-gradient(0deg, var(--new-background) 50%, var(--white-background) 50%);
    min-height: 95vh;
    padding: 120px;
}

.landing-media .exam-page-header-title {
    font-weight: 400;
    color: rgba(50, 50, 50, 0.8);
    margin-bottom: 1.8em;
}

.landing-media__card-container {
    /*display: grid;
    grid-template-columns: repeat(3, 1fr);*/
    display: flex;
    flex-flow: row wrap;
    gap: 30px;
}

@media only screen and (max-width: 1024px) {
    .landing-media {
        padding: 80px 5%;
    }

    .landing-media .landing-title {
        font-size: 28px;
        line-height: 32px;
    }

    .landing-media .exam-page-header-title {
        font-size: 16px;
        line-height: 19px;
    }
}

@media only screen and (max-width: 768px) {
    .landing-media {
        padding: 64px 16px;
        background: linear-gradient(0deg, var(--new-background) 30%, var(--white-background) 70%);
    }

    .landing-media .landing-title {
        font-size: 24px;
        line-height: 28px;
    }


}
.mcq-media-card {
    width: 377px;
}

.mcq-media-card img {
    width: 100%;
    height: 267px;
    margin-bottom: 20px;
}

.mcq-media-card h3 {
    color: var(--white-background);
}

.mcq-media-card__read-article-container {
    gap: 17px;
}

.mcq-media-card .mcq-media-card__desc {
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 1.17em;
}

.mcq-media-card .mcq-media-card__read-article {
    font-weight: 700;
}

.mcq-media-card .mcq-media-card__read-article:hover {
    text-decoration: underline;
}

.mcq-media-card__read-article-container svg {
    fill: var(--white-background);
    transform: rotate(315deg);
}
.landing-testimonials {
    background: linear-gradient(0deg, var(--white-background) 50%, var(--new-background) 50%);
    height: 50vh;
    padding: 0 120px 120px 120px;
    gap: 5%;
}

.landing-testimonials__text {
    width: 30%;
}

.landing-testimonials__carousel {
    width: 70%;
}

.landing-testimonials__text .landing-title {
    color: var(--white-background);
}

.landing-testimonials__text .landing-title::after {
    border-bottom: 3px solid var(--white-background);
}

.landing-testimonials__text svg {
    fill: var(--white-background);
    width: 37px;
    height: 42px;
}

.landing-testimonials__carousel .slick-slide {
    width: 500px !important;
    box-shadow: rgb(17 17 17 / 6%) 0 8px 16px;
}

@media only screen and (max-width: 1024px) {
    .landing-testimonials {
        padding: 0 5% 80px;
    }

    .landing-testimonials .landing-title {
        font-size: 28px;
        line-height: 32px;
    }
}

@media only screen and (max-width: 768px) {
    .landing-testimonials {
        padding: 0 16px 40px;
        flex-direction: column;
        height: fit-content;
    }

    .landing-testimonials .landing-title {
        font-size: 24px;
        line-height: 28px;
    }

    .landing-testimonials__text {
        width: 100%;
    }

    .landing-testimonials__text svg {
        display: none;
    }

    .landing-testimonials__carousel {
        width: 100%;
        margin-top: 20px;
    }

    .landing-testimonials__carousel .slick-slide {
        width: calc(100vw - 32px) !important;
    }

    /*.landing-testimonials__carousel .slick-track {
        transform: translate3d(calc(-100vw + 100px), 0px, 0px) !important;
    }*/
}

@media only screen and (max-width: 576px) {

}
.mcq-testimonial {
    background: var(--white-background);
    padding: 50px;
    box-shadow: 0 8px 16px rgba(17, 17, 17, 0.06);
    border-radius: 0;
    width: 90%;
}

.mcq-testimonial__header {
    gap: 30px;
    margin-bottom: 20px;
}

.mcq-testimonial__header img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.mcq-testimonial__header--user-info {
    margin: auto 0;
}

.mcq-testimonial__header--user-info h2 {
    font-weight: 400;
    color: #323232;
    margin-bottom: 0.1em;
}

.mcq-testimonial__header--user-info .tab-bar-normal {
    font-weight: 700;
    line-height: 22px;
    color: rgba(50, 50, 50, 0.6);
}

.mcq-testimonial__description .tab-bar-normal {
    font-weight: 400;
    line-height: 22px;
    color: rgba(50, 50, 50, 0.8);
}

@media only screen and (max-width: 768px) {
    .mcq-testimonial {
        width: 100%;
        padding: 20px;
    }
}
.landing-news-and-updates__container {
    padding: 120px;
    background: var(--white-background);
}

.landing-news-and-updates {
    width: 70%;
    margin: 0 auto;
}

.landing-news-and-updates .f-56-lh-66 {
    margin-bottom: 0.2em;
}

.landing-news-and-updates .tab-bar-normal {
    text-align: center;
    line-height: 20px;
    color: #323232;
}

.landing-news-and-updates__email {
    margin-top: 16px;
    gap: 15px;
}

.landing-news-and-updates__email .ant-input {
    height: 60px;
    background: #F5F5F5;
    border: none;
}

.landing-news-and-updates__email .ant-input:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.landing-news-and-updates__arrow {
    width: 60px;
    height: 60px;
    background: #F5F5F5;
}

@media only screen and (max-width: 1024px) {
    .landing-news-and-updates__container {
        padding: 80px 5%;
    }
}

@media only screen and (max-width: 768px) {
    .landing-news-and-updates__container {
        padding: 80px 16px;
    }

    .landing-news-and-updates {
        width: 100%;
    }

    .landing-news-and-updates .f-32-lh-18 {
        font-size: 28px;
        line-height: 32px;
    }

    .landing-news-and-updates .f-56-lh-66 {
        font-size: 40px;
        line-height: 66px;
    }
}
.landing-mobile-app {
    background: url("/LandingPage/mobileApp.png") no-repeat center center fixed;
    position: relative;
    background-size: cover;
    min-height: 80vh;
    padding: 120px 0 120px 120px;
    gap: 20px;
}

/*.landing-mobile-app__text,
.landing-mobile-app__image {
    flex: 1;
}*/
.landing-mobile-app__text {
    width: 45%;
}

.landing-mobile-app__text h2 {
    font-weight: 400;
    line-height: 20px;
    color: var(--white-background);
}

.landing-mobile-app__text h4 {
    font-weight: 400;
    color: var(--white-background);
}

.landing-mobile-app__text--mobile-app {
    font-style: normal;
    font-weight: 600;
    font-size: 68px;
    line-height: 81px;
    color: #FFFFFF;
}

.landing-mobile-app__text__app-link img {
    width: 200px;
    height: 60px;
}

.landing-mobile-app__text__qr {
    margin-top: 20px;
    width: 154px;
    height: 157px;
}

.landing-mobile-app__image {
    position: absolute;
    top: -10%;
    transform: translateY(-130px);
    left: 35%;
    height: 135vh;
}

.landing-mobile-app__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 1024px) {
    .landing-mobile-app {
        padding: 80px 0 80px 5%;
    }
}

@media only screen and (max-width: 768px) {
    .landing-mobile-app {
        padding: 64px 0 64px 16px;
        justify-content: center;
        align-items: center;
    }

    .landing-mobile-app__image {
        display: none;
    }

    .landing-mobile-app__text {
        width: 100%;
    }

    .landing-mobile-app__text h2 {
        font-size: 28px;
        line-height: 32px;
        text-align: center;
        color: var(--white-background);
    }

    .landing-mobile-app__text--mobile-app {
        font-size: 40px;
        line-height: 47px;
        text-align: center;
        margin-bottom: 14px;
    }

    .landing-mobile-app__text h4 {
        text-align: center;
        padding: 0 10px;
    }

    .landing-mobile-app__text__app-link {
        margin-top: 20px;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 450px) {
    .landing-mobile-app__text__app-link {
        gap: 20px;
    }

    .landing-mobile-app__text__app-link a,
    .landing-mobile-app__text__app-link .app-store {
        width: 47%;
    }

    .landing-mobile-app__text__app-link .play-store {
        width: 100%;
    }
}
.landing-faqs {
  padding: 120px;
}

.landing-faqs .landing-title {
  margin-bottom: 0.2em;
}

.landing-faqs .creator-landing-title {
  line-height: 57px;
  color: rgba(50, 50, 50, 0.4);
}

.landing-faqs__question-list {
  margin-bottom: 20px;
}

.landing-faqs__see-more-arrow {
  transform: rotate(0deg);
  transition: all 0.3s;
  cursor: pointer;
}

.arrow-reversed {
  transform: rotate(180deg);
}

.landing-faqs__question-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20%;
  padding: 8px;
  position: relative;
}

.landing-faqs__question-list__item h2 {
  font-weight: 700;
  line-height: 32px;
  color: #323232;
}

.landing-faqs__question-list__item .tab-bar-normal {
  font-weight: 400;
  line-height: 24px;
  color: rgba(50, 50, 50, 0.8);
}

.landing-faqs__fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 25.36%,
    #ffffff 100%
  );
  transition: all 0.3s;
}

.landing-faqs__fade.fade-removed {
  background: transparent;
}

@media only screen and (max-width: 1024px) {
  .landing-faqs {
    padding: 80px 5%;
  }

  .landing-faqs .landing-title {
    font-size: 28px;
    height: 32px;
  }

  .landing-faqs .creator-landing-title {
    font-size: 44px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 768px) {
  .landing-faqs {
    padding: 64px 16px;
  }

  .landing-faqs .landing-title {
    font-size: 24px;
    height: 28px;
  }

  .landing-faqs .creator-landing-title {
    font-size: 40px;
    line-height: 47px;
  }

  .landing-faqs__question-list {
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
  }
}

.landing-faq-wrapper {
  display: flex;
  gap: 80px;
  align-items: flex-end;
  padding-block: 0 95px;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    align-items: center;
    padding-block: 20px;
  }
}

.landing-faq-question-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.landing-faq-question-content__header {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.landing-faq-question-content__header img {
  width: 170px;
  height: 11px;

  @media only screen and (max-width: 768px) {
    width: 120px;
    height: 10px;
  }
}

.faq-section-title {
  position: relative;
  width: fit-content;
}

.faq-section-title::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -10px;
  width: 22px;
  height: 22px;
  background-image: url("/titleAfter.svg");
}

.faq-section-title p {
  font-family: "Delicious Handrawn", cursive;
  font-size: 36px;
  line-height: 43px;
  color: #00cc66;
  margin-bottom: 0;
}

.faq-section-label {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--new-background);
  margin-bottom: 0;
}

.landing-faq-content-question-list {
}

.landing-faq-additional-question-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 460px;

  @media only screen and (max-width: 1024px) {
    width: 300px;
  }

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.landing-faq-additional-question-section__image-content {
  width: 295px;
  height: 275px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 200px;
  }
}

.landing-faq-additional-question-section__image-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-faq-additional-question__query-content {
  background: #f3fafc;
  border-radius: 15px;
  padding: 54px 65px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  @media only screen and (max-width: 1200px) {
    padding: 30px;
  }

  @media only screen and (max-width: 768px) {
    padding: 16px;
    gap: 16px;
  }
}

.landing-faq-additional-question__query-title {
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: var(--new-background);
  text-align: center;
  margin-bottom: 0;
}

.landing-faq-additional-question__query-description {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: #505050;
  text-align: center;
  margin-bottom: 0;
}

.landing-faq-additional-question__query-content button {
  height: 50px;
  border-radius: 50px !important;
}