@charset "UTF-8";
@import url(../styles/animate.min.css);
@import url(../styles/color.min.css);
@import url(../styles/material-font.min.css);
:root {
  --r-blue: #00c5f1;
  --c-blue: #153DD1;
  --c-yellow: #FFD200;
  --light-yellow: #FFFAE5;
  --primary: #007BFF;
  --primary-light: #E5F2FF;
  --secondary: #FFD200;
  --secondary-light: #FFFAE5;
  --warning: #FFD200;
  --danger: #EF5350;
  --success: #388E3C;
  --info: #00B8D8;
  --grey: #DADADA; }

@keyframes turnPage {
  from {
    transform: rotateY(-50deg); }
  to {
    transform: rotateY(-130deg); } }

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0; }
  100% {
    background-position: 520px 0; } }

@keyframes scaleUp {
  0% {
    transform: scale(0.8);
    opacity: 0.8; }
  100% {
    transform: scale(1.1);
    opacity: 1; } }

@keyframes animated-bar {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(350%); }
  100% {
    transform: translateX(5%); } }

/**** css loading ring *****/
.lds-ring {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px; }

.lds-ring.small {
  width: 18px;
  height: 18px; }

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 21px;
  height: 21px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent; }

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s; }

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s; }

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s; }

@keyframes lds-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html, body, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0; }

html {
  font-size: 100%;
  font-display: swap;
  scroll-behavior: smooth; }
  @media only screen and (max-width: 1025px) {
    html {
      font-size: 90%; } }
  @media only screen and (max-width: 769px) {
    html {
      font-size: 80%; } }

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 5px; }

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }

::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.3); }

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #bdbdbd;
  border-radius: 10px; }

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px; }

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5); }

html.overflow-toggle,
body.overflow-toggle {
  overflow-x: auto; }

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 5px 10px;
  background: inherit;
  font-size: inherit;
  text-decoration: none;
  color: inherit;
  text-align: center;
  cursor: pointer; }

button:focus {
  outline: none; }

