@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Merriweather:wght@300;400;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&family=Roboto:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,500&display=swap);
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto; }

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute; }

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent; }

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6; }

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9; }

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px; }

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px; }

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important; } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important; } }

.scrollbar-container {
  position: relative;
  height: 100%; }

header {
  background: #fff;
  position: relative;
  z-index: 1200; }

.content-panel .card {
  border-radius: 16px;
  box-shadow: none;
  padding: 20px;
  position: relative; }
  .content-panel .card .MuiCardContent-root {
    padding: 0; }
  .content-panel .card:focus {
    box-shadow: none;
    outline: none; }

.faq-section .faq-scroll {
  height: 250px;
  overflow-y: auto; }
  .faq-section .faq-scroll .orderList {
    padding-left: 16px; }
  .faq-section .faq-scroll .MuiAccordion-root.Mui-expanded:last-child {
    margin-bottom: 16px; }

@media screen and (max-width: 767px) {
  .faq-section h4 {
    margin: 0px 0px 8px !important;
    text-align: center; } }

.slick-slider {
  margin: 0px auto;
  position: relative;
  display: grid;
  width: 100%; }
  .slick-slider .slick-slide {
    padding: 0 15px; }
    .slick-slider .slick-slide .MuiPaper-elevation1 {
      box-shadow: none; }
  .slick-slider .slick-arrow {
    background: #ddd;
    display: none !important; }
  .slick-slider ul.slick-dots li {
    width: auto;
    height: auto; }
    .slick-slider ul.slick-dots li button {
      padding: 0;
      width: 10px;
      height: auto; }
      .slick-slider ul.slick-dots li button::before {
        content: "";
        background: #D5D5D5;
        width: 100%;
        height: 5px;
        opacity: 1; }
    .slick-slider ul.slick-dots li.slick-active button::before {
      opacity: 1;
      background: #EE803D; }

button.MuiButton-root {
  height: 38px;
  line-height: 38px;
  border-radius: 24px;
  box-shadow: none;
  text-transform: capitalize; }
  button.MuiButton-root:hover {
    box-shadow: none; }
  button.MuiButton-root.MuiButton-containedPrimary {
    background: #0065FF; }
    button.MuiButton-root.MuiButton-containedPrimary:hover {
      background: #0059e1; }

.MuiFormControl-root .MuiInputLabel-outlined {
  transform: translate(20px, 18px) scale(0.9); }
  .MuiFormControl-root .MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(14px, -3px) scale(0.75); }

.MuiFormControl-root .MuiOutlinedInput-root {
  border-radius: 25px; }
  .MuiFormControl-root .MuiOutlinedInput-root .MuiOutlinedInput-input {
    padding: 14.5px 14px; }
    .MuiFormControl-root .MuiOutlinedInput-root .MuiOutlinedInput-input.MuiOutlinedInput-inputMultiline {
      padding: 0; }

.MuiAccordion-root .MuiCollapse-container .MuiCollapse-wrapper .MuiCollapse-wrapperInner .MuiAccordionDetails-root {
  flex-direction: column;
  color: #000; }
  .MuiAccordion-root .MuiCollapse-container .MuiCollapse-wrapper .MuiCollapse-wrapperInner .MuiAccordionDetails-root p {
    margin-bottom: 15px;
    color: #000; }

a {
  color: #0065FF; }

:focus {
  outline: none; }

#scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #f2f2f2; }

#scrollbar::-webkit-scrollbar {
  width: 5px;
  background-color: #f2f2f2; }

#scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #a7a8aa; }

.content-panel {
  color: #253858;
  font-size: 14px; }
  .content-panel .form-group {
    margin-bottom: 1rem; }
  .content-panel h1, .content-panel h2, .content-panel h3, .content-panel h4, .content-panel h5, .content-panel h6 {
    font-weight: 500;
    margin-bottom: 15px; }
  .content-panel h6 {
    font-size: 20px; }
  .content-panel h5 {
    font-size: 16px; }
    .content-panel h5 .viewall {
      float: right;
      font-size: 11px;
      text-transform: uppercase;
      cursor: pointer; }
      .content-panel h5 .viewall:hover {
        text-decoration: underline; }
  .content-panel .slick-slider {
    margin-bottom: 25px; }
  .content-panel .main-slider .slick-slider .slick-slide {
    padding: 0; }
    .content-panel .main-slider .slick-slider .slick-slide .banner {
      border-radius: 16px;
      padding: 35px 350px 35px 50px;
      height: 330px;
      position: relative; }
      .content-panel .main-slider .slick-slider .slick-slide .banner .card {
        background: none;
        color: #fff;
        padding: 0;
        border-radius: 0; }
        .content-panel .main-slider .slick-slider .slick-slide .banner .card .carousel-caption {
          margin-top: 15px;
          margin-bottom: 15px; }
          .content-panel .main-slider .slick-slider .slick-slide .banner .card .carousel-caption h5 {
            font-size: 18px;
            position: relative;
            padding-bottom: 15px; }
            .content-panel .main-slider .slick-slider .slick-slide .banner .card .carousel-caption h5::after {
              width: 35px;
              height: 2px;
              background: blue;
              content: "";
              position: absolute;
              left: 0;
              bottom: 0; }
          .content-panel .main-slider .slick-slider .slick-slide .banner .card .carousel-caption p {
            font-size: 19px;
            line-height: 26px;
            margin-bottom: 15px;
            min-height: 120px; }
            .content-panel .main-slider .slick-slider .slick-slide .banner .card .carousel-caption p span.h5 {
              color: #FFC839;
              font-size: 20px; }
        .content-panel .main-slider .slick-slider .slick-slide .banner .card button.btn {
          border-radius: 24px;
          height: 48px;
          min-width: 125px;
          text-align: center;
          color: #fff;
          border: none;
          padding: 0 15px;
          min-width: 100px;
          font-size: 13px;
          background: #fff;
          font-weight: 500; }
        .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge {
          background: transparent linear-gradient(180deg, #FFFFFF 0%, #fbf0f2 78%, #FCEBEE 100%) 0% 0% no-repeat padding-box; }
          .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge .MuiCardContent-root {
            margin-top: 25px;
            display: flex; }
            .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge .MuiCardContent-root .image {
              text-align: center;
              margin-right: 50px;
              display: inline-flex;
              float: left;
              align-items: center; }
              .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge .MuiCardContent-root .image img {
                width: 160px;
                height: 160px;
                border-radius: 100px; }
            .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge .MuiCardContent-root .carousel-caption {
              margin-top: 15px;
              margin-bottom: 15px;
              float: left;
              width: 65%; }
              .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge .MuiCardContent-root .carousel-caption .name {
                text-align: right;
                color: #EE803D;
                margin-top: 15px; }
                .content-panel .main-slider .slick-slider .slick-slide .banner .card.ceo_msge .MuiCardContent-root .carousel-caption .name small {
                  display: block;
                  text-align: right;
                  color: #253858; }
      .content-panel .main-slider .slick-slider .slick-slide .banner button.btn {
        margin-top: 25px; }
      .content-panel .main-slider .slick-slider .slick-slide .banner.slide1 {
        background: #6D59D4;
        background: url("/images/img-slide1.svg") no-repeat right 0px bottom 0px, linear-gradient(270deg, #8AA6FC 0%, #6D59D4 100%);
        /* W3C */ }
        .content-panel .main-slider .slick-slider .slick-slide .banner.slide1 button.btn {
          background: #5855A9; }
      .content-panel .main-slider .slick-slider .slick-slide .banner.slide2 {
        background: #1B146C;
        background: url("/images/img-slide2.svg") no-repeat right 0px bottom 0px, linear-gradient(270deg, #87238F 0%, #1B146C 100%);
        /* W3C */ }
        .content-panel .main-slider .slick-slider .slick-slide .banner.slide2 button.btn {
          background: #814595; }
      .content-panel .main-slider .slick-slider .slick-slide .banner.slide3 {
        background: #0187C4;
        background: url("/images/img-slide3.svg") no-repeat right 50px bottom 30px, linear-gradient(270deg, #15C78B 0%, #0187C4 100%);
        /* W3C */ }
        .content-panel .main-slider .slick-slider .slick-slide .banner.slide3 button.btn {
          background: #38C6A6; }
  .content-panel .leaderboard .slick-slider {
    min-height: 300px;
    padding-bottom: 40px;
    background: #fff;
    border-radius: 16px;
    padding: 20px; }
    .content-panel .leaderboard .slick-slider .slick-slide {
      padding: 0; }
      .content-panel .leaderboard .slick-slider .slick-slide .card {
        background: none;
        border-radius: 0;
        padding: 0; }
        .content-panel .leaderboard .slick-slider .slick-slide .card .card-header {
          display: flex;
          align-items: center;
          margin-bottom: 10px; }
          .content-panel .leaderboard .slick-slider .slick-slide .card .card-header img.circle-fluid {
            width: 90px;
            height: 90px;
            border-radius: 100px;
            margin-right: 10px; }
          .content-panel .leaderboard .slick-slider .slick-slide .card .card-header h1 {
            font-size: 13px;
            color: #EE803D;
            margin: 0;
            font-weight: 600; }
            .content-panel .leaderboard .slick-slider .slick-slide .card .card-header h1 small {
              color: #808080;
              display: flex;
              font-size: 13px;
              font-weight: 500; }
        .content-panel .leaderboard .slick-slider .slick-slide .card .card-body {
          height: 126px;
          text-align: justify;
          overflow-y: auto;
          padding-right: 4px; }
  .content-panel .leaderboard .slick-dots {
    position: absolute;
    bottom: 25px; }
  .content-panel .rewards .slick-slider .slick-slide {
    padding: 0; }
  .content-panel .rewards .slick-slider .bg {
    border-radius: 16px;
    padding: 30px 20px;
    height: 360px;
    position: relative; }
    .content-panel .rewards .slick-slider .bg.orange {
      background: #ED7D39;
      background: url("/images/img-orange.svg") no-repeat right 0px bottom 0px, linear-gradient(270deg, #FFB893 0%, #ED7D39 100%);
      /* W3C */ }
    .content-panel .rewards .slick-slider .bg.blue {
      background: #13D0CA;
      background: url("/images/img-blue.svg") no-repeat right 0px bottom 0px, linear-gradient(270deg, #A9E6E0 0%, #13D0CA 100%);
      /* W3C */ }
    .content-panel .rewards .slick-slider .bg.yellow {
      background: #F1A817;
      background: url("/images/img-yellow.svg") no-repeat right 0px bottom 0px, linear-gradient(270deg, #FFDD66 0%, #F1A817 100%);
      /* W3C */ }
    .content-panel .rewards .slick-slider .bg.green {
      background: #36B97E;
      background: url("/images/img-green.svg") no-repeat right 0px bottom 0px, linear-gradient(270deg, #71D6A9 0%, #36B97E 100%);
      /* W3C */ }
    .content-panel .rewards .slick-slider .bg .card {
      background: none;
      color: #fff;
      padding: 0;
      border-radius: 0; }
      .content-panel .rewards .slick-slider .bg .card .MuiTypography-body2 {
        color: #fff;
        padding-right: 100px; }
      .content-panel .rewards .slick-slider .bg .card .slide {
        min-height: 150px;
        position: relative;
        color: #fff; }
        .content-panel .rewards .slick-slider .bg .card .slide .MuiTypography-h5 {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          position: relative;
          padding-bottom: 10px;
          margin-bottom: 25px; }
          .content-panel .rewards .slick-slider .bg .card .slide .MuiTypography-h5::after {
            content: "";
            position: absolute;
            height: 1px;
            width: 60px;
            background: #fff;
            bottom: 0;
            left: 0; }
        .content-panel .rewards .slick-slider .bg .card .slide .btn-rewards {
          color: #fff;
          text-transform: capitalize;
          position: absolute;
          bottom: 0; }
    .content-panel .rewards .slick-slider .bg .slick-slide {
      padding: 0; }
    .content-panel .rewards .slick-slider .bg .trophy {
      position: absolute;
      right: -30px;
      bottom: -15px; }
  .content-panel .rewards .slick-dots {
    position: absolute;
    bottom: 25px;
    text-align: left;
    width: auto;
    left: 20px; }
    .content-panel .rewards .slick-dots li {
      margin: 0 5px 0 0; }
      .content-panel .rewards .slick-dots li button::before {
        background: rgba(255, 255, 255, 0.5); }
      .content-panel .rewards .slick-dots li.slick-active button::before {
        background: #fff; }
  .content-panel .gallery .card {
    background: none;
    padding: 0; }
    .content-panel .gallery .card .slick-slider .slick-slide .card.image {
      background: #fff;
      padding: 15px;
      height: 360px; }
      .content-panel .gallery .card .slick-slider .slick-slide .card.image img.soon {
        margin: -15px auto auto auto; }
      .content-panel .gallery .card .slick-slider .slick-slide .card.image .media {
        height: 328px;
        overflow: hidden;
        border-radius: 8px;
        margin-bottom: 15px;
        transition: 0.3s; }
        .content-panel .gallery .card .slick-slider .slick-slide .card.image .media img {
          width: 100%; }
        .content-panel .gallery .card .slick-slider .slick-slide .card.image .media .overlay {
          position: absolute;
          background: rgba(255, 255, 255, 0.5);
          left: 15px;
          right: 15px;
          top: 15px;
          bottom: 15px;
          vertical-align: middle;
          display: none;
          height: 330px;
          border-radius: 8px;
          transition: 0.3s; }
          .content-panel .gallery .card .slick-slider .slick-slide .card.image .media .overlay img {
            width: auto;
            margin: auto;
            cursor: pointer; }
        .content-panel .gallery .card .slick-slider .slick-slide .card.image .media:hover .overlay {
          display: flex;
          transition: 0.3s; }
    .content-panel .gallery .card .slick-slider .slick-slide .card p {
      font-weight: 500; }
    .content-panel .gallery .card .slick-slider .slick-arrow {
      z-index: 1; }
    .content-panel .gallery .card .slick-slider .slick-prev {
      left: 0; }
    .content-panel .gallery .card .slick-slider .slick-next {
      right: 0; }
  .content-panel .explainer_video .card {
    background: none;
    padding: 0 0 35px 0; }
    .content-panel .explainer_video .card .slick-slider .slick-slide .card.image {
      background: #fff;
      padding: 15px;
      height: 240px; }
      .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media {
        width: 100%;
        display: flex;
        padding: 10px;
        border-radius: 10px;
        background: #dde8fd;
        background: linear-gradient(180deg, #dde8fd 0%, white 49%, white 100%); }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .image img {
          width: 114px;
          border: 2px solid #fff;
          margin-right: 15px;
          margin-bottom: 10px; }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .image strong {
          color: #EE803D;
          display: flex;
          font-size: 13px;
          font-weight: 500; }
          .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .image strong small {
            font-size: 13px;
            color: #808080;
            position: absolute;
            bottom: 15px; }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .description {
          padding-right: 10px; }
          .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .description h5 {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px; }
          .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .description p {
            font-weight: 500;
            line-height: 22px; }
      .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .more {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px; }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .more:hover {
          text-decoration: underline; }
    .content-panel .explainer_video .card .slick-slider .slick-arrow {
      z-index: 1; }
    .content-panel .explainer_video .card .slick-slider .slick-prev {
      left: 0; }
    .content-panel .explainer_video .card .slick-slider .slick-next {
      right: 0; }

.incentive_cal {
  height: 100%;
  max-height: 760px; }
  .incentive_cal .card {
    box-shadow: 0px 0px 16px #3469CB29;
    background: #001458;
    color: #fff;
    border-radius: 16px;
    min-height: 300px;
    height: 92%; }
    .incentive_cal .card .ul {
      margin-top: 15px; }
      .incentive_cal .card .ul .li {
        min-height: 235px; }
        .incentive_cal .card .ul .li .slick-slider .slick-list .slick-slide .slide_img {
          text-align: center; }
          .incentive_cal .card .ul .li .slick-slider .slick-list .slick-slide .slide_img .imgDiv img {
            margin: auto; }
          .incentive_cal .card .ul .li .slick-slider .slick-list .slick-slide .slide_img label {
            margin-top: 15px;
            display: block; }
        .incentive_cal .card .ul .li form {
          background: none;
          max-width: 80%;
          width: 100%;
          text-align: center;
          margin: auto; }
          .incentive_cal .card .ul .li form div.hide {
            display: none; }
          .incentive_cal .card .ul .li form .form-group {
            margin-bottom: 1.5rem; }
            .incentive_cal .card .ul .li form .form-group label.MuiFormLabel-root {
              color: #fff; }
            .incentive_cal .card .ul .li form .form-group .MuiInput-underline .MuiInputBase-input {
              color: #fff; }
            .incentive_cal .card .ul .li form .form-group .MuiInput-underline::before {
              border-bottom: 1px solid rgba(255, 255, 255, 0.42); }
            .incentive_cal .card .ul .li form .form-group .MuiInput-underline:after {
              border-bottom: 2px solid #fff; }
          .incentive_cal .card .ul .li form button {
            width: 125px; }
            .incentive_cal .card .ul .li form button.MuiButton-root.MuiButton-containedPrimary {
              background: #F99746; }
              .incentive_cal .card .ul .li form button.MuiButton-root.MuiButton-containedPrimary:hover {
                background: #ED7D2B; }
            .incentive_cal .card .ul .li form button.MuiButton-root.MuiButton-containedSecondary {
              background: #161840; }
              .incentive_cal .card .ul .li form button.MuiButton-root.MuiButton-containedSecondary:hover {
                background: #101230; }
          .incentive_cal .card .ul .li form .needHave .heading {
            position: relative;
            margin-bottom: 10px; }
            .incentive_cal .card .ul .li form .needHave .heading span {
              text-transform: uppercase;
              font-size: 14px;
              font-weight: 500;
              position: relative;
              background: #4F527C;
              z-index: 1;
              padding: 0 5px; }
            .incentive_cal .card .ul .li form .needHave .heading:after {
              height: 1px;
              background: #fff;
              position: absolute;
              top: 8px;
              content: "";
              left: 0;
              right: 0; }
          .incentive_cal .card .ul .li form .needHave ul.list {
            list-style-type: none;
            display: table;
            width: 100%;
            border-spacing: 2px; }
            .incentive_cal .card .ul .li form .needHave ul.list li {
              background: rgba(255, 255, 255, 0.2);
              border-radius: 8px;
              padding: 10px;
              display: table-cell;
              width: 33.33%;
              text-align: left;
              font-size: 16px;
              padding-top: 30px; }
              .incentive_cal .card .ul .li form .needHave ul.list li label.text {
                display: block;
                font-size: 11px;
                margin-top: 3px; }
          .incentive_cal .card .ul .li form .needHave .amount {
            font-size: 18px;
            margin: 15px 0; }
            .incentive_cal .card .ul .li form .needHave .amount i.fa {
              font-size: 11px; }
            .incentive_cal .card .ul .li form .needHave .amount small {
              display: inline; }
    .incentive_cal .card small {
      text-align: center;
      display: block; }
    .incentive_cal .card .MuiCardContent-root {
      height: 100%; }
      .incentive_cal .card .MuiCardContent-root::-webkit-scrollbar {
        display: none; }
      .incentive_cal .card .MuiCardContent-root .incentive-calculator-section {
        height: 100%;
        position: relative; }
        .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .MuiAppBar-colorPrimary {
          background: #868CF1;
          border-radius: 20px;
          max-width: 100%;
          width: 100%;
          height: 40px; }
          .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .MuiAppBar-colorPrimary .MuiTabs-root {
            min-height: 40px;
            position: absolute;
            max-width: 100%;
            width: 100%;
            top: 0; }
            .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .MuiAppBar-colorPrimary .MuiTabs-root .MuiTab-root {
              min-height: 40px;
              text-transform: capitalize;
              font-weight: bold;
              width: 50%;
              opacity: 1; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .MuiAppBar-colorPrimary .MuiTabs-root .MuiTab-root.MuiTab-textColorInherit.Mui-selected {
                background: #fff;
                border-radius: 20px;
                color: #273A59;
                text-transform: capitalize; }
            .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .MuiAppBar-colorPrimary .MuiTabs-root .PrivateTabIndicator-colorSecondary-71 {
              display: none; }
        .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel {
          height: 100%; }
          .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel > div {
            position: relative;
            height: 100%; }
            .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel > div .tab-panel-content {
              height: 83%;
              overflow-y: auto; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel > div .tab-panel-content::-webkit-scrollbar {
                display: none; }
          .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline {
            flex-direction: column-reverse; }
            .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item {
              height: 100%;
              align-items: flex-end; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .MuiTimelineSeparator-root, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .MuiTimelineSeparator-root {
                flex-direction: column-reverse; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .MuiTimelineSeparator-root .timeline-separator-dot, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .MuiTimelineSeparator-root .timeline-separator-dot {
                  border: 0;
                  box-shadow: none; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .MuiTimelineSeparator-root .timeline-separator-connector, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .MuiTimelineSeparator-root .timeline-separator-connector {
                  height: 100px;
                  border: 2px dashed #F99746;
                  background: transparent; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item h4, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item h4 {
                color: #fff;
                font-size: 20px; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item.milestone-locked, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item.milestone-locked {
                flex-direction: row-reverse; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item.milestone-locked .timeline-separator-dot, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item.milestone-locked .timeline-separator-dot {
                  position: relative; }
                  .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item.milestone-locked .timeline-separator-dot::before, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item.milestone-locked .timeline-separator-dot::before {
                    content: "";
                    background: url(/images/icon-locked.svg) no-repeat center/contain;
                    position: absolute;
                    bottom: -6px;
                    left: 50%;
                    height: 20px;
                    width: 20px;
                    transform: translate(-50%, 0px); }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item.milestone-achieved .timeline-separator-dot, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item.milestone-achieved .timeline-separator-dot {
                position: relative; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item.milestone-achieved .timeline-separator-dot::before, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item.milestone-achieved .timeline-separator-dot::before {
                  content: "";
                  background: url(/images/icon-achieved.svg) no-repeat center/contain;
                  position: absolute;
                  bottom: -6px;
                  left: 50%;
                  height: 20px;
                  width: 20px;
                  transform: translate(-50%, 0px); }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content {
                background: #FFFFFF 0% 0% no-repeat padding-box;
                box-shadow: 0px 3px 16px #3469cb29;
                border-radius: 8px;
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-around;
                padding: 14px 10px;
                position: relative;
                margin-left: -30px;
                margin-bottom: -47px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content img, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content img {
                  max-width: 18px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content::before, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content::before {
                  position: absolute;
                  content: "";
                  width: 0px;
                  height: 0px;
                  border-left: 32px solid #fff;
                  border-top: 39px solid transparent;
                  border-bottom: 40px solid transparent;
                  top: 50%;
                  transform: translate(0, -50%);
                  right: -31px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content > img, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content > img {
                  position: absolute;
                  right: 0;
                  top: 33px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content > div, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content > div {
                  text-align: left;
                  margin-right: 17px;
                  height: 60px;
                  width: 100%; }
                  .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content > div .label, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content > div .label {
                    font-size: 10px;
                    font-weight: bold;
                    color: #253858;
                    line-height: 13px; }
                    .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content > div .label span, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content > div .label span {
                      font-size: 14px;
                      line-height: 16px;
                      display: block; }
                  .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content > div .value, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content > div .value {
                    font-size: 10px;
                    font-weight: bold;
                    color: #1DD1A1;
                    line-height: 16px; }
                    .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-locked-content > div .value span, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-locked-content > div .value span {
                      font-size: 11px;
                      display: block; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-location-content, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-location-content {
                background: #FFFFFF 0% 0% no-repeat padding-box;
                box-shadow: 0px 3px 16px #3469cb29;
                border-radius: 8px;
                display: flex;
                padding: 14px 10px;
                position: relative;
                margin-left: -30px;
                margin-bottom: -15px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-location-content > div, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-location-content > div {
                  text-align: right;
                  margin-left: 25px; }
                  .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-location-content > div .label, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-location-content > div .label {
                    font-size: 10px;
                    font-weight: bold;
                    color: #253858;
                    line-height: 13px; }
                  .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-location-content > div .value, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-location-content > div .value {
                    font-size: 12px;
                    font-weight: bold;
                    color: #F99746;
                    line-height: 16px; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content {
                background: #CBFFED;
                text-align: right;
                border-radius: 4px;
                padding: 9px 5px;
                position: relative;
                margin-left: 10px;
                margin-bottom: -15px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content::before, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content::before {
                  position: absolute;
                  content: "";
                  width: 0px;
                  height: 0px;
                  border-right: 23px solid #CBFFED;
                  border-top: 22px solid transparent;
                  border-bottom: 23px solid transparent;
                  top: 50%;
                  transform: translate(0, -50%);
                  left: -22px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content .label, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content .label {
                  font-size: 10px;
                  font-weight: bold;
                  color: #253858;
                  line-height: 13px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content .value, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content .value {
                  font-size: 12px;
                  font-weight: bold;
                  color: #0F8D61;
                  line-height: 16px; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content-left, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content-left {
                background: #CBFFED;
                text-align: left;
                border-radius: 4px;
                padding: 9px 5px;
                position: relative;
                margin-left: 10px;
                margin-bottom: -15px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content-left::before, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content-left::before {
                  position: absolute;
                  content: "";
                  width: 0px;
                  height: 0px;
                  border-left: 23px solid #CBFFED;
                  border-top: 22px solid transparent;
                  border-bottom: 23px solid transparent;
                  top: 50%;
                  transform: translate(0, -50%);
                  right: -22px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content-left .label, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content-left .label {
                  font-size: 10px;
                  font-weight: bold;
                  color: #253858;
                  line-height: 13px; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .milestones-timeline .milestones-timeline-item .milestone-achieved-content-left .value, .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .set-goals-timeline .milestones-timeline-item .milestone-achieved-content-left .value {
                  font-size: 12px;
                  font-weight: bold;
                  color: #0F8D61;
                  line-height: 16px; }
          .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 8px;
            padding: 5px;
            text-align: CENTER;
            position: absolute;
            width: 100%;
            bottom: 30px; }
            .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer > div {
              display: flex;
              align-items: center;
              border: 2px dashed #ccc;
              padding: 8px;
              border-radius: 8px;
              text-align: left; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer > div img {
                margin-right: 12px; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer > div p.label {
                font-size: 10px;
                line-height: 16px;
                color: #253858;
                text-transform: uppercase;
                font-weight: bold; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer > div p.label span {
                  text-transform: capitalize;
                  font-weight: 400; }
              .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer > div p.description {
                font-size: 12px;
                line-height: 16px;
                color: #253858; }
                .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .disclaimer > div p.description span {
                  font-size: 14px;
                  font-weight: bold; }
          .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .note {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 8px;
            padding: 16px 0;
            text-align: CENTER;
            position: absolute;
            width: 100%;
            bottom: 30px; }
            .incentive_cal .card .MuiCardContent-root .incentive-calculator-section .tab-panel .note p {
              font-size: 14px;
              line-height: 19px;
              color: #253858;
              max-width: 200px;
              margin: 0 auto; }

.MuiTimelineItem-alignAlternate:nth-child(even) .MuiTimelineItem-content .milestone-achieved-content {
  background: #CBFFED;
  text-align: left !important;
  border-radius: 4px;
  padding: 9px 5px;
  position: relative;
  margin-left: 10px;
  margin-bottom: -15px; }
  .MuiTimelineItem-alignAlternate:nth-child(even) .MuiTimelineItem-content .milestone-achieved-content::before {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    border-left: 23px solid #CBFFED !important;
    border-right: unset !important;
    border-top: 22px solid transparent;
    border-bottom: 23px solid transparent;
    top: 50%;
    transform: translate(0, -50%);
    right: -22px !important;
    left: unset !important; }
  .MuiTimelineItem-alignAlternate:nth-child(even) .MuiTimelineItem-content .milestone-achieved-content .label {
    font-size: 10px;
    font-weight: bold;
    color: #253858;
    line-height: 13px; }
  .MuiTimelineItem-alignAlternate:nth-child(even) .MuiTimelineItem-content .milestone-achieved-content .value {
    font-size: 12px;
    font-weight: bold;
    color: #0F8D61;
    line-height: 16px; }

.ReactModalPortal {
  z-index: 5100;
  position: relative; }

@media all and (max-width: 768px) {
  .content-panel .main-slider .slick-slider .slick-slide .card {
    min-height: 244px; }
    .content-panel .main-slider .slick-slider .slick-slide .card.reward {
      padding: 25px; }
      .content-panel .main-slider .slick-slider .slick-slide .card.reward img {
        display: none; }
      .content-panel .main-slider .slick-slider .slick-slide .card.reward button.btn {
        margin-top: 0; }
    .content-panel .main-slider .slick-slider .slick-slide .card .carousel-caption p {
      font-size: 13px; }
    .content-panel .main-slider .slick-slider .slick-slide .card.ceo_msge .MuiCardContent-root {
      margin-top: 0; }
  .content-panel .leaderboard .slick-slider {
    min-height: 240px; }
  .content-panel .gallery .card .slick-slider .slick-slide .card p {
    font-size: 13px; }
  .content-panel .explainer_video .card .slick-slider .slick-slide .card.image {
    min-height: 270px; }
    .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media {
      flex-direction: column; }
      .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .image img {
        width: 80px;
        float: left; }
      .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .image strong {
        display: grid;
        width: auto; }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .image strong small {
          clear: both;
          display: table-caption;
          position: relative;
          bottom: inherit; }
      .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .description {
        padding-right: 0; }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .description h5 {
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 10px; }
        .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .media .description p {
          line-height: inherit;
          font-size: 13px; }
    .content-panel .explainer_video .card .slick-slider .slick-slide .card.image .more {
      position: inherit;
      right: inherit;
      bottom: inherit;
      font-size: 12px;
      float: right; } }

@media all and (max-width: 600px) {
  .content-panel .main-slider .slick-slider .slick-slide .banner {
    padding: 15px; }
    .content-panel .main-slider .slick-slider .slick-slide .banner.slide1 {
      background-size: contain; }
    .content-panel .main-slider .slick-slider .slick-slide .banner.slide2 {
      background-size: contain; }
    .content-panel .main-slider .slick-slider .slick-slide .banner.slide3 {
      background: linear-gradient(270deg, #15C78B 0%, #0187C4 100%); }
  .content-panel .main-slider .slick-slider .slick-slide .card.ceo_msge .MuiCardContent-root .image {
    display: none; }
  .content-panel .main-slider .slick-slider .slick-slide .card.ceo_msge .MuiCardContent-root .carousel-caption {
    width: 100%; } }

.set-goal-popup-wrapper .MuiDialog-paperFullWidth {
  border-radius: 8px;
  max-width: 672px !important; }
  .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content {
    background: transparent linear-gradient(302deg, #424770 0%, #696694 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 16px #86868629;
    border-radius: 8px; }
    .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form p {
      color: #FFFFFF;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 24px; }
    .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form .form .form-group .MuiFormControl-fullWidth {
      margin-bottom: 24px; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form .form .form-group .MuiFormControl-fullWidth .MuiInputLabel-formControl {
        color: #fff; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form .form .form-group .MuiFormControl-fullWidth .MuiInputBase-root {
        color: #fff;
        font-size: 24px; }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form .form .form-group .MuiFormControl-fullWidth .MuiInputBase-root.MuiInput-underline:before, .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form .form .form-group .MuiFormControl-fullWidth .MuiInputBase-root.MuiInput-underline:after {
          border-bottom-color: #fff; }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-form .form .form-group .MuiFormControl-fullWidth .MuiInputBase-root.MuiInput-underline:hover:not(.Mui-disabled):before {
          border-bottom-color: #fff; }
    .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-run-rate-wrapper {
      background: #2a2c57;
      border-radius: 8px;
      padding: 3px; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-run-rate-wrapper .required-run-rate-content {
        border: 0.800000011920929px dashed #5D73E5;
        border-radius: 8px;
        padding: 8px;
        display: flex;
        justify-content: space-between; }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-run-rate-wrapper .required-run-rate-content > div {
          margin-left: 10px; }
          .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-run-rate-wrapper .required-run-rate-content > div .heading {
            color: #F9BB46;
            text-transform: uppercase;
            font-size: 10px;
            line-height: 16px;
            font-weight: 900; }
          .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-run-rate-wrapper .required-run-rate-content > div .description {
            color: #fff;
            font-size: 12px;
            line-height: 16px; }
            .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-run-rate-wrapper .required-run-rate-content > div .description span {
              color: #F9BB46;
              font-size: 14px;
              font-weight: bold; }
    .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper {
      margin: 23px auto 25px; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper > p {
        font-size: 12px;
        line-height: 16px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 16px;
        text-align: center;
        text-transform: uppercase;
        position: relative; }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper > p::before {
          content: "";
          background: #fff;
          height: 1px;
          width: 27%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(0, 50%); }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper > p:after {
          content: "";
          background: #fff;
          height: 1px;
          width: 27%;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(0, 50%); }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper .required-details-content {
        display: flex;
        align-items: center;
        justify-content: space-between; }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper .required-details-content .details {
          background: #6f709b;
          border-radius: 8px;
          width: 100%;
          padding: 16px 0px 26px 8px;
          max-width: 104px; }
          .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper .required-details-content .details p.heading {
            font-size: 10px;
            line-height: 13px;
            color: #fff;
            font-weight: bold;
            margin-bottom: 4px; }
          .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .required-details-wrapper .required-details-content .details .description {
            font-size: 16px;
            line-height: 23px;
            color: #fff;
            font-weight: 500; }
    .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .set-goal-as-wrapper {
      background: #2a2c57;
      border-radius: 8px;
      padding: 9px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .set-goal-as-wrapper .label {
        font-size: 14px;
        line-height: 19px;
        color: #fff;
        font-weight: 500; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .set-goal-as-wrapper .goal {
        font-size: 24px;
        line-height: 32px;
        color: #fff;
        font-weight: 400; }
        .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-details .set-goal-as-wrapper .goal span {
          font-size: 16px;
          line-height: 21px;
          opacity: 0.6;
          text-decoration: line-through;
          display: inherit;
          text-align: right; }
    .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-buttons {
      text-align: center; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-buttons .disclaimer {
        font-size: 14px;
        line-height: 19px;
        color: #fff;
        font-weight: 400;
        margin-bottom: 14px; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-buttons .buttons .set-goal {
        background: #F99746 0% 0% no-repeat padding-box;
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        max-width: 158px;
        width: 100%;
        margin-right: 8px; }
      .set-goal-popup-wrapper .MuiDialog-paperFullWidth .set-goal-popup-content .set-goal-popup-content-text .set-goal-container .set-goal-buttons .buttons .cancel {
        border: 1px solid #F99746;
        font-weight: bold;
        border-radius: 8px;
        color: #F99746;
        max-width: 158px;
        width: 100%;
        margin-right: 8px; }

.MuiTabs-indicator {
  display: none !important; }

.last-login {
  background: #c8dcfa 0% 0% no-repeat padding-box;
  border-radius: 22px;
  opacity: 1;
  position: absolute;
  bottom: 0;
  padding: 15px;
  width: 191px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  display: none; }
  .last-login ul {
    margin: 0;
    padding: 0;
    color: #495973; }
    .last-login ul li {
      padding: 5px 8px;
      list-style: none; }
      .last-login ul li span {
        font-size: 11px;
        font-weight: 500; }
      .last-login ul li p {
        font-size: 12px;
        margin: 0; }
      .last-login ul li a {
        color: #414141; }

.table-wrapper {
  box-shadow: 0px 0px 3px #00000029;
  border-radius: 4px;
  display: block; }
  @media screen and (max-width: 960px) {
    .table-wrapper {
      display: none; } }

.table {
  background-color: #ffffff; }
  .table .table-content-heading {
    background-color: transparent; }
    .table .table-content-heading .table-heading {
      text-align: left;
      padding: 16px 40px;
      color: #000;
      font-weight: normal;
      border-bottom: none;
      text-align: center;
      font-size: 12px; }
  .table .table-content-body {
    background: #ffffff; }
    .table .table-content-body tr:nth-of-type(odd) {
      background-color: #FAFAFA; }
    .table .table-content-body .table-cell {
      text-align: left;
      padding: 9px 40px;
      font-weight: 400;
      border-bottom: none;
      text-align: center;
      font-size: 12px;
      color: #808080; }
      .table .table-content-body .table-cell a h6 {
        color: #6DD1D6; }
      .table .table-content-body .table-cell p {
        font-size: 12px;
        color: #808080; }
        .table .table-content-body .table-cell p svg {
          width: 13px;
          height: 13px;
          margin-right: 5px; }

.main-cards {
  display: flex;
  padding-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center; }
  @media (min-width: 992px) {
    .main-cards {
      justify-content: flex-start; } }
  .main-cards .main-card {
    flex-basis: 51%;
    color: #ffffff;
    padding: 16px 0;
    border-radius: 10px;
    margin-bottom: 16px;
    background: url(/images/cardBg.png) no-repeat 100%/cover; }
    .main-cards .main-card p, .main-cards .main-card h2 {
      color: #ffffff; }
    .main-cards .main-card > div {
      padding: 0 16px; }
    @media (min-width: 600px) {
      .main-cards .main-card {
        flex-basis: 30%;
        margin-right: 16px; } }
    @media (min-width: 992px) {
      .main-cards .main-card {
        max-width: 19%; } }
  .main-cards .main-card-footer {
    margin-left: 0;
    padding: 10px 0 0; }

.data-card {
  flex-basis: 100%;
  margin: 10px; }
  @media (min-width: 600px) {
    .data-card {
      flex-basis: 45%; } }
  @media (min-width: 992px) {
    .data-card {
      flex-basis: 30%; } }
  .data-card .data-card-content {
    padding: 16px 16px 0;
    counter-reset: serial-number; }
    .data-card .data-card-content .data-card-content-row {
      padding-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start; }
      .data-card .data-card-content .data-card-content-row > div {
        flex-basis: 50%; }
      .data-card .data-card-content .data-card-content-row .s-no h6 {
        display: inline-block;
        background: #e4e4e4;
        padding: 6px 8px;
        border-radius: 50%; }
      .data-card .data-card-content .data-card-content-row .status {
        text-align: right; }
      .data-card .data-card-content .data-card-content-row .labelTitle {
        font-size: 12px; }
      .data-card .data-card-content .data-card-content-row .profile-title {
        font-weight: 400; }
      @media (min-width: 992px) {
        .data-card .data-card-content .data-card-content-row {
          margin-bottom: 16px; } }
  .data-card .link-name {
    justify-content: flex-end; }
    .data-card .link-name a {
      color: #6DD1D6;
      font-weight: bold; }

.app-bar {
  box-shadow: none !important;
  background: transparent !important; }
  .app-bar .tabs {
    padding: 0;
    border-bottom: 1px solid #e4e4e4;
    margin: 0 8px;
    min-height: 37px; }
    .app-bar .tabs > div > span {
      display: none; }
    @media (min-width: 992px) {
      .app-bar .tabs {
        margin: 0;
        width: 670px; } }
    .app-bar .tabs div:nth-child(1), .app-bar .tabs div:nth-child(4) {
      color: #495973; }
    .app-bar .tabs .tab {
      text-transform: capitalize;
      min-width: 140px;
      font: 400 16px/20px Lato;
      color: #495973;
      min-height: 37px; }
      .app-bar .tabs .tab.active-tab {
        border-bottom: 2px solid #6DD1D6;
        color: #6DD1D6; }

.tab-panel {
  padding: 0; }
  .tab-panel > div {
    padding: 8px 0 !important; }

.search-wrapper {
  display: flex;
  align-items: flex-end;
  flex-direction: column; }
  @media (min-width: 960px) {
    .search-wrapper {
      display: block; } }
  @media (min-width: 960px) {
    .search-wrapper .search-box {
      max-width: auto; } }
  .search-wrapper .search-input {
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0; }
    .search-wrapper .search-input div:hover:before {
      display: none; }

.expansion-panel {
  background: #FAFAFA !important;
  margin: 0 !important; }
  .expansion-panel > div[aria-expanded="true"] {
    background: #ffffff;
    border-radius: 4px; }
    .expansion-panel > div[aria-expanded="true"] span:first-child svg {
      display: none; }
    .expansion-panel > div[aria-expanded="true"] span:first-child:after {
      content: '\f068';
      font-family: 'FontAwesome';
      width: 24px;
      height: 24px;
      display: inline-block;
      font-size: 14px;
      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      line-height: 24px; }
    .expansion-panel > div[aria-expanded="true"] .heading {
      color: #495973; }
  .expansion-panel > div:nth-child(2) {
    background: #ffffff;
    border-radius: 4px; }
  .expansion-panel > div span:first-child {
    border: 1px solid #6DD1D6;
    border-radius: 50%;
    color: #6DD1D6; }
  .expansion-panel > div .heading {
    color: #6DD1D6;
    font: 500 16px/20px Lato; }

.drawer > div {
  top: 65px;
  width: 230px; }
  @media screen and (max-width: 660px) {
    .drawer > div {
      top: 57px; } }
  .drawer > div .drawer-header {
    display: flex;
    align-items: center;
    padding: 0 5px; }
    .drawer > div .drawer-header svg {
      color: #495973; }
    .drawer > div .drawer-header p {
      font-weight: bold;
      color: #495973; }

.drawer .filters .form-control {
  padding: 6px 0;
  min-width: 190px;
  background: #ffffff; }
  .drawer .filters .form-control .select {
    line-height: 0.3;
    font-size: 14px; }
  .drawer .filters .form-control label[data-shrink='true'] {
    transform: translate(14px, 0px) scale(0.75); }

.drawer .filter-buttons {
  padding: 0px 9px 15px; }
  .drawer .filter-buttons .grey-button {
    display: inline-block;
    padding: 5px 10px;
    background: #D1D1D1;
    color: #495973;
    border-radius: 5px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    min-width: 100px; }
  .drawer .filter-buttons .secondary-button {
    display: inline-block;
    padding: 5px 10px;
    background: #6DD1D6;
    color: #ffffff;
    border-radius: 5px;
    text-transform: uppercase;
    margin: 0;
    min-width: 100px; }

.modal {
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (min-width: 960px) {
    .modal {
      display: none; } }
  .modal .modal-content {
    background: linear-gradient(to bottom, #fcfff4 50%, #dfe5d7 80%, #b3bead 100%);
    width: 100%;
    padding: 16px 0 0;
    overflow-y: auto;
    max-height: 100vh; }
    @media screen and (min-width: 600px) {
      .modal .modal-content {
        width: 65%; } }

.menu-button:hover {
  background-color: transparent !important; }

.menu-button .user-name {
  text-transform: capitalize;
  font-weight: 500;
  margin: 10px; }
  @media screen and (max-width: 660px) {
    .menu-button .user-name span {
      display: none; } }
  .menu-button .user-name i {
    margin-left: 10px; }
    @media screen and (max-width: 660px) {
      .menu-button .user-name i {
        margin-left: 2px; } }

.notifications {
  margin: 0 20px; }

.notification-badge {
  position: relative;
  padding: 2px 6px;
  background-color: #f30707;
  color: #f4f6f8;
  bottom: 15px;
  left: 50px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bolder; }

.notification-menu .new-notification {
  background-color: #eafcfd;
  margin: 5px 5px;
  border-radius: 4px; }

.notification-menu .notification {
  margin: 5px 5px;
  border-radius: 4px; }

.notification-menu .label {
  font-weight: 600; }

.notification-menu .description {
  font-size: 12px; }

.tool-bar {
  padding-left: 0 !important; }

.MuiList-padding {
  padding: 0 !important; }

.Component-paper-32 {
  border: 1px solid transparent;
  border-radius: 0px 0px 20px 20px !important;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 26px #0000001a;
  margin: 5px 0 0; }
  .Component-paper-32 li {
    padding: 5px 15px;
    line-height: 10px;
    min-height: 10px;
    background-color: #fff; }
    .Component-paper-32 li:focus {
      background: #cfcfcf;
      color: #00458b; }

html {
  scroll-behavior: smooth; }

.full-width {
  width: 100%; }

.no-padding {
  padding: 0; }

.clear {
  clear: both; }

.tab-view {
  background-color: #fff;
  margin: 2em 0 0; }
  .tab-view .MuiTabs-flexContainer {
    background-color: #fff; }
  .tab-view .PrivateTabIndicator-colorPrimary-36 {
    background-color: #4669d6 !important; }

.month-view {
  margin: 15px 5px 10px;
  display: inline-block;
  border: none;
  padding: 8px;
  border-radius: 5px;
  background: transparent; }
  .month-view select {
    border: transparent;
    color: #0065FF;
    font-size: 13px;
    width: 80px;
    background: transparent; }
    .month-view select:focus {
      outline: none; }
  .month-view .option-bg {
    background-color: #fff;
    color: #253858; }
  .month-view i {
    color: #0065FF;
    font-size: 14px; }

.mt-1 {
  margin-top: 1em; }

.mt-2 {
  margin-top: 1.5em; }

.mt-3 {
  margin-top: 2em; }

.mb-3 {
  margin-bottom: 3em; }

h6 {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 19px;
  color: #253858;
  padding: 0 0 0 5px; }
  @media screen and (max-width: 767px) {
    h6 {
      font-size: 16px;
      padding: 0;
      line-height: 21px;
      margin-bottom: 12px; } }
  h6 span {
    font-size: 11px;
    color: #808080;
    display: block;
    font-weight: 400; }
    @media screen and (max-width: 767px) {
      h6 span {
        font-size: 12px; } }

.ranking-box .MuiExpansionPanelSummary-expandIcon {
  display: none; }

.ranking-box .MuiExpansionPanelSummary-content {
  display: block;
  padding: 0 0 15px; }

.ranking-box h5 {
  color: #00458b;
  font-size: 20px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 1px; }
  .ranking-box h5 span {
    margin: 3px 0 0;
    display: block;
    letter-spacing: 0; }

.ranking-box ul {
  width: 100%; }
  .ranking-box ul li {
    width: 84%;
    display: inline-block; }
    .ranking-box ul li strong {
      display: block;
      color: #00458b;
      font-size: 14px; }
    .ranking-box ul li span {
      color: #00458b;
      font-size: 10px; }
    .ranking-box ul li:last-child {
      text-align: right;
      width: 16%; }

.ranking-box .MuiExpansionPanelDetails-root {
  background-color: #0065ff;
  box-shadow: 0 7px 5px 8px #dad4d4e8;
  padding: 12px 16px 6px;
  border-radius: 20px 20px 0 0; }

.ranking-box .progress-bar {
  background-color: #b3d4ff;
  position: relative;
  margin: 15px 0 0;
  width: 100%;
  height: 8px;
  border-radius: 15px; }
  .ranking-box .progress-bar .status-bar {
    background-color: #0065ff;
    width: 35%;
    left: 0;
    top: 0px;
    display: block;
    height: 8px;
    border-radius: 15px;
    position: absolute; }
    .ranking-box .progress-bar .status-bar span {
      position: absolute;
      right: 0;
      top: -16px;
      color: #2699fb;
      font-size: 10px; }
  .ranking-box .progress-bar ul {
    padding: 8px 0 0; }
    .ranking-box .progress-bar ul li {
      display: inline-block;
      width: 50%; }
      .ranking-box .progress-bar ul li:last-child {
        text-align: right; }

.ranking-data {
  box-shadow: 0px 0px 16px #00000014;
  position: relative;
  margin: 0 0 0;
  border-radius: 18px; }
  .ranking-data .rank-box {
    position: relative;
    background: #fff url(/images/ranking-block-bg.svg) no-repeat top right;
    border-radius: 18px;
    padding: 15px 0 15px 15px;
    z-index: 99;
    left: 0;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      .ranking-data .rank-box {
        flex-direction: column; } }
    .ranking-data .rank-box h5 {
      color: #00458b;
      font-size: 20px;
      font-weight: 500;
      line-height: 12px;
      letter-spacing: 1px; }
      .ranking-data .rank-box h5 span {
        margin: 3px 0 0;
        display: block;
        letter-spacing: 0; }
    .ranking-data .rank-box .rank-box-left-section {
      width: 65%; }
      @media screen and (max-width: 768px) {
        .ranking-data .rank-box .rank-box-left-section {
          width: 100%; } }
      .ranking-data .rank-box .rank-box-left-section .name-description {
        margin: 10px 0 20px; }
        .ranking-data .rank-box .rank-box-left-section .name-description strong {
          display: block;
          color: #00458b;
          font-size: 24px;
          font-weight: 700;
          line-height: 31px;
          font-family: "Merriweather", serif; }
        .ranking-data .rank-box .rank-box-left-section .name-description span {
          color: #00458b;
          font-size: 10px;
          font-weight: 600; }
        .ranking-data .rank-box .rank-box-left-section .name-description p {
          color: #00458B;
          font-family: "Roboto", sans-serif;
          font-weight: 600;
          font-size: 12px; }
      .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-slide {
        padding: 0; }
        .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-slide .highlights-heading {
          color: #253858;
          font-size: 14px;
          font-weight: 600;
          line-height: 24px; }
        .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-slide .highlights-description {
          color: #253858; }
      .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-dots {
        text-align: left;
        bottom: -13px; }
        .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-dots li.slick-active button::before {
          background: #0065ff; }
        .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-dots li button:before {
          height: 3px; }
      .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar {
        margin: 47px 0 24px;
        position: relative;
        padding: 20px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-around; }
        .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar::before {
          content: '';
          background: #CCDBFF;
          width: 70%;
          height: 1px;
          position: absolute;
          top: 0;
          left: -15px; }
        .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar > div {
          width: 30%;
          text-align: center; }
          .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar > div .MuiFab-label {
            flex-direction: column; }
            .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar > div .MuiFab-label .ape-gained {
              color: #253858;
              font-size: 14px; }
            .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar > div .MuiFab-label .ape-left {
              color: #253858;
              font-size: 10px; }
        .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar p {
          font-size: 12px;
          line-height: 16px;
          color: #253858;
          width: 80%; }
          .ranking-data .rank-box .rank-box-left-section .total-ape-progress-bar p span {
            color: #1DD1A1;
            font-size: 16px; }
    .ranking-data .rank-box .rank-box-right-section {
      width: 33%;
      height: 202px; }
      @media screen and (max-width: 768px) {
        .ranking-data .rank-box .rank-box-right-section {
          width: 100%; } }
      .ranking-data .rank-box .rank-box-right-section ul {
        margin-top: 40px; }
        @media screen and (max-width: 768px) {
          .ranking-data .rank-box .rank-box-right-section ul {
            margin-top: 20px; } }
        .ranking-data .rank-box .rank-box-right-section ul li {
          background: url(/images/ranking-block-right-detail-bg.svg) no-repeat right;
          margin: 0 0 16px;
          list-style: none;
          padding: 15px 15px 15px 45px;
          position: relative; }
          @media screen and (max-width: 768px) {
            .ranking-data .rank-box .rank-box-right-section ul li {
              text-align: right; } }
          .ranking-data .rank-box .rank-box-right-section ul li::before {
            content: '';
            background: url(/images/icons/icon-rank.svg);
            position: absolute;
            height: 32px;
            width: 32px;
            left: 0;
            top: 50%;
            transform: translateY(-50%); }
            @media screen and (max-width: 768px) {
              .ranking-data .rank-box .rank-box-right-section ul li::before {
                left: auto;
                right: 55px; } }
          .ranking-data .rank-box .rank-box-right-section ul li .label {
            color: #6C5A42;
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            margin-bottom: 2px;
            display: block; }
            .ranking-data .rank-box .rank-box-right-section ul li .label h4 {
              font-size: 10px;
              font-weight: 100; }
          .ranking-data .rank-box .rank-box-right-section ul li .value {
            color: #253858;
            font-size: 18px;
            line-height: 24px;
            font-weight: bold; }
      .ranking-data .rank-box .rank-box-right-section .background-caricrature {
        background: url(/images/ranking-block-right-caricrature.svg) no-repeat right top;
        position: absolute;
        right: 5%;
        top: 20px;
        width: 84px;
        height: 202px; }
        @media screen and (max-width: 768px) {
          .ranking-data .rank-box .rank-box-right-section .background-caricrature {
            display: none; } }
    .ranking-data .rank-box .progress-bar {
      background-color: #b3d4ff;
      position: relative;
      margin: 24px 0 12px;
      width: 100%;
      height: 8px;
      border-radius: 15px; }
      .ranking-data .rank-box .progress-bar .status-bar {
        background-color: #0065ff;
        width: 35%;
        left: 0;
        top: 0px;
        display: block;
        height: 8px;
        border-radius: 15px;
        position: absolute; }
        .ranking-data .rank-box .progress-bar .status-bar span {
          position: absolute;
          right: 0;
          top: -16px;
          color: #2699fb;
          font-size: 10px;
          font-weight: 900; }
      .ranking-data .rank-box .progress-bar ul {
        width: 100%; }
        .ranking-data .rank-box .progress-bar ul li {
          display: inline-block;
          width: 50%; }
          .ranking-data .rank-box .progress-bar ul li:last-child {
            text-align: right; }
  .ranking-data .rank-box-inner {
    position: absolute;
    background: #0065ff;
    border-radius: 18px;
    padding: 15px;
    z-index: 98;
    top: 75px;
    left: 0;
    width: 100%;
    padding: 37px 10px 5px;
    margin: 20px 0; }
    .ranking-data .rank-box-inner ul {
      width: 100%;
      display: table; }
      .ranking-data .rank-box-inner ul li {
        position: relative;
        width: 72%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block; }
        .ranking-data .rank-box-inner ul li span {
          color: #fff;
          font-size: 10px; }
          .ranking-data .rank-box-inner ul li span img {
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px; }
        .ranking-data .rank-box-inner ul li:nth-child(1) span {
          padding-left: 25px; }
          .ranking-data .rank-box-inner ul li:nth-child(1) span.numbere {
            font-size: 11px;
            padding-left: 0;
            font-weight: 700;
            line-height: 16px; }
        .ranking-data .rank-box-inner ul li:last-child {
          width: 28%;
          text-align: right;
          float: right; }
          .ranking-data .rank-box-inner ul li:last-child span {
            font-size: 12px; }
            .ranking-data .rank-box-inner ul li:last-child span button {
              background-color: transparent;
              border: transparent;
              color: #fff;
              cursor: pointer;
              font-weight: 700;
              line-height: 16px; }
              .ranking-data .rank-box-inner ul li:last-child span button:focus {
                outline: none; }
            .ranking-data .rank-box-inner ul li:last-child span i {
              font-size: 14px; }

.critiria-popup {
  position: relative; }
  .critiria-popup .close-btn {
    position: absolute;
    top: 3px;
    right: 0; }
    .critiria-popup .close-btn svg {
      font-size: 0.7em; }
  .critiria-popup p {
    color: #253858;
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 20px; }
  .critiria-popup li {
    /*list-style: none;
color: #253858;
font-size: 13px;
line-height: 18px;
margin-bottom: 20px;
list-style: none;
padding: 0 8px;
text-align: left;
color: #253858;
font-size: 13px;
line-height: 18px;
margin-bottom: 20px;*/ }
  .critiria-popup .slabs-box {
    border: 1px solid #ccc;
    width: 300px;
    max-width: 100%;
    box-shadow: 0 0rem 0.4rem rgba(0, 0, 0, 0.15);
    margin: 0 auto; }
    .critiria-popup .slabs-box ul li {
      list-style: none;
      border-bottom: 1px solid #ccc;
      padding: 0 8px;
      text-align: center;
      background: linear-gradient(to right, #2775ff, #7202bb); }
      .critiria-popup .slabs-box ul li h5 {
        position: relative;
        color: #fff;
        font-size: 14px;
        padding: 10px 0 5px; }
        .critiria-popup .slabs-box ul li h5:after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          top: 100%;
          height: 2px;
          width: 50%;
          background: #275efe; }
      .critiria-popup .slabs-box ul li p {
        font-size: 12px;
        margin: 5px 0;
        color: #fff; }
  .critiria-popup .popup-inner-box {
    width: 90%;
    max-width: 100%;
    margin: 0 auto; }
  .critiria-popup .payoutClawPopup {
    width: 100% !important; }
    .critiria-popup .payoutClawPopup .topPerformance table {
      font-family: roboto;
      border-collapse: collapse;
      width: 100%; }
    .critiria-popup .payoutClawPopup .topPerformance th {
      background-color: #F2F7FF;
      padding: 10px 19px;
      font: normal normal 600 11px/14px Roboto;
      letter-spacing: 0px;
      color: #050505;
      opacity: 0.6;
      text-align: center; }
    .critiria-popup .payoutClawPopup .topPerformance td {
      border-top: 1px solid #F2F7FF;
      text-align: center;
      padding: 23px;
      font: normal normal normal 12px/14px Roboto;
      letter-spacing: 0px;
      color: #050505;
      opacity: 1;
      position: relative; }

.criteriaHtml li {
  color: #253858;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 20px;
  list-style: none; }

.highlights h6 {
  margin: 0; }

.highlights .highlights-card {
  box-shadow: 0px 0px 16px #00000014;
  border-radius: 18px;
  background: #ffe8c4 url(/images/cureved_bg.svg) no-repeat center right;
  height: 96px;
  margin: 10px 0 0; }
  .highlights .highlights-card ul {
    padding: 7px 0; }
    .highlights .highlights-card ul li {
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      width: 70%; }
      .highlights .highlights-card ul li strong {
        color: #c47800;
        font-size: 20px;
        font-weight: 500;
        padding-right: 5px; }
        .highlights .highlights-card ul li strong span {
          font-size: 12px;
          display: inline;
          padding: 0 3px; }
      .highlights .highlights-card ul li:last-child {
        width: 30%;
        text-align: right;
        padding: 0; }

.leader-board .lader-ranking {
  padding: 15px 15px 10px;
  min-height: 328px; }
  @media screen and (max-width: 767px) {
    .leader-board .lader-ranking {
      min-height: auto; } }
  .leader-board .lader-ranking li {
    display: inline-block;
    width: 50%;
    color: #253858;
    vertical-align: middle; }
    .leader-board .lader-ranking li strong {
      display: block;
      font-size: 11px;
      font-weight: 900;
      line-height: 13px; }
      @media screen and (max-width: 767px) {
        .leader-board .lader-ranking li strong {
          font-size: 12px;
          line-height: 16px; } }
    .leader-board .lader-ranking li span {
      font-size: 12px;
      font-weight: 500;
      display: block; }
      .leader-board .lader-ranking li span img {
        padding-left: 5px;
        vertical-align: text-top;
        padding-bottom: 2px; }
    .leader-board .lader-ranking li:nth-child(even) {
      text-align: right; }
    .leader-board .lader-ranking li:nth-child(odd) strong {
      color: #253858; }
  .leader-board .lader-ranking div {
    margin: 0;
    padding: 10px; }
    .leader-board .lader-ranking div.active {
      background: #0065ff;
      border-radius: 8px;
      margin: 0 0 0.5em; }
      @media screen and (max-width: 767px) {
        .leader-board .lader-ranking div.active {
          background: transparent linear-gradient(109deg, #0052C1 0%, #F45E9D 100%) 0% 0% no-repeat padding-box;
          padding: 10px 13px; } }
      .leader-board .lader-ranking div.active li {
        color: #fff; }
        .leader-board .lader-ranking div.active li:nth-child(odd) strong {
          color: #fff; }

.incentive .incentive-box {
  padding: 15px 15px;
  min-height: 250px; }
  @media screen and (max-width: 767px) {
    .incentive .incentive-box {
      min-height: auto; }
      .incentive .incentive-box h6 {
        margin-bottom: 5px; } }
  .incentive .incentive-box li {
    display: inline-block;
    width: 100%;
    color: #050505;
    margin: 6px 0;
    letter-spacing: 0px; }
    @media screen and (max-width: 767px) {
      .incentive .incentive-box li {
        margin: 15px 0px 0px; } }
    .incentive .incentive-box li strong {
      display: block;
      font-size: 18px;
      font-weight: 500;
      color: #273a59;
      float: right; }
      @media screen and (max-width: 767px) {
        .incentive .incentive-box li strong {
          font-size: 14px;
          color: #253858; } }
      .incentive .incentive-box li strong i {
        font-size: 16px; }
    .incentive .incentive-box li span {
      color: #808080;
      font-size: 11px;
      line-height: 26px;
      font-weight: 500;
      float: left; }
      @media screen and (max-width: 767px) {
        .incentive .incentive-box li span {
          font-size: 12px;
          color: #253858;
          line-height: 16px; } }
    .incentive .incentive-box li:nth-child(even) {
      text-align: right; }

.booking-table {
  margin: 1em 0; }
  @media screen and (max-width: 767px) {
    .booking-table button {
      margin-top: -40px !important;
      border: 1px solid #2595F5;
      border-radius: 25px;
      height: 32px;
      line-height: normal;
      padding: 0;
      min-width: 92px; }
      .booking-table button span {
        color: #2595F5 !important;
        margin-top: 1px !important; } }
  .booking-table h6 {
    display: block; }
    @media screen and (max-width: 767px) {
      .booking-table h6 {
        padding-left: 5px !important; } }
  .booking-table ul {
    display: table;
    padding: 10px 15px;
    width: 100%; }
    .booking-table ul li {
      font-size: 12px;
      font-weight: 600;
      display: table-cell;
      text-align: left;
      width: 10%;
      color: #808080; }
      .booking-table ul li span {
        display: none; }
      .booking-table ul li strong {
        font-weight: 500;
        position: relative;
        color: #273A59;
        font-size: 12px; }
        .booking-table ul li strong.weighted-price {
          cursor: pointer; }
        .booking-table ul li strong svg {
          font-size: 13px;
          margin: 2px 4px 0;
          position: absolute;
          color: #90bafb; }
      .booking-table ul li.booking-SNo {
        width: 6%; }
        @media screen and (max-width: 767px) {
          .booking-table ul li.booking-SNo {
            display: none; } }
    .booking-table ul.booking-table-head {
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0px 0px 16px #00000014; }
      .booking-table ul.booking-table-head li {
        font-weight: 900;
        font-size: 12px;
        line-height: 16px; }
    .booking-table ul.booking-table-body {
      background: #ffffff;
      margin: 5px 0 0; }
      @media screen and (max-width: 767px) {
        .booking-table ul.booking-table-body {
          border-radius: 8px;
          position: relative;
          padding: 15px 15px 4px !important;
          margin-bottom: 15px !important;
          box-shadow: 0px 3px 6px #3469CB29;
          -webkit-box-shadow: 0px 3px 6px #3469CB29; } }
      .booking-table ul.booking-table-body li {
        font-size: 12px;
        font-weight: 500;
        vertical-align: middle; }
        @media screen and (max-width: 767px) {
          .booking-table ul.booking-table-body li:nth-child(even) {
            text-align: left; }
          .booking-table ul.booking-table-body li:nth-child(n) {
            font-weight: 600;
            margin: 8px 0px; }
          .booking-table ul.booking-table-body li:nth-child(n) span {
            margin-top: 0px;
            line-height: 1.58; }
          .booking-table ul.booking-table-body li:nth-child(n) strong {
            font-size: 12.6px; }
          .booking-table ul.booking-table-body li:nth-child(2) {
            background: #CCD2FF;
            border-radius: 0px 8px;
            width: 120px;
            height: 24px;
            line-height: 24px;
            margin: auto;
            position: absolute;
            right: 0px;
            top: 0px;
            text-align: center !important; }
            .booking-table ul.booking-table-body li:nth-child(2) span {
              display: none; }
          .booking-table ul.booking-table-body li:nth-child(3) {
            margin: 0; }
          .booking-table ul.booking-table-body li:nth-child(3) span, .booking-table ul.booking-table-body li:nth-child(4) span {
            display: none; }
          .booking-table ul.booking-table-body li:nth-child(3) strong {
            font-size: 11px;
            font-weight: 500 !important; }
          .booking-table ul.booking-table-body li:nth-child(4) {
            text-align: left;
            margin: 0px 0px 5px;
            display: block; }
          .booking-table ul.booking-table-body li:nth-child(4) strong {
            font-size: 14px; }
          .booking-table ul.booking-table-body li:nth-child(5) {
            width: 44%;
            margin-bottom: 2px; }
          .booking-table ul.booking-table-body li:nth-child(6), .booking-table ul.booking-table-body li:nth-child(7) {
            width: 26%;
            white-space: nowrap;
            margin-bottom: 2px; }
          .booking-table ul.booking-table-body li:nth-child(8), .booking-table ul.booking-table-body li:nth-child(9) {
            padding-left: 0 !important;
            margin-left: 0 !important; } }
        .booking-table ul.booking-table-body li:nth-child(8) {
          padding-left: 2px; }
        .booking-table ul.booking-table-body li:nth-child(9) {
          padding-left: 6px; }
    .booking-table ul.body-table {
      height: 100px; }
  .booking-table .table-scroll {
    min-height: 260px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0 0 20px;
    margin: 10px 0 0; }
  .booking-table .tooltip-popup {
    background-color: #ffcccc;
    transition-duration: 2s; }
    .booking-table .tooltip-popup li {
      background-color: #ffcccc;
      display: block;
      list-style: none;
      position: relative;
      padding-left: 20px;
      width: 100%; }
      .booking-table .tooltip-popup li.yes::before {
        content: "\f00c";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: #28a745;
        font-size: 12px;
        padding-right: 0.5em;
        position: absolute;
        top: 4px;
        left: 0; }
      .booking-table .tooltip-popup li.no::before {
        content: "\f00d";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: #dc3545;
        font-size: 12px;
        padding-right: 0.5em;
        position: absolute;
        top: 4px;
        left: 0; }

.MuiAvatar-colorDefault {
  color: #414141 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  width: auto !important; }

@media all and (max-width: 1080px) and (min-width: 768px) {
  .incentive .incentive-box {
    padding: 12px 20px; } }

@media all and (max-width: 768px) {
  .criteria-slabs {
    width: 70%;
    border: 1px solid #050505;
    margin: 0px 15% !important;
    text-align: center;
    line-height: 22px !important; }
  .booking-table h6 {
    display: block; }
  .booking-table ul {
    border-radius: 18px; }
    .booking-table ul.booking-table-head {
      display: none; }
    .booking-table ul.booking-table-body {
      margin-bottom: 20px; }
      .booking-table ul.booking-table-body li.booking-SNo {
        width: 48%; }
    .booking-table ul li {
      display: inline-block;
      width: 48%; }
      .booking-table ul li strong {
        color: #273a59;
        font-weight: 600; }
      .booking-table ul li span {
        display: block;
        font-size: 10px; }
      .booking-table ul li:nth-child(even) {
        text-align: right;
        margin: 8px 5px; }
  .booking-table .table-scroll {
    height: 260px;
    overflow-y: auto;
    padding: 10px 0 20px; } }

.scrool-toll::-webkit-scrollbar-track {
  box-shadow: transparent;
  background-color: #fff; }

.scrool-toll::-webkit-scrollbar {
  width: 6px;
  background-color: #808080;
  height: 1px;
  border: 3px; }

.scrool-toll::-webkit-scrollbar-thumb {
  background-color: #808080; }

.textGrey {
  color: #050505 !important; }

.criteria-slabs {
  width: 60%;
  border: 1px solid #050505;
  margin: 0px 20% !important;
  text-align: center;
  line-height: 22px !important; }

/* Criteria HTML Style */
.block_container {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 20px 0; }

.table_hd {
  background: #0065ff;
  border-radius: 8px 8px 0 0;
  color: #fff;
  display: table;
  width: 100%; }

.table_hd > div {
  display: table-cell;
  width: 50%;
  padding: 10px 5px;
  font-size: 13px;
  box-sizing: border-box; }

.table_data {
  border-bottom: 1px solid #0662f6; }

.table_data > div.loop_box {
  display: table;
  padding: 0;
  margin: 0;
  width: 100%;
  border: 1px solid #0662f6;
  border-bottom: 0; }

.table_data > div.loop_box > div {
  display: table-cell;
  width: 50%;
  padding: 5px;
  font-size: 13px;
  border-right: 1px solid #0662f6;
  box-sizing: border-box; }

.table_data > div.loop_box > div:last-child {
  border-right: 0; }

.critiria-popup > ul {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0; }

.critiria-popup > ul li {
  margin: 0 0 0 20px;
  padding: 0 0 2px 0;
  list-style: decimal;
  font-size: 13px;
  color: #253858;
  line-height: 18px; }

.cursorPointer {
  cursor: pointer; }

.ancor {
  color: #0065ff !important; }

.payout .payout-box {
  padding: 15px 15px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0px 0px 16px #00000014;
  min-height: 328px; }
  @media screen and (max-width: 767px) {
    .payout .payout-box {
      border-radius: 8px;
      margin: 0px 12px;
      padding: 15px 15px 7px; } }
  .payout .payout-box li.firstbox {
    width: 100%;
    background-color: #cbffed;
    color: #55b795;
    display: inline-block; }
    .payout .payout-box li.firstbox strong {
      color: #0F8D61;
      font-size: 12px;
      font-weight: 700; }
    .payout .payout-box li.firstbox span {
      color: #0F8D61;
      font-size: 18px;
      text-align: center;
      padding-left: 0;
      font-weight: 600;
      width: 100%; }
  .payout .payout-box li {
    display: flex;
    width: 100%;
    color: #050505;
    padding: 6px;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0px;
    justify-content: space-between; }
    .payout .payout-box li strong {
      display: block;
      font-size: 18px;
      font-weight: 500;
      color: #273a59; }
      .payout .payout-box li strong i {
        font-size: 16px; }
    .payout .payout-box li span {
      color: #808080;
      font-size: 12px;
      line-height: 26px;
      font-weight: 500;
      display: inline-block;
      text-align: left;
      width: 55%;
      float: left;
      padding-left: 0px; }
      @media screen and (max-width: 767px) {
        .payout .payout-box li span {
          line-height: 1.5;
          white-space: nowrap;
          width: auto; } }
    .payout .payout-box li p {
      color: #273A59;
      font-size: 14px;
      line-height: 26px;
      font-weight: 500;
      text-align: right;
      padding-left: 20px;
      width: 45%;
      float: left; }
      @media screen and (max-width: 767px) {
        .payout .payout-box li p {
          width: 100%; } }
    .payout .payout-box li i {
      font-size: 15px;
      margin-left: 6px; }
    .payout .payout-box li i.fa.fa-info-circle {
      color: #808080; }
    .payout .payout-box li em {
      background-color: #0052cc;
      color: #ffffff;
      padding: 2px 4px;
      font-weight: 700;
      font-style: normal;
      font-size: 9px; }

.common-tooltip-popup {
  transition: 2s linear;
  -webkit-transition: 2s linear;
  color: #273A59;
  padding: 3px;
  text-align: center; }

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .firstbox {
    width: 100% !important;
    padding: 7px !important;
    margin-bottom: 16px;
    display: inline-block !important; }
  .payout .payout-box li {
    width: 100%;
    padding: 2px;
    color: #253858; }
    .payout .payout-box li span {
      width: 50%;
      float: none !important;
      padding-left: 0px;
      color: #253858; }
    .payout .payout-box li i.fa-info-circle {
      color: #808080 !important;
      vertical-align: middle; }
    .payout .payout-box li p {
      width: 50%; }
    .payout .payout-box li .ancor {
      color: #253858 !important; }
    .payout .payout-box li .ancor i {
      color: #808080 !important; }
  header .MuiIconButton-edgeStart {
    margin-left: 8px;
    padding: 8px; }
  header .MuiButtonBase-root.mobile-view {
    display: none; }
  .table-scroll {
    height: auto !important;
    width: 100%;
    padding: 10px 4px 0px !important;
    margin: 0px !important;
    max-height: 100% !important; } }

.UserHelp {
  position: fixed;
  bottom: 40px;
  z-index: 99;
  right: 40px; }

.UserHelpHoverText {
  position: fixed;
  bottom: 70px;
  z-index: 99;
  right: 120px;
  border: #003F9E;
  text-decoration-color: #00C417;
  font-size: 15px;
  color: white;
  background: #0065ff;
  border-radius: 0.5rem;
  padding: 5px 10px;
  font-weight: 500; }

.wrapperBG {
  background: #FAFAFA;
  background-image: linear-gradient(to bottom, #F2F7FF, #F2F7FF 29%, #fff 10%, #fff 63%, #FAFAFA 63%); }

.jag-ranking-data {
  box-shadow: 0px 0px 16px #00000014;
  position: relative;
  margin: 0 0 48px;
  border-radius: 18px; }
  .jag-ranking-data .rank-box {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    padding: 15px 15px 8px;
    z-index: 99;
    left: 0;
    top: 0; }
    .jag-ranking-data .rank-box h5 {
      color: #00458b;
      font-size: 20px;
      font-weight: 500;
      line-height: 12px;
      letter-spacing: 1px; }
      .jag-ranking-data .rank-box h5 span {
        margin: 3px 0 0;
        display: block;
        letter-spacing: 0; }
    .jag-ranking-data .rank-box ul {
      margin: 10px 0; }
      .jag-ranking-data .rank-box ul li {
        width: 66%;
        display: inline-block;
        vertical-align: top; }
        .jag-ranking-data .rank-box ul li strong {
          display: block;
          color: #00458b;
          font-size: 16px;
          font-weight: 700;
          line-height: 19px; }
        .jag-ranking-data .rank-box ul li span {
          color: #00458b;
          font-size: 12px;
          font-weight: 600; }
        .jag-ranking-data .rank-box ul li:last-child {
          text-align: right;
          width: 34%; }
    .jag-ranking-data .rank-box .gold {
      width: 100px;
      background: #FFF5E5 0% 0% no-repeat padding-box;
      border: 1px solid #EDC689;
      border-radius: 50px;
      opacity: 1;
      padding: 4px;
      text-align: center;
      text-transform: uppercase;
      color: #C47800;
      font-weight: 600;
      margin-top: 28px;
      font-size: 10px; }
      .jag-ranking-data .rank-box .gold img {
        vertical-align: text-top;
        margin-right: 7px; }
    .jag-ranking-data .rank-box .silver {
      width: 100px;
      background: #F2F2F2 0% 0% no-repeat padding-box;
      border: 1px solid #D1D1D1;
      border-radius: 50px;
      opacity: 1;
      padding: 4px;
      text-align: center;
      text-transform: uppercase;
      color: #9FA5AA;
      font-weight: 600;
      margin-top: 28px;
      font-size: 10px; }
      .jag-ranking-data .rank-box .silver img {
        vertical-align: text-top;
        margin-right: 7px; }
    .jag-ranking-data .rank-box .bottom-shadw {
      background: transparent linear-gradient(180deg, #FFFFFF 0%, #DDE8FD 100%) 0% 0% no-repeat padding-box;
      width: 100%;
      padding: 10px 6px 0px 15px;
      border-radius: 8px; }
      .jag-ranking-data .rank-box .bottom-shadw h5 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 20px; }
      .jag-ranking-data .rank-box .bottom-shadw li {
        width: 33%; }
      .jag-ranking-data .rank-box .bottom-shadw span {
        font-size: 12px;
        color: #808080;
        font-weight: normal; }
      .jag-ranking-data .rank-box .bottom-shadw strong {
        color: #253858;
        font-size: 14px;
        font-weight: 600;
        margin-top: 7px; }
      .jag-ranking-data .rank-box .bottom-shadw img {
        top: 4px; }
  .jag-ranking-data .rank-box-inner {
    position: absolute;
    background: #0065ff;
    border-radius: 18px;
    z-index: 98;
    top: 205px;
    left: 0;
    width: 100%;
    padding: 40px 12px 10px;
    margin: 20px 0; }
    .jag-ranking-data .rank-box-inner ul {
      width: 100%;
      display: table; }
      .jag-ranking-data .rank-box-inner ul li {
        position: relative;
        width: 72%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block; }
        .jag-ranking-data .rank-box-inner ul li span {
          color: #fff;
          font-size: 11px; }
          .jag-ranking-data .rank-box-inner ul li span img {
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px; }
        .jag-ranking-data .rank-box-inner ul li:nth-child(1) span {
          padding-left: 20px; }
          .jag-ranking-data .rank-box-inner ul li:nth-child(1) span.numbere {
            font-size: 12px;
            padding-left: 0;
            font-weight: 500;
            line-height: 16px; }
        .jag-ranking-data .rank-box-inner ul li:last-child {
          width: 28%;
          text-align: right;
          float: right; }
          .jag-ranking-data .rank-box-inner ul li:last-child span {
            font-size: 12px; }
            .jag-ranking-data .rank-box-inner ul li:last-child span button {
              background-color: transparent;
              border: transparent;
              color: #fff;
              cursor: pointer;
              font-weight: 700;
              line-height: 16px; }
              .jag-ranking-data .rank-box-inner ul li:last-child span button:focus {
                outline: none; }
            .jag-ranking-data .rank-box-inner ul li:last-child span i {
              font-size: 14px; }

.growthDetails {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border-radius: 8px;
  width: 355px;
  height: 35px;
  padding: 9px 15px;
  display: inline-block;
  float: right;
  font: normal normal normal 11px/18px Roboto;
  letter-spacing: 0px;
  color: #808080;
  opacity: 1; }
  .growthDetails span {
    top: 3px;
    position: relative;
    float: right;
    right: 0px;
    font: normal normal normal 14px/14px Roboto; }
    .growthDetails span svg {
      position: absolute;
      left: -27px;
      top: -11px;
      font-size: 2.5em; }

.jag-leader-board h6 {
  display: inline-block; }

.jag-leader-board .lader-ranking {
  padding: 15px 15px 10px;
  min-height: 250px; }
  .jag-leader-board .lader-ranking li {
    display: inline-block;
    width: 33%;
    color: #050505; }
    .jag-leader-board .lader-ranking li strong {
      display: block;
      font-size: 12px;
      font-weight: 900;
      line-height: 13px; }
    .jag-leader-board .lader-ranking li span {
      font-size: 12px;
      font-weight: 500;
      color: #050505; }
    .jag-leader-board .lader-ranking li:nth-child(odd) strong {
      color: #00458b; }
    .jag-leader-board .lader-ranking li .gold {
      text-transform: uppercase;
      color: #C47800 !important;
      font-size: 11px !important; }
      .jag-leader-board .lader-ranking li .gold img {
        vertical-align: text-top;
        top: 0px !important; }
    .jag-leader-board .lader-ranking li .silver {
      text-transform: uppercase;
      color: #9FA5AA !important;
      font-size: 11px !important; }
      .jag-leader-board .lader-ranking li .silver img {
        vertical-align: text-top;
        top: 0px !important; }
  .jag-leader-board .lader-ranking li:nth-child(2) {
    text-align: center; }
  .jag-leader-board .lader-ranking li:nth-child(3) {
    text-align: center; }
  .jag-leader-board .lader-ranking div {
    margin: 0 0 0.8em;
    padding: 10px 10px 10px; }
    .jag-leader-board .lader-ranking div.active {
      background: #D8EAFA;
      border-radius: 8px; }
      .jag-leader-board .lader-ranking div.active li {
        color: #fff; }
        .jag-leader-board .lader-ranking div.active li strong {
          color: #00458b;
          margin-bottom: 5px; }
          .jag-leader-board .lader-ranking div.active li strong img {
            position: relative;
            top: 5px; }
        .jag-leader-board .lader-ranking div.active li:last-child strong {
          color: #00458b;
          margin-bottom: 5px; }

.jag-leader-board .topPerformance {
  min-height: 300px; }
  .jag-leader-board .topPerformance table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%; }
  .jag-leader-board .topPerformance th {
    background-color: #F2F7FF;
    padding: 10px 19px;
    font: normal normal 600 11px/14px Roboto;
    letter-spacing: 0px;
    color: #050505;
    opacity: 0.6;
    text-align: center; }
  .jag-leader-board .topPerformance td {
    border-top: 1px solid #F2F7FF;
    text-align: center;
    padding: 26px;
    font: normal normal normal 14px/14px Roboto;
    letter-spacing: 0px;
    color: #050505;
    opacity: 1;
    position: relative; }
    .jag-leader-board .topPerformance td:first-child {
      font: normal normal bold 16px/14px Roboto;
      letter-spacing: 0px;
      color: #FFBE05;
      opacity: 1; }
    .jag-leader-board .topPerformance td .new {
      position: absolute;
      top: 0;
      right: 0;
      left: 98px;
      bottom: 0;
      margin: auto; }
    .jag-leader-board .topPerformance td svg {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 50px;
      margin: auto;
      left: 0; }
    .jag-leader-board .topPerformance td .arrowRight {
      right: 40px;
      color: #0063FA; }

.mt-5 {
  margin-top: 5em; }

.green {
  color: #00C417 !important; }

.red {
  color: #D92626 !important; }

.agentName {
  text-align: left;
  font: normal normal normal 28px/36px Roboto;
  letter-spacing: 0px;
  color: #253858;
  opacity: 1;
  margin-bottom: 18px; }

.jag-highlights h3 {
  text-align: left;
  font: normal normal normal 28px/36px Roboto;
  letter-spacing: 0px;
  color: #253858;
  opacity: 1;
  margin-bottom: 18px; }

.jag-highlights .ranking-data {
  box-shadow: none;
  position: relative;
  margin: 0 0 10px;
  border-radius: 18px; }
  .jag-highlights .ranking-data h3 {
    color: #0E4E84;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 2px; }
  .jag-highlights .ranking-data .rank-box {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    padding: 15px;
    z-index: 99;
    left: 0;
    top: 0;
    min-height: 110px; }
    .jag-highlights .ranking-data .rank-box span {
      color: #0E4E84;
      font-size: 11px; }
  .jag-highlights .ranking-data .active {
    background: #D8EAFA;
    border-radius: 8px; }
    .jag-highlights .ranking-data .active span {
      font-size: 11px;
      font-weight: 500;
      color: #050505; }
    .jag-highlights .ranking-data .active h3 {
      color: #00458b;
      margin-bottom: 5px;
      text-align: right;
      width: 28%;
      font-weight: 600;
      line-height: 25px; }

.jag-highlights h6 {
  margin: 0;
  margin-bottom: 15px; }
  .jag-highlights h6 i {
    font-size: 10px; }

.jag-highlights .highlights-card {
  box-shadow: 0px 0px 16px #00000014;
  border-radius: 18px;
  background: #ffe8c4;
  height: 250px;
  margin: 10px 0 0;
  padding: 8px;
  /* Slideshow container */
  /* Next & previous buttons */
  /* Position the "next button" to the right */
  /* On hover, add a black background color with a little bit see-through */
  /* Caption text */
  /* Number text (1/3 etc) */
  /* The dots/bullets/indicators */
  /* Fading animation */
  /* On smaller screens, decrease text size */ }
  .jag-highlights .highlights-card ul {
    padding: 7px 0; }
    .jag-highlights .highlights-card ul li {
      display: inline-block;
      vertical-align: top;
      padding-left: 15px;
      width: 70%;
      /* scrollbar itself */ }
      .jag-highlights .highlights-card ul li strong {
        color: #c47800;
        font-size: 20px;
        font-weight: 500;
        padding-right: 5px; }
        .jag-highlights .highlights-card ul li strong span {
          font-size: 12px;
          display: inline;
          padding: 0 3px; }
      .jag-highlights .highlights-card ul li:last-child {
        width: 30%;
        text-align: right;
        padding: 0; }
      .jag-highlights .highlights-card ul li h3 {
        color: #C47800;
        font-size: 16px;
        position: relative;
        top: 46px; }
      .jag-highlights .highlights-card ul li p {
        color: #C47800;
        font-size: 12px;
        text-align: left;
        margin-top: 56px;
        overflow-y: auto;
        padding-right: 5px; }
      .jag-highlights .highlights-card ul li p::-webkit-scrollbar {
        width: 5px; }
      .jag-highlights .highlights-card ul li p::-webkit-scrollbar-thumb {
        background-color: #C47800;
        border-radius: 16px; }
      .jag-highlights .highlights-card ul li button {
        background-color: #C47903;
        padding: 10px 16px;
        border: none;
        color: #fff;
        margin-top: 20px;
        border-radius: 24px;
        cursor: pointer; }
  .jag-highlights .highlights-card img {
    mix-blend-mode: luminosity; }
  .jag-highlights .highlights-card .mySlides {
    display: none; }
  .jag-highlights .highlights-card .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    height: 130px; }
  .jag-highlights .highlights-card .prev,
  .jag-highlights .highlights-card .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    -webkit-user-select: none;
            user-select: none; }
  .jag-highlights .highlights-card .next {
    right: 0;
    border-radius: 3px 0 0 3px; }
  .jag-highlights .highlights-card .prev:hover,
  .jag-highlights .highlights-card .next:hover {
    background-color: rgba(0, 0, 0, 0.8); }
  .jag-highlights .highlights-card .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center; }
  .jag-highlights .highlights-card .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0; }
  .jag-highlights .highlights-card .dot {
    cursor: pointer;
    height: 4px;
    width: 34px;
    margin: 0 2px;
    background-color: #C7AB7D;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.6s ease; }
  .jag-highlights .highlights-card .active,
  .jag-highlights .highlights-card .dot:hover {
    background-color: #C47903;
    cursor: pointer; }
  .jag-highlights .highlights-card .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s; }

@keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }
  @media only screen and (max-width: 300px) {
    .jag-highlights .highlights-card .prev,
    .jag-highlights .highlights-card .next,
    .jag-highlights .highlights-card .text {
      font-size: 11px; } }
  .jag-highlights .highlights-card .show {
    display: block; }

.jag-highlights .calculator-box {
  padding: 10px 0px;
  background-color: #fff;
  width: 100%;
  border-radius: 18px; }
  .jag-highlights .calculator-box .formatselector-buttons {
    font-size: 14px; }
    .jag-highlights .calculator-box .formatselector-buttons span {
      cursor: pointer;
      margin-left: 5px;
      padding: 5px; }
    .jag-highlights .calculator-box .formatselector-buttons span.active {
      color: #0063FA;
      font-weight: 700;
      border-bottom: 2px solid #0063FA; }
  .jag-highlights .calculator-box .selectoptions {
    margin-top: 25px; }
    .jag-highlights .calculator-box .selectoptions select {
      border-radius: 18px;
      padding: 10px 18px;
      margin-right: 25px;
      font-size: 11px;
      width: 150px; }
    .jag-highlights .calculator-box .selectoptions button {
      padding: 10px 15px;
      background-color: #0063FA;
      border: none;
      border-radius: 18px;
      color: #fff;
      cursor: pointer; }
  .jag-highlights .calculator-box h4 {
    text-transform: uppercase;
    margin-bottom: 25px;
    width: 100%; }
  .jag-highlights .calculator-box .box {
    border-right: 1px solid #BCBCBC;
    margin: 10px 15px; }
  .jag-highlights .calculator-box .noborder {
    border: none; }
  .jag-highlights .calculator-box .rewardbreakup {
    float: right;
    margin-right: 30px;
    font-size: 18px;
    cursor: pointer; }

.jag-highlights .noReward {
  text-align: center;
  font-size: 20px;
  color: #ff6978; }

.graphbox {
  background-color: #fff;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 2px; }

.jag-criteriaHtml table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%; }

.jag-criteriaHtml table td,
.jag-criteriaHtml table th {
  border: 1px solid #ddd;
  padding: 8px; }

.jag-criteriaHtml table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%; }

.jag-criteriaHtml table th:first-child {
  background-color: transparent;
  border: none; }

.jag-criteriaHtml table td,
.jag-criteriaHtml table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center; }

.jag-criteriaHtml table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #0063FA;
  color: white; }

.jag-criteriaList table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
  display: inline-table; }

.jag-criteriaList table td,
.jag-criteriaList table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center; }

.jag-criteriaList table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #0063FA;
  color: white; }

.wallofFamePopup .MuiDialogContent-root {
  overflow: hidden !important; }

.wallofFamePopup .MuiPaper-root {
  background: #0762F7 0% 0% no-repeat padding-box;
  border-radius: 20px;
  width: 1200px;
  max-width: 1200px;
  padding: 25px 7px; }

.wallofFamePopup .wallofFamecontent {
  background: #FAF8FB 0% 0% no-repeat padding-box;
  border-radius: 20px;
  opacity: 1;
  padding: 32px; }
  .wallofFamePopup .wallofFamecontent .jaglogo {
    width: 214px;
    position: absolute;
    left: -3px;
    top: -21px; }
  .wallofFamePopup .wallofFamecontent .wofLogo {
    position: relative; }
    .wallofFamePopup .wallofFamecontent .wofLogo span {
      top: 80px;
      position: absolute;
      left: 85px;
      text-align: left;
      font: normal normal normal 13px/30px Roboto;
      letter-spacing: 0px;
      opacity: 1; }
    .wallofFamePopup .wallofFamecontent .wofLogo span:last-child {
      top: 80px;
      line-height: 15px; }
    .wallofFamePopup .wallofFamecontent .wofLogo img {
      width: 85%; }
  .wallofFamePopup .wallofFamecontent .pblogo {
    margin-top: 40px;
    position: absolute;
    right: 7px;
    top: -41px;
    width: 190px; }
  .wallofFamePopup .wallofFamecontent .scrollWOF {
    overflow-y: auto;
    height: 280px; }
  .wallofFamePopup .wallofFamecontent #scrollbar::-webkit-scrollbar {
    width: 6px;
    background: rgba(100, 100, 100, 0.1);
    height: 5px;
    border-radius: 50px; }
  .wallofFamePopup .wallofFamecontent #scrollbar::-webkit-scrollbar-thumb {
    background-color: #96A0B5;
    border-radius: 50px; }
  .wallofFamePopup .wallofFamecontent table {
    font-family: roboto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px; }
  .wallofFamePopup .wallofFamecontent table tbody tr {
    background: transparent linear-gradient(270deg, #FAF8FB 0%, #FAEBBF 73%, #F3CF62 100%) 0% 0% no-repeat padding-box;
    text-align: left;
    font: normal normal 500 16px/30px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1; }
  .wallofFamePopup .wallofFamecontent .silver {
    background: transparent linear-gradient(270deg, #FAF8FB 0%, #F1F1F1 73%, #E2E2E2 100%) 0% 0% no-repeat padding-box; }
  .wallofFamePopup .wallofFamecontent table td,
  .wallofFamePopup .wallofFamecontent table th {
    border: none;
    padding: 3px 8px;
    line-height: 11px;
    text-align: center; }
  .wallofFamePopup .wallofFamecontent table tbody td:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .wallofFamePopup .wallofFamecontent table th {
    border: none;
    font: normal normal 500 14px/30px Roboto;
    letter-spacing: 0px;
    color: #A2A2A2;
    text-transform: uppercase;
    opacity: 1; }
  .wallofFamePopup .wallofFamecontent .radbg {
    position: relative;
    width: 100%;
    height: 50px; }
    .wallofFamePopup .wallofFamecontent .radbg img {
      left: 0;
      top: -76px;
      right: 0;
      margin: auto; }

.wallofFamePopup .closeIcon {
  position: absolute;
  z-index: 9999999;
  right: 10px;
  top: 10px;
  background-color: #0065FF;
  color: #fff;
  border-radius: 14px;
  cursor: pointer; }

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .firstbox {
    width: 100% !important; }
  .payout .payout-box li {
    width: 100%; }
    .payout .payout-box li span {
      width: 50%;
      float: left;
      text-align: left;
      padding-left: 0px; }
    .payout .payout-box li p {
      width: 50%;
      float: left;
      text-align: right; }
  .jag-highlights .ranking-data .rank-box {
    padding: 15px 11px; }
  .jag-highlights .calculator-box .box {
    border-right: none;
    border-bottom: 2px solid #BCBCBC;
    padding-bottom: 10px; }
  .jag-highlights .calculator-box .noborder {
    border: none; }
  .faq-section .MuiInputBase-root {
    width: 86% !important; } }

@media only screen and (max-width: 320px) {
  .faq-section .MuiInputBase-root {
    width: 86% !important; } }

/* FAQ CSS start */
.MuiTab-textColorInherit.Mui-selected {
  opacity: 1;
  border-bottom: 3px solid #0065FF;
  font-weight: bold;
  border-radius: 3px; }

.faq-section h4 {
  color: #253858;
  font-size: 20px;
  margin: 35px 0px 30px; }

.faq-section .searchbar {
  box-shadow: 0px 0px 16px #00000014;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 20px;
  padding: 0px 17px; }

.faq-section .MuiInputBase-root {
  width: 93%; }

.faq-section .PrivateTabIndicator-colorSecondary-43 {
  display: none; }

.faq-section .MuiTab-textColorInherit.Mui-selected {
  opacity: 1;
  border-bottom: 3px solid #0065FF;
  font-size: 18px;
  font-weight: bold;
  border-radius: 3px; }

.faq-section .MuiAppBar-colorPrimary {
  color: #253858;
  background-color: transparent;
  box-shadow: none; }

.faq-section .MuiTab-textColorInherit {
  opacity: 0.7;
  padding: 5px 20px;
  min-width: auto;
  font-size: 16px;
  color: #253858;
  text-transform: capitalize;
  margin-right: 20px; }

.faq-section .faq-tab {
  margin-top: 10px; }
  .faq-section .faq-tab .MuiTab-textColorInherit.Mui-selected {
    opacity: 1;
    border-bottom: none;
    font-size: 12px;
    background-color: #0065FF;
    font-weight: bold;
    color: #fff;
    border-radius: 49px;
    padding: 0px 30px; }
  .faq-section .faq-tab .MuiTab-textColorInherit {
    font-size: 12px; }
  .faq-section .faq-tab .MuiTab-root {
    min-height: 38px; }
  .faq-section .faq-tab .MuiTouchRipple-root {
    display: none; }
  .faq-section .faq-tab .MuiTabs-indicator {
    display: none; }

.faq-section .MuiBox-root {
  padding: 24px 0px !important; }

.faq-section .MuiAccordion-rounded:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px; }

.faq-section .MuiAccordion-rounded:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px; }

.faq-section .MuiAccordion-rounded {
  border-radius: 16px; }

.faq-section .MuiAccordion-root {
  position: relative;
  transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  margin-bottom: 10px;
  box-shadow: none; }

.faq-section .MuiAccordion-root:before {
  display: none; }

.faq-section .MuiSvgIcon-root {
  color: #0065FF; }

.faq-section .faqtab-data .MuiTypography-body1 {
  color: #495973;
  font-size: 14px;
  font-family: "Roboto"; }

.faq-section .faqtab-data .faq-ans {
  color: #808080; }

.faq-section .read-more-link h2 {
  padding: 6px;
  background-color: #0065FF;
  width: 100px;
  color: #fff;
  font-size: 12px;
  margin: auto;
  text-align: center;
  border-radius: 24px; }

.faq-rightside h6 {
  color: #253858;
  font-size: 16px;
  margin: 45px 0px 0px; }

.faq-rightside p {
  font-size: 14px;
  padding: 9px 5px;
  color: #808080; }

.faq-rightside .rightside-box {
  float: left;
  background-color: #fff;
  width: 100%;
  border-radius: 16px;
  padding: 20px; }
  .faq-rightside .rightside-box img {
    width: 35px; }
  .faq-rightside .rightside-box .reward {
    width: 22px; }
  .faq-rightside .rightside-box p {
    padding-left: 0px;
    padding-top: 23px;
    font-size: 12px;
    color: #253858;
    font-weight: bold; }

.faq-rightside .contact-us {
  padding: 10px;
  width: 100%; }
  .faq-rightside .contact-us h6 {
    color: #253858;
    font-size: 16px;
    margin: 0px; }
  .faq-rightside .contact-us img {
    float: left; }
  .faq-rightside .contact-us a {
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    color: #303030;
    font-size: 14px; }
  .faq-rightside .contact-us .rightside-box {
    margin-bottom: 10px;
    padding: 30px 20px 30px 20px; }

.breakupheader {
  color: #0063FA; }

.how-it-works-section {
  background: #D6E2FF;
  display: flex;
  flex-direction: COLUMN;
  align-items: center;
  height: 100%;
  padding: 32px 16px; }
  .how-it-works-section h3 {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4.08px;
    color: #253858;
    margin-bottom: 18px; }
  .how-it-works-section p {
    letter-spacing: 0px;
    color: #253858;
    font-size: 16px;
    line-height: 24px; }
  .how-it-works-section .slick-slider .slick-arrow {
    display: block !important;
    background: transparent;
    z-index: 1000; }
    .how-it-works-section .slick-slider .slick-arrow.slick-next {
      right: 10px; }
      .how-it-works-section .slick-slider .slick-arrow.slick-next:before {
        color: #606060; }
    .how-it-works-section .slick-slider .slick-arrow.slick-prev {
      left: 10px; }
      .how-it-works-section .slick-slider .slick-arrow.slick-prev:before {
        color: #606060; }
  .how-it-works-section .slick-slider .slick-slide img {
    text-align: center;
    margin: 15px auto 0; }
  .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab {
    margin-top: 30px; }
    .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab .slab {
      text-align: center; }
      .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab .slab p {
        font-size: 12px;
        color: #303030;
        line-height: 16px;
        padding: 13px 0; }
      .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab .slab.slab-4 {
        background: url(/images/slab-yellow-bg.svg) no-repeat center; }
      .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab .slab.slab-3 {
        background: url(/images/slab-blue-bg.svg) no-repeat center; }
      .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab .slab.slab-2 {
        background: url(/images/slab-green-bg.svg) no-repeat center; }
      .how-it-works-section .slick-slider .slick-slide .steps .incentive-slab .slab.slab-1 {
        background: url(/images/slab-red-bg.svg) no-repeat center; }
  .how-it-works-section .slick-slider .slick-slide .steps > ul {
    padding: 10px 30px 0; }
    .how-it-works-section .slick-slider .slick-slide .steps > ul li {
      color: #253858;
      font-size: 16px;
      line-height: 24px;
      list-style: none;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
      .how-it-works-section .slick-slider .slick-slide .steps > ul li:last-child {
        margin-bottom: 0; }
      .how-it-works-section .slick-slider .slick-slide .steps > ul li p {
        width: 90%; }
      .how-it-works-section .slick-slider .slick-slide .steps > ul li span {
        font-size: 12px;
        height: 48px;
        width: 48px;
        display: inline-flex;
        align-items: CENTER;
        justify-content: CENTER;
        border-radius: 50%;
        color: #fff;
        margin-right: 12px; }
        .how-it-works-section .slick-slider .slick-slide .steps > ul li span.pink {
          background: #F3A191; }
        .how-it-works-section .slick-slider .slick-slide .steps > ul li span.purple {
          background: #868CF1; }
        .how-it-works-section .slick-slider .slick-slide .steps > ul li span.blue {
          background: #4D5C7E; }
  .how-it-works-section .slick-slider .slick-slide .steps div {
    padding: 0 60px; }
    .how-it-works-section .slick-slider .slick-slide .steps div p {
      font-size: 14px;
      margin: 5px 0 0; }
  .how-it-works-section .slick-slider .slick-slide .steps table {
    border-collapse: collapse;
    border-radius: 4px;
    margin-left: 90px; }
    .how-it-works-section .slick-slider .slick-slide .steps table thead tr {
      background: #ACC4FF;
      border-radius: 4px; }
    .how-it-works-section .slick-slider .slick-slide .steps table tbody tr:nth-child(2n+2) {
      background: #ACC4FF; }
    .how-it-works-section .slick-slider .slick-slide .steps table tr th,
    .how-it-works-section .slick-slider .slick-slide .steps table tr td {
      padding: 4px;
      letter-spacing: 0px;
      color: #253858;
      font-size: 14px; }
  .how-it-works-section .slick-slider .slick-slide .steps.step-3 ul li {
    margin-bottom: 25px; }
    .how-it-works-section .slick-slider .slick-slide .steps.step-3 ul li img {
      margin: 0 12px 0 0; }
  .how-it-works-section .slick-slider .slick-dots li.slick-active button::before {
    background: #0065ff; }
  .how-it-works-section .slick-slider .slick-dots li button:before {
    height: 3px; }

.jagBanner {
  width: 100%;
  display: inline-block;
  background-color: #fff;
  border-radius: 16px;
  font-family: roboto; }
  .jagBanner .logo {
    float: left; }
  .jagBanner h2 {
    text-align: center;
    font-size: 15px;
    padding-top: 16px;
    color: #0663F6;
    letter-spacing: 0.24px;
    line-height: 24px; }
  .jagBanner .houseImg {
    width: 170px;
    margin-top: 2em; }
  .jagBanner .beginsIN {
    position: relative;
    color: #0663F6;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.16px;
    clear: both;
    top: -17px; }
  .jagBanner .calender {
    margin: 0 auto;
    text-align: center; }
    .jagBanner .calender div {
      height: 34px;
      width: 42px;
      border-radius: 0px 0px 8px 8px;
      font-size: 28px;
      font-weight: bold;
      color: #FFA71A;
      background: transparent linear-gradient(358deg, #a7c9ff 0%, #fff 100%);
      text-align: center;
      margin-right: 5px;
      margin-left: 5px;
      display: inline-block;
      letter-spacing: 0.45px;
      line-height: 28px; }
      .jagBanner .calender div p {
        font-size: 8px;
        font-weight: 600;
        color: #253858; }
    .jagBanner .calender span {
      font-size: 28px;
      position: relative;
      color: #FFA71A;
      letter-spacing: 0.45px;
      font-weight: bold;
      top: -20px; }
  .jagBanner .keyimg {
    vertical-align: middle;
    width: 62px;
    margin-left: 10px;
    margin-top: 0px; }
  .jagBanner .msg {
    width: auto;
    text-align: left;
    margin-bottom: 15px;
    padding: 0px 15px 0px 2px; }
    .jagBanner .msg .jagmsg {
      color: #FFA71A;
      font-size: 12px;
      font-family: roboto;
      font-weight: bold;
      line-height: 16px;
      display: flex;
      letter-spacing: 0.19px;
      margin-top: 10px;
      animation-name: topFadeOut;
      animation-duration: 2s;
      align-items: center; }

@keyframes topFadeOut {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.banner-lottery {
  background: url(/images/TopBannerBG.svg) no-repeat center;
  width: 100%;
  height: 104px;
  overflow: hidden;
  background-size: cover; }
  .banner-lottery .jlogo {
    float: right;
    margin-top: 15px; }
  .banner-lottery .LuckyDrawDate {
    float: left;
    margin-top: 22px; }
    .banner-lottery .LuckyDrawDate p {
      text-align: left;
      font: normal normal normal 14px/19px Roboto;
      letter-spacing: 0px;
      color: #FFFFFF;
      opacity: 1;
      width: 229px;
      float: left;
      padding-top: 9px;
      margin-left: 30px; }
    .banner-lottery .LuckyDrawDate .mr-top {
      margin-top: 13px; }
  .banner-lottery .disclaimer {
    float: right;
    margin-top: 80px;
    margin-right: 10px; }
    .banner-lottery .disclaimer a {
      color: #ffffff;
      font-size: 14px; }
  .banner-lottery button {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 13px 26px #5f5f5f29;
    border-radius: 24px;
    opacity: 1;
    font: normal normal 600 14px/19px Roboto;
    letter-spacing: 0px;
    outline: none;
    border: none;
    margin-top: 10px;
    margin-left: 40px;
    padding: 8px 26px; }
    .banner-lottery button a {
      color: #003F9E; }
  .banner-lottery button:hover {
    background: #FFFFFF 0% 0% no-repeat padding-box; }
  .banner-lottery .Jagyear {
    text-align: left;
    font: normal normal 900 40px/53px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    margin-left: 20px;
    float: left; }

.ticketSearchDesign {
  width: 640px;
  background: transparent linear-gradient(180deg, #FFFFFF 0%, #DDE8FD 100%) 0% 0% no-repeat padding-box;
  border-radius: 8px 8px 0px 0px;
  opacity: 1;
  height: 100%;
  padding: 25px; }
  .ticketSearchDesign h3 {
    text-align: left;
    font: normal normal 600 18px/24px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1; }
  .ticketSearchDesign span {
    text-align: left;
    font: normal normal normal 12px/16px Roboto;
    letter-spacing: 0px;
    color: #808080;
    opacity: 1;
    float: left; }
  .ticketSearchDesign h2 {
    text-align: left;
    font: normal normal 600 24px/32px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1;
    margin-left: 20px; }
  .ticketSearchDesign .ft-r {
    float: right; }
  .ticketSearchDesign .searchTicketNo .MuiAutocomplete-inputRoot {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 25px;
    opacity: 1;
    margin-top: 8px;
    height: 40px; }
  .ticketSearchDesign .searchTicketNo .MuiFormControl-root .MuiInputLabel-outlined {
    transform: translate(20px, 22px) scale(0.9); }
  .ticketSearchDesign .searchTicketNo .MuiFormControl-root .MuiInputLabel-shrink {
    transform: translate(14px, 3px) scale(0.75); }
  .ticketSearchDesign .searchTicketNo .MuiAutocomplete-input {
    height: 0.1876em; }
  .ticketSearchDesign .searchBtn {
    background: #0065FF 0% 0% no-repeat padding-box;
    border-radius: 24px;
    opacity: 1;
    text-align: center;
    font: normal normal bold 14px/30px Roboto;
    margin-left: 10px;
    letter-spacing: 0px;
    color: #FFFFFF;
    border: none;
    padding: 4px 25px;
    outline: none;
    margin-top: 8px; }
  .ticketSearchDesign .LotteryTicket {
    text-align: center;
    margin: 1.2em 0em 1em;
    width: 100%;
    position: relative; }
    .ticketSearchDesign .LotteryTicket img {
      position: relative; }
    .ticketSearchDesign .LotteryTicket .ticketcaption {
      position: absolute;
      left: 155px;
      top: 80px;
      color: #fff;
      font: normal normal bold 12px/16px Roboto; }
    .ticketSearchDesign .LotteryTicket .ticketNo {
      font: normal normal normal 25px/35px Rockwell;
      letter-spacing: 0px;
      color: #FFFFFF;
      opacity: 1;
      bottom: 34px;
      left: 135px;
      position: absolute; }
    .ticketSearchDesign .LotteryTicket .srNo {
      position: absolute;
      color: #fff;
      font: normal normal normal 12px/16px Roboto;
      right: 210px;
      bottom: 19px; }
  .ticketSearchDesign .ticketView {
    text-align: center;
    font: normal normal normal 14px/19px Roboto;
    letter-spacing: 0px;
    color: #808080;
    opacity: 1;
    width: 100%;
    margin-bottom: 12px; }
  .ticketSearchDesign .ticketBox {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 3px #00000029;
    border-radius: 4px;
    opacity: 1;
    width: 100%;
    font: normal normal normal 12px/16px Roboto;
    letter-spacing: 0px;
    color: #253858;
    padding: 7px 15px;
    line-height: 23px;
    text-align: center;
    position: relative; }
    .ticketSearchDesign .ticketBox img {
      float: left; }
    .ticketSearchDesign .ticketBox .srNo {
      position: absolute;
      left: 31px;
      top: 11px; }
  .ticketSearchDesign .TicketActive {
    background: #F2F7FF 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 3px #00000029;
    border: 1px solid #0065FF;
    border-radius: 4px;
    opacity: 1; }
  .ticketSearchDesign .scrollBar {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 280px; }
  .ticketSearchDesign .scrollBar::-webkit-scrollbar-track {
    box-shadow: transparent;
    background-color: transparent; }
  .ticketSearchDesign .scrollBar::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
    height: 1px;
    border: 3px; }
  .ticketSearchDesign .ticketbox {
    position: absolute;
    transform: matrix(0, -1, 1, 0, 0, 0);
    right: 115px;
    bottom: 68px; }
    .ticketSearchDesign .ticketbox h3 {
      font: italic normal normal 14px/20px Roboto;
      letter-spacing: 0px;
      color: #253858;
      opacity: 1; }
    .ticketSearchDesign .ticketbox p {
      font: normal normal normal 12px/16px Roboto;
      letter-spacing: 0px;
      color: #253858;
      opacity: 1; }

.incentiveCriteria {
  margin-top: 50px; }
  .incentiveCriteria h3 {
    text-align: left;
    font: normal normal normal 28px/36px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1;
    margin-bottom: 30px; }
  .incentiveCriteria .criteraPoint {
    margin-top: 25px;
    list-style-type: none; }
    .incentiveCriteria .criteraPoint li {
      text-align: left;
      font: normal normal normal 14px/21px Roboto;
      letter-spacing: 0px;
      color: #26395a99;
      margin-bottom: 2.5em;
      display: flex;
      align-items: center; }
      .incentiveCriteria .criteraPoint li img {
        margin-right: 15px; }
  .incentiveCriteria .slick-slider {
    border-radius: 10px;
    display: grid;
    width: 100%;
    background-color: #F2F7FF;
    margin-top: 10px; }
    .incentiveCriteria .slick-slider .slick-slide {
      padding: 20px; }
      .incentiveCriteria .slick-slider .slick-slide video {
        border-radius: 12px; }
      .incentiveCriteria .slick-slider .slick-slide .card {
        box-shadow: none; }
      .incentiveCriteria .slick-slider .slick-slide img {
        width: 100%;
        margin: auto;
        height: 386px; }
  .incentiveCriteria .slick-dots {
    bottom: -12px;
    display: none !important; }

.scrollBar {
  height: 330px;
  overflow-y: auto;
  padding: 0px 12px; }

.scrollBar::-webkit-scrollbar-track {
  box-shadow: transparent;
  background-color: #fff; }

.scrollBar::-webkit-scrollbar {
  width: 6px;
  background-color: #808080;
  height: 1px;
  border: 3px; }

.scrollBar::-webkit-scrollbar-thumb {
  background-color: #808080; }

.JagLandingpage {
  width: 100%; }
  .JagLandingpage header {
    width: 100%;
    height: 64px;
    position: fixed;
    background-color: #fff;
    opacity: 0.9;
    padding: 0px 90px; }
  .JagLandingpage .spaceHeight {
    margin-top: 60px;
    background-color: #fff;
    padding: 24px 90px; }
  .JagLandingpage .jagLogo {
    width: 170px;
    margin-top: 18px;
    float: left; }
    .JagLandingpage .jagLogo img {
      width: 100%; }
  .JagLandingpage nav {
    width: auto;
    float: right;
    margin-top: 19px; }
    .JagLandingpage nav ul {
      display: flex;
      list-style-type: none;
      justify-content: space-between; }
      .JagLandingpage nav ul li a {
        text-align: left;
        font: normal normal 600 14px/19px Roboto;
        letter-spacing: 0px;
        color: #253858;
        opacity: 1;
        margin-left: 40px;
        margin-right: 5px; }
      .JagLandingpage nav ul button {
        text-align: center;
        font: normal normal 600 14px/24px Roboto;
        letter-spacing: 0px;
        color: #0065ff;
        opacity: 1;
        border: 1px solid #0065ff;
        padding: 5px 30px;
        position: relative;
        border-radius: 8px;
        background-color: transparent;
        top: -6px; }
  .JagLandingpage h2 {
    font-size: 28px;
    color: #253858;
    font-family: "Roboto";
    line-height: 36px;
    font-weight: 100;
    margin-top: 2.4em; }
  .JagLandingpage .textMsg {
    text-align: justify;
    font: normal normal normal 14px/21px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 0.6;
    padding: 10px 79px 20px 0px; }
  .JagLandingpage .homeSection ul {
    list-style-type: none;
    display: flex;
    margin-left: 0px;
    margin-top: 1em; }
    .JagLandingpage .homeSection ul li {
      text-align: left;
      font: normal normal 600 12px/16px Roboto;
      letter-spacing: 0px;
      color: #008b10;
      opacity: 1;
      margin-right: 38px; }
      .JagLandingpage .homeSection ul li img {
        position: relative;
        top: 5px;
        margin-right: 7px; }
      .JagLandingpage .homeSection ul li:last-child {
        color: #0e047e; }
  .JagLandingpage .homeSection .btnSection {
    padding: 46px 0px; }
    .JagLandingpage .homeSection .btnSection button {
      background: #0065ff 0% 0% no-repeat padding-box;
      border-radius: 8px;
      opacity: 1;
      text-align: center;
      font: normal normal 600 14px/15px Roboto;
      letter-spacing: 0px;
      color: #ffffff;
      padding: 14px 35px;
      border: none;
      margin-right: 15px; }
      .JagLandingpage .homeSection .btnSection button:last-child {
        border: 1px solid #0065ff;
        background-color: #fff;
        color: #0065ff; }
  .JagLandingpage .ContestSection h2 {
    padding-left: 0px; }
  .JagLandingpage .ContestSection .textMsg {
    padding-left: 0px;
    padding-right: 0px; }
  .JagLandingpage .ContestSection .contestBox {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 6px 16px #3469cb29;
    border-radius: 8px;
    opacity: 1;
    padding: 18px 12px; }
    .JagLandingpage .ContestSection .contestBox h3 {
      text-align: left;
      font: normal normal bold 17px/26px Roboto;
      letter-spacing: 0px;
      color: #2d3cd9;
      margin-bottom: 7px; }
      .JagLandingpage .ContestSection .contestBox h3 span {
        font: normal normal bold 14px/26px Roboto; }
    .JagLandingpage .ContestSection .contestBox p {
      text-align: left;
      font: normal normal normal 12px/18px Roboto;
      letter-spacing: 0px;
      color: #253858;
      opacity: 0.6; }
  .JagLandingpage .textblue {
    color: #0bbdf2 !important; }
  .JagLandingpage .textgreen {
    color: #47d990 !important; }
  .JagLandingpage .textyellow {
    color: #ffc400 !important; }
  .JagLandingpage .leaderboard {
    position: relative; }
    .JagLandingpage .leaderboard .card {
      height: 500px !important; }
      .JagLandingpage .leaderboard .card .MuiCardContent-root {
        margin-top: 20px !important; }
    .JagLandingpage .leaderboard .slick-slider ul.slick-dots li button::before {
      height: 12px;
      width: 12px;
      border-radius: 50%;
      border: 1px solid #00458b;
      background-color: transparent; }
    .JagLandingpage .leaderboard .slick-slider ul.slick-dots li.slick-active button::before {
      background-color: #00458b !important; }
    .JagLandingpage .leaderboard .card-body {
      height: 80px !important;
      font: normal normal normal 12px/18px Roboto;
      letter-spacing: 0px;
      color: #253858;
      opacity: 0.6; }
    .JagLandingpage .leaderboard .textMsg {
      width: 45%; }
    .JagLandingpage .leaderboard .slick-slider {
      z-index: 999;
      background-color: transparent;
      padding-left: 0px; }
    .JagLandingpage .leaderboard .slide {
      width: 42%;
      display: inline-block;
      margin-right: 1.7%;
      margin-left: 0.9%;
      background: #ffffff 0% 0% no-repeat padding-box;
      box-shadow: 0px 6px 16px #3469cb29;
      border-radius: 8px;
      opacity: 1;
      padding: 10px 10px 7px 10px;
      margin-bottom: 1.5em; }
      .JagLandingpage .leaderboard .slide .circle-fluid {
        border-radius: 8px !important;
        width: 100% !important;
        height: 160px !important; }
      .JagLandingpage .leaderboard .slide .card-header {
        float: left; }
      .JagLandingpage .leaderboard .slide h1 {
        text-align: left;
        font: normal normal bold 18px/26px Roboto;
        letter-spacing: 0px;
        color: #2d3cd9;
        opacity: 1; }
        .JagLandingpage .leaderboard .slide h1 small {
          display: flex;
          font-weight: 500;
          text-align: left;
          font: normal normal normal 12px/18px Roboto;
          letter-spacing: 0px;
          color: #253858;
          opacity: 1; }
      .JagLandingpage .leaderboard .slide:nth-child(2n + 2) {
        position: relative;
        top: 0px;
        margin-bottom: 0px; }
      .JagLandingpage .leaderboard .slide a {
        margin-top: 9px;
        float: right;
        color: #1662df;
        font-weight: 600;
        cursor: pointer; }
    .JagLandingpage .leaderboard .mt-200 {
      top: 200px !important; }
    .JagLandingpage .leaderboard .winnerbanner {
      position: absolute;
      right: 0px;
      z-index: 0;
      top: 60px; }
  .JagLandingpage .FaqSection h2 {
    padding-left: 12px; }
  .JagLandingpage .FaqSection .textMsg {
    padding-left: 12px; }
  .JagLandingpage .FaqSection .faqTab {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 6px 16px #3469cb29;
    border-radius: 8px;
    opacity: 1;
    margin-bottom: 0.8em; }
    .JagLandingpage .FaqSection .faqTab::before {
      height: 0px; }
    .JagLandingpage .FaqSection .faqTab p {
      text-align: left;
      font: normal normal normal 14px/21px Roboto;
      letter-spacing: 0.2px;
      color: #303030;
      opacity: 1; }
    .JagLandingpage .FaqSection .faqTab svg {
      color: #0065ff; }
  .JagLandingpage .FaqSection button {
    box-shadow: 0px 0px 16px #00000014;
    border-radius: 24px;
    opacity: 1;
    outline: none;
    border: none;
    color: #fff;
    font: normal normal normal 12px/21px Roboto;
    width: 110px;
    margin: auto;
    letter-spacing: 0.17px;
    padding: 6px;
    background-color: #0065ff;
    margin-top: 8px; }
  .JagLandingpage footer .topSection {
    background: #eaeaea 0% 0% no-repeat padding-box;
    padding: 17px; }
    .JagLandingpage footer .topSection img {
      margin-left: 1em; }
  .JagLandingpage footer .bottomSection {
    background: #00458b 0% 0% no-repeat padding-box;
    opacity: 1;
    padding: 13px; }
    .JagLandingpage footer .bottomSection p {
      font: normal normal normal 14px/21px Roboto;
      letter-spacing: 0.2px;
      color: #ffffff;
      opacity: 1;
      text-align: center; }
  .JagLandingpage .GallerySection header {
    position: relative;
    background-color: transparent;
    box-shadow: none;
    padding: 0; }
  .JagLandingpage .GallerySection .MuiBox-root {
    padding: 24px 0px; }
  .JagLandingpage .GallerySection img {
    width: 100%;
    height: 192px;
    border-radius: 8px; }
  .JagLandingpage .GallerySection h2 {
    text-align: center;
    margin: 0 0px 1em;
    padding-left: 0; }
  .JagLandingpage .GallerySection .MuiTabs-scrollButtons {
    height: 32px;
    width: 32px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
    color: #0065ff;
    border-radius: 20px; }
  .JagLandingpage .GallerySection .Mui-selected {
    background: #0065ff 0% 0% no-repeat padding-box !important;
    color: #fff !important; }
  .JagLandingpage .GallerySection .cateGoryIcon {
    display: inline-block;
    padding: 3px 11px;
    background: #54f89380 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    margin-right: 10px;
    float: left;
    text-align: center; }
    .JagLandingpage .GallerySection .cateGoryIcon svg {
      width: 20px;
      margin-top: 5px; }
  .JagLandingpage .GallerySection .version {
    display: contents;
    font-size: 16px;
    line-height: 26px;
    color: #253858;
    font-weight: 600;
    text-transform: uppercase; }
  .JagLandingpage .GallerySection .versiondate {
    text-align: left;
    font: normal normal normal 12px/18px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 0.6; }
  .JagLandingpage .GallerySection .imgcategories {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 6px 6px #3469cb29;
    border: 1px solid #99d6e8;
    border-radius: 16px;
    opacity: 1;
    padding: 4px;
    min-height: 32px;
    text-align: center;
    font: normal normal normal 12px/21px Roboto;
    letter-spacing: 0.17px;
    text-transform: capitalize;
    color: #303030;
    margin: 0px 15px 0px 5px;
    min-width: 124px; }
  .JagLandingpage .GallerySection .Description {
    text-align: left;
    font: normal normal normal 12px/18px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 0.6;
    margin-bottom: 1em; }
  .JagLandingpage .GallerySection .date {
    text-align: left;
    font: normal normal 600 10px/14px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1;
    margin-bottom: 5px; }

.howItWorks {
  border-radius: 10px !important;
  width: 100%;
  background-color: #ffffff !important;
  color: #0065ff !important;
  font-weight: 700 !important;
  border-color: #0065ff !important; }

.IncentiveHighLight {
  color: #00af51 !important;
  display: inline-block;
  font-weight: 700; }

table.tableizer-table {
  font-size: 12px;
  border: 1px solid #CCC;
  width: 100%;
  margin-left: 0px !important; }

table.tableizer-table tbody tr:nth-child(2n+2) {
  background-color: #fff !important; }

.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC; }

.tableizer-table th {
  background-color: #104E8B;
  color: #FFF !important;
  font-weight: bold; }

.Blink {
  font-weight: bold !important;
  animation: blinker 1s linear infinite;
  color: #258f23 !important; }

@keyframes blinker {
  50% {
    opacity: 0.4; } }

.downloadBtn {
  box-shadow: 0px 6px 16px #3469cb29 !important;
  width: auto;
  margin: 0px auto 20px !important;
  background-color: #0065ff !important;
  font: normal normal 600 15px/36px Roboto !important;
  color: #fff !important;
  padding: 0px 15px !important; }

.booking_details {
  position: relative; }
  .booking_details ul {
    width: 100%;
    position: relative;
    display: table;
    margin: 0; }
    .booking_details ul > span {
      content: "";
      position: absolute;
      top: -17px;
      left: 0;
      background-color: #fff;
      padding: 5px 13px 5px 0;
      display: inline-block;
      font-size: 14px; }
    .booking_details ul li {
      display: table-cell;
      font-size: 14px;
      padding: 6px 0; }
      .booking_details ul li p,
      .booking_details ul li span {
        color: #808080;
        font-size: 12px; }
      .booking_details ul li p {
        color: #0052cc;
        font-weight: bold; }
      .booking_details ul li span {
        font-weight: 500; }
    .booking_details ul div {
      margin: 0 0 0 0;
      width: 100%;
      display: table; }
  .booking_details .card-body {
    padding: 0; }
  .booking_details ul.top_section {
    width: 100%;
    display: table;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; }
    .booking_details ul.top_section li {
      background: #ffffff;
      vertical-align: middle;
      border-radius: 0 18px 0 0; }
      .booking_details ul.top_section li:first-child {
        display: table-cell;
        background-color: #0052cc;
        padding: 0 0 0 25px;
        margin: 0;
        border-radius: 20px 0 0 0;
        text-align: left;
        width: 40%;
        font-size: 12px;
        font-weight: bold;
        vertical-align: middle;
        position: relative;
        height: 40px;
        color: #ffffff; }
        .booking_details ul.top_section li:first-child:after {
          position: absolute;
          right: -21px;
          top: -31px;
          width: 30px;
          height: 80px;
          content: "";
          background: #0052cc;
          transform: rotate(40deg); }
      .booking_details ul.top_section li:last-child {
        color: #0052cc;
        text-align: right;
        font-size: 16px;
        padding: 10px 15px;
        vertical-align: bottom;
        font-weight: bold; }
  .booking_details ul.top_section1 {
    width: 100%;
    display: table;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    display: none; }
    .booking_details ul.top_section1 li {
      background: #ffffff;
      vertical-align: middle;
      border-radius: 0 20px 0 0; }
      .booking_details ul.top_section1 li:first-child {
        display: table-cell;
        background-color: #e25151;
        padding: 2px 0 0 20px;
        margin: 0;
        border-radius: 20px 0 0 0;
        text-align: left;
        width: 40%;
        font-size: 11px;
        font-weight: bold;
        vertical-align: middle;
        position: relative;
        height: 40px;
        color: #ffffff; }
        .booking_details ul.top_section1 li:first-child > span {
          padding: 0;
          display: inline-block;
          font-size: 10px;
          color: #fff;
          text-align: left;
          display: block; }
        .booking_details ul.top_section1 li:first-child:after {
          position: absolute;
          right: -21px;
          top: -31px;
          width: 30px;
          height: 80px;
          content: "";
          background: #e25151;
          transform: rotate(40deg); }
      .booking_details ul.top_section1 li:last-child {
        color: #0052cc;
        text-align: right;
        font-size: 16px;
        padding: 10px 15px;
        font-weight: bold;
        vertical-align: bottom; }
      .booking_details ul.top_section1 li > em {
        font-style: normal;
        vertical-align: middle; }
        .booking_details ul.top_section1 li > em.reject {
          display: block;
          font-style: normal;
          font-size: 12px;
          padding: 5px 0 0 10px;
          margin: 0;
          line-height: normal; }
      .booking_details ul.top_section1 li > img {
        vertical-align: middle; }
  .booking_details:hover ul.top_section1 {
    display: table;
    width: 100%;
    cursor: pointer; }
  .booking_details .icons_block {
    display: table;
    width: 100%;
    padding: 0;
    margin: 50px 0 7px 0; }
    .booking_details .icons_block > div {
      display: table-cell;
      width: 50%;
      margin: 0;
      padding: 0;
      vertical-align: middle;
      position: relative; }
      .booking_details .icons_block > div > em {
        font-style: normal;
        margin: 0 10px 0 0;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        background: #fdd6cc;
        display: inline-block;
        text-align: center;
        vertical-align: middle; }
        .booking_details .icons_block > div > em > img {
          margin: 8px 0 0 0;
          vertical-align: middle; }
        .booking_details .icons_block > div > em > i.fa-ticket-alt {
          transform: rotate(40deg); }
      .booking_details .icons_block > div > span {
        color: #fff;
        margin: 2px 0;
        display: inline-block;
        padding: 0px 8px;
        font-size: 10px;
        border-radius: 10px 0px 10px 11px;
        background-color: #174cff;
        position: absolute;
        right: 0;
        z-index: 0;
        top: -35px; }
      .booking_details .icons_block > div > hr {
        width: 100%;
        border-top: 1px dashed #0152cc;
        border-width: 2px; }

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

.toggle_section {
  text-align: center; }

.toggle_box {
  background-color: #fff;
  width: 90%;
  padding: 0px;
  font-size: 10px;
  text-align: center;
  color: #935d2d;
  position: relative;
  font-weight: bold;
  border-radius: 0 0 20px 20px;
  box-shadow: 0px 27px 16px #0000001a;
  margin: 0 auto; }
  .toggle_box .inner-box {
    background: #ffd474;
    color: #9a5c1b;
    padding: 6px 0;
    width: 100%;
    right: 0;
    margin: 0;
    top: 0;
    border-radius: 0 0 20px 20px;
    font-weight: bold;
    font-size: 12px; }
  .toggle_box .topshadow {
    opacity: 0.2;
    width: 100%;
    border-top: 1px solid #0000002b; }

.txt-area {
  text-align: left;
  padding-left: 10px; }
  .txt-area label {
    color: #050505;
    font-size: 12px;
    margin: 0;
    line-height: 13px;
    font-weight: 500; }
    .txt-area label span {
      display: block;
      color: #ff0000; }
      .txt-area label span.done-txt {
        color: #1ab975; }

.customer-history .card {
  border-radius: 20px;
  box-shadow: 0px 0px 26px #0000001a; }
  .customer-history .card .card-body {
    padding: 15px 15px 0; }

.customer-history .custumer-heading h6 {
  text-align: right;
  font-size: 18px;
  letter-spacing: 0px;
  color: #1f3b95;
  padding: 15px; }

.customer-history ul {
  width: 100%;
  display: table;
  padding: 10px 0;
  position: relative;
  border-top: 1px dashed #d0c9c9; }
  .customer-history ul > span {
    top: -17px;
    left: 0;
    color: #1f3b95;
    content: "";
    display: inline-block;
    padding: 5px 13px 5px 0;
    position: absolute;
    font-size: 16px;
    letter-spacing: 0px;
    background-color: #fff; }
  .customer-history ul li {
    width: 50%;
    display: inline-table;
    padding: 10px 0;
    font-size: 14px; }
    .customer-history ul li div {
      margin: 10px 0; }
    .customer-history ul li p,
    .customer-history ul li span {
      font-size: 12px; }
    .customer-history ul li span {
      font: Regular 12px/15px Roboto;
      color: #1f3b95;
      font-size: 11px;
      font-weight: 500; }
    .customer-history ul li:nth-child(1) p {
      color: #000000; }
    .customer-history ul li:last-child {
      text-align: right; }
      .customer-history ul li:last-child > p {
        color: #1f3b95;
        font-size: 12px; }

.ticket-all {
  padding: 20px 10px;
  align-items: center; }

.ticket {
  background-color: #ebebeb;
  padding: 9px;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  display: block;
  line-height: 28px;
  margin: 8px 0 0 11px; }
  .ticket > img {
    margin: 4px; }

.ticket-view {
  position: relative;
  padding: 0 0 10px;
  font-size: 12px; }
  .ticket-view > span {
    font-size: 12px;
    color: #808080; }
    .ticket-view > span > img {
      margin: 4px; }
  .ticket-view > p {
    font-size: 14px;
    color: #253858; }
  .ticket-view .ticket-date {
    width: 100%;
    display: block;
    padding: 7px 15px 0;
    font-size: 9px !important;
    text-align: right; }

header {
  box-shadow: 0px 3px 6px #00000029;
  background-color: #fff; }
  @media only screen and (min-width: 360px) and (max-width: 767px) {
    header {
      background: #F4F6F8 !important;
      box-shadow: none !important; } }

.tabLayout {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  max-width: 405px;
  width: 100%;
  margin: auto; }
  @media screen and (max-width: 767px) {
    .tabLayout {
      max-width: 100%; } }
  .tabLayout .MuiTab-textColorInherit {
    background: #edf0f4 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    font: normal normal normal 14px/19px Roboto;
    letter-spacing: 0px;
    color: #778397;
    text-transform: capitalize;
    padding: 0px 20px;
    overflow: unset;
    margin-top: 10px; }
    .tabLayout .MuiTab-textColorInherit:last-child::after {
      content: "";
      background: url(/images/incentive/star.svg) no-repeat right;
      width: 30px;
      height: 30px;
      animation: blink 1s linear infinite;
      position: absolute;
      top: -17px;
      right: 15px; }

@keyframes blink {
  0% {
    opacity: 0.3; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }
    @media (max-width: 767px) {
      .tabLayout .MuiTab-textColorInherit {
        background: #D8D8D8;
        font-size: 12.5px;
        color: #25385899;
        padding: 0px 12px 0px 20px;
        max-width: 175px;
        width: 100%; } }
  .tabLayout .MuiTabs-fixed {
    overflow: unset; }
  .tabLayout .Mui-selected {
    background: #ffffff;
    box-shadow: 0px 6px 16px #3469cb29;
    border-radius: 8px;
    opacity: 1;
    color: #0065ff; }
    .tabLayout .Mui-selected:last-child::after {
      display: none; }
    @media (max-width: 767px) {
      .tabLayout .Mui-selected {
        max-width: 158px;
        width: 100%;
        font-size: 12.5px;
        padding: 0;
        margin-left: 1px; } }
  .tabLayout .MuiTabs-flexContainer {
    margin-bottom: 20px; }
    @media (max-width: 767px) {
      .tabLayout .MuiTabs-flexContainer {
        justify-content: center; } }

.incentiveCriteraPopup {
  float: right;
  text-align: center;
  font: normal normal 600 14px/19px Roboto;
  letter-spacing: 0px;
  color: #0065ff;
  opacity: 1;
  margin-bottom: 20px;
  margin-right: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (max-width: 767px) {
    .incentiveCriteraPopup {
      float: none !important; } }

.CriteraPopup {
  z-index: 99999 !important; }

.CriteraSidebar .MuiDrawer-paper {
  width: 89%; }

.alignLeft {
  float: left; }
  @media screen and (max-width: 767px) {
    .alignLeft {
      margin-bottom: 10px; } }

/* ranking-box */
.ranking-data {
  box-shadow: none;
  position: relative;
  top: -12px; }
  @media (max-width: 767px) {
    .ranking-data {
      top: -18px; } }
  .ranking-data .rank-box {
    position: relative;
    background: transparent url(/images/incentive/ranking-block-bg.svg) no-repeat top right;
    border-radius: 18px;
    padding: 90px 0 0 3px;
    z-index: 99;
    left: 12px;
    top: 0px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
    @media (max-width: 767px) {
      .ranking-data .rank-box {
        padding: 0;
        top: 0px;
        background: transparent !important;
        margin: 90px auto 0px; } }
    .ranking-data .rank-box .rank-box-left-section {
      width: 63%; }
      @media (max-width: 767px) {
        .ranking-data .rank-box .rank-box-left-section {
          width: 100%; } }
      @media (max-width: 767px) {
        .ranking-data .rank-box .rank-box-left-section .name-description {
          margin: 13px 0px 20px;
          position: relative; } }
      .ranking-data .rank-box .rank-box-left-section .name-description strong {
        text-align: left;
        font: normal normal bold 32px/40px Merriweather;
        letter-spacing: 0px;
        color: #00458b;
        text-transform: capitalize;
        opacity: 1; }
        @media (max-width: 767px) {
          .ranking-data .rank-box .rank-box-left-section .name-description strong {
            font: normal normal bold 21px/25px Merriweather;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 220px; } }
      .ranking-data .rank-box .rank-box-left-section .name-description p {
        text-align: left;
        font: normal normal 600 12px/19px Roboto;
        letter-spacing: 0px;
        color: #00458b;
        opacity: 1;
        margin-top: 8px; }
        @media (max-width: 767px) {
          .ranking-data .rank-box .rank-box-left-section .name-description p {
            margin-top: 5px;
            font-size: 14px;
            font-weight: 500; } }
      .ranking-data .rank-box .rank-box-left-section .name-description .month-view {
        padding: 8px;
        width: 120px;
        background: #ffffff 0% 0% no-repeat padding-box;
        box-shadow: 0px 6px 16px #3469cb29;
        border-radius: 4px;
        opacity: 1;
        height: 32px;
        margin: 22px 0px;
        display: inline-block;
        text-align: center; }
        @media (max-width: 767px) {
          .ranking-data .rank-box .rank-box-left-section .name-description .month-view {
            position: absolute;
            right: 24px;
            top: 0;
            margin: auto;
            display: block;
            height: 34px;
            padding: 10px 0px 10px 6px;
            width: 104px;
            height: 34px;
            text-align: left; } }
        .ranking-data .rank-box .rank-box-left-section .name-description .month-view select {
          border: transparent;
          opacity: 1;
          font: normal normal normal 12px/16px Roboto;
          letter-spacing: 0px;
          color: #253858; }
          @media (max-width: 767px) {
            .ranking-data .rank-box .rank-box-left-section .name-description .month-view select {
              width: 95%; } }
      .ranking-data .rank-box .rank-box-left-section .highlights h4 {
        text-align: left;
        font: normal normal bold 16px/24px Roboto;
        letter-spacing: 0px;
        color: #253858;
        margin-bottom: 5px; }
      .ranking-data .rank-box .rank-box-left-section .highlights .slick-slider .slick-slide .highlights-description {
        font: normal normal normal 12px/24px Roboto;
        letter-spacing: 0px;
        color: #253858; }
      .ranking-data .rank-box .rank-box-left-section .highlights .slick-dots li {
        margin: 0 10px 0px 0px !important; }
    .ranking-data .rank-box .rank-box-right-section {
      width: 37%;
      height: auto; }
      @media (max-width: 767px) {
        .ranking-data .rank-box .rank-box-right-section {
          width: 100%; } }
      .ranking-data .rank-box .rank-box-right-section ul {
        margin-top: 78px; }
        @media (max-width: 767px) {
          .ranking-data .rank-box .rank-box-right-section ul {
            margin: 0px; } }
        .ranking-data .rank-box .rank-box-right-section ul li {
          width: 215px;
          background: #ffffff 0% 0% no-repeat padding-box;
          box-shadow: 0px 6px 16px #3469cb29;
          border-radius: 8px;
          list-style: none;
          position: relative;
          padding: 10px 10px 10px 65px;
          margin-bottom: 17px;
          right: 24px; }
          @media (max-width: 767px) {
            .ranking-data .rank-box .rank-box-right-section ul li {
              width: 93% !important;
              right: 0 !important;
              top: 0 !important;
              text-align: left;
              display: flex;
              align-items: center;
              padding: 10px 11px 10px 66px;
              justify-content: space-between;
              height: 66px; } }
          .ranking-data .rank-box .rank-box-right-section ul li::before {
            content: "";
            background: url(/images/incentive/icon_rank.svg);
            position: absolute;
            height: 42px;
            width: 42px;
            left: 15px;
            top: 50%;
            transform: translateY(-50%); }
          .ranking-data .rank-box .rank-box-right-section ul li:first-child {
            right: 71px;
            top: -5px; }
          @media (max-width: 767px) {
            .ranking-data .rank-box .rank-box-right-section ul li:last-child {
              margin-bottom: 5px; } }
          @media (max-width: 767px) {
            .ranking-data .rank-box .rank-box-right-section ul li span.label {
              font-size: 14px;
              color: #253858;
              line-height: 1.9;
              font-weight: 600;
              margin-bottom: 0; }
            .ranking-data .rank-box .rank-box-right-section ul li .label h4 {
              font-size: 10.4px;
              font-weight: 400;
              line-height: 18px; } }
      .ranking-data .rank-box .rank-box-right-section .background-caricrature {
        background: url(/images/incentive/ranking-block-right-caricrature.svg) no-repeat right top;
        position: absolute;
        right: 137px;
        top: 20px;
        width: 100px;
        height: 240px; }

/*End ranking-box */
/*Help Icon  css*/
.UserHelp {
  position: fixed;
  bottom: 15px;
  z-index: 99;
  right: 40px; }

/*End */
.PayoutSection {
  padding: 0px !important;
  position: relative;
  overflow-x: hidden;
  /*booking-table */
  /*END booking-table css */ }
  .PayoutSection .mainBox {
    width: 100%;
    justify-content: space-between;
    position: relative;
    /*leader-board */
    /* end leader-boader css*/
    /* incentivebox css*/
    /* end incentive css*/
    /* payout css*/
    /* end Payout css*/ }
    .PayoutSection .mainBox .bgImage {
      background: url(/images/incentive/bg2.svg) no-repeat right top;
      position: absolute;
      left: -19px;
      top: -137px;
      width: 600px;
      height: 586px; }
    .PayoutSection .mainBox .leader-board {
      margin: 0px 10px;
      position: relative; }
      .PayoutSection .mainBox .leader-board .lader-ranking {
        min-height: 328px; }
        .PayoutSection .mainBox .leader-board .lader-ranking h6 {
          font: normal normal 600 16px/21px Roboto;
          letter-spacing: 0px;
          color: #253858;
          opacity: 1; }
          .PayoutSection .mainBox .leader-board .lader-ranking h6 span {
            font: normal normal normal 12px/16px Roboto;
            letter-spacing: 0px;
            color: #808080;
            opacity: 1; }
        .PayoutSection .mainBox .leader-board .lader-ranking div.active {
          background: #030303 0% 0% no-repeat padding-box;
          border-radius: 8px;
          opacity: 1;
          color: #ffffff; }
          .PayoutSection .mainBox .leader-board .lader-ranking div.active strong {
            color: #fff !important; }
        .PayoutSection .mainBox .leader-board .lader-ranking li {
          display: inline-block;
          width: 50%;
          font: normal normal normal 12px/16px Roboto;
          letter-spacing: 0px;
          opacity: 1; }
          .PayoutSection .mainBox .leader-board .lader-ranking li strong {
            font: normal normal 600 12px/16px Roboto; }
          .PayoutSection .mainBox .leader-board .lader-ranking li span {
            display: block !important; }
          .PayoutSection .mainBox .leader-board .lader-ranking li:nth-child(odd) strong {
            color: #253858; }
    .PayoutSection .mainBox .incentive {
      margin: 0px 10px;
      position: relative; }
      .PayoutSection .mainBox .incentive .incentive-box {
        min-height: 328px;
        padding: 15px 15px 10px; }
        .PayoutSection .mainBox .incentive .incentive-box h6 {
          font: normal normal 600 16px/21px Roboto;
          letter-spacing: 0px;
          color: #253858;
          opacity: 1;
          padding-left: 0px; }
          .PayoutSection .mainBox .incentive .incentive-box h6 span {
            font: normal normal normal 12px/16px Roboto;
            letter-spacing: 0px;
            color: #808080;
            opacity: 1; }
        .PayoutSection .mainBox .incentive .incentive-box li {
          display: flex;
          margin: 25px 0 10px;
          letter-spacing: 0px;
          justify-content: space-between;
          width: 100%; }
          .PayoutSection .mainBox .incentive .incentive-box li span {
            text-align: left;
            font: normal normal normal 12px/16px Roboto;
            letter-spacing: 0px;
            color: #253858;
            opacity: 1; }
          .PayoutSection .mainBox .incentive .incentive-box li strong {
            text-align: left;
            font: normal normal 600 12px/16px Roboto;
            letter-spacing: 0px;
            color: #253858;
            opacity: 1; }
            .PayoutSection .mainBox .incentive .incentive-box li strong .fa-inr {
              color: #253858;
              font-size: 12px; }
            .PayoutSection .mainBox .incentive .incentive-box li strong .fa-info-circle {
              color: #808080;
              font-size: 16px;
              left: 3px;
              position: relative;
              top: 1px; }
    .PayoutSection .mainBox .payout {
      margin: 0px 10px; }
      .PayoutSection .mainBox .payout .payout-box {
        min-height: 328px;
        padding: 15px 15px 10px; }
        .PayoutSection .mainBox .payout .payout-box h6 {
          font: normal normal 600 16px/21px Roboto;
          letter-spacing: 0px;
          color: #253858;
          opacity: 1;
          padding-left: 0px; }
          .PayoutSection .mainBox .payout .payout-box h6 span {
            font: normal normal normal 12px/16px Roboto;
            letter-spacing: 0px;
            color: #808080;
            opacity: 1; }
        .PayoutSection .mainBox .payout .payout-box li.firstbox {
          margin-bottom: 15px;
          padding: 6px; }
          .PayoutSection .mainBox .payout .payout-box li.firstbox strong {
            text-align: center;
            font: normal normal bold 12px/16px Roboto;
            letter-spacing: 0px;
            color: #0f8d61;
            opacity: 1; }
          .PayoutSection .mainBox .payout .payout-box li.firstbox span {
            font: normal normal bold 18px/24px Roboto;
            letter-spacing: 0px;
            color: #0f8d61;
            text-align: center; }
        .PayoutSection .mainBox .payout .payout-box li span {
          text-align: left;
          font: normal normal normal 12px/16px Roboto;
          letter-spacing: 0px;
          color: #253858;
          opacity: 1; }
          .PayoutSection .mainBox .payout .payout-box li span .warningStatus {
            text-align: center;
            padding-left: 0px;
            background: #620bd9 0% 0% no-repeat padding-box;
            border-radius: 4px;
            font: normal normal bold 10px/13px Roboto;
            letter-spacing: 0px;
            color: #ffffff;
            text-transform: uppercase;
            opacity: 1;
            margin-top: 2px; }
        .PayoutSection .mainBox .payout .payout-box li p {
          font: normal normal bold 12px/16px Roboto;
          letter-spacing: 0px;
          color: #253858; }
  .PayoutSection .booking-table {
    margin: 20px 12px; }
    @media screen and (max-width: 767px) {
      .PayoutSection .booking-table {
        margin: 12px 0px; } }
    .PayoutSection .booking-table h6 {
      display: block;
      text-align: left;
      font: normal normal 600 16px/21px Roboto;
      letter-spacing: 0px;
      color: #253858;
      padding-left: 0px;
      opacity: 1;
      margin-bottom: 2px; }
    .PayoutSection .booking-table span {
      text-align: left;
      font: normal normal normal 12px/16px Roboto;
      letter-spacing: 0px;
      color: #808080;
      opacity: 1;
      margin-top: 3px; }
    .PayoutSection .booking-table ul.booking-table-head {
      background: #ffffff;
      box-shadow: 0px 3px 16px #80808014;
      border-radius: 8px;
      margin-top: 15px; }
      @media screen and (max-width: 767px) {
        .PayoutSection .booking-table ul.booking-table-head {
          display: none; } }
      .PayoutSection .booking-table ul.booking-table-head li {
        font: normal normal bold 12px/16px Roboto;
        letter-spacing: 0px;
        color: #808080;
        opacity: 1; }
    .PayoutSection .booking-table ul {
      display: table;
      padding: 13px 15px;
      width: 100%; }
      .PayoutSection .booking-table ul li {
        color: #273a59; }
  .PayoutSection .currentMonthSlab {
    display: none; }

/*start current month projection tab UI css */
.errorfont {
  color: #f41c1c !important; }

.CurrentMonthProjContainer {
  padding: 0 !important;
  /*feedback box css*/
  /*end css */
  /*verified css */
  /*end css */
  /*start dislike css */ }
  .CurrentMonthProjContainer .CurrentMonthData {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 6px 16px #3469cb29;
    border-radius: 8px;
    opacity: 1;
    width: 100%;
    padding: 5px 20px 0px;
    margin-bottom: 3em;
    position: relative;
    min-height: 302px; }
    @media screen and (max-width: 767px) {
      .CurrentMonthProjContainer .CurrentMonthData {
        width: 93%;
        min-height: auto;
        margin: 0px auto 20px;
        padding: 12px 15px 0px; } }
    .CurrentMonthProjContainer .CurrentMonthData h2 {
      text-align: left;
      font: normal normal 200 24px/36px Roboto;
      letter-spacing: 0px;
      color: #253858;
      padding: 12px 0px; }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData h2 {
          font-size: 20px;
          padding: 5px 0px 0px;
          line-height: 1.4; } }
    .CurrentMonthProjContainer .CurrentMonthData .leftimage {
      position: absolute;
      bottom: 0; }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData .leftimage {
          display: none; } }
    .CurrentMonthProjContainer .CurrentMonthData .caption {
      padding: 3px 20px 3px 15px;
      background: #f5f8ff 0% 0% no-repeat padding-box;
      border-radius: 8px;
      opacity: 1;
      margin: 15px 0px;
      font: italic normal normal 12px/48px Roboto;
      letter-spacing: 0px;
      color: #253858;
      display: flex; }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData .caption {
          line-height: 17px;
          padding: 10px 9px;
          margin: 16px 0px 18px; }
          .CurrentMonthProjContainer .CurrentMonthData .caption b {
            font-weight: 500; } }
      .CurrentMonthProjContainer .CurrentMonthData .caption img {
        margin-right: 10px; }
      .CurrentMonthProjContainer .CurrentMonthData .caption ul {
        margin: auto; }
        .CurrentMonthProjContainer .CurrentMonthData .caption ul li {
          line-height: 20px; }
          @media screen and (max-width: 767px) {
            .CurrentMonthProjContainer .CurrentMonthData .caption ul li {
              margin-bottom: 4px;
              display: block;
              width: 100%;
              position: relative;
              margin-top: 2px; }
              .CurrentMonthProjContainer .CurrentMonthData .caption ul li:last-child {
                margin: 0; }
              .CurrentMonthProjContainer .CurrentMonthData .caption ul li:nth-child(3) {
                padding: 0px 0px 0px 46px; }
              .CurrentMonthProjContainer .CurrentMonthData .caption ul li::before {
                position: absolute;
                content: '';
                top: 8px;
                left: 38px;
                margin: auto;
                border: 2px solid #253858;
                border-radius: 5px; } }
    .CurrentMonthProjContainer .CurrentMonthData .note {
      background: #fffcf0 !important; }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData .note {
          display: block;
          padding: 9px 9px 6px; } }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData .note img {
          float: left;
          margin: 0px 14px 80px 0px; } }
    .CurrentMonthProjContainer .CurrentMonthData .error {
      background: #fbd6d6 !important; }
    .CurrentMonthProjContainer .CurrentMonthData .OpportunityNote {
      background: #f0fff7 !important; }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData .OpportunityNote {
          display: block;
          padding: 8px 9px 4px; } }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData .OpportunityNote img {
          float: left;
          margin: 0px 14px 10px 0px; } }
    .CurrentMonthProjContainer .CurrentMonthData table tr td {
      text-align: left;
      font: normal normal normal 12px/16px Roboto;
      letter-spacing: 0px;
      color: #253858;
      opacity: 1;
      overflow-x: hidden;
      padding: 6px 0px !important; }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData table tr td {
          opacity: .7;
          line-height: 17px;
          padding: 10px 5px 10px 0 !important;
          width: 100%;
          white-space: normal; } }
      .CurrentMonthProjContainer .CurrentMonthData table tr td:last-child {
        text-align: right;
        font: normal normal 600 14px/24px Roboto;
        letter-spacing: 0px;
        color: #253858; }
        @media screen and (max-width: 767px) {
          .CurrentMonthProjContainer .CurrentMonthData table tr td:last-child {
            opacity: 1;
            padding: 0px !important; } }
      @media screen and (max-width: 767px) {
        .CurrentMonthProjContainer .CurrentMonthData table tr td i {
          font-style: normal; } }
    .CurrentMonthProjContainer .CurrentMonthData table tr .highlight {
      color: #00af51 !important;
      font-weight: 600 !important; }
  .CurrentMonthProjContainer .feedbackBox {
    background: #e8effd 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    text-align: center;
    padding: 40px; }
    @media screen and (max-width: 767px) {
      .CurrentMonthProjContainer .feedbackBox {
        padding: 30px;
        width: 100%;
        max-width: 93%;
        margin: auto; } }
    .CurrentMonthProjContainer .feedbackBox p {
      color: #4d5c76;
      font: normal normal 600 18px/36px Roboto;
      margin-top: 20px; }
    .CurrentMonthProjContainer .feedbackBox .thumbIcon {
      background: #ffffff 0% 0% no-repeat padding-box;
      box-shadow: 0px 6px 16px #3469cb29;
      border-radius: 4px;
      opacity: 1;
      display: inline-flex;
      padding: 3px 15px;
      justify-content: space-evenly;
      width: 92px;
      align-items: center;
      margin: 15px 10px;
      cursor: pointer;
      color: #219117;
      font: normal normal 600 18px/36px Roboto; }
      .CurrentMonthProjContainer .feedbackBox .thumbIcon:last-child {
        color: #ff4343; }
      .CurrentMonthProjContainer .feedbackBox .thumbIcon svg {
        font-size: 16px; }
    .CurrentMonthProjContainer .feedbackBox .feedbackIcon {
      color: #b9ceff;
      font-size: 52px; }
  .CurrentMonthProjContainer .verifiedBox {
    background: #c3ffd0 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    text-align: center;
    padding: 40px; }
    .CurrentMonthProjContainer .verifiedBox p {
      color: #4d5c76;
      font: normal normal 600 18px/36px Roboto;
      margin-top: 20px; }
  .CurrentMonthProjContainer .dislike {
    background: #ffdbdb 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    text-align: center;
    padding: 40px; }
    .CurrentMonthProjContainer .dislike p {
      color: #4d5c76;
      font: normal normal 600 18px/36px Roboto;
      margin-top: 20px; }
    .CurrentMonthProjContainer .dislike .thumbIcon {
      background: #ffffff 0% 0% no-repeat padding-box;
      box-shadow: 0px 6px 16px #3469cb29;
      border-radius: 4px;
      opacity: 1;
      display: inline-flex;
      padding: 3px 15px;
      justify-content: space-evenly;
      width: 92px;
      align-items: center;
      margin: 15px 10px;
      cursor: pointer;
      color: #219117;
      font: normal normal 600 18px/36px Roboto; }
      .CurrentMonthProjContainer .dislike .thumbIcon:nth-child(even) {
        color: #fff;
        background-color: #ff4343; }
      .CurrentMonthProjContainer .dislike .thumbIcon svg {
        font-size: 16px; }
    .CurrentMonthProjContainer .dislike .feedbackIcon {
      color: #f41c1c;
      font-size: 52px; }
    .CurrentMonthProjContainer .dislike .radioBtn {
      flex-direction: row;
      margin-top: 20px; }
      .CurrentMonthProjContainer .dislike .radioBtn .MuiIconButton-colorSecondary {
        color: #5e6c84 !important; }
      .CurrentMonthProjContainer .dislike .radioBtn .Mui-checked {
        color: #0065ff !important; }
      .CurrentMonthProjContainer .dislike .radioBtn .MuiFormControlLabel-label {
        text-align: left;
        font: normal normal normal 16px/22px Roboto;
        letter-spacing: 0px;
        color: #253858;
        opacity: 1; }
  .CurrentMonthProjContainer .currentMonthSlab {
    background: #fffdea;
    box-shadow: 0px 0px 16px #3469cb29;
    border-radius: 8px;
    opacity: 1;
    width: 390px;
    padding: 15px; }
    @media (max-width: 767px) {
      .CurrentMonthProjContainer .currentMonthSlab {
        width: 93%;
        margin-bottom: 20px; } }
    .CurrentMonthProjContainer .currentMonthSlab h3 {
      text-align: left;
      font: normal normal 600 18px/24px roboto;
      letter-spacing: 0px;
      color: #ea9959;
      opacity: 1; }
    .CurrentMonthProjContainer .currentMonthSlab p {
      text-align: left;
      font: normal normal normal 12px/18px Roboto;
      letter-spacing: 0px;
      color: #253858;
      margin: 15px 0px 10px 0px; }
      .CurrentMonthProjContainer .currentMonthSlab p div {
        float: left;
        width: 30px;
        height: 20px;
        padding-top: 2px; }
        @media screen and (max-width: 767px) {
          .CurrentMonthProjContainer .currentMonthSlab p div {
            height: 32px;
            width: 25px; } }
  .CurrentMonthProjContainer .highlights {
    display: none; }
  .CurrentMonthProjContainer .month-view {
    display: none !important; }

.how-it-works-section {
  padding: 15px 16px;
  background: transparent;
  align-items: inherit; }
  @media screen and (max-width: 767px) {
    .how-it-works-section {
      align-items: center;
      padding: 15px 0px; } }
  .how-it-works-section .text-center {
    text-align: center; }
  .how-it-works-section h3 {
    text-align: center;
    font: normal normal bold 24px/16px Roboto;
    letter-spacing: 4.08px;
    color: #253858;
    opacity: 1;
    margin-top: 50px;
    margin-bottom: 15px; }
    @media screen and (max-width: 767px) {
      .how-it-works-section h3 {
        margin: 18px 0px 15px; } }
  .how-it-works-section p {
    text-align: left;
    font: normal normal normal 14px/24px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1;
    padding-left: 32px;
    padding-bottom: 10px; }
    @media screen and (max-width: 767px) {
      .how-it-works-section p {
        padding-bottom: 0px;
        padding-left: 0; } }
  .how-it-works-section h4 {
    color: #0065ff;
    padding-left: 14px;
    font: normal normal 600 16px/24px Roboto;
    margin-bottom: 5px; }
  .how-it-works-section span {
    text-align: left;
    font: normal normal 600 18px/18px Roboto;
    letter-spacing: 0px;
    color: #253858;
    opacity: 1; }
  .how-it-works-section img {
    text-align: center;
    margin: 0px 15px 0 0px; }
  .how-it-works-section .steps {
    padding: 0px 20px 20px; }
    @media screen and (max-width: 767px) {
      .how-it-works-section .steps {
        padding: 10px 0px;
        width: 100%; } }
    .how-it-works-section .steps .incentive-slab {
      margin-top: 0px; }
      .how-it-works-section .steps .incentive-slab .slab {
        text-align: center; }
        .how-it-works-section .steps .incentive-slab .slab p {
          font-size: 10px;
          color: #303030;
          line-height: 16px;
          padding: 13px 0;
          text-align: center;
          margin: 0; }
        .how-it-works-section .steps .incentive-slab .slab.slab-4 {
          background: url(/images/slab-yellow-bg.svg) no-repeat center; }
        .how-it-works-section .steps .incentive-slab .slab.slab-3 {
          background: url(/images/slab-blue-bg.svg) no-repeat center; }
        .how-it-works-section .steps .incentive-slab .slab.slab-2 {
          background: url(/images/slab-green-bg.svg) no-repeat center; }
        .how-it-works-section .steps .incentive-slab .slab.slab-1 {
          background: url(/images/slab-red-bg.svg) no-repeat center; }
    .how-it-works-section .steps > ul {
      padding: 10px 0px 0; }
      @media screen and (max-width: 767px) {
        .how-it-works-section .steps > ul {
          padding: 10px 10px 0; } }
      .how-it-works-section .steps > ul .icon-warning {
        align-items: center; }
      .how-it-works-section .steps > ul .icon-files {
        align-items: center; }
      .how-it-works-section .steps > ul li {
        color: #253858;
        font-size: 16px;
        line-height: 24px;
        list-style: none;
        margin-bottom: 15px;
        display: flex;
        align-items: baseline;
        justify-content: flex-start; }
        .how-it-works-section .steps > ul li:last-child {
          margin-bottom: 10px; }
        .how-it-works-section .steps > ul li p {
          width: 100%;
          text-align: left;
          font: normal normal normal 16px/24px Roboto;
          letter-spacing: 0px;
          color: #253858;
          opacity: 1;
          display: contents; }
        .how-it-works-section .steps > ul li span {
          font-size: 12px;
          height: 48px;
          padding: 20px;
          width: 48px;
          display: inline-flex;
          align-items: CENTER;
          justify-content: CENTER;
          border-radius: 50%;
          color: #fff;
          margin-right: 12px; }
          .how-it-works-section .steps > ul li span.pink {
            background: #f3a191; }
          .how-it-works-section .steps > ul li span.purple {
            background: #868cf1; }
          .how-it-works-section .steps > ul li span.blue {
            background: #4d5c7e; }
        .how-it-works-section .steps > ul li h5 {
          padding-left: 59px; }
        .how-it-works-section .steps > ul li .pera {
          padding-left: 59px;
          display: block; }
    .how-it-works-section .steps div {
      padding: 0 0px; }
      .how-it-works-section .steps div p {
        font-size: 14px;
        margin: 5px 0 0 27px;
        text-align: center; }
    .how-it-works-section .steps table {
      border-collapse: collapse;
      border-radius: 4px;
      margin-left: 90px; }
      .how-it-works-section .steps table thead tr {
        background: #acc4ff;
        border-radius: 0px; }
      .how-it-works-section .steps table tbody tr:nth-child(2n + 2) {
        background: #ededed; }
      .how-it-works-section .steps table tr th,
      .how-it-works-section .steps table tr td {
        padding: 4px;
        letter-spacing: 0px;
        color: #253858;
        font-size: 14px;
        border-radius: 0;
        border: 1px solid #dddddd; }
        .how-it-works-section .steps table tr th:last-child,
        .how-it-works-section .steps table tr td:last-child {
          border-radius: 0; }
    .how-it-works-section .steps.step-3 ul li {
      margin-bottom: 25px; }
      .how-it-works-section .steps.step-3 ul li img {
        margin: 0 12px 0 0; }

.IncentiveHighLight {
  color: #00af51 !important;
  display: inline-block;
  font-weight: 700;
  font-size: 15px; }

.motorTableCal {
  width: 100%;
  border-collapse: collapse; }
  .motorTableCal td {
    border: none;
    text-align: left;
    padding-left: 10px; }
    .motorTableCal td:last-child {
      text-align: right;
      width: 14%; }
  .motorTableCal th {
    border: none;
    text-align: left;
    padding-left: 10px;
    padding: 7px; }
    .motorTableCal th:last-child {
      text-align: right;
      width: 14%; }
  .motorTableCal .areaWidth {
    width: 195px; }

.AchievementBox {
  min-height: 328px;
  padding: 15px 15px 10px; }
  .AchievementBox .motorIncentive {
    width: 100%;
    margin-top: 43px; }
    .AchievementBox .motorIncentive td {
      text-align: right;
      width: 15%; }
    .AchievementBox .motorIncentive th {
      text-align: left;
      width: 15%; }

.motorIncentive {
  width: 100%; }
  .motorIncentive td, .motorIncentive th {
    text-align: left;
    width: 15%; }

.crossButton {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 22px; }

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

html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

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

body {
  background-color: #fafafa;
  height: 100%;
  font-family: "Roboto", sans-serif;
  -ms-overflow-style: none; }
  body::-webkit-scrollbar {
    display: none; }

.tool-bar {
  box-shadow: 0px 3px 6px #00000029; }

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

.pading-zero {
  padding: 0; }

.card {
  background: #ffffff;
  box-shadow: 0px 0px 26px #0000001a;
  border-radius: 20px; }

a {
  text-decoration: none; }

#root {
  height: 100%; }

.title {
  position: relative;
  margin: 12px 0;
  display: flex;
  align-items: baseline;
  padding: 0 16px !important; }
  .title > div > span {
    font-size: 16px;
    color: #495973;
    position: relative;
    font-weight: 700; }
  @media (min-width: 600px) {
    .title {
      flex-direction: row;
      height: auto; } }
  .title .firstbox {
    width: 100%; }

.inner-mobile {
  display: flex;
  flex-wrap: wrap; }
  @media (min-width: 960px) {
    .inner-mobile {
      display: none; } }
  .inner-mobile .firstbox {
    width: 100%; }

.inner-desktop {
  min-width: 800px;
  width: 100%;
  border-radius: 5px 5px 0 0;
  display: none; }
  @media (min-width: 960px) {
    .inner-desktop {
      display: block; } }

.logo-container {
  justify-content: center !important;
  margin-bottom: 25px; }

.MuiIconButton-root {
  color: #495973 !important;
  background-color: red; }

.wrapper {
  padding: 24px; }

/*-------------------Pragya-02-Feb-2022---------------------------*/
.mobile-view,
.items-list {
  display: none; }

.CurrentMonthData .MuiAccordion-rounded {
  border-radius: 0px !important;
  box-shadow: none !important; }

.motorIncentive-header,
.motorIncentive-content {
  width: 100%; }

.motorIncentive-content tbody tr th {
  text-align: left; }

.motorIncentive-content tbody tr th:last-child {
  text-align: right; }

.CurrentMonthData .MuiAccordionSummary-content {
  display: block !important;
  margin: 0 !important; }

.CurrentMonthData .MuiAccordionSummary-root {
  padding: 0 !important;
  min-height: auto !important;
  align-items: baseline !important; }

.CurrentMonthData .MuiAccordionDetails-root {
  padding: 0px 5px 0px 0px !important; }

.web-common {
  margin-top: 10px; }

.MuiIconButton-edgeEnd {
  padding: 0px !important;
  margin: auto !important; }

.payout-box li.modal-popup span {
  width: auto;
  white-space: nowrap; }

.payout-box li.modal-popup p {
  width: 100%; }

.payout-box li p.border-text:after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  border-bottom: 1px dashed #ed3434; }

button.tooltip {
  border: 0px !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important; }

#panel1a-content p {
  margin-left: 3px !important; }

/* -----------------------Gunjan-12-4-22(health Renewal)---------------*/
.HealthRenewal .payout .payout-box {
  height: 410px; }
  .HealthRenewal .payout .payout-box h6 {
    text-align: left;
    font: normal normal bold 18px/24px Roboto;
    letter-spacing: 0px;
    color: #3b3e51;
    text-transform: capitalize;
    opacity: 1; }
  .HealthRenewal .payout .payout-box li {
    border-bottom: 1px solid #6c75a633;
    border-radius: 0;
    color: #3b3e51 !important;
    padding: 10px 20px; }
    .HealthRenewal .payout .payout-box li span {
      font: normal normal 600 14px/26px Roboto;
      color: #3b3e51; }
    .HealthRenewal .payout .payout-box li p {
      font: normal normal 500 14px/26px Roboto;
      color: #3b3e51; }
  .HealthRenewal .payout .payout-box .firstbox {
    border-radius: 8px !important;
    border-bottom: none !important;
    margin-bottom: 12px; }

.HealthRenewal .green {
  color: #0F8D61;
  font-weight: 600 !important; }

.HealthRenewal .lightgreen {
  background: #E6FFF7 0% 0% no-repeat padding-box; }

.HealthRenewal .HealthRenewalCommanView {
  padding: 15px 15px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0px 0px 16px #00000014;
  height: 410px; }
  .HealthRenewal .HealthRenewalCommanView h6 {
    text-align: left;
    font: normal normal bold 18px/24px Roboto;
    letter-spacing: 0px;
    color: #3b3e51;
    text-transform: capitalize;
    opacity: 1; }
  .HealthRenewal .HealthRenewalCommanView table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0; }
    .HealthRenewal .HealthRenewalCommanView table thead tr th {
      background: #ebf0f8 0% 0% no-repeat padding-box;
      padding: 6px 20px;
      font: normal normal bold 12px/24px Roboto;
      letter-spacing: 0.17px;
      color: #3b3e51;
      text-transform: capitalize;
      opacity: 1;
      text-align: center; }
      .HealthRenewal .HealthRenewalCommanView table thead tr th:first-child {
        border-radius: 18px 0px 0px 18px;
        text-align: left; }
      .HealthRenewal .HealthRenewalCommanView table thead tr th:last-child {
        border-radius: 0px 18px 18px 0px;
        text-align: right; }
    .HealthRenewal .HealthRenewalCommanView table tbody tr td {
      text-align: center;
      font: normal normal normal 14px/24px Roboto;
      letter-spacing: 0.2px;
      color: #3b3e51;
      padding: 6px 20px;
      opacity: 1;
      border-bottom: 1px solid #6c75a633; }
      .HealthRenewal .HealthRenewalCommanView table tbody tr td:first-child {
        font: normal normal 600 14px/24px Roboto;
        text-align: left; }
      .HealthRenewal .HealthRenewalCommanView table tbody tr td:last-child {
        text-align: right; }
    .HealthRenewal .HealthRenewalCommanView table tbody tr:first-child td {
      padding-top: 10px; }

.HealthRenewal .height230 {
  height: 230px; }

/*-----------------------Pragya-02-May-2022-----------------*/
.crossButton {
  right: 20px;
  cursor: pointer; }

.how-it-works-section.latest-list h3 {
  margin-top: 35px; }

.how-it-works-section.latest-list p {
  padding-left: 15px;
  padding-bottom: 7px; }

.how-it-works-section.latest-list ul {
  list-style: none;
  padding: 0;
  margin: 0; }

.how-it-works-section.latest-list ul li:before,
.how-it-works-section.latest-list ul.main-list.core-list ul.main-list.agent-list li:before {
  position: absolute;
  content: "";
  top: 7px;
  left: 0;
  margin: auto;
  border: 3px solid #253858;
  border-radius: 3px;
  display: block; }

.how-it-works-section.latest-list ul li {
  text-align: left;
  font: normal normal normal 14px/24px Roboto;
  letter-spacing: 0px;
  color: #253858;
  opacity: 1;
  padding-left: 15px;
  padding-bottom: 10px;
  position: relative;
  line-height: 1.4; }

.how-it-works-section.latest-list ul.main-list {
  padding-left: 30px;
  margin-bottom: 10px; }

.how-it-works-section.latest-list ul li ul.inner-list li:before {
  border: 1px solid #253858;
  background: #fff;
  width: 6px;
  height: 6px;
  left: 22px; }

.how-it-works-section.latest-list ul li ul.inner-list li {
  padding-left: 38px;
  padding-bottom: 4px; }

.how-it-works-section.latest-list ul.main-list.slab-list {
  padding-left: 38px; }

.how-it-works-section.latest-list ul.main-list.slab-list li:before,
.how-it-works-section.latest-list ul.main-list.core-list li:before {
  display: none; }

.how-it-works-section.latest-list ul.main-list.bullet-list {
  padding-left: 35px; }

.how-it-works-section.latest-list ul.main-list.bullet-list li,
.how-it-works-section.latest-list ul.main-list.core-list li {
  padding-bottom: 4px; }

.how-it-works-section.latest-list ul.main-list.core-list {
  padding-left: 0;
  margin-bottom: 0; }

.how-it-works-section.latest-list h3.upsell-incentive {
  margin-top: 14px;
  text-align: left;
  color: #0065ff;
  letter-spacing: 2px;
  margin-bottom: 16px; }

.how-it-works-section.latest-list table tr p.amt-text,
.how-it-works-section.latest-list table td p {
  text-align: center;
  padding: 4px; }

.how-it-works-section.latest-list table td p {
  padding: 2px 10px;
  line-height: 1.2; }

.warriors {
  width: 100px;
  background: transparent linear-gradient(91deg, #ddccf580 0%, #f5efff80 100%) 0% 0% no-repeat padding-box !important;
  border-radius: 4px !important;
  font: normal normal normal 16px/21px Roboto !important;
  letter-spacing: 0px !important;
  color: #000000 !important; }
  .warriors td:nth-child(3n+1) {
    font-weight: 600 !important; }

/*------------------------------media-css---------------------*/
@media all and (max-width: 768px) {
  .wrapper,
  .bg-color {
    padding: 15px; }
    .wrapper .proceedBtn,
    .bg-color .proceedBtn {
      font-size: 11px; }
  .HealthRenewal .HealthRenewalCommanView {
    height: auto; }
  .HealthRenewal .height230 {
    height: auto; }
  .HealthRenewal .payout .payout-box {
    height: auto; } }

@media (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none; }
  .tool-bar {
    box-shadow: none;
    padding-right: 0px !important; }
  .mobile-view {
    display: block; }
  .logo.mobile-view {
    background: url("/images/pblogo.svg") no-repeat center;
    background-size: contain;
    height: 25px;
    width: 100%;
    margin: auto; }
  .wrapper {
    padding: 20px 16px;
    overflow-x: hidden;
    margin-top: 50px; }
  .ranking-data .rank-box .rank-box-right-section ul li.rank:before {
    background: url(/images/incentive/icon_rank.svg) !important; }
  .ranking-data .rank-box .rank-box-right-section ul li.slab:before {
    background: url(/images/incentive/Slab.svg) no-repeat right !important; }
  .tabLayout .Mui-selected {
    z-index: 10001; }
  .tabLayout .payout {
    max-width: 158px; }
  .tabLayout .CMP {
    margin-left: -10px;
    max-width: 180px; }
  .items-list {
    display: flex;
    list-style: none;
    overflow-x: scroll;
    white-space: nowrap;
    margin: 0px auto 30px;
    align-items: center;
    box-shadow: 0px 3px 8px #00000066;
    -webkit-box-shadow: 0px 3px 8px #00000066;
    height: 48px;
    background: #fff;
    padding: 0px 2px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001; }
  .items-list .MuiTab-root {
    opacity: 1;
    position: relative; }
  .items-list .MuiTab-root.active {
    color: #0065ff;
    font-weight: 600; }
  .items-list .MuiTab-root.active:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-bottom: 2px solid #0065ff;
    width: 90%; }
  .common-view .MuiCard-root {
    border-radius: 8px;
    margin: 0px 12px; }
  .CurrentMonthProjContainer .currentMonthSlab p.add div {
    height: 38px; }
  .currentMonthSlab a {
    font-weight: 600;
    white-space: nowrap; }
  .PayoutContainer .bookingTable {
    background: transparent;
    box-shadow: none;
    border-radius: 0; }
  .web-common {
    margin-top: 0px; }
  .motorIncentive-content {
    margin-top: -10px; }
  .motorIncentive-header tr td:last-child {
    white-space: nowrap; }
  .CurrentMonthProjContainer .CurrentMonthData table tr td.last-text {
    padding: 13px 8px 13px 0px !important; }
  .MuiIconButton-edgeEnd {
    color: #253858 !important;
    margin: auto -6px auto -4px !important; }
  .MuiAccordionDetails-root {
    padding: 0px !important;
    width: 100%;
    display: block !important; }
  .CurrentMonthProjContainer .CurrentMonthData .MuiAccordionDetails-root table.motorIncentive-content tr {
    position: relative;
    width: 100%;
    display: table-row; }
  .CurrentMonthProjContainer .CurrentMonthData .MuiAccordionDetails-root table.motorIncentive-content tr:last-child {
    border-bottom: 0; }
  .MuiAccordionDetails-root table.motorIncentive-content tr td {
    opacity: 1 !important;
    padding: 12px 0px !important;
    white-space: nowrap;
    width: 50%; }
  .MuiAccordionDetails-root table.motorIncentive-content tr:nth-child(4) td {
    border-bottom: 0; }
  .CurrentMonthProjContainer .CurrentMonthData table.motorIncentive-content tr td:last-child {
    text-align: left;
    float: right;
    line-height: 40px; }
  .CurrentMonthProjContainer .CurrentMonthData table.motorIncentive-content tr td:nth-child(3) {
    float: none !important; }
  .CurrentMonthProjContainer .CurrentMonthData .motorIncentive-content tr td:nth-child(4) {
    float: none !important;
    padding-left: 6px !important;
    text-align: right !important; }
  .CurrentMonthProjContainer .CurrentMonthData table tr:nth-child(1) td:last-child,
  .CurrentMonthProjContainer .CurrentMonthData table tr:nth-child(2) td:last-child {
    white-space: nowrap; }
  .MuiAccordionDetails-root table.motorIncentive-content tr:nth-child(4) td:nth-child(3) {
    text-align: center; }
  .CurrentMonthProjContainer .CurrentMonthData .MuiAccordionDetails-root table.motorIncentive-content tr:not(:last-child):after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-bottom: 1px solid #eaeaea; }
  #panel1a-content p {
    margin-left: 5px !important; }
  .incentive .incentive-box.table-incentive li {
    margin: 12px auto -22px -15px;
    max-width: 320px;
    width: 100%;
    overflow-x: scroll; }
  .incentive-box.table-incentive .motorIncentive th,
  .incentive-box.table-incentive .motorIncentive td {
    width: 100%;
    color: #707070;
    line-height: 22px;
    padding-left: 12px;
    vertical-align: baseline; }
  .incentive-box.table-incentive .motorIncentive th {
    padding-bottom: 6px; }
  .incentive-box.table-incentive .motorIncentive th:first-child,
  .incentive-box.table-incentive .motorIncentive td:first-child {
    background: #fff;
    box-shadow: 5px 0px 10px #3469cb29;
    -webkit-box-shadow: 5px 0px 10px #3469cb29;
    height: 52px;
    padding-left: 14px;
    padding-top: 12px;
    font-size: 12px !important;
    width: 85px;
    left: 0;
    top: auto;
    position: sticky;
    z-index: 1; }
  .incentive .incentive-box.table-incentive .motorIncentive tr {
    box-shadow: 0px -1px 0px #3469cb29;
    -webkit-box-shadow: 0px -1px 0px #3469cb29; }
  .incentive .incentive-box.table-incentive .motorIncentive thead tr:first-child {
    box-shadow: none;
    -webkit-box-shadow: none; }
  .incentive .incentive-box.table-incentive .motorIncentive td {
    color: #253858;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    padding: 10px 14px;
    vertical-align: middle; }
  .incentive-box.table-incentive .motorIncentive tr th:last-child {
    white-space: nowrap; }
  .payout-box li button.tooltip {
    margin-top: -8px; }
  .MuiTooltip-popper {
    top: 15px !important;
    left: 24.4px !important; }
  .MuiTooltip-popper span.MuiTooltip-arrow {
    left: 150px !important; }
  .incentive-box i.fa-info-circle {
    vertical-align: text-bottom;
    color: #253858; }
  .MuiBackdrop-root {
    background: #172b4db3 !important; }
  .MuiDialog-scrollPaper {
    align-items: flex-end !important; }
  .MuiDialog-paperScrollPaper {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 32px 32px 0px 0px !important; }
  #customized-dialog-title {
    background: #e6f0ff;
    padding: 17px 20px; }
  #customized-dialog-title h6 {
    color: #253858; }
  #customized-dialog-title h6 strong {
    font-weight: 600;
    font-size: 16px;
    margin-left: -5px; }
  .critiria-popup .close-btn {
    top: 12px;
    right: 8px;
    padding: 5px; }
  .critiria-popup .close-btn svg {
    font-size: 0.8em; }
  .critiria-popup .payoutClawPopup .topPerformance tr:not(:last-child) {
    border-bottom: 1px solid #dbdbdb; }
  .critiria-popup .payoutClawPopup .topPerformance th,
  .critiria-popup .payoutClawPopup .topPerformance td {
    color: #253858;
    opacity: 1;
    font-weight: 500;
    background: #fff;
    font-size: 14px;
    line-height: 22px;
    padding: 2px 15px 6px;
    border: 0;
    width: 100%; }
  .critiria-popup .payoutClawPopup .topPerformance th:first-child {
    padding-left: 0px; }
  .critiria-popup .payoutClawPopup .topPerformance td {
    padding: 16px 0px;
    white-space: nowrap; }
  .critiria-popup .payoutClawPopup .topPerformance td:first-child {
    text-align: left; }
  .help-section {
    padding: 5px 12px !important; }
  .faq-section .MuiTab-textColorInherit.Mui-selected {
    width: 100%;
    margin: 0;
    max-width: 100%; }
  .faq-section .faq-tab {
    margin-top: 4px; }
  .faq-section .faq-tab .MuiTab-root {
    font-size: 16px !important;
    min-height: 44px !important; }
  .faq-section .MuiBox-root {
    padding: 20px 0px 0px !important; }
  .faq-section .MuiAccordion-rounded {
    border-radius: 8px !important;
    margin: 15px 0px !important; }
  .faq-section .MuiAccordionSummary-root.Mui-expanded {
    min-height: 48px !important; }
  .faq-section .MuiAccordionSummary-content.Mui-expanded {
    margin: 12px 0px !important; }
  .faq-section .MuiCollapse-wrapper {
    padding: 0px 16px 15px !important; }
  .faq-section .faqtab-data .MuiTypography-body1 {
    letter-spacing: 0; }
  .faq-section .read-more-link h2 {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    margin: 20px auto 0px; }
  .faq-rightside .MuiGrid-spacing-xs-3 > .MuiGrid-item {
    padding: 0px !important; }
  .faq-rightside .contact-us {
    padding: 14px; }
  .faq-rightside .contact-us h6 {
    font-size: 18px; }
  .faq-rightside p {
    padding: 8px 0px 15px; }
  .faq-rightside .contact-us .rightside-box {
    padding: 20px 15px;
    border-radius: 8px;
    margin-bottom: 5px; }
  .booking-table button.load-more {
    border: 0;
    height: 36px;
    max-width: 120px;
    margin: 0px auto !important;
    background: #0065ff;
    color: #fff;
    width: 100%;
    display: block;
    font-size: 14px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    text-transform: capitalize; } }

.CongratulationMsg {
  width: 68%;
  margin: 134px auto 30px;
  text-align: justify;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 6px 16px #3469cb29;
  font: normal normal 500 15px/24px Roboto;
  letter-spacing: 0.09px;
  color: #253858; }

.Criteria {
  padding: 20px 25px; }
  .Criteria h3 {
    font-size: 20px;
    margin-bottom: 20px; }
  .Criteria ul {
    list-style-type: none; }
    .Criteria ul li {
      width: 50%;
      display: inline-flex;
      align-items: center;
      font-size: 15px;
      font-weight: 500;
      font-family: 'Roboto';
      border-bottom: 1px solid #edeaea;
      line-height: 38px;
      padding-bottom: 8px; }
      .Criteria ul li button {
        color: #0065ff; }
  .Criteria .CriteriaTab {
    width: 1070px;
    background-color: #fff;
    color: #253858;
    box-shadow: none;
    border-radius: 0px; }
    .Criteria .CriteriaTab .MuiTabs-scroller {
      overflow: auto !important; }
      .Criteria .CriteriaTab .MuiTabs-scroller button {
        font-size: 11px;
        min-width: 170px;
        padding: 8px 10px;
        text-transform: capitalize;
        width: auto;
        margin: 0px;
        font-weight: 600;
        font-family: roboto;
        border-radius: 0px; }
      .Criteria .CriteriaTab .MuiTabs-scroller .Mui-selected {
        color: #0065ff;
        border-bottom: 2px solid #0065ff; }
  .Criteria .Pdfwidth {
    width: 1070px; }
    .Criteria .Pdfwidth .react-pdf__Page__canvas {
      width: 100% !important; }

.MuiDrawer-root {
  z-index: 10000000000 !important; }

.CalculationDeatilsPopup {
  color: #000;
  width: 700px;
  margin: 0;
  padding: 20px 25px;
  position: relative;
  background: #fff; }
  .CalculationDeatilsPopup .close {
    position: absolute;
    right: 16px;
    top: 25px;
    cursor: pointer;
    display: block; }
    .CalculationDeatilsPopup .close img {
      filter: contrast(0.2);
      -webkit-filter: contrast(0.2); }
  .CalculationDeatilsPopup h5 {
    color: #253858;
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal; }
  .CalculationDeatilsPopup .DetailsBox {
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 15px 15px 10px;
    margin-top: 20px;
    position: relative; }
    .CalculationDeatilsPopup .DetailsBox img {
      top: 0px;
      position: absolute;
      right: 0px; }
    .CalculationDeatilsPopup .DetailsBox h3 {
      color: #253858;
      font-family: Poppins;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal; }
    .CalculationDeatilsPopup .DetailsBox ul {
      display: flex;
      flex-wrap: wrap;
      margin-top: 1.22rem; }
      .CalculationDeatilsPopup .DetailsBox ul li {
        color: #253858;
        font-family: Poppins;
        font-size: 15px;
        line-height: 45px;
        font-style: normal;
        font-weight: 600;
        border-bottom: 1px solid #0000001f;
        width: 55%; }
        .CalculationDeatilsPopup .DetailsBox ul li:nth-child(2n + 2) {
          text-align: right;
          font-weight: 500;
          width: 45%; }
        .CalculationDeatilsPopup .DetailsBox ul li:last-child {
          border-bottom: none; }
        .CalculationDeatilsPopup .DetailsBox ul li:nth-last-child(2) {
          border-bottom: none; }
      .CalculationDeatilsPopup .DetailsBox ul .FinalDetails {
        width: 100%;
        background: rgba(0, 101, 255, 0.05);
        padding: 5px 16px 5px 16px; }
        .CalculationDeatilsPopup .DetailsBox ul .FinalDetails ul {
          margin-top: 0px; }
    .CalculationDeatilsPopup .DetailsBox p {
      color: rgba(37, 56, 88, 0.6);
      font-family: Poppins;
      font-size: 12px;
      font-style: normal;
      font-weight: 600;
      text-align: right;
      line-height: normal;
      margin-top: 10px; }

@media screen and (max-width: 750px) {
  .CalculationDeatilsPopup {
    width: 100%;
    padding: 20px 15px; }
    .CalculationDeatilsPopup h5 {
      font-size: 20px; }
    .CalculationDeatilsPopup .DetailsBox img {
      width: 55px !important; }
    .CalculationDeatilsPopup .DetailsBox li {
      width: 100% !important; }
      .CalculationDeatilsPopup .DetailsBox li:nth-child(2n + 2) {
        text-align: left !important; } }

.performance-details .d-flex {
  align-items: baseline;
  justify-content: space-between; }

.performance-details {
  padding: 0px 60px 60px;
  background: #fff;
  position: relative; }
  @media (max-width: 1024px) and (min-width: 320px) {
    .performance-details {
      padding: 0;
      min-height: 945px;
      height: 100%; } }

.performance-details h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  background: linear-gradient(90.11deg, #7095FA 2.36%, #AC9FFF 99.06%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  display: inline; }

.performance-details .inner-detail {
  position: relative; }

.performance-details .performance-inner {
  position: relative;
  padding: 100px 0px 65px; }
  @media (max-width: 1024px) and (min-width: 320px) {
    .performance-details .performance-inner {
      padding: 42px 16px 15px; } }

.performance-details ul.performance-box {
  width: 100%;
  margin-top: 45px; }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.performance-box {
      margin-top: 25px;
      flex-wrap: wrap; } }

.performance-details ul.performance-box li:before, .performance-details ul.performance-box li:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  margin: auto;
  border-left: 1px dashed #EAEAEA;
  height: 160px; }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.performance-box li:before, .performance-details ul.performance-box li:after {
      height: 120px;
      bottom: 15px; } }

.performance-details ul.performance-box li {
  padding: 14px;
  width: 210px;
  position: relative; }
  @media (max-width: 800px) and (min-width: 768px) {
    .performance-details ul.performance-box li {
      width: 190px; } }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.performance-box li {
      padding: 0px 14px;
      width: 147px !important;
      margin-bottom: 25px; } }

.performance-details ul.performance-box li p {
  font-weight: 400;
  font-size: 12px;
  color: #808080;
  margin: 20px 0px;
  height: 50px;
  white-space: nowrap;
  cursor: pointer; }
  @media (max-width: 950px) and (min-width: 320px) {
    .performance-details ul.performance-box li p {
      white-space: normal; } }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.performance-box li p {
      font-size: 10px;
      line-height: 14px;
      margin: 12px 0px 8px; } }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.performance-box li p span.d-block {
      display: inline; } }

.performance-details ul.performance-box li h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #253858; }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.performance-box li h3 {
      font-size: 18px;
      line-height: 21px; } }

.performance-details ul.bookings {
  background: #E0EBFF;
  border-radius: 4px;
  align-items: center;
  width: max-content;
  margin-top: 5px; }

.performance-details ul.bookings li {
  padding: 7px 12px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #253858;
  height: auto;
  position: static;
  width: auto !important; }
  @media (max-width: 767px) and (min-width: 320px) {
    .performance-details ul.bookings li {
      font-size: 12px;
      padding: 3px 9px !important;
      margin: 0; } }

.performance-details ul.bookings li:first-child {
  border-right: 1px solid #C7D5EF; }

.performance-details ul.bookings li:last-child {
  font-weight: 600; }

.performance-details ul.performance-box li:after {
  background: #29ABE2;
  width: 2px;
  height: 24px;
  border: 0; }

.performance-details ul.performance-box li:last-child {
  width: auto; }

.performance-details.emerging-star h2 {
  background: linear-gradient(90.11deg, #D67027 2.36%, #CA8A0D 99.06%);
  -webkit-background-clip: text;
  background-clip: text; }

.performance-details.emerging-star ul.bookings {
  background: #FFE9B0; }

.performance-details.emerging-star ul.performance-box li:after {
  background: #D47C1F; }

/*-----------jag-design-2022-------------*/
.d-flex {
  display: flex;
  align-items: center; }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

img {
  max-width: 100%;
  outline: none !important;
  box-shadow: none !important;
  vertical-align: middle; }

button {
  outline: none !important;
  box-shadow: none !important; }

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

.d-block {
  display: block; }

em {
  font-style: normal; }

/*------------lottie-css-----------*/
.react-lottie {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  left: 0; }

.react-lottie div {
  max-width: 668px;
  height: 608px !important;
  outline: none !important;
  float: right;
  width: 100% !important;
  margin-top: -103px !important;
  clip-path: polygon(0% 9%, 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 9%, 100% 0%, 100% 100%, 0% 100%); }

/*-----------media-css-------------*/
@media (max-width: 1024px) and (min-width: 320px) {
  .jag-design {
    height: 480px; }
  .jag-design .top-header, .jag-design .main-header ul li:first-child, .agentdetails .house-image:after,
  .agentdetails .house-image img, .bar-graph:before {
    display: none; }
  .performance-details h2, .calculate-opportunity h2, .bar-graph h2, .message-criteria h2 {
    font-size: 20px !important;
    line-height: 24px !important; }
  .performance-details ul.performance-box li:nth-child(2), .performance-details ul.performance-box li:last-child {
    padding-right: 0; }
  .ape-slider .range-slider.percentage-slider p {
    margin-bottom: 15px; }
  .bar-graph .purple-box canvas {
    height: 200px !important;
    width: 100% !important; }
  .react-lottie {
    z-index: auto; }
  .criteria-content ul li span.d-block {
    display: inline; }
  .calculation-modal {
    left: 0 !important;
    background: #253858e0 !important;
    box-shadow: none !important; }
  .agentdetails ul.rewards-listing li:first-child {
    padding-right: 45px !important; } }

@media (max-width: 900px) and (min-width: 768px) {
  .react-lottie div {
    max-width: 490px;
    height: 100% !important; } }

@media (max-width: 767px) and (min-width: 320px) {
  .projected-growth {
    padding: 30px 0px 0px 4px !important; }
  .projected-growth ul li:last-child h4 {
    margin-bottom: 25px; }
  .react-lottie {
    height: auto !important; }
  .react-lottie div {
    max-width: 100%;
    height: 100% !important;
    margin-top: 100% !important;
    clip-path: none;
    -webkit-clip-path: none; } }

@media (max-width: 540px) and (min-width: 500px) {
  .react-lottie div {
    margin-top: 60% !important; } }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box; }

body {
  background-color: #F8F8F8 !important; }

.jag6Banner {
  position: fixed;
  top: 10;
  left: 0;
  width: 100vw;
  height: 90vh;
  z-index: -1;
  overflow: hidden; }
  .jag6Banner img {
    width: 100%;
    height: 100%;
    object-fit: contain; }

.EmergingLayout {
  background-image: url(/images/jag2023/EmergingStar.png); }

.JagBgImage {
  background-image: url(/images/jag2023/jagBg.png); }

.MuiTooltip-popper {
  z-index: 9999999999 !important; }

.AgentDetailsLayout {
  background-repeat: no-repeat;
  background-size: contain, cover;
  position: relative;
  padding: 20px;
  /* Header css */
  /* End Css */
  /* Agent Details css */
  /* End Agent Details css */
  /* Progress Score css */
  /* End Progress score css */
  /* Message Criteria css*/
  /* END Message Criteria css*/
  /* Leader Board CSS */
  /* END Leader Board css */ }
  .AgentDetailsLayout .Header {
    display: flex; }
    .AgentDetailsLayout .Header .leftSide {
      display: flex;
      align-items: center; }
      .AgentDetailsLayout .Header .leftSide hr {
        width: 1px;
        margin: 0px 17px;
        height: 24px;
        background: #ffffff42; }
    .AgentDetailsLayout .Header .rightSide {
      display: flex;
      align-items: center; }
      .AgentDetailsLayout .Header .rightSide .RetainerBtn {
        border-radius: 16px;
        margin-left: 6px;
        background: #ECF2FF;
        width: auto;
        display: inline-flex;
        padding: 4px 16px;
        justify-content: space-between;
        align-items: center;
        color: #253858;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal; }
        .AgentDetailsLayout .Header .rightSide .RetainerBtn img {
          margin-right: 5px; }
      .AgentDetailsLayout .Header .rightSide .goldStar {
        margin-right: 5px; }
      .AgentDetailsLayout .Header .rightSide .goldbg {
        background-color: gold !important; }
      .AgentDetailsLayout .Header .rightSide .silverbg {
        background-color: silver !important; }
      .AgentDetailsLayout .Header .rightSide .hustlerbg {
        background-color: magenta !important; }
      .AgentDetailsLayout .Header .rightSide .warriorbg {
        background-color: greenyellow !important; }
  .AgentDetailsLayout .AgentDetails {
    text-align: center;
    color: #FFF;
    font-family: Playfair Display;
    font-size: 40px;
    font-style: italic;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.4px; }
    .AgentDetailsLayout .AgentDetails p {
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      font-family: Playfair Display;
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; }
    .AgentDetailsLayout .AgentDetails span {
      color: #FFF;
      font-family: Poppins;
      font-size: 24px;
      font-style: italic;
      font-weight: 800;
      line-height: normal;
      letter-spacing: 0.24px; }
  .AgentDetailsLayout .DeadlineReminder {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: yellow;
    font-family: 'Poppins';
    overflow: hidden;
    white-space: nowrap; }
  .AgentDetailsLayout .DeadlineReminder span {
    display: inline-block;
    animation: deadline 45s linear infinite; }

@keyframes deadline {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
  .AgentDetailsLayout .ProgressScore {
    width: 880px;
    height: 410px;
    border-radius: 8px;
    background: #FFF;
    margin: 20px auto;
    padding: 20px;
    position: relative;
    box-shadow: 0px 6px 16px #3469CB29; }
    .AgentDetailsLayout .ProgressScore h3 {
      color: #253858;
      font-family: Poppins;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .AgentDetailsLayout .ProgressScore h3 span {
      color: red;
      text-align: right;
      font-family: Poppins;
      font-size: 12px;
      font-style: normal;
      font-weight: 600; }
    .AgentDetailsLayout .ProgressScore ul {
      display: flex;
      justify-content: space-between; }
      .AgentDetailsLayout .ProgressScore ul li {
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        color: #253858;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: 25%;
        height: 120px;
        position: relative; }
        .AgentDetailsLayout .ProgressScore ul li img {
          display: block; }
        .AgentDetailsLayout .ProgressScore ul li h4 {
          color: #253858;
          text-align: center;
          font-family: Roboto;
          font-size: 24px;
          position: absolute;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          left: 0;
          right: 0;
          bottom: 0; }
          .AgentDetailsLayout .ProgressScore ul li h4 p {
            color: #253858;
            font-family: Poppins;
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: normal; }
    .AgentDetailsLayout .ProgressScore .CurrentGrowth {
      border-radius: 8px;
      background: rgba(0, 101, 255, 0.05);
      height: 111px;
      margin-top: 25px;
      padding: 15px; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth h4 {
        display: inline-block;
        line-height: 28px;
        width: 30%; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .TotalGrowth {
        display: inline-block;
        color: #253858;
        text-align: right;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        border-radius: 6px;
        font-weight: 600;
        line-height: normal;
        background-color: #fff;
        padding: 5px 8px;
        float: right; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .Dflex {
        display: flex;
        width: 100%; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .Dflex .GrowthPersantage {
          color: #253858;
          text-align: center;
          font-family: Poppins;
          font-size: 12px;
          font-style: normal;
          position: relative;
          font-weight: 600;
          line-height: normal;
          top: 20px;
          left: 9px; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .Growthbar {
        width: 85%; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .Growthbar .MuiLinearProgress-root {
          border-top-right-radius: 24px;
          border-bottom-right-radius: 24px;
          background: #EBEBEB;
          height: 32px;
          margin-top: 15px;
          width: 100%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .Growthbar .MuiLinearProgress-root .MuiLinearProgress-barColorPrimary {
            background-color: #4ACD50; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .UnderGrowth {
        width: 85%; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .UnderGrowth .MuiLinearProgress-root {
          border-top-right-radius: 24px;
          border-bottom-right-radius: 24px;
          background: #EBEBEB;
          height: 32px;
          margin-top: 15px;
          width: 100%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .UnderGrowth .MuiLinearProgress-root .MuiLinearProgress-barColorPrimary {
            background-color: #d5bb03; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .Negativebar {
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
        background: #EBEBEB;
        height: 32px;
        margin-top: 15px;
        width: 25%;
        transform: scaleX(-1); }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .NegativeGrowth .MuiLinearProgress-barColorPrimary {
        background-color: #f1453a; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .NegativeUnderGrowth .MuiLinearProgress-barColorPrimary {
        background-color: #d5bb03; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .GrowthAchieved .MuiLinearProgress-barColorPrimary {
        background-color: #4ACD50; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container {
        width: 100%;
        height: 32px;
        position: relative;
        top: -32px;
        background-color: transparent;
        z-index: 999999999999;
        /* Set percentage positions for each line */ }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .vertical-line {
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: #253858;
          color: #253858;
          text-align: center;
          font-family: Poppins;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-0 {
          left: 0%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-0::after {
            content: "0%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-10 {
          left: 10%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-10::after {
            content: "10%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-15 {
          left: 15%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-15::after {
            content: "15%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-20 {
          left: 20%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-20::after {
            content: "20%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-30 {
          left: 30%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-30::after {
            content: "30%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-40 {
          left: 40%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-40::after {
            content: "40%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-50 {
          left: 50%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-50::after {
            content: "50%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-60 {
          left: 60%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-60::after {
            content: "60%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-70 {
          left: 70%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .line-70::after {
            content: "70%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-10 {
          left: 5%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-10::after {
            content: "10%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-15 {
          left: 7.5%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-15::after {
            content: "15%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-20 {
          left: 10%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-20::after {
            content: "20%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-30 {
          left: 15%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-30::after {
            content: "30%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-40 {
          left: 20%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-40::after {
            content: "40%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-50 {
          left: 25%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-50::after {
            content: "50%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-60 {
          left: 30%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-60::after {
            content: "60%";
            position: absolute;
            top: 30px;
            left: -3px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-70 {
          left: 35%; }
          .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container .lineDouble-70::after {
            content: "70%";
            position: absolute;
            top: 30px;
            left: -3px; }
    .AgentDetailsLayout .ProgressScore .lotteryTicekt {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      align-items: center; }
      .AgentDetailsLayout .ProgressScore .lotteryTicekt p {
        text-align: right;
        font-family: Poppins;
        font-size: 16px;
        display: flex;
        align-items: center;
        font-weight: 500;
        line-height: normal; }
        .AgentDetailsLayout .ProgressScore .lotteryTicekt p img {
          margin-right: 5px; }
      .AgentDetailsLayout .ProgressScore .lotteryTicekt a {
        color: #0065FF;
        text-align: right;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-decoration-line: underline;
        margin: 0px 10px; }
    .AgentDetailsLayout .ProgressScore .TotalScore {
      width: 100%;
      border-radius: 0px 0px 8px 8px;
      background: #14cca133;
      display: flex;
      padding: 8px 32px;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0; }
      .AgentDetailsLayout .ProgressScore .TotalScore hr {
        height: 19px;
        background: #0000001f;
        border: none;
        width: 1px; }
      .AgentDetailsLayout .ProgressScore .TotalScore p {
        color: #38374B;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        display: flex;
        white-space: nowrap; }
        .AgentDetailsLayout .ProgressScore .TotalScore p strong {
          margin: 0px 5px; }
  .AgentDetailsLayout .MessageCriteria {
    width: 100%;
    border-radius: 16px;
    background: #FFF;
    padding: 20px;
    height: 678px;
    box-shadow: 0px 6px 16px #3469CB29; }
    .AgentDetailsLayout .MessageCriteria .caption {
      font-family: Roboto;
      font-size: 10px;
      font-style: normal;
      font-weight: 500;
      margin: 5px 0px 0px;
      line-height: 13px;
      text-transform: uppercase;
      display: flex;
      align-items: center; }
      .AgentDetailsLayout .MessageCriteria .caption p {
        height: 5px;
        width: 5px;
        border-radius: 20px;
        margin: 7px;
        background: #0065FF; }
    .AgentDetailsLayout .MessageCriteria hr {
      border: 1px dashed #0000003d;
      margin: 10px 0px; }
    .AgentDetailsLayout .MessageCriteria h4 {
      color: #253858;
      font-family: Poppins;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 26.8px; }
    .AgentDetailsLayout .MessageCriteria .slick-list {
      height: 367px; }
    .AgentDetailsLayout .MessageCriteria .slick-slide {
      padding: 0px; }
      .AgentDetailsLayout .MessageCriteria .slick-slide .banner .MuiCardContent-root {
        padding: 0px; }
      .AgentDetailsLayout .MessageCriteria .slick-slide .banner h3 {
        color: #253858;
        font-family: Poppins;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 8px; }
      .AgentDetailsLayout .MessageCriteria .slick-slide .banner ul {
        list-style: none; }
        .AgentDetailsLayout .MessageCriteria .slick-slide .banner ul li {
          color: #253858;
          font-family: Poppins;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          display: flex;
          margin-bottom: 8px; }
          .AgentDetailsLayout .MessageCriteria .slick-slide .banner ul li::before {
            content: "\2022";
            /* Use the Unicode bullet character */
            color: #253858;
            /* Set the color of the marker */
            font-size: 1.4em;
            /* Adjust the size of the marker */
            margin-right: 8px;
            /* Add spacing between the marker and content */
            line-height: 20px; }
      .AgentDetailsLayout .MessageCriteria .slick-slide .banner ul.InvestmentMessageul {
        list-style: none; }
        .AgentDetailsLayout .MessageCriteria .slick-slide .banner ul.InvestmentMessageul li {
          color: #253858;
          font-family: Poppins;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          display: flex;
          margin-bottom: 8px; }
          .AgentDetailsLayout .MessageCriteria .slick-slide .banner ul.InvestmentMessageul li::before {
            content: "\2022";
            /* Use the Unicode bullet character */
            color: #253858;
            /* Set the color of the marker */
            font-size: 1.4em;
            /* Adjust the size of the marker */
            margin-right: 8px;
            /* Add spacing between the marker and content */
            line-height: 20px; }
    .AgentDetailsLayout .MessageCriteria .slick-slider .slick-dots {
      bottom: 0px; }
      .AgentDetailsLayout .MessageCriteria .slick-slider .slick-dots .slick-active button::before {
        background: #0065FF; }
    .AgentDetailsLayout .MessageCriteria .slick-slider ul.slick-dots li {
      width: 10px;
      height: 10px; }
      .AgentDetailsLayout .MessageCriteria .slick-slider ul.slick-dots li button {
        width: 10px;
        height: 10px; }
        .AgentDetailsLayout .MessageCriteria .slick-slider ul.slick-dots li button::before {
          content: "";
          border-radius: 24px;
          background: rgba(0, 101, 255, 0.5);
          width: 100%;
          height: 10px;
          opacity: 1; }
  .AgentDetailsLayout .LeaderBoard {
    width: 100%;
    border-radius: 16px;
    background: #FFF;
    padding: 20px;
    box-shadow: 0px 6px 16px #3469CB29; }
    .AgentDetailsLayout .LeaderBoard .Heading {
      color: #253858;
      font-family: Poppins;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-align: center;
      margin-bottom: 15px; }
    .AgentDetailsLayout .LeaderBoard hr {
      margin: 20px 0px 15px;
      height: 1px;
      border: none;
      background: rgba(0, 0, 0, 0.12); }
    .AgentDetailsLayout .LeaderBoard ul {
      display: flex;
      list-style-type: none;
      justify-content: space-around;
      align-items: flex-end; }
      .AgentDetailsLayout .LeaderBoard ul li {
        text-align: center; }
        .AgentDetailsLayout .LeaderBoard ul li h4 {
          font-family: Poppins;
          font-style: normal;
          font-weight: 600;
          line-height: normal; }
        .AgentDetailsLayout .LeaderBoard ul li:first-child h4 {
          font-size: 16px;
          background: linear-gradient(100deg, #FD9727 -2.53%, #FF6D3A 90.43%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent; }
        .AgentDetailsLayout .LeaderBoard ul li:last-child h4 {
          background: linear-gradient(100deg, #B9BBC1 -2.53%, #A0A3AA 90.43%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 18px; }
        .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) h4 {
          background: linear-gradient(100deg, #FED130 -2.53%, #F7BC14 90.43%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 24px; }
        .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) p {
          font-size: 12px; }
        .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) h3 {
          font-size: 16px; }
        .AgentDetailsLayout .LeaderBoard ul li p {
          color: #253858;
          text-align: center;
          font-family: Poppins;
          font-size: 10px;
          font-style: normal;
          font-weight: 600;
          line-height: 20px;
          opacity: 0.6; }
        .AgentDetailsLayout .LeaderBoard ul li h3 {
          color: #253858;
          text-align: center;
          font-family: Poppins;
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          line-height: 23px; }
    .AgentDetailsLayout .LeaderBoard .AgentListing {
      border-collapse: separate; }
      .AgentDetailsLayout .LeaderBoard .AgentListing thead {
        background-color: transparent; }
        .AgentDetailsLayout .LeaderBoard .AgentListing thead th {
          color: #253858;
          font-family: Poppins;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          opacity: 0.6;
          border: none; }
      .AgentDetailsLayout .LeaderBoard .AgentListing tbody td {
        color: #253858;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        border: none; }
      .AgentDetailsLayout .LeaderBoard .AgentListing .active {
        background: rgba(0, 101, 255, 0.05);
        border-radius: 8px; }
        .AgentDetailsLayout .LeaderBoard .AgentListing .active td {
          color: #0065FF;
          border-top: 1px solid #0065ff;
          border-bottom: 1px solid #0065ff; }
          .AgentDetailsLayout .LeaderBoard .AgentListing .active td:first-child {
            border-left: 1px solid #0065ff;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px; }
          .AgentDetailsLayout .LeaderBoard .AgentListing .active td:last-child {
            border-right: 1px solid #0065ff;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px; }
    .AgentDetailsLayout .LeaderBoard button {
      background: rgba(0, 101, 255, 0.05);
      border: none;
      color: #253858;
      font-family: Poppins;
      padding: 11px 37px;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin: 15px auto;
      cursor: pointer; }

/* AppBar css */
.AppBarSection {
  background: #6051CF;
  width: 100%;
  padding: 30px 55px;
  box-shadow: 0px 6px 16px #3469CB29; }
  .AppBarSection .purple-box {
    background-color: #fff;
    border-radius: 16px;
    padding: 20px; }
  .AppBarSection .bar-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: center; }
    .AppBarSection .bar-head h2 {
      color: #FFF;
      font-family: Poppins;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: normal; }
    .AppBarSection .bar-head .download-btn {
      background: #ffffff33;
      border-radius: 8px;
      color: #FFF;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      padding: 15px 14px 15px 17px;
      cursor: pointer;
      margin-left: 10px;
      display: inline-flex; }
      .AppBarSection .bar-head .download-btn img {
        margin-right: 7px; }

/* END AppBar css */
@media screen and (max-width: 750px) {
  .AppBarSection {
    padding: 20px 15px 78px;
    position: relative; }
    .AppBarSection .bar-head {
      display: block;
      margin-bottom: 15px; }
      .AppBarSection .bar-head h2 {
        font-size: 31px;
        margin-bottom: 10px;
        text-align: center; }
      .AppBarSection .bar-head .download-btn {
        width: 46%;
        margin-bottom: 0px;
        font-size: 13px;
        margin-left: 2.8%; }
    .AppBarSection .bar-head > div {
      position: absolute;
      bottom: 0;
      left: 0px;
      right: 0px;
      margin-bottom: 13px; }
  .JagBgImage {
    background-image: url(/images/jag2023/jagBGMobile.png) !important; }
  .EmergingLayout {
    background-image: url(/images/jag2023/EmergingBGMobile.png) !important; }
  .AgentDetailsLayout {
    padding: 0px; }
    .AgentDetailsLayout .ProgressScore {
      width: 100%;
      height: auto;
      padding: 15px 15px 5px; }
      .AgentDetailsLayout .ProgressScore ul {
        display: flex;
        margin-top: 16rem;
        flex-direction: column; }
        .AgentDetailsLayout .ProgressScore ul li {
          text-align: left;
          line-height: 27px;
          display: block;
          width: 100%;
          height: 70px; }
          .AgentDetailsLayout .ProgressScore ul li h4 {
            position: static;
            text-align: left;
            display: flex; }
          .AgentDetailsLayout .ProgressScore ul li img {
            display: block;
            float: left;
            margin: 7px 15px 0px 0px; }
      .AgentDetailsLayout .ProgressScore .CurrentGrowth {
        position: absolute;
        width: 92%;
        left: 0;
        margin: auto;
        right: 0px;
        top: 60px;
        border-bottom-left-radius: 0px;
        margin-top: 0px;
        border-bottom-right-radius: 0px;
        height: 135px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .Negativebar {
          height: 28px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .Growthbar .MuiLinearProgress-root {
          height: 28px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .UnderGrowth .MuiLinearProgress-root {
          height: 28px; }
        .AgentDetailsLayout .ProgressScore .CurrentGrowth .line-container {
          height: 26px;
          top: -27px; }
      .AgentDetailsLayout .ProgressScore .TotalScore {
        top: 196px;
        margin: auto;
        width: 92%;
        padding: 10px 12px;
        display: block;
        bottom: auto; }
        .AgentDetailsLayout .ProgressScore .TotalScore hr {
          display: none; }
        .AgentDetailsLayout .ProgressScore .TotalScore p {
          display: flex;
          justify-content: left;
          flex-wrap: wrap; }
      .AgentDetailsLayout .ProgressScore .lotteryTicekt {
        display: block; }
        .AgentDetailsLayout .ProgressScore .lotteryTicekt p {
          text-align: right;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-bottom: 10px; }
          .AgentDetailsLayout .ProgressScore .lotteryTicekt p:last-child {
            display: block;
            width: 100%; }
            .AgentDetailsLayout .ProgressScore .lotteryTicekt p:last-child a {
              display: block;
              text-align: left;
              line-height: 35px; }
    .AgentDetailsLayout .LeaderBoard {
      padding: 20px 15px; }
      .AgentDetailsLayout .LeaderBoard ul {
        position: relative;
        justify-content: space-between !important; }
        .AgentDetailsLayout .LeaderBoard ul li {
          width: 37%;
          text-align: center;
          margin-top: 140px; }
          .AgentDetailsLayout .LeaderBoard ul li p {
            line-height: 18px !important; }
          .AgentDetailsLayout .LeaderBoard ul li h4 {
            font-size: 16px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; }
          .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) {
            display: flex;
            position: absolute;
            width: 100%;
            top: -140px;
            left: 24px;
            align-items: center; }
            .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) img {
              margin-right: 18px; }
            .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) p,
            .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) h3,
            .AgentDetailsLayout .LeaderBoard ul li:nth-child(2) h4 {
              text-align: left;
              line-height: 22px !important; }
          .AgentDetailsLayout .LeaderBoard ul li img {
            width: 60px; }
      .AgentDetailsLayout .LeaderBoard .AgentListing thead th {
        padding: 7px;
        font-size: 10px; }
      .AgentDetailsLayout .LeaderBoard .AgentListing tbody td {
        font-size: 12px;
        padding: 11px; }
    .AgentDetailsLayout .Header {
      display: block;
      padding-top: 10px; }
      .AgentDetailsLayout .Header .rightSide {
        text-align: right; }
        .AgentDetailsLayout .Header .rightSide .RetainerBtn {
          margin-bottom: 5px;
          width: auto;
          margin-left: 0px; }
      .AgentDetailsLayout .Header .leftSide {
        justify-content: center;
        margin-bottom: 15px; }
    .AgentDetailsLayout .AgentDetails {
      font-size: 24px;
      text-align: left;
      line-height: 23px; }
      .AgentDetailsLayout .AgentDetails p {
        font-size: 16px;
        text-align: left;
        margin-bottom: 8px; }
      .AgentDetailsLayout .AgentDetails span {
        font-size: 13px;
        font-weight: 600; } }

.NewAnnoucementPopup .MuiDialog-paper {
  width: 447px;
  text-align: center;
  border-radius: 16px; }
  .NewAnnoucementPopup .MuiDialog-paper img {
    margin: 10px; }
  .NewAnnoucementPopup .MuiDialog-paper h3 {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 10px 0px; }
  .NewAnnoucementPopup .MuiDialog-paper ul {
    width: 290px;
    height: 72px;
    margin: auto;
    text-align: left; }
    .NewAnnoucementPopup .MuiDialog-paper ul li {
      overflow: hidden;
      color: #253858;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: Poppins;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal; }
      .NewAnnoucementPopup .MuiDialog-paper ul li::before {
        content: "\2022";
        /* Use the Unicode bullet character */
        color: #253858;
        /* Set the color of the marker */
        font-size: 1.4em;
        /* Adjust the size of the marker */
        margin-right: 8px;
        /* Add spacing between the marker and content */
        line-height: 20px; }
  .NewAnnoucementPopup .MuiDialog-paper button {
    border-radius: 4px;
    background: #0065FF;
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    height: 50px;
    width: 190px;
    margin-bottom: 15px; }

@media screen and (max-width: 750px) {
  .NewAnnoucementPopup .MuiDialog-paper {
    width: 100%;
    text-align: center;
    border-radius: 16px !important;
    margin: 8px !important; }
  .NewAnnoucementPopup .MuiDialog-scrollPaper {
    align-items: center !important; } }

.feedbackBtn {
  position: fixed;
  right: 10px;
  bottom: 9px;
  padding: 8px 10px;
  cursor: pointer;
  width: auto;
  border-radius: 48px;
  background: #FD9727;
  box-shadow: 0px 3px 12px 0px #0065ff29 !important;
  text-align: center;
  color: #FFF;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  border: none;
  font-weight: 600;
  line-height: normal; }

.Feedbackpopup .MuiDialogContent-root {
  text-align: center; }

.Feedbackpopup h2 {
  color: #253858;
  text-align: center;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal; }

.Feedbackpopup .feedbackInput .MuiOutlinedInput-multiline {
  border-radius: 8px;
  background: #F5F5F5;
  height: 215px; }

.Feedbackpopup .caption {
  color: rgba(37, 56, 88, 0.6);
  text-align: center;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal; }

.Feedbackpopup .Submitbutton {
  border-radius: 4px !important;
  background-color: #FD9727 !important;
  width: 215px;
  color: #FFF !important;
  font-family: Poppins !important;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
  height: 55px;
  margin: 20px 0px 10px; }

@media screen and (max-width: 750px) {
  .Feedbackpopup {
    z-index: 9999999999999999 !important; }
    .Feedbackpopup .MuiDialog-paperFullWidth {
      bottom: 0px;
      top: 0px !important;
      height: 433px;
      border-radius: 16px !important;
      left: 0;
      margin: auto !important;
      transform: translateY(0%) !important;
      width: calc(100% - 12px) !important; } }

@-webkit-keyframes closeWindow {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes closeWindow {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.ril__outer {
  background-color: rgba(0, 0, 0, 0.85);
  outline: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  -ms-content-zooming: none;
  -ms-user-select: none;
  -ms-touch-select: none;
  -ms-touch-action: none;
      touch-action: none; }

.ril__outerClosing {
  opacity: 0; }

.ril__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.ril__image,
.ril__imagePrev,
.ril__imageNext {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: none;
  -ms-content-zooming: none;
  -ms-user-select: none;
  -ms-touch-select: none;
  -ms-touch-action: none;
      touch-action: none; }

.ril__imageDiscourager {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; }

.ril__navButtons {
  border: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 34px;
  padding: 40px 30px;
  margin: auto;
  cursor: pointer;
  opacity: 0.7; }

.ril__navButtons:hover {
  opacity: 1; }

.ril__navButtons:active {
  opacity: 0.7; }

.ril__navButtonPrev {
  left: 0;
  background: rgba(0, 0, 0, 0.2) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==") no-repeat center; }

.ril__navButtonNext {
  right: 0;
  background: rgba(0, 0, 0, 0.2) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+") no-repeat center; }

.ril__downloadBlocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  background-size: cover; }

.ril__caption,
.ril__toolbar {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.ril__caption {
  bottom: 0;
  max-height: 150px;
  overflow: auto; }

.ril__captionContent {
  padding: 10px 20px;
  color: #fff; }

.ril__toolbar {
  top: 0;
  height: 50px; }

.ril__toolbarSide {
  height: 50px;
  margin: 0; }

.ril__toolbarLeftSide {
  padding-left: 20px;
  padding-right: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis; }

.ril__toolbarRightSide {
  padding-left: 0;
  padding-right: 20px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.ril__toolbarItem {
  display: inline-block;
  line-height: 50px;
  padding: 0;
  color: #fff;
  font-size: 120%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.ril__toolbarItemChild {
  vertical-align: middle; }

.ril__builtinButton {
  width: 40px;
  height: 35px;
  cursor: pointer;
  border: none;
  opacity: 0.7; }

.ril__builtinButton:hover {
  opacity: 1; }

.ril__builtinButton:active {
  outline: none; }

.ril__builtinButtonDisabled {
  cursor: default;
  opacity: 0.5; }

.ril__builtinButtonDisabled:hover {
  opacity: 0.5; }

.ril__closeButton {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat center; }

.ril__zoomInButton {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") no-repeat center; }

.ril__zoomOutButton {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=") no-repeat center; }

.ril__outerAnimating {
  -webkit-animation-name: closeWindow;
          animation-name: closeWindow; }

@-webkit-keyframes pointFade {
  0%,
  19.999%,
  100% {
    opacity: 0; }
  20% {
    opacity: 1; } }

@keyframes pointFade {
  0%,
  19.999%,
  100% {
    opacity: 0; }
  20% {
    opacity: 1; } }

.ril__loadingCircle {
  width: 60px;
  height: 60px;
  position: relative; }

.ril__loadingCirclePoint {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.ril__loadingCirclePoint::before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 11%;
  height: 30%;
  background-color: #fff;
  border-radius: 30%;
  -webkit-animation: pointFade 800ms infinite ease-in-out both;
          animation: pointFade 800ms infinite ease-in-out both; }

.ril__loadingCirclePoint:nth-of-type(1) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg); }

.ril__loadingCirclePoint:nth-of-type(7) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.ril__loadingCirclePoint:nth-of-type(1)::before,
.ril__loadingCirclePoint:nth-of-type(7)::before {
  -webkit-animation-delay: -800ms;
          animation-delay: -800ms; }

.ril__loadingCirclePoint:nth-of-type(2) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg); }

.ril__loadingCirclePoint:nth-of-type(8) {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg); }

.ril__loadingCirclePoint:nth-of-type(2)::before,
.ril__loadingCirclePoint:nth-of-type(8)::before {
  -webkit-animation-delay: -666ms;
          animation-delay: -666ms; }

.ril__loadingCirclePoint:nth-of-type(3) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg); }

.ril__loadingCirclePoint:nth-of-type(9) {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg); }

.ril__loadingCirclePoint:nth-of-type(3)::before,
.ril__loadingCirclePoint:nth-of-type(9)::before {
  -webkit-animation-delay: -533ms;
          animation-delay: -533ms; }

.ril__loadingCirclePoint:nth-of-type(4) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.ril__loadingCirclePoint:nth-of-type(10) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg); }

.ril__loadingCirclePoint:nth-of-type(4)::before,
.ril__loadingCirclePoint:nth-of-type(10)::before {
  -webkit-animation-delay: -400ms;
          animation-delay: -400ms; }

.ril__loadingCirclePoint:nth-of-type(5) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg); }

.ril__loadingCirclePoint:nth-of-type(11) {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg); }

.ril__loadingCirclePoint:nth-of-type(5)::before,
.ril__loadingCirclePoint:nth-of-type(11)::before {
  -webkit-animation-delay: -266ms;
          animation-delay: -266ms; }

.ril__loadingCirclePoint:nth-of-type(6) {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg); }

.ril__loadingCirclePoint:nth-of-type(12) {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg); }

.ril__loadingCirclePoint:nth-of-type(6)::before,
.ril__loadingCirclePoint:nth-of-type(12)::before {
  -webkit-animation-delay: -133ms;
          animation-delay: -133ms; }

.ril__loadingCirclePoint:nth-of-type(7) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.ril__loadingCirclePoint:nth-of-type(13) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg); }

.ril__loadingCirclePoint:nth-of-type(7)::before,
.ril__loadingCirclePoint:nth-of-type(13)::before {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms; }

.ril__loadingContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.ril__imagePrev .ril__loadingContainer,
.ril__imageNext .ril__loadingContainer {
  display: none; }

.ril__errorContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff; }

.ril__imagePrev .ril__errorContainer,
.ril__imageNext .ril__errorContainer {
  display: none; }

.ril__loadingContainer__icon {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%); }

body {
  background-color: #fff !important; }

a {
  cursor: pointer; }

.mt-2 {
  margin-top: 2rem; }

.MuiPopover-root {
  z-index: 9999999 !important; }

.MonthName {
  font-size: 13px !important;
  font-family: 'Roboto' !important;
  font-weight: 600 !important; }

.ViewIncetiveCriteriaBtn {
  position: sticky;
  bottom: 15px;
  z-index: 99999;
  right: 15px;
  float: right; }
  .ViewIncetiveCriteriaBtn button {
    background: #5D71B7;
    font-family: Roboto;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    padding: 10px;
    letter-spacing: 0em;
    height: 42px;
    text-align: center; }
    .ViewIncetiveCriteriaBtn button img {
      width: 32px;
      margin-right: 5px;
      border-radius: 50%; }
    .ViewIncetiveCriteriaBtn button:hover {
      background: #5D71B7; }

.BookingIncentivePopop {
  z-index: 999999 !important; }
  .BookingIncentivePopop .MuiButtonBase-root {
    height: auto; }
  .BookingIncentivePopop .MuiPaper-elevation {
    width: 457px;
    margin: 15px;
    border-radius: 20px; }
  .BookingIncentivePopop .MuiBackdrop-root {
    background-color: #000000d1 !important; }
  .BookingIncentivePopop .MuiDialogContent-root {
    padding: 20px 0px; }
  .BookingIncentivePopop h4 {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 15px; }
  .BookingIncentivePopop .incentiveCalculation {
    display: flex;
    height: 40px;
    width: 100%;
    padding: 0px 15px;
    align-items: center; }
  .BookingIncentivePopop .Caption li {
    color: #253858;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    opacity: 0.6;
    margin-top: 1rem; }
    .BookingIncentivePopop .Caption li:first-child {
      width: 230px; }
  .BookingIncentivePopop .white {
    background: #fff;
    padding: 0px; }
    .BookingIncentivePopop .white li {
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; }
      .BookingIncentivePopop .white li:first-child {
        width: 230px; }
  .BookingIncentivePopop .gray {
    background: #F5F5F5;
    padding: 0px; }
    .BookingIncentivePopop .gray li {
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; }
      .BookingIncentivePopop .gray li:first-child {
        width: 230px; }
  .BookingIncentivePopop .bookingIncentive {
    background: linear-gradient(90deg, #85FFC5 -1.53%, rgba(201, 255, 229, 0) 85.56%);
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 9px 17px;
    margin: 1.2rem 0rem 0rem; }

.FOSVisitAllowance {
  z-index: 999999 !important; }
  .FOSVisitAllowance .MuiPaper-elevation {
    width: 627px;
    margin: 15px;
    border-radius: 20px; }
  .FOSVisitAllowance .MuiBackdrop-root {
    background-color: #000000d1 !important; }
  .FOSVisitAllowance .MuiDialogContent-root {
    padding: 20px 0px;
    text-align: center; }
  .FOSVisitAllowance h4 {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 15px;
    text-align: center;
    margin-bottom: 2rem; }
  .FOSVisitAllowance .downloadbutton {
    border-radius: 8px;
    background: rgba(0, 101, 255, 0.05);
    border: none;
    outline: none;
    color: #000;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
    line-height: normal;
    padding: 3px 12px;
    margin-top: 20px; }
    .FOSVisitAllowance .downloadbutton img {
      margin-right: 3px; }
  .FOSVisitAllowance th {
    color: #253858;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    opacity: 0.6;
    border: none; }
  .FOSVisitAllowance td {
    color: #253858;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    padding: 0px 15px; }
    .FOSVisitAllowance td p {
      color: #253858;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal; }

.NetArrearClawbackPopup {
  z-index: 999999 !important; }
  .NetArrearClawbackPopup .MuiButtonBase-root {
    height: auto; }
  .NetArrearClawbackPopup .MuiPaper-elevation {
    width: 1090px;
    margin: 15px;
    margin-left: 5% !important;
    border-radius: 20px;
    max-width: 1200px; }
  .NetArrearClawbackPopup .MuiBackdrop-root {
    background-color: #000000d1 !important; }
  .NetArrearClawbackPopup .MuiDialogContent-root {
    padding: 20px 0px;
    text-align: center; }
  .NetArrearClawbackPopup h4 {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 15px;
    text-align: center;
    margin-bottom: 2rem; }
  .NetArrearClawbackPopup .BookingBreakdown {
    padding: 0px 15px; }
    .NetArrearClawbackPopup .BookingBreakdown .Heading {
      display: flex;
      justify-content: space-between; }
      .NetArrearClawbackPopup .BookingBreakdown .Heading h3 {
        color: #000;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal; }
      .NetArrearClawbackPopup .BookingBreakdown .Heading button {
        border-radius: 8px;
        background: rgba(0, 101, 255, 0.05);
        border: none;
        outline: none;
        color: #000;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        line-height: normal;
        padding: 3px 12px; }
        .NetArrearClawbackPopup .BookingBreakdown .Heading button img {
          margin-right: 3px; }
    .NetArrearClawbackPopup .BookingBreakdown h5 {
      color: #000;
      font-family: Roboto;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-align: left; }
    .NetArrearClawbackPopup .BookingBreakdown table {
      margin-top: 16px; }
      .NetArrearClawbackPopup .BookingBreakdown table thead tr {
        border-radius: 8px 8px 0px 0px;
        background: #F6F6F6; }
        .NetArrearClawbackPopup .BookingBreakdown table thead tr th {
          color: #253858;
          font-family: Roboto;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          border-bottom: 1px solid #fff;
          position: relative; }
        .NetArrearClawbackPopup .BookingBreakdown table thead tr .SortingIcon {
          position: absolute;
          top: 8px;
          display: inline-flex;
          flex-direction: column; }
          .NetArrearClawbackPopup .BookingBreakdown table thead tr .SortingIcon img {
            margin: 1px 0px; }
      .NetArrearClawbackPopup .BookingBreakdown table th:first-child {
        border-radius: 8px 0px 0px 0px; }
      .NetArrearClawbackPopup .BookingBreakdown table th:last-child {
        border-radius: 0px 8px 0px 0px; }
      .NetArrearClawbackPopup .BookingBreakdown table .MuiTableCell-root {
        padding: 10px 8px;
        text-align: center;
        color: #253858;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border-bottom: none; }
      .NetArrearClawbackPopup .BookingBreakdown table .statusYes {
        background: rgba(34, 187, 51, 0.1); }
      .NetArrearClawbackPopup .BookingBreakdown table .statusNo {
        background: rgba(187, 33, 36, 0.05); }
      .NetArrearClawbackPopup .BookingBreakdown table .Blue {
        background: #0065FF1A; }

.missellDeduction table thead tr {
  background: #BB212426 !important; }

.ViewIncetiveCriteriaPopup {
  width: 925px;
  background: #F5F5F5;
  padding: 15px;
  position: relative; }
  .ViewIncetiveCriteriaPopup .closebtn {
    position: absolute;
    right: 10px;
    cursor: pointer; }
  .ViewIncetiveCriteriaPopup h4 {
    color: #253858;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    width: 100%; }
  .ViewIncetiveCriteriaPopup .MainContent {
    border-radius: 24px;
    background: #FFF;
    padding: 15px;
    margin-top: 15px; }
    .ViewIncetiveCriteriaPopup .MainContent .diaGram li {
      background-repeat: no-repeat;
      height: 75px;
      position: relative; }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li .slab1 {
        display: inline-block;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        color: #4F0074;
        position: relative;
        letter-spacing: 0em;
        left: 35px;
        text-align: left;
        top: 20px; }
        .ViewIncetiveCriteriaPopup .MainContent .diaGram li .slab1 p {
          font-weight: 400; }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li .percentage {
        position: absolute;
        right: 126px;
        font-family: Roboto;
        color: #fff;
        font-size: 14px;
        font-weight: 900;
        line-height: 16px;
        letter-spacing: 0em;
        text-align: left;
        bottom: 17px; }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:first-child {
        background-image: url(/images/TermDashboard/Layer.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(2) {
        background-image: url(/images/TermDashboard/Layer2.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(3) {
        background-image: url(/images/TermDashboard/Layer3.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(4) {
        background-image: url(/images/TermDashboard/Layer4.png); }
    .ViewIncetiveCriteriaPopup .MainContent .howItWork h2 {
      font-family: Roboto;
      font-size: 24px;
      font-weight: 800;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
      color: #253858;
      margin-bottom: 18px;
      margin-top: 8px; }
    .ViewIncetiveCriteriaPopup .MainContent .howItWork p {
      font-family: Roboto;
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
      letter-spacing: 0em;
      text-align: left;
      color: #253858;
      width: 300px; }
      .ViewIncetiveCriteriaPopup .MainContent .howItWork p b {
        color: #4F0074; }
    .ViewIncetiveCriteriaPopup .MainContent .title {
      background-color: #fff;
      color: #253858;
      font-family: Roboto;
      width: 100%;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin: 15px 0px 0px;
      left: 12px; }
      .ViewIncetiveCriteriaPopup .MainContent .title hr {
        margin: 0px;
        left: 4px;
        position: relative;
        top: -4px;
        background: rgba(0, 0, 0, 0.12);
        width: 80%;
        border: none;
        height: 1px; }
    .ViewIncetiveCriteriaPopup .MainContent .ApeCriteria {
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal; }
      .ViewIncetiveCriteriaPopup .MainContent .ApeCriteria strong {
        color: #ED4F44; }
      .ViewIncetiveCriteriaPopup .MainContent .ApeCriteria .textgreen {
        color: #89AD25;
        font-weight: 500;
        margin-top: 8px; }
  .ViewIncetiveCriteriaPopup .GreenBg {
    border-radius: 24px;
    background: #FFFFE3;
    padding: 15px 50px;
    margin: 15px 0px; }
    .ViewIncetiveCriteriaPopup .GreenBg h2 {
      color: #6B8F07;
      text-align: center;
      font-family: Roboto;
      font-size: 24px;
      font-style: normal;
      font-weight: 800;
      line-height: normal; }
    .ViewIncetiveCriteriaPopup .GreenBg p {
      color: #253858;
      text-align: center;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      margin: 14px;
      font-weight: 400;
      line-height: normal; }
    .ViewIncetiveCriteriaPopup .GreenBg ul li {
      border-radius: 8px;
      background: #6B8F07;
      color: #CFF36B;
      padding: 12px 35px;
      text-align: right;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-top: 8px;
      display: flex;
      justify-content: space-between; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li:nth-child(2) {
        background-color: #89AD25;
        color: #fff; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li:nth-child(3) {
        background-color: #B1D54D;
        color: #fff; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li :nth-child(4) {
        background-color: #CFF36B;
        color: #6B8F07; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li span {
        width: 30%; }
    .ViewIncetiveCriteriaPopup .GreenBg .comment {
      font-family: Roboto;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: 0em;
      text-align: center;
      color: #25385899;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 3.3rem; }
  .ViewIncetiveCriteriaPopup .RedBg {
    border-radius: 32px;
    background: #FFF0E5;
    padding: 15px 20px;
    margin: 15px 0px;
    position: relative; }
    .ViewIncetiveCriteriaPopup .RedBg p {
      font-family: Roboto;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
      letter-spacing: 0em;
      text-align: left;
      color: #ED4F44CC;
      margin: 5px 0px; }
    .ViewIncetiveCriteriaPopup .RedBg img {
      position: absolute;
      top: -1px;
      right: 0px;
      height: 57px; }
    .ViewIncetiveCriteriaPopup .RedBg h3 {
      font-family: Roboto;
      font-size: 20px;
      font-weight: 800;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
      color: #ED4F44; }
    .ViewIncetiveCriteriaPopup .RedBg .padding10 li {
      padding: 11.5px 16px !important; }
    .ViewIncetiveCriteriaPopup .RedBg .DarkRedBg {
      background: #ED4F441A;
      border-radius: 8px; }
      .ViewIncetiveCriteriaPopup .RedBg .DarkRedBg ul li {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: left;
        padding: 15px 16px;
        display: flex;
        justify-content: space-between; }
        .ViewIncetiveCriteriaPopup .RedBg .DarkRedBg ul li:first-child {
          background: #ED4F44;
          color: #fff;
          border-radius: 8px 8px 0px 0px; }
  .ViewIncetiveCriteriaPopup .BlueBg {
    border-radius: 32px;
    background: #0D0041;
    padding: 15px 20px;
    margin: 15px 0px;
    position: relative; }
    .ViewIncetiveCriteriaPopup .BlueBg p {
      font-family: Roboto;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
      letter-spacing: 0em;
      text-align: left;
      color: #FFFFFF99;
      margin: 5px 0px; }
    .ViewIncetiveCriteriaPopup .BlueBg h3 {
      font-family: Roboto;
      font-size: 20px;
      font-weight: 800;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
      color: #fff; }
    .ViewIncetiveCriteriaPopup .BlueBg .padding10 li {
      padding: 11.5px 16px !important; }
    .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg {
      background: #FFFFFF1A;
      border-radius: 8px; }
      .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg ul li {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
        color: #fff;
        letter-spacing: 0em;
        text-align: left;
        padding: 15px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg ul li:first-child {
          background: #fff;
          color: #253858;
          border-radius: 8px 8px 0px 0px; }
        .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg ul li span {
          width: 28%;
          text-align: right; }
    .ViewIncetiveCriteriaPopup .BlueBg .note {
      font-family: Roboto;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: 0em;
      text-align: center;
      margin-top: 20px; }
    .ViewIncetiveCriteriaPopup .BlueBg img {
      position: relative;
      top: 15px; }

.Dashboard2024 {
  padding: 0px;
  background-color: #fff; }
  .Dashboard2024 header {
    background: linear-gradient(90deg, #E6FAFE 0.02%, #EDDDFB 100%) !important;
    box-shadow: none;
    height: 321px;
    padding: 18px 15px 15px 15px;
    position: relative; }
    .Dashboard2024 header .Banner {
      position: relative; }
      .Dashboard2024 header .Banner img {
        position: relative;
        right: -85px;
        bottom: 29px; }
      .Dashboard2024 header .Banner .Rank {
        display: inline-block;
        position: absolute;
        left: 135px;
        top: 24px;
        color: #B95D0D; }
        .Dashboard2024 header .Banner .Rank p {
          font-family: Roboto;
          font-size: 15px;
          font-weight: 500;
          line-height: 18px;
          letter-spacing: 0em;
          text-align: center; }
        .Dashboard2024 header .Banner .Rank h2 {
          font-family: roboto;
          font-size: 28px;
          font-weight: 700;
          line-height: 35px;
          letter-spacing: 0em;
          text-align: center; }
    .Dashboard2024 header .AgentMsg {
      margin-top: 2rem; }
      .Dashboard2024 header .AgentMsg h3 {
        color: #253858;
        font-family: roboto;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal; }
      .Dashboard2024 header .AgentMsg p {
        color: #253858;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal; }
      .Dashboard2024 header .AgentMsg img {
        width: 25px;
        float: left;
        margin-right: 10px; }
    .Dashboard2024 header .month-view {
      border-radius: 12px;
      border: 1px solid #B3D1FF;
      background: #FAFAFA;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      padding: 14px 5px 14px 5px;
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      width: 270px;
      justify-content: space-evenly;
      text-align: center;
      margin: 2rem auto;
      align-items: center; }
      .Dashboard2024 header .month-view .BookingMonth .MuiSelect-select {
        border: transparent;
        opacity: 1;
        font: normal normal 600 12px/16px Roboto;
        color: #0065FF;
        text-align: center;
        padding: 0px 38px 0px 15px; }
      .Dashboard2024 header .month-view .BookingMonth .MuiOutlinedInput-notchedOutline {
        border: none !important; }
      .Dashboard2024 header .month-view .BookingMonth svg {
        color: #0065FF; }
  .Dashboard2024 .midLayout {
    position: relative;
    top: -148px;
    z-index: 99999; }
    .Dashboard2024 .midLayout .fa-info-circle {
      color: #0065FF;
      margin-left: 5px; }
    .Dashboard2024 .midLayout .box1 {
      height: auto;
      padding: 10px 0px 16px 0px;
      border-radius: 12px;
      background: #FFF;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
      width: 100%;
      position: relative;
      z-index: 99; }
      .Dashboard2024 .midLayout .box1 h4 {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px; }
      .Dashboard2024 .midLayout .box1 .gray {
        background: #F5F5F5;
        padding: 0px 15px 0px; }
        .Dashboard2024 .midLayout .box1 .gray .DropdownToogle {
          background: #F5F5F5;
          padding-bottom: 10px; }
      .Dashboard2024 .midLayout .box1 .white {
        background-color: #fff;
        padding: 0px 15px; }
        .Dashboard2024 .midLayout .box1 .white .DropdownToogle {
          background: #fff;
          padding-bottom: 10px; }
      .Dashboard2024 .midLayout .box1 .DropdownToogle {
        display: flex;
        justify-content: space-between; }
        .Dashboard2024 .midLayout .box1 .DropdownToogle li {
          color: #8090AC;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          padding-left: 5px; }
          .Dashboard2024 .midLayout .box1 .DropdownToogle li:first-child {
            width: 160px; }
      .Dashboard2024 .midLayout .box1 .incentiveCalculation {
        display: flex;
        justify-content: space-between;
        height: 40px; }
        .Dashboard2024 .midLayout .box1 .incentiveCalculation li {
          color: #253858;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          display: flex;
          align-items: center;
          line-height: normal; }
          .Dashboard2024 .midLayout .box1 .incentiveCalculation li svg {
            color: #0065FF; }
          .Dashboard2024 .midLayout .box1 .incentiveCalculation li:first-child {
            width: 160px; }
      .Dashboard2024 .midLayout .box1 .Caption li {
        color: #253858;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        opacity: 0.6; }
        .Dashboard2024 .midLayout .box1 .Caption li:first-child {
          width: 121px; }
      .Dashboard2024 .midLayout .box1 .title {
        background-color: #fff;
        color: #D9686F;
        font-family: Roboto;
        width: 100%;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 15px 0px; }
        .Dashboard2024 .midLayout .box1 .title hr {
          margin: 0px;
          left: 4px;
          position: relative;
          top: -4px;
          width: 95%; }
      .Dashboard2024 .midLayout .box1 .borderLine {
        width: 100%;
        margin: 10px 0px;
        border: 1px dashed #ddd; }
      .Dashboard2024 .midLayout .box1 .twoGrid .DropdownToogle li:first-child {
        width: auto; }
      .Dashboard2024 .midLayout .box1 .twoGrid li:first-child {
        width: auto; }
    .Dashboard2024 .midLayout .box2 {
      border-radius: 12px;
      border: 1px solid #A3BBC2;
      background: #E7FAFF;
      height: auto;
      left: -20px;
      padding: 15px 0px 15px 0px;
      width: 399px;
      z-index: 0;
      top: 30px;
      position: relative; }
      .Dashboard2024 .midLayout .box2 button {
        cursor: pointer; }
      .Dashboard2024 .midLayout .box2 .incentive-box {
        padding: 5px 0px;
        display: block; }
        .Dashboard2024 .midLayout .box2 .incentive-box .Heading {
          color: #253858;
          font-family: Roboto;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          opacity: 0.6; }
        .Dashboard2024 .midLayout .box2 .incentive-box li {
          display: inline-block;
          width: 100%;
          position: static !important;
          margin: 2px 0;
          padding: 0px 15px 0px 20px;
          letter-spacing: 0px;
          color: #253858;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          text-align: right;
          line-height: 35px;
          height: 35px;
          background-color: #FFF;
          margin: 10px 0px; }
          .Dashboard2024 .midLayout .box2 .incentive-box li span {
            color: #253858;
            float: left;
            display: flex;
            align-items: center; }
            .Dashboard2024 .midLayout .box2 .incentive-box li span svg {
              cursor: pointer;
              color: #0065FF; }
        .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle {
          background-color: #fff;
          position: relative;
          top: -10px; }
          .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle ul li {
            display: inline-block;
            width: 100%;
            margin: 2px 0;
            padding: 0px 15px 0px 20px;
            letter-spacing: 0px;
            font-size: 12px;
            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            text-align: right;
            line-height: 30px;
            height: 30px;
            background-color: #FFF; }
            .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle ul li span {
              color: #8090AC;
              float: left;
              display: flex;
              align-items: center; }
              .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle ul li span svg {
                cursor: pointer; }
        .Dashboard2024 .midLayout .box2 .incentive-box .ml-2 {
          margin-left: 2rem; }
        .Dashboard2024 .midLayout .box2 .incentive-box .active {
          border-radius: 12px;
          background: linear-gradient(90deg, #E6FAFE 0.02%, #EDDDFB 100%); }
        .Dashboard2024 .midLayout .box2 .incentive-box .positive {
          color: #1E8B57; }
        .Dashboard2024 .midLayout .box2 .incentive-box .Negative {
          color: #B93131; }
      .Dashboard2024 .midLayout .box2 h1 {
        color: #1E8B57;
        text-align: center;
        font-family: Roboto;
        display: flex;
        cursor: pointer;
        justify-content: center;
        margin-top: 17px;
        font-style: normal;
        font-weight: 700;
        align-items: center;
        line-height: normal; }
        .Dashboard2024 .midLayout .box2 h1 img {
          margin-right: 10px; }
      .Dashboard2024 .midLayout .box2 p {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-left: 5px;
        line-height: normal; }
      .Dashboard2024 .midLayout .box2 h4 {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px; }
      .Dashboard2024 .midLayout .box2 h5 {
        color: #253858;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        margin-top: 30px;
        line-height: normal; }
    .Dashboard2024 .midLayout .box3 {
      border-radius: 12px;
      background: #FFF;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
      height: auto;
      width: 100%;
      padding: 15px; }
      .Dashboard2024 .midLayout .box3 h4 {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px; }
      .Dashboard2024 .midLayout .box3 ul {
        display: flex;
        list-style-type: none;
        justify-content: space-around;
        align-items: flex-end; }
        .Dashboard2024 .midLayout .box3 ul li {
          text-align: center; }
          .Dashboard2024 .midLayout .box3 ul li img {
            width: 106px; }
          .Dashboard2024 .midLayout .box3 ul li:first-child {
            position: relative;
            top: 25px; }
            .Dashboard2024 .midLayout .box3 ul li:first-child img {
              width: 72px; }
          .Dashboard2024 .midLayout .box3 ul li:last-child {
            position: relative;
            top: 25px; }
            .Dashboard2024 .midLayout .box3 ul li:last-child img {
              width: 72px; }
          .Dashboard2024 .midLayout .box3 ul li p {
            color: #253858;
            text-align: center;
            font-family: Poppins;
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            opacity: 0.6; }
          .Dashboard2024 .midLayout .box3 ul li h3 {
            color: #253858;
            text-align: center;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 23px; }
      .Dashboard2024 .midLayout .box3 .incentive-box {
        padding: 5px 0px;
        display: block; }
        .Dashboard2024 .midLayout .box3 .incentive-box .Heading {
          color: #253858;
          font-family: Roboto;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          opacity: 0.6; }
        .Dashboard2024 .midLayout .box3 .incentive-box li {
          display: inline-block;
          width: 100%;
          position: static !important;
          margin: 2px 0;
          padding: 10px;
          letter-spacing: 0px;
          color: #253858;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          text-align: right;
          line-height: normal; }
          .Dashboard2024 .midLayout .box3 .incentive-box li span {
            float: left; }
        .Dashboard2024 .midLayout .box3 .incentive-box .ml-2 {
          margin-left: 2rem; }
        .Dashboard2024 .midLayout .box3 .incentive-box .active {
          border-radius: 12px;
          background: linear-gradient(90deg, #E6FAFE 0.02%, #EDDDFB 100%); }
  .Dashboard2024 hr {
    background: rgba(0, 0, 0, 0.12);
    height: 1px;
    border: none;
    margin-top: 40px; }
  .Dashboard2024 .BookingBreakdown {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 12px 12px 12px 12px rgba(217, 45, 214, 0.16);
    margin-top: 2.8rem;
    padding: 15px; }
    .Dashboard2024 .BookingBreakdown .Heading {
      display: flex;
      justify-content: space-between; }
      .Dashboard2024 .BookingBreakdown .Heading h3 {
        color: #000;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal; }
      .Dashboard2024 .BookingBreakdown .Heading button {
        border-radius: 8px;
        background: rgba(0, 101, 255, 0.05);
        border: none;
        outline: none;
        color: #000;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        line-height: normal;
        padding: 3px 12px; }
        .Dashboard2024 .BookingBreakdown .Heading button img {
          margin-right: 3px; }
    .Dashboard2024 .BookingBreakdown table {
      margin-top: 16px; }
      .Dashboard2024 .BookingBreakdown table thead tr {
        border-radius: 8px 8px 0px 0px;
        background: #F6F6F6; }
        .Dashboard2024 .BookingBreakdown table thead tr th {
          font-weight: 700 !important;
          border-bottom: 1px solid #fff;
          position: relative; }
      .Dashboard2024 .BookingBreakdown table thead .SortingIcon {
        position: absolute;
        top: 8px;
        display: inline-flex;
        flex-direction: column; }
        .Dashboard2024 .BookingBreakdown table thead .SortingIcon img {
          margin: 1px 0px; }
      .Dashboard2024 .BookingBreakdown table .MuiTableCell-root {
        padding: 10px 8px;
        text-align: center;
        color: #253858;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border-bottom: 1px solid #fff; }
        .Dashboard2024 .BookingBreakdown table .MuiTableCell-root:last-child {
          width: 160px; }
      .Dashboard2024 .BookingBreakdown table .statusYes {
        background: rgba(34, 187, 51, 0.1); }
      .Dashboard2024 .BookingBreakdown table .statusNo {
        background: rgba(187, 33, 36, 0.05); }

@media screen and (min-width: 320px) and (max-width: 900px) {
  .box2 {
    position: static !important;
    width: 100% !important; }
  .Dashboard2024 .midLayout {
    top: -39px !important; }
  header .banner {
    right: 10px;
    bottom: 0px;
    width: 117px; }
  header .month-view {
    margin: 2rem 0px;
    float: left;
    font-size: 13px; }
  .ViewIncetiveCriteriaPopup {
    width: 100% !important; }
    .ViewIncetiveCriteriaPopup .GreenBg h2 {
      font-size: 18px; }
    .ViewIncetiveCriteriaPopup .GreenBg ul li {
      text-align: left !important; }
  .BookingBreakdown .Heading h3 {
    font-size: 18px !important;
    position: sticky;
    z-index: 99999; }
  .BookingBreakdown .Heading button {
    font-size: 13px; }
    .BookingBreakdown .Heading button img {
      width: 24px; } }

.TablePagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px; }
  .TablePagination button {
    min-width: 19px;
    font-size: 11px;
    margin: 0px 10px;
    color: #252538;
    background-color: #f6f6f6;
    height: 22px; }
  .TablePagination .activeBtn {
    background-color: #0065ff;
    padding: 0px;
    color: #fff;
    border-radius: 80%;
    width: 20px;
    height: 20px;
    justify-content: center; }

.loader {
  margin: auto;
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(#000 0 0);
  --r1: radial-gradient(farthest-side at bottom,#000 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,#000 93%,#0000);
  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
  animation: l2 1s infinite alternate; }

@keyframes l2 {
  0%, 25% {
    background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px); }
  50% {
    background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px); }
  75% {
    background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px); }
  95%, 100% {
    background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px); } }

body {
  background-color: #fff !important; }

a {
  cursor: pointer; }

.incentiveStructureSection,
.bookingsIncentiveSection {
  border-radius: 24px;
  background: #FFFFE3;
  padding: 20px;
  margin: 0px; }
  .incentiveStructureSection h2,
  .bookingsIncentiveSection h2 {
    color: #6B8F07;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal; }
  .incentiveStructureSection .sectionDescription,
  .bookingsIncentiveSection .sectionDescription {
    color: #253858;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 20px; }
  .incentiveStructureSection .incentiveTable,
  .bookingsIncentiveSection .incentiveTable {
    width: 100%;
    border-radius: 8px;
    overflow: hidden; }
    .incentiveStructureSection .incentiveTable .tableHeader,
    .bookingsIncentiveSection .incentiveTable .tableHeader {
      display: flex;
      border-radius: 8px;
      background: #89AD25;
      color: white;
      font-weight: 600;
      padding: 12px 15px;
      margin-bottom: 2px; }
      .incentiveStructureSection .incentiveTable .tableHeader .productType,
      .bookingsIncentiveSection .incentiveTable .tableHeader .productType {
        flex: 1;
        text-align: left; }
      .incentiveStructureSection .incentiveTable .tableHeader .incentiveRate,
      .bookingsIncentiveSection .incentiveTable .tableHeader .incentiveRate {
        flex: 1;
        text-align: right; }
    .incentiveStructureSection .incentiveTable .tableRow,
    .bookingsIncentiveSection .incentiveTable .tableRow {
      display: flex;
      padding: 12px 25px;
      border-radius: 8px;
      background: rgba(137, 173, 37, 0.2);
      color: #607A16;
      font-family: Roboto;
      font-size: 13px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      border: 2px solid #ffffe3;
      justify-content: space-between; }
      .incentiveStructureSection .incentiveTable .tableRow .incentiveRate,
      .bookingsIncentiveSection .incentiveTable .tableRow .incentiveRate {
        font-weight: 800; }
  .incentiveStructureSection .bookingRules,
  .bookingsIncentiveSection .bookingRules {
    margin-top: 15px;
    margin-left: 8px; }
    .incentiveStructureSection .bookingRules p,
    .bookingsIncentiveSection .bookingRules p {
      color: #253858;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 25px; }
      .incentiveStructureSection .bookingRules p strong,
      .bookingsIncentiveSection .bookingRules p strong {
        font-weight: 700; }

.bookingsIncentiveSection {
  margin-bottom: 30px; }

.fosAllowanceSection {
  background-color: #E5E9FF;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0; }
  .fosAllowanceSection h3 {
    color: #253858;
    margin-bottom: 15px; }
  .fosAllowanceSection .FeedbackHeading {
    color: #4E5A9E;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px; }
  .fosAllowanceSection .allowanceTable {
    border-radius: 8px;
    overflow: hidden;
    background: rgba(78, 90, 158, 0.05); }
    .fosAllowanceSection .allowanceTable .tableHeader {
      display: flex;
      background-color: #6B72B7;
      color: white;
      padding: 12px 15px;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 600;
      line-height: normal; }
      .fosAllowanceSection .allowanceTable .tableHeader .slabColumn {
        flex: 1;
        text-align: left;
        font-weight: 600; }
      .fosAllowanceSection .allowanceTable .tableHeader .payoutColumn {
        flex: 1;
        text-align: right;
        font-weight: 600; }
    .fosAllowanceSection .allowanceTable .tableRow {
      display: flex;
      padding: 12px 15px;
      color: #4E5A9E;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; }
      .fosAllowanceSection .allowanceTable .tableRow .slabColumn {
        flex: 1.5;
        text-align: left; }
      .fosAllowanceSection .allowanceTable .tableRow .payoutColumn {
        flex: 1;
        text-align: right; }
    .fosAllowanceSection .allowanceTable .noteText {
      margin-top: 8px;
      color: #4E5A9E;
      font-family: Roboto;
      font-size: 11px;
      font-style: normal;
      font-weight: 500;
      padding-left: 15px;
      line-height: normal;
      text-align: left;
      padding-bottom: 12px; }

.mt-2 {
  margin-top: 2rem; }

.MuiPopover-root {
  z-index: 9999999 !important; }

.MonthName {
  font-size: 13px !important;
  font-family: 'Roboto' !important;
  font-weight: 600 !important; }

.ViewIncetiveCriteriaBtn {
  position: fixed;
  bottom: 15px;
  z-index: 99999;
  right: 15px;
  float: right; }
  .ViewIncetiveCriteriaBtn button {
    background: #5D71B7;
    font-family: Roboto;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    padding: 10px;
    letter-spacing: 0em;
    height: 42px;
    text-align: center; }
    .ViewIncetiveCriteriaBtn button img {
      width: 32px;
      margin-right: 5px;
      border-radius: 50%; }
    .ViewIncetiveCriteriaBtn button:hover {
      background: #5D71B7; }

.BookingIncentivePopop {
  z-index: 999999 !important; }
  .BookingIncentivePopop .MuiButtonBase-root {
    height: auto;
    width: 50px; }
  .BookingIncentivePopop .MuiPaper-elevation {
    width: 457px;
    margin: 15px;
    border-radius: 20px; }
  .BookingIncentivePopop .MuiBackdrop-root {
    background-color: #000000d1 !important; }
  .BookingIncentivePopop .MuiDialogContent-root {
    padding: 20px 0px; }
  .BookingIncentivePopop h4 {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 15px; }
  .BookingIncentivePopop .incentiveCalculation {
    display: flex;
    height: 40px;
    width: 100%;
    padding: 0px 15px;
    align-items: center; }
  .BookingIncentivePopop .Caption li {
    color: #253858;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    opacity: 0.6;
    margin-top: 1rem; }
    .BookingIncentivePopop .Caption li:first-child {
      width: 230px; }
  .BookingIncentivePopop .white {
    background: #fff;
    padding: 0px; }
    .BookingIncentivePopop .white li {
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; }
      .BookingIncentivePopop .white li:first-child {
        width: 230px; }
  .BookingIncentivePopop .gray {
    background: #F5F5F5;
    padding: 0px; }
    .BookingIncentivePopop .gray li {
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; }
      .BookingIncentivePopop .gray li:first-child {
        width: 230px; }
  .BookingIncentivePopop .bookingIncentive {
    background: linear-gradient(90deg, #85FFC5 -1.53%, rgba(201, 255, 229, 0) 85.56%);
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 9px 17px;
    margin: 1.2rem 0rem 0rem; }

.FOSVisitAllowance {
  z-index: 999999 !important; }
  .FOSVisitAllowance .MuiPaper-elevation {
    width: 627px;
    margin: 15px;
    border-radius: 20px; }
  .FOSVisitAllowance .MuiBackdrop-root {
    background-color: #000000d1 !important; }
  .FOSVisitAllowance .MuiDialogContent-root {
    padding: 20px 0px;
    text-align: center; }
  .FOSVisitAllowance h4 {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 15px;
    text-align: center;
    margin-bottom: 2rem; }
  .FOSVisitAllowance .downloadbutton {
    border-radius: 8px;
    background: rgba(0, 101, 255, 0.05);
    border: none;
    outline: none;
    color: #000;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
    line-height: normal;
    padding: 3px 12px;
    margin-top: 20px; }
    .FOSVisitAllowance .downloadbutton img {
      margin-right: 3px; }
  .FOSVisitAllowance th {
    color: #253858;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    opacity: 0.6;
    border: none; }
  .FOSVisitAllowance td {
    color: #253858;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    padding: 0px 15px; }
    .FOSVisitAllowance td p {
      color: #253858;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal; }

.NetArrearClawbackPopup {
  z-index: 999999 !important; }
  .NetArrearClawbackPopup .MuiButtonBase-root {
    height: auto; }
  .NetArrearClawbackPopup .MuiPaper-elevation {
    width: 1090px;
    margin: 15px;
    margin-left: 5% !important;
    border-radius: 20px;
    max-width: 1200px; }
  .NetArrearClawbackPopup .MuiBackdrop-root {
    background-color: #000000d1 !important; }
  .NetArrearClawbackPopup .MuiDialogContent-root {
    padding: 20px 0px;
    text-align: center; }
  .NetArrearClawbackPopup h4 {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 15px;
    text-align: center;
    margin-bottom: 2rem; }
  .NetArrearClawbackPopup .BookingBreakdown {
    padding: 0px 15px; }
    .NetArrearClawbackPopup .BookingBreakdown .Heading {
      display: flex;
      justify-content: space-between; }
      .NetArrearClawbackPopup .BookingBreakdown .Heading h3 {
        color: #000;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal; }
      .NetArrearClawbackPopup .BookingBreakdown .Heading button {
        border-radius: 8px;
        background: rgba(0, 101, 255, 0.05);
        border: none;
        outline: none;
        color: #000;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        line-height: normal;
        padding: 3px 12px; }
        .NetArrearClawbackPopup .BookingBreakdown .Heading button img {
          margin-right: 3px; }
    .NetArrearClawbackPopup .BookingBreakdown h5 {
      color: #000;
      font-family: Roboto;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-align: left; }
    .NetArrearClawbackPopup .BookingBreakdown table {
      margin-top: 16px; }
      .NetArrearClawbackPopup .BookingBreakdown table thead tr {
        border-radius: 8px 8px 0px 0px;
        background: #F6F6F6; }
        .NetArrearClawbackPopup .BookingBreakdown table thead tr th {
          color: #253858;
          font-family: Roboto;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          border-bottom: 1px solid #fff;
          position: relative; }
        .NetArrearClawbackPopup .BookingBreakdown table thead tr .SortingIcon {
          position: absolute;
          top: 8px;
          display: inline-flex;
          flex-direction: column; }
          .NetArrearClawbackPopup .BookingBreakdown table thead tr .SortingIcon img {
            margin: 1px 0px; }
      .NetArrearClawbackPopup .BookingBreakdown table th:first-child {
        border-radius: 8px 0px 0px 0px; }
      .NetArrearClawbackPopup .BookingBreakdown table th:last-child {
        border-radius: 0px 8px 0px 0px; }
      .NetArrearClawbackPopup .BookingBreakdown table .MuiTableCell-root {
        padding: 10px 8px;
        text-align: center;
        color: #253858;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border-bottom: none; }
      .NetArrearClawbackPopup .BookingBreakdown table .statusYes {
        background: rgba(34, 187, 51, 0.1); }
      .NetArrearClawbackPopup .BookingBreakdown table .lightColor {
        color: #8090AC; }
      .NetArrearClawbackPopup .BookingBreakdown table .button.MuiButton-root.MuiButton-containedPrimary {
        color: #FFF;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal; }
      .NetArrearClawbackPopup .BookingBreakdown table .statusNo {
        background: rgba(187, 33, 36, 0.05); }
      .NetArrearClawbackPopup .BookingBreakdown table .Blue {
        background: #0065FF1A; }

.missellDeduction table thead tr {
  background: #BB212426 !important; }

.ViewIncetiveCriteriaPopup {
  width: 950px;
  background: #F5F5F5;
  padding: 15px;
  position: relative; }
  .ViewIncetiveCriteriaPopup .closebtn {
    position: absolute;
    right: 10px;
    cursor: pointer; }
  .ViewIncetiveCriteriaPopup h4 {
    color: #253858;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    width: 100%; }
  .ViewIncetiveCriteriaPopup .MainContent {
    border-radius: 24px;
    background: #FFF;
    padding: 15px;
    margin-top: 15px; }
    .ViewIncetiveCriteriaPopup .MainContent .Heading {
      color: #253858;
      text-align: left;
      font-family: Roboto;
      font-size: 18px;
      font-style: normal;
      font-weight: 800;
      line-height: normal;
      margin-bottom: 8px; }
    .ViewIncetiveCriteriaPopup .MainContent .diaGram li {
      background-repeat: no-repeat;
      height: 72px;
      position: relative;
      background-size: contain;
      margin-bottom: 4px; }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li .slab1 {
        display: inline-block;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        color: #4F0074;
        position: relative;
        letter-spacing: 0em;
        left: 35px;
        text-align: left;
        top: 20px; }
        .ViewIncetiveCriteriaPopup .MainContent .diaGram li .slab1 p {
          font-weight: 400; }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li .percentage {
        position: absolute;
        right: 25px;
        font-family: Roboto;
        color: #fff;
        font-size: 14px;
        font-weight: 900;
        line-height: 16px;
        letter-spacing: 0em;
        text-align: left;
        bottom: 25px; }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:first-child {
        background-image: url(/images/TermDashboard/Layer_1.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(2) {
        background-image: url(/images/TermDashboard/Layer_2.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(3) {
        background-image: url(/images/TermDashboard/Layer_3.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(4) {
        background-image: url(/images/TermDashboard/Layer_4.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(5) {
        background-image: url(/images/TermDashboard/Layer_5.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(6) {
        background-image: url(/images/TermDashboard/Layer_6.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(7) {
        background-image: url(/images/TermDashboard/Layer_7.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(8) {
        background-image: url(/images/TermDashboard/Layer_8.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(9) {
        background-image: url(/images/TermDashboard/Layer_8.png); }
      .ViewIncetiveCriteriaPopup .MainContent .diaGram li:nth-child(10) {
        background-image: url(/images/TermDashboard/Layer_8.png); }
    .ViewIncetiveCriteriaPopup .MainContent .howItWork h2 {
      font-family: Roboto;
      font-size: 24px;
      font-weight: 800;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
      color: #253858;
      margin-bottom: 18px;
      margin-top: 8px; }
    .ViewIncetiveCriteriaPopup .MainContent .howItWork p {
      font-family: Roboto;
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
      letter-spacing: 0em;
      text-align: left;
      color: #253858;
      width: 100%; }
      .ViewIncetiveCriteriaPopup .MainContent .howItWork p b {
        color: #A95ACE; }
    .ViewIncetiveCriteriaPopup .MainContent .planTypes {
      margin-top: 20px; }
      .ViewIncetiveCriteriaPopup .MainContent .planTypes .planType {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 12px 0px 0px 12px;
        background: linear-gradient(90deg, rgba(79, 0, 116, 0.2) 0%, rgba(79, 0, 116, 0) 100%);
        padding: 3px 20px;
        margin-bottom: 10px;
        height: 52px; }
        .ViewIncetiveCriteriaPopup .MainContent .planTypes .planType .planName {
          color: #6D1E92;
          text-align: center;
          font-family: Roboto;
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: normal; }
        .ViewIncetiveCriteriaPopup .MainContent .planTypes .planType .planValue {
          border-radius: 9px;
          background: #4F0074;
          color: white;
          font-weight: 600;
          padding: 4px;
          width: 76px;
          text-align: center;
          font-family: Roboto;
          font-size: 18px;
          font-style: normal;
          line-height: normal; }
    .ViewIncetiveCriteriaPopup .MainContent .title {
      background-color: #fff;
      color: #253858;
      font-family: Roboto;
      width: 100%;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin: 15px 0px 0px;
      left: 12px; }
      .ViewIncetiveCriteriaPopup .MainContent .title hr {
        margin: 0px;
        left: 4px;
        position: relative;
        top: -4px;
        background: rgba(0, 0, 0, 0.12);
        width: 75%;
        border: none;
        height: 1px; }
    .ViewIncetiveCriteriaPopup .MainContent .ApeCriteria {
      color: #253858;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal; }
      .ViewIncetiveCriteriaPopup .MainContent .ApeCriteria strong {
        color: #ED4F44; }
      .ViewIncetiveCriteriaPopup .MainContent .ApeCriteria .textgreen {
        color: #89AD25;
        font-weight: 500;
        margin-top: 8px; }
    .ViewIncetiveCriteriaPopup .MainContent .navigation-container {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 20px 0; }
    .ViewIncetiveCriteriaPopup .MainContent .nav-arrow {
      background: transparent;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      color: #6d1e92;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      z-index: 10;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer; }
      .ViewIncetiveCriteriaPopup .MainContent .nav-arrow svg {
        font-size: 35px; }
    .ViewIncetiveCriteriaPopup .MainContent .nav-arrow-left {
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%); }
    .ViewIncetiveCriteriaPopup .MainContent .nav-arrow-right {
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%); }
    .ViewIncetiveCriteriaPopup .MainContent .content-with-nav {
      width: 100%;
      padding: 0 20px; }
    .ViewIncetiveCriteriaPopup .MainContent .content-row {
      display: flex;
      gap: 20px;
      width: 100%; }
      @media (max-width: 768px) {
        .ViewIncetiveCriteriaPopup .MainContent .content-row {
          flex-direction: column;
          gap: 15px; } }
    .ViewIncetiveCriteriaPopup .MainContent .content-col-7 {
      flex: 0 0 58.33%;
      max-width: 58.33%; }
      @media (max-width: 768px) {
        .ViewIncetiveCriteriaPopup .MainContent .content-col-7 {
          flex: 1;
          max-width: 100%; } }
    .ViewIncetiveCriteriaPopup .MainContent .content-col-5 {
      flex: 0 0 41.67%;
      max-width: 41.67%; }
      @media (max-width: 768px) {
        .ViewIncetiveCriteriaPopup .MainContent .content-col-5 {
          flex: 1;
          max-width: 100%; } }
  .ViewIncetiveCriteriaPopup .GreenBg {
    border-radius: 24px;
    background: #FFFFE3;
    padding: 15px 50px;
    margin: 15px 0px; }
    .ViewIncetiveCriteriaPopup .GreenBg h2 {
      color: #6B8F07;
      text-align: center;
      font-family: Roboto;
      font-size: 24px;
      font-style: normal;
      font-weight: 800;
      line-height: normal; }
    .ViewIncetiveCriteriaPopup .GreenBg p {
      color: #253858;
      text-align: center;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      margin: 14px;
      font-weight: 400;
      line-height: normal; }
    .ViewIncetiveCriteriaPopup .GreenBg ul li {
      border-radius: 8px;
      background: #6B8F07;
      color: #CFF36B;
      padding: 12px 35px;
      text-align: right;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-top: 8px;
      display: flex;
      justify-content: space-between; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li:nth-child(2) {
        background-color: #89AD25;
        color: #fff; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li:nth-child(3) {
        background-color: #B1D54D;
        color: #fff; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li :nth-child(4) {
        background-color: #CFF36B;
        color: #6B8F07; }
      .ViewIncetiveCriteriaPopup .GreenBg ul li span {
        width: 30%; }
    .ViewIncetiveCriteriaPopup .GreenBg .comment {
      font-family: Roboto;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: 0em;
      text-align: center;
      color: #25385899;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 3.3rem; }
  .ViewIncetiveCriteriaPopup .RedBg {
    border-radius: 32px;
    background: #FFF0E5;
    padding: 15px 20px;
    margin: 15px 0px;
    position: relative; }
    .ViewIncetiveCriteriaPopup .RedBg p {
      font-family: Roboto;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
      letter-spacing: 0em;
      text-align: left;
      color: #ED4F44CC;
      margin: 5px 0px; }
    .ViewIncetiveCriteriaPopup .RedBg img {
      position: absolute;
      top: -1px;
      right: 0px;
      height: 57px; }
    .ViewIncetiveCriteriaPopup .RedBg h3 {
      color: rgba(237, 79, 68, 0.8);
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-bottom: 10px; }
    .ViewIncetiveCriteriaPopup .RedBg .padding10 li {
      padding: 11.5px 16px !important; }
    .ViewIncetiveCriteriaPopup .RedBg .DarkRedBg {
      background: #ED4F441A;
      border-radius: 8px; }
      .ViewIncetiveCriteriaPopup .RedBg .DarkRedBg ul li {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: left;
        color: #ED4F44;
        display: flex;
        justify-content: space-between; }
        .ViewIncetiveCriteriaPopup .RedBg .DarkRedBg ul li:first-child {
          background: #ED4F44;
          color: #fff;
          border-radius: 8px 8px 0px 0px; }
  .ViewIncetiveCriteriaPopup .BlueBg {
    border-radius: 32px;
    background: #0D0041;
    padding: 15px 20px;
    margin: 15px 0px;
    position: relative; }
    .ViewIncetiveCriteriaPopup .BlueBg p {
      font-family: Roboto;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
      letter-spacing: 0em;
      text-align: left;
      color: #FFFFFF99;
      margin: 5px 0px; }
    .ViewIncetiveCriteriaPopup .BlueBg h3 {
      font-family: Roboto;
      font-size: 20px;
      font-weight: 800;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
      color: #fff; }
    .ViewIncetiveCriteriaPopup .BlueBg .padding10 li {
      padding: 11.5px 16px !important; }
    .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg {
      background: #FFFFFF1A;
      border-radius: 8px; }
      .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg ul li {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
        color: #fff;
        letter-spacing: 0em;
        text-align: left;
        padding: 15px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg ul li:first-child {
          background: #fff;
          color: #253858;
          border-radius: 8px 8px 0px 0px; }
        .ViewIncetiveCriteriaPopup .BlueBg .DarkblueBg ul li span {
          width: 28%;
          text-align: right; }
    .ViewIncetiveCriteriaPopup .BlueBg .note {
      font-family: Roboto;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: 0em;
      text-align: center;
      margin-top: 20px; }
    .ViewIncetiveCriteriaPopup .BlueBg img {
      position: relative;
      top: 15px; }

.Dashboard2024 {
  padding: 0px;
  background-color: #fff; }
  .Dashboard2024 header {
    background: linear-gradient(90deg, #E6FAFE 0.02%, #EDDDFB 100%) !important;
    box-shadow: none;
    height: 321px;
    padding: 18px 15px 15px 15px;
    position: relative; }
    .Dashboard2024 header .Banner {
      position: relative; }
      .Dashboard2024 header .Banner img {
        position: relative;
        right: -85px;
        bottom: 29px; }
      .Dashboard2024 header .Banner .Rank {
        display: inline-block;
        position: absolute;
        left: 135px;
        top: 24px;
        color: #B95D0D; }
        .Dashboard2024 header .Banner .Rank p {
          font-family: Roboto;
          font-size: 15px;
          font-weight: 500;
          line-height: 18px;
          letter-spacing: 0em;
          text-align: center; }
        .Dashboard2024 header .Banner .Rank h2 {
          font-family: roboto;
          font-size: 28px;
          font-weight: 700;
          line-height: 35px;
          letter-spacing: 0em;
          text-align: center; }
    .Dashboard2024 header .AgentMsg {
      margin-top: 2rem; }
      .Dashboard2024 header .AgentMsg h3 {
        color: #253858;
        font-family: roboto;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal; }
      .Dashboard2024 header .AgentMsg p {
        color: #253858;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal; }
      .Dashboard2024 header .AgentMsg img {
        width: 25px;
        float: left;
        margin-right: 10px; }
    .Dashboard2024 header .month-view {
      border-radius: 12px;
      border: 1px solid #B3D1FF;
      background: #FAFAFA;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      padding: 14px 5px 14px 5px;
      color: #253858;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      width: 270px;
      justify-content: space-evenly;
      text-align: center;
      margin: 2rem auto;
      align-items: center; }
      .Dashboard2024 header .month-view .BookingMonth .MuiSelect-select {
        border: transparent;
        opacity: 1;
        font: normal normal 600 12px/16px Roboto;
        color: #0065FF;
        text-align: center;
        padding: 0px 38px 0px 15px; }
      .Dashboard2024 header .month-view .BookingMonth .MuiOutlinedInput-notchedOutline {
        border: none !important; }
      .Dashboard2024 header .month-view .BookingMonth svg {
        color: #0065FF; }
  .Dashboard2024 .midLayout {
    position: relative;
    top: -148px;
    z-index: 99999; }
    .Dashboard2024 .midLayout .fa-info-circle {
      color: #0065FF;
      margin-left: 5px; }
    .Dashboard2024 .midLayout .box1 {
      height: auto;
      padding: 10px 0px 16px 0px;
      border-radius: 12px;
      background: #FFF;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
      width: 100%;
      position: relative;
      z-index: 99; }
      .Dashboard2024 .midLayout .box1 h4 {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px; }
      .Dashboard2024 .midLayout .box1 .gray {
        background: #F5F5F5;
        padding: 0px 15px 0px; }
        .Dashboard2024 .midLayout .box1 .gray .DropdownToogle {
          background: #F5F5F5;
          padding-bottom: 10px; }
      .Dashboard2024 .midLayout .box1 .white {
        background-color: #fff;
        padding: 0px 15px; }
        .Dashboard2024 .midLayout .box1 .white .DropdownToogle {
          background: #fff;
          padding-bottom: 10px; }
      .Dashboard2024 .midLayout .box1 .DropdownToogle {
        display: flex;
        justify-content: space-between; }
        .Dashboard2024 .midLayout .box1 .DropdownToogle li {
          color: #8090AC;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          padding-left: 5px; }
          .Dashboard2024 .midLayout .box1 .DropdownToogle li:first-child {
            width: 160px; }
      .Dashboard2024 .midLayout .box1 .incentiveCalculation {
        display: flex;
        justify-content: space-between;
        height: 40px; }
        .Dashboard2024 .midLayout .box1 .incentiveCalculation li {
          color: #253858;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          display: flex;
          align-items: center;
          line-height: normal; }
          .Dashboard2024 .midLayout .box1 .incentiveCalculation li svg {
            color: #0065FF; }
          .Dashboard2024 .midLayout .box1 .incentiveCalculation li:first-child {
            width: 160px; }
      .Dashboard2024 .midLayout .box1 .Caption li {
        color: #253858;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        opacity: 0.6; }
        .Dashboard2024 .midLayout .box1 .Caption li:first-child {
          width: 121px; }
      .Dashboard2024 .midLayout .box1 .title {
        background-color: #fff;
        color: #D9686F;
        font-family: Roboto;
        width: 100%;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 15px 0px; }
        .Dashboard2024 .midLayout .box1 .title hr {
          margin: 0px;
          left: 4px;
          position: relative;
          top: -4px;
          width: 95%; }
      .Dashboard2024 .midLayout .box1 .borderLine {
        width: 100%;
        margin: 10px 0px;
        border: 1px dashed #ddd; }
      .Dashboard2024 .midLayout .box1 .twoGrid .DropdownToogle li:first-child {
        width: auto; }
      .Dashboard2024 .midLayout .box1 .twoGrid li:first-child {
        width: auto; }
    .Dashboard2024 .midLayout .box2 {
      border-radius: 12px;
      border: 1px solid #A3BBC2;
      background: #E7FAFF;
      height: auto;
      left: -20px;
      padding: 15px 0px 15px 0px;
      width: 399px;
      z-index: 0;
      top: 30px;
      position: relative; }
      .Dashboard2024 .midLayout .box2 button {
        cursor: pointer; }
      .Dashboard2024 .midLayout .box2 .incentive-box {
        padding: 5px 0px;
        display: block; }
        .Dashboard2024 .midLayout .box2 .incentive-box .Heading {
          color: #253858;
          font-family: Roboto;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          opacity: 0.6; }
        .Dashboard2024 .midLayout .box2 .incentive-box li {
          display: inline-block;
          width: 100%;
          position: static !important;
          margin: 2px 0;
          padding: 0px 15px 0px 20px;
          letter-spacing: 0px;
          color: #253858;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          text-align: right;
          line-height: 35px;
          height: 35px;
          background-color: #FFF;
          margin: 10px 0px; }
          .Dashboard2024 .midLayout .box2 .incentive-box li span {
            color: #253858;
            float: left;
            display: flex;
            align-items: center; }
            .Dashboard2024 .midLayout .box2 .incentive-box li span svg {
              cursor: pointer;
              color: #0065FF; }
        .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle {
          background-color: #fff;
          position: relative;
          top: -10px; }
          .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle ul li {
            display: inline-block;
            width: 100%;
            margin: 2px 0;
            padding: 0px 15px 0px 20px;
            letter-spacing: 0px;
            font-size: 12px;
            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            text-align: right;
            line-height: 30px;
            height: 30px;
            background-color: #FFF; }
            .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle ul li span {
              color: #8090AC;
              float: left;
              display: flex;
              align-items: center; }
              .Dashboard2024 .midLayout .box2 .incentive-box .DropdownToogle ul li span svg {
                cursor: pointer; }
        .Dashboard2024 .midLayout .box2 .incentive-box .ml-2 {
          margin-left: 2rem; }
        .Dashboard2024 .midLayout .box2 .incentive-box .active {
          border-radius: 12px;
          background: linear-gradient(90deg, #E6FAFE 0.02%, #EDDDFB 100%); }
        .Dashboard2024 .midLayout .box2 .incentive-box .positive {
          color: #1E8B57; }
        .Dashboard2024 .midLayout .box2 .incentive-box .Negative {
          color: #B93131; }
      .Dashboard2024 .midLayout .box2 h1 {
        color: #1E8B57;
        text-align: center;
        font-family: Roboto;
        display: flex;
        cursor: pointer;
        justify-content: center;
        margin-top: 17px;
        font-style: normal;
        font-weight: 700;
        align-items: center;
        line-height: normal; }
        .Dashboard2024 .midLayout .box2 h1 img {
          margin-right: 10px; }
      .Dashboard2024 .midLayout .box2 p {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-left: 5px;
        line-height: normal; }
      .Dashboard2024 .midLayout .box2 h4 {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px; }
      .Dashboard2024 .midLayout .box2 h5 {
        color: #253858;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        margin-top: 30px;
        line-height: normal; }
    .Dashboard2024 .midLayout .box3 {
      border-radius: 12px;
      background: #FFF;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
      height: auto;
      width: 100%;
      padding: 15px; }
      .Dashboard2024 .midLayout .box3 h4 {
        color: #253858;
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px; }
      .Dashboard2024 .midLayout .box3 ul {
        display: flex;
        list-style-type: none;
        justify-content: space-around;
        align-items: flex-end; }
        .Dashboard2024 .midLayout .box3 ul li {
          text-align: center; }
          .Dashboard2024 .midLayout .box3 ul li img {
            width: 106px; }
          .Dashboard2024 .midLayout .box3 ul li:first-child {
            position: relative;
            top: 25px; }
            .Dashboard2024 .midLayout .box3 ul li:first-child img {
              width: 72px; }
          .Dashboard2024 .midLayout .box3 ul li:last-child {
            position: relative;
            top: 25px; }
            .Dashboard2024 .midLayout .box3 ul li:last-child img {
              width: 72px; }
          .Dashboard2024 .midLayout .box3 ul li p {
            color: #253858;
            text-align: center;
            font-family: Poppins;
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            opacity: 0.6; }
          .Dashboard2024 .midLayout .box3 ul li h3 {
            color: #253858;
            text-align: center;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 23px; }
      .Dashboard2024 .midLayout .box3 .incentive-box {
        padding: 5px 0px;
        display: block; }
        .Dashboard2024 .midLayout .box3 .incentive-box .Heading {
          color: #253858;
          font-family: Roboto;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          opacity: 0.6; }
        .Dashboard2024 .midLayout .box3 .incentive-box li {
          display: inline-block;
          width: 100%;
          position: static !important;
          margin: 2px 0;
          padding: 10px;
          letter-spacing: 0px;
          color: #253858;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          text-align: right;
          line-height: normal; }
          .Dashboard2024 .midLayout .box3 .incentive-box li span {
            float: left; }
        .Dashboard2024 .midLayout .box3 .incentive-box .ml-2 {
          margin-left: 2rem; }
        .Dashboard2024 .midLayout .box3 .incentive-box .active {
          border-radius: 12px;
          background: linear-gradient(90deg, #E6FAFE 0.02%, #EDDDFB 100%); }
  .Dashboard2024 hr {
    background: rgba(0, 0, 0, 0.12);
    height: 1px;
    border: none;
    margin-top: 40px; }
  .Dashboard2024 .BookingBreakdown {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 12px 12px 12px 12px rgba(217, 45, 214, 0.16);
    margin-top: 2.8rem;
    padding: 15px; }
    .Dashboard2024 .BookingBreakdown .Heading {
      display: flex;
      justify-content: space-between; }
      .Dashboard2024 .BookingBreakdown .Heading h3 {
        color: #000;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal; }
      .Dashboard2024 .BookingBreakdown .Heading button {
        border-radius: 8px;
        background: rgba(0, 101, 255, 0.05);
        border: none;
        outline: none;
        color: #000;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        line-height: normal;
        padding: 3px 12px; }
        .Dashboard2024 .BookingBreakdown .Heading button img {
          margin-right: 3px; }
    .Dashboard2024 .BookingBreakdown table {
      margin-top: 16px; }
      .Dashboard2024 .BookingBreakdown table thead tr {
        border-radius: 8px 8px 0px 0px;
        background: #F6F6F6; }
        .Dashboard2024 .BookingBreakdown table thead tr th {
          font-weight: 700 !important;
          border-bottom: 1px solid #fff;
          position: relative; }
      .Dashboard2024 .BookingBreakdown table thead .SortingIcon {
        position: absolute;
        top: 8px;
        display: inline-flex;
        flex-direction: column; }
        .Dashboard2024 .BookingBreakdown table thead .SortingIcon img {
          margin: 1px 0px; }
      .Dashboard2024 .BookingBreakdown table .MuiTableCell-root {
        padding: 10px 8px;
        text-align: center;
        color: #253858;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        min-width: 130px;
        line-height: normal;
        border-bottom: 1px solid #fff; }
        .Dashboard2024 .BookingBreakdown table .MuiTableCell-root:last-child {
          width: 160px; }
        .Dashboard2024 .BookingBreakdown table .MuiTableCell-root:first-child {
          min-width: 60px; }
      .Dashboard2024 .BookingBreakdown table .statusYes {
        background: rgba(34, 187, 51, 0.1); }
      .Dashboard2024 .BookingBreakdown table .statusNo {
        background: rgba(187, 33, 36, 0.05); }

@media screen and (min-width: 320px) and (max-width: 900px) {
  .box2 {
    position: static !important;
    width: 100% !important; }
  .Dashboard2024 .midLayout {
    top: -39px !important; }
  header .banner {
    right: 10px;
    bottom: 0px;
    width: 117px; }
  header .month-view {
    margin: 2rem 0px;
    float: left;
    font-size: 13px; }
  .ViewIncetiveCriteriaPopup {
    width: 100% !important; }
    .ViewIncetiveCriteriaPopup .GreenBg h2 {
      font-size: 18px; }
    .ViewIncetiveCriteriaPopup .GreenBg ul li {
      text-align: left !important; }
  .BookingBreakdown .Heading h3 {
    font-size: 18px !important;
    position: sticky;
    z-index: 99999; }
  .BookingBreakdown .Heading button {
    font-size: 13px; }
    .BookingBreakdown .Heading button img {
      width: 24px; } }

.TablePagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px; }
  .TablePagination button {
    min-width: 19px;
    font-size: 11px;
    margin: 0px 10px;
    color: #252538;
    background-color: #f6f6f6;
    height: 22px; }
  .TablePagination .activeBtn {
    background-color: #0065ff;
    padding: 0px;
    color: #fff;
    border-radius: 80%;
    width: 20px;
    height: 20px;
    justify-content: center; }

.loader {
  margin: auto;
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(#000 0 0);
  --r1: radial-gradient(farthest-side at bottom, #000 93%, #0000);
  --r2: radial-gradient(farthest-side at top, #000 93%, #0000);
  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
  animation: l2 1s infinite alternate; }

@keyframes l2 {
  0%,
  25% {
    background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px); }
  50% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px); }
  75% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px); }
  95%,
  100% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px); } }