::selection {
  background-color: #0C1927;
  color: #FFFFFF; }

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

a:hover {
  text-decoration: none;
  color: inherit; }

ul {
  margin: 0; }

textarea {
  resize: none;
  position: relative; }

img {
  max-width: 100%; }

[data-toggle="dropdown"] {
  cursor: pointer; }

hr.small-solid-hr {
  width: 25px;
  height: 1px;
  border: 0;
  border-top: 2px solid #333333;
  display: inline-block;
  margin: 0;
  margin-bottom: 5px; }

.upload-error .custom-file {
  border-radius: 4px;
  border: 2px solid #EF5350; }

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

.text-uppercase {
  text-transform: uppercase; }

.text-grey {
  color: rgba(51, 51, 51, 0.6) !important; }

.hover-grey {
  cursor: pointer;
  border-radius: 4px; }

.hover-grey:hover {
  background: #E5F2FF; }

.text-success {
  color: #388E3C !important; }

.text-danger {
  color: #EF5350 !important; }

.color-primary {
  color: #FFD200 !important; }

.bg-admin-light {
  background: #E7E8E9;
  border-radius: 4px; }

.bg-admin-base {
  border-radius: 4px;
  background-color: #0C1927; }

.bg-dark-grey {
  background: #A4ADB7; }

.bg-light-success {
  background: #D6FFD7;
  border: 1px solid #388E3C; }

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

.pointer {
  cursor: pointer; }

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

.overflow-y {
  overflow-x: hidden;
  overflow-y: auto;
  height: 70vh; }

.col-sm-11 {
  padding: 0; }

@media (min-width: 1200px) {
  .container {
    max-width: 1440px; } }

.vl {
  border-left: 1px solid #E0E0E0;
  height: 23px;
  margin: 0 10px; }

.flex-50 > * {
  flex: 1; }

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

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

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

.full-height {
  min-height: 100vh; }

.w-80 {
  width: 80%; }
  @media screen and (max-width: 1200) {
    .w-80 {
      width: 100%; } }

.mb-6 {
  margin-bottom: 5rem; }

.my-6 {
  margin: 4rem 0; }

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

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

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

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

.mobile-only {
  display: none; }
  @media only screen and (max-width: 1368px) {
    .mobile-only {
      display: block; } }
  @media only screen and (max-width: 1025px) {
    .mobile-only {
      display: block; } }
  @media only screen and (max-width: 769px) {
    .mobile-only {
      display: block; } }
  @media only screen and (max-width: 576px) {
    .mobile-only {
      display: block; } }

.auth-layout--content {
  min-height: calc(100vh - 60px);
  margin-left: 72px;
  padding: 20px 50px;
  position: relative; }
  @media only screen and (max-width: 769px) {
    .auth-layout--content {
      padding: 24px;
      margin-top: 65px;
      min-height: calc(100vh - 65px);
      margin-left: 0; } }

.rotate-45 {
  transform: rotate(45deg); }

.icn-circle {
  position: relative;
  text-align: center;
  padding: 4px;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  background: white; }
  .icn-circle.small {
    height: 18px;
    width: 18px; }
  .icn-circle.blog {
    height: 48px;
    width: 48px; }
  .icn-circle.big {
    height: 38px;
    width: 38px; }
  .icn-circle.large {
    height: 140px;
    width: 140px;
    padding: 0; }
  .icn-circle.admin {
    background: #0C1927; }
  .icn-circle.primary {
    background: #FFD200; }
  .icn-circle.secondary {
    background: #007BFF; }
  .icn-circle.primary_tint {
    background: #FFFAE5;
    color: #FFD200; }
  .icn-circle.secondary_tint {
    background: #E5F2FF;
    color: #007BFF; }

.break-word {
  word-break: break-word; }

.custom-breadcrumb {
  display: flex;
  flex-direction: row; }

.custom-breadcrumb .custom-breadcrumb-item {
  text-transform: uppercase;
  color: #b5b5b5;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 7.5px; }

.user-avatar {
  width: 48px;
  border-radius: 50%;
  overflow: hidden; }

.user-avatar-lg {
  width: 84px;
  height: auto; }

.active-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #A4ADB7;
  border-radius: 50%;
  vertical-align: middle;
  padding: 2px;
  border: 1px solid #A4ADB7;
  background-clip: content-box; }
  .active-icon.online {
    background: #FFD200;
    padding: 2px;
    border: 1px solid #FFD200;
    background-clip: content-box;
    animation: scaleUp 1s alternate infinite linear; }

.dropdown-item {
  cursor: pointer;
  padding: .5rem 1.5rem; }

.dropdown-dark .dropdown-menu {
  background: #0C1927; }

.dropdown-dark .dropdown-item:focus,
.dropdown-dark .dropdown-item:hover {
  background-color: #787878; }

.light-yellow-block {
  display: inline-block;
  background: #E7E8E9;
  border: 1px solid #0C1927;
  padding: 0.7rem 1rem;
  border-radius: 4px; }

.light-grey-block {
  background: #E7E8E9;
  color: #E7E8E9;
  border-radius: 4px;
  padding: 1rem;
  position: relative; }

.grey-block {
  width: 100%;
  margin: 0 -1rem;
  background: #A4ADB7; }

.light-blue-block {
  background: #0C1927;
  color: #E7E8E9;
  padding: 1.5rem;
  border-radius: 4px; }

.light-blue-block ul {
  margin-left: 1rem; }

.form-control.error {
  border: 2px solid #EF5350; }

.number-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #E7E8E9;
  color: #333333;
  font-weight: bold;
  display: grid;
  place-items: center;
  flex-shrink: 0; }
  .number-icon.active {
    background: #0C1927;
    color: #fff; }

.box-shadow {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); }

.card {
  border-radius: 6px; }

.chart-container {
  cursor: pointer; }

.empty-chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6); }

.bg-cream-block {
  padding: 1.125rem;
  border-radius: 8px;
  background-color: #f2f2f2; }

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

/*** TOastify Info css Override ****/
.Toastify__toast.Toastify__toast--info {
  background: #0C1927;
  color: #E7E8E9;
  font-family: 'Muli';
  font-size: 14px; }

/*** CKEditor Override ***/
.editor-wrapper.error .cke_chrome {
  border: 2px solid #EF5350 !important; }

.cke_reset {
  border-radius: 4px !important; }

.cke_chrome {
  border: 1px solid #A4ADB7 !important;
  padding: 1px !important;
  border-radius: 4px !important; }
  .cke_chrome.cke_focus {
    border: 1px solid #0C1927 !important; }

/*** Date Picker Ovveride ****/
.react-datepicker-wrapper {
  display: block !important; }

.react-datepicker__input-container {
  width: 100%;
  display: block;
  border: 1px solid #A4ADB7;
  padding: 9px 12px;
  border-radius: 4px; }
  .react-datepicker__input-container:focus, .react-datepicker__input-container:focus-within {
    border: 1px solid #0C1927; }
  .react-datepicker__input-container > input {
    width: 100%;
    border: 0;
    outline: 0; }

.date-picker-error .react-datepicker__input-container {
  border: 2px solid #EF5350; }

/*************** FOR QUESTION DETAIL MODAL PREV LAYOUT CSS *************/
.fixed {
  position: fixed; }

.padding-11 {
  padding: 1rem 1rem !important; }

.deep-purple.lighten-2 {
  background-color: #9575cd; }

.font-1-5x {
  font-size: 15px !important; }

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

.float-right {
  float: right; }

.grey {
  background-color: #9e9e9e !important; }

.card-shadow {
  box-shadow: 0px 4px 15px -4px rgba(0, 0, 0, 0.25) !important; }

.font-1-4x {
  font-size: 14px !important;
  line-height: 160%; }

.font-1-2x {
  font-size: 12px !important; }

.font-x {
  font-size: 10px !important; }

.brand-primary-text {
  color: #716ACA !important; }

.ui-active-text {
  color: #0072ad; }

.ui-warning-text {
  color: #c68200; }

.font-2x {
  font-size: 20px !important; }

.thin-border,
.thin-border-bottom {
  border: 1px solid #e2e2e2 !important; }

.thin-border-dashed {
  border: 1px dashed #e2e2e2 !important; }

.thin-border-dashed-2x {
  border: 2px dashed #e2e2e2 !important; }

.small-border {
  border: 1px solid #e7e7f0; }

.small-border-dashed {
  border: 1px dashed #efefef; }

.bg-btn-dark {
  background: #282936; }

.bottom-2x {
  bottom: 20px !important; }

.right-x {
  right: 1rem !important; }

.right-3x {
  right: 3rem !important; }

.padding-0-5x {
  padding: 0.5rem !important; }

.ans-options label {
  font-size: 14px !important; }

.option-image {
  width: 70% !important; }

.front-bg {
  background-color: #FFD200; }

body {
  font-family: "Muli", sans-serif;
  font-weight: 400;
  line-height: 1.6rem;
  color: #333333;
  background-color: #fff; }

.txt-8--mini, .txt-12--small, .txt-14--caption, .txt-16--body, .txt-18--body_subtitle, .txt-20--body_title, .txt-24--subheader, .txt-32--title, .txt-36--headline, .txt-42--display, .txt-54--jumbo, .txt-64--mega {
  font-family: "Muli", sans-serif;
  font-style: normal;
  font-weight: normal; }

.lh-24 {
  line-height: 24px !important; }

.txt-8--mini {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 0.4px; }
  .txt-8--mini.bold {
    font-weight: 700; }
  .txt-8--mini.color-secondary {
    color: #007BFF; }

.txt-12--small {
  font-size: 0.75rem;
  line-height: 130%;
  letter-spacing: 0.4px;
  color: #333333; }
  .txt-12--small.bold {
    font-weight: 700; }
  .txt-12--small.fw-900 {
    font-weight: 900; }
  .txt-12--small.color-grey {
    color: #A4ADB7; }
  .txt-12--small.color-primary {
    color: #FFD200; }
  .txt-12--small.color-secondary {
    color: #007BFF; }
  .txt-12--small.lh-20 {
    line-height: 20px; }

.txt-14--caption {
  font-size: 0.875rem;
  line-height: 160%;
  color: #ADADAD; }
  .txt-14--caption.bold {
    font-weight: 700; }
  .txt-14--caption.color-light {
    color: #E7E8E9; }
  .txt-14--caption.color-grey {
    color: #A4ADB7; }
  .txt-14--caption.color-black {
    color: #333333; }

.txt-16--body {
  font-size: 1rem;
  line-height: 140%;
  font-weight: 400;
  color: #333333; }
  .txt-16--body.bold {
    font-weight: 700; }
  .txt-16--body.color-grey {
    color: #A4ADB7; }
  .txt-16--body.color-base {
    color: #0C1927; }
  .txt-16--body.color-black {
    color: #333333; }
  .txt-16--body.lh-20 {
    line-height: 20px; }

.txt-18--body_subtitle {
  font-size: 1.125rem;
  line-height: 130%;
  font-weight: 400;
  color: #6F6F6F; }
  .txt-18--body_subtitle.bold {
    font-weight: 700; }
  .txt-18--body_subtitle.color-black {
    color: #333333; }
  .txt-18--body_subtitle.color-secondary {
    color: #007BFF; }

.txt-20--body_title {
  font-size: 1.25rem;
  line-height: 130%;
  font-weight: 400; }
  .txt-20--body_title.bold {
    font-weight: 700; }
  .txt-20--body_title.color-black {
    color: #333333; }
  .txt-20--body_title.color-grey {
    color: #A4ADB7; }

.txt-24--subheader {
  font-size: 1.5rem;
  line-height: 130%; }
  .txt-24--subheader.bold {
    font-weight: 700; }
  .txt-24--subheader.color-black {
    color: #333333; }

.txt-32--title {
  font-size: 2rem;
  line-height: 130%;
  font-weight: 700; }
  @media only screen and (max-width: 576px) {
    .txt-32--title {
      font-size: 1.5rem; } }

.txt-36--headline {
  font-size: 2.25rem;
  line-height: 130%;
  font-weight: 700; }

.txt-42--display {
  font-size: 2.625rem;
  line-height: 130%;
  font-weight: 700; }
  .txt-42--display.bold {
    font-weight: 800; }

.txt-54--jumbo {
  font-size: 3.375rem;
  line-height: 130%;
  font-weight: 700; }
  .txt-54--jumbo.bold {
    font-weight: 800; }

.txt-64--mega {
  font-size: 4rem;
  line-height: 130%;
  font-weight: 700; }
  .txt-64--mega.bold {
    font-weight: 800; }

button.btn-solid-badge {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .2rem;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 10px;
  line-height: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase; }
  button.btn-solid-badge.--base {
    background-color: #0C1927;
    color: #fff; }
  button.btn-solid-badge.--danger {
    background-color: #FBD9D9;
    color: #333333; }

button.btn-solid-small {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background: #FFD200;
  padding: 9px 16px;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  font-family: inherit;
  border: none;
  outline: none; }
  button.btn-solid-small.--admin {
    background: #F7F7F7;
    color: #0C1927; }
  button.btn-solid-small.--base {
    background: #0C1927;
    color: #FFFFFF; }
  button.btn-solid-small.--primary {
    background: #FFD200;
    color: #333333; }
  button.btn-solid-small.--secondary {
    background: #007BFF;
    color: #FFF; }
  button.btn-solid-small:disabled {
    opacity: .65;
    cursor: not-allowed; }

button.btn-solid-normal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background: #E7E8E9;
  padding: 16px 32px;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  font-family: inherit;
  border: none;
  box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.04), -7px -7px 5px rgba(255, 255, 255, 0.8);
  transition: all .2s ease; }
  button.btn-solid-normal:hover {
    opacity: 0.9; }
  button.btn-solid-normal.--primary {
    background: #FFD200;
    color: #333333; }
  button.btn-solid-normal.--admin {
    color: #0C1927; }
  button.btn-solid-normal.--base {
    background: #0C1927;
    color: #FFFFFF; }
  button.btn-solid-normal.--success {
    background: #388E3C;
    color: #FFF; }
  button.btn-solid-normal.--secondary {
    background: #007BFF;
    color: #FFF; }
  button.btn-solid-normal:disabled {
    opacity: .65;
    cursor: not-allowed; }

button.btn-solid-large {
  width: auto;
  height: 54px;
  line-height: 100%;
  position: relative;
  background: #FFD200;
  padding: 0 2rem;
  border-radius: .2rem;
  font-weight: 700;
  font-size: 1rem; }
  button.btn-solid-large:not(.w-100):first-child {
    padding: 0 5.2rem 0 2rem; }
  button.btn-solid-large:first-child {
    padding: 0 3.2rem 0 2rem; }
  button.btn-solid-large.--primary {
    background: #FFD200;
    color: #333333; }
  button.btn-solid-large.--admin {
    background: #E7E8E9;
    color: #0C1927; }
  button.btn-solid-large.--secondary {
    background: #007BFF;
    color: #FFFFFF; }
  button.btn-solid-large:disabled {
    color: #6F6F6F;
    background-color: #BDBDBD;
    opacity: .65;
    cursor: not-allowed; }

button.btn-link-normal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background: transparent;
  color: #A4ADB7;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  font-family: inherit;
  transition: all .2s ease; }
  button.btn-link-normal:hover {
    color: #333; }
  button.btn-link-normal.--primary {
    color: #333; }
  button.btn-link-normal.--primary div {
    color: #FFD200; }
  button.btn-link-normal.--secondary {
    color: #007BFF; }

.icon-btn--layer {
  right: 0;
  position: absolute;
  padding: 0 16px;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  height: 54px;
  width: 54px;
  font-size: 1.5rem;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  border-top-right-radius: .2rem;
  border-bottom-right-radius: .2rem; }
  .icon-btn--layer.left {
    left: 0;
    position: absolute;
    padding: 0 16px;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
    height: 54px;
    width: 54px;
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem; }
  .icon-btn--layer.no-border {
    border: none; }
  .icon-btn--layer.primary-border {
    border: 1px solid #FFD200; }
  .icon-btn--layer.secondary-border {
    border: 1px solid #007BFF; }

button.btn-outline-normal {
  display: inline-block;
  height: 44px;
  position: relative;
  border-radius: 2px;
  background: #FFF;
  border: 1px solid #BDBDBD;
  padding: 0 4.2rem 0 1.8rem;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  font-family: inherit;
  outline: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
  button.btn-outline-normal.left {
    padding: 0 1.8rem 0 4.2rem; }
  button.btn-outline-normal.--admin {
    padding: 0 1.8rem;
    height: 54px;
    border-radius: 4px;
    border: 1px solid #0C1927; }
    button.btn-outline-normal.--admin.success {
      border: 1px solid #388E3C; }
  button.btn-outline-normal.dashed {
    border: 1px dashed #A4ADB7;
    mask-border-width: 3px; }
  button.btn-outline-normal.--primary {
    border: 1px solid #FFD200; }
    button.btn-outline-normal.--primary:hover {
      background: #FFFAE5; }
  button.btn-outline-normal.--secondary {
    border: 1px solid #007BFF; }
    button.btn-outline-normal.--secondary:hover {
      background: #E5F2FF; }
  button.btn-outline-normal:disabled {
    opacity: .65;
    cursor: not-allowed; }

.icon-outline-btn-layer {
  right: 0;
  position: absolute;
  top: 0;
  padding: 0 10px;
  margin: 0 0 0 15px;
  background: #BDBDBD;
  height: 42px;
  width: 42px;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.54);
  display: flex;
  align-items: center; }
  .icon-outline-btn-layer.left {
    left: 0;
    position: absolute;
    top: 0;
    padding: 0 10px;
    background: #BDBDBD;
    margin: 0 15px 0 0;
    height: 42px;
    width: 42px;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.54);
    display: flex;
    align-items: center; }
  .icon-outline-btn-layer.primary-layer {
    background: #FFD200; }
  .icon-outline-btn-layer.secondary-layer {
    background: #007BFF; }

button.filter-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 13px 12px;
  margin-inline-start: 1rem;
  border-radius: 4px;
  background-color: #F7F7F7; }

/**************** Bootstrap Overrides *******************/
.btn.btn-outline-admin {
  border: 1px solid #E7E8E9;
  color: #333333; }

.btn-group input[type="radio"] {
  display: none; }

.btn-group-lg .btn, .btn-group-lg .btn-lg, .btn-group-lg > .btn, .btn-group-lg > .btn-lg {
  border: 1px solid #E7E8E9;
  color: #333333;
  border-radius: 0;
  font-size: 1.2rem;
  line-height: 130%;
  font-weight: 700;
  padding: .8rem 4rem;
  outline: initial;
  box-shadow: none; }
  @media only screen and (max-width: 769px) {
    .btn-group-lg .btn, .btn-group-lg .btn-lg, .btn-group-lg > .btn, .btn-group-lg > .btn-lg {
      padding: .6rem 2rem; } }
  .btn-group-lg .btn:first-child, .btn-group-lg .btn-lg:first-child, .btn-group-lg > .btn:first-child, .btn-group-lg > .btn-lg:first-child {
    border-right: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .btn-group-lg .btn:last-child, .btn-group-lg .btn-lg:last-child, .btn-group-lg > .btn:last-child, .btn-group-lg > .btn-lg:last-child {
    border-left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }

.btn-group > .btn, .btn-sm {
  border: 1px solid #E7E8E9;
  color: #333333;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 130%;
  font-weight: 700;
  padding: 0.65rem 1.112rem;
  outline: initial;
  box-shadow: none; }

.dropdown > .btn:hover,
.btn-group > .btn:hover,
.btn-group-lg > .btn:hover {
  z-index: 0;
  color: #fff;
  background: #0C1927;
  cursor: pointer;
  color: #FFFFFF; }

.dropdown > .btn.active, .dropdown > .btn:active, .dropdown > .btn:focus,
.btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus,
.btn-group-lg > .btn.active, .btn-group-lg > .btn:active, .btn-group-lg > .btn:focus {
  z-index: 0;
  background: #0C1927;
  color: #fff; }

.btn-link.btn-sm {
  border: none;
  font-size: 0.8rem; }

button.btn-link:disabled {
  background-color: transparent !important; }

.btn-outline-warning:hover,
.btn-outline-warning:active {
  background: #FFFAE5;
  font-weight: 700; }

.btn-solid-large.invite-btn {
  width: 100%;
  max-width: 350px;
  margin-top: -15px; }

button:focus {
  outline: none; }

.tail-datetime-calendar .calendar-date table tbody tr .non-study-day {
  color: rgba(0, 0, 0, 0.2);
  pointer-events: none; }

.tail-datetime-calendar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125); }

.tail-datetime-calendar:after {
  clear: both;
  content: "";
  display: block;
  font-size: 0;
  visibility: hidden; }

.tail-datetime-calendar.calendar-static {
  margin-left: auto;
  margin-right: auto; }

.tail-datetime-calendar .calendar-navi {
  width: 100%;
  margin: 0;
  padding: 0;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  color: #E7E8E9;
  background-color: #0C1927;
  border-radius: 3px 3px 0 0; }

.tail-datetime-calendar .calendar-navi span {
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: table-cell;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
  background-repeat: no-repeat;
  background-position: center center; }

.tail-datetime-calendar .calendar-navi span:first-child,
.tail-datetime-calendar .calendar-navi span:last-child {
  width: 35px;
  padding: 0 0 5px 0;
  font-size: 22px; }

.tail-datetime-calendar .calendar-navi span:hover {
  background-color: rgba(0, 0, 0, 0.15); }

.tail-datetime-calendar .calendar-navi span.button-check {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC  9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP  SJNMTIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg=="); }

.tail-datetime-calendar .calendar-navi span.button-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC  9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP  SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y  NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg=="); }

.tail-datetime-calendar .calendar-date {
  margin: 0;
  padding: 0;
  display: block; }

.tail-datetime-calendar .calendar-date table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse; }

.tail-datetime-calendar .calendar-date table thead tr > *,
.tail-datetime-calendar .calendar-date table tbody tr > * {
  color: #333;
  width: 35px;
  height: 60px;
  padding: 0;
  font-size: 12px;
  text-align: center;
  font-weight: normal;
  line-height: 35px;
  border: 0;
  background-color: #E7E8E9; }

.tail-datetime-calendar .calendar-date table tbody tr > * {
  color: #0C1927;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  background-color: #ffffff; }

.tail-datetime-calendar .calendar-date table tbody tr > * > span {
  color: inherit;
  z-index: 10;
  position: relative; }

/* Select a Day */
.tail-datetime-calendar .calendar-date table tbody tr > *::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid transparent;
  transform: translate(-50%, -50%); }

.tail-datetime-calendar .calendar-date table tbody tr > *.today:after {
  border: 1px solid #0C1927;
  background: #E7E8E9; }

.tail-datetime-calendar .calendar-date table tbody tr > *:hover:after {
  background: #E7E8E9;
  border: 1px solid #0C1927; }

.tail-datetime-calendar .calendar-date table tbody tr > *.empty:hover:after,
.tail-datetime-calendar .calendar-date table tbody tr > *.disable:hover:after {
  content: "";
  display: none; }

.tail-datetime-calendar .calendar-date table tbody tr > *.current span {
  color: #fff; }

.tail-datetime-calendar .calendar-date table tbody tr > *.current:after {
  border-color: #3296c8;
  background-color: #3296c8; }

/* Select A Month */
.tail-datetime-calendar .calendar-date table.calendar-month tbody tr > * {
  width: 81.66666666666667px;
  padding: 5px;
  line-height: 25px; }

.tail-datetime-calendar .calendar-date table.calendar-month tbody tr > * span {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 3px; }

.tail-datetime-calendar .calendar-date table.calendar-month tbody tr > *:hover span {
  border-color: #d0d0d0;
  box-shadow: 0 1px 0 0 #efefef; }

.tail-datetime-calendar .calendar-time {
  width: 100%;
  margin: 0;
  padding: 0;
  display: table;
  text-align: center;
  background-color: #ffffff;
  border-radius: 0 0 3px 3px; }

.tail-datetime-calendar .calendar-date + .calendar-time {
  border-top: 1px solid #d0d0d0;
  background-color: #f8f8f8; }

.tail-datetime-calendar .calendar-time .calendar-field {
  width: 33.3333333333%;
  padding: 10px 0;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: top; }

.tail-datetime-calendar .calendar-time .calendar-field:first-child {
  text-align: right; }

.tail-datetime-calendar .calendar-time .calendar-field:first-child:after {
  top: 12px;
  right: -10px;
  content: ":";
  position: absolute; }

.tail-datetime-calendar .calendar-time .calendar-field:last-child {
  text-align: left; }

.tail-datetime-calendar .calendar-time .calendar-field:last-child:after {
  top: 12px;
  left: -10px;
  content: ":";
  position: absolute; }

.tail-datetime-calendar .calendar-time .calendar-field input[type="number"] {
  width: 100%;
  max-width: 50px;
  margin: 0;
  padding: 3px 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #d0d0d0;
  background-color: #ffffff;
  border-radius: 3px; }

.tail-datetime-calendar .calendar-time .calendar-field input[type="number"]:hover {
  border-color: #a0a0a0; }

.tail-datetime-calendar .calendar-time .calendar-field input[type="number"]:focus {
  border-color: #A4ADB7; }

.tail-datetime-calendar .calendar-time .calendar-field label {
  color: #778899;
  margin: 5px 0 0 0;
  padding: 0;
  display: block;
  font-size: 12px;
  line-height: 12px; }

/* @end tail.DateTime */
.icon-badge {
  display: inline-block;
  border-radius: 2px;
  overflow: hidden;
  min-width: 72px;
  flex-shrink: 0;
  cursor: pointer; }

.icon-badge svg {
  width: 18px;
  height: 18px;
  color: #fff; }

.badge-text {
  font-size: 12px;
  padding: 3px 5px;
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase; }

.icon-badge.basic-i svg,
.icon-badge.basic-ii svg {
  background: #e42c64; }

.icon-badge.average-i svg,
.icon-badge.average-ii svg {
  background: #f2ac33; }

.icon-badge.rise-i svg,
.icon-badge.rise-ii svg {
  background: #7f00ff; }

.icon-badge.topper-i svg,
.icon-badge.topper-ii svg {
  background: #007bff; }

.icon-badge.legend-i svg,
.icon-badge.legend-ii svg {
  background: #388e3c; }

.icon-badge.basic-ii {
  background: rgba(228, 44, 100, 0.08);
  color: #e42c64; }

.icon-badge.basic-i {
  background: rgba(228, 44, 100, 0.18);
  color: #e42c64; }

.icon-badge.average-ii {
  background: rgba(242, 172, 51, 0.08);
  color: #f2ac33; }

.icon-badge.average-i {
  background: rgba(242, 172, 51, 0.18);
  color: #f2ac33; }

.icon-badge.rise-ii {
  background: rgba(127, 0, 255, 0.08);
  color: #7f00ff; }

.icon-badge.rise-i {
  background: rgba(127, 0, 255, 0.18);
  color: #7f00ff; }

.icon-badge.topper-ii {
  background: rgba(0, 123, 255, 0.08);
  color: #007bff; }

.icon-badge.topper-i {
  background: rgba(0, 123, 255, 0.18);
  color: #007bff; }

.icon-badge.legend-ii {
  background: rgba(56, 142, 60, 0.08);
  color: #388e3c; }

.icon-badge.legend-i {
  background: rgba(56, 142, 60, 0.18);
  color: #388e3c; }

.unmask {
  position: absolute;
  top: 0;
  padding: 16px 10px;
  right: 0;
  cursor: pointer;
  color: #ADADAD; }
  .unmask.active {
    color: #333333; }

input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  opacity: 0; }

.search-icon {
  position: absolute;
  top: 0;
  padding: 9px 10px;
  right: 0;
  color: #ADADAD; }

.c-code {
  position: absolute;
  top: 0;
  padding: 16.5px 35px;
  left: 0;
  color: #333333; }
  @media only screen and (max-width: 576px) {
    .c-code {
      padding: 1.5rem 1rem; } }

label {
  font-size: 14px; }

/************************ Custom Radio & Checkbox *******************/
/* The Main container for checkbox */
.styled-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default checkbox  & Radio*/
  /* Style the checkmark/indicator */
  /* On mouse-over, add a cream background color  and font bold */
  /* Show the checkmark when checked */ }
  .styled-checkbox input[type=checkbox] {
    display: none; }
  .styled-checkbox .checkmark::after {
    left: 8px;
    top: 3px;
    width: 6px;
    height: 14px;
    border: solid #FFFAE5;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .styled-checkbox:hover input:not(:disabled) ~ span {
    font-weight: 600; }
  .styled-checkbox:hover input ~ .checkmark {
    background-color: #FFFAE5; }
  .styled-checkbox input:checked ~ .checkmark::after {
    display: block; }
  .styled-checkbox input[type=checkbox]:checked ~ span {
    font-weight: 700; }
  .styled-checkbox input:disabled ~ span {
    opacity: 0.5; }
  .styled-checkbox input[type=checkbox]:disabled ~ .checkmark {
    background-color: #ADADAD;
    border: 1px solid #ADADAD; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -2px;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #fff;
  border: 1px solid #0C1927;
  border-radius: 4px; }
  .checkmark.radio {
    border-radius: 50%; }
  .checkmark.error {
    border: 1px solid #EF5350; }

/* When the checkbox is checked, add a primary background */
.styled-checkbox input:checked ~ .checkmark,
.radio-wrapper-new input:checked ~ .checkmark.radio {
  background-color: #0C1927; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after, .checkmark.radio::after {
  content: "";
  position: absolute;
  display: none; }

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* The container for Radio */
.radio-wrapper-new {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default checkbox  & Radio*/
  /* Style the checkmark/indicator */
  /* On mouse-over, add a cream background color  and font bold */
  /* Show the checkmark when checked */ }
  .radio-wrapper-new input[type=radio] {
    display: none; }
  .radio-wrapper-new .checkmark::after {
    left: 8px;
    top: 3px;
    width: 6px;
    height: 14px;
    border: solid #FFFAE5;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .radio-wrapper-new:hover {
    font-weight: 700; }
    .radio-wrapper-new:hover input:not(:checked) ~ .checkmark.radio {
      background-color: #FFFAE5; }
    .radio-wrapper-new:hover input[type=radio]:disabled ~ .checkmark {
      background-color: #ADADAD;
      border: 1px solid #ADADAD; }
  .radio-wrapper-new input:checked ~ .checkmark.radio::after {
    display: block; }
  .radio-wrapper-new input[type=radio]:checked ~ span {
    font-weight: 700; }
  .radio-wrapper-new input[type=radio]:disabled ~ .checkmark {
    background-color: #ADADAD;
    border: 1px solid #ADADAD; }

.custom-control-label::before {
  position: absolute;
  top: 0;
  left: -1.42rem;
  display: block;
  width: 1.5625rem;
  height: 1.5625rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
  border-radius: 4px;
  cursor: pointer; }

.custom-control-label::after {
  position: absolute;
  top: 0;
  left: -1.42rem;
  display: block;
  width: 1.5625rem;
  height: 1.5625rem;
  content: "";
  cursor: pointer; }

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #0C1927;
  background-color: #0C1927; }

.custom-control-label {
  cursor: pointer;
  padding-left: 0.56rem;
  font-size: 1.125rem;
  padding-top: 0; }

.custom-control-input:checked ~ .custom-control-label::after {
  content: '';
  position: absolute;
  top: 8px;
  left: -16px;
  width: 11px;
  height: 6px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg); }

.form-control {
  height: 2.8rem;
  padding: 1rem .75rem;
  font-size: 0.9rem;
  line-height: 2;
  color: #333;
  border-radius: 4px; }
  .form-control.lg {
    height: 52px; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.custom-select {
  height: 2.8rem;
  font-size: 1rem;
  max-width: 100%;
  color: #333333;
  border-color: #0C1927; }
  .custom-select.error {
    border-color: #EF5350; }

.custom-select-sm {
  width: auto;
  border-color: #A4ADB7; }

.custom-select-lg {
  height: 52px;
  min-width: 340px; }

.form-control:focus,
.custom-select:focus {
  border-color: #0C1927;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(12, 25, 39, 0.05); }

/******* Bootsrap input group override ******/
.input-group-text {
  background-color: transparent; }

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

/******* Bootstrap form control col-lebel override *********/
.col-form-label {
  padding-top: 12px;
  padding-bottom: 8px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  color: #0C1927; }

.form-control {
  border: 1px solid #A4ADB7; }

.form-group .custom-select {
  border-color: #A4ADB7; }
  .form-group .custom-select.error {
    border-color: #EF5350; }
  .form-group .custom-select:focus {
    border-color: #0C1927; }

/**** Toggle Switch ****/
.toggle-switch input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden; }

.toggle-switch label {
  cursor: pointer;
  text-indent: -9999px;
  width: 46px;
  height: 24px;
  background: #919191;
  border-radius: 40px;
  position: relative; }
  .toggle-switch label:after {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 1px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s; }

.toggle-switch input:checked + label {
  background: #FFD200; }
  .toggle-switch input:checked + label::after {
    left: calc(100% - 1px);
    transform: translateX(-100%); }

.toggle-switch.switch-sm {
  height: 18px; }
  .toggle-switch.switch-sm label {
    width: 36px;
    height: 18px;
    border: 1px solid #A4ADB7;
    background: #FFFFFF; }
    .toggle-switch.switch-sm label:after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: 18px;
      height: 18px;
      background: #A4ADB7;
      border-radius: 50%;
      transition: 0.3s; }
  .toggle-switch.switch-sm input:checked + label {
    background-color: #FFFFFF; }
    .toggle-switch.switch-sm input:checked + label:after {
      left: 100%;
      transform: translateX(-100%);
      background-color: #0C1927; }

.toggle-switch.--admin label:after {
  top: 2px; }

.toggle-switch.--admin input:checked + label {
  background: #000C19; }

.toggle-switch label:active:after {
  width: 20px; }

/***** Bootstrap Override file upload Admin Panel *******/
.custom-file {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 10px; }
  .custom-file.error {
    border-radius: 4px;
    border: 2px solid #EF5350; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 44px;
  margin: 0;
  opacity: 0; }

.custom-file-input:focus {
  outline: none;
  border: 0; }

.custom-file-input:focus ~ .custom-file-label {
  border: 0;
  box-shadow: none; }

.custom-file-label {
  transition: background-color .15s ease-in-out; }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #495057;
  background-color: transparent;
  border: none;
  border-radius: .25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 0;
    z-index: 3;
    display: block;
    height: 44px;
    padding: 10px 20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #333;
    content: "Upload a File";
    background-color: #E7E8E9;
    border: 0;
    border-radius: 4px; }
  .custom-file-label.--admin::after {
    background-color: #0C1927;
    color: #FFFFFF; }

/******* React Select Overide ******/
.css-bg1rzq-control {
  min-height: 2.8rem !important;
  border-color: #A4ADB7 !important; }

.css-1szy77t-control {
  min-height: 2.8rem !important;
  border-color: #0C1927 !important;
  box-shadow: 0 0 0 1px #0C1927 !important; }
  .css-1szy77t-control:hover {
    border-color: #0C1927 !important; }

.basic-multi-select.error .css-yk16xz-control {
  border: 2px solid #EF5350 !important; }

.css-yk16xz-control {
  min-height: 2.8rem !important;
  border-color: #A4ADB7 !important; }

.css-1pahdxg-control {
  min-height: 2.8rem !important;
  border-color: #0C1927 !important;
  box-shadow: 0 0 0 1px #0C1927 !important; }
  .css-1pahdxg-control:hover {
    border-color: #0C1927 !important; }

.css-26l3qy-menu {
  overflow: auto;
  z-index: 999 !important; }

.thumbnail-img {
  width: 80px;
  border-radius: 15px;
  overflow: hidden; }

/* The Modal (background) */
.modal-img-zoom {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */ }

/* Modal Content (image) */
.modal-content-zoomImg {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px; }

/* Caption of Modal Image */
#captionText {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px; }

/* Add Animation */
.modal-content-zoomImg, #captionText {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s; }

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0); }
  to {
    -webkit-transform: scale(1); } }

@keyframes zoom {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

/* The Close Button */
.closeImgZoom {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s; }

.closeImgZoom:hover,
.closeImgZoom:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer; }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content-zoomImg {
    width: 100%; } }

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none; }

.nav-pills {
  padding: 14px 20px;
  background-color: #f2f2f2;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 1rem; }
  @media only screen and (max-width: 769px) {
    .nav-pills {
      margin-inline-start: -24px;
      margin-inline-end: -24px; } }
  .nav-pills .nav-link {
    border-radius: 5px;
    font-size: 14px; }
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    color: #fff;
    background: #000C19;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2); }

.student-card--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2ch 3ch;
  margin-block-end: 4rem; }
  @media only screen and (max-width: 1368px) {
    .student-card--grid {
      grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); } }
  @media only screen and (max-width: 576px) {
    .student-card--grid {
      gap: 2ch 0; } }

.list-empty-state {
  grid-column: 1/-1; }

.batch-student--card {
  position: relative;
  padding: 1.2rem 1.5rem;
  background-color: #F7F7F7;
  border-radius: 12px;
  border: 1px solid #A4ADB7; }
  .batch-student--card svg {
    color: #000C19; }
  .batch-student--card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: -3px 3px 2px #f2f2f2;
    opacity: 0;
    transition: opacity .4s ease; }
  .batch-student--card:hover::after {
    opacity: 1; }

.batch-card--loading {
  padding: 1.2rem 1.5rem;
  position: relative;
  min-height: 480px;
  background-color: #DADADA;
  border-radius: rem(12); }
  .batch-card--loading.sm {
    min-height: 300px; }

.btn-close {
  position: absolute;
  cursor: pointer;
  right: .3rem;
  top: .3rem; }

.duration-price--grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 20px;
  align-items: center; }

.market-price {
  grid-column: 2 / -1; }

.package-desc {
  margin-bottom: .8em; }

.brought-packages, .manage-package-section {
  min-height: 400px;
  transition: all .5s ease-in; }

.paginate-container {
  padding: 0;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  max-width: 90%;
  overflow-x: auto; }
  .paginate-container li {
    margin-right: 1.5ch; }
    .paginate-container li:last-child {
      margin-right: 0; }
  .paginate-container > * a {
    display: grid;
    place-content: center; }
  .paginate-container .previous, .paginate-container .next {
    color: #333333; }
    .paginate-container .previous .feather, .paginate-container .next .feather {
      font-weight: bold; }
    .paginate-container .previous.disabled, .paginate-container .next.disabled {
      color: #6F6F6F; }
  .paginate-container .page > a {
    width: 35px;
    height: 35px;
    border-radius: 25px;
    font-weight: 400;
    cursor: pointer;
    background-color: #DADADA;
    color: #000C19;
    border: 1px solid #DADADA; }
  .paginate-container .page.active a {
    font-weight: 600;
    background-color: #000C19;
    border: 1px solid #000C19;
    color: #FFFFFF; }

.teachers-grid {
  display: grid;
  gap: 10px 20px;
  margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.modal-header,
.modal-body,
.modal-footer {
  padding: 20px; }

@media (min-width: 576px) {
  .modal-dialog {
    margin: 1.75rem auto; }
  .modal-dialog.modal-dialog-full {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    height: 100vh;
    scroll-behavior: smooth;
    overflow: hidden; }
    .modal-dialog.modal-dialog-full .modal-body {
      overflow-y: auto;
      height: calc(100vh - 100px); } }

.multi-course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2.8rem; }
  .multi-course-grid > div:nth-child(even) {
    grid-column: 3 / span 2; }
  .multi-course-grid > div:nth-child(odd) {
    grid-column: 1 / span 2; }
  .multi-course-grid > div:last-child.section-3,
  .multi-course-grid > div:last-child.section-5 {
    grid-column: 2 / span 2; }
  .multi-course-grid .question-list-grid {
    gap: 1rem; }
  .multi-course-grid .section-grid {
    grid-template-columns: 1fr;
    grid-gap: 2.4rem; }
  @media only screen and (max-width: 769px) {
    .multi-course-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 2.4rem; }
      .multi-course-grid > div:nth-child(even) {
        grid-column: 1 / span 2; } }

.passage-container {
  background: #efefef;
  border-radius: 5px;
  padding: 24px;
  height: 320px;
  max-width: 100%;
  overflow-y: scroll; }

.passage-container.full-height {
  height: auto; }

.passage-area {
  border-radius: 4px;
  border: 1px solid #E7E8E9;
  height: 70vh;
  overflow-y: auto; }

.passage-inner .line::before {
  content: "Line";
  visibility: visible; }

.passage-inner ol > li.show-list::before {
  visibility: visible; }

.passage-inner {
  margin-left: auto;
  padding: 20px 30px 40px 0; }
  .passage-inner.--admin {
    padding: 20px; }
  .passage-inner p, .passage-inner ol > li, .passage-inner span, .passage-inner div, .passage-inner u {
    font-family: serif;
    color: #333;
    line-height: 140%;
    text-rendering: optimizeLegibility; }
  .passage-inner b, .passage-inner strong {
    font-weight: 700; }
  .passage-inner ol {
    counter-reset: item;
    margin: 0 0 1.5em;
    padding: 0;
    width: fit-content; }
    .passage-inner ol > li {
      counter-increment: item;
      list-style-type: none;
      margin: 0;
      padding: 0 0 0 2rem;
      text-indent: -1.2rem; }
      .passage-inner ol > li::before {
        content: counter(item);
        display: inline-block;
        font-size: 14px;
        font-style: italic;
        font-weight: bold;
        padding-right: 2rem;
        text-align: right;
        width: 3rem;
        visibility: hidden;
        color: #000; }

.highlight-backend,
.highlight {
  background-color: #FFD200;
  padding: 1px 0;
  position: relative;
  cursor: pointer; }

.mathjax-manual-style {
  display: inline;
  position: static;
  font-style: normal;
  box-sizing: content-box;
  font-weight: normal;
  font-family: MathJax_Math-italic;
  line-height: normal;
  text-indent: 0;
  text-rendering: optimizeLegibility;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  word-spacing: normal;
  word-wrap: normal;
  direction: ltr;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0 .326em;
  margin: 0;
  color: #6c757d; }

span.passage-line-no {
  padding: 0 4px;
  background: #343A40;
  font-weight: bold;
  color: #fff; }

@media screen and (max-width: 1000px) {
  .passage-inner {
    width: 100%;
    padding: 20px; }
  .passage-inner ol > li.line::before {
    visibility: hidden; }
  .passage-inner ol > li::before {
    left: -15px; } }

.product-inner {
  border: 1px solid #E5F2FF;
  border-radius: 4px; }
  .product-inner .exam-row {
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #E5F2FF; }
    .product-inner .exam-row.locked {
      background-color: #F2f2f2;
      border-bottom: 0;
      transition: all .3s ease; }
      .product-inner .exam-row.locked:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px; }
      .product-inner .exam-row.locked.--modal {
        background-color: #DADADA;
        border-bottom: 1px solid #ADADAD; }
        .product-inner .exam-row.locked.--modal:hover div {
          color: inherit; }
      .product-inner .exam-row.locked .blue-box {
        background-color: #007BFF;
        position: absolute;
        height: 100%;
        width: 10rem;
        border-bottom-right-radius: 4px;
        right: 0;
        top: 0;
        transition: width .3s ease; }
      .product-inner .exam-row.locked .cta-link {
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        line-height: 130%;
        letter-spacing: 0.4px;
        font-weight: 700;
        color: #FFFFFF;
        background-color: #007BFF; }
      .product-inner .exam-row.locked .op-hover {
        opacity: 0;
        visibility: hidden;
        cursor: none;
        transition: opacity .5s ease-out; }
      .product-inner .exam-row.locked:hover .blue-box {
        width: 100%;
        border-bottom-left-radius: 4px; }
      .product-inner .exam-row.locked:hover .op-hover {
        opacity: 1;
        visibility: visible;
        cursor: pointer; }
      .product-inner .exam-row.locked:hover .icn-lock svg circle {
        fill: #FFF; }
      .product-inner .exam-row.locked:hover .icn-lock svg path {
        fill: #007BFF; }
      .product-inner .exam-row.locked:hover .cta-link {
        color: #007BFF;
        background-color: #FFFFFF; }
      .product-inner .exam-row.locked:hover div {
        color: #FFFFFF; }
    .product-inner .exam-row:not(.locked):hover {
      background-color: #E5F2FF; }
      .product-inner .exam-row:not(.locked):hover .cta-link > div {
        color: #007BFF; }
      .product-inner .exam-row:not(.locked):hover .cta-link svg {
        color: #007BFF; }

/**** Time Line *******/
.timeline {
  position: sticky;
  top: 120px; }
  .timeline .timeline-heading {
    text-align: left;
    margin-left: 47px; }

.timeline-item {
  position: relative;
  margin-left: 40px;
  margin-bottom: 35px;
  transition: all 0.3s ease; }
  .timeline-item:before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: calc(50% - 6px);
    left: -40px;
    border: 2px solid #fff;
    background: #FFD200;
    border-radius: 50%;
    transition: all 0.3s ease; }
  .timeline-item.active:before {
    background: #FFFAE5;
    box-shadow: 0px 0px 10px #FFFAE5;
    border: 2px solid #FFD200; }
  .timeline-item:after {
    content: '';
    display: block;
    width: 2px;
    height: 50px;
    background: #FFFAE5;
    position: absolute;
    top: calc(6px + 2px);
    left: calc(-40px + 6px - 1px); }
  .timeline-item:last-child::after {
    display: none; }

/*************************************** Progressbar ovveride ****************************/
.progress {
  background-color: #E7E8E9; }
  .progress .progress-bar.animated-bar-load {
    width: 25%;
    animation: animated-bar 1s linear infinite forwards; }

/********* SAT VS ACT REPORT Progress as Testprep ********/
.custom-progress-bar {
  width: 100%;
  height: 7px;
  background: rgba(0, 0, 0, 0.1);
  margin: 7px 0;
  border-radius: 0.5rem;
  overflow: hidden; }
  .custom-progress-bar .progress-bar-inner {
    height: 7px; }

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3.2rem; }
  @media only screen and (max-width: 769px) {
    .section-grid {
      grid-template-columns: 1fr;
      grid-gap: 2.4rem; } }

.question-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  grid-gap: 1.4rem; }
  @media only screen and (max-width: 769px) {
    .question-list-grid {
      grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } }

.question-list-grid.small {
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-gap: 1rem; }

.question-button {
  font-size: 0.9rem;
  border: 1px solid #a4a4a4;
  background: #fff;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px; }

.question-button.small {
  font-size: 0.8rem;
  padding: 8px; }

.question-button:hover {
  border: 1px solid #FFD200; }

.question-button.active {
  border: 1px solid #FFD200;
  font-weight: 700;
  background: #FFFAE5; }

.question-button.correct {
  color: #388E3C; }

.question-button.correct:hover {
  border: 1px solid #388E3C; }

.question-button.correct.active {
  border: 1px solid #388E3C;
  background: #388E3C;
  color: #fff; }

.question-button.incorrect {
  color: #EF5350; }

.question-button.incorrect:hover {
  border: 1px solid #EF5350; }

.question-button.incorrect.active {
  border: 1px solid #EF5350;
  background: #EF5350;
  color: #fff; }

.question-button.skipped {
  color: #6F6F6F; }

.question-button.skipped:hover {
  border: 1px solid #6F6F6F; }

.question-button.skipped.active {
  border: 1px solid #6F6F6F;
  background: #6F6F6F;
  color: #fff; }

ul.exam-answer-radio {
  list-style: none; }

.mcq-radio-input {
  display: none; }

.mcq-radio-label {
  position: relative;
  width: 100%;
  padding: 15px;
  padding-left: 60px;
  margin: 0.5rem 0;
  text-align: left;
  border: 1px solid #bdbdbd;
  background-color: #fff;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 300; }
  .mcq-radio-label.--admin {
    border-radius: 4px;
    border: 1px solid #E7E8E9; }
    .mcq-radio-label.--admin::before {
      border: none;
      background-color: #A4ADB7;
      color: #0C1927;
      font-size: 14px;
      line-height: 16px; }

ul.exam-answer-radio {
  counter-reset: item; }
  ul.exam-answer-radio > li > div {
    counter-increment: item; }

.mcq-radio-label::before {
  content: counter(item, upper-alpha);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-blue);
  position: absolute;
  top: calc(50% - 15px);
  left: calc(30px /* p-padding */ - 15px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Muli', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-blue); }

input.mcq-radio-input:checked + label {
  background-color: var(--blue-hover);
  border: 1px solid var(--c-blue); }

input.mcq-radio-input:checked + .mcq-radio-label::before {
  background-color: var(--c-blue);
  color: #fff; }

.mcq-solution {
  pointer-events: none; }

.mcq-solution.correct {
  border: 1px solid #388E3C;
  background-color: #D6FFD7;
  padding-right: 40px; }

#mcq-radio-label-1.correct::before,
#mcq-radio-label-2.correct::before,
#mcq-radio-label-3.correct::before,
#mcq-radio-label-4.correct::before,
.mcq-solution.correct::before {
  content: '';
  border: 1px solid var(--success);
  background: var(--success); }

.mcq-solution.correct:after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  left: calc(30px - 6px);
  width: 12px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg); }

.mcq-solution.incorrect {
  border: 2px solid var(--danger);
  padding-right: 40px; }

.mcq-solution.user-selection {
  background: #E5F2FF; }

.mcq-radio-label.--admin.mcq-solution.user-selection {
  background: #E7E8E9; }

#mcq-radio-label-1.incorrect::before,
#mcq-radio-label-2.incorrect::before,
#mcq-radio-label-3.incorrect::before,
#mcq-radio-label-4.incorrect::before,
.mcq-solution.incorrect::before {
  content: '';
  border: 1px solid var(--danger);
  background: var(--danger); }

.mcq-solution.incorrect:after {
  content: "×";
  color: white;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - 14px);
  left: 24px;
  font-size: 20px;
  font-weight: bold; }
  @media only screen and (max-width: 576px) {
    .mcq-solution.incorrect:after {
      top: calc(50% - 11px); } }

.answer-explanation-container {
  background: #efefef;
  border-radius: 5px;
  padding: 24px; }
  .answer-explanation-container img {
    width: 100%;
    margin-bottom: 20px; }

.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-gap: 40px; }

@media screen and (max-width: 769px) {
  .question-grid {
    grid-template-columns: 1fr; } }

.question-title ol {
  padding-left: 40px; }

.question-title ul {
  padding-left: 50px; }

.question-title img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px; }

.question-preview-title ol {
  padding-inline-start: 40px; }
  .question-preview-title ol li {
    list-style: decimal; }

.question-detail-title * {
  font-family: 'Vollkron', 'Muli', sans-serif; }

.question-detail-title ol {
  padding-inline-start: 40px; }

.question-detail-acc-card:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem; }

.question-detail-acc-card:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem; }

.question-detail-acc-header {
  background-color: #FFF;
  border-bottom: none; }
  .question-detail-acc-header h5 {
    font-size: 16px;
    letter-spacing: .1;
    color: #007bff;
    transition: color 0.3s ease; }

.question-detail-acc-body {
  padding: 5px 20px 10px;
  font-size: 14px; }

/********** AFTER MULTI COURSE REPORT CHANGES *********/
.empty-question {
  border: 1px solid #ADADAD;
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: .5rem; }
  .empty-question svg {
    color: #ADADAD; }

.grid-question-sidesheet {
  width: 100%;
  height: 100%;
  display: grid;
  letter-spacing: .5px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "p p q q"; }

.grid-passage {
  grid-area: p;
  padding: 10px 20px; }

.grid-question {
  grid-area: q;
  padding: 10px 25px; }

.sidesheet-overlay {
  z-index: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; }

.sidesheet-overlay.show {
  opacity: 1;
  visibility: visible; }

.sidesheet {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 650px;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease; }

.sidesheet.sidesheet-left {
  left: 72px;
  transform: translateX(-100%);
  overflow-y: auto; }

.sidesheet.report-sidesheet {
  overflow-y: auto;
  overflow-x: hidden; }

.sidesheet.sidesheet-right {
  right: 0;
  transform: translateX(100%); }

.sidesheet.show {
  transform: translateX(0); }

.sidesheet-section {
  padding: 24px; }
  .sidesheet-section.--header {
    padding: 14px 24px; }
  :not(.btn-group) + .sidesheet-section.body {
    height: calc(100vh - (84px + 54px));
    overflow: hidden;
    overflow-y: auto; }
  .sidesheet-section.body {
    overflow: hidden;
    height: calc(100vh - (121px + 54px));
    overflow-y: auto; }

.sidesheet .sidesheet-section:last-child {
  border-bottom: none; }

.sidesheet-cta {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #E7E8E9; }

.sidesheet-cta .btn {
  border-radius: 0; }
  .sidesheet-cta .btn.btn-solid-large.w-50 {
    padding: 0 2rem; }

.sidesheet-filters .btn.btn-sm {
  font-size: 0.8rem;
  padding: 0.5rem;
  cursor: pointer; }

.question-sidesheet-overlay {
  z-index: 2; }

.question-sidesheet {
  z-index: 3;
  width: 1120px; }

.product-sidesheet {
  width: 85vw;
  z-index: 3; }
  @media only screen and (max-width: 1368px) {
    .product-sidesheet {
      width: 100vw;
      z-index: 3; } }

.sidesheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.sidesheet-question-list {
  background: #dddfe1;
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto; }

.sidesheet-question-view {
  height: 100vh;
  overflow-y: auto; }
  @media only screen and (max-width: 576px) {
    .sidesheet-question-view {
      height: calc(100vh - 65px); } }

.sidesheet-question-filters {
  background: #FFFFFF90; }

@media screen and (max-width: 769px) {
  .sidesheet {
    width: 100vw;
    top: 65px;
    height: calc(100vh - 65px); }
  .sidesheet.sidesheet-left {
    left: 0; }
  .sidesheet-grid {
    display: block; }
  .sidesheet-question-list {
    display: none; } }

/* Loader
******************************************************************************/
.loader {
  z-index: 111;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px; }

.loader-inner {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #FFD200;
  display: flex;
  align-items: center;
  justify-content: center; }

.book {
  transform-style: preserve-3d;
  position: relative;
  height: 75px;
  cursor: pointer;
  backface-visibility: visible; }

.front, .back, .page1, .page2, .page3, .page4, .page5 {
  transform-style: preserve-3d;
  position: absolute;
  width: 55px;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: left center;
  transition: transform .5s ease-in-out, box-shadow .35s ease-in-out; }

.front, .back {
  background: #153DD1; }

.front, .page1, .page3 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em; }

.back, .page2, .page4, .page5 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em; }

.page1 {
  background: #efefef; }

.page2 {
  background: #efefef; }

.page3 {
  background: #f5f5f5; }

.page4 {
  background: #f5f5f5; }

.page5 {
  background: #fdfdfd; }

.book .front {
  transform: rotateY(-160deg);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }

.book .page1 {
  transform: rotateY(-150deg);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }

.book .page2 {
  transform: rotateY(-30deg);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }

.book .page3 {
  transform: rotateY(-140deg);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }

.book .page4 {
  transform: rotateY(-40deg);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }

.book .page5 {
  animation: turnPage 0.6s ease infinite;
  transform: rotateY(-50deg);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }

.book .back {
  transform: rotateY(-20deg); }

/************* Content loader ****************/
.content-loading {
  overflow: hidden;
  position: relative; }
  .content-loading::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: #bbb;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    animation: placeHolderShimmer 1s linear infinite forwards;
    background-size: 950px 100%; }

.admin-panel-table > table {
  border: 0; }

@media only screen and (max-width: 769px) {
  .admin-panel-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; } }

.admin-panel-table > .table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  background: #0C1927;
  color: #A4ADB7;
  padding: 10px;
  border: 0; }

.admin-panel-table > .table thead th {
  border-bottom: none; }

.admin-panel-table > .table thead th:first-child {
  border-top-left-radius: 4px;
  padding-inline-start: 32px;
  padding-left: 32px; }

.admin-panel-table > .table thead th:last-child {
  border-top-right-radius: 4px;
  padding-inline-end: 32px;
  padding-right: 32px; }

.admin-panel-table > .table td,
.admin-panel-table > .table th {
  vertical-align: middle; }

.admin-panel-table > .table td {
  padding: 1.5rem 0.6rem; }

.admin-panel-table > .table tbody tr:first-child {
  border-top: none; }

.admin-panel-table > .table tbody tr:last-child {
  border-bottom: 1px solid #E7E8E9; }

.admin-panel-table > .table tbody td:first-child {
  border-left: 1px solid #E7E8E9;
  padding-inline-start: 32px;
  padding-left: 32px; }

.admin-panel-table > .table tbody td:last-child {
  border-right: 1px solid #E7E8E9;
  padding-inline-end: 32px;
  padding-right: 32px; }

.admin-panel-table tr:hover,
.admin-panel-table tr:focus,
.admin-panel-table tr:focus-within {
  background: #F7F7F7; }
  .admin-panel-table tr:hover .remove-icon,
  .admin-panel-table tr:focus .remove-icon,
  .admin-panel-table tr:focus-within .remove-icon {
    color: #EF5350; }

.admin-panel-table tr:hover .kebab-icon {
  color: #0C1927; }

.admin-panel-table .table-filter-item {
  margin-right: 1.5rem; }

.admin-panel-table .table-filter-item:last-child {
  margin-right: none; }

/************ Auth NavBar ******************/
.authbar-wrapper {
  z-index: 11;
  width: calc(100% - 72px);
  left: 72px;
  top: 0;
  height: 70px;
  background: #fff;
  padding: 0 120px;
  transition: all 0.3s ease; }
  @media only screen and (max-width: 769px) {
    .authbar-wrapper {
      display: none; } }
  .authbar-wrapper .nav-right-wrapper {
    position: absolute;
    right: 3%;
    color: #828282;
    cursor: pointer;
    display: flex;
    align-items: center; }
    .authbar-wrapper .nav-right-wrapper svg {
      margin-left: 12px; }

.mobile-authbar--wrapper {
  display: none;
  z-index: 98;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 65px;
  background: #fff;
  border-top: 1px solid #0C1927;
  border-bottom: 1px solid #0C1927; }
  @media only screen and (max-width: 769px) {
    .mobile-authbar--wrapper {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center; } }
  .mobile-authbar--wrapper .logo {
    padding: 0;
    position: relative;
    width: 72px;
    height: 100%;
    background: #0C1927; }
    .mobile-authbar--wrapper .logo img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
  .mobile-authbar--wrapper .nav-left-wrapper {
    position: relative;
    margin-left: 12px; }
  .mobile-authbar--wrapper .nav-right-wrapper {
    position: absolute;
    right: 3%;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer; }
    .mobile-authbar--wrapper .nav-right-wrapper > i {
      margin-left: 6px; }
    .mobile-authbar--wrapper .nav-right-wrapper .icn_circle_wrapper {
      height: 24px;
      width: 24px;
      padding: 12px;
      border-radius: 12em;
      background: #A4ADB7; }
    .mobile-authbar--wrapper .nav-right-wrapper .icn-circle {
      font-size: 16px; }

/************* Sidebar after Auth ******************/
.icon-sidebar {
  z-index: 2;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  padding: 5px;
  width: 82px;
  height: 100vh;
  background: #0C1927;
  border-right: 1px solid #0C1927; }
  @media only screen and (max-width: 769px) {
    .icon-sidebar {
      display: none; } }
  .icon-sidebar .sidebar-user-role {
    position: relative;
    width: 72px;
    padding: 4px 2px;
    text-align: center;
    color: #FFFFFF;
    background: #A4ADB7; }
  .icon-sidebar .sidebar-nav-item {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    color: #A4ADB7; }
    .icon-sidebar .sidebar-nav-item .nav-text {
      margin-block-start: .25rem;
      margin-top: .25rem; }
    .icon-sidebar .sidebar-nav-item.logo {
      padding: 0;
      width: 72px;
      background: #0C1927; }
      .icon-sidebar .sidebar-nav-item.logo::before, .icon-sidebar .sidebar-nav-item.logo::after {
        display: none; }
    .icon-sidebar .sidebar-nav-item:hover {
      background-color: #000C19; }
      .icon-sidebar .sidebar-nav-item:hover i {
        color: #FFFFFF; }
      .icon-sidebar .sidebar-nav-item:hover svg {
        color: #FFFFFF; }
    .icon-sidebar .sidebar-nav-item.is-active {
      position: relative;
      background: #000C19;
      color: #E7E8E9;
      border-right: 1px solid #000C19; }
      .icon-sidebar .sidebar-nav-item.is-active i {
        color: #FFFFFF; }
      .icon-sidebar .sidebar-nav-item.is-active svg {
        color: #FFFFFF; }
      .icon-sidebar .sidebar-nav-item.is-active::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: #000C19;
        border-right: 1px solid #0C1927;
        border-top: 1px solid #0C1927;
        top: 50%;
        right: -18%;
        transform: translate(-50%, -50%) rotate(45deg); }

/******* Mobile Sidebar Nav ***********/
.mobile-sidebar--wrapper {
  display: none;
  transition: all .5s ease-out;
  z-index: 99;
  position: fixed;
  width: 0%;
  left: 100%;
  top: 0;
  height: 65px;
  background: #0C1927;
  border-top: 1px solid #0C1927;
  border-bottom: 1px solid #0C1927; }
  @media only screen and (max-width: 769px) {
    .mobile-sidebar--wrapper {
      display: flex;
      flex-direction: row;
      justify-content: stretch;
      align-items: center;
      visibility: hidden; } }
  .mobile-sidebar--wrapper.show {
    visibility: visible; }
    @media only screen and (max-width: 769px) {
      .mobile-sidebar--wrapper.show {
        left: 72px;
        width: calc(100% - 72px); } }
    @media only screen and (max-width: 576px) {
      .mobile-sidebar--wrapper.show {
        width: 100%;
        left: 0; } }
  .mobile-sidebar--wrapper .mobile-sidebar-nav {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    overflow-x: auto; }
    @media only screen and (max-width: 769px) {
      .mobile-sidebar--wrapper .mobile-sidebar-nav {
        justify-content: space-around;
        width: 90%; } }
    @media only screen and (max-width: 576px) {
      .mobile-sidebar--wrapper .mobile-sidebar-nav {
        justify-content: start;
        width: 85%;
        padding-left: 6px; } }
    .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item {
      position: relative;
      width: 63px;
      height: 63px;
      padding: 0;
      margin-right: 4px;
      color: #A4ADB7; }
      @media only screen and (max-width: 769px) {
        .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item {
          width: 70px; } }
      @media only screen and (max-width: 576px) {
        .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item {
          width: 63px; } }
      .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item * {
        transition: all .3s ease; }
      .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item .nav-text {
        margin-top: .25rem; }
      .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item.is-active {
        position: relative;
        background: #000C19;
        color: #FFFFFF; }
        .mobile-sidebar--wrapper .mobile-sidebar-nav .sidebar-nav-item.is-active svg {
          color: #FFFFFF; }
  .mobile-sidebar--wrapper .nav-right-wrapper {
    position: absolute;
    right: 3%;
    color: #828282;
    padding: 2px;
    margin: 0 4px;
    font-size: 2.4rem;
    letter-spacing: .14rem;
    cursor: pointer; }
    @media only screen and (max-width: 576px) {
      .mobile-sidebar--wrapper .nav-right-wrapper {
        right: 8px; } }
    .mobile-sidebar--wrapper .nav-right-wrapper svg {
      font-size: 16px; }

.recom-report__grid {
  display: grid;
  margin: 62px auto;
  grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  gap: 50px; }
  .recom-report__grid.score {
    grid-template-columns: repeat(auto-fit, minmax(228px, 245px));
    gap: 50px 22px;
    margin: 4rem auto 2.5rem; }
    .recom-report__grid.score > div {
      gap: 0;
      grid-template-columns: auto 1fr; }
    .recom-report__grid.score .left-box {
      width: 100px;
      height: 90px; }
      .recom-report__grid.score .left-box__text {
        width: 8ch;
        font-size: 16px;
        line-height: 1.2;
        color: #333333;
        font-weight: bold;
        text-transform: uppercase; }
        .recom-report__grid.score .left-box__text span {
          font-size: 12px;
          display: block; }
    .recom-report__grid.score .right-box {
      height: 100%;
      display: grid;
      place-content: center; }
      .recom-report__grid.score .right-box__NC, .recom-report__grid.score .right-box__NA {
        height: 100%;
        display: grid;
        place-content: center; }
        .recom-report__grid.score .right-box__NC .right-box__text, .recom-report__grid.score .right-box__NA .right-box__text {
          color: #FFFFFF; }
      .recom-report__grid.score .right-box__NC {
        background-color: #388E3C; }
      .recom-report__grid.score .right-box__NA {
        background-color: #EF5350; }
        .recom-report__grid.score .right-box__NA .right-box__text {
          width: auto; }
      .recom-report__grid.score .right-box__text {
        width: 8ch;
        font-size: 18px;
        line-height: 1.2;
        color: #6F6F6F;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center; }
        .recom-report__grid.score .right-box__text.lh-24 {
          line-height: 24px; }
        .recom-report__grid.score .right-box__text span {
          font-size: 12px;
          display: block; }
  .recom-report__grid > div {
    min-height: 60px;
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 20px;
    align-items: center; }
  .recom-report__grid .left-box {
    width: 78px;
    height: 77px;
    background-color: #DADADA;
    display: grid;
    place-content: center;
    text-align: center; }
    .recom-report__grid .left-box__success {
      background-color: #388E3C; }
      .recom-report__grid .left-box__success .left-box__text {
        color: #FFFFFF; }
    .recom-report__grid .left-box__text {
      font-size: 20px;
      line-height: 1.3;
      color: #6F6F6F;
      font-weight: bold;
      text-transform: uppercase; }
      .recom-report__grid .left-box__text span {
        font-size: 12px;
        display: block; }
  .recom-report__grid .right-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; }

.table-wrapper table {
  border: 0; }

.table-wrapper > .table tbody tr {
  border: none; }

.table-wrapper > .table td {
  border: 0;
  padding: 1rem; }
  .table-wrapper > .table td:first-of-type {
    border-right: 2px dashed #DADADA; }

.table-wrapper .label {
  font-size: 16px;
  letter-spacing: .2px;
  color: #000C19;
  font-weight: 600; }

.table-wrapper .select-as-text:disabled, .table-wrapper .select-as-text.disabled {
  color: #333333;
  font-weight: 400;
  opacity: 1;
  background-color: transparent;
  border: 0;
  padding: 0; }

.chip_container {
  width: 100%;
  height: 180px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  border: 1px solid #A4ADB7;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(25px, max-content));
  gap: 20px; }
  .chip_container .chip {
    background-color: #A4ADB7;
    border-radius: 2px;
    padding: 6px 8px;
    max-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; }
    .chip_container .chip:hover {
      color: #E7E8E9;
      background-color: #0C1927; }
      .chip_container .chip:hover svg {
        color: #EF5350; }

.login-wrapper {
  margin: 62px 0 120px 0; }
  @media only screen and (max-width: 576px) {
    .login-wrapper {
      flex-direction: column-reverse;
      margin-bottom: 0; }
      .login-wrapper .login-default--wrapper {
        width: 100% !important;
        padding: 0 1.5rem; }
        .login-wrapper .login-default--wrapper .signin-as-text {
          width: 100% !important; }
      .login-wrapper .form-login--wrapper {
        width: 100% !important; } }
  @media only screen and (max-width: 1368px) {
    .login-wrapper {
      flex-direction: column-reverse;
      margin-bottom: 0; }
      .login-wrapper .login-default--wrapper {
        width: 100% !important;
        padding: 0 1.5rem; }
      .login-wrapper .form-login--wrapper {
        width: 100% !important; } }
  .login-wrapper .img-left--wrapper {
    flex: 0 0 50%; }
    @media only screen and (max-width: 576px) {
      .login-wrapper .img-left--wrapper img.mobile-only {
        width: 100%;
        height: auto; } }
    @media only screen and (max-width: 1368px) {
      .login-wrapper .img-left--wrapper img.mobile-only {
        width: 100vw;
        height: auto; } }
    .login-wrapper .img-left--wrapper img.desktop-only {
      width: auto;
      height: 80vh; }
  .login-wrapper .login-default--wrapper {
    position: relative;
    width: 560px;
    margin: 30px 0; }
    .login-wrapper .login-default--wrapper .signin-as-text {
      width: 18.2rem;
      margin-bottom: 1rem;
      word-break: break-word; }
    .login-wrapper .login-default--wrapper .sample-line {
      font-size: 1.125rem;
      line-height: 23px;
      color: #6F6F6F; }
      .login-wrapper .login-default--wrapper .sample-line a {
        color: #007BFF;
        font-weight: 700; }
    .login-wrapper .login-default--wrapper .form-login--wrapper {
      margin: 1.5rem 0;
      position: relative;
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 15px;
      width: 31.1rem; }
      .login-wrapper .login-default--wrapper .form-login--wrapper .form-control {
        font-size: 1rem;
        font-weight: inherit;
        line-height: 20px;
        height: 54px;
        color: #333333;
        padding: 1.05rem 1rem;
        border: 2px solid #e7e7e7;
        border-radius: 4px;
        outline: none; }
        .login-wrapper .login-default--wrapper .form-login--wrapper .form-control::placeholder {
          width: 80%; }
        .login-wrapper .login-default--wrapper .form-login--wrapper .form-control:hover {
          box-shadow: none;
          border: 2px solid #b3b3b3; }
        .login-wrapper .login-default--wrapper .form-login--wrapper .form-control:focus {
          box-shadow: none;
          border: 2px solid #FFD200; }
        .login-wrapper .login-default--wrapper .form-login--wrapper .form-control.error {
          border: 2px solid #EF5350; }
        .login-wrapper .login-default--wrapper .form-login--wrapper .form-control.password {
          padding-right: 2.5rem; }
    .login-wrapper .login-default--wrapper .forgot-pass {
      display: block;
      float: right;
      font-weight: 700;
      font-size: 0.875rem;
      line-height: 1.125rem; }
    .login-wrapper .login-default--wrapper .btn-wrapper {
      margin-top: 4.9rem; }

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

.select-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem .5rem;
  grid-gap: 1rem .5rem; }

.exam-list {
  padding: 15px 0 0; }
  .exam-list .exam-item {
    list-style: none;
    position: relative;
    text-align: start;
    background-color: #F7F7F7;
    border: 1px solid #E7E8E9;
    border-radius: 4px;
    padding: 12px;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    word-wrap: break-word;
    color: #333; }
    .exam-list .exam-item .icn-circle {
      background-color: #A4ADB7;
      padding: 2px; }
      .exam-list .exam-item .icn-circle svg {
        color: #FFFFFF; }
    .exam-list .exam-item:hover .icn-circle {
      background-color: #0C1927; }
    .exam-list .exam-item.active {
      background-color: #0C1927;
      border: 1px solid #0C1927;
      color: #FFF; }
      .exam-list .exam-item.active .icn-circle {
        padding: 2px;
        background-color: #E7E8E9; }
        .exam-list .exam-item.active .icn-circle svg {
          color: #0C1927; }

.section-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 15px;
  font-weight: 900;
  color: #0C1927;
  text-transform: uppercase;
  cursor: pointer; }
  .section-row.active {
    color: #FFFFFF;
    background-color: #0C1927; }
    .section-row.active svg {
      color: #FFFFFF; }
  .section-row:not(.active):hover {
    background-color: #F7F7F7; }
  .section-row svg {
    transform: rotate(-90deg);
    color: #A4ADB7; }

ul.question-list {
  width: 100%;
  margin: 2.5rem 0 1rem;
  list-style-type: none; }
  ul.question-list li.question-checkbox {
    padding: 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    margin-bottom: 10px;
    display: flex; }
    ul.question-list li.question-checkbox .question-badges {
      margin-left: 2.2rem;
      width: calc(100% - 2.2rem); }
    ul.question-list li.question-checkbox button.btn-solid-badge {
      opacity: 0;
      cursor: default; }
    ul.question-list li.question-checkbox:hover {
      background-color: #F7F7F7; }
      ul.question-list li.question-checkbox:hover button.btn-solid-badge {
        opacity: 1;
        cursor: pointer; }
    ul.question-list li.question-checkbox:last-child {
      margin-bottom: 0; }
    ul.question-list li.question-checkbox.active {
      background-color: #E7E8E9; }
      ul.question-list li.question-checkbox.active button.btn-solid-badge {
        opacity: 1;
        cursor: pointer; }

/****** Exam Config GRID ******/
.exam-config-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 3rem 0; }
  .exam-config-grid .exam-config {
    flex: 0 1 60%;
    margin-right: 25px;
    transition: all .5s; }
  .exam-config-grid.full-mock .exam-config {
    flex: 0 0 50%;
    transition: all .5s; }
  .exam-config-grid .section-config {
    flex: 1 0 30%;
    width: 100%; }
    .exam-config-grid .section-config.not-required {
      height: 60vh;
      border: 4px dashed #A4ADB7;
      border-radius: 4px;
      display: grid;
      align-items: center; }

/***** List page ***********/
.table-change-section {
  margin: 0 auto;
  width: max-content; }

.btn-select-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center; }

.btn-select {
  border-radius: 4px;
  padding: 1.6rem;
  margin: .8rem;
  cursor: pointer; }
  .btn-select.active {
    background-color: #E7E8E9; }
  .btn-select:hover {
    background-color: #E7E8E9; }
  .btn-select .exam-desc {
    margin-top: 10px; }

.dark-block {
  background: #0C1927;
  color: #E7E8E9;
  border-radius: 4px;
  padding: 1rem;
  position: relative; }

.layer {
  position: absolute;
  width: 100%;
  z-index: 4; }

.search-inner {
  overflow: auto;
  height: 50vh;
  padding: 0 1rem; }
  @media only screen and (min-width: 1369px) and (max-width: 1440px) {
    .search-inner {
      height: 50vh; } }

.category-wise-section {
  margin: 5rem auto;
  width: fit-content; }

.table-filter-item {
  margin-right: 1.5rem; }

.table-filter-item:last-child {
  margin-right: 0; }

.btn-section {
  margin: 2.5rem auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 769px) {
    .btn-section {
      display: block;
      text-align: center; }
      .btn-section button {
        margin-block-end: 35px; }
      .btn-section .progress {
        display: none; } }