@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

:root {
    --purple-primary: #9830a7;
    --purple-light: #ca71d7;
}

.color-primary {
    color: #4ad3bb;
}

.color-primary-1 {
    color: #5f9fff;
}

.color-primary-2 {
    color: #4ad3bb;
}

.color-purple {
    color: #4ad3bb;
}

.color-yellow {
    color: #f6b53f;
}

.color-orange {
    color: #ff9227;
}

.color-black {
    color: #000;
}

.color-black-1 {
    color: #2c2c2c;
}

.color-black-2 {
    color: #6d6d6d;
}

.color-black-3 {
    color: #878787;
}

.color-gray {
    color: #f5f5f5;
}

.color-gray-1 {
    color: #9e9e9e;
}

.color-gray {
    color: #f5f5f5;
}

.bgcolor-primary {
    color: #5e79d6;
}

.bgcolor-primary-1 {
    color: #5f9fff;
}

.bgcolor-primary-2 {
    color: #abcdff;
}

.bgcolor-purple {
    color: #9462ff;
}

.bgcolor-yellow {
    color: #f6b53f;
}

.bgcolor-orange {
    color: #ff9227;
}

.bgcolor-black {
    color: #000;
}

.bgcolor-black-1 {
    color: #2c2c2c;
}

.bgcolor-black-2 {
    color: #6d6d6d;
}

.bgcolor-black-3 {
    color: #878787;
}

.bgcolor-gray {
    color: #f5f5f5;
}

.bgcolor-gray-1 {
    color: #9e9e9e;
}

.bgcolor-gray {
    color: #f5f5f5;
}

.font-nunito {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.font-nunito-important {
    font-family: "Nunito", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}

/*
@font-face {

  src: url(../fonts/Mulish-BlackItalic.woff2) format("woff2"),
    url(../fonts/Mulish-BlackItalic.woff) format("woff"),
    url(../fonts/Mulish-BlackItalic.ttf) format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-Bold.woff2) format("woff2"),
    url(../fonts/Mulish-Bold.woff) format("woff"),
    url(../fonts/Mulish-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-Black.woff2) format("woff2"),
    url(../fonts/Mulish-Black.woff) format("woff"),
    url(../fonts/Mulish-Black.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-ExtraBold.woff2) format("woff2"),
    url(../fonts/Mulish-ExtraBold.woff) format("woff"),
    url(../fonts/Mulish-ExtraBold.ttf) format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-BoldItalic.woff2) format("woff2"),
    url(../fonts/Mulish-BoldItalic.woff) format("woff"),
    url(../fonts/Mulish-BoldItalic.ttf) format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-ExtraBoldItalic.woff2) format("woff2"),
    url(../fonts/Mulish-ExtraBoldItalic.woff) format("woff"),
    url(../fonts/Mulish-ExtraBoldItalic.ttf) format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-ExtraLight.woff2) format("woff2"),
    url(../fonts/Mulish-ExtraLight.woff) format("woff"),
    url(../fonts/Mulish-ExtraLight.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-Italic.woff2) format("woff2"),
    url(../fonts/Mulish-Italic.woff) format("woff"),
    url(../fonts/Mulish-Italic.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-ExtraLightItalic.woff2) format("woff2"),
    url(../fonts/Mulish-ExtraLightItalic.woff) format("woff"),
    url(../fonts/Mulish-ExtraLightItalic.ttf) format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-LightItalic.woff2) format("woff2"),
    url(../fonts/Mulish-LightItalic.woff) format("woff"),
    url(../fonts/Mulish-LightItalic.ttf) format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-Light.woff2) format("woff2"),
    url(../fonts/Mulish-Light.woff) format("woff"),
    url(../fonts/Mulish-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-Medium.woff2) format("woff2"),
    url(../fonts/Mulish-Medium.woff) format("woff"),
    url(../fonts/Mulish-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-Regular.woff2) format("woff2"),
    url(../fonts/Mulish-Regular.woff) format("woff"),
    url(../fonts/Mulish-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-MediumItalic.woff2) format("woff2"),
    url(../fonts/Mulish-MediumItalic.woff) format("woff"),
    url(../fonts/Mulish-MediumItalic.ttf) format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-SemiBold.woff2) format("woff2"),
    url(../fonts/Mulish-SemiBold.woff) format("woff"),
    url(../fonts/Mulish-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {

  src: url(../fonts/Mulish-SemiBoldItalic.woff2) format("woff2"),
    url(../fonts/Mulish-SemiBoldItalic.woff) format("woff"),
    url(../fonts/Mulish-SemiBoldItalic.ttf) format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Black.woff2) format("woff2"),
    url(../fonts/WorkSans-Black.woff) format("woff"),
    url(../fonts/WorkSans-Black.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-BlackItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-BlackItalic.woff) format("woff"),
    url(../fonts/WorkSans-BlackItalic.ttf) format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Bold.woff2) format("woff2"),
    url(../fonts/WorkSans-Bold.woff) format("woff"),
    url(../fonts/WorkSans-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-ExtraBold.woff2) format("woff2"),
    url(../fonts/WorkSans-ExtraBold.woff) format("woff"),
    url(../fonts/WorkSans-ExtraBold.ttf) format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-BoldItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-BoldItalic.woff) format("woff"),
    url(../fonts/WorkSans-BoldItalic.ttf) format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-ExtraBoldItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-ExtraBoldItalic.woff) format("woff"),
    url(../fonts/WorkSans-ExtraBoldItalic.ttf) format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-ExtraLight.woff2) format("woff2"),
    url(../fonts/WorkSans-ExtraLight.woff) format("woff"),
    url(../fonts/WorkSans-ExtraLight.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-ExtraLightItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-ExtraLightItalic.woff) format("woff"),
    url(../fonts/WorkSans-ExtraLightItalic.ttf) format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Italic.woff2) format("woff2"),
    url(../fonts/WorkSans-Italic.woff) format("woff"),
    url(../fonts/WorkSans-Italic.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Light.woff2) format("woff2"),
    url(../fonts/WorkSans-Light.woff) format("woff"),
    url(../fonts/WorkSans-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-LightItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-LightItalic.woff) format("woff"),
    url(../fonts/WorkSans-LightItalic.ttf) format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Medium.woff2) format("woff2"),
    url(../fonts/WorkSans-Medium.woff) format("woff"),
    url(../fonts/WorkSans-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-MediumItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-MediumItalic.woff) format("woff"),
    url(../fonts/WorkSans-MediumItalic.ttf) format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-SemiBoldItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-SemiBoldItalic.woff) format("woff"),
    url(../fonts/WorkSans-SemiBoldItalic.ttf) format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Regular.woff2) format("woff2"),
    url(../fonts/WorkSans-Regular.woff) format("woff"),
    url(../fonts/WorkSans-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-SemiBold.woff2) format("woff2"),
    url(../fonts/WorkSans-SemiBold.woff) format("woff"),
    url(../fonts/WorkSans-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-Thin.woff2) format("woff2"),
    url(../fonts/WorkSans-Thin.woff) format("woff"),
    url(../fonts/WorkSans-Thin.ttf) format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url(../fonts/WorkSans-ThinItalic.woff2) format("woff2"),
    url(../fonts/WorkSans-ThinItalic.woff) format("woff"),
    url(../fonts/WorkSans-ThinItalic.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Museo 900";
  src: url(../fonts/Museo900-Regular.woff2) format("woff2"),
    url(../fonts/Museo900-Regular.woff) format("woff"),
    url(../fonts/Museo900-Regular.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
  */
@font-face {
    font-family: "AldaOT-Regular";
    src: url(fonts/AldaOT-Regular.otf) format("otf"),
        url(fonts/AldaOT-Regular.otf) format("otf"),
        url(fonts/AldaOT-Regular.otf) format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    font-weight: 400;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    background-color: #f5f5f5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    max-width: 100vw;
    overflow-x: hidden;
}

body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    line-height: 1.25;
}

body ::-moz-selection {
    color: #fff;
    background-color: #5e79d6;
}

body ::-moz-selection,
body ::selection {
    color: #fff;
    background-color: #5e79d6;
}

body:not(.home) .sitecontent>section:first-child {
    padding-top: 24px;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1210px;
    padding: 0px 12px;
}

.sitecontent.sc__skill-page {
    /*background: #ffffff !important;*/
    background: #97D0EC;
    background: linear-gradient(90deg, rgba(151, 208, 236, 1) 0%, rgba(233, 236, 185, 1) 50%, rgba(136, 210, 157, 1) 100%);
}

.sitecontent.sc__skill-page .container {
    background: white;
    margin-top: 10px;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .container {
        padding: 0 45px;
    }

    .dropdown-menu-end[data-bs-popper] {
        right: 0;
        left: 0;
        width: 360px;
    }

}



@media (max-width: 767px) {
    .container {
        padding: 0 20px;
    }

    .profiles-grid {
        gap: 20px !important;
    }
}

.section {
    position: relative;
    padding: 100px 0;
}

.section-head {
    margin-bottom: 65px;
}

.section-bg {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.section-inner {
    position: relative;
}

@media (max-width: 991px) {
    .section-head {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .section {
        padding: 30px 0;
    }
}

.text-xsm {
    font-size: 13px;
}

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

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

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

@media (min-width: 992px) {
    .text-lg-center {
        text-align: center !important;
    }

    .text-lg-left {
        text-align: left !important;
    }

    .text-lg-right {
        text-align: right !important;
    }
}

@media (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 50px;
    }

    .three-col {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid.two-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .text-md-center {
        text-align: center !important;
    }

    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }
}

@media (min-width: 568px) {
    .text-sm-center {
        text-align: center !important;
    }

    .text-sm-left {
        text-align: left !important;
    }

    .text-sm-right {
        text-align: right !important;
    }
}

@media only screen and (min-width: 1201px) {
    .app-lg {
        display: none !important;
    }
}

@media only screen and (max-width: 1200px) {
    .dis-lg {
        display: none !important;
    }
}

@media only screen and (min-width: 992px) {
    .app-md {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {
    .dis-md {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .app-sm {
        display: none !important;
    }
}

@media only screen and (max-width: 767px) {
    .dis-sm {
        display: none !important;
    }
}

@media only screen and (min-width: 576px) {
    .app-xs {
        display: none !important;
    }
}

@media only screen and (max-width: 576px) {
    .dis-xs {
        display: none !important;
    }

    .dropdown-menu-end[data-bs-popper] {
        left: 50%;
        transform: translateX(-50%)
    }
}

.imgfit {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.img-fluid {
    max-width: 100%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-width--20 {
    max-width: 20px !important;
}

.max-width--30 {
    max-width: 30px !important;
}

.max-width--40 {
    max-width: 40px !important;
}

.max-width--50 {
    max-width: 50px !important;
}

.max-width--60 {
    max-width: 60px !important;
}

.max-width--80 {
    max-width: 80px !important;
}

.max-width--100 {
    max-width: 100px !important;
}

.max-width--150 {
    max-width: 150px !important;
}

.max-width--160 {
    max-width: 160px !important;
}

.max-width--170 {
    max-width: 170px !important;
}

.max-width--180 {
    max-width: 180px !important;
}

.max-width--190 {
    max-width: 190px !important;
}

.max-width--200 {
    max-width: 200px !important;
}

.max-width--210 {
    max-width: 210px !important;
}

.max-width--220 {
    max-width: 220px !important;
}

.max-width--230 {
    max-width: 230px !important;
}

.max-width--240 {
    max-width: 240px !important;
}

.max-width--250 {
    max-width: 250px !important;
}

.max-width--260 {
    max-width: 260px !important;
}

.max-width--280 {
    max-width: 280px !important;
}

.max-width--300 {
    max-width: 300px !important;
}

.max-width--350 {
    max-width: 350px !important;
}

.max-width--400 {
    max-width: 400px !important;
}

.max-width--450 {
    max-width: 450px !important;
}

.max-width--500 {
    max-width: 500px !important;
}

.max-width--550 {
    max-width: 550px !important;
}

.max-width--600 {
    max-width: 600px !important;
}

.max-width--650 {
    max-width: 650px !important;
}

.max-width--700 {
    max-width: 700px !important;
}

.max-width--750 {
    max-width: 750px !important;
}

.max-width--800 {
    max-width: 800px !important;
}

.max-width--850 {
    max-width: 850px !important;
}

.max-width--880 {
    max-width: 880px !important;
}

.max-width--900 {
    max-width: 900px !important;
}

.max-width--950 {
    max-width: 950px !important;
}

.max-width--1000 {
    max-width: 1000px !important;
}

.max-width--1050 {
    max-width: 1050px !important;
}

.max-width--1100 {
    max-width: 1100px !important;
}

.max-width--1150 {
    max-width: 1150px !important;
}

.max-width--1200 {
    max-width: 1200px !important;
}

.max-width--1250 {
    max-width: 1250px !important;
}

.max-width--1300 {
    max-width: 1300px !important;
}

.max-width--1350 {
    max-width: 1350px !important;
}

.max-width--1400 {
    max-width: 1400px !important;
}

.input-no-border {
    display: inline-block;
    width: 1em;
    min-width: 1em;
    text-align: center;
    border: 1px solid transparent;
    outline: none;
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.trusted {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.trusted .icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 18px;
    margin-right: 9px;
}

.trusted .icon img {
    width: 100%;
}

.trusted p {
    color: #abcdff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 0;
}

.editable {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.editable *+.edit-ico,
.editable *+.edit-link {
    margin-left: 10px;
}

.edit-ico,
.edit-link {
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 0;
}

.edit-ico {
    width: 15px;
    height: 15px;
}

.edit-ico img,
.edit-ico svg {
    width: 12px;
}

.avatar {
    border-radius: 50%;
}

.avatar img,
.avatar svg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.undernote {
    margin-top: 40px;
}

.undernote p:last-child {
    margin-bottom: 0;
}

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

h1 {
    color: #5e79d6;
    font-size: 48px;
    font-weight: 700;
}

h2 {
    color: #5e79d6;
    font-size: 40px;
    font-weight: 700;
    line-height: 125%;
}

h2.size-lg {
    font-size: 60px;
    line-height: 64px;
}

h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 124%;
    margin: 0 0 14px;
}

a {
    color: inherit;
    text-decoration: none;
    outline: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a:hover {
    color: #4ad3bb;
    text-decoration: none;
    outline: 0;
}

a:focus {
    outline: 0;
}

a,
button {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    cursor: pointer;
}

.section-card-title {
    color: #5e79d6;
    font-size: 34px;
    font-weight: 800;
}

.card-title {
    color: #464646;

    font-size: 21px;
    font-weight: 800;
}

.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 32px;
    border: 0;
    border-radius: 48px;
    color: #fff;
    background: #ffa500;
    min-width: 137px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border-radius: 8px;
}

.btn.btn-orange:disabled,
.btn.btn-orange:disabled:hover {
    cursor: not-allowed !important;
}

.btn.btn-orange {
    color: #ffffff;
    background-color: #ffa500;
}

.btn.btn-orange:hover {
    background-color: #e79702;
    color: #ffffff;
}

.btn:hover {
    color: #000;
    background-color: #68ccc9;
}

.btn-purple {
    min-width: 100px;
    min-height: 40px;
    background-color: #4ad3bb;
    background-size: 200% auto;
    background-position-x: 0;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid black;
    color: black;
}

.btn-outline:hover {
    background-color: #f7f7f7;
    border: 1px solid black;
    color: black;
}

.banner-btn i {
    font-size: 16px;
    text-align: right;
    position: absolute;
    right: 10px;
}

.btn-purple:hover {
    color: #fff;
    background-color: #47cab2;
}

.btn-yellow {
    color: #fff;
    background-image: linear-gradient(150deg,
            #f6b53f,
            #f6b53f,
            #ff9227,
            #ff9227);
    background-size: 200% auto;
    background-position-x: 0;
}

.btn-yellow:hover {
    color: #fff;
    background-position-x: 100%;
}

.btn-min-lg {
    font-size: 19px;
    min-width: 247px;
}

.link-underline {
    color: #32b5ff;
    text-decoration: underline;
}

.link-underline:hover {
    color: #5e79d6;
    text-decoration: underline;
}

.party-pops bokeh {
    position: absolute;
    top: 0;
    left: 0;
    width: 2vmin;
    height: 2vmin;
    border-radius: 50%;
    -webkit-animation-name: explosion;
    animation-name: explosion;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    -webkit-animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
    animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
}

.party-pops bokeh:nth-child(1) {
    background-color: #feff28;
    -webkit-transform: translate(27.82529vw, 5.31163vh);
    transform: translate(27.82529vw, 5.31163vh);
    -webkit-animation-duration: 3.79701s;
    animation-duration: 3.79701s;
    -webkit-animation-delay: -3.05778s;
    animation-delay: -3.05778s;
}

.party-pops bokeh:nth-child(2) {
    background-color: #fc85e1;
    -webkit-transform: translate(25.02353vw, 6.07776vh);
    transform: translate(25.02353vw, 6.07776vh);
    -webkit-animation-duration: 4.76965s;
    animation-duration: 4.76965s;
    -webkit-animation-delay: -2.92509s;
    animation-delay: -2.92509s;
}

.party-pops bokeh:nth-child(3) {
    background-color: #fc85e1;
    -webkit-transform: translate(2.01485vw, 3.89864vh);
    transform: translate(2.01485vw, 3.89864vh);
    -webkit-animation-duration: 3.36659s;
    animation-duration: 3.36659s;
    -webkit-animation-delay: -4.9955s;
    animation-delay: -4.9955s;
}

.party-pops bokeh:nth-child(4) {
    background-color: #fc85e1;
    -webkit-transform: translate(9.02058vw, 9.9085vh);
    transform: translate(9.02058vw, 9.9085vh);
    -webkit-animation-duration: 4.84085s;
    animation-duration: 4.84085s;
    -webkit-animation-delay: -1.278s;
    animation-delay: -1.278s;
}

.party-pops bokeh:nth-child(5) {
    background-color: #ef8d22;
    -webkit-transform: translate(23.62035vw, 7.17201vh);
    transform: translate(23.62035vw, 7.17201vh);
    -webkit-animation-duration: 4.68133s;
    animation-duration: 4.68133s;
    -webkit-animation-delay: -4.82674s;
    animation-delay: -4.82674s;
}

.party-pops bokeh:nth-child(6) {
    background-color: #feff28;
    -webkit-transform: translate(16.53678vw, 9.6157vh);
    transform: translate(16.53678vw, 9.6157vh);
    -webkit-animation-duration: 2.74161s;
    animation-duration: 2.74161s;
    -webkit-animation-delay: -3.07355s;
    animation-delay: -3.07355s;
}

.party-pops bokeh:nth-child(7) {
    background-color: #fc85e1;
    -webkit-transform: translate(23.6838vw, 7.23965vh);
    transform: translate(23.6838vw, 7.23965vh);
    -webkit-animation-duration: 3.93532s;
    animation-duration: 3.93532s;
    -webkit-animation-delay: -4.70041s;
    animation-delay: -4.70041s;
}

.party-pops bokeh:nth-child(8) {
    background-color: #ef8d22;
    -webkit-transform: translate(18.38799vw, 2.18223vh);
    transform: translate(18.38799vw, 2.18223vh);
    -webkit-animation-duration: 3.78408s;
    animation-duration: 3.78408s;
    -webkit-animation-delay: -1.00041s;
    animation-delay: -1.00041s;
}

.party-pops bokeh:nth-child(9) {
    background-color: #fc85e1;
    -webkit-transform: translate(26.14656vw, 8.17692vh);
    transform: translate(26.14656vw, 8.17692vh);
    -webkit-animation-duration: 4.38809s;
    animation-duration: 4.38809s;
    -webkit-animation-delay: -0.02392s;
    animation-delay: -0.02392s;
}

.party-pops bokeh:nth-child(10) {
    background-color: #ef8d22;
    -webkit-transform: translate(24.52984vw, 8.4868vh);
    transform: translate(24.52984vw, 8.4868vh);
    -webkit-animation-duration: 3.68969s;
    animation-duration: 3.68969s;
    -webkit-animation-delay: -1.42941s;
    animation-delay: -1.42941s;
}

.party-pops bokeh:nth-child(11) {
    background-color: #feff28;
    -webkit-transform: translate(11.51591vw, 1.44665vh);
    transform: translate(11.51591vw, 1.44665vh);
    -webkit-animation-duration: 3.67071s;
    animation-duration: 3.67071s;
    -webkit-animation-delay: -2.32294s;
    animation-delay: -2.32294s;
}

.party-pops bokeh:nth-child(12) {
    background-color: #feff28;
    -webkit-transform: translate(24.21223vw, 6.77829vh);
    transform: translate(24.21223vw, 6.77829vh);
    -webkit-animation-duration: 3.32967s;
    animation-duration: 3.32967s;
    -webkit-animation-delay: -1.00234s;
    animation-delay: -1.00234s;
}

.party-pops bokeh:nth-child(13) {
    background-color: #ef8d22;
    -webkit-transform: translate(2.81598vw, 6.11477vh);
    transform: translate(2.81598vw, 6.11477vh);
    -webkit-animation-duration: 4.93327s;
    animation-duration: 4.93327s;
    -webkit-animation-delay: -0.21858s;
    animation-delay: -0.21858s;
}

.party-pops bokeh:nth-child(14) {
    background-color: #fc85e1;
    -webkit-transform: translate(19.14816vw, 5.09236vh);
    transform: translate(19.14816vw, 5.09236vh);
    -webkit-animation-duration: 3.66342s;
    animation-duration: 3.66342s;
    -webkit-animation-delay: -1.61342s;
    animation-delay: -1.61342s;
}

.party-pops bokeh:nth-child(15) {
    background-color: #fc85e1;
    -webkit-transform: translate(8.02321vw, 8.62988vh);
    transform: translate(8.02321vw, 8.62988vh);
    -webkit-animation-duration: 4.65114s;
    animation-duration: 4.65114s;
    -webkit-animation-delay: -4.51831s;
    animation-delay: -4.51831s;
}

.party-pops bokeh:nth-child(16) {
    background-color: #fc85e1;
    -webkit-transform: translate(23.18018vw, 1.66135vh);
    transform: translate(23.18018vw, 1.66135vh);
    -webkit-animation-duration: 3.65824s;
    animation-duration: 3.65824s;
    -webkit-animation-delay: -1.29488s;
    animation-delay: -1.29488s;
}

.party-pops bokeh:nth-child(17) {
    background-color: #feff28;
    -webkit-transform: translate(7.66404vw, 4.06877vh);
    transform: translate(7.66404vw, 4.06877vh);
    -webkit-animation-duration: 4.01639s;
    animation-duration: 4.01639s;
    -webkit-animation-delay: -4.80961s;
    animation-delay: -4.80961s;
}

.party-pops bokeh:nth-child(18) {
    background-color: #fc85e1;
    -webkit-transform: translate(16.36909vw, 8.55229vh);
    transform: translate(16.36909vw, 8.55229vh);
    -webkit-animation-duration: 2.52471s;
    animation-duration: 2.52471s;
    -webkit-animation-delay: -0.66176s;
    animation-delay: -0.66176s;
}

.party-pops bokeh:nth-child(19) {
    background-color: #fc85e1;
    -webkit-transform: translate(21.88443vw, 0.57292vh);
    transform: translate(21.88443vw, 0.57292vh);
    -webkit-animation-duration: 4.37571s;
    animation-duration: 4.37571s;
    -webkit-animation-delay: -3.7965s;
    animation-delay: -3.7965s;
}

.party-pops bokeh:nth-child(20) {
    background-color: #ef8d22;
    -webkit-transform: translate(25.91607vw, 9.43361vh);
    transform: translate(25.91607vw, 9.43361vh);
    -webkit-animation-duration: 4.84977s;
    animation-duration: 4.84977s;
    -webkit-animation-delay: -0.13529s;
    animation-delay: -0.13529s;
}

.party-pops bokeh:nth-child(21) {
    background-color: #2bd8ff;
    -webkit-transform: translate(8.8264vw, 3.1554vh);
    transform: translate(8.8264vw, 3.1554vh);
    -webkit-animation-duration: 3.15969s;
    animation-duration: 3.15969s;
    -webkit-animation-delay: -2.24752s;
    animation-delay: -2.24752s;
}

.party-pops bokeh:nth-child(22) {
    background-color: #ef8d22;
    -webkit-transform: translate(15.8853vw, 0.03971vh);
    transform: translate(15.8853vw, 0.03971vh);
    -webkit-animation-duration: 4.55902s;
    animation-duration: 4.55902s;
    -webkit-animation-delay: -0.75169s;
    animation-delay: -0.75169s;
}

.party-pops bokeh:nth-child(23) {
    background-color: #2bd8ff;
    -webkit-transform: translate(12.04645vw, 1.32987vh);
    transform: translate(12.04645vw, 1.32987vh);
    -webkit-animation-duration: 2.13767s;
    animation-duration: 2.13767s;
    -webkit-animation-delay: -1.38441s;
    animation-delay: -1.38441s;
}

.party-pops bokeh:nth-child(24) {
    background-color: #feff28;
    -webkit-transform: translate(11.98085vw, 8.89345vh);
    transform: translate(11.98085vw, 8.89345vh);
    -webkit-animation-duration: 3.50939s;
    animation-duration: 3.50939s;
    -webkit-animation-delay: -2.14053s;
    animation-delay: -2.14053s;
}

.party-pops bokeh:nth-child(25) {
    background-color: #ef8d22;
    -webkit-transform: translate(26.92154vw, 5.82762vh);
    transform: translate(26.92154vw, 5.82762vh);
    -webkit-animation-duration: 4.19369s;
    animation-duration: 4.19369s;
    -webkit-animation-delay: -2.40256s;
    animation-delay: -2.40256s;
}

.party-pops bokeh:nth-child(26) {
    background-color: #ef8d22;
    -webkit-transform: translate(13.566vw, 8.54369vh);
    transform: translate(13.566vw, 8.54369vh);
    -webkit-animation-duration: 2.43592s;
    animation-duration: 2.43592s;
    -webkit-animation-delay: -4.71803s;
    animation-delay: -4.71803s;
}

.party-pops bokeh:nth-child(27) {
    background-color: #ef8d22;
    -webkit-transform: translate(12.31507vw, 7.59684vh);
    transform: translate(12.31507vw, 7.59684vh);
    -webkit-animation-duration: 2.79684s;
    animation-duration: 2.79684s;
    -webkit-animation-delay: -4.43203s;
    animation-delay: -4.43203s;
}

.party-pops bokeh:nth-child(28) {
    background-color: #ef8d22;
    -webkit-transform: translate(3.90978vw, 8.48512vh);
    transform: translate(3.90978vw, 8.48512vh);
    -webkit-animation-duration: 2.54076s;
    animation-duration: 2.54076s;
    -webkit-animation-delay: -3.11267s;
    animation-delay: -3.11267s;
}

.party-pops bokeh:nth-child(29) {
    background-color: #feff28;
    -webkit-transform: translate(11.04752vw, 4.71997vh);
    transform: translate(11.04752vw, 4.71997vh);
    -webkit-animation-duration: 3.16562s;
    animation-duration: 3.16562s;
    -webkit-animation-delay: -1.95401s;
    animation-delay: -1.95401s;
}

.party-pops bokeh:nth-child(30) {
    background-color: #feff28;
    -webkit-transform: translate(4.91574vw, 6.10256vh);
    transform: translate(4.91574vw, 6.10256vh);
    -webkit-animation-duration: 4.36593s;
    animation-duration: 4.36593s;
    -webkit-animation-delay: -3.55709s;
    animation-delay: -3.55709s;
}

.party-pops bokeh:nth-child(31) {
    background-color: #feff28;
    -webkit-transform: translate(7.1714vw, 3.6025vh);
    transform: translate(7.1714vw, 3.6025vh);
    -webkit-animation-duration: 3.35511s;
    animation-duration: 3.35511s;
    -webkit-animation-delay: -1.95503s;
    animation-delay: -1.95503s;
}

.party-pops bokeh:nth-child(32) {
    background-color: #fc85e1;
    -webkit-transform: translate(8.24464vw, 4.82925vh);
    transform: translate(8.24464vw, 4.82925vh);
    -webkit-animation-duration: 3.28462s;
    animation-duration: 3.28462s;
    -webkit-animation-delay: -4.36267s;
    animation-delay: -4.36267s;
}

.party-pops bokeh:nth-child(33) {
    background-color: #feff28;
    -webkit-transform: translate(29.13973vw, 7.0287vh);
    transform: translate(29.13973vw, 7.0287vh);
    -webkit-animation-duration: 4.37229s;
    animation-duration: 4.37229s;
    -webkit-animation-delay: -0.90142s;
    animation-delay: -0.90142s;
}

.party-pops bokeh:nth-child(34) {
    background-color: #feff28;
    -webkit-transform: translate(19.22114vw, 8.52039vh);
    transform: translate(19.22114vw, 8.52039vh);
    -webkit-animation-duration: 2.14301s;
    animation-duration: 2.14301s;
    -webkit-animation-delay: -2.26116s;
    animation-delay: -2.26116s;
}

.party-pops bokeh:nth-child(35) {
    background-color: #ef8d22;
    -webkit-transform: translate(10.78634vw, 0.84236vh);
    transform: translate(10.78634vw, 0.84236vh);
    -webkit-animation-duration: 4.50363s;
    animation-duration: 4.50363s;
    -webkit-animation-delay: -0.73747s;
    animation-delay: -0.73747s;
}

.party-pops bokeh:nth-child(36) {
    background-color: #2bd8ff;
    -webkit-transform: translate(20.148vw, 9.76139vh);
    transform: translate(20.148vw, 9.76139vh);
    -webkit-animation-duration: 2.84733s;
    animation-duration: 2.84733s;
    -webkit-animation-delay: -1.52456s;
    animation-delay: -1.52456s;
}

.party-pops bokeh:nth-child(37) {
    background-color: #fc85e1;
    -webkit-transform: translate(28.2042vw, 4.20953vh);
    transform: translate(28.2042vw, 4.20953vh);
    -webkit-animation-duration: 4.70172s;
    animation-duration: 4.70172s;
    -webkit-animation-delay: -1.20758s;
    animation-delay: -1.20758s;
}

.party-pops bokeh:nth-child(38) {
    background-color: #2bd8ff;
    -webkit-transform: translate(20.01642vw, 5.54213vh);
    transform: translate(20.01642vw, 5.54213vh);
    -webkit-animation-duration: 4.81538s;
    animation-duration: 4.81538s;
    -webkit-animation-delay: -0.74451s;
    animation-delay: -0.74451s;
}

.party-pops bokeh:nth-child(39) {
    background-color: #fc85e1;
    -webkit-transform: translate(11.51595vw, 5.18331vh);
    transform: translate(11.51595vw, 5.18331vh);
    -webkit-animation-duration: 3.33421s;
    animation-duration: 3.33421s;
    -webkit-animation-delay: -2.08662s;
    animation-delay: -2.08662s;
}

.party-pops bokeh:nth-child(40) {
    background-color: #2bd8ff;
    -webkit-transform: translate(22.92429vw, 1.21607vh);
    transform: translate(22.92429vw, 1.21607vh);
    -webkit-animation-duration: 3.22124s;
    animation-duration: 3.22124s;
    -webkit-animation-delay: -1.74354s;
    animation-delay: -1.74354s;
}

.party-pops bokeh:nth-child(41) {
    background-color: #fc85e1;
    -webkit-transform: translate(1.15909vw, 1.93639vh);
    transform: translate(1.15909vw, 1.93639vh);
    -webkit-animation-duration: 3.39853s;
    animation-duration: 3.39853s;
    -webkit-animation-delay: -3.19427s;
    animation-delay: -3.19427s;
}

.party-pops bokeh:nth-child(42) {
    background-color: #ef8d22;
    -webkit-transform: translate(24.01639vw, 5.88794vh);
    transform: translate(24.01639vw, 5.88794vh);
    -webkit-animation-duration: 2.77769s;
    animation-duration: 2.77769s;
    -webkit-animation-delay: -0.54545s;
    animation-delay: -0.54545s;
}

.party-pops bokeh:nth-child(43) {
    background-color: #2bd8ff;
    -webkit-transform: translate(7.36251vw, 1.33052vh);
    transform: translate(7.36251vw, 1.33052vh);
    -webkit-animation-duration: 3.63566s;
    animation-duration: 3.63566s;
    -webkit-animation-delay: -1.59339s;
    animation-delay: -1.59339s;
}

.party-pops bokeh:nth-child(44) {
    background-color: #feff28;
    -webkit-transform: translate(14.8563vw, 4.32456vh);
    transform: translate(14.8563vw, 4.32456vh);
    -webkit-animation-duration: 4.54468s;
    animation-duration: 4.54468s;
    -webkit-animation-delay: -3.46497s;
    animation-delay: -3.46497s;
}

.party-pops bokeh:nth-child(45) {
    background-color: #2bd8ff;
    -webkit-transform: translate(10.39608vw, 2.83633vh);
    transform: translate(10.39608vw, 2.83633vh);
    -webkit-animation-duration: 3.97233s;
    animation-duration: 3.97233s;
    -webkit-animation-delay: -1.8954s;
    animation-delay: -1.8954s;
}

.party-pops bokeh:nth-child(46) {
    background-color: #ef8d22;
    -webkit-transform: translate(3.2713vw, 4.19469vh);
    transform: translate(3.2713vw, 4.19469vh);
    -webkit-animation-duration: 2.641s;
    animation-duration: 2.641s;
    -webkit-animation-delay: -3.53823s;
    animation-delay: -3.53823s;
}

.party-pops bokeh:nth-child(47) {
    background-color: #2bd8ff;
    -webkit-transform: translate(13.27494vw, 0.0564vh);
    transform: translate(13.27494vw, 0.0564vh);
    -webkit-animation-duration: 4.51968s;
    animation-duration: 4.51968s;
    -webkit-animation-delay: -3.78742s;
    animation-delay: -3.78742s;
}

.party-pops bokeh:nth-child(48) {
    background-color: #ef8d22;
    -webkit-transform: translate(10.32946vw, 0.27441vh);
    transform: translate(10.32946vw, 0.27441vh);
    -webkit-animation-duration: 3.40103s;
    animation-duration: 3.40103s;
    -webkit-animation-delay: -3.53994s;
    animation-delay: -3.53994s;
}

.party-pops bokeh:nth-child(49) {
    background-color: #2bd8ff;
    -webkit-transform: translate(13.70653vw, 4.94337vh);
    transform: translate(13.70653vw, 4.94337vh);
    -webkit-animation-duration: 3.90339s;
    animation-duration: 3.90339s;
    -webkit-animation-delay: -2.28534s;
    animation-delay: -2.28534s;
}

.party-pops bokeh:nth-child(50) {
    background-color: #ef8d22;
    -webkit-transform: translate(5.35424vw, 6.90706vh);
    transform: translate(5.35424vw, 6.90706vh);
    -webkit-animation-duration: 3.94912s;
    animation-duration: 3.94912s;
    -webkit-animation-delay: -4.75502s;
    animation-delay: -4.75502s;
}

.party-pops bokeh:nth-child(51) {
    background-color: #feff28;
    -webkit-transform: translate(20.87341vw, 1.6832vh);
    transform: translate(20.87341vw, 1.6832vh);
    -webkit-animation-duration: 3.39058s;
    animation-duration: 3.39058s;
    -webkit-animation-delay: -1.12174s;
    animation-delay: -1.12174s;
}

.party-pops bokeh:nth-child(52) {
    background-color: #feff28;
    -webkit-transform: translate(12.74107vw, 9.29501vh);
    transform: translate(12.74107vw, 9.29501vh);
    -webkit-animation-duration: 4.32645s;
    animation-duration: 4.32645s;
    -webkit-animation-delay: -3.74029s;
    animation-delay: -3.74029s;
}

.party-pops bokeh:nth-child(53) {
    background-color: #2bd8ff;
    -webkit-transform: translate(10.95162vw, 9.49331vh);
    transform: translate(10.95162vw, 9.49331vh);
    -webkit-animation-duration: 4.0463s;
    animation-duration: 4.0463s;
    -webkit-animation-delay: -1.1619s;
    animation-delay: -1.1619s;
}

.party-pops bokeh:nth-child(54) {
    background-color: #ef8d22;
    -webkit-transform: translate(22.28876vw, 8.74277vh);
    transform: translate(22.28876vw, 8.74277vh);
    -webkit-animation-duration: 4.50651s;
    animation-duration: 4.50651s;
    -webkit-animation-delay: -2.73444s;
    animation-delay: -2.73444s;
}

.party-pops bokeh:nth-child(55) {
    background-color: #fc85e1;
    -webkit-transform: translate(8.07385vw, 4.79099vh);
    transform: translate(8.07385vw, 4.79099vh);
    -webkit-animation-duration: 4.90558s;
    animation-duration: 4.90558s;
    -webkit-animation-delay: -2.63859s;
    animation-delay: -2.63859s;
}

.party-pops bokeh:nth-child(56) {
    background-color: #ef8d22;
    -webkit-transform: translate(24.59783vw, 4.73556vh);
    transform: translate(24.59783vw, 4.73556vh);
    -webkit-animation-duration: 3.10979s;
    animation-duration: 3.10979s;
    -webkit-animation-delay: -4.79926s;
    animation-delay: -4.79926s;
}

.party-pops bokeh:nth-child(57) {
    background-color: #ef8d22;
    -webkit-transform: translate(5.90352vw, 5.47537vh);
    transform: translate(5.90352vw, 5.47537vh);
    -webkit-animation-duration: 3.31696s;
    animation-duration: 3.31696s;
    -webkit-animation-delay: -4.47017s;
    animation-delay: -4.47017s;
}

.party-pops bokeh:nth-child(58) {
    background-color: #feff28;
    -webkit-transform: translate(1.44217vw, 0.74771vh);
    transform: translate(1.44217vw, 0.74771vh);
    -webkit-animation-duration: 3.70288s;
    animation-duration: 3.70288s;
    -webkit-animation-delay: -4.87474s;
    animation-delay: -4.87474s;
}

.party-pops bokeh:nth-child(59) {
    background-color: #fc85e1;
    -webkit-transform: translate(21.37094vw, 3.52727vh);
    transform: translate(21.37094vw, 3.52727vh);
    -webkit-animation-duration: 3.17602s;
    animation-duration: 3.17602s;
    -webkit-animation-delay: -0.91938s;
    animation-delay: -0.91938s;
}

.party-pops bokeh:nth-child(60) {
    background-color: #ef8d22;
    -webkit-transform: translate(26.46531vw, 3.23538vh);
    transform: translate(26.46531vw, 3.23538vh);
    -webkit-animation-duration: 3.7575s;
    animation-duration: 3.7575s;
    -webkit-animation-delay: -0.37829s;
    animation-delay: -0.37829s;
}

.party-pops bokeh:nth-child(61) {
    background-color: #2bd8ff;
    -webkit-transform: translate(16.04565vw, 9.90873vh);
    transform: translate(16.04565vw, 9.90873vh);
    -webkit-animation-duration: 2.37941s;
    animation-duration: 2.37941s;
    -webkit-animation-delay: -4.82125s;
    animation-delay: -4.82125s;
}

.party-pops bokeh:nth-child(62) {
    background-color: #ef8d22;
    -webkit-transform: translate(28.0105vw, 4.03249vh);
    transform: translate(28.0105vw, 4.03249vh);
    -webkit-animation-duration: 3.48319s;
    animation-duration: 3.48319s;
    -webkit-animation-delay: -1.04575s;
    animation-delay: -1.04575s;
}

.party-pops bokeh:nth-child(63) {
    background-color: #feff28;
    -webkit-transform: translate(20.37554vw, 9.96153vh);
    transform: translate(20.37554vw, 9.96153vh);
    -webkit-animation-duration: 2.49449s;
    animation-duration: 2.49449s;
    -webkit-animation-delay: -3.36416s;
    animation-delay: -3.36416s;
}

.party-pops bokeh:nth-child(64) {
    background-color: #2bd8ff;
    -webkit-transform: translate(0.38145vw, 7.90419vh);
    transform: translate(0.38145vw, 7.90419vh);
    -webkit-animation-duration: 3.00813s;
    animation-duration: 3.00813s;
    -webkit-animation-delay: -0.80634s;
    animation-delay: -0.80634s;
}

.party-pops bokeh:nth-child(65) {
    background-color: #feff28;
    -webkit-transform: translate(5.22273vw, 5.44595vh);
    transform: translate(5.22273vw, 5.44595vh);
    -webkit-animation-duration: 2.43149s;
    animation-duration: 2.43149s;
    -webkit-animation-delay: -0.35218s;
    animation-delay: -0.35218s;
}

.party-pops bokeh:nth-child(66) {
    background-color: #feff28;
    -webkit-transform: translate(16.94172vw, 8.83036vh);
    transform: translate(16.94172vw, 8.83036vh);
    -webkit-animation-duration: 4.4803s;
    animation-duration: 4.4803s;
    -webkit-animation-delay: -4.5297s;
    animation-delay: -4.5297s;
}

.party-pops bokeh:nth-child(67) {
    background-color: #feff28;
    -webkit-transform: translate(28.56946vw, 3.65965vh);
    transform: translate(28.56946vw, 3.65965vh);
    -webkit-animation-duration: 4.31778s;
    animation-duration: 4.31778s;
    -webkit-animation-delay: -4.8033s;
    animation-delay: -4.8033s;
}

.party-pops bokeh:nth-child(68) {
    background-color: #ef8d22;
    -webkit-transform: translate(18.38955vw, 8.07767vh);
    transform: translate(18.38955vw, 8.07767vh);
    -webkit-animation-duration: 3.67735s;
    animation-duration: 3.67735s;
    -webkit-animation-delay: -2.45685s;
    animation-delay: -2.45685s;
}

.party-pops bokeh:nth-child(69) {
    background-color: #fc85e1;
    -webkit-transform: translate(1.93124vw, 2.56836vh);
    transform: translate(1.93124vw, 2.56836vh);
    -webkit-animation-duration: 2.09872s;
    animation-duration: 2.09872s;
    -webkit-animation-delay: -4.49753s;
    animation-delay: -4.49753s;
}

.party-pops bokeh:nth-child(70) {
    background-color: #feff28;
    -webkit-transform: translate(18.24473vw, 6.62253vh);
    transform: translate(18.24473vw, 6.62253vh);
    -webkit-animation-duration: 4.23601s;
    animation-duration: 4.23601s;
    -webkit-animation-delay: -1.65031s;
    animation-delay: -1.65031s;
}

.party-pops bokeh:nth-child(71) {
    background-color: #feff28;
    -webkit-transform: translate(14.99507vw, 3.81236vh);
    transform: translate(14.99507vw, 3.81236vh);
    -webkit-animation-duration: 2.65047s;
    animation-duration: 2.65047s;
    -webkit-animation-delay: -1.2236s;
    animation-delay: -1.2236s;
}

.party-pops bokeh:nth-child(72) {
    background-color: #ef8d22;
    -webkit-transform: translate(14.02097vw, 3.73481vh);
    transform: translate(14.02097vw, 3.73481vh);
    -webkit-animation-duration: 4.972s;
    animation-duration: 4.972s;
    -webkit-animation-delay: -2.7451s;
    animation-delay: -2.7451s;
}

.party-pops bokeh:nth-child(73) {
    background-color: #2bd8ff;
    -webkit-transform: translate(10.0975vw, 6.97969vh);
    transform: translate(10.0975vw, 6.97969vh);
    -webkit-animation-duration: 3.28597s;
    animation-duration: 3.28597s;
    -webkit-animation-delay: -3.9466s;
    animation-delay: -3.9466s;
}

.party-pops bokeh:nth-child(74) {
    background-color: #feff28;
    -webkit-transform: translate(4.15173vw, 0.51499vh);
    transform: translate(4.15173vw, 0.51499vh);
    -webkit-animation-duration: 4.17162s;
    animation-duration: 4.17162s;
    -webkit-animation-delay: -1.98474s;
    animation-delay: -1.98474s;
}

.party-pops bokeh:nth-child(75) {
    background-color: #ef8d22;
    -webkit-transform: translate(21.34203vw, 9.00661vh);
    transform: translate(21.34203vw, 9.00661vh);
    -webkit-animation-duration: 4.64637s;
    animation-duration: 4.64637s;
    -webkit-animation-delay: -4.93195s;
    animation-delay: -4.93195s;
}

.party-pops bokeh:nth-child(76) {
    background-color: #fc85e1;
    -webkit-transform: translate(14.62931vw, 0.98001vh);
    transform: translate(14.62931vw, 0.98001vh);
    -webkit-animation-duration: 3.14542s;
    animation-duration: 3.14542s;
    -webkit-animation-delay: -1.89204s;
    animation-delay: -1.89204s;
}

.party-pops bokeh:nth-child(77) {
    background-color: #2bd8ff;
    -webkit-transform: translate(15.26811vw, 4.47729vh);
    transform: translate(15.26811vw, 4.47729vh);
    -webkit-animation-duration: 4.13176s;
    animation-duration: 4.13176s;
    -webkit-animation-delay: -1.35456s;
    animation-delay: -1.35456s;
}

.party-pops bokeh:nth-child(78) {
    background-color: #ef8d22;
    -webkit-transform: translate(28.25327vw, 1.45951vh);
    transform: translate(28.25327vw, 1.45951vh);
    -webkit-animation-duration: 3.47981s;
    animation-duration: 3.47981s;
    -webkit-animation-delay: -2.4515s;
    animation-delay: -2.4515s;
}

.party-pops bokeh:nth-child(79) {
    background-color: #2bd8ff;
    -webkit-transform: translate(2.65513vw, 3.02759vh);
    transform: translate(2.65513vw, 3.02759vh);
    -webkit-animation-duration: 4.099s;
    animation-duration: 4.099s;
    -webkit-animation-delay: -1.78541s;
    animation-delay: -1.78541s;
}

.party-pops bokeh:nth-child(80) {
    background-color: #feff28;
    -webkit-transform: translate(19.64264vw, 4.62624vh);
    transform: translate(19.64264vw, 4.62624vh);
    -webkit-animation-duration: 2.40956s;
    animation-duration: 2.40956s;
    -webkit-animation-delay: -1.80857s;
    animation-delay: -1.80857s;
}

.party-pops bokeh:nth-child(81) {
    background-color: #fc85e1;
    -webkit-transform: translate(21.99078vw, 6.26821vh);
    transform: translate(21.99078vw, 6.26821vh);
    -webkit-animation-duration: 2.01297s;
    animation-duration: 2.01297s;
    -webkit-animation-delay: -3.77594s;
    animation-delay: -3.77594s;
}

.party-pops bokeh:nth-child(82) {
    background-color: #feff28;
    -webkit-transform: translate(11.2789vw, 3.57824vh);
    transform: translate(11.2789vw, 3.57824vh);
    -webkit-animation-duration: 2.81144s;
    animation-duration: 2.81144s;
    -webkit-animation-delay: -2.26012s;
    animation-delay: -2.26012s;
}

.party-pops bokeh:nth-child(83) {
    background-color: #fc85e1;
    -webkit-transform: translate(21.65774vw, 1.64671vh);
    transform: translate(21.65774vw, 1.64671vh);
    -webkit-animation-duration: 2.73787s;
    animation-duration: 2.73787s;
    -webkit-animation-delay: -1.36841s;
    animation-delay: -1.36841s;
}

.party-pops bokeh:nth-child(84) {
    background-color: #feff28;
    -webkit-transform: translate(16.04989vw, 6.43793vh);
    transform: translate(16.04989vw, 6.43793vh);
    -webkit-animation-duration: 2.45413s;
    animation-duration: 2.45413s;
    -webkit-animation-delay: -4.89458s;
    animation-delay: -4.89458s;
}

.party-pops bokeh:nth-child(85) {
    background-color: #fc85e1;
    -webkit-transform: translate(6.37185vw, 5.59027vh);
    transform: translate(6.37185vw, 5.59027vh);
    -webkit-animation-duration: 2.32767s;
    animation-duration: 2.32767s;
    -webkit-animation-delay: -4.89389s;
    animation-delay: -4.89389s;
}

.party-pops bokeh:nth-child(86) {
    background-color: #feff28;
    -webkit-transform: translate(14.29918vw, 4.27631vh);
    transform: translate(14.29918vw, 4.27631vh);
    -webkit-animation-duration: 3.53669s;
    animation-duration: 3.53669s;
    -webkit-animation-delay: -1.91338s;
    animation-delay: -1.91338s;
}

.party-pops bokeh:nth-child(87) {
    background-color: #fc85e1;
    -webkit-transform: translate(13.76118vw, 6.27211vh);
    transform: translate(13.76118vw, 6.27211vh);
    -webkit-animation-duration: 4.61719s;
    animation-duration: 4.61719s;
    -webkit-animation-delay: -2.9648s;
    animation-delay: -2.9648s;
}

.party-pops bokeh:nth-child(88) {
    background-color: #feff28;
    -webkit-transform: translate(1.10897vw, 4.08869vh);
    transform: translate(1.10897vw, 4.08869vh);
    -webkit-animation-duration: 2.90313s;
    animation-duration: 2.90313s;
    -webkit-animation-delay: -0.96877s;
    animation-delay: -0.96877s;
}

.party-pops bokeh:nth-child(89) {
    background-color: #fc85e1;
    -webkit-transform: translate(2.68442vw, 4.79479vh);
    transform: translate(2.68442vw, 4.79479vh);
    -webkit-animation-duration: 3.7817s;
    animation-duration: 3.7817s;
    -webkit-animation-delay: -2.63523s;
    animation-delay: -2.63523s;
}

.party-pops bokeh:nth-child(90) {
    background-color: #2bd8ff;
    -webkit-transform: translate(24.88105vw, 1.31025vh);
    transform: translate(24.88105vw, 1.31025vh);
    -webkit-animation-duration: 4.83079s;
    animation-duration: 4.83079s;
    -webkit-animation-delay: -1.14798s;
    animation-delay: -1.14798s;
}

.party-pops bokeh:nth-child(91) {
    background-color: #ef8d22;
    -webkit-transform: translate(7.56308vw, 8.39842vh);
    transform: translate(7.56308vw, 8.39842vh);
    -webkit-animation-duration: 4.00869s;
    animation-duration: 4.00869s;
    -webkit-animation-delay: -2.44662s;
    animation-delay: -2.44662s;
}

.party-pops bokeh:nth-child(92) {
    background-color: #ef8d22;
    -webkit-transform: translate(0.53548vw, 9.52636vh);
    transform: translate(0.53548vw, 9.52636vh);
    -webkit-animation-duration: 3.49477s;
    animation-duration: 3.49477s;
    -webkit-animation-delay: -1.41408s;
    animation-delay: -1.41408s;
}

.party-pops bokeh:nth-child(93) {
    background-color: #2bd8ff;
    -webkit-transform: translate(18.05751vw, 6.76258vh);
    transform: translate(18.05751vw, 6.76258vh);
    -webkit-animation-duration: 2.03891s;
    animation-duration: 2.03891s;
    -webkit-animation-delay: -1.32722s;
    animation-delay: -1.32722s;
}

.party-pops bokeh:nth-child(94) {
    background-color: #ef8d22;
    -webkit-transform: translate(20.00145vw, 5.09435vh);
    transform: translate(20.00145vw, 5.09435vh);
    -webkit-animation-duration: 2.27716s;
    animation-duration: 2.27716s;
    -webkit-animation-delay: -1.78359s;
    animation-delay: -1.78359s;
}

.party-pops bokeh:nth-child(95) {
    background-color: #feff28;
    -webkit-transform: translate(19.50056vw, 4.62611vh);
    transform: translate(19.50056vw, 4.62611vh);
    -webkit-animation-duration: 3.56726s;
    animation-duration: 3.56726s;
    -webkit-animation-delay: -1.59209s;
    animation-delay: -1.59209s;
}

.party-pops bokeh:nth-child(96) {
    background-color: #fc85e1;
    -webkit-transform: translate(21.30462vw, 5.80413vh);
    transform: translate(21.30462vw, 5.80413vh);
    -webkit-animation-duration: 2.65695s;
    animation-duration: 2.65695s;
    -webkit-animation-delay: -3.46494s;
    animation-delay: -3.46494s;
}

.party-pops bokeh:nth-child(97) {
    background-color: #ef8d22;
    -webkit-transform: translate(24.73429vw, 8.75743vh);
    transform: translate(24.73429vw, 8.75743vh);
    -webkit-animation-duration: 2.53777s;
    animation-duration: 2.53777s;
    -webkit-animation-delay: -3.67848s;
    animation-delay: -3.67848s;
}

.party-pops bokeh:nth-child(98) {
    background-color: #ef8d22;
    -webkit-transform: translate(5.94044vw, 1.32658vh);
    transform: translate(5.94044vw, 1.32658vh);
    -webkit-animation-duration: 2.50319s;
    animation-duration: 2.50319s;
    -webkit-animation-delay: -0.16104s;
    animation-delay: -0.16104s;
}

.party-pops bokeh:nth-child(99) {
    background-color: #feff28;
    -webkit-transform: translate(9.34461vw, 1.04726vh);
    transform: translate(9.34461vw, 1.04726vh);
    -webkit-animation-duration: 3.3859s;
    animation-duration: 3.3859s;
    -webkit-animation-delay: -0.3126s;
    animation-delay: -0.3126s;
}

.party-pops bokeh:nth-child(100) {
    background-color: #2bd8ff;
    -webkit-transform: translate(10.37096vw, 4.91637vh);
    transform: translate(10.37096vw, 4.91637vh);
    -webkit-animation-duration: 2.34912s;
    animation-duration: 2.34912s;
    -webkit-animation-delay: -2.42507s;
    animation-delay: -2.42507s;
}

@-webkit-keyframes explosion {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(50vw, 100vh);
        transform: translate(50vw, 100vh);
    }
}

@keyframes explosion {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(50vw, 100vh);
        transform: translate(50vw, 100vh);
    }
}

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

.pyro>.after,
.pyro>.before {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff;
    -webkit-animation: 1s bang ease-out infinite backwards,
        1s gravity ease-in infinite backwards,
        5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards,
        1s gravity ease-in infinite backwards,
        5s position linear infinite backwards;
}

.pyro>.after {
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        -webkit-box-shadow: -36px -257.66667px #c800ff,
            -167px 69.33333px #ff0059, 93px -288.66667px #ff1500,
            -95px -154.66667px #ff0400, -152px -177.66667px #f30,
            -92px 16.33333px #00c4ff, 187px -143.66667px #ff3c00,
            -82px -12.66667px #ffa200, 167px -309.66667px #2f00ff,
            -29px -89.66667px #04ff00, -128px -314.66667px #6f00ff,
            125px -185.66667px #7bff00, 94px -182.66667px #ff0048,
            -233px -2.66667px #59ff00, 138px -15.66667px #1f0,
            233px 69.33333px #0bf, -122px -227.66667px #5900ff,
            234px 27.33333px #00ff2f, 243px -380.66667px #00a6ff,
            161px -221.66667px #09f, -38px -67.66667px #af0,
            213px 15.33333px #c8ff00, 187px 62.33333px #ff00c8,
            -127px -131.66667px #ff0037, -169px -394.66667px #6fff00,
            -36px -226.66667px #f2ff00, -85px 3.33333px #70f,
            43px -109.66667px #d900ff, -116px -192.66667px #ff8c00,
            -189px -228.66667px #ff0073, -148px 39.33333px #ff009d,
            -34px -202.66667px #00ff40, 78px -209.66667px #ff00f7,
            -38px 75.33333px #ff00f7, 42px 71.33333px #ff9100,
            -32px -70.66667px #0f5, -104px -168.66667px #00d0ff,
            -89px -176.66667px #ff8000, -234px -43.66667px #00ff1e,
            216px -334.66667px #f70, 220px -159.66667px #ff4800,
            158px -406.66667px #a6ff00, -186px -5.66667px #ff00e6,
            -132px -271.66667px #fd0, 30px -120.66667px #f02,
            239px -10.66667px #7300ff, -125px -68.66667px #00ff4d,
            -61px -128.66667px #b700ff, -176px 62.33333px #0037ff,
            -54px -12.66667px #ff0048, 134px -265.66667px #00ff15;
        box-shadow: -36px -257.66667px #c800ff, -167px 69.33333px #ff0059,
            93px -288.66667px #ff1500, -95px -154.66667px #ff0400,
            -152px -177.66667px #f30, -92px 16.33333px #00c4ff,
            187px -143.66667px #ff3c00, -82px -12.66667px #ffa200,
            167px -309.66667px #2f00ff, -29px -89.66667px #04ff00,
            -128px -314.66667px #6f00ff, 125px -185.66667px #7bff00,
            94px -182.66667px #ff0048, -233px -2.66667px #59ff00,
            138px -15.66667px #1f0, 233px 69.33333px #0bf,
            -122px -227.66667px #5900ff, 234px 27.33333px #00ff2f,
            243px -380.66667px #00a6ff, 161px -221.66667px #09f,
            -38px -67.66667px #af0, 213px 15.33333px #c8ff00,
            187px 62.33333px #ff00c8, -127px -131.66667px #ff0037,
            -169px -394.66667px #6fff00, -36px -226.66667px #f2ff00,
            -85px 3.33333px #70f, 43px -109.66667px #d900ff,
            -116px -192.66667px #ff8c00, -189px -228.66667px #ff0073,
            -148px 39.33333px #ff009d, -34px -202.66667px #00ff40,
            78px -209.66667px #ff00f7, -38px 75.33333px #ff00f7,
            42px 71.33333px #ff9100, -32px -70.66667px #0f5,
            -104px -168.66667px #00d0ff, -89px -176.66667px #ff8000,
            -234px -43.66667px #00ff1e, 216px -334.66667px #f70,
            220px -159.66667px #ff4800, 158px -406.66667px #a6ff00,
            -186px -5.66667px #ff00e6, -132px -271.66667px #fd0,
            30px -120.66667px #f02, 239px -10.66667px #7300ff,
            -125px -68.66667px #00ff4d, -61px -128.66667px #b700ff,
            -176px 62.33333px #0037ff, -54px -12.66667px #ff0048,
            134px -265.66667px #00ff15;
    }
}

@keyframes bang {
    to {
        -webkit-box-shadow: -36px -257.66667px #c800ff,
            -167px 69.33333px #ff0059, 93px -288.66667px #ff1500,
            -95px -154.66667px #ff0400, -152px -177.66667px #f30,
            -92px 16.33333px #00c4ff, 187px -143.66667px #ff3c00,
            -82px -12.66667px #ffa200, 167px -309.66667px #2f00ff,
            -29px -89.66667px #04ff00, -128px -314.66667px #6f00ff,
            125px -185.66667px #7bff00, 94px -182.66667px #ff0048,
            -233px -2.66667px #59ff00, 138px -15.66667px #1f0,
            233px 69.33333px #0bf, -122px -227.66667px #5900ff,
            234px 27.33333px #00ff2f, 243px -380.66667px #00a6ff,
            161px -221.66667px #09f, -38px -67.66667px #af0,
            213px 15.33333px #c8ff00, 187px 62.33333px #ff00c8,
            -127px -131.66667px #ff0037, -169px -394.66667px #6fff00,
            -36px -226.66667px #f2ff00, -85px 3.33333px #70f,
            43px -109.66667px #d900ff, -116px -192.66667px #ff8c00,
            -189px -228.66667px #ff0073, -148px 39.33333px #ff009d,
            -34px -202.66667px #00ff40, 78px -209.66667px #ff00f7,
            -38px 75.33333px #ff00f7, 42px 71.33333px #ff9100,
            -32px -70.66667px #0f5, -104px -168.66667px #00d0ff,
            -89px -176.66667px #ff8000, -234px -43.66667px #00ff1e,
            216px -334.66667px #f70, 220px -159.66667px #ff4800,
            158px -406.66667px #a6ff00, -186px -5.66667px #ff00e6,
            -132px -271.66667px #fd0, 30px -120.66667px #f02,
            239px -10.66667px #7300ff, -125px -68.66667px #00ff4d,
            -61px -128.66667px #b700ff, -176px 62.33333px #0037ff,
            -54px -12.66667px #ff0048, 134px -265.66667px #00ff15;
        box-shadow: -36px -257.66667px #c800ff, -167px 69.33333px #ff0059,
            93px -288.66667px #ff1500, -95px -154.66667px #ff0400,
            -152px -177.66667px #f30, -92px 16.33333px #00c4ff,
            187px -143.66667px #ff3c00, -82px -12.66667px #ffa200,
            167px -309.66667px #2f00ff, -29px -89.66667px #04ff00,
            -128px -314.66667px #6f00ff, 125px -185.66667px #7bff00,
            94px -182.66667px #ff0048, -233px -2.66667px #59ff00,
            138px -15.66667px #1f0, 233px 69.33333px #0bf,
            -122px -227.66667px #5900ff, 234px 27.33333px #00ff2f,
            243px -380.66667px #00a6ff, 161px -221.66667px #09f,
            -38px -67.66667px #af0, 213px 15.33333px #c8ff00,
            187px 62.33333px #ff00c8, -127px -131.66667px #ff0037,
            -169px -394.66667px #6fff00, -36px -226.66667px #f2ff00,
            -85px 3.33333px #70f, 43px -109.66667px #d900ff,
            -116px -192.66667px #ff8c00, -189px -228.66667px #ff0073,
            -148px 39.33333px #ff009d, -34px -202.66667px #00ff40,
            78px -209.66667px #ff00f7, -38px 75.33333px #ff00f7,
            42px 71.33333px #ff9100, -32px -70.66667px #0f5,
            -104px -168.66667px #00d0ff, -89px -176.66667px #ff8000,
            -234px -43.66667px #00ff1e, 216px -334.66667px #f70,
            220px -159.66667px #ff4800, 158px -406.66667px #a6ff00,
            -186px -5.66667px #ff00e6, -132px -271.66667px #fd0,
            30px -120.66667px #f02, 239px -10.66667px #7300ff,
            -125px -68.66667px #00ff4d, -61px -128.66667px #b700ff,
            -176px 62.33333px #0037ff, -54px -12.66667px #ff0048,
            134px -265.66667px #00ff15;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

.balloon {
    z-index: 1;
    position: absolute;
    top: 75%;
    left: 10%;
    -webkit-animation: move_y 20s linear forwards, oscil1 6s infinite;
    animation: move_y 20s linear forwards, oscil1 6s infinite;
    width: 180px;
}

.balloon img {
    width: 100%;
}

@-webkit-keyframes move_y {
    from {
        top: 75%;
    }

    to {
        top: 0;
    }
}

@keyframes move_y {
    from {
        top: 75%;
    }

    to {
        top: 0;
    }
}

@-webkit-keyframes oscil1 {
    from {
        translate: 0 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
        animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
    }

    25% {
        translate: 10px 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
        animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
    }

    50% {
        translate: 0 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
        animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
    }

    75% {
        translate: -10px 0;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
        animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
    }

    to {
        translate: 0 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes oscil1 {
    from {
        translate: 0 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
        animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
    }

    25% {
        translate: 10px 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
        animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
    }

    50% {
        translate: 0 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
        animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
    }

    75% {
        translate: -10px 0;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
        animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
    }

    to {
        translate: 0 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.menu-toggle {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
}

@media (max-width: 567px) {
    .menu-toggle {
        margin-left: 5px;
    }

    .congrats-msg-text h3 {
        font-size: 40px !important;
        padding: 15px 25px !important;
    }
}

.menu-toggle p {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-right: 8px;
    margin-bottom: 0;
    min-width: 45px;
    text-align: right;
    text-transform: uppercase;
}

@media (max-width: 567px) {
    .menu-toggle p {
        font-size: 12px;
        min-width: 40px;
    }
}

.hamburger {
    font: inherit;
    display: inline-block;
    overflow: visible;
    margin: 0;
    cursor: pointer;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-property: opacity, -webkit-filter;
    transition-property: opacity, -webkit-filter;
    transition-property: opacity, filter;
    transition-property: opacity, filter, -webkit-filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent;
}

.hamburger.is-active:hover,
.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
    background-color: #000;
}

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 21px;
}

@media (max-width: 567px) {
    .hamburger-box {
        width: 28px;
        height: 16px;
    }
}

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
    position: absolute;
    width: 33px;
    height: 3px;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    border-radius: 4px;
    background-color: #fff;
}

@media (max-width: 567px) {

    .hamburger-inner,
    .hamburger-inner:after,
    .hamburger-inner:before {
        width: 28px;
        height: 2px;
    }
}

.hamburger-inner:after,
.hamburger-inner:before {
    display: block;
    content: "";
}

.hamburger-inner:before {
    top: -10px;
}

.hamburger-inner:after {
    bottom: -10px;
}

.hamburger--spring .hamburger-inner {
    top: 2px;
    -webkit-transition: background-color 0s linear 0.13s;
    transition: background-color 0s linear 0.13s;
}

.hamburger--spring .hamburger-inner:before {
    top: 10px;
    -webkit-transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19),
        -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@media (max-width: 567px) {
    .hamburger--spring .hamburger-inner:before {
        top: 8px;
    }
}

.hamburger--spring .hamburger-inner:after {
    top: 20px;
    -webkit-transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19),
        -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@media (max-width: 567px) {
    .hamburger--spring .hamburger-inner:after {
        top: 16px;
    }
}

.hamburger--spring.is-active .hamburger-inner {
    -webkit-transition-delay: 0.22s;
    transition-delay: 0.22s;
    background-color: transparent !important;
}

.hamburger--spring.is-active .hamburger-inner:before {
    top: 0;
    -webkit-transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s,
        -webkit-transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s,
        -webkit-transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s,
        transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s,
        transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s,
        -webkit-transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--spring.is-active .hamburger-inner:after {
    top: 0;
    -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
        -webkit-transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
        -webkit-transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
        transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
        transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s,
        -webkit-transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
    -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
    transform: translate3d(0, 10px, 0) rotate(-45deg);
}

.header.open-menu .menu-toggle p,
.header.sticky-header .menu-toggle p {
    color: #000;
}

.header.open-menu .hamburger-inner,
.header.open-menu .hamburger-inner::after,
.header.open-menu .hamburger-inner::before,
.header.sticky-header .hamburger-inner,
.header.sticky-header .hamburger-inner::after,
.header.sticky-header .hamburger-inner::before {
    background-color: #000;
}

input:not([type="submit"]),
select,
textarea {
    font-size: 14px;
    font-weight: 800;
    border: 1px solid #e1e1e1;
    background-color: #f3f3f3;
    border-radius: 3px;
}

input:not([type="submit"]):focus,
select:focus,
textarea:focus {
    outline: 0;
}

input:not([type="submit"]),
select {
    height: 52px;
    padding: 5px;
    width: 100%;
}

input:not([type="submit"])::-webkit-input-placeholder,
select::-webkit-input-placeholder {
    opacity: 1;
    color: #878787;
}

input:not([type="submit"])::-moz-placeholder,
select::-moz-placeholder {
    opacity: 1;
    color: #878787;
}

input:not([type="submit"]):-ms-input-placeholder,
select:-ms-input-placeholder {
    opacity: 1;
    color: #878787;
}

input:not([type="submit"])::-ms-input-placeholder,
select::-ms-input-placeholder {
    opacity: 1;
    color: #878787;
}

input:not([type="submit"])::placeholder,
select::placeholder {
    opacity: 1;
    color: #878787;
}

select {
    color: #878787;
}

.list-yellow-tick {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
}

.list-yellow-tick li {
    font-size: 19px;
    font-weight: 700;
    padding: 20px 0;
}

.list-yellow-tick li .fa.fa-check {
    background: #f3dc00;
    color: #fff;
    padding: 3px;
    line-height: normal;
    border-radius: 100%;
    font-size: 10px;
    margin-right: 10px;
}

/* .list-yellow-tick li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 66px;
  height: 66px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2NyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4yIiBkPSJNNjAuMTkxMiA0MC4yNTA2QzY2Ljg4OSAzMC4xODI4IDU1LjAwNDcgMTUuMzU4MyAzOC41ODQzIDEyLjA5M0MyMi4xNjM4IDguODI3NyAyMC4zMjk2IDguOTE5OTggMTIuNjA0NCAxNS4yNDg3QzQuODc5MTYgMjEuNTc3NSAzLjg0Njc5IDQ3LjI2OTMgMTkuMTU0IDU0LjA3MzFDMzQuNDYxMiA2MC44NzcgNTMuNDkzNSA1MC4zMTg0IDYwLjE5MTIgNDAuMjUwNloiIGZpbGw9IiNGNkI1M0YiLz4KPHBhdGggZD0iTTU0LjMxNzIgMTcuOTg5MUM1MS4wOTM5IDcuODU3NzMgMzQuMzg4NSA3Ljg1Nzg5IDIzLjExODMgMTcuMzI2OEMxMS44NDggMjYuNzk1NyAxMC45MDI2IDI4LjEwNDcgMTAuOTk1OCAzNi44ODQ3QzExLjA4OSA0NS42NjQ3IDI4LjE0NjEgNjAuNTAxOSA0MS4yMzE2IDUzLjc0MjdDNTQuMzE3MiA0Ni45ODM0IDU3LjU0MDQgMjguMTIwNSA1NC4zMTcyIDE3Ljk4OTFaIiBmaWxsPSIjRjZCNTNGIi8+CjxwYXRoIGQ9Ik0yMyAzMy4wNjU0TDI1LjEyMTMgMzAuOTQ0MUwzMy42MDY2IDM5LjQyOTRMMzEuNDg1MyA0MS41NTA3TDIzIDMzLjA2NTRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNDIuNzk5IDI1Ljk5NDRMNDQuOTIwMyAyOC4xMTU3TDMxLjQ4NTMgNDEuNTUwN0wyOS4zNjQgMzkuNDI5NEw0Mi43OTkgMjUuOTk0NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
} */

.list-purple-tick {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    gap: 10px;
}

.list-purple-tick li {
    position: relative;
    padding-left: 36px;
    font-size: 14px;
    font-weight: 700;
    min-height: 28px;
}

.list-purple-tick li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMTMiIGZpbGw9IiNGOEY1RkYiIHN0cm9rZT0iI0Q0QzBGRiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik03IDE0TDguNDA5MDQgMTIuNTkxTDE0LjA0NTIgMTguMjI3MUwxMi42MzYyIDE5LjYzNjJMNyAxNFoiIGZpbGw9IiM5NDYyRkYiLz4KPHBhdGggZD0iTTIwLjE1MTEgOS4zMDMxOEwyMS41NjAxIDEwLjcxMjJMMTIuNjM2MiAxOS42MzYyTDExLjIyNzEgMTguMjI3MUwyMC4xNTExIDkuMzAzMThaIiBmaWxsPSIjOTQ2MkZGIi8+Cjwvc3ZnPgo=);
}

.row {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.row-spacing-36 {
    margin-left: -calc(36px/2);
    margin-right: -calc(36px/2);
}

.row-spacing-36 [class^="col-"] {
    padding-left: calc(36px / 2);
    padding-right: calc(36px / 2);
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
}

.col-auto {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    -webkit-box-flex: 0;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    -ms-flex: 0 0 16.666667%;
    -webkit-box-flex: 0;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    -ms-flex: 0 0 41.666667%;
    -webkit-box-flex: 0;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    -ms-flex: 0 0 58.333333%;
    -webkit-box-flex: 0;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    -ms-flex: 0 0 66.666667%;
    -webkit-box-flex: 0;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    -ms-flex: 0 0 75%;
    -webkit-box-flex: 0;
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    -ms-flex: 0 0 83.333333%;
    -webkit-box-flex: 0;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    -ms-flex: 0 0 91.666667%;
    -webkit-box-flex: 0;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
}

.order-first {
    -ms-flex-order: -1;
    -webkit-box-ordinal-group: 0;
    order: -1;
}

.order-last {
    -ms-flex-order: 13;
    -webkit-box-ordinal-group: 14;
    order: 13;
}

.order-0 {
    -ms-flex-order: 0;
    -webkit-box-ordinal-group: 1;
    order: 0;
}

.order-1 {
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1;
}

.order-2 {
    -ms-flex-order: 2;
    -webkit-box-ordinal-group: 3;
    order: 2;
}

.order-3 {
    -ms-flex-order: 3;
    -webkit-box-ordinal-group: 4;
    order: 3;
}

.order-4 {
    -ms-flex-order: 4;
    -webkit-box-ordinal-group: 5;
    order: 4;
}

.order-5 {
    -ms-flex-order: 5;
    -webkit-box-ordinal-group: 6;
    order: 5;
}

.order-6 {
    -ms-flex-order: 6;
    -webkit-box-ordinal-group: 7;
    order: 6;
}

.order-7 {
    -ms-flex-order: 7;
    -webkit-box-ordinal-group: 8;
    order: 7;
}

.order-8 {
    -ms-flex-order: 8;
    -webkit-box-ordinal-group: 9;
    order: 8;
}

.order-9 {
    -ms-flex-order: 9;
    -webkit-box-ordinal-group: 10;
    order: 9;
}

.order-10 {
    -ms-flex-order: 10;
    -webkit-box-ordinal-group: 11;
    order: 10;
}

.order-11 {
    -ms-flex-order: 11;
    -webkit-box-ordinal-group: 12;
    order: 11;
}

.order-12 {
    -ms-flex-order: 12;
    -webkit-box-ordinal-group: 13;
    order: 12;
}

.offset-1 {
    margin-left: 8.333333%;
}

.offset-2 {
    margin-left: 16.666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.333333%;
}

.offset-5 {
    margin-left: 41.666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.333333%;
}

.offset-8 {
    margin-left: 66.666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.333333%;
}

.offset-11 {
    margin-left: 91.666667%;
}

@media (min-width: 576px) {
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-sm-first {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
    }

    .order-sm-last {
        -ms-flex-order: 13;
        -webkit-box-ordinal-group: 14;
        order: 13;
    }

    .order-sm-0 {
        -ms-flex-order: 0;
        -webkit-box-ordinal-group: 1;
        order: 0;
    }

    .order-sm-1 {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
    }

    .order-sm-2 {
        -ms-flex-order: 2;
        -webkit-box-ordinal-group: 3;
        order: 2;
    }

    .order-sm-3 {
        -ms-flex-order: 3;
        -webkit-box-ordinal-group: 4;
        order: 3;
    }

    .order-sm-4 {
        -ms-flex-order: 4;
        -webkit-box-ordinal-group: 5;
        order: 4;
    }

    .order-sm-5 {
        -ms-flex-order: 5;
        -webkit-box-ordinal-group: 6;
        order: 5;
    }

    .order-sm-6 {
        -ms-flex-order: 6;
        -webkit-box-ordinal-group: 7;
        order: 6;
    }

    .order-sm-7 {
        -ms-flex-order: 7;
        -webkit-box-ordinal-group: 8;
        order: 7;
    }

    .order-sm-8 {
        -ms-flex-order: 8;
        -webkit-box-ordinal-group: 9;
        order: 8;
    }

    .order-sm-9 {
        -ms-flex-order: 9;
        -webkit-box-ordinal-group: 10;
        order: 9;
    }

    .order-sm-10 {
        -ms-flex-order: 10;
        -webkit-box-ordinal-group: 11;
        order: 10;
    }

    .order-sm-11 {
        -ms-flex-order: 11;
        -webkit-box-ordinal-group: 12;
        order: 11;
    }

    .order-sm-12 {
        -ms-flex-order: 12;
        -webkit-box-ordinal-group: 13;
        order: 12;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.333333%;
    }

    .offset-sm-2 {
        margin-left: 16.666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.333333%;
    }

    .offset-sm-5 {
        margin-left: 41.666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.333333%;
    }

    .offset-sm-8 {
        margin-left: 66.666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.333333%;
    }

    .offset-sm-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-md-first {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
    }

    .order-md-last {
        -ms-flex-order: 13;
        -webkit-box-ordinal-group: 14;
        order: 13;
    }

    .order-md-0 {
        -ms-flex-order: 0;
        -webkit-box-ordinal-group: 1;
        order: 0;
    }

    .order-md-1 {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
    }

    .order-md-2 {
        -ms-flex-order: 2;
        -webkit-box-ordinal-group: 3;
        order: 2;
    }

    .order-md-3 {
        -ms-flex-order: 3;
        -webkit-box-ordinal-group: 4;
        order: 3;
    }

    .order-md-4 {
        -ms-flex-order: 4;
        -webkit-box-ordinal-group: 5;
        order: 4;
    }

    .order-md-5 {
        -ms-flex-order: 5;
        -webkit-box-ordinal-group: 6;
        order: 5;
    }

    .order-md-6 {
        -ms-flex-order: 6;
        -webkit-box-ordinal-group: 7;
        order: 6;
    }

    .order-md-7 {
        -ms-flex-order: 7;
        -webkit-box-ordinal-group: 8;
        order: 7;
    }

    .order-md-8 {
        -ms-flex-order: 8;
        -webkit-box-ordinal-group: 9;
        order: 8;
    }

    .order-md-9 {
        -ms-flex-order: 9;
        -webkit-box-ordinal-group: 10;
        order: 9;
    }

    .order-md-10 {
        -ms-flex-order: 10;
        -webkit-box-ordinal-group: 11;
        order: 10;
    }

    .order-md-11 {
        -ms-flex-order: 11;
        -webkit-box-ordinal-group: 12;
        order: 11;
    }

    .order-md-12 {
        -ms-flex-order: 12;
        -webkit-box-ordinal-group: 13;
        order: 12;
    }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.333333%;
    }

    .offset-md-2 {
        margin-left: 16.666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.333333%;
    }

    .offset-md-5 {
        margin-left: 41.666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.333333%;
    }

    .offset-md-8 {
        margin-left: 66.666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.333333%;
    }

    .offset-md-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 992px) {
    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-lg-first {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
    }

    .order-lg-last {
        -ms-flex-order: 13;
        -webkit-box-ordinal-group: 14;
        order: 13;
    }

    .order-lg-0 {
        -ms-flex-order: 0;
        -webkit-box-ordinal-group: 1;
        order: 0;
    }

    .order-lg-1 {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
    }

    .order-lg-2 {
        -ms-flex-order: 2;
        -webkit-box-ordinal-group: 3;
        order: 2;
    }

    .order-lg-3 {
        -ms-flex-order: 3;
        -webkit-box-ordinal-group: 4;
        order: 3;
    }

    .order-lg-4 {
        -ms-flex-order: 4;
        -webkit-box-ordinal-group: 5;
        order: 4;
    }

    .order-lg-5 {
        -ms-flex-order: 5;
        -webkit-box-ordinal-group: 6;
        order: 5;
    }

    .order-lg-6 {
        -ms-flex-order: 6;
        -webkit-box-ordinal-group: 7;
        order: 6;
    }

    .order-lg-7 {
        -ms-flex-order: 7;
        -webkit-box-ordinal-group: 8;
        order: 7;
    }

    .order-lg-8 {
        -ms-flex-order: 8;
        -webkit-box-ordinal-group: 9;
        order: 8;
    }

    .order-lg-9 {
        -ms-flex-order: 9;
        -webkit-box-ordinal-group: 10;
        order: 9;
    }

    .order-lg-10 {
        -ms-flex-order: 10;
        -webkit-box-ordinal-group: 11;
        order: 10;
    }

    .order-lg-11 {
        -ms-flex-order: 11;
        -webkit-box-ordinal-group: 12;
        order: 11;
    }

    .order-lg-12 {
        -ms-flex-order: 12;
        -webkit-box-ordinal-group: 13;
        order: 12;
    }

    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.333333%;
    }

    .offset-lg-2 {
        margin-left: 16.666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.333333%;
    }

    .offset-lg-5 {
        margin-left: 41.666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.333333%;
    }

    .offset-lg-8 {
        margin-left: 66.666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.333333%;
    }

    .offset-lg-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xl-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-xl-first {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
    }

    .order-xl-last {
        -ms-flex-order: 13;
        -webkit-box-ordinal-group: 14;
        order: 13;
    }

    .order-xl-0 {
        -ms-flex-order: 0;
        -webkit-box-ordinal-group: 1;
        order: 0;
    }

    .order-xl-1 {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
    }

    .order-xl-2 {
        -ms-flex-order: 2;
        -webkit-box-ordinal-group: 3;
        order: 2;
    }

    .order-xl-3 {
        -ms-flex-order: 3;
        -webkit-box-ordinal-group: 4;
        order: 3;
    }

    .order-xl-4 {
        -ms-flex-order: 4;
        -webkit-box-ordinal-group: 5;
        order: 4;
    }

    .order-xl-5 {
        -ms-flex-order: 5;
        -webkit-box-ordinal-group: 6;
        order: 5;
    }

    .order-xl-6 {
        -ms-flex-order: 6;
        -webkit-box-ordinal-group: 7;
        order: 6;
    }

    .order-xl-7 {
        -ms-flex-order: 7;
        -webkit-box-ordinal-group: 8;
        order: 7;
    }

    .order-xl-8 {
        -ms-flex-order: 8;
        -webkit-box-ordinal-group: 9;
        order: 8;
    }

    .order-xl-9 {
        -ms-flex-order: 9;
        -webkit-box-ordinal-group: 10;
        order: 9;
    }

    .order-xl-10 {
        -ms-flex-order: 10;
        -webkit-box-ordinal-group: 11;
        order: 10;
    }

    .order-xl-11 {
        -ms-flex-order: 11;
        -webkit-box-ordinal-group: 12;
        order: 11;
    }

    .order-xl-12 {
        -ms-flex-order: 12;
        -webkit-box-ordinal-group: 13;
        order: 12;
    }

    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.333333%;
    }

    .offset-xl-2 {
        margin-left: 16.666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.333333%;
    }

    .offset-xl-5 {
        margin-left: 41.666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.333333%;
    }

    .offset-xl-8 {
        margin-left: 66.666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.333333%;
    }

    .offset-xl-11 {
        margin-left: 91.666667%;
    }
}

.grade {
    font-family: "Work Sans";
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    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;
    -webkit-transform: rotate(-55deg);
    transform: rotate(-55deg);
    width: 55px;
    height: 85px;
    margin-top: -15px;
    margin-bottom: -15px;
}

.grade a span {
    font-size: 12px;
    text-align: center;
    line-height: 1;
}

.grade.color-green svg path {
    fill: #58c59d;
}

.grade.color-green-light svg path {
    fill: #8ce093;
}

.grade.color-yellow svg path {
    fill: #f6b53f;
}

.grade.color-maroon svg path {
    fill: #ce8391;
}

.grade.color-blue svg path {
    fill: #50c6ec;
}

.grade.color-violet svg path {
    fill: #c163c9;
}

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

.grade .shape {
    width: 100%;
    height: 100%;
}

.grade .shape svg {
    width: 100%;
    height: 100%;
}

.circlesbg {
    z-index: -2;
    position: absolute;
    top: 0;
    left: calc(50% + 32px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1747px;
    max-width: 100vw;
}

.circlesbg svg {
    width: 100%;
    height: auto;
}

.shapesbg,
.circlesbg {
    display: none;
}

.shapesbg [class^="shape-"] {
    z-index: -1;
    position: absolute;
}

.shapesbg [class^="shape-"] img,
.shapesbg [class^="shape-"] svg {
    width: 100%;
    height: auto;
}

.shapesbg .shape-1 {
    top: 143px;
    left: -129px;
    width: 360px;
}

.shapesbg .shape-2 {
    width: 503px;
    top: 0;
    right: -110px;
}

.shapesbg .shape-3 {
    top: 261px;
    right: -201px;
    width: 164px;
    height: 164px;
}

.shapesbg .shape-4 {
    top: calc(100% + 28px);
    right: 39px;
    width: 99px;
    height: 99px;
}

.nav-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    padding-left: 0;
    margin: 0 0 24px;
}

@media (max-width: 991px) {
    .nav-tabs {
        display: none;
    }
}

.nav-tabs .nav-tabs-link {
    cursor: pointer;
}

.nav-tabs .nav-tabs-link:not(:last-child) {
    margin-right: 10px;
}

.nav-tabs .nav-tabs-link .grade .text {
    color: #b9b9b9;
}

.nav-tabs .nav-tabs-link .grade .shape svg path {
    fill: #f3f3f3;
}

.nav-tabs .nav-tabs-link:hover .grade .shape svg path {
    fill: rgba(140, 224, 147, 0.5);
}

.nav-tabs .nav-tabs-link.active .grade .text {
    color: #fff;
}

.nav-tabs .nav-tabs-link.active .grade .shape svg path {
    fill: #8ce093;
}

.nav-tabs-content .nav-tabs-link {
    cursor: pointer;
}

@media (min-width: 992px) {
    .nav-tabs-content .nav-tabs-link {
        display: none;
    }
}

.nav-tabs-content .nav-tabs-pane:not(.active) {
    display: none;
}

.breadcrumb {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.breadcrumb li {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    color: #6a6b6c;
    font-family: "Nunito", sans-serif;
}

.breadcrumb li:not(:last-child) {
    margin-right: 25px;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    position: absolute;
    /* top: 50%; */
    left: calc(100% + 8px);
    /* -webkit-transform: translateY(-50%);
    transform: translateY(-50%); */
    width: 5px;
    height: 8px;
    /* background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgNSA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuMTcxNDEyIDcuODQzMzNDMC4zOTk1MDUgOC4wNTIyMyAwLjc2NzI0NiA4LjA1MjIzIDAuOTk1MzM4IDcuODQzMzNMNC44NjM2IDQuMzAwNTZDNS4wNDUxNCA0LjEzNDI5IDUuMDQ1MTQgMy44NjU3MSA0Ljg2MzYgMy42OTk0NEwwLjk5NTMzNyAwLjE1NjY3NUMwLjc2NzI0NSAtMC4wNTIyMjQ3IDAuMzk5NTA0IC0wLjA1MjIyNDcgMC4xNzE0MTIgMC4xNTY2NzVDLTAuMDU2NjgxIDAuMzY1NTc0IC0wLjA1NjY4MDkgMC43MDIzNzIgMC4xNzE0MTIgMC45MTEyNzJMMy41NDE1OSA0LjAwMjEzTDAuMTY2NzU4IDcuMDkyOTlDLTAuMDU2Njc5MyA3LjI5NzYzIC0wLjA1NjY4MDIgNy42Mzg2OSAwLjE3MTQxMiA3Ljg0MzMzWiIgZmlsbD0iIzkwOTA5MSIvPgo8L3N2Zz4K); */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.breadcrumb li a {
    color: #5e79d6;
}

.card {
    padding: 28px;
    height: 100%;
    text-align: center;
    color: #000000;
}

.card-gray {
    border: 1px solid #ededed;
    background-color: #f8f8f8;
}

.share-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.share-social p {
    color: #6a6b6c;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
}

.share-social ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: 10px;
    margin: 0;
}

.share-social ul li:not(:last-child) {
    margin-right: 8px;
}

.share-social ul li img,
.share-social ul li svg {
    width: 29px;
    height: auto;
}

.test-audio {
    text-align: center;
    margin-bottom: 18px;
}

.test-audio-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #f6b53f;
    border: 0;
}

.test-audio-btn img,
.test-audio-btn svg {
    width: 20px;
    height: auto;
}

.membershipdetails .undernote {
    margin-top: 63px;
}

.memdetails-list--item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.memdetails-list--item:not(:last-child) {
    margin-bottom: 20px;
}

.memdetails-list--item-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.memdetails-list--item-column .item {
    width: 100%;
}

.memdetails-list--item-column .item:not(:last-child) {
    margin-bottom: 5px;
}

.memdetails-list--item .item-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 0;
}

.memdetails-list--item p {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: normal;
}

.memdetails-list--item .link-underline {
    font-size: 12px;
    font-weight: 600;
}

.memdetails-list--item .username {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 3px;
}

.memdetails-list--item .avatar {
    width: 54px;
    height: 54px;
    background-color: #c4c4c4;
}

.memdetails-list--item .membersince {
    color: #9e9e9e;
    font-size: 14px;
    font-weight: 600;
}

.memdetails-list--item .lang {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.memdetails-list--item .lang p {
    font-size: 14px;
    font-weight: 600;
}

.memdetails-list--item .lang .icon {
    width: 17px;
    margin-right: 7px;
}

.memdetails-list--item .lang .icon img,
.memdetails-list--item .lang .icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.memdetails-list--item .card-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -5px;
}

.memdetails-list--item .card-details button,
.memdetails-list--item .card-details p {
    margin: 0 5px 5px;
}

.memdetails-list--item-children *+.edit-ico,
.memdetails-list--item-children *+.edit-link {
    margin-left: 30px;
}

.header {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 0px;
}

.header-top {
    padding: 0px;
}

.header-top .col-left {
    flex: 1;
}

.header-top .col-mid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 2;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    justify-content: center;
}

.header-top .col-right {
    justify-content: end;
    display: flex;
    vertical-align: middle;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-top .col-right li .btn {
    border-radius: 0;
}

.header-top .col-mid .trusted {
    margin-right: 20px;
}

.header-top .col-right li a:hover {
    color: #434242;
}

.header-top .logo {
    width: 224px;
}

.header-top .logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.header-top .row {
    align-items: center;
}

.header-bot {
    padding-top: 8px;
}

.header-login {
    color: white;
}

.header-login .btn {
    font-size: 12px;
}

.home .header-bot {
    padding-top: 11px;
}

.navbar-light .navbar-toggler,
.navbar-light .navbar-toggler:focus {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0px;
}

.navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.brand-text {
    color: #333;
    font-size: 1.5rem;
}

.logo-circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--teal-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-inner {
    height: 16px;
    width: 16px;
    border: 2px solid white;
    border-radius: 2px;
}

.teal-line {
    height: 4px;
    background-color: var(--teal-color);
    width: 100%;
}

/* Navigation Links */
.nav-link {
    color: #333 !important;
    letter-spacing: 0.05em;
    transition: color 0.3s;
    margin: 0 1rem;
}

.loggedin-dropdown {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 26px;
    cursor: pointer;
}

.loggedin-dropdown::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    border: 6px solid transparent;
    border-top-color: #fff;
}

.loggedin-dropdown .avatar {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background-color: #5f9fff;
}

.loggedin-dropdown .avatar img,
.loggedin-dropdown .avatar svg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.loggedin-dropdown .username {
    padding-left: 11px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.loggedin-dropdown.active .dropdown {
    display: block !important;
}

.loggedin-dropdown .dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 24px rgba(209, 222, 255, 0.24);
    box-shadow: 0 0 24px rgba(209, 222, 255, 0.24);
    display: none;
}

.loggedin-dropdown .dropdown.active {
    display: block;
}

.loggedin-dropdown .dropdown .dropdown-list {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    min-width: 180px;
    padding: 10px;
}

.loggedin-dropdown .dropdown .dropdown-list li {
    font-size: 16px;
    font-weight: 600;
}

.loggedin-dropdown .dropdown .dropdown-list li a {
    display: block;
    padding: 6px 0;
}

.loggedin-dropdown .dropdown .dropdown-list .list-break {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.sidenav {
    z-index: 2;
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background-color: #fff;
    -webkit-box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    padding: 20px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.sidenav-wrap {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

@media (min-width: 992px) {
    .sidenav-wrap {
        display: none;
    }
}

.sidenav-header {
    text-align: right;
    margin-bottom: 40px;
}

.sidenav-list {
    list-style-type: none;
    margin-bottom: 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}

.sidenav-list>li:not(:last-child) {
    margin-bottom: 15px;
}

.sidenav-list>li>a {
    color: #000;
    font-size: 18px;
    text-transform: capitalize;
}

.sidenav-list>li>a:hover {
    color: #5e79d6;
}

.sidenav-backdrop {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.sidenav-wrap:not(.active) {
    right: -101%;
}

.sidenav-wrap:not(.active) .sidenav {
    right: -101%;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.sidenav-wrap:not(.active) .sidenav-backdrop {
    opacity: 0;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.navigation {
    min-height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.login-btn {
    margin-left: 15px;
}

.nav-list {
    width: 100%;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.nav-list li {
    flex-shrink: 0;
}

.nav-list>li>a {
    /*color: #fff;*/
    display: block;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 60px;
    color: #434242;
    transition: all 0.2s ease-in
}

/* .nav-list > li > a.btn:hover {
    color: #4ad3bb;
} */

.fotter-side-list {
    line-height: 60px;
    color: #4b4b4b;
}

.nav-list>li>a:hover {
    color: #3fb39f !important;
}

.nav-btn-group {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0px;
    column-gap: 10px;
    padding-left: 0px;
}

.nav-btn-group .nav-btn {
    padding: 10px 32px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease-in;
}

.nav-btn-group .nav-btn.btn-orange {
    color: white;
    background-color: #ffa500;
}

.nav-btn-group .nav-btn.btn-blue-green {
    color: white;
    background-color: #65cccd;
}

.nav-btn-group .nav-btn:hover {
    filter: brightness(0.9);
}

.nav-list>li.has-submenu {
    position: relative;
}

.nav-list>li.has-submenu>a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-list>li.has-submenu .icon {
    height: auto;
    width: 12px;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.nav-list>li.has-submenu ul {
    position: absolute;
    top: -1000%;
    left: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    background-color: #fff;
    -webkit-box-shadow: 0 0 16px -12px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 16px -12px rgba(0, 0, 0, 0.14);
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    min-width: 180px;
    width: 100%;
    opacity: 0;
    -webkit-transition: 0.35s opacity, 0.35s transform;
    transition: 0.35s opacity, 0.35s transform;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.nav-list>li.has-submenu ul>li {
    border-bottom: 1px solid #efefef;
}

.nav-list>li.has-submenu ul>li>a {
    display: block;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 12px;
}

.nav-list>li.has-submenu:hover ul {
    top: calc(100% - 1px);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
    z-index: 99;
}

.footer-bg {
    position: relative;
    background-image: url("../images/math-uplift-footer-bg.png");
    background-size: cover;
    background-position: top;
    min-height: 250px;
}

.footer {
    padding-top: 50px;
    background: #e5f7f4;
}

.footer .inner.d-flex {
    justify-content: space-between;
    display: flex;
}

.footer-bot .inner {
    padding: 24px 0 47px;
    border-top: 1px solid #d0d0d0;
}

.footer-bot .copyright p {
    font-size: 12px;
    font-weight: 500;
    color: #9e9e9e;
    margin-bottom: 0;
}

.footer-bot-nav {
    list-style-type: none;
    margin: 0;
}

.footer-bot-nav li {
    font-size: 16px;
    font-weight: 700;
    color: #434242;
    margin: 0 10px;
}

.footer-bot-nav li:not(:last-child) {
    margin-right: 8px;
}

.modal .bg-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    opacity: 0.25;
}

.modal .bg-icon img {
    width: 100%;
}

.modal-body {
    padding: 24px 24px 16px;
}

.modal-body :last-child {
    margin-bottom: 0;
}

.modal-title {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 24px;
}

.modal-title.w-icon {
    position: relative;
    padding-left: 50px;
}

.modal-title .icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 40px;
}

.copyright p {
    font-size: 12px;
    padding: 0px 0;
}

.modal-title .icon img {
    width: 100%;
}

.second_section .d-flex {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.second_section .member_section {
    color: #fff;
    background: #1eb2a6;
    position: relative;
    width: 20%;
    min-height: 60px;
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.member_section:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28px;
    display: block;
    width: 50px;
    background: #fff;
    -webkit-transform: skew(-23deg);
    -ms-transform: skew(-23deg);
    transform: skew(-23deg);
}

.btn-section {
    padding: 0 40px;
}

.inner.top_nav ul li .icon {
    color: #1eb2a6;
    background: #a6d5ad;
    padding: 8px;
    border-radius: 50%;
    font-size: 20px;
    height: 39px;
    width: 39px;
    display: inline-block;
    text-align: center;
}

.inner.top_nav a.icon-text.d-flex {
    display: flex;
    vertical-align: middle;
    align-items: center;
    color: #fff;
    line-height: 1.75;
}

a.icon-text.d-flex i.fa.fa-phone {
    rotate: 100deg;
    font-size: 30px;
    margin-right: 7px;
}

.modal-footer .btn {
    font-size: 16px;
}

.second_section .navbar {
    background: #fff;
    flex: 1;
}

.main-hero_img-sec {
    display: flex;
    width: 100%;
    justify-content: end;
    align-items: center;
}

.main-hero_img-sec .hero-img {
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-height: 430px;
    max-width: 430px;
    filter: drop-shadow(-20px 0px 0px white);
}

.homebanner--section {
    padding: 35px 0px;
    color: #f5f5f5;
    /* background: linear-gradient(150deg, #4AD3BB, #3CC1A9);  */
    background: linear-gradient(75deg, #0ea78d, #94c993);
    /* background-image:url("../images/banner-img.png"); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.homebanner--section .top-title {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 800;
}

.homebanner h1 {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    margin-bottom: 16px;
}

.homebanner .inner .hero__text-section {
    max-width: 580px;
}

.homebanner .inner .hero__small-font {
    color: #c8fff5;
    padding-top: 8px;
}

.homebanner h1 .title_heigh-light {
    color: #fff38a;
}

.homebanner p {
    /*font-size: 20px;*/
    font-size: 16px;
    font-weight: 500;
}

.homebanner p small {
    font-size: 16px;
    font-weight: 500;
}

.homebanner p:last-child {
    margin-bottom: 0;
}

.banner-btn {
    margin-top: 30px;
}

.banner-btn .btn {
    background: orange;
    font-size: 16px;
    position: relative;
    padding: 13px 32px;
    border-radius: 8px;
    font-weight: 600px;
}

.banner-btn .btn:hover {
    background-image: linear-gradient(150deg,
            #f6b53f,
            #f6b53f,
            #ff9227,
            #ff9227);
}

.section-inner .title {
    font-size: 26px;
    color: orange;
}

.homebanner .hero_sec-title .homebanner .col-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-bottom: 112px;
    padding-right: 50px;
}

.homebanner .col-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    max-width: 537px;
}

.homebanner .col-media img {
    width: 100%;
}

.homebanner-specs {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    padding: 24px 52px;
    width: 100%;
    max-width: 940px;
    color: #000;
    background-color: #fff;
    border-radius: 108px;
    -webkit-box-shadow: 0 0 40px rgba(94, 121, 214, 0.19);
    box-shadow: 0 0 40px rgba(94, 121, 214, 0.19);
}

.homebanner-specs .spec {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.homebanner-specs .spec .icon {
    max-width: 45px;
}

.homebanner-specs .spec .text {
    padding-left: 20px;
}

.homebanner-specs .spec .text strong {
    color: #5e79d6;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 4px;
}

.homebanner-specs .spec .text p {
    font-size: 13px;
    font-weight: 500;
    line-height: 14px;
    margin-bottom: 0;
}

.banner-form {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.banner-form-wrap {
    margin-bottom: 15px;
}

.banner-form .formfield--select {
    width: 259px;
    margin-right: 7px;
}

.banner-form .formfield--email {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
}

.banner-form .formfield--submit {
    position: absolute;
    top: 50%;
    right: 7px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.whytrust--section {
    padding: 50px;
}

.whytrust .circlesbg {
    top: -450px;
}

@media (min-width: 992px) {
    .whytrust>.row>.col-text {
        padding-right: 32px;
    }
}

.whytrust .col-text h2 {
    margin-bottom: 12px;
}

.whytrust .col-text p {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 700;
}

.whytrust-cards .row {
    margin-left: -9px;
    margin-right: -9px;
}

.whytrust-cards .col {
    padding-left: 9px;
    padding-right: 9px;
}

.whytrust-cards .card .icon {
    text-align: center;
}

.whytrust-cards .card .icon img {
    max-width: 100%;
}

.whytrust-cards .card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: capitalize;
}

.challangecards--section {
    padding: 60px 0;
    background: rgb(255, 250, 246);
    background: linear-gradient(180deg,
            rgba(255, 250, 246, 1) 34%,
            rgba(249, 220, 198, 1) 100%);
}

.whytrust-cards .card p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 0;
}

.ch-card {
    background: #fff;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5%;
}

a.btn.ch-btn {
    padding: 9px 0px;
    min-width: 109px;
    text-align: center;
    border-radius: 5px;
    margin-right: 10px;
}

a.btn.ch-btn:last-child {
    margin-right: 0;
}

.ch-cards-text {
    padding: 8px;
}

.ch-btn-wrapper {
    margin: 8px 0;
    margin-bottom: 15px;
}

.ch-cards-text h5 {
    font-size: 30px;
    margin-bottom: 0;
}

p {
    font-size: 16px;
    font-weight: 500;
}

.top_nav ul {
    padding: 0;
    list-style: none;
}

.top_nav ul li {
    display: inline-block;
    padding: 10px;
    list-style: none;
}

.worksheet-cta .list-tick {
    margin-bottom: 0;
}

.learncards {
    position: relative;
}

img {
    width: 100%;
    object-fit: cover;
}

.learncards--section {
    padding-top: 60px;
    padding-bottom: 45px;
}

.worksheet-cta--section ul {
    list-style: none;
    padding: 0;
}

.worksheet-cta--section ul li.d-flex {
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

.worksheet-cta--section ul li.d-flex p {
    margin: 0;
    line-height: normal;
    margin-left: 10px;
}

.icon-wrapper {
    background: #ffbc0d;
    padding: 5px;
    border-radius: 50%;
    border: 1px solid transparent;
}

.icon-wrapper .icon {
    width: 40px;
}

/* .learncards-card {
  position: relative;

  background-color: #fff;
  -webkit-box-shadow: 0 0 24px rgba(213, 215, 249, 0.2);
  box-shadow: 0 0 24px rgba(213, 215, 249, 0.2);
  border-radius: 24px;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  text-align: center;
} */

.learncards-text {
    padding: 15px;
    text-align: center;
}

.learncards-text h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
}

.learncards-text p {
    margin: 0;
    font-size: 18px;
    padding: 0px 0;
    margin-bottom: 8px;
}

.learncards-card .media {
    z-index: 1;
}

.learncards-card .media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.testimonials-home {
    position: relative;
}

.testimonials-home--section {
    padding: 0px;
    background: #fffbfe;
}

.testimonials-home--section .section-card {
    padding: 50px 0;
}

@media (min-width: 1367px) {
    .testimonials-home--section .container {
        padding: 0;
    }
}

/* .testimonials-home .testimonials-box {
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
} */

.testimonials-home .testimonials-box .content p {
    font-size: 20px;
    margin-bottom: 0;
    color: #fff;
}

.testimonials-home .media {
    /* border-radius: 0 50%;
  border: 1px solid transparent; */
    overflow: hidden;
}

.inden-learning--section {
    padding-top: 30px;
    padding-bottom: 126px;
}

.inden-learning .inner {
    max-width: 834px;
    margin-left: auto;
    margin-right: auto;
}

.inden-learning h2 {
    margin-bottom: 49px;
}

.inden-learning ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    flex-direction: row;
}

.inden-learning ul li {
    width: 33.33333%;
    padding-left: 40px;
    padding-right: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.inden-learning .btn {
    margin-top: 68px;
    font-family: "Work Sans";
    font-size: 19px;
    font-weight: 700;
}

.skill-listing-item .title {
    margin-bottom: 18px;
}

.skill-listing-item .title :last-child {
    margin-bottom: 0;
}

.skill-listing-item .title h2 {
    font-size: 34px;
    margin-bottom: 10px;
}

.skill-listing-item .title p {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
}

.skill-listing-item-card {
    position: relative;
    padding-left: 48px;
    height: 100%;
}

.skill-listing-item-card h4 {
    position: static;
    color: #333333;
    padding: 6px 0px;
}

.skill-listing-item-card h4 .lesson-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    color: #fff;
    background-image: url("icons/bg-star-purple.svg");
    /* background-image: url("icons/star.png"); */
    background-size: contain;
    background-repeat: no-repeat;
    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;
}

.skill-listing-item-card ol {
    color: #53baf5;
    padding-left: 16px;
    margin-bottom: 40px;
}

.bullentingFormat {
    font-size: 14px;
    color: #222222;
    width: 28px;
    display: block;
    flex-shrink: 0;
    padding-right: 6px;
}

.skill-listing-item-card ol li {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-items: start;
    gap: 14px;
    flex-wrap: nowrap;
}

.skill-listing-item-card ol li:not(:last-child) {
    margin-bottom: 12px;
}

.skill-listing-item-card ol li::marker {
    margin-right: 8px;
    font-weight: bold;
    font-size: 30px;
}

.skill-listing-item-card ol li a {
    color: #222222;
    font-size: 14px;
}

.skill-listing-item-card ol li a:hover {
    color: #53baf5;
}

.skill-test {
    display: flex;
    flex-wrap: wrap;
}

.skill-test-sidebar {
    padding: 40px 16px 16px 16px;
    flex: 1;
    max-width: 325px;
}

.skill-test--col-main {
    flex: 2;
    margin-left: 10px;
}

.skill-test--card {
    position: relative;
    margin-bottom: 20px;
    padding: 40px 30px 0px 30px;
    /* background-image: url("../images/question-bg-2.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: white;
  padding-bottom: 208px; */
}

.skill-test--card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 0px;
}

.skill-test--card-body {
    /* min-height: 424px;
    padding-right: 108px; */
    padding-top: 25px;
    min-height: fit-content;
    width: 100%;
    /* aspect-ratio: 1035 / 665; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;
}

.skill-test--card-body .correct-answer {
    padding: 20px;
}

.skill-test--card-body .correct-answer img {
    width: 100%;
    max-width: 392px;
}

.skill-test--card-footer {
    margin-top: 20px;
}

.grade-label {
    line-height: 1.2;
    font-size: 24px;
    font-weight: 700;
    font-family: "Nunito", sans-serif;
    color: #414c4f;
    margin-bottom: 8px;
}

/*
.grade-label > span {
    font-size: 12px;
    display: block;
} */

.skill-test--card-overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 48px;
    background-color: rgba(255, 255, 255, 0.94);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.skill-test--card-overlay h1 {
    margin-bottom: 24px;
}

.skill-test--card-overlay .correct-answer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 57px;
}

.skill-test--card-overlay .correct-answer p {
    color: #5e79d6;
    font-family: "Work Sans";
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    margin-right: 18px;
}

.skill-test--question {
    margin-bottom: 0;
    color: rgba(0, 0, 0, 0.68);
}

.skill-test--question .title {
    text-align: center;
}

.skill-test--question .title h1 {
    margin-bottom: 6px;
}

.skill-test--question .title p {
    color: #b9b9b9;
}

.skill-test--question-nums {
    text-align: center;
}

.skill-test--question-nums h5 {
    font-family: "Work Sans";
    font-size: 86px;
    font-weight: 700;
    margin-bottom: 0;
}

.skill-test--question-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 0;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
    row-gap: 50px;
}

.skill-test--question-media.gk-l14-u4 {
    column-gap: 50px;
}

.skill-test--question-media.coloring {
    max-width: 500px;
}

.item-2 {
    position: relative;
    top: 92px;
    left: 80px;
}

.first-image {
    position: relative;
    top: 57px;
    left: 104px;
}

.second-image {
    position: relative;
    top: 104px;
    left: 6px;
}

.third-image {
    position: relative;
    top: 104px;
    left: 37px;
}

.image-one {
    position: relative;
    top: 59px;
    left: 72px;
}

.image-two {
    position: relative;
    top: 59px;
    left: 84px;
}

.image-three {
    position: relative;
    top: 120px;
    left: -38px;
}

.image-four {
    position: relative;
    top: 120px;
    left: -24px;
}

.skill-test--question-media img,
.skill-test--question-media svg {
    width: 100%;
    max-width: 120px;
    margin: 0 30px 0;
}

.question-title {
    margin-left: auto;
    margin-right: auto;
}

.question-title .skill-test--question-media img {
    margin-bottom: 0;
}

.skill-test--ans--row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.skill-test--ans--col-options {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    padding-right: 0;
}

.skill-test--ans--col-ansbox {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 362px;
    flex: 0 0 362px;
}

.skill-test--ans-options {
    text-align: center;
}

.skill-test--ans-options h4 {
    font-size: 18px;
    font-weight: 700;
    color: #3a3a3a;
    opacity: 0.68;
    margin-bottom: 18px;
}

.skill-test--ans-options .options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: 0;
    margin: 0 -20px;
    justify-content: center;
}

.skill-test--ans-options .options .option {
    position: relative;
}

.skill-test--ans-options .options .option>a {
    position: relative;
    display: block;
}

.skill-test--ans-options .options .option.selected>a::after,
.skill-test--ans-options .options .option.selected>a::before {
    opacity: 1;
}

.skill-test--ans-options .options .option.selected>a::before {
    bottom: -8px;
    left: -8px;
}

.skill-test--ans-options .options .option.selected>a::after {
    top: -8px;
    right: -8px;
}

.skill-test--ans-options-theme-1 .options .option {
    padding: 10px;
}

/* .skill-test--ans-options-theme-1 .options .option-inner {
  width: 92px;
  height: 92px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='28' ry='28' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e");
  border-radius: 28px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  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;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
} */

.skill-test--ans-options-theme-1 .options .option .num-wrap {
    position: relative;
    color: #446baa;
    font-family: "Museo 900";
    font-weight: 900;
    font-size: 34px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #e1e1e1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* .skill-test--ans-options-theme-1 .options .option .num-wrap::after,
.skill-test--ans-options-theme-1 .options .option .num-wrap::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.skill-test--ans-options-theme-1 .options .option .num-wrap::before {
  z-index: -1;
  top: 5px;
  left: 5px;
  width: 9px;
  height: 9px;
  background-color: #446baa;
}

.skill-test--ans-options-theme-1 .options .option .num-wrap::after {
  width: 18px;
  height: 18px;
  background-color: #ffe2ad;
  bottom: 0;
  right: 0;
} */

.skill-test--ans-options-theme-1 .options .option.selected .option-inner {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.skill-test--ans-options-theme-1 .options .option.selected .num-wrap {
    color: #fff;
    background-color: #5e79d6;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.skill-test--ans-options-theme-1 .options .option.selected .num-wrap::before {
    top: -15px;
    left: -15px;
}

.skill-test--ans-options-theme-1 .options .option.selected .num-wrap::after {
    bottom: -20px;
    right: -20px;
}

.skill-test--ans-options-theme-2 .options {
    margin-left: -17px;
    margin-right: -17px;
}

.skill-test--ans-options-theme-2 .options .option {
    padding-left: 17px;
    padding-right: 17px;
}

.skill-test--ans-options-theme-2 .options .option>a::after,
.skill-test--ans-options-theme-2 .options .option>a::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid #58c59d;
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.skill-test--ans-options-theme-2 .options .option>a::before {
    bottom: 0;
    left: 0;
    border-width: 0 0 4px 4px;
    border-color: #8ce093;
}

.skill-test--ans-options-theme-2 .options .option>a::after {
    top: 0;
    right: 0;
    border-width: 4px 4px 0 0;
    border-color: #50c6ec;
}

.skill-test--ans-options-theme-2 .options .option-inner {
    z-index: 1;
    position: relative;
    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;
    width: 70px;
    height: 70px;
}

.skill-test--ans-options-theme-2 .options .option-inner::after,
.skill-test--ans-options-theme-2 .options .option-inner::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.skill-test--ans-options-theme-2 .options .option-inner::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHZpZXdCb3g9IjAgMCA3MCA3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTY4Ljk5NzYgNTIuNjc0NkM2OC45OTc2IDYxLjM2NDIgNjEuODkyNiA2OC40MDE4IDUzLjEzNSA2OC40MDE4SDE2Ljg3MThDOC4xMDc0IDY4LjQwMTggMS4wMDkxOSA2MS4zNTc0IDEuMDA5MTkgNTIuNjc0NlYxNi43Mjc3QzEuMDA5MTkgOC4wMzgxOCA4LjEwNzQgMC45OTM4NiAxNi44NzE4IDAuOTkzODZINTMuMTM1QzYxLjg5MjYgMC45OTM4NiA2OC45OTc2IDguMDM4MTggNjguOTk3NiAxNi43Mjc3VjUyLjY3NDZaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTQ5XzEyODMpIi8+CjxwYXRoIGQ9Ik01My4xMzUgMEgxNi44NzE4QzcuNTY1NTYgMCAwIDcuNTAwOTYgMCAxNi43Mjc3VjUyLjY3NDZDMCA2MS44OTQ3IDcuNTY1NTYgNjkuNDAyMyAxNi44NzE4IDY5LjQwMjNINTMuMTM1QzYyLjQzNDUgNjkuNDAyMyA3MCA2MS45MDE0IDcwIDUyLjY3NDZWMTYuNzI3N0M3MCA3LjUwMDk2IDYyLjQzNDUgMCA1My4xMzUgMFpNNjguOTk3NiA1Mi42NzQ2QzY4Ljk5NzYgNjEuMzY0MiA2MS44OTI2IDY4LjQwMTggNTMuMTM1IDY4LjQwMThIMTYuODcxOEM4LjEwNzQgNjguNDAxOCAxLjAwOTE5IDYxLjM1NzQgMS4wMDkxOSA1Mi42NzQ2VjE2LjcyNzdDMS4wMDkxOSA4LjAzODE4IDguMTA3NCAwLjk5Mzg2IDE2Ljg3MTggMC45OTM4Nkg1My4xMzVDNjEuODkyNiAwLjk5Mzg2IDY4Ljk5NzYgOC4wMzgxOCA2OC45OTc2IDE2LjcyNzdWNTIuNjc0NloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xNDlfMTI4MykiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xNDlfMTI4MyIgeDE9IjguODMyMTUiIHkxPSI2Ny4zNTQ1IiB4Mj0iNjAuMjU2IiB5Mj0iMi4wNzM4NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDBGRjk1Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwOURGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMTQ5XzEyODMiIHgxPSI4Ljk3NDgzIiB5MT0iNjcuMTc3NSIgeDI9IjYwLjEyNTgiIHkyPSIyLjI0MzI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwMDlERkYiLz4KPHN0b3Agb2Zmc2V0PSIwLjI5NTciIHN0b3AtY29sb3I9IiMwMDlERkYiLz4KPHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IiMwMDlERkYiLz4KPHN0b3Agb2Zmc2V0PSIwLjc3NDIiIHN0b3AtY29sb3I9IiMwMEZGOTUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDBGRjk1Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
}

.skill-test--ans-options-theme-2 .options .option-inner::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNjkiIHZpZXdCb3g9IjAgMCA2OCA2OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC40Ij4KPHBhdGggZD0iTTY1Ljg3MzkgNTAuMDI5M0M2NS44NzM5IDU3LjM1NTcgMTMuNzQxNCAzNS41MTc2IDIuMzI4NzEgMTcuMzA1OEMxLjM2MDE1IDE1Ljc1NDYgLTAuMjUxODQ2IDE0LjYxOTcgMC4wOTM1ODIgMTIuODYwM0MxLjQ2ODUyIDUuOTIzNDMgNy43MjAwOSAwLjY3ODgwMiAxNS4yMzgyIDAuNjc4ODAySDUwLjQ2NTFDNTguOTc4OSAwLjY3ODgwMiA2NS44NzM5IDcuNDAwNzkgNjUuODczOSAxNS43MDA5VjUwLjAyOTNaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTQ5XzEyODQpIi8+CjxwYXRoIGQ9Ik02NS44NzM5IDUwLjAyOTNDNjUuODczOSA1Ny4zNTU3IDEzLjc0MTQgMzUuNTE3NiAyLjMyODcxIDE3LjMwNThDMS4zNjAxNSAxNS43NTQ2IC0wLjI1MTg0NiAxNC42MTk3IDAuMDkzNTgyIDEyLjg2MDNDMS40Njg1MiA1LjkyMzQzIDcuNzIwMDkgMC42Nzg4MDIgMTUuMjM4MiAwLjY3ODgwMkg1MC40NjUxQzU4Ljk3ODkgMC42Nzg4MDIgNjUuODczOSA3LjQwMDc5IDY1Ljg3MzkgMTUuNzAwOVY1MC4wMjkzWiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzE0OV8xMjg0KSIvPgo8cGF0aCBkPSJNNjUuODczOSA0Ny41NTE0QzY0Ljk3MzEgNDcuNTUxNCA2NC4yNDE2IDM4Ljc0NzcgNjQuMjQxNiAyNy44ODI0QzY0LjI0MTYgMTcuMDE3MSA2NC45NzMxIDguMjEzMzQgNjUuODczOSA4LjIxMzM0QzY2Ljc3NDggOC4yMTMzNCA2Ny41MDYzIDE3LjAxNzEgNjcuNTA2MyAyNy44ODI0QzY3LjUwNjMgMzguNzQxIDY2Ljc3NDggNDcuNTUxNCA2NS44NzM5IDQ3LjU1MTRaIiBmaWxsPSJ1cmwoI3BhaW50Ml9yYWRpYWxfMTQ5XzEyODQpIi8+CjxwYXRoIGQ9Ik02NS44NzM5IDQ3LjU1MTRDNjQuOTczMSA0Ny41NTE0IDY0LjI0MTYgMzguNzQ3NyA2NC4yNDE2IDI3Ljg4MjRDNjQuMjQxNiAxNy4wMTcxIDY0Ljk3MzEgOC4yMTMzNCA2NS44NzM5IDguMjEzMzRDNjYuNzc0OCA4LjIxMzM0IDY3LjUwNjMgMTcuMDE3MSA2Ny41MDYzIDI3Ljg4MjRDNjcuNTA2MyAzOC43NDEgNjYuNzc0OCA0Ny41NTE0IDY1Ljg3MzkgNDcuNTUxNFoiIGZpbGw9InVybCgjcGFpbnQzX3JhZGlhbF8xNDlfMTI4NCkiLz4KPHBhdGggZD0iTTM3LjA3NDcgNjcuNDA4NUMzNy4wNzQ3IDY4LjI4ODIgMjkuOTYzIDY5IDIxLjE5MTggNjlDMTIuNDIwNiA2OSA1LjMwODg3IDY4LjI4ODIgNS4zMDg4NyA2Ny40MDg1QzUuMzA4ODcgNjYuNTI4OCAxMi40MjA2IDY1LjgxNyAyMS4xOTE4IDY1LjgxN0MyOS45NjMgNjUuODEwMiAzNy4wNzQ3IDY2LjUyODggMzcuMDc0NyA2Ny40MDg1WiIgZmlsbD0idXJsKCNwYWludDRfcmFkaWFsXzE0OV8xMjg0KSIvPgo8cGF0aCBkPSJNMzcuMDc0NyA2Ny40MDg1QzM3LjA3NDcgNjguMjg4MiAyOS45NjMgNjkgMjEuMTkxOCA2OUMxMi40MjA2IDY5IDUuMzA4ODcgNjguMjg4MiA1LjMwODg3IDY3LjQwODVDNS4zMDg4NyA2Ni41Mjg4IDEyLjQyMDYgNjUuODE3IDIxLjE5MTggNjUuODE3QzI5Ljk2MyA2NS44MTAyIDM3LjA3NDcgNjYuNTI4OCAzNy4wNzQ3IDY3LjQwODVaIiBmaWxsPSJ1cmwoI3BhaW50NV9yYWRpYWxfMTQ5XzEyODQpIi8+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xNDlfMTI4NCIgeDE9IjI3LjE1MSIgeTE9IjUxLjQ0NjUiIHgyPSI2Ny41NzIxIiB5Mj0iMTIuMzQzNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMUExQTFBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0U2RTZFNiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMTQ5XzEyODQiIHgxPSIyNy4xNTEiIHkxPSI1MS40NDY1IiB4Mj0iNjcuNTcyMSIgeTI9IjEyLjM0MzciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRDRGRkZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQyX3JhZGlhbF8xNDlfMTI4NCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgzMy44NDM3IDM0LjgzOTcpIHJvdGF0ZSg5MCkgc2NhbGUoMzQuMTY2MiAzMy42Njg0KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNCM0IzQjMiLz4KPHN0b3Agb2Zmc2V0PSIxIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQzX3JhZGlhbF8xNDlfMTI4NCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgzMy44NDM3IDM0LjgzOTcpIHJvdGF0ZSg5MCkgc2NhbGUoMzQuMTY2MiAzMy42Njg0KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNENEZGRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50NF9yYWRpYWxfMTQ5XzEyODQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMuNzY0NCAzNC43NjUxKSBzY2FsZSgzMy43Mzk3IDM0LjE2NDQpIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIwLjQ4NzMiIHN0b3AtY29sb3I9IiM3QzdDN0MiLz4KPHN0b3Agb2Zmc2V0PSIwLjg0MSIgc3RvcC1jb2xvcj0iIzIzMjMyMyIvPgo8c3RvcCBvZmZzZXQ9IjEiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDVfcmFkaWFsXzE0OV8xMjg0IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDIxLjE4NjQgNjcuNDA1KSBzY2FsZSgxNS44ODc0IDEuNTkxNzIpIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIwLjE4MyIgc3RvcC1jb2xvcj0iI0Y3RkZGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNENEZGRkYiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K);
}

.skill-test--ans-options-theme-2 .options .option .num {
    color: #fff;
    font-family: "Work Sans";
    font-size: 33px;
    font-weight: 700;
}

.skill-test--ans-ansbox {
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='28' ry='28' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 28px;
}

.skill-test--ans-ansbox .ansbox-tag {
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 12px;
    font-weight: 600;
    color: #2c2c2c;
    background-color: #f6b53f;
    padding: 6px 8px;
    border-radius: 4px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.skill-test--ans-ansbox.is-empty .ansbox-body {
    position: relative;
    width: 100%;
    min-height: 160px;
    padding: 12px 38px;
    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;
}

.skill-test--ans-ansbox.is-empty .ansbox-body p {
    color: #2c2c2c;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 0;
    opacity: 0.24;
}

.skill-test--col-stat .section-card {
    padding: 38px;
}

.skill-test--stat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}

.top-stat-row {
    max-width: 84px;
    position: absolute;
    top: 64px;
    right: 24px;
}

.stat-card {
    position: relative;
    text-align: center;
    border-radius: 8px;
    color: rgba(0, 0, 0, 0.68);
}

.stat-card:not(:last-child) {
    margin-bottom: 34px;
}

.stat-card .icon {
    width: 30px;
    margin: 0 auto 5px;
}

.skill-test--section {
    padding-top: 0px;
    padding-bottom: 40px;
}

.stat-card .icon img,
.stat-card .icon svg {
    width: 75px;
    height: auto;
}

.stat-card h4 {
    font-size: 12px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.stat-card p {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    font-family: "Nunito", sans-serif;
}

.stat-card p .num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.stat-card p .num.size-lg {
    font-size: 34px;
    font-weight: 900;
}

.skill-answer-hint {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.94);
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.skill-answer-hint:not(.active) {
    display: none;
}

.skill-answer-hint .button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    padding: 3px 33px;
    border: 0;
    border-radius: 48px;
    color: #fff;
    background-color: #5f9fff;
    min-width: 137px;
    min-height: 39px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    color: #fff;
    background-image: linear-gradient(150deg,
            #f6b53f,
            #f6b53f,
            #ff9227,
            #ff9227);
    background-size: 200% auto;
    background-position-x: 0;
}

.skill-answer-hint .button:hover {
    color: #fff;
    background-position-x: 100%;
}

.skill-answer-hint-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.skill-answer-hint-content .emoticon {
    margin-bottom: 20px;
}

.skill-answer-hint-content .emoticon img {
    display: block;
    width: 100%;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.skill-answer-hint-content .correct-answer-is {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.skill-answer-hint-content .btn {
    font-size: 18px;
    min-height: 49px;
}

.skill-lesson-list {
    /* list-style-type: none; */
    list-style: decimal;
    margin-bottom: 0;
    padding: 0;
}

.correct-ans-hint-img img {
    min-width: 200px;
    max-width: 400px;
    width: auto;
    height: auto;
}

.skill-lesson-list>li .skill-show-unit-list {
    z-index: 1;
    position: relative;
    display: block;
    padding: 5px;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-show-unit-list {
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-bottom: 1px solid #6fb0b6;
    padding-bottom: 12px;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-show-unit-list::after,
.skill-lesson-list>li.skill-has-sub-menu .skill-show-unit-list::before {
    content: "";
    position: absolute;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

/* .skill-lesson-list>li.skill-has-sub-menu .skill-show-unit-list::before {
  z-index: -1;
  top: 12px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #5e79d6;
  -webkit-transition: all 0.25s ease-out, border-radius 0.1s ease-out;
  transition: all 0.25s ease-out, border-radius 0.1s ease-out;
} */

/* .skill-lesson-list>li.skill-has-sub-menu .skill-show-unit-list::after {
  top: 9px;
  right: 4px;
  width: 14px;
  height: 14px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJCb2xkIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48cGF0aCBmaWxsPSIjNUU3OUQ2IiBkPSJNMTkuMDYxLDcuODU0YTEuNSwxLjUsMCwwLDAtMi4xMjIsMGwtNC41ODYsNC41ODVhLjUuNSwwLDAsMS0uNzA3LDBMNy4wNjEsNy44NTRBMS41LDEuNSwwLDAsMCw0LjkzOSw5Ljk3NWw0LjU4Niw0LjU4NmEzLjUsMy41LDAsMCwwLDQuOTUsMGw0LjU4Ni00LjU4NkExLjUsMS41LDAsMCwwLDE5LjA2MSw3Ljg1NFoiLz48L3N2Zz4K);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
} */

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu {
    padding: 0px 4px;
    margin-bottom: 12px;
    list-style-type: none;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu li {
    margin-left: -3px;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu li a {
    display: flex;
    padding: 0px 8px;
    font-size: 14px;
    gap: 14px;
    border-left: 4px solid transparent;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu li a span {
    font-family: "Nunito", sans-serif !important;
    color: #008490;

}

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu li a[href] {
    padding-top: 5px;
    padding-bottom: 5px;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu li a:hover {
    border-left-color: #5e79d6;
}

.skill-lesson-list>li.skill-has-sub-menu.open .skill-show-unit-list:hover {
    color: inherit;
}

.skill-lesson-list>li.skill-has-sub-menu.open .skill-show-unit-list::before {
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px 3px 3px 0;
    opacity: 0.15;
}

.skill-lesson-list>li.skill-has-sub-menu.open .skill-show-unit-list::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.congrats-msg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 500px;
    justify-content: space-around;
}

.congrats-msg-img,
.congrats-msg-text {
    z-index: 2;
    position: relative;
}

.congrats-msg-img {
    margin-bottom: 20px;
}

.congrats-msg-img img {
    display: block;
    width: 100%;
    max-width: 210px;
    margin-left: auto;
    margin-right: auto;
}

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

.congrats-msg-text h3 {
    color: #00B9CA;
    font-size: 54px;
    font-weight: 700;
    /* border: solid 2px #6fd075;
    padding: 20px 40px;
    border-radius: 28px; */
}

.congrats-msg-anims .party-pops {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hiw img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .hiw img {
        margin-bottom: 24px;
    }
}

/* /* .item-2 {
   bottom: 30px;
}  */

/* Final touces css styles ========================================================= OVERWRITE*/
/* .skill-test--footer {
  border: solid 1px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.02);
} */

ol li {
    list-style: none;
}

/*Alignments=========== global*/
.no-border {
    border: none !important;
}

.tx-al-l {
    text-align: left !important;
}

.tx-al-r {
    text-align: right !important;
}

.tx-al-c {
    text-align: center !important;
}

.s-al-m {
    vertical-align: middle;
    align-self: center;
}

.s-al-t {
    vertical-align: top;
    align-self: flex-start;
}

.s-al-b {
    vertical-align: bottom;
    align-self: flex-end;
}

.v-al-t {
    align-items: flex-start;
}

.v-al-b {
    align-items: flex-end;
}

.jusfy-contnt-l {
    justify-content: flex-start !important;
}

.jusfy-contnt-c {
    justify-content: center !important;
}

.jusfy-contnt-between {
    justify-content: space-between !important;
}

.jusfy-contnt-r {
    justify-content: flex-end !important;
}

.d-i-flx {
    display: inline-flex;
}

.skill-lesson-list>li.skill-has-sub-menu .skill-sub-menu li.active {
    background-color: #ddf9fc;
}

.skill-test--question-media .media-group {
    border: solid 2px #b2ebff;
    width: 32%;
    margin: 5px;
    height: 250px;
    cursor: pointer;
    border-radius: 5px;
}

.skill-test--question-media .media-group:hover,
.skill-test--question-media .media-group.selected {
    border-color: #7eafc0;
}

.skill-test--question-media .media-group img {
    width: 20%;
    margin: 0 auto;
}

input.skill-test-answer-input {
    background-color: #fff;
    border: 1px solid #d7d7d7;
    width: 100%;
    max-width: 60px;
}

.party-pops.animation-theme-2 bokeh {
    position: absolute;
    top: 0;
    left: 20%;
    width: 4vmin;
    height: 4vmin;
    border-radius: 50%;
    -webkit-animation-name: explosion;
    animation-name: explosion;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-direction: normal;
    -webkit-animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
    animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
}

span.big-character {
    font-size: 150px;
    font-weight: 800;
    line-height: 1;
    color: #77a4ec;
    display: block;
    margin-top: 18px;
}

span.medium-character {
    font-size: 75px;
    font-weight: 800;
    line-height: 1;
    color: #77a4ec;
    display: block;
    margin-top: 18px;
}

span.medium-small-character {
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    color: #707070;
}

span.small-character {
    display: inline-block;
    margin: 0 5px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #696a6a;
}

.answer-set.img-selection .answer-set__option {
    margin-top: 25px;
    border: 2px solid transparent;
    padding: 0;
    margin-right: 25px;
    min-width: 55px;
}

.answer-set.img-selection img {
    height: 50px;
}

.answer-set .answer-set__option {
    border: solid 2px #5e79d6;
    width: fit-content;
    padding: 10px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    min-width: 90px;
    min-height: 54px;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.68);
}

.answer-set .answer-set__option:nth-child(1) {
    border: solid 2px #e53935;
    /* red */
}

.answer-set .answer-set__option:nth-child(2) {
    border: solid 2px #43a047;
    /* green */
}

.answer-set .answer-set__option:nth-child(3) {
    border: solid 2px #1e88e5;
    /* blue */
}

.answer-set .answer-set__option:nth-child(4) {
    border: solid 2px #fb8c00;
    /* orange */
}

.answer-set .answer-set__option:nth-child(5) {
    border: solid 2px #8e24aa;
    /* purple */
}

.answer-set .answer-set__option:nth-child(6) {
    border: solid 2px #00897b;
    /* teal */
}

.answer-set.img-selection .answer-set__option:hover,
.answer-set .answer-set__option:hover,
.answer-set .answer-set__option.selected {
    /* border: 2px solid #f6b53f; */
    background-color: rgba(246, 181, 63, 0.18);
}

.answer-set .answer-set__option.has-fraction {
    min-width: auto;
    padding: 0 15px;
}

.answer-set-radio input {
    display: inline;
    margin-right: 15px;
    width: 40px;
}

.answer-set-radio .answer-set__option {
    text-align: left;
    vertical-align: middle;
}

.answer-set-radio .answer-set__option label {
    display: flex;
    align-items: center;
}

span.circle {
    border: solid 2px #f76b26;
    border-radius: 50%;
    padding: 2px;
    margin: 0 1px;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 32px;
}

.skill-test--question-media img.group {
    border: 2px solid #5e79d6;
    border-radius: 6px;
    max-width: 180px;
    vertical-align: top;
    margin: 0 20px 20px;
}

.skill-test--question-media img.group:hover,
.skill-test--question-media img.group.selected,
.skill-test--question-media.multiple-select img:hover,
.skill-test--question-media.multiple-select img.selected {
    cursor: pointer;
    border-color: #f6b53f;
    border-width: 3px;
    opacity: 0.8;
}

.skill-test--question .question-title h4 {
    font-size: 1.2rem;
    color: #3b2908;
    font-family: "Nunito", sans-serif;
}

.skill-test--question-media.has-single-media img {
    max-width: 300px;
}

.skill-test--question-media.media-width-175 img,
.skill-test--question-media.media-width-175 svg {
    max-width: 175px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-50 img,
.skill-test--question-media.media-width-50 .figure>img,
.skill-test--question-media.media-width-50 svg {
    max-width: 50px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-60 img,
.skill-test--question-media.media-width-60 .figure>img,
.skill-test--question-media.media-width-60 svg {
    max-width: 60px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-70 img,
.skill-test--question-media.media-width-70 .figure>img,
.skill-test--question-media.media-width-70 svg {
    max-width: 70px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-200 img,
.skill-test--question-media.media-width-200 .figure>img,
.skill-test--question-media.media-width-200 svg {
    max-width: 200px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-225 img,
.skill-test--question-media.media-width-225 .figure>img,
.skill-test--question-media.media-width-225 svg {
    max-width: 225px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-250 img,
.skill-test--question-media.media-width-250 .figure>img,
.skill-test--question-media.media-width-250 svg {
    max-width: 250px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-275 img,
.skill-test--question-media.media-width-275 .figure>img,
.skill-test--question-media.media-width-275 svg {
    max-width: 275px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-300 img,
.skill-test--question-media.media-width-300 .figure>img,
.skill-test--question-media.media-width-300 svg {
    max-width: 300px;
}

.skill-test--question-media.media-width-325 img,
.skill-test--question-media.media-width-325 .figure>img,
.skill-test--question-media.media-width-325 svg {
    max-width: 325px;
}

.skill-test--question-media.media-width-350 img,
.skill-test--question-media.media-width-350 .figure>img,
.skill-test--question-media.media-width-350 svg {
    max-width: 350px;
}

.skill-test--question-media.media-width-375 img,
.skill-test--question-media.media-width-375 .figure>img,
.skill-test--question-media.media-width-375 svg {
    max-width: 375px;
}

.skill-test--question-media.media-width-400 img,
.skill-test--question-media.media-width-400 .figure>img,
.skill-test--question-media.media-width-400 svg {
    max-width: 400px;
}

.skill-test--question-media.media-width-450 img,
.skill-test--question-media.media-width-450 .figure>img,
.skill-test--question-media.media-width-450 svg {
    max-width: 450px;
}

.skill-test--question-media.media-width-500 img,
.skill-test--question-media.media-width-500 .figure>img,
.skill-test--question-media.media-width-500 svg {
    max-width: 500px;
}

.skill-test--question-media.media-width-550 img,
.skill-test--question-media.media-width-550 .figure>img,
.skill-test--question-media.media-width-550 svg {
    max-width: 550px;
}

.skill-test--question-media.media-width-600 img,
.skill-test--question-media.media-width-600 .figure>img,
.skill-test--question-media.media-width-600 svg {
    max-width: 600px;
}

.skill-test--question-media.media-width-650 img,
.skill-test--question-media.media-width-650 .figure>img,
.skill-test--question-media.media-width-650 svg {
    max-width: 650px;
}

.skill-test--question-media.media-width-165 img,
.skill-test--question-media.media-width-165 .figure>img {
    max-width: 165px;
    margin: 0 15px 5px;
}

.media-width-150 img,
.skill-test--question-media.media-width-150 img,
.skill-test--question-media.media-width-150 .figure>img {
    max-width: 150px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-140 img,
.skill-test--question-media.media-width-140 .figure>img {
    max-width: 140px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-130 img,
.skill-test--question-media.media-width-130 .figure>img {
    max-width: 130px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-120 img,
.skill-test--question-media.media-width-120 .figure>img {
    max-width: 120px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-100 img,
.skill-test--question-media.media-width-100 .figure>img {
    max-width: 100px;
    margin: 0 15px 5px;
}

.skill-test--question-media.media-width-80 img,
.skill-test--question-media.media-width-80 .figure>img {
    max-width: 80px;
    margin: 0 15px 5px;
}

.media-width-75 svg {
    width: 75px;
}

.media-width-100 svg {
    width: 100px;
}

.media-width-125 svg {
    width: 125px;
}

.media-width-150 svg {
    width: 150px;
}

.media-width-175 svg {
    width: 175px;
}

.media-width-200 svg {
    width: 200px;
}

/* Image size for figure img */
.skill-test--question-media.media-width-175 .figure>img {
    max-width: 175px;
    min-width: 175px;
    margin: 0;
}

.skill-test--question-media.media-width-200 .figure>img {
    max-width: 200px;
    min-width: 200px;
    margin: 0;
}

.skill-test--question-media.media-width-300 .figure>img {
    max-width: 300px;
    min-width: 300px;
    margin: 0;
}

.skill-test--question-media.media-width-400 .figure>img {
    max-width: 400px;
    min-width: 400px;
    margin: 0;
}

.skill-test--question-media.media-width-500 .figure>img {
    max-width: 500px;
    min-width: 500px;
    margin: 0;
}

.skill-test--question-media.media-width-600 .figure>img {
    max-width: 600px;
    min-width: 600px;
    margin: 0;
}

.skill-test--question-media.media-width-165 .figure>img {
    max-width: 165px;
    min-width: 165px;
    margin: 0;
}

.skill-test--question-media.media-width-150 .figure>img {
    max-width: 150px;
    min-width: 150px;
    margin: 0;
}

.skill-test--question-media.media-width-140 .figure>img {
    max-width: 140px;
    min-width: 140px;
    margin: 0;
}

.skill-test--question-media.media-width-130 .figure>img {
    max-width: 130px;
    min-width: 130px;
    margin: 0;
}

.skill-test--question-media.media-width-120 .figure>img {
    max-width: 120px;
    min-width: 80px;
    margin: 0;
}

.skill-test--question-media.media-width-100 .figure>img {
    max-width: 100px;
    min-width: 100px;
    margin: 0;
}

.skill-test--question-media.media-width-80 .figure>img {
    min-width: 80px;
    max-width: 80px;
    margin: 0;
}

/* Ends */

.skill-test--question-media.media-height-150 img {
    width: auto;
    height: 150px;
}

.skill-test--question-media.media-height-200,
.skill-test--question-media.media-height-200 img {
    width: auto;
    height: 200px;
}

.skill-test--question-media.media-height-250 img {
    width: auto;
    height: 250px;
}

.skill-test--question-media.media-height-200 img {
    width: auto;
    height: 200px;
}

.skill-test--question-media.pad-5-10 img {
    padding: 5px 10px;
}

.skill-test--question-media.bordered-media img {
    border: 2px solid #5e79d67d;
    border-radius: 4px;
}

.bordered-img {
    border: 2px solid #5e79d6;
    border-radius: 6px;
}

.skill-test--ans .boxed {
    border: 2px solid #5e79d6;
    border-radius: 6px;
    padding: 20px 40px;
    width: fit-content;
    margin: 0 auto;
}

.line-break {
    width: 100%;
}

.skill-test--question .question-title-help,
.question-title-help p {
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    opacity: 1;
    margin-bottom: 10px;
}

.skill-test--question .question-title-help p {
    margin-bottom: 0;
}

.skill-test--question-media img.mid-width {
    max-width: 300px;
}

.answer-set__hint-inline-entry,
.answer-set__hint {
    display: inline-block;
}

.answer-set-inline-entry {
    font-size: 18px;
}

.answer-set__hint-inline-entry input {
    width: fit-content;
    max-width: 75px;
    background: #fff;
    padding: 5px 8px;
    text-align: center;
    font-weight: 500;
}

.answer-set__hint-inline-entry input:hover,
.skill-test--ans-options.skill-test--ans-options-theme-3 input:hover {
    background: #fff;
    border-color: #ffc1078f;
}

.skill-test--ans-options.skill-test--ans-options-theme-3 input {
    height: 45px;
    font-weight: 500;
    text-align: center;
}

.skill-test--question-media.left {
    justify-content: left;
}

.answer-set {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.skill-test--question {
    text-align: center;
}

.answer-set-inline-entry {
    display: flex;
    justify-content: center;
    align-items: center;
}

.answer-set-inline-entry>span,
.answer-set-inline-entry>div>span {
    display: inline-block;
    margin: 0 5px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: #696a6a;
}

.skill-test--ans {
    text-align: center;
    margin-top: 25px;
}

.long-text {
    flex-wrap: wrap;
}

.answer-set.long-text .answer-set__option {
    font-size: 15px;
    line-height: 1.3;
}

.qsn-vertical-set {
    display: flex;
    flex-direction: column;
    max-width: 112px;
    margin: 0 auto;
}

.qsn-vertical-set>span {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    text-align: right;
    /* justify-content: flex-end; */
    /* ← UNCOMMENT THIS LINE */
    justify-content: flex-end !important;
    /* ← CHANGE THIS */
    color: #696a6a;
    font-family: 'Courier New', monospace;
    /* ← ADD THIS */
}

.qsn-vertical-set input.skill-test-answer-input {
    font-size: 25px !important;
    padding: 0 5px;
    line-height: 25px;
    margin-left: 10px;
    font-family: 'Courier New', monospace;
    /* ← ADD THIS */
    text-align: right;
    /* ← ADD THIS */
}

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

.qsn-vertical-set>span:last-child {
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid 2px rgba(0, 0, 0, 0.68);
}

/* For VERTICAL ADDITION (260, + 256) - right align */
.qsn-vertical-set>span.qsn-row:not(.qsn-bottom) {
    justify-content: flex-end !important;
    font-family: 'Courier New', monospace;
    text-align: right;
}

/* For DIGIT BOXES in multiplication - keep center alignment */
.qsn-row>span,
.qsn-bottom>span {
    display: inline-block;
    margin-left: 8px;
    font-size: 22px;
    font-weight: 700;
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 30px;
    /* Keep existing styles, don't change justify-content here */
}

/* For the answer input in vertical addition */
.qsn-vertical-set .qsn-row-ans>input {
    text-align: right;
    font-family: 'Courier New', monospace;
    /* Match the addition rows */
}

/* Single digit inputs (for multiplication) - keep center */
.single-digit-input {
    display: inline-block;
    height: 37px !important;
    width: 38px !important;
    padding: 0 5px !important;
    margin-left: 8px;
    font-size: 28px !important;
    text-align: center;
    /* Don't add monospace here - keep original font */
}

/* Symbol in multiplication - keep as is */
.qsn-row>span.symbol {
    margin-left: 0;
    width: auto;
}

.answer-set-radio {
    display: inline-block;
}

.answer-set-radio input {
    height: 20px;
    width: 20px;
}

.answer-set-radio .answer-set__option {
    padding: 10px;
}

.answer-set-radio .answer-set__option label span {
    font-weight: 700;
}

.skill-test-option-submit {
    padding: 10px;
}

.answer-set.w600 {
    width: 600px;
    margin: 0 auto;
}

.answer-set.w550 {
    width: 550px;
    margin: 0 auto;
}

.answer-set.w500 {
    width: 500px;
    margin: 0 auto;
}

.answer-set.btmized.w400 {
    width: 400px;
    margin: 0 auto;
}

.answer-set.btmized .answer-set__option {
    border: none;
    font-family: "Nunito", sans-serif;
    /* padding: 0 10px; */
    margin-right: 10px;
    margin-top: 10px;
    */ text-align: center;
    cursor: pointer;
    min-width: 60px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 25px;
    gap: 4px;
    color: #ea9909;
    height: 45px;
    width: 60px;
    line-height: 46px;
    background-color: #ffffff;
    box-shadow: #00000040 2px 4px 0;
    transition: all 0.2s ease-in-out
}

.btn-emboss,
.btn-gery {
    border: none;
    padding: 0 10px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    min-width: 60px;
    display: inline-block;
    font-weight: 900;
    font-size: 25px;
    color: #fff;
    flex: 0;
    height: 50px;
    display: inline-block;
    line-height: 46px;
    background-color: #5e79d6;
    box-shadow: #c1cfff 2px 4px 0;
    flex: 0 0 auto;
}

.btn-gery {
    box-shadow: none;
    color: rgba(0, 0, 0, 0.58);
    background-color: white;
    border: solid 2px rgba(0, 0, 0, 0.14);
}

.answer-set.btmized .answer-set__option.selected {
    background-color: #ffc556;
    box-shadow: #00000050 1px 2px 0;
    transform: translate(1px, 2px);
    color: #ffffff;
}

.addition-with-number,
.img-with-caption {
    align-items: center;
}

.img-with-caption>span>span.img-caption {
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}

.img-with-caption.multiple-select img:hover {
    border: 2px solid #5e79d67d;
    border-radius: 4px;
}

.img-with-caption.multiple-select img.selected {
    border: 2px solid #f6b53f;
    border-radius: 4px;
}

.coin-pd-4 img {
    padding: 4px;
}

.addition-with-number>span>span.image-count {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 28px;
    align-items: center;
    margin-bottom: 10px;
}

.addition-with-number span.small-character {
    margin-top: 0;
    margin-bottom: 68px;
}

.skill-test--question-media.addition-with-number img.group {
    margin-bottom: 0;
}

.g-2-u-3-6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.g-2-u-3-6>div {
    flex: 0;
}

.g-2-u-3-6 .qsn-vertical-set {
    min-width: 112px;
    margin: 0;
    border: solid 1px rgba(0, 0, 0, 0.48);
    padding: 15px;
    margin-right: 15px;
}

.g-2-u-3-6 .statement {
    height: auto;
    background: rgb(116, 116, 116);
    align-self: center;
    color: white;
    padding: 4px 10px;
    font-size: 16px;
}

input.skill-test-answer-input {
    height: 40px;
    background-color: transparent;
    border: 1px solid #9b9b9b;
    transition: all 0.3s ease;
}

input.skill-test-answer-input:focus {
    outline: #0037ff solid 1px;
    border: none;
}

.interactive-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
    justify-content: center;
    /* margin-left: -82px; */
}

.interactive-dots>span {
    font-weight: 700;
    font-size: 16px;
}

.box-dots {
    display: flex;
    flex-wrap: wrap;
    border-left: solid 1px rgba(0, 0, 0, 0.8);
    border-bottom: solid 1px rgba(0, 0, 0, 0.8);
    width: 270px;
    margin: 0 15px 15px;
}

.box-dots>span {
    display: block;
    flex: 0 0 20%;
    height: 55px;
    border-top: solid 1px rgba(0, 0, 0, 0.8);
    border-right: solid 1px rgba(0, 0, 0, 0.8);
    padding: 10px;
}

.box-dots span>span {
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: red;
    transition: all 2s ease;
}

.bottom-dots>span .dot {
    background-color: #446baa;
}

.position-last {
    /* transform: translate(74px, -88px); */
    transform: translate(37px, -52px);
}

.g_1_8_5_2 .dot_1 {
    transform: translate(73px, -52px);
}

.g_1_8_5_3 .dot_1 {
    transform: translate(73px, -52px);
}

.g_1_8 .position-last {
    transform: translate(74px, -52px);
}

.g_1_8_l_10 .position-last {
    transform: translate(0, -52px);
}

.g_1_8_l_11 .position-last {
    transform: translate(110px, -52px);
}

.g_1_8_l_12 .position-last {
    transform: translate(74px, -52px);
}

.g_1_8_l_13 .position-last {
    transform: translate(0, -52px);
}

.pulse {
    animation: puls 2s forwards;
}

.g-2-u-4-1-L-2 .position-last {
    transform: translate(0px, -52px);
}

.g-2-u-4-1-L-3 .position-last {
    transform: translate(38px, -88px);
}

.g-2-u-4-1-L-4 .position-last {
    transform: translate(109px, -88px);
}

.g-2-u-4-1-L-5 .position-last {
    transform: translate(145px, -88px);
}

.g-2-u-4-1-L-6 .skill-test-answer-input {
    width: 50px;
    margin-left: 10px;
}

.g-2-u-4-1-L-7 .skill-test-answer-input {
    width: 50px;
    margin-left: 10px;
}

.g-2-u-4-1-L-6 .position-last {
    transform: translate(74px, -52px);
}

.g-2-u-4-1-L-7 .position-last {
    transform: translate(147px, -52px);
}

.g-2-u-4-1-L-1 .move-from:nth-child(3) .position-last,
.g-2-u-4-1-L-1 .move-from:nth-child(4) .position-last {
    transform: translate(37px, -53px);
}

.g-2-u-4-1-L-2 .move-from:nth-child(6) .position-last,
.g-2-u-4-1-L-2 .move-from:nth-child(7) .position-last {
    transform: translate(110px, -88px);
}

.g-2-u-4-1-L-4 .move-from:nth-child(4) .position-last,
.g-2-u-4-1-L-4 .move-from:nth-child(5) .position-last {
    transform: translate(0, -53px);
}

.g-2-u-4-1-L-6 .move-from:nth-child(1) .position-last,
.g-2-u-4-1-L-6 .move-from:nth-child(2) .position-last {
    transform: translate(110px, -52px);
}

.g-2-u-4-1-L-6 .move-from:nth-child(5) .position-last {
    transform: translate(0, -53px);
}

.g-2-u-4-1-L-6 .move-from:nth-child(6) .position-last {
    transform: translate(110px, -89px);
}

.g-2-u-4-1-L-7 .move-from:nth-child(7) .position-last,
.g-2-u-4-1-L-7 .move-from:nth-child(8) .position-last {
    transform: translate(74px, -89px);
}

.g-2-u-4-1-L-8 .move-from:nth-child(3) .position-last,
.g-2-u-4-1-L-8 .move-from:nth-child(4) .position-last {
    transform: translate(38px, -52px);
}

.skill-test--question-media.coloring.prek-l7-u9 {
    max-width: 100%;
}

.prek-l7-u9 svg {
    max-height: 75px;
    width: auto;
}

.prek-l7-u9 .svg-caption.font-size-m {
    font-size: 16px !important;
    font-weight: bold;
}

.card-gpre-k-new-l9-u1 .dropped,
.card-gpre-k-new-l9-u2 .dropped,
.card-gpre-k-new-l9-u4 .dropped,
.card-gpre-k-new-l10-u1 .dropped {
    height: 68px;
    max-height: 68px;
    width: 68px;
    max-width: 68px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.card-gpre-k-new-l9-u1 .dropped img,
.card-gpre-k-new-l9-u2 .dropped img,
.card-gpre-k-new-l9-u4 .dropped img,
.card-gpre-k-new-l10-u1 .dropped img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.card-gpre-k-new-l11-u2 .ten-frames .generic-table tr td {
    padding: 2px;
}

.card-gpre-k-new-l10-u4 .item-dragable .ui-state-default,
.card-gpre-k-new-l11-u2 .item-dragable .ui-state-default {
    width: 70px;
    height: 70px;
}

.card-gpre-k-new-l11-u1 .click-n-move__takeaway .cube-group {
    background: white;
}

.card-gpre-k-new-l11-u2 .dropavil.sortable-items {
    border: 2px dashed #e5e1e1;
    background-color: #f6f4f4;
    height: 70px;
    width: fit-content;
    min-width: 70px;
    margin: 30px auto 0;
}

.card-gpre-k-new-l11-u2 .dropavil.sortable-items,
.card-gpre-k-new-l11-u2 .dropable-items .ui-state-default {
    max-width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.card-gpre-k-new-l11-u2 .skill-test--question-media {
    row-gap: 5px;
}

.card-gpre-k-new-l11-u2 .ten-frames .generic-table tr td .dropable-items {
    max-height: 75px;
    overflow: hidden;
}

.card-gpre-k-new-l17-u1 .img-has-caption .img-caption,
.card-gpre-k-new-l17-u2 .img-has-caption .img-caption,
.card-gpre-k-new-l17-u3 .img-has-caption .img-caption,
.card-gpre-k-new-l17-u4 .img-has-caption .img-caption {
    display: block;
    text-align: center;
    font-weight: bold;
}

.card-gpre-k-new-l17-u7 .skill-test--question-media {
    row-gap: 25px;
    column-gap: 5px;
}

.card-gpre-k-new-l17-u7 .skill-test--question-media img {
    margin: 0;
}

.card-gk-new-l7-u3 .g-2-u-8-1-L-1 tr td input.skill-test-answer-input {
    border: 2px solid blue;
    border-radius: 50%;
}

.card-gk-new-l9-u7 .gk-l2-u5 .single-target,
.card-gk-new-l9-u7 .single-target {
    border: 2px dashed green;
    background-color: white;
}

.card-gk-new-l10-u1 .group-k-10-1 {
    padding: 5px;
    border: 2px dashed green;
    border-radius: 5px;
    margin-bottom: 10px;
    display: flex;
}

.card-gk-new-l10-u5 .el_draggable {
    height: 75px;
    width: fit-content;
}

.card-gk-new-l10-u5 .el_draggable img {
    height: 100%;
    width: auto;
    max-width: 150px;
}

.card-gk-new-l11-u4 .skill-test--question-media {
    row-gap: 10px;
}

.card-gk-new-l11-u4 .with-right-image {
    max-width: 250px;
}

.card-gk-new-l11-u4 .skill-test--question-media {
    margin: 0;
}

.card-gk-new-l11-u4 .qsn-row-ans {
    margin-right: -90px;
}

.card-gk-new-l11-u4 .qsn-row-ans input.skill-test-answer-input {
    text-align: center;
}

.card-gk-new-l13-u2 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
    height: auto;
}

.card-gk-new-l13-u2 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin: 0;
}

.card-gk-new-l13-u2 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 45px;
    text-align: center;
}

.card-gk-new-l13-u2 .qsn-vertical-set-wrap .qsn-row-ans input.skill-test-answer-input {
    text-align: center;
}

.card-gk-new-l15-u7 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
    height: auto;
}

.card-gk-new-l15-u7 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin-left: 0px;
}

.card-gk-new-l15-u7 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 45px;
    text-align: center;
}

.card-gk-new-l15-u7 .qsn-vertical-set-wrap .qsn-row-ans input.skill-test-answer-input {
    text-align: center;
}

.card-gk-new-l17-u3 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
    height: auto;
}

.card-gk-new-l17-u3 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin-left: 0px;
}

.card-gk-new-l17-u3 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 45px;
    text-align: center;
}

.card-gk-new-l17-u3 .qsn-vertical-set-wrap .qsn-row-ans input.skill-test-answer-input {
    text-align: center;
}

.card-gk-new-l20-u1 .el_dropable .dropped {
    margin-bottom: 0;
}

.card-gk-new-l20-u2 .el_dropable .dropped {
    margin-bottom: 0;
}

.card-gk-new-l20-u4 .el_dropable .dropped {
    margin-bottom: 0;
}

.card-gk-new-l20-u6 .img-has-caption .img-caption {
    display: block;
    text-align: center;
    font-weight: bold;
}

.card-gk-new-l20-u7 .img-has-caption .img-caption {
    display: block;
    text-align: center;
    font-weight: bold;
}

.card-gk-new-l14-u5 .drop-target {
    min-height: 100px;
}

.card-gk-new-l14-u5 .k-l15-u5-s5 .drop-target {
    min-height: 185px;
}

.card-gk-new-l14-u5 .k-l15-u5-s10 .drop-target {
    min-height: 230px;
}

.card-gk-new-l20-u9 .img-has-caption .img-caption {
    display: block;
    text-align: center;
    font-weight: bold;
}

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

    50% {
        transform: scale(2.5);
        box-shadow: rgba(0, 0, 0, 0.24);
    }

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

.boxed-digit {
    border: 1px solid #9f9f9f;
    border-radius: 4px;
    padding: 5px 10px;
}

table.g-2-u-8-1-L-1,
table.g-2-u-8-1-L-1 tr,
table.g-2-u-8-1-L-1 td,
table.borderless-td-with-input,
table.borderless-td-with-input tr,
table.borderless-td-with-input td {
    border: 1px solid #959595;
    border-radius: 5px;
    margin: 0 auto;
}

table.borderless-td-with-input td,
table.g-2-u-8-1-L-1 td {
    width: 70px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
}

table.borderless-td-with-input input,
table.g-2-u-8-1-L-1 input {
    border: none;
}

.col-5-with-sign-img .skill-test--question-media>span {
    display: flex;
}

.col-5-with-sign-img .skill-test--question-media>span>span {
    display: block;
}

.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(2),
.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(4) {
    display: inline-flex;
    flex-direction: column;
    min-width: 60px;
}

.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(2) span,
.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(4) span {
    font-size: 18px;
    font-weight: 700;
}

.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(2)>span:first-child,
.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(4)>span:first-child {
    margin-top: 50px;
}

.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(2)>span:last-child,
.col-5-with-sign-img .skill-test--question-media>span>span:nth-child(4)>span:last-child {
    margin-top: auto;
}

.col-5-with-sign-img .skill-test--question-media>span>span input.skill-test-answer-input {
    max-width: 58px;
    font-size: 28px;
    text-align: center;
    padding: 0 8px;
}

.img-sign-input .skill-test-answer-input {
    margin-top: -40px;
    margin-left: 15px;
    vertical-align: top;
}

.qsn-vertical-set.with-right-image input.skill-test-answer-input {
    margin-left: 0;
}

.with-right-image .qsn-row {
    display: block;
    text-align: right;
    width: 100%;
    margin-bottom: 15px;
    font-weight: 800;
    font-size: 28px;
}

.with-right-image .skill-test--question-media.media-width-175 img {
    margin: 0;
    width: 60px;
    height: auto;
}

.with-right-image {
    max-width: 158px;
}

.with-right-image .qsn-row>span {
    height: 60px;
    width: 60px;
}

.qsn-vertical-set.with-left-image input.skill-test-answer-input {
    margin-left: 0;
}

.with-left-image .qsn-row {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    font-weight: 800;
    font-size: 28px;
    align-items: center;
    justify-content: flex-end;
}

.with-left-image .skill-test--question-media.media-width-175 img {
    margin: 0;
    width: 60px;
    height: auto;
}

.with-left-image {
    max-width: 158px;
}

.with-left-image .qsn-row>span {
    height: 60px;
    width: 60px;
    margin-left: 0;
    margin-right: auto;
}

.l_252-u_1557 .skill-test--question-media.coin-options {
    row-gap: 25px;
}

.l_246-u_1634 .question-title h4 img {
    margin: 0;
}

/* =================== */

.addition-with-number span.small-character {
    color: rgba(0, 0, 0, 0.68);
}

.card-gk-new-l13-u3 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-gk-new-l13-u3 table td .drop-target img,
.card-gk-new-l13-u3 table td img {
    margin: 0;
}

.card-gk-new-l14-u2 .el_dropable {
    min-height: 200px;
    border: 2px dashed green;
    border-radius: 5px;
    background-color: white;
}

.card-gk-new-l14-u2 .el_dropable .drop-target {
    min-height: 200px;
    height: 100%;
}

.card-gk-new-l13-u2 .dropped>img {
    height: 90px;
}

.card-gk-new-l14-u3 .el_dropable {
    min-height: 200px;
    border: 2px dashed green;
    border-radius: 5px;
    background-color: white;
}

.card-gk-new-l14-u3 .el_dropable .drop-target {
    min-height: 200px;
    height: 100%;
}

.card-gk-new-l15-u2 .click-to-takeway-icon-wrap span {
    width: 300px;
    display: inline-block;
    text-align: left;
    margin-left: 20px;
    vertical-align: middle;
}

.card-gk-new-l15-u2 .delete-icon.click-to-take-away {
    border-radius: 3px;
    display: inline-block;
    border: 1px solid blue;
    text-align: left;
    padding: 5px;
}

.card-gk-new-l15-u2 .take-away-images.min-h-200 {
    min-height: 200px;
}

.card-gk-new-l2-u2 table tr td.active-td {
    background: rgb(64 94 255 / 13%) !important;
}

.card-gk-new-l2-u2 table tr td.active-td {
    position: relative;
}

.card-gk-new-l2-u2 table tr td.active-td:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    /* Diameter of the dot */
    height: 40px;
    /* Diameter of the dot */
    background-color: red;
    /* Color of the dot */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.card-gk-new-l2-u2 .gk-l2-u2-s2 table tr td.active-td:after {
    background-color: green;
}

.card-gk-new-l2-u2 .gk-l2-u2-s3 table tr td.active-td:after {
    background-color: blue;
}

.card-gk-new-l2-u2 .gk-l2-u2-s4 table tr td.active-td:after {
    background-color: #00aedb;
}

.card-gk-new-l2-u2 .gk-l2-u2-s5 table tr td.active-td:after {
    background-color: #f37735;
}

.card-gk-new-l2-u2 .gk-l2-u2-s6 table tr td.active-td:after {
    background-color: #d11141;
}

.card-gk-new-l2-u2 .gk-l2-u2-s7 table tr td.active-td:after {
    background-color: #faa13b;
}

.card-gk-new-l2-u2 .gk-l2-u2-s8 table tr td.active-td:after {
    background-color: #009f75;
}

.card-gk-new-l2-u2 .gk-l2-u2-s9 table tr td.active-td:after {
    background-color: #82c341;
}

.card-gk-new-l2-u2 .gk-l2-u2-s10 table tr td.active-td:after {
    background-color: #88c6ed;
}

.card-gk-new-l2-u2 .gk-l2-u2-s11 table tr td.active-td:after {
    background-color: #d54769;
}

.card-gk-new-l2-u2 .gk-l2-u2-s12 table tr td.active-td:after {
    background-color: #ffc425;
}

.card-gk-new-l2-u2 .gk-l2-u2-s13 table tr td.active-td:after {
    background-color: #00a6ff;
}

.card-gk-new-l2-u2 .gk-l2-u2-s14 table tr td.active-td:after {
    background-color: #00ff1e;
}

.card-gk-new-l21-u5 .answer-set .answer-set__option {
    padding: 10px;
}

.card-gk-new-l11-u4 .with-right-image .qsn-row>span>img,
.card-gk-new-l11-u4 .with-left-image .qsn-row>span>img {
    max-height: 35px;
    max-width: 300px;
    margin: 0 5px 0;
    width: auto;
}

.card-gk-new-l22-u5 .skill-test--question-media.bordered-media img {
    border-color: transparent;
}

.card-gk-new-l22-u5 .skill-test--question-media.bordered-media img.group.selected {
    border-color: #f6b53f;
}

.card-gk-new-l22-u6 .skill-test--question-media.bordered-media img {
    border-color: transparent;
}

.card-gk-new-l22-u6 .skill-test--question-media.bordered-media img.group.selected {
    border-color: #f6b53f;
}

.card-gk-new-l22-u7 .skill-test--question-media.bordered-media img {
    border-color: transparent;
}

.card-gk-new-l22-u7 .skill-test--question-media.bordered-media img.group.selected {
    border-color: #f6b53f;
}

.card-gk-new-l22-u8 .skill-test--question-media.bordered-media img {
    border-color: transparent;
}

.card-gk-new-l22-u8 .skill-test--question-media.bordered-media img.group.selected {
    border-color: #f6b53f;
}

.l_10-u_116 .skill-test--question-media img.group {
    border-color: transparent;
}

.l_10-u_116 .skill-test--question-media img.group.selected {
    border-color: #f6b53f;
}

.l_10-u_117 .skill-test--question-media img,
.l_10-u_117 .skill-test--question-media.bordered-media img {
    border-color: transparent;
}

.l_10-u_117 .skill-test--question-media img.selected,
.l_10-u_117 .skill-test--question-media.bordered-media img.selected {
    border-color: #f6b53f;
}

.l_10-u_117 .skill-test--question-media {
    max-width: 800px;
}

.l_10-u_121 .skill-test--question-media.bordered-media img,
.l_10-u_122 .skill-test--question-media.bordered-media img {
    border-color: transparent;
}

.l_10-u_121 .skill-test--question-media.bordered-media img.selected,
.l_10-u_122 .skill-test--question-media.bordered-media img.selected {
    border-color: #f6b53f;
}

.card-gpre-k-new-l2-u5 .answer-set .answer-set__option {
    border: solid 2px #5e79d6;
    width: fit-content;
    padding: 20px 40px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    min-width: 75px;
    display: inline-block;
    font-weight: 700;
    font-size: 40px;
    color: rgba(0, 0, 0, 0.68);
}

.card-gpre-k-new-l3-u5 table.g-2-u-8-1-L-1 td,
.card-gpre-k-new-l3-u6 table.g-2-u-8-1-L-1 td,
.card-gk-new-l1-u10 table.g-2-u-8-1-L-1.mt-20 td,
.card-gk-new-l2-u7 table.g-2-u-8-1-L-1.gk-l2-u7 td,
.card-gk-new-l3-u3 table.g-2-u-8-1-L-1 td,
.card-gk-new-l3-u7 table.g-2-u-8-1-L-1 td {
    width: 100px;
    height: 75px;
}

.pre-k-l3-u7 .single-target,
.card-gpre-k-new-l6-u9 .single-target {
    border: 2px dashed green !important;
    background-color: #e4f7fb !important;
    width: 350px !important;
    margin: 0 auto;
    height: 125px !important;
    padding: 9px;
    border-radius: 6px;
}

.card-gpre-k-new-l4-u4 .answer-set .answer-set__option,
.card-gpre-k-new-l4-u5 .answer-set .answer-set__option,
.card-gpre-k-new-l5-u3 .answer-set .answer-set__option {
    border: solid 2px #5e79d6;
    width: fit-content;
    padding: 8px 20px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    min-width: 60px;
    display: inline-block;
    font-weight: 700;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.68);
}

.l_256-u_1783 .answer-set .answer-set__option.selected,
.l_256-u_1784 .answer-set .answer-set__option.selected,
.l_257-u_1889 .answer-set .answer-set__option.selected {
    border: 2px solid #e0d14f;
    background-color: #f7e33466;
}

.card-gpre-k-new-l11-u6 .answer-set-inline-entry>span,
.answer-set-inline-entry>div>span,
.card-gpre-k-new-l11-u5 .answer-set-inline-entry>span,
.answer-set-inline-entry>div>span,
.card-gpre-k-new-l10-u6 .answer-set-inline-entry>span,
.answer-set-inline-entry>div>span {
    font-size: 45px;
}

.l_5-u_34 .answer-set-inline-entry>div>span,
.l_5-u_35 .answer-set-inline-entry>div>span,
.l_5-u_38 .answer-set-inline-entry>div>span,
.l_6-u_40 .answer-set-inline-entry>div>span,
.l_6-u_41 .answer-set-inline-entry>div>span,
.l_6-u_42 .answer-set-inline-entry>div>span,
.l_7-u_56 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.card-g1-l5-u1 .captioned-box .tiny-col,
.card-g1-l5-u2 .captioned-box .tiny-col,
.l_5-u_38 .captioned-box .tiny-col,
.l_6-u_40 .captioned-box .tiny-col,
.l_6-u_41 .captioned-box .tiny-col,
.l_6-u_42 .captioned-box .tiny-col,
.l_6-u_45 .captioned-box .tiny-col,
.l_7-u_56 .captioned-box .tiny-col {
    margin-top: 5px;
}

.card-gpre-k-new-l11-u6 .answer-set__hint-inline-entry input,
input.skill-test-answer-input,
.card-gpre-k-new-l11-u5 .answer-set__hint-inline-entry input,
input.skill-test-answer-input,
.card-gpre-k-new-l10-u6 .answer-set__hint-inline-entry input,
input.skill-test-answer-input {
    height: 45px !important;
    font-size: 45px !important;
}

.card-gpre-k-new-l5-u7 .dropvail-withbg,
.card-gpre-k-new-l5-u6 .dropvail-withbg {
    height: 350px;
    width: 600px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card-gpre-k-new-l5-u7 .dropvail-withbg.dropable-items .ui-state-default,
.card-gpre-k-new-l5-u6 .dropvail-withbg.dropable-items .ui-state-default {
    width: 75px;
}

.card-gpre-k-new-l5-u7 dropvail-withbg.dropable-items .ui-state-default img,
.card-gpre-k-new-l5-u6 .dropvail-withbg.dropable-items .ui-state-default img {
    max-width: 75px;
    height: auto;
}

.card-gpre-k-new-l5-u7 .sortable-items.dropvail-source,
.card-gpre-k-new-l5-u6 .sortable-items.dropvail-source {
    min-height: 75px;
    margin-top: 30px;
    width: 600px;
    background-color: #e4f7fb;
}

.g-2-u-8-1-L-1.gk-l7-u3-l0_fs tr td input.skill-test-answer-input {
    font-size: 18px !important;
}

/* .card-gpre-k-new-l5-u6 #draggable{
  width:auto;
  min-width:500px;
  padding:20px 40px;
  background:#e4f7fb;
} */

/** kindergarten added */

.l_226-u_1587.card-gk-new-l2-u5 .single-target {
    border: 2px dashed green !important;
    background-color: #e4f7fb !important;
    width: 385px !important;
    margin: 0 auto;
    min-height: 175px !important;
    padding: 9px;
    border-radius: 6px;
}

.l_226-u_1587.card-gk-new-l2-u5 .drop-target {
    min-height: 175px;
}

.card-gk-new-l5-u2 .btn-gery,
.card-gk-new-l5-u3 .btn-gery,
.l_248-u_1596 .btn-gery {
    cursor: pointer;
    min-width: 115px;
    display: inline-block;
    font-weight: 900;
    font-size: 50px;
    flex: 0;
    height: 75px;
    display: inline-block;
    line-height: 66px;
    box-shadow: #c1cfff 2px 4px 0;
    color: #7370e6;
}

.l_234-u_1735 .skill-test--question-media .dropped img,
.skill-test--question-media .dropped svg {
    max-width: 60px;
}

.as-e-info {
    font-weight: normal;
    font-size: 16px;
}

.l_240-u_1689 .single-target {
    border: 2px dashed green !important;
    background-color: #e4f7fb !important;
    width: 100%;
    margin: 0 auto;
    min-height: 150px !important;
    padding: 9px;
    border-radius: 6px;
    padding: 0;
}

.l_240-u_1689 .gk-l16-u5 .drop-target {
    height: 100%;
    min-height: 145px;
    padding: 10px;
}

.l_244-u_1652 .el_dropable .dropped {
    margin-bottom: 0;
}

.l_238-u_1640 .col1.figure img {
    border: 2px dashed green;
    border-radius: 4px;
    height: 200px;
    width: auto;
}

.l_238-u_1640 .el_dropable {
    width: 220px;
}

.l_238-u_1640 .single-target img {
    width: 56px;
    height: auto;
}

.l_238-u_1641 .col1.figure img {
    border: 2px dashed green;
    border-radius: 4px;
    height: 200px;
    width: auto;
}

.l_238-u_1641 .single-target img {
    width: 56px;
    height: auto;
}

.l_236-u_1713 .col.symbol span {
    font-size: 22px;
    font-weight: bold;
}

.l_239-u_1671 .click-n-move__takeaway .cube-group {
    border: 2px dashed green;
    background-color: #dfedf3;
}

.et-1592 {
    font-size: 18px;
    margin: 25px 0;
}

.l_7-u_53 .g-1__l7-1 table {
    width: 425px;
}

.l_7-u_53 td {
    position: relative;
}

.l_7-u_53 td.colored::after,
.l_7-u_53 td.colored-alt::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    /* Diameter of the dot */
    height: 25px;
    /* Diameter of the dot */
    background-color: red;
    /* Color of the dot */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.l_7-u_53 .g-1__l7-1-2 td.colored::after {
    background-color: blue;
}

.l_7-u_53 .g-1__l7-1-3 td.colored::after {
    background-color: green;
}

.l_7-u_53 .g-1__l7-1-4 td.colored::after {
    background-color: yellowgreen;
}

.l_7-u_53 .g-1__l7-1-5 td.colored::after {
    background-color: purple;
}

.l_7-u_53 .g-1__l7-1-6 td.colored::after {
    background-color: orange;
}

.l_7-u_53 .g-1__l7-1-7 td.colored::after {
    background-color: magenta;
}

.l_7-u_53 .g-1__l7-1-8 td.colored::after {
    background-color: #673ab7;
}

.l_7-u_53 .g-1__l7-1-9 td.colored-alt::after {
    background-color: purple;
}

.l_7-u_53 .g-1__l7-1-9 td.colored::after {
    background-color: #ff9800;
}

.l_7-u_53 .g-1__l7-1-10 td.colored-alt::after {
    background-color: yellowgreen;
}

.l_7-u_53 .g-1__l7-1-10 td.colored::after {
    background-color: #009688;
}

.l_7-u_53 .g-1__l7-1-11 td.colored-alt::after {
    background-color: #673ab7;
}

.l_7-u_53 .g-1__l7-1-11 td.colored::after {
    background-color: greenyellow;
}

.l_7-u_53 .g-1__l7-1-12 td.colored-alt::after {
    background-color: orange;
}

.l_7-u_53 .g-1__l7-1-12 td.colored::after {
    background-color: magenta;
}

/* Global input font size and padding ====================================== */

.answer-set__hint-inline-entry input,
input.skill-test-answer-input {
    height: 40px !important;
    font-weight: 400 !important;
    font-family: inherit;
    font-size: 20px !important;
    /* min-width: 60px; */
    min-width: 40px !important;
    padding: 5px;
    text-align: center;
    color: #138697;
    border-radius: 8px;
    background-color: #fff;
    filter: drop-shadow(3px 3px 0px #00000025);
    border: none;
    outline: none;
    background-image: linear-gradient(to bottom,
            #fff calc(100% - 7px),
            #138697 calc(100% - 7px),
            #138697 calc(100% - 5px),
            #fff calc(100% - 5px));
    background-size: 75% 100%;
    /* 10% width, full height */
    background-position: center bottom;
    /* Center horizontally */
    background-repeat: no-repeat;
}

.input-box-alignment {
    height: 40px !important;
    font-weight: 400 !important;
    font-family: inherit;
    font-size: 20px !important;
    /* min-width: 60px; */
    min-width: 50px !important;
    padding: 5px;
    text-align: center;
    color: #138697;
    border-radius: 8px;
    background-color: #fff;
    filter: drop-shadow(3px 3px 0px #00000025);
    border: none;
    outline: none;
    background-image: linear-gradient(to bottom,
            #fff calc(100% - 7px),
            #138697 calc(100% - 7px),
            #138697 calc(100% - 5px),
            #fff calc(100% - 5px));
    background-size: 75% 100%;
    /* 10% width, full height */
    background-position: center bottom;
    /* Center horizontally */
    background-repeat: no-repeat;
}

input.skill-test-answer-input:hover {
    background-image: linear-gradient(to bottom,
            #fff calc(100% - 7px),
            #138697 calc(100% - 7px),
            #138697 calc(100% - 5px),
            #fff calc(100% - 5px));
    background-size: 75% 100%;
    /* 10% width, full height */
    background-position: center bottom;
    /* Center horizontally */
    background-repeat: no-repeat;
}

/* Answer template inline break style ============= */
.inline-break .underlined .skill-test-answer-input {
    border: none;
    border-bottom: solid 2px rgba(0, 0, 0, 0.68);
    border-radius: 0;
}

.inline-break .underlined .skill-test-answer-input:focus {
    border: none;
    border-bottom: #0037ff solid 1px;
    outline: none;
}

.inline-break {
    display: block;
}

.inline-break>div {
    margin-bottom: 24px;
}

.inline-break input.skill-test-answer-input {
    width: 48px;
    margin: 0;
}

/* Answer template inline break  Style ends============= */

/* vertical answer set style ========== */
.qsn-vertical-set .qsn-row-ans {
    width: 100%;
    border-top: solid 2px rgba(0, 0, 0, 0.48);
    padding-top: 15px;
}

.qsn-vertical-set .qsn-row-ans .skill-test-answer-input {
    width: 100%;
    max-width: 100%;
    text-align: right;
    /* padding-right: 20px !important; */
}

.with-right-image .qsn-row,
.with-left-image .qsn-row {
    position: relative;
}

.with-right-image .qsn-row>span {
    position: absolute;
    top: 0;
    right: -68px;
}

.with-left-image .qsn-row>span {
    position: absolute;
    top: 0;
    left: -68px;
}

.with-right-image .qsn-row>span>img,
.with-left-image .qsn-row>span>img {
    max-width: 48px;
}

.with-right-image .skill-test--question-media,
.with-left-image .skill-test--question-media {
    max-width: 100px;
}

.card-g1-l23-u1 .qsn-row-ans {
    margin-left: 50px;
}

.card-g1-l23-u1 .qsn-row-ans .skill-test-answer-input {
    text-align: center;
}

.card-g1-l23-u2 .qsn-row-ans {
    margin-left: 50px;
}

.card-g1-l23-u2 .qsn-row-ans .skill-test-answer-input {
    text-align: center;
}

.card-g1-l24-u3 .skill-test--ans .semi-align-right {
    width: 400px;
    text-align: right;
    margin: 25px auto 0;
}

.card-g1-l24-u3 .semi-align-right .answer-set-inline-entry {
    justify-content: right;
}

.card-g1-l24-u3 .skill-test--card-body {
    min-height: auto;
    padding: 0;
}

.card-gpre-k-new-l12-u8 .click-n-move__takeaway .cube-group {
    background-color: white;
}

.l_2-u_10 .question-title .font-size-m {
    font-size: 60px !important;
    font-weight: bold;
    color: orange;
}

.l_2-u_11 .answer-set__hint,
.l_2-u_12 .answer-set__hint {
    font-size: 40px;
    font-weight: bold;
}

.l_3-u_22 .skill-test--question-media {
    max-width: 725px;
}

.l_3-u_26 .answer-set__hint {
    font-size: 30px;
}

.l_4-u_31 .qsn-vertical-set>span {
    font-size: 30px;
}

.l_5-u_35 .answer-set-inline-entry span {
    font-size: 30px;
}

.l_5-u_37 .answer-set-inline-entry span {
    font-size: 30px;
}

.l_6-u_40 .skill-test--ans {
    margin-top: 0;
}

.l_6-u_40 .question-title,
.l_6-u_45 .question-title {
    margin-bottom: 0;
}

.l_8-u_71 .answer-set__hint-inline-entry {
    font-size: 30px;
}

.l_8-u_72 .qsn-vertical-set>span.qsn-row {
    font-size: 30px;
}

.l_8-u_73 .answer-set__hint-inline-entry {
    font-size: 30px;
}

.l_19-u_402 .skill-test--question-media.singlecol {
    row-gap: 0;
}

.l_19-u_402 .skill-test--question-media.singlecol>span {
    flex-grow: 1;
    width: 100%;
}

.l_19-u_402 .skill-test--question-media.singlecol>span>img {
    width: auto;
    padding: 20px;
}

.patterns-problems.dnd-sum-1.gpk-l9-u2-l2 .fix-img-area img,
.patterns-problems.dnd-sum-1.gpk-l9-u2-l2 .dropped img,
.patterns-problems.dnd-sum-1.gpk-l9-u1-l1 .fix-img-area img,
.patterns-problems.dnd-sum-1.gpk-l9-u1-l1 .dropped img,
.patterns-problems.dnd-sum-1.gpk-l9-u1-l5 .fix-img-area img,
.patterns-problems.dnd-sum-1.gpk-l9-u1-l5 .dropped img,
.patterns-problems.dnd-sum-1.gpk-l9-u1-l6 .fix-img-area img,
.patterns-problems.dnd-sum-1.gpk-l9-u1-l6 .dropped img {
    max-height: 68px;
}

.db {
    display: block;
}

.flx-0 {
    flex: 0;
}

.tiny-col {
    max-width: 20px;
    min-width: 15px;
}

.font-size-xl {
    font-size: 38px !important;
}

.font-size-l {
    font-size: 30px !important;
}

.font-size-m {
    font-size: 26px !important;
}

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

.font-size-s {
    font-size: 16px !important;
}

.font-size-xs {
    font-size: 14px !important;
}

.no-margin {
    margin: 0 !important;
}

.mlr-auto {
    margin-left: auto;
    margin-right: auto;
}

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

.m-0 {
    margin: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-35 {
    margin-bottom: 35px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-45 {
    margin-bottom: 45px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-35 {
    margin-top: 35px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-45 {
    margin-top: 45px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-25 {
    margin-right: 25px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.mr-35 {
    margin-right: 35px !important;
}

.mr-40 {
    margin-right: 40px !important;
}

.mr-45 {
    margin-right: 45px !important;
}

.mr-50 {
    margin-right: 50px !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-25 {
    margin-left: 25px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.ml-35 {
    margin-left: 35px !important;
}

.ml-40 {
    margin-left: 40px !important;
}

.ml-45 {
    margin-left: 45px !important;
}

.ml-50 {
    margin-left: 50px !important;
}

.long-input-60 {
    width: 60px !important;
    max-width: 60px !important;
}

.long-input-70,
.answer-set__hint-inline-entry input.long-input-70,
input.skill-test-answer-input.long-input-70 {
    width: 70px !important;
    max-width: 70px !important;
}

.long-input-80,
.answer-set__hint-inline-entry input.long-input-80,
input.skill-test-answer-input.long-input-80 {
    width: 80px !important;
    max-width: 80px !important;
}

.long-input-90,
.answer-set__hint-inline-entry input.long-input-90,
input.skill-test-answer-input.long-input-90 {
    width: 90px !important;
    max-width: 90px !important;
}

.long-input-100,
.answer-set__hint-inline-entry input.long-input-100,
input.skill-test-answer-input.long-input-100 {
    width: 100px !important;
    max-width: 100px !important;
}

.long-input-110 {
    width: 110px !important;
    max-width: 110px !important;
}

.long-input-120 {
    width: 120px !important;
    max-width: 120px !important;
}

.long-input-130 {
    width: 130px !important;
    max-width: 130px !important;
}

.long-input-140 {
    width: 140px !important;
    max-width: 140px !important;
}

.long-input-150 {
    width: 150px !important;
    max-width: 150px !important;
}

.long-input-180 {
    width: 180px !important;
    max-width: 180px !important;
}

.long-input-200 {
    width: 200px !important;
    max-width: 200px !important;
}

.long-input-250 {
    width: 250px !important;
    max-width: 250px !important;
}

.long-input-280 {
    width: 280px !important;
    max-width: 280px !important;
}

.input-width-50 {
    width: 50px !important;
    max-width: 50px !important;
}

/* Captioned box answer template style ===================*/
.captioned-box>span {
    display: inline-block;
    text-align: center;
    width: auto;
    margin: 0 10px;
    flex: 1;
}

.captioned-box>span>span {
    display: block;
}

.captioned-box>span .image-count {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.68);
    line-height: 1.2;
}

.boxed-digit {
    font-weight: 800;
    font-size: 20px;
}

.captioned-box>span>span:first-child {
    margin-bottom: 10px;
}

.captioned-box>span>span.boxed-digit {
    height: 40px;
    margin-bottom: 10px;
    line-height: 28px;
    max-width: 50px;
    margin: 0 auto 10px;
}

.captioned-box>span>span .skill-test-answer-input {
    padding: 5px;
    font-size: 24px;
    height: 100%;
    text-align: center;
    margin: 0;
}

.captioned-box .tiny-col {
    margin-top: 10px;
}

/* Inline small image in question text */
.skill-test--question-media.inline-image h4>img {
    width: auto;
    height: 36px;
    margin: 0 5px;
    border: solid 1px rgba(0, 0, 0, 0.48);
    padding: 4px;
    margin-bottom: 5px;
}

/* Inline figure solution style template ============== */
.inline-figure-solution {
    margin-bottom: 30px;
}

.inline-figure-solution .skill-test--question-media>span {
    position: relative;
    margin: 0 10px;
}

.inline-figure-solution .skill-test--question-media>span>img {
    margin: 0;
}

.inline-figure-solution .skill-test--question-media span {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

.inline-figure-solution .answer-set__hint-inline-entry {
    margin-left: 15px;
}

.inline-figure-solution .image-count {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

.inline-figure-solution.align-item-base .skill-test--question-media {
    align-items: flex-end;
}

.inline-figure-solution .skill-test--question-media:not(:last-child) {
    margin-bottom: 40px;
}

.inline-figure-solution.align-item-base .image-count {
    position: static;
    margin: 0;
    line-height: 0.9;
    margin-top: 15px;
}

.inline-figure-solution.align-item-base .skill-test--question-media>span>img {
    margin-bottom: 10px;
}

.inline-figure-solution.align-item-base .answer-set__hint-inline-entry {
    margin-left: 0;
}

.bolx-text {
    font-weight: 700 !important;
}

.txt-dark-grey {
    color: rgba(0, 0, 0, 0.68) !important;
}

/* inline image in question title */
.question-title h4 img {
    height: 35px;
    margin: 0 10px;
    border: none;
}

img.bordered {
    border: 2px solid #5e79d67d;
    border-radius: 4px;
}

.border-devider {
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid 2px rgba(0, 0, 0, 0.68);
    height: 1px;
}

.separater {
    border-top: solid 2px rgba(0, 0, 0, 0.8);
}

/* inline-media-text-field =====================================  */
.inline-media-text-field {
    max-width: 100%;
}

.inline-media-text-field .figure img {
    margin: 0;
    width: 100%;
    height: auto;
    display: block;
}

.inline-media-text-field.abs-labels-bottom {
    margin-bottom: 60px;
}

.inline-media-text-field .row {
    margin-left: -10px;
    margin-right: -10px;
}

.inline-media-text-field .row .col {
    padding: 0 10px !important;
    position: relative;
}

.inline-media-text-field .row .col.symbol {
    max-width: 30px;
}

.inline-media-text-field .row .col.symbol>span {
    font-size: 20px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.68);
}

.inline-media-text-field .row .col .label {
    display: inline-block;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: rgba(0, 0, 0, 0.68);
    margin-top: 5px;
}

.inline-media-text-field .row .col .label.abs {
    position: absolute;
    left: 0;
    width: 100%;
}

.inline-media-text-field .row>* {
    width: auto;
}

.inline-media-text-field .row .col .boxed-digit {
    display: block;
    height: 40px;
    line-height: 28px;
}

/* abacus-method ============================================= */
.abacus-method {
    max-width: 450px;
    margin: 0 auto;
    margin-top: 0px;
    border: solid 1px rgba(0, 0, 0, 0.24);
    padding: 24px 24px 34px;
    border-radius: 8px;
    margin-top: 40px;
}

.abacus-method h4 {
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.68);
    margin: 0 0 20px 0;
    text-align: left;
}

.abacus-method .row {
    margin: 0;
    align-items: center;
}

.abacus-method .row>.col {
    width: auto;
    flex: 0;
    padding: 0 10px 0 0;
}

.abacus-method .row>.col span.label,
.abacus-method .row>.col.symbol span {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.68);
    white-space: nowrap;
}

.abacus-method .row>.col.symbol span {
    font-size: 20px;
}

.inline-items:not(:last-child) {
    margin-bottom: 18px;
}

/* estimation-problems ============================================== */

/* .estimation-problems {} */

.estimation-problems .answer-set-inline-entry>span,
.estimation-problems .answer-set-inline-entry>div>span {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.68);
}

.estimation-problems .skill-test--question-media {
    align-items: center;
}

.estimation-problems .skill-test--question-media .db>div {
    font-weight: 700;
}

.estimation-problems .skill-test--question-media .db>div:not(:last-child) {
    margin-bottom: 15px;
}

.estimation-problems .answer-set__hint-inline-entry input,
input.skill-test-answer-input {
    width: 50px;
    margin: 0 5px;
}

/* 100 cols table static ==================================================================================== choose from 100 column table ==================*/
.chart-100 {
    display: flex;
    flex-wrap: wrap;
    max-width: 522px;
    margin: 0 auto;
    position: relative;
}

.chart-100:before {
    content: "";
}

.chart-100>div {
    flex: 0 0 50px;
    border: solid 1px rgba(0, 0, 0, 0.24);
    padding: 10px;
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    transition: all 0.3s ease;
    margin: 0 1px 1px;
    position: relative;
}

.chart-100>div.denote-col {
    border: solid 1px #ffaf45;
    background-color: #ffd18e;
    color: #915805;
}

.has-img-medium>img {
    height: 80px !important;
}

/*two-verticals-problem ======================================================*/
.two-verticals-problem {
    justify-content: center;
}

.two-verticals-problem .qsn-vertical-set {
    padding: 10px 20px;
    border: dashed 1px rgba(0, 0, 0, 0.24);
    margin: 10px 20px;
    min-width: 180px;
}

.two-verticals-problem .name-char {
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    text-align: center;
    width: 60px;
    margin-bottom: 10px;
    margin-left: auto;
}

/*three-digit-table ====================================================*/

.three-digit-table input.skill-test-answer-input {
    width: 45px;
}

.three-digit-table {
    width: 260px;
    margin: 10px auto 0;
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    border-right: solid 1px rgba(0, 0, 0, 0.2);
}

.three-digit-table table {
    table-layout: fixed;
    width: 100%;
}

.three-digit-table table tr td {
    font-size: 18px;
    font-weight: 800;
    padding: 5px 0;
    border-left: solid 1px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}

.two-verticals-problem.fractions-two-col .qsn-vertical-set {
    min-width: 98px;
    max-width: 98px;
}

.fractions-two-col .qsn-vertical-set>span {
    justify-content: center;
}

.generic-table {
    table-layout: fixed;
    border-left: solid 1px rgba(0, 0, 0, 0.18);
    border-bottom: solid 1px rgba(0, 0, 0, 0.18);
    width: 100%;
}

.generic-table tr td {
    border-top: solid 1px rgba(0, 0, 0, 0.18);
    border-right: solid 1px rgba(0, 0, 0, 0.18);
    padding: 8px 15px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.generic-table thead tr th,
.generic-table.vertical-view-table tr td:first-child {
    background-color: rgba(0, 0, 0, 0.06);
    font-size: 14px;
    font-weight: 800;
    border-top: solid 1px rgba(0, 0, 0, 0.18);
    border-right: solid 1px rgba(0, 0, 0, 0.18);
    padding: 8px 15px;
}

.generic-table tr td span {
    display: inline-block;
    margin: 3px;
}

.generic-table.vertical-view-table tr:first-child td:not(:first-child) {
    background-color: transparent;
}

.division-rep-subs .generic-table {
    max-width: 580px;
    margin: 0 auto;
}

.medium-text-size {
    font-size: 20px !important;
}

.table-with-figures {
    table-layout: fixed;
}

.table-with-figures tr td {
    padding: 10px;
    text-align: center;
}

.table-with-figures tr td .label {
    font-weight: 700;
    font-size: 18px;
}

/* Draggable ========================== */
.dragable-figure {
    position: relative;
    width: 100%;
    height: 160px;
}

.dragable-figure .img-holder {
    margin-bottom: 20px;
    height: 100%;
}

.rular {
    height: 50px;
}

.rular,
.fix-rular {
    cursor: move;
    display: inline-block;
    overflow: hidden;
    width: auto;
}

.dragable-img {
    cursor: move;
}

.rular {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 120px;
}

.rular img,
.fix-rular img {
    width: auto !important;
    object-fit: cover;
    height: 50px;
    object-position: 0 center;
}

.size-auto {
    height: auto !important;
    width: auto !important;
}

.boxed-digit-generic-size,
.boxed-digit {
    height: 40px;
    min-width: 50px;
    line-height: 28px !important;
    font-size: 24px !important;
}

.inline-media-text-field .row .col.symbol {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.second-line-qtn {
    display: flex;
    justify-content: center;
}

.second-line-qtn>span {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #696a6a;
}

.calendar-table table tr td {
    cursor: pointer !important;
}

.calendar-table.gk-l4-u4 td.has-input {
    padding: 0;
}

.calendar-table.gk-l4-u4 td.has-input input {
    max-width: 100%;
    margin: 0;
    outline: #0037ff solid 1px;
    background-color: #0037ff21;
    border-radius: 0;
}

.active-td {
    background: green !important;
    color: white !important;
}

.item-dragable {
    min-width: 450px;
    max-width: 650px;
    width: 640px;
}

.item-dragable .ui-state-default {
    display: inline-block;
    height: auto;
    width: 100px;
    cursor: move;
    text-align: center;
}

.sortable-items .ui-state-default img,
.dropable-items .ui-state-default img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    display: inline-block;
}

.ui-sortable-helper {
    display: inline-block;
}

.ui-sortable-placeholder {
    display: inline-block;
    background-color: #fafafa;
    visibility: visible !important;
    border: dashed 1px #58c59d68;
}

.sortable-items,
.dropable-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 125px;
}

.dropable-items {
    background-color: rgba(157, 157, 157, 0.06);
    border: dashed 2px rgba(0, 0, 0, 0.14);
}

.sortable-items.tiny-object>span,
.dropable-items.tiny-object>span {
    width: 30px;
    margin: 3px;
}

.sortable-items.small-object>span,
.dropable-items.small-object>span {
    width: 50px;
}

.sortable-items.medium-object>span,
.dropable-items.medium-object>span {
    width: 70px;
}

.sortable-items.semi-big-object>span,
.dropable-items.semi-big-object>span {
    width: 90px;
}

.ten-frames .generic-table tr td,
.g-2-u-8-1-L-1 tr td {
    padding: 10px;
    background-color: rgb(64 94 255 / 13%);
    border: solid 2px rgb(51 82 255 / 31%);
}

.ten-frames.gk-l2-u2 {
    margin-top: 45px;
}

.ten-frames.gk-l2-u2 tr td {
    width: 70px;
    height: 60px;
    cursor: pointer;
}

.g-2-u-8-1-L-1 tr td input.skill-test-answer-input {
    width: 100%;
    height: 100% !important;
    font-size: 25px !important;
    border: none;
    margin: 0;
}

.ten-frames .dropable-items,
.ten-frames .sortable-items {
    min-height: 50px;
    background-color: transparent;
    border: none;
}

.gk-l14-u2-and-u3 {
    max-width: 99%;
    width: 750px;
    margin: 0 auto;
}

.gk-l14-u2-and-u3 .row.has-figure-and-draggable {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gk-l14-u2-and-u3 .col1.figure {
    width: 30%;
    text-align: right;
    padding-bottom: 80px;
}

.gk-l14-u2-and-u3 .col2.symbol {
    width: 10%;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

.gk-l14-u2-and-u3 .col3.drag-container {
    /* padding-top: 80px; */
    width: 30%;
}

.gk-l14-u2-and-u3 .drop-target {
    text-align: left;
    min-height: 60px;
    padding: 10px;
}

.gk-l14-u2-and-u3 .el_dropable .dropped {
    display: inline-block;
    margin: 3px;
}

.gk-l14-u2-and-u3 .draggable-wrapper {
    text-align: left;
}

/* kg - lesson 16 unit 5 */
.gk-l16-u5 {
    width: 800px;
    margin: 0 auto;
}

.gk-l16-u5 .row.has-figure-and-draggable {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gk-l16-u5 {
    max-width: 99%;
    width: 775px;
    margin: 0 auto;
}

.gk-l16-u5 .row.has-figure-and-draggable {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gk-l16-u5 .col5.figure,
.gk-l16-u5 .col1.figure {
    width: 25%;
}

.gk-l16-u5 .col5.figure img,
.gk-l16-u5 .col1.figure img {
    max-width: 100%;
    width: auto;
    height: 185px;
}

.gk-l16-u5 .col4.symbol,
.gk-l16-u5 .col2.symbol {
    width: 5%;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

.gk-l16-u5 .col3.drag-container {
    padding-top: 80px;
    width: 40%;
}

.gk-l11-u1 .row.v-al-m {
    align-items: center;
}

.skill-test--question-media.gk-l11-u4a {
    row-gap: 5px;
}

.gk-l11-u4a .qsn-row-ans {
    margin-right: -15px;
}

.gk-l16-u5 .drop-target {
    text-align: left;
    min-height: 85px;
    padding: 10px;
}

.gk-l14-u4 .gk-l14-u4-has-abstext {
    position: relative;
    cursor: pointer;
}

.gk-l14-u4 .gk-l14-u4-has-abstext>span {
    border-radius: 5px;
    display: none;
    position: absolute;
    border: 2px solid #877c7c;
    height: 40px;
    width: 50px;
    background-color: #fff;
    font-size: 25px;
    font-weight: bold;
    left: 55px;
    top: 45px;
}

.gk-l14-u4.gk-l14-u4-l1 .gk-l14-u4-has-abstext>span {
    left: 95px;
    top: 40px;
}

.gk-l15-u2a .click-to-takeway-icon-wrap img {
    width: 65px;
    height: auto;
    margin: 0;
}

.gk-l15-u3 .generic-table {
    max-width: 800px;
}

.gk-l15-u3 .generic-table img {
    width: 65px;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.gk-l15-u3 .tk-delete-wrap {
    text-align: left;
    margin-top: 30px;
}

.gk-l15-u5 .tk-delete-wrap img {
    margin: 0;
    width: 35px;
    vertical-align: bottom;
    cursor: pointer;
}

.gk-l15-u5 .generic-table {
    max-width: 800px;
}

.gk-l15-u5 .generic-table img {
    width: 65px;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.gk-l15-u5 .tk-delete-wrap {
    text-align: left;
    margin-top: 30px;
}

.gk-l15-u5 .tk-delete-wrap img {
    margin: 0;
    width: 35px;
    vertical-align: bottom;
    cursor: pointer;
}

.gk-l16-u2 .take-away-images {
    display: flex;
    width: 600px;
    justify-content: center;
}

.gk-l16-u2 .click-to-takeway-icon-wrap img {
    width: 35px;
    vertical-align: bottom;
    margin: 0;
}

.gk-l17-u5 .take-away-images {
    display: flex;
    width: 600px;
    justify-content: center;
}

.gk-l17-u5 .click-to-takeway-icon-wrap img {
    width: 35px;
    vertical-align: bottom;
    margin: 0;
}

.gk-l18-u1 .take-away-images {
    display: flex;
    width: 600px;
    justify-content: center;
}

.gk-l18-u1 .click-to-takeway-icon-wrap img {
    width: 35px;
    vertical-align: bottom;
    margin: 0;
}

.gk-l16-u5 .dropped>img {
    height: 60px;
}

.gk-l16-u5 .el_dropable .dropped {
    display: inline-block;
    margin: 3px;
}

.gk-l16-u5 .draggable-wrapper {
    text-align: left;
}

.row.v-al-m {
    align-items: center;
}

.v-al-m.gk-l19-u1 {
    align-items: center;
}

.v-al-m.gk-l19-u1 .col.symbol>span {
    font-size: 28px;
    color: rgba(0, 0, 0, 0.68);
}

/* used in 20.1, 20.2, 20.3 and 20.4 */
.gk-l20-u1 .multi-col>div.drop-target,
.el_dropable .fix-img-area {
    height: 68px;
    max-height: 68px;
    width: 68px;
    max-width: 68px;
    background-color: rgba(51, 82, 255, 0.06);
    border: solid 1px rgba(51, 82, 255, 0.14);
    border-radius: 4px;
    margin: 0 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
}

.l_244-u_1650 .gk-l20-u1 .multi-col>div.drop-target,
.l_244-u_1650 .gk-l20-u1 .el_dropable .fix-img-area {
    height: 55px;
    max-height: 55px;
    width: 55px;
    max-width: 55px;
}

.skill-test--question-media.gk-l20-u7 {
    row-gap: 20px;
}

.skill-test--question-media.gk-l20-u7>span {
    width: 100%;
}

.gk-l24-u5>span img {
    width: 150px;
    max-width: 200px;
    margin: 0;
}

.gk-l24-u6>span img {
    width: 150px;
    max-width: 200px;
    margin: 0;
}

.gk-l28-u2.coin-options img {
    padding: 5px;
}

.card-g1-l16-u7 .question-title {
    margin-bottom: 0;
}

.card-g1-l16-u7 .question-title .small-character {
    font-size: 25px;
}

/* grade 1 */
.card-g1-l1-u2 .skill-test--question-media img {
    margin: 0 10px 0;
}

.card-g1-l1-u3 .skill-test--ans-options-theme-1,
.card-g1-l1-u2 .skill-test--ans-options-theme-1 {
    width: 420px;
    margin: 0 auto;
}

.correct-ans-hint-img img {
    min-width: 200px;
    max-width: 400px;
    width: auto;
    height: auto;
}

.correct-ans-img img {
    max-width: 200px;
    display: inline;
}

.card-g1-l4-u3 .qsn-vertical-set .qsn-row-ans {
    margin-left: 50px;
}

.card-g1-l4-u3 .qsn-vertical-set .qsn-row-ans input {
    text-align: center;
}

.card-g1-l4-u4 .qsn-vertical-set {
    border: none;
}

.card-g1-l4-u4 .qsn-vertical-set>span:last-child {
    margin-left: 25px;
}

.card-g1-l4-u4 .qsn-vertical-set .qsn-row-ans .skill-test-answer-input {
    text-align: center;
}

.card-g1-l8-u2 .qsn-vertical-set .qsn-row {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    color: #696a6a;
}

.card-g1-l8-u2 .qsn-vertical-set .qsn-row-ans {
    margin-left: 50px;
}

.card-g1-l8-u2 .qsn-vertical-set .qsn-row-ans input {
    text-align: center;
}

.card-g1-l9-u2 .qsn-vertical-set .qsn-row-ans {
    margin-left: 32px;
}

.card-g1-l9-u2 .qsn-vertical-set .qsn-row-ans input {
    text-align: center;
}

.card-g1-l9-u3 .qsn-vertical-set .qsn-row-ans {
    margin-left: 32px;
}

.card-g1-l9-u3 .qsn-vertical-set .qsn-row-ans input {
    text-align: center;
}

/* Clone drag element solution================ */
.clone-drag-elements {
    flex: 0 0 100%;
}

.canvas {
    min-height: 140px;
    position: relative;
}

.canvas,
.objects-wrap {
    background-color: rgba(151, 211, 247, 0.08);
    border: dashed 2px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
}

.objects-wrap {
    background-color: transparent;
    border: none;
}

.add-element {
    cursor: move;
}

.add-element>img {
    margin: 0 5px;
    max-width: 100px !important;
}

.noselect {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.sortable-only-wrap {
    position: relative;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.sortable-only-wrap>span {
    margin: 0 5px;
    cursor: move;
}

.clone-drag-elements .add-element {
    height: 100px;
    width: 100px;
}

.skill-test--question-media .clone-drag-elements .add-element img {
    width: 100%;
    max-width: 100px !important;
}

.card-grey-small {
    min-height: 50px;
    padding: 5px 14px;
    border-radius: 8px;
    color: #646464;
    background-color: #f2f2f2;
    border: solid 1px rgba(0, 0, 0, 0.03);
}

.can-select {
    cursor: pointer;
    border: solid 2px transparent;
}

.can-select.can-select-is-selected {
    background-color: rgb(255 193 7 / 6%);
    border: solid 2px #f6b53f;
}

/* Simple Dragbale and drop for extimation problems */

.draggable-item {
    width: 85px;
    height: auto;
}

.draggable-item img {
    width: 100%;
    margin: 0 !important;
}

#draggable {
    width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
}

#draggable .draggable-item {
    margin: 0 5px;
}

#simpleDropable {
    width: 100%;
    height: 80px;
}

.table-layout-auto {
    table-layout: auto !important;
}

.table-noborder {
    border: none;
}

.table-noborder table tr td {
    border: none;
}

tr.table-row-border-top td {
    border-top: solid 1px rgba(0, 0, 0, 0.2) !important;
}

/* Graphic block elements */
.block-items-lists {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-items-lists>span {
    font-size: 16px;
    font-weight: 700;
}

.block-element,
.empty-block {
    display: inline-block;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 30px;
    padding: 0 15px;
    background: linear-gradient(180deg, #ed9564 0%, #ffbf5f 100%);
    border: 1px solid #ffa498;
    border-radius: 4px;
    min-height: 15px;
    cursor: move;
}

.empty-block {
    min-width: 40px;
    background: rgba(0, 0, 0, 0.14);
    border: none;
    cursor: default;
    padding: 0;
    height: 32px;
}

.empty-block .block-element {
    margin: 0;
}

.facet-list li.placeholder {
    height: 1.2em;
}

.facet {
    border: 1px solid #bbb;
    background-color: #fafafa;
    cursor: move;
}

.facet.ui-sortable-helper {
    opacity: 0.5;
}

.placeholder {
    border: 1px solid orange;
    background-color: #fffffd;
}

/* Question Patterns problems and solution */
.patterns-problems {
    margin-top: 30px;
}

.patterns-problems .question-imgs {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 30px;
}

.patterns-problems .question-imgs img {
    margin: 0 10px;
    max-width: 68px;
    height: auto;
}

.patterns-problems.dnd-sum-1 .fix-img-area img,
.patterns-problems.dnd-sum-1 .dropped img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.dropable-wrapper,
.draggable-wrapper-with-clone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropable-wrapper {
    margin-bottom: 25px;
}

.drag-this {
    cursor: move;
    margin: 0 5px;
}

.drag-this img {
    width: 60px;
    height: auto;
}

.dropable-zone,
.fix-img-area {
    height: 68px;
    width: 68px;
    background-color: rgba(51, 82, 255, 0.06);
    border: solid 1px rgba(51, 82, 255, 0.14);
    border-radius: 4px;
    margin: 0 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.g-3-10 .dropable-items {
    min-height: 118px;
}

.g-3-10 .dropable-items {
    display: block;
}

.drag.tiny-object {
    width: 30px;
    height: auto;
}

/* Generic */

.dragable-objects {
    display: flex;
    justify-content: center;
}

.dragable-objects {
    padding: 0;
    margin: 0;
}

.dragable-objects li {
    list-style: none;
    margin: 0 5px;
}

.tiny-object img {
    width: 28px !important;
    margin: 0 !important;
}

.draggable-with-clone .dropable-col {
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dropable-col li {
    list-style: none;
    margin: 4px 0;
}

.draggable-with-clone .generic-table tr td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.dragable-objects .drag {
    display: inline-block;
    cursor: move;
}

.inline-fractions>div {
    margin: 0 5px;
}

.inline-fractions>div {
    margin: 0 5px;
    text-align: center;
    display: inline-flex;
    align-items: center;
}

.inline-fractions>div {
    font-weight: 800;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
}

.inline-fractions>div span {
    margin: 0;
}

.inline-fractions span input.skill-test-answer-input {
    margin: 0;
}

.inline-fractions>div h5 {
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.68);
    margin: 0 5px;
}

.d-i-b-problems {
    display: block !important;
    font-size: 0;
    line-height: 40px;
}

.d-i-b-problems>div,
.d-i-b-problems>span {
    display: inline-block;
    margin: 0 !important;
}

.bordered-columns>div {
    display: block;
    text-align: center;
}

.bordered-columns>div>div {
    display: inline-block;
}

/* Frac styles */
.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}

.frac>span {
    display: block;
    padding: 0.1em;
}

.frac span.bottom {
    border-top: thin solid black;
}

.frac span.symbol {
    display: none;
}

table.less-padding {
    table-layout: auto;
}

table.less-padding tr td {
    padding: 5px;
}

table.less-padding tr td input.skill-test-answer-input {
    margin: 0;
    font-size: 18px !important;
}

.letter-space-wide {
    letter-spacing: 5px;
}

.result-cols {
    margin-right: -5px;
    margin-left: -5px;
    justify-content: flex-end;
}

.result-cols>span {
    width: 30px;
    min-width: 30px;
    border: dashed 1px rgba(0, 0, 0, 0.24);
    height: 32px;
    margin: 0 -0.5px 2px;
}

.result-cols>span>input {
    background-color: transparent;
    border: none;
    font-size: 20px;
    text-align: center;
    height: 30px;
    width: 28px;
    padding: 0;
}

.hr-border {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.68);
    height: 2px;
}

.letter-box {
    height: 30px !important;
    width: 28px !important;
    min-width: 25px !important;
    display: inline-block;
    text-align: center;
    line-height: 32px !important;
    font-size: 20px !important;
    font-weight: 700;
    margin: 0 !important;
    vertical-align: top;
}

.last-child-no-border>span:last-child {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Drag box and fill */
.make-square-drag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: solid 1px rgba(0, 0, 0, 0.1);
}

.box_2_2,
.box_2_3 {
    width: 122px;
}

.box_3_2,
.box_3_3 {
    width: 182px;
}

.box_4_2,
.box_4_3 {
    width: 242px;
}

.box_5_2,
.box_5_3 {
    width: 302px;
}

.box_6_2,
.box_6_3 {
    width: 362px;
}

.make-square-drag>div {
    height: 60px;
    width: 60px;
}

.make-square-drag .dropable-col li {
    height: 60px;
    width: 60px;
    margin: 0;
}

.dragable-objects .drag,
.make-square-drag .ui-draggable .drag {
    height: 60px;
    width: 60px;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.14) 0 0 8px;
}

.drag.blue {
    background-color: #00a6ff;
}

.drag.purple {
    background-color: #b399fb;
}

.drag.green {
    background-color: #46dbd4;
}

.drag.yellow {
    background-color: #fbdc61;
}

.drag.orange {
    background-color: #fdb467;
}

.drag.red {
    background-color: #fd6767;
}

.drag.pink {
    background-color: #fb99f9;
}

.generic-table.shrink-items {
    table-layout: auto;
    max-width: none !important;
}

.generic-table.shrink-items input.skill-test-answer-input {
    width: 30px;
    margin: 0 5px;
    height: 30px !important;
    line-height: 30px;
    padding: 0;
    font-size: 16px !important;
}

.generic-table.shrink-items tr td {
    border-top: solid 1px rgba(0, 0, 0, 0.18);
    border-right: solid 1px rgba(0, 0, 0, 0.18);
    padding: 8px 5px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.box-100 {
    display: flex;
    flex-wrap: wrap;
    column-count: 10;
    border-top: solid 1px rgba(0, 0, 0, 0.14);
    border-right: solid 1px rgba(0, 0, 0, 0.14);
    max-width: 241px;
    margin: 0 auto;
}

.box-100.rectangle {
    max-width: 421px;
}

.box-100.rectangle>div {
    height: 36px;
    width: 36px;
}

.box-100>div {
    height: 24px;
    width: 24px;
    border-left: solid 1px rgba(0, 0, 0, 0.14);
    border-bottom: solid 1px rgba(0, 0, 0, 0.14);
    transition: all 0.3s ease;
    cursor: pointer;
}

.box-100>div:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.box-100>div.shaded-col {
    background-color: #09f;
}

/* svg animation */
.coloring svg {
    cursor: pointer;
}

.coloring path {
    transition: fill 0.4s ease;
}

/* Division style customize */
.division-porblems {
    max-width: 100px;
    margin: 0 auto;
}

.division-full-wrap {
    width: 100px;
    margin: 0 auto;
}

.division-full-wrap span.quotient {
    margin-left: -35px;
}

.division-wrap {
    display: flex;
    flex-wrap: wrap;
}

.division-wrap>div {
    padding-top: 4px;
}

.division-porblems span {
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align: top;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
}

.division-wrap>div.left-digit {
    max-width: 50px;
    text-align: right;
    padding-right: 5px;
    border-right: solid 1px black;
    border-radius: 0 0px 14px 0;
    height: 40px;
}

.division-wrap>div:nth-child(2) {
    max-width: 50px;
    width: 50px;
    padding-left: 10px;
    border-top: solid 1px rgba(0, 0, 0, 0.68);
    position: relative;
}

.division-col-right>div {
    display: flex;
    position: relative;
}

.minus {
    position: absolute;
    left: -15px;
}

.division-porblems .border-top {
    border-top: solid 1px rgba(0, 0, 0, 0.8) !important;
    margin-top: 2px;
    padding-top: 2px;
}

.top-digits {
    width: 78px;
    text-align: right;
}

.division-porblems input[type="text"] {
    border: dashed 1px rgba(0, 0, 0, 0.24);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Small mathmatics */
.small-maths {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 15px;
}

.small-maths>div {
    font-size: 16px;
}

.small-maths>div.item-cols {
    flex: 0;
}

.small-maths-items {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    text-align: right;
    justify-content: flex-end;
    color: #696a6a;
}

.small-maths-items>span {
    height: 24px;
    width: 24px;
    min-width: 24px;
    text-align: center;
    line-height: 28px;
}

.line-devider {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.68);
    height: 2px;
}

input.input-dotted {
    height: 24px;
    width: 22px;
    text-align: center;
    line-height: 28px;
    border: dashed 1px rgba(0, 0, 0, 0.24);
    font-size: 18px;
    font-weight: 700;
    padding: 0;
    background-color: transparent;
    width: 100%;
}

.patterns-problems.g_1_12_1 .question-imgs img {
    margin: 0 5px;
}

.skill-test--question-media.g1_12_6_l1 img {
    max-width: 80px;
}

.skill-test--question-media.g1_12_6_l1 .boxed-digit-generic-size,
.skill-test--question-media.g1_12_6_l1 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l1 .boxed-digit {
    display: block;
    width: 50px;
    margin: 0 auto;
}

.skill-test--col-sidebar .btn {
    width: 100%;
}

.card-gpre-k-new-l6-u7 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-gpre-k-new-l6-u7 table td .drop-target img,
.card-gpre-k-new-l6-u7 table td img {
    margin: 0;
}

.card-gpre-k-new-l8-u4 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-gpre-k-new-l8-u4 table td .drop-target img,
.card-gpre-k-new-l8-u4 table td img {
    margin: 0;
}

.card-gk-new-l1-u11 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-gk-new-l1-u11 table td .drop-target img,
.card-gk-new-l1-u11 table td img {
    margin: 0;
}

.card-gk-new-l3-u8 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-gk-new-l3-u8 table td .drop-target img,
.card-gk-new-l3-u8 table td img {
    margin: 0;
}

.card-gk-new-l7-u4 .drag-container {
    width: 400px;
}

.card-gk-new-l7-u4 .draggable-wrapper .el_draggable {
    margin-right: 15px;
}

.card-gk-new-l7-u4 .single-target {
    border-radius: 10px;
    border: dashed 3px green;
    background-color: white;
}

.card-gpre-k-new-l11-u1 .dnd-extra-text .answer-set-inline-entry {
    justify-content: flex-start;
}

.card-gpre-k-new-l10-u4 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-gpre-k-new-l10-u4 table td .drop-target img,
.card-gpre-k-new-l10-u4 table td img {
    margin: 0;
}

.card-gk-new-l15-u4 .click-to-takeway.tk-delete-wrap img {
    max-width: 50px;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
}

.card-gk-new-l15-u4 .click-to-takeway.tk-delete-wrap span {
    vertical-align: middle;
}

/* Shapes drag and drop elements =============================================================== */
.shaped-droppable-area {
    border: none;
    background-color: transparent;
    position: relative;
}

.shape-drag-n-drop {
    margin-top: 40px;
}

.skill-test--question-media.g1_12_6_l1 img,
.skill-test--question-media.g1_12_6_l2 img,
.skill-test--question-media.g1_12_6_l3 img,
.skill-test--question-media.g1_12_6_l4 img,
.skill-test--question-media.g1_12_6_l5 img,
.skill-test--question-media.g1_12_6_l6 img,
.skill-test--question-media.g1_12_6_l7 img {
    width: 100%;
    max-width: 70px;
    height: 70px;
}

.skill-test--question-media.g1_12_6_l1 .boxed-digit,
.skill-test--question-media.g1_12_6_l1 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l2 .boxed-digit,
.skill-test--question-media.g1_12_6_l2 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l3 .boxed-digit,
.skill-test--question-media.g1_12_6_l3 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l4 .boxed-digit,
.skill-test--question-media.g1_12_6_l4 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l5 .boxed-digit,
.skill-test--question-media.g1_12_6_l5 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l6 .boxed-digit,
.skill-test--question-media.g1_12_6_l6 .skill-test-answer-input,
.skill-test--question-media.g1_12_6_l7 .boxed-digit,
.skill-test--question-media.g1_12_6_l7 .skill-test-answer-input {
    display: block;
    width: 68px !important;
    max-width: 68px !important;
    margin: 0 1px;
}

/*Drag and drop element new concept=============*/
/*Drag and drop new concept ============================= */

.draggable-wrapper {
    min-height: 40px;
}

.el_draggable {
    cursor: move;
    z-index: 10;
    display: inline-block;
}

.el_draggable>img {
    vertical-align: top;
}

.dropped,
.show-answer-dropped {
    display: inline-block;
}

.dropped {
    cursor: move;
    margin: 0 2px;
}

.dropped>img,
.el_draggable>img {
    margin: 0 !important;
}

.drop-target {
    min-height: 200px;
    vertical-align: top;
}

.drop-target-wrapper {
    margin-bottom: 1em;
    min-width: 450px;
}

.accept-drop {
    background-color: #fafffc;
    border: dashed 1px #daf0ed;
}

.helper-release {
    animation-duration: 0.5s;
    animation-name: helper-release-anim;
    animation-fill-mode: forwards;
}

.helper-grab {
    animation-duration: 0.2s;
    animation-name: helper-grab-anim;
    animation-fill-mode: forwards;
}

/*Animation keyframes*/
@keyframes helper-grab-anim {
    from {
        transform: scale(1);
        opacity: 1;
        box-shadow: none;
    }

    to {
        transform: scale(1);
        opacity: 0.9;
    }
}

@keyframes helper-release-anim {
    from {
        transform: scale(1);
        opacity: 0.9;
    }

    to {
        transform: scale(1);
        opacity: 1;
        box-shadow: none;
    }
}

.drag-container {
    text-align: center;
    width: 100%;
}

.drag-container table {
    border: solid 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    border-collapse: collapse;
}

.drag-container table tr th {
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.68);
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.06);
}

.drag-container table tr td:not(:last-child) {
    border-right: solid 1px rgba(0, 0, 0, 0.1);
}

.drag-container table tr td {
    padding: 15px;
}

.img-size-xxs {
    height: 40px;
    width: auto;
}

.img-size-xs {
    height: 60px;
    width: auto;
}

.img-size-s {
    height: 80px;
    width: auto;
}

.img-size-m {
    height: 100px;
    width: auto;
}

.img-size-lg {
    height: 140px;
    width: auto;
}

.img-size-xl {
    height: 180px;
    width: auto;
}

.el_dropable {
    margin: 30px 0;
}

.dropped>img {
    vertical-align: top;
}

.single-target {
    border: dashed 1px rgba(0, 0, 0, 0.08);
    background-color: rgba(0, 0, 0, 0.04);
}

.pre-k-l3-u7 .drop-target {
    min-height: 0;
    height: 100%;
}

.pre-k-l3-u7 .single-target {
    border: 2px solid #e5e1e1;
    background-color: #f6f4f4;
    width: 650px;
    margin: 0 auto;
    height: 75px;
    padding: 9px;
    border-radius: 6px;
}

.pre-k-l3-u7 .single-target img {
    height: 55px;
    width: 55px;
}

.pre-k-l3-u7 .draggable-wrapper {
    margin-top: 30px;
}

.pre-k-l3-u7 .el_dropable .dropped {
    margin: 0;
}

.pre-k-l6-u8 .drop-target {
    min-height: 0;
    height: 100%;
}

.pre-k-l6-u8 .single-target {
    border: 2px solid #e5e1e1;
    background-color: #f6f4f4;
    width: 650px;
    margin: 0 auto;
    height: 75px;
    padding: 9px;
    border-radius: 6px;
}

.pre-k-l6-u8 .single-target img {
    height: 55px;
    width: 55px;
}

.pre-k-l6-u8 .draggable-wrapper {
    margin-top: 30px;
}

.pre-k-l6-u8 .el_dropable .dropped {
    margin: 0;
}

.pre-k-l6-u8-l3 .single-target img,
.pre-k-l6-u8-l4 .single-target img,
.pre-k-l6-u8-l5 .single-target img,
.pre-k-l6-u8-l6 .single-target img {
    height: auto;
    /*width: 40px;*/
}

.pre-k-l6-u8-l3 .single-target,
.pre-k-l6-u8-l4 .single-target,
.pre-k-l6-u8-l5 .single-target,
.pre-k-l6-u8-l6 .single-target {
    padding: 18px;
}

.multi-col {
    display: flex;
    justify-content: center;
}

.multi-col>div {
    flex: 1;
}

.gk-l2-u5 .single-target img {
    height: 55px;
    width: 55px;
}

.gk-l2-u5 .draggable-wrapper {
    width: 650px;
    text-align: left;
    margin: 30px auto 0;
}

.l_226-u_1587.card-gk-new-l2-u5 .draggable-wrapper {
    text-align: center;
}

.gk-l2-u5 .drop-target {
    min-height: 0;
    height: 100%;
}

.l_233-u_1722 .gk-l2-u5 .drop-target {
    min-height: 100px;
    height: 100%;
}

.l_234-u_1735 .drag-container {
    width: 500px;
}

.gk-l7-u4 .dropped>img {
    vertical-align: bottom;
}

.gk-l7-u4 .drop-target {
    min-height: 150px;
    height: auto;
    vertical-align: middle;
    text-align: left;
    padding: 15px 20px;
}

.gk-l7-u4 .el_dropable .dropped {
    margin-bottom: 0;
}

.gk-l10-u1 svg {
    width: 55px;
    max-height: 55px;
    margin: 5px;
}

.gk-l10-u1 .skill-test--question-media {
    row-gap: 10px;
    justify-content: left;
    width: 700px;
}

.gk-l10-u1 .colored-dot {
    width: 60px;
    cursor: pointer;
}

.gk-l10-u1 .colored-dot__delete {
    width: 25px;
    vertical-align: bottom;
    cursor: pointer;
    margin-left: 10px;
    margin-bottom: 10px;
}

.color-by-clicking-dot.gk-l10-u1 {
    margin-top: 25px;
}

/*Drag and drop new concept ============================= */

.cubes-draggable .el_draggable {
    vertical-align: bottom;
    margin: 0 15px 15px;
}

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

.g_1_12_1 .multi-col>div.drop-target,
.el_dropable .fix-img-area {
    height: 68px;
    max-height: 68px;
    width: 68px;
    max-width: 68px;
    background-color: rgba(51, 82, 255, 0.06);
    border: solid 1px rgba(51, 82, 255, 0.14);
    border-radius: 4px;
    margin: 0 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
}

.g_1_12_1.gk-l2-u4 .multi-col>div.drop-target,
.gk-l2-u4 .el_dropable .fix-img-area {
    margin: 0;
    border-radius: 0;
}

.g_1_12_1 .el_dropable .dropped {
    margin-bottom: 0;
}

.fix-img-item-hint {
    text-align: left;
}

.fix-img-item-hint>img {
    display: inline-block;
    height: 28px;
    width: 28px;
    margin: 0 0 4px;
}

.g1_24_3 table {
    table-layout: fixed;
}

.g1_24_3 table tr td {
    vertical-align: top;
}

.g1_24_3 .el_dropable {
    max-width: 384px;
    margin-left: auto;
    margin-right: auto;
}

.g1_24_3 .img-size-xs {
    height: 50px;
    width: auto;
}

.g1_24_3 .drop-target {
    min-height: 68px;
    text-align: left;
    border-color: rgba(0, 0, 0, 0.08);
}

.two-tables {
    display: flex;
}

.two-tables table {
    margin: 0 15px;
}

.card-g1-l15-u3 .dropped>img {
    vertical-align: bottom;
}

.card-g1-l15-u3 .drop-target {
    min-height: 100px;
    height: auto;
    vertical-align: bottom;
    text-align: left;
    padding: 15px 20px;
}

.card-g1-l15-u5 .el_dropable .dropped {
    margin-bottom: 0;
}

.card-g1-l15-u5 .dropped>img {
    vertical-align: bottom;
}

.card-g1-l15-u5 .drop-target {
    min-height: 100px;
    height: auto;
    vertical-align: bottom;
    text-align: left;
    padding: 15px 20px;
}

.card-g1-l15-u5 .el_dropable .dropped {
    margin-bottom: 0;
}

.card-g1-l15-u6 .dropped>img {
    vertical-align: bottom;
}

.card-g1-l15-u6 .drop-target {
    min-height: 100px;
    height: auto;
    vertical-align: bottom;
    text-align: left;
    padding: 15px 20px;
}

.card-g1-l15-u6 .el_dropable .dropped {
    margin-bottom: 0;
}

.card-g1-l16-u3 .skill-test--question-media {
    align-items: center;
}

.card-g1-l16-u3 .draggable-wrapper .cs {
    padding: 5px 10px;
    font-size: 60px;
    font-weight: bold;
    color: #656161;
}

.card-g1-l16-u3.l_16-u_340 .draggable-wrapper .cs {
    color: #229d2e;
}

.card-g1-l16-u3.l_16-u_340 .dropped .cs {
    color: #229d2e;
    line-height: 60px;
}

.card-g1-l16-u3 .dropped .cs {
    font-size: 60px;
    line-height: 50px;
    font-weight: bold;
    color: #656161;
    padding: none;
}

.card-g1-l16-u3 .drop-target {
    border-radius: 2px;
    margin: auto 10px;
    border: 1px solid #9b9b9b;
    width: 60px;
    height: 60px;
    min-height: 60px;
}

.card-g1-l17-u2 .el_dropable {
    padding: 5px 20px;
    height: 150px;
}

.card-g1-l17-u2 .el_dropable .drop-target {
    min-height: 135px;
    height: 140px;
    padding: 30px 0;
}

.card-g1-l17-u2 .el_dropable .drop-target img {
    vertical-align: middle;
}

.card-g1-l17-u3 .el_dropable .drop-target {
    min-height: 135px;
    padding: 30px 0;
}

.card-g1-l17-u4 .draggable-wrapper .img-size-s {
    height: 200px;
}

.card-g1-l17-u4 .el_dropable {
    width: 400px;
    height: 275px;
    margin: 30px auto;
}

.card-g1-l17-u4 .el_dropable .drop-target {
    min-height: 100%;
}

.card-g1-l17-u4 .el_dropable .drop-target {
    padding: 10px 0;
}

.card-g1-l17-u4 .el_dropable .drop-target img {
    height: 250px;
    width: auto;
}

.card-g1-l17-u4 .draggable-wrapper .el_draggable {
    margin-right: 25px;
}

.card-g1-l17-u5 .draggable-wrapper .img-size-s {
    height: 200px;
}

.card-g1-l17-u5 .el_dropable {
    width: 400px;
    height: 275px;
    margin: 30px auto;
}

.card-g1-l17-u5 .el_dropable .drop-target {
    min-height: 100%;
}

.card-g1-l17-u5 .el_dropable .drop-target {
    padding: 10px 0;
}

.card-g1-l17-u5 .el_dropable .drop-target img {
    height: 250px;
    width: auto;
}

.card-g1-l17-u5 .draggable-wrapper .el_draggable {
    margin-right: 25px;
}

.card-g1-l18-u3 .draggable-wrapper .img-size-s {
    height: 100px;
}

.card-g1-l18-u3 .el_dropable {
    width: 600px;
    min-height: 150px;
    margin: 30px auto;
}

.card-g1-l18-u3 .el_dropable .drop-target {
    height: 100%;
    min-height: 150px;
}

.card-g1-l18-u3 .el_dropable .drop-target {
    padding: 25px 0;
}

.card-g1-l18-u3 .el_dropable .drop-target img {
    height: 100px;
    width: auto;
}

.card-g1-l18-u3 .draggable-wrapper .el_draggable {
    margin-right: 10px;
}

.card-g1-l18-u4 .draggable-wrapper .img-size-s {
    height: 100px;
}

.card-g1-l18-u4 .el_dropable {
    width: 600px;
    min-height: 150px;
    margin: 30px auto;
}

.card-g1-l18-u4 .el_dropable .drop-target {
    height: 100%;
    min-height: 150px;
}

.card-g1-l18-u4 .el_dropable .drop-target {
    padding: 25px 0;
}

.card-g1-l18-u4 .el_dropable .drop-target img {
    height: 100px;
    width: auto;
}

.card-g1-l18-u4 .draggable-wrapper .el_draggable {
    margin-right: 10px;
}

.card-g1-l19-u2 .skill-test--question-media {
    row-gap: 0;
}

.card-g1-l19-u3 .skill-test--question-media {
    row-gap: 0;
}

.card-g1-l19-u3 .ui-droppable {
    margin-top: -35px;
}

.card-g1-l23-u5 .ten-frames table.generic-table td {
    padding: 0;
}

.card-g1-l23-u5 .ten-frames table.generic-table td img {
    max-width: 95%;
    height: auto;
}

.card-g1-l23-u5 table td .drop-target {
    min-height: 50px;
    width: 60px;
}

.card-g1-l23-u6 .ten-frames table.generic-table td {
    padding: 0;
}

.card-g1-l23-u6 .ten-frames table.generic-table td img {
    max-width: 90%;
    height: auto;
}

.card-g1-l23-u6 table td .drop-target {
    min-height: 50px;
    width: 100%;
}

.card-gpre-k-new-l1-u1 .skill-test--question-media svg {
    margin: 0 5px;
}

/* Bubble numbering problems ============================== */
.bubble-numbering {
    margin-top: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    position: relative;
    max-width: 734px;
    margin-left: auto;
    margin-right: auto;
}

.bubble-numbering:before {
    content: "";
    position: absolute;
    left: 0;
    top: 69px;
    height: 2px;
    width: 100%;
    background-color: #7370e6;
}

.bubble-numbering>div.bubble-item {
    flex: 1 1 auto;
    /* min-width: 70px; */
    padding: 40px 10px;
    position: relative;
    text-align: center;
}

div.bubble-item>span,
div.bubble-item>input {
    display: inline-block;
    margin: 0 !important;
}

div.bubble-item .boxed-digit,
div.bubble-item>input {
    position: absolute;
    left: calc(50% - 25px);
}

.bubble-item>input {
    font-size: 18px;
    text-align: center;
}

div.bubble-item .boxed-digit {
    bottom: 0;
    border: none !important;
    font-size: 19px !important;
    padding: 0 !important;
}

div.bubble-item .boxed-digit.on-top {
    bottom: auto;
    top: 0;
}

div.bubble-item>input {
    top: 0;
    border-radius: 62% !important;
}

div.bubble-item>span.line-vr {
    height: 50px;
    width: 2px;
    background-color: #7370e6;
}

/* Bubble numbering problems ============================== Ends */

.skill-test--question-media img.multi-select {
    cursor: pointer;
}

.skill-test--question-media img.multi-select.selected {
    cursor: pointer;
    border-color: #f6b53f;
    border-width: 3px;
    opacity: 0.8;
}

.g1_27_6_l1>div.item-dragable {
    margin: 40px auto 0;
    min-width: 450px;
    max-width: 655px;
    width: 100%;
    text-align: center;
}

.g1_27_6_l1 .dropable-items.small-object>span,
.g1_27_6_l1 .sortable-items.small-object>span {
    width: 65px;
}

.g1_27_6_l1 .dropable-items,
.g1_27_6_l1 .sortable-items {
    min-height: 65px;
}

.g1_27_6_l1 .dropable-items {
    justify-content: flex-start;
}

.g1_27_6_l1 .dropable-items {
    background-color: #fdfdfd;
    border: dashed 1px rgba(51, 82, 255, 0.14);
}

.g1_27_6_l1 .sortable-items {
    border: dashed 1px rgba(255, 58, 58, 0.4);
}

.g1_27_6_l1 #sortable1 {
    margin-top: 24px;
    display: inline-flex;
    width: auto;
    min-height: 150px;
    min-width: 200px;
}

.g1_27_6_l1 #sortable2 {
    margin: 0 auto;
}

.shape-item svg g path {
    cursor: pointer;
}

.active-shape {
    fill: #ec6767;
}

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

.fraction-shapes .shape-item {
    margin: 0 10px;
}

.fraction-shapes.g1_26_3 {
    margin-top: 30px;
}

.fraction-shapes.g1_26_3 .shape-item {
    margin: 0 3px;
}

.fill-green .active-shape {
    fill: #4dc45f;
}

.fill-black .active-shape {
    fill: #000000;
}

.fill-orange .active-shape {
    fill: #ffb06b;
}

.abacus-style .dropped {
    display: block;
    text-align: center;
    margin: 0;
}

.abacus-style .drop-target {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 238px;
}

.abacus-style .drop-target:before {
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    bottom: -15px;
    height: 100%;
    border-radius: 4px 4px 0 0;
    width: 4px;
    background-color: #ce9d28;
    z-index: 2;
}

.abacus-style .drop-target .dropped {
    position: relative;
    z-index: 4;
}

.auto-h {
    height: auto !important;
}

.spot-dot {
    cursor: pointer;
    position: relative;
}

.spot-dot:before {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    height: 24px;
    width: 24px;
    border: dashed 3px #000;
    opacity: 0;
    border-radius: 8px;
    background: white;
}

.spot-dot:hover:before {
    opacity: 1;
}

.spot-clicked:after {
    content: "";
    position: absolute;
    top: calc(50% - 9px);
    left: calc(50% - 9px);
    height: 18px;
    width: 18px;
    background-color: #4ad3bb;
    border-radius: 8px;
}

.take-away-images {
    width: 575px;
}

.skill-test--question-media .take-away-images img {
    width: 75px;
    margin: 0;
}

.delete-icon.click-to-take-away {
    text-align: left;
}

.click-to-take-away-wrap img {
    width: 30px;
}

.has-image .box-dots {
    width: 400px;
}

.has-image .box-dots .dot {
    background-color: #fff;
    height: 25px;
    width: 25px;
    border-radius: none;
    display: inline-block;
}

.has-image .box-dots .dot img {
    height: 25px;
    width: auto;
}

.has-image .box-dots>span {
    height: 50px;
}

.has-image .position-last {
    transform: translate(0, -65px);
}

.g_1-8-5_l-15.has-image .position-last {
    transform: translate(260px, -65px);
}

.hidable-part.bordered-span span img {
    max-width: 100%;
    margin: 0;
    height: auto;
}

.hidable-part.bordered-span span {
    height: 200px;
    width: 200px;
    border: 2px solid #5e79d6;
    border-radius: 2px;
}

.hidable-part.bordered-span span:first-child {
    border-right: none;
}

.hidable-part .default-hide img {
    display: none;
}

/* Grade 1, Lesson 7, Unit 1 */
.g-1__l7-1 table {
    width: 600px;
    margin-top: 40px;
    border: 1px solid #959595;
}

.g-1__l7-1 table.generic-table tr td {
    cursor: pointer;
    padding: 10px;
    background-color: rgb(64 94 255 / 13%);
    border: solid 2px rgb(51 82 255 / 31%);
}

.g-1__l7-1 table tr {
    height: 60px;
}

.question-title {
    margin-bottom: 20px;
}

/* grad K */
/* unit 1.3 Number and write up to five */

table.g-2-u-8-1-L-1.gk-l2-u7 tr td {
    width: 90px;
    height: 65px;
    font-size: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7);
}

/* pre k 11.1 , kg 15.1 */
.click-n-move__takeaway .cube-group {
    display: block;
    width: 650px;
    min-width: 120px;
    min-height: 80px;
    border: 2px solid #e5e1e1;
    background-color: #f6f4f4;
    border-radius: 6px;
    padding: 10px 20px 10px;
    margin: 0 auto;
    text-align: left;
}

.gk-l15-u1 .click-n-move__takeaway .cube-group img {
    margin: 0px;
}

.click-n-move__takeaway {
    width: fit-content;
    margin: 0 auto;
}

.click-n-move__takeaway .cube-group img {
    margin: 0 -9px 0 0;
    height: 55px;
    width: auto;
    cursor: pointer;
}

.click-n-move__takeaway .cube-stack {
    display: block;
    margin-top: 25px;
    overflow: hidden;
    padding: 10px;
    height: 78px;
    width: 84px;
    border: 2px dashed #e5e1e1;
    background-color: #f6f4f4;
    border-radius: 4px;
}

.click-n-move__takeaway .sortable-items,
.click-n-move__takeaway .dropable-items {
    min-height: 80px;
}

.skill-test--question-media .click-n-move__takeaway .cube-stack img {
    margin: 0;
}

.skill-test--question-media .click-n-move__takeaway .cube-stack img:not(:first-child) {
    margin: 20px;
}

.grade-list {
    border-bottom: 1px solid #9e9e9e;
    padding: 20px 8px;
    font-weight: bold;
}

.grade-list .grade-list__nav-items {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
}

.section-card ul.nav-pills {
    /* width: 100% !important; */
    /* flex: 1 0 0; */
    margin-right: 25px;
}

span.before-text {
    font-size: 12px;
    /*background: var(--purple-light);*/
    background: #65cccd;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-listing .section-card div#navTab {
    width: 75%;
    margin-left: 25px;
}

#v-pills-tab span.after-text {
    float: right;
    font-size: 12px;
}

#v-pills-tab span.after-text .fa,
.child-icon .fa {
    line-height: 2;
    color: orange !important;
}

.section-card #v-pills-tab li.active {
    background-color: #e9f9fa;
}

.section-card #v-pills-tab li img.fa.fa-minus {
    display: none;
}

.section-card #v-pills-tab li.active img.fa.fa-plus {
    display: none;
}

.section-card #v-pills-tab li.active img.fa.fa-minus {
    display: block;
}

.skill-listing .title h4 {
    color: #65cccd;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 2px;
}

#navTab .skill-listing-item-card h4 {
    color: #000000;
}

.top-row-flex {
    display: flex;
    gap: 12px;
    vertical-align: middle;
    /* align-items: center; */
    margin-bottom: 22px;
    width: 100%;
    flex-wrap: nowrap;
}

.top-row-flex .stat-card-inner {
    width: 100%;
    position: relative;
    display: flex;
    text-align: center;
    border-radius: 16px;
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid #697499;
    padding: 8px 14px;
    margin-bottom: 0;
    box-sizing: border-box;
    font-size: 14px !important;
}

.stat-inner-flex {
    display: flex;
    vertical-align: middle;
    align-items: center;
    text-align: left;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
}

.stat-inner-flex .icon {
    width: auto;
    margin: 0;
}

.text-visiblity.inner-text {
    visibility: hidden;
}

.top-row-flex .stat-card-inner h4 {
    font-size: 14px;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    flex-grow: 1;
    text-align: center;
}

.skill-test-sidebar .skill-sub-menu {
    display: none;
}

.skill-lesson-list li {
    padding: 6px 0;
    color: #434242;
}

.skill-lesson-list li a,
.skill-lesson-list li a .fa {
    color: #434242;
}

.skill-lesson-list li a .fa {
    font-size: 11px;
}

.skill-show-unit-list .child-level {
    background: #49bcc0;
    border-radius: 100%;
    height: 24px;
    width: 24px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.child-title {
    flex-basis: 100%;
    font-size: 14px;
    color: #222222d4;
    flex-grow: 1;
    font-weight: 700;
    font-family: "Nunito", sans-serif;
}

.l_15-u_309 .answer-set-inline-entry>div>span {
    font-size: 1.2rem;
}

.summary-header {
    color: #545454;

    font-size: 28px;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 30px;
}

.box-top-text .col:not(:first-child) {
    border-left: 1px solid #e1e1e1;
}

.summary-text {
    color: #666;
    display: inline-block;
    font-size: 14px;
    margin-left: 20px;
    text-align: left;
    text-transform: uppercase;
}

.summary-text .stat {
    display: block;
    font-size: 36px;
    text-transform: none;
}

.card-box {
    border-top: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    font-family: Verdana, sans-serif;
    margin-top: 15px;
    padding-top: 15px;
}

.box-inner {
    background: #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    font-family: Verdana, sans-serif;
    margin-bottom: 20px;
    padding: 20px;
}

.profile {
    margin-bottom: 50px;
}

.box-graph .categories {
    box-sizing: border-box;
    display: inline-block;
    padding-right: 20px;
    vertical-align: top;
    width: 40%;
}

.box-graph {
    margin-top: 50px;
    display: flex;
}

.box-graph .problems-attempted {
    display: inline-block;
    vertical-align: top;
    width: 60%;
}

.categories .category-wrapper {
    display: inline-block;
    /* height: 140px;
  width: 140px; */
}

.categories .category-list {
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
}

.box-graph h3 {
    color: #666;
    font-size: 22px;
    font-weight: 700;
    line-height: 50px;
}

.anl__wrapper {
    padding-top: 30px;
    padding-bottom: 300px;
}

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

.stat-container .img-pencil {
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMi43MiIgaGVpZ2h0PSIzMi42OSIgdmlld0JveD0iMCAwIDMyLjcyIDMyLjY5Ij48cGF0aCBkPSJNMzEuODQsNS45MiwyNi43Ny44NWEzLjA4LDMuMDgsMCwwLDAtNC4yNCwwTDIuNDUsMjAuOTMuMDUsMzAuNjlhMS41OSwxLjU5LDAsMCwwLC40MiwxLjUzLDEuNTYsMS41NiwwLDAsMCwxLjEyLjQ3LDEuODQsMS44NCwwLDAsMCwuNDEsMGw5Ljc2LTIuNEwzMS44NCwxMC4xNmEzLDMsMCwwLDAsMC00LjI0Wk0yLjE3LDMwLjUybDIuMzItOC42NSwxLjguODIuMjEsMy4zNiwzLjQ5LjM0Ljg0LDEuODFabTkuMTYtNi0yLjk0LS4yOS0uMTgtMi44NUw1LjksMjAuMzEsMjAuMiw2bDYuNDgsNi40OUwxMi4zOCwyNi44Wk0zMC40Myw4Ljc1bC0yLjM0LDIuMzNMMjEuNjEsNC42bDIuMzMtMi4zNGExLDEsMCwwLDEsMS40MiwwbDUuMDcsNS4wN2ExLDEsMCwwLDEsMCwxLjQyWiIgZmlsbD0iIzhjYzgxMSIvPjwvc3ZnPg==) 0 0 no-repeat;
    display: inline-block;
    height: 34px;
    vertical-align: top;
    width: 34px;
}

.stat-container .img-clock {
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDM0IDM0Ij48cGF0aCBkPSJNMTcsMkExNSwxNSwwLDEsMSwyLDE3LDE1LDE1LDAsMCwxLDE3LDJtMC0yQTE3LDE3LDAsMSwwLDM0LDE3LDE3LDE3LDAsMCwwLDE3LDBaIiBmaWxsPSIjMDBhZWVmIi8+PHBvbHlnb24gcG9pbnRzPSIyMi44MiAyMi4zNyAxNy41NyAxNi43IDE3LjU3IDYuOTUgMTUuMDYgNi45NSAxNS4wNiAxNy42NyAxNS4wNiAxNy42OCAxNS4wNiAxNy42OSAxNS4wNiAxNy43IDE1LjA4IDE3LjcgMjAuOTggMjQuMDcgMjIuODIgMjIuMzciIGZpbGw9IiMwMGFlZWYiLz48L3N2Zz4=) 0 0 no-repeat;
    display: inline-block;
    height: 34px;
    vertical-align: top;
    width: 34px;
}

.stat-container .img-puzzle {
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCA1NCA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjYwNjM5IDI2LjIyNTNDOS43NzIwMiAyNi43MTk5IDkuNzcyMDIgMjcuMjE0NSA5LjYwNjM5IDI3LjcwOTFWMjcuNzA5MVYyNy43MDkxVjI3LjcwOTFWMjcuNzA5MUM5LjYwNjM5IDI3LjcwOTEgOS42MDYzOSAyNy43MDkxIDkuNjA2MzkgMjcuODc0VjI3Ljg3NEM5LjI3NTE0IDI4LjUzMzQgOC42MTI2NCAyOS4xOTI5IDcuNzg0NTIgMjkuMTkyOUM3LjYxODg5IDI5LjE5MjkgNy42MTg4OSAyOS4xOTI5IDcuNDUzMjcgMjkuMTkyOUM3LjI4NzY0IDI5LjE5MjkgNy4xMjIwMiAyOS4xOTI5IDcuMTIyMDIgMjkuMTkyOUM2Ljk1NjM5IDI5LjE5MjkgNi43OTA3NyAyOS4xOTI5IDYuNjI1MTQgMjkuMDI4MUM0LjQ3MjAyIDI4LjY5ODMgMi42NTAxNCAyOS4wMjgxIDEuODIyMDIgMzAuMTgyMkMwLjk5Mzg5NCAzMS4zMzYzIDAuOTkzODk0IDMyLjk4NSAxLjk4NzY0IDM0Ljk2MzRWMzUuMTI4M1YzNS4xMjgzVjM1LjEyODNWMzUuMjkzMUMyLjk4MTM5IDM3LjI3MTYgNC4zMDYzOSAzOC4yNjA4IDUuNzk3MDIgMzguMjYwOEM3LjI4NzY0IDM4LjI2MDggOC43NzgyNyAzNi45NDE5IDkuNzcyMDIgMzQuNjMzN0MxMC4yNjg5IDMzLjY0NDQgMTEuMjYyNiAzMy4xNDk4IDEyLjI1NjQgMzMuNDc5NlYzMy40Nzk2VjMzLjQ3OTZWMzMuNDc5NlYzMy40Nzk2VjMzLjQ3OTZDMTIuNzUzMyAzMy42NDQ0IDEzLjI1MDEgMzMuOTc0MiAxMy41ODE0IDM0LjQ2ODhWMzQuNDY4OEwxOC44ODE0IDQ0Ljg1NTZMMjkuMzE1OCAzOS41Nzk4VjM5LjU3OThWMzkuNTc5OFYzOS41Nzk4VjM5LjU3OThDMjkuNDgxNCAzOS40MTQ5IDI5LjY0NyAzOS4yNSAyOS44MTI2IDM5LjA4NTJWMzkuMDg1MlYzOS4wODUyVjM5LjA4NTJDMjkuODEyNiAzOS4wODUyIDI5LjgxMjYgMzkuMDg1MiAyOS44MTI2IDM4LjkyMDNWMzguOTIwM1YzOC45MjAzVjM4LjkyMDNWMzguOTIwM0MyOS44MTI2IDM4LjkyMDMgMjkuODEyNiAzOC45MjAzIDI5LjgxMjYgMzguNzU1NFYzOC43NTU0QzI5Ljk3ODMgMzguNDI1NyAyOS44MTI2IDM4LjA5NTkgMjkuODEyNiAzNy43NjYyVjM3LjYwMTNDMjkuNjQ3IDM3LjI3MTYgMjkuNDgxNCAzNy4xMDY3IDI5LjE1MDEgMzYuOTQxOUMyOC40ODc2IDM2LjYxMjEgMjcuOTkwOCAzNi40NDcyIDI3LjQ5MzkgMzYuMTE3NUMyNi42NjU4IDM1LjQ1OCAyNi4wMDMzIDM0Ljc5ODUgMjUuNTA2NCAzMy45NzQyQzI1LjAwOTUgMzMuMTQ5OCAyNS4wMDk1IDMyLjE2MDYgMjUuMzQwOCAzMS4xNzE0QzI1LjY3MiAzMC4wMTczIDI2LjgzMTQgMjguODYzMiAyOC40ODc2IDI4LjAzODhIMjguNjUzM0gyOC44MTg5QzMwLjQ3NTEgMjcuMjE0NSAzMS45NjU4IDI3LjA0OTYgMzMuMTI1MSAyNy4zNzk0QzMzLjk1MzMgMjcuNzA5MSAzNC43ODE0IDI4LjM2ODYgMzUuMjc4MyAyOS4xOTI5QzM1Ljk0MDggMzAuMzQ3IDM1Ljk0MDggMzEuOTk1NyAzNS42MDk1IDMzLjgwOTNDMzUuNjA5NSAzNC4xMzkxIDM1LjYwOTUgMzQuNDY4OCAzNS43NzUxIDM0Ljc5ODVWMzQuNzk4NUMzNS45NDA4IDM1LjEyODMgMzYuMjcyIDM1LjI5MzEgMzYuNjAzMyAzNS40NThWMzUuNDU4QzM2LjYwMzMgMzUuNDU4IDM2LjYwMzMgMzUuNDU4IDM2Ljc2ODkgMzUuNDU4VjM1LjQ1OFYzNS40NThWMzUuNDU4VjM1LjQ1OEgzNi45MzQ1VjM1LjQ1OEMzNi45MzQ1IDM1LjQ1OCAzNi45MzQ1IDM1LjQ1OCAzNy4xMDAxIDM1LjQ1OFYzNS40NThDMzcuMjY1OCAzNS40NTggMzcuNTk3IDM1LjQ1OCAzNy43NjI2IDM1LjQ1OFYzNS40NThWMzUuNDU4VjM1LjQ1OFYzNS40NThMNDguMTk3IDMwLjE4MjJWMzAuMTgyMlYzMC4xODIyTDQzLjIyODMgMjAuMjg5OUM0My4wNjI2IDE5Ljc5NTMgNDIuODk3IDE5LjQ2NTYgNDIuODk3IDE4Ljk3MVYxOC45NzFWMTguODA2MVYxOC44MDYxQzQyLjg5NyAxOC42NDEyIDQyLjg5NyAxOC42NDEyIDQyLjg5NyAxOC40NzYzVjE4LjQ3NjNDNDIuODk3IDE4LjQ3NjMgNDIuODk3IDE4LjQ3NjMgNDIuODk3IDE4LjMxMTVWMTguMzExNVYxOC4xNDY2VjE4LjE0NjZDNDIuODk3IDE4LjE0NjYgNDIuODk3IDE4LjE0NjYgNDIuODk3IDE3Ljk4MTdWMTcuOTgxN0M0Mi44OTcgMTcuOTgxNyA0Mi44OTcgMTcuOTgxNyA0Mi44OTcgMTcuODE2OVYxNy44MTY5QzQzLjA2MjYgMTcuMzIyMiA0My4zOTM5IDE2Ljk5MjUgNDMuODkwOCAxNi42NjI4QzQ0LjM4NzYgMTYuNDk3OSA0NC44ODQ1IDE2LjMzMyA0NS4zODE0IDE2LjQ5NzlDNDcuODY1OCAxNi45OTI1IDQ5LjY4NzYgMTYuNjYyOCA1MC42ODE0IDE1LjM0MzhDNTIuMzM3NiAxNC41MTk0IDUyLjMzNzYgMTIuODcwNyA1MS4zNDM5IDEwLjg5MjNWMTAuNzI3NFYxMC43Mjc0VjEwLjcyNzRWMTAuNTYyNUM1MC4xODQ1IDguNTg0MSA0OC44NTk1IDcuNTk0ODcgNDcuNTM0NSA3LjU5NDg3QzQ2LjA0MzkgNy41OTQ4NyA0NC41NTMzIDguOTEzODQgNDMuNTU5NSAxMS4yMjJDNDMuMjI4MyAxMS44ODE1IDQyLjczMTQgMTIuMjExMyA0Mi4wNjg5IDEyLjM3NjFDNDIuMDY4OSAxMi4zNzYxIDQyLjA2ODkgMTIuMzc2MSA0MS45MDMzIDEyLjM3NjFINDEuNzM3NkM0MS40MDY0IDEyLjM3NjEgNDEuMjQwOCAxMi4zNzYxIDQwLjkwOTUgMTIuMzc2MVYxMi4zNzYxQzQwLjkwOTUgMTIuMzc2MSA0MC45MDk1IDEyLjM3NjEgNDAuNzQzOSAxMi4zNzYxVjEyLjM3NjFDNDAuNzQzOSAxMi4zNzYxIDQwLjc0MzkgMTIuMzc2MSA0MC41NzgzIDEyLjM3NjFWMTIuMzc2MUM0MC41NzgzIDEyLjM3NjEgNDAuNTc4MyAxMi4zNzYxIDQwLjQxMjYgMTIuMzc2MVYxMi4zNzYxQzQwLjQxMjYgMTIuMzc2MSA0MC40MTI2IDEyLjM3NjEgNDAuMjQ3IDEyLjM3NjFWMTIuMzc2MUM0MC4yNDcgMTIuMzc2MSA0MC4yNDcgMTIuMzc2MSA0MC4wODE0IDEyLjM3NjFWMTIuMzc2MUM0MC4wODE0IDEyLjM3NjEgMzkuOTE1OCAxMi4zNzYxIDM5LjkxNTggMTIuMjExM1YxMi4yMTEzQzM5LjkxNTggMTIuMjExMyAzOS45MTU4IDEyLjIxMTMgMzkuNzUwMSAxMi4yMTEzVjEyLjIxMTNDMzkuNDE4OSAxMS44ODE1IDM5LjA4NzYgMTEuNTUxOCAzOC43NTY0IDExLjA1NzJMMzMuNzg3NiAxLjE2NDkyTDIzLjUxODkgNi4yNzU5MUMyMy4wMjIgNi42MDU2NSAyMi44NTY0IDcuMTAwMjYgMjIuNjkwOCA3LjU5NDg3VjcuNTk0ODdWNy43NTk3NFY3LjkyNDYxVjcuOTI0NjFDMjIuNjkwOCA4LjI1NDM2IDIyLjY5MDggOC40MTkyMyAyMi44NTY0IDguNzQ4OTdDMjMuMDIyIDguOTEzODQgMjMuMTg3NiA5LjA3ODcxIDIzLjM1MzMgOS4yNDM1OEMyMy4zNTMzIDkuMjQzNTggMjMuNTE4OSA5LjI0MzU4IDIzLjUxODkgOS40MDg0NUMyMy41MTg5IDkuNDA4NDUgMjMuNTE4OSA5LjQwODQ1IDIzLjY4NDUgOS40MDg0NUMyNS4zNDA4IDEwLjIzMjggMjYuNjY1OCAxMS4yMjIgMjcuMTYyNiAxMi4zNzYxQzI3LjY1OTUgMTMuMjAwNSAyNy42NTk1IDE0LjE4OTcgMjcuMzI4MyAxNS4xNzg5QzI2Ljk5NyAxNi4zMzMgMjUuODM3NiAxNy40ODcxIDI0LjE4MTQgMTguMzExNUgyNC4wMTU4SDIzLjg1MDFDMjIuMTkzOSAxOS4xMzU4IDIwLjcwMzMgMTkuMzAwNyAxOS41NDM5IDE4Ljk3MUMxOC43MTU4IDE4LjY0MTIgMTcuODg3NiAxNy45ODE3IDE3LjM5MDggMTcuMTU3NFYxNy4xNTc0VjE3LjE1NzRWMTcuMTU3NEMxNi44OTM5IDE1LjgzODQgMTYuNzI4MyAxNC4xODk3IDE3LjIyNTEgMTIuMzc2MUMxNy4yMjUxIDEyLjA0NjQgMTcuMjI1MSAxMS43MTY2IDE3LjA1OTUgMTEuMzg2OUMxNi44OTM5IDExLjA1NzIgMTYuNTYyNiAxMC44OTIzIDE2LjIzMTQgMTAuNzI3NFYxMC43Mjc0VjEwLjcyNzRDMTYuMjMxNCAxMC43Mjc0IDE2LjIzMTQgMTAuNzI3NCAxNi4wNjU4IDEwLjcyNzRDMTUuNzM0NSAxMC41NjI1IDE1LjIzNzYgMTAuNTYyNSAxNC45MDY0IDEwLjcyNzRIMTQuNzQwOEMxNC43NDA4IDEwLjcyNzQgMTQuNzQwOCAxMC43Mjc0IDE0LjU3NTEgMTAuNzI3NEw5LjYwNjM5IDEzLjIwMDVMNC4zMDYzOSAxNS44Mzg0TDkuNjA2MzkgMjYuMjI1M1YyNi4yMjUzWiIgc3Ryb2tlPSIjRTY3MDM1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==) 0 0 no-repeat;
    background-size: contain;
    display: inline-block;
    height: 34px;
    vertical-align: top;
    width: 40px;
}

.category-list .category-list-item .category-percent {
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    width: 35px;
}

.category-name {
    color: #666;
    display: inline-block;
    font-size: 11px;
    line-height: 15px;
}

@media only screen and (max-width: 767px) {
    .worksheet-cta--section ul li.d-flex {
        justify-content: start;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 50px;
    }


}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    border-radius: 100%;
}

p.center {
    background: #fff;
    position: absolute;
    text-align: center;
    font-size: 28px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 130px;
    height: 130px;
    margin: auto;
    border-radius: 50%;
    line-height: 35px;
    padding: 15% 0 0;
}

.portion-block {
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
}

.circle {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
}

#part1 {
    transform: rotate(0deg);
}

#part1 .circle {
    background-color: #e64c65;
    /*transform: rotate(76deg);*/
    animation: first 1s 1 forwards;
}

#part2 {
    transform: rotate(100deg);
}

#part2 .circle {
    background-color: #11a8ab;
    animation: second 1s 1 forwards 1s;
}

#part3 {
    transform: rotate(250deg);
}

#part3 .circle {
    background-color: #4fc4f6;
    animation: third 0.5s 1 forwards 2s;
}

/* Animation */
@keyframes first {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(100deg);
    }
}

@keyframes second {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(150deg);
    }
}

@keyframes third {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(111deg);
    }
}

.box-graph {
    margin-top: 100px;
}

.l_14-u_255 .skill-test--question-media>span>img,
.l_14-u_255 .skill-test--question-media>span>span {
    display: block;
}

.l_15-u_310 .answer-set-inline-entry>div>span {
    font-size: 20px;
}

.l_16-u_341 .sortable-only-wrap>span {
    line-height: 24px;
    padding: 10px 25px;
    font-size: 35px;
    color: #47cab2;
    border: 2px solid #47cab2;
}

.l_16-u_341 .g-2-u-8-1-L-1 td {
    background-color: white;
}

.l_24-u_576 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.l_24-u_577 .g1_24_3 .drop-target {
    min-height: 162px;
}

.l_24-u_577 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.l_24-u_578 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
}

.l_24-u_578 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin-left: 0;
}

.l_24-u_578 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 45px;
}

.l_24-u_578 .qsn-vertical-set-wrap .qsn-row-ans input {
    text-align: center;
}

.l_24-u_578 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.l_12-u_1061 .draggable-wrapper .el_draggable {
    margin: 0 10px;
}

.l_16-u_342 div.bubble-item .boxed-digit.on-top {
    top: 5px;
}

.l_16-u_342 .bubble-numbering {
    width: 75%;
}

.l_19-u_405 .skill-test--ans {
    margin-top: 100px;
}

.l_24-u_579 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
}

.l_24-u_579 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin-left: 0;
}

.l_24-u_579 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 38px;
}

.l_24-u_579 .qsn-vertical-set-wrap .qsn-row-ans span {
    text-align: center;
    width: 100%;
    display: inline-block;
}

.l_24-u_579 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.l_24-u_579 .qsn-row .skill-test-answer-input {
    margin-right: -20px;
}

.l_23-u_538 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
}

.l_23-u_538 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin-left: 0;
}

.l_23-u_538 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 46px;
}

.l_23-u_538 .qsn-vertical-set-wrap .qsn-row-ans span {
    text-align: center;
    width: 100%;
    display: inline-block;
}

.l_23-u_538 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.l_23-u_538 .qsn-row .skill-test-answer-input {
    margin-right: -20px !important;
    text-align: center !important;
}

.l_23-u_539 .qsn-vertical-set-wrap {
    width: 200px;
    margin: 0 auto;
}

.l_23-u_539 .qsn-vertical-set-wrap .qsn-vertical-set {
    margin-left: 0;
}

.l_23-u_539 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 46px;
}

.l_23-u_539 .qsn-vertical-set-wrap .qsn-row-ans input {
    text-align: center;
    width: 100%;
    display: inline-block;
}

.l_23-u_539 .answer-set-inline-entry>div>span {
    font-size: 24px;
}

.l_23-u_539 .qsn-row .skill-test-answer-input {
    margin-right: -20px;
    text-align: center;
}

.l_17-u_370 .answer-set .answer-set__option {
    min-width: 150px;
    max-width: 150px;
    padding: 0;
    margin-right: 10px;
}

.l_17-u_370 .answer-set .answer-set__option img,
.l_17-u_370 .answer-set .answer-set__option .img-size-xs {
    width: 100%;
    height: auto;
}

/* profile-selection */

.secret-code-input,
.profile-submit-btn {
    transition: opacity 0.3s ease-in-out;
}

.profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}

.profile-selection {
    background: linear-gradient(to bottom, #FFFFFF, #E8FAFF);
    border-radius: 16px;
    padding: 60px 0px;
    width: 100%;
    margin: 20px;
    max-height: 600px;
}

.profile-selection .profile-card-container {
    margin: 0 auto;
    max-height: 400px;
    overflow-y: auto;
    padding: 0px 40px;
    padding-top: 20px;
}

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.profile-card {
    text-align: center;
    padding: 16px;
    transition: transform 0.2s;
    background: white;
    height: 100%;
    border-radius: 21px;
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image:
        linear-gradient(white, white),
        linear-gradient(90deg, #0EA78D, #ACEAB0);
}

/* .profile-card:hover {
    transform: scale(1.05);
} */

.profile-avatar img {
    width: 110px;
    height: 110px;
    border-radius: 100%;
    margin-bottom: 12px;
}

.profile-name {
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 18px;
    color: #333;
}

.secret-code-input {
    margin: 10px 0;
}

.btn-purple {
    background: #6c5ce7;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-purple:hover {
    background: #5b4bc4;
}

.l_52-u_1065 .container .section-inner .skill-test .skill-test--col-main .section-card .skill-test--card-body .skill-test--ans .answer-set-inline-entry td {
    border-width: 1px;
    padding: 10px;
}

.l_52-u_1065 .container .section-inner .skill-test .skill-test--col-main .section-card .skill-test--card-body .skill-test--question .skill-test--question-media .row .col td {
    border-width: 1px;
    padding: 10px;
}

.l_258-u_1809 .container .section-inner .skill-test .skill-test--col-main .section-card .skill-test--card-body .skill-test--question .pre-k-l6-u8 .drag-container .single-target {
    width: 600px !important;
    min-height: 140px !important;
    background-color: #ffffff !important;
}

.l_266-u_1843 .container .section-inner .skill-test .skill-test--col-main .section-card .skill-test--card-body .skill-test--question .skill-test--question-media svg {
    margin: 0 10px 0;
}

.l_254-u_1756 .answer-set__option img {
    max-height: 100%;
    width: auto;
}

.l_257-u_1799 .item-dragable .ui-state-default {
    max-height: 75px;
    min-height: 50px;
}

.l_258-u_1809 .pre-k-l6-u8 .el_dropable .dropped {
    padding-bottom: 10px;
}

.l_2-u_13 .bubble-numbering:before {
    top: 65px;
}

.l_2-u_13 .bubble-numbering svg {
    vertical-align: unset;
}

.card-g1-l15-u3.l_15-u_308 .drop-target,
.card-g1-l15-u5.l_15-u_310 .drop-target,
.card-g1-l15-u6.l_15-u_311 .drop-target {
    min-height: 150px;
    padding: 0;
}

.l_17-u_372 .skill-test--question-media {
    row-gap: 25px;
}

.l_17-u_372 .el_dropable {
    margin-top: 0;
}

.l_22-u_499 .answer-set-inline-entry {
    max-width: 100%;
    row-gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.l_24-u_577 .el_dropable {
    max-width: 400px;
}

.l_25-u_612 .dropped {
    margin: 0;
    max-width: 33%;
}

.l_25-u_612 table th img {
    margin: 0;
    max-height: 100%;
    width: auto;
    display: block;
}

.l_26-u_627 .skill-test--question-media svg {
    margin: 0;
}

.l_227-u_1604 .container .section-inner .skill-test .skill-test--col-main .skill-test--card .ajax-updatable .skill-test--card-body table tr td input {
    border-radius: 50%;
    border: 1px solid #000;
}

.l_230-u_1669 .container .section-inner .skill-test .skill-test--col-main .section-card .ajax-updatable .skill-test--card-body table {
    max-width: 100%;
}

.l_30-u_130 .qsn-vertical-set-wrap,
.l_31-u_157 .qsn-vertical-set-wrap,
.l_33-u_235 .qsn-vertical-set-wrap {
    margin-left: -75px;
}

.l_30-u_130 .qsn-vertical-set-wrap .qsn-row-ans,
.l_31-u_157 .qsn-vertical-set-wrap .qsn-row-ans,
.l_33-u_235 .qsn-vertical-set-wrap .qsn-row-ans {
    margin-left: 50px;
    text-align: center;
}

.l_30-u_130 .qsn-vertical-set-wrap .qsn-row-ans .skill-test-answer-input,
.l_31-u_157 .qsn-vertical-set-wrap .qsn-row-ans .skill-test-answer-input,
.l_33-u_235 .qsn-vertical-set-wrap .qsn-row-ans .skill-test-answer-input {
    text-align: center;
}

.l_31-u_157 .ten-frames .generic-table tr td,
.l_31-u_158 .ten-frames .generic-table tr td {
    padding: 0;
}

.l_31-u_157 .drop-target,
.l_31-u_158 .drop-target {
    min-height: 50px;
    width: 100%;
    text-align: center;
}

.l_31-u_157 .drop-targe .dropped,
.l_31-u_158 .drop-targe .dropped {
    margin: 0 auto;
}

.l_31-u_157 .drop-target img,
.l_31-u_158 .drop-target img {
    width: 45px;
    height: auto;
    vertical-align: middle;
    margin: 0;
}

.l_31-u_157 .smallFont {
    color: #fff;
    width: 75%;
    font-size: 16px;
    text-align: left;
    margin: 0 auto;
}

.l_17-u_372 .skill-test--question-media .draggable-wrapper img {
    max-width: 150px;
}

.l_18-u_391 .draggable-wrapper .el_draggable {
    padding: 25px 10px;
}

.l_18-u_392.card-g1-l18-u4 .draggable-wrapper img,
.l_18-u_392.card-g1-l18-u4 .draggable-wrapper img.img-size-s {
    width: 150px;
    max-width: 150px;
    height: auto;
}

.l_18-u_392 .draggable-wrapper .el_draggable {
    padding: 25px 10px;
}

.answer-set-inline-entry div span {
    font-size: 22px;
}

.table-width-500 {
    width: 500px;
}

.subHeading {
    color: #68ccc9 !important;
}

.highlightColor {
    color: orange !important;
}

.icon-top img {
    width: 70px;
    height: 70px;
    margin-bottom: 12px;
}

.smallFont {
    font-size: 14px;
    color: white;
}

.loginBtn a {
    border-radius: 10px;
    border: 2px solid #2a4995;
    padding: 10px 20px;
    font-size: 15px;
}

.membershipBtn .btn-purple {
    border-radius: 10px !important;
    background: orange;
    padding: 0px 20px;
    font-size: 15px;
}

.membershipBtn .btn-purple:hover {
    color: #fec631 !important;
}

.exploreBtn {
    color: #68ccc9 !important;
}

.reviewPic {
    width: 100px !important;
    width: 100px !important;
    padding: 16px 0px;
}

.checked {
    color: #f7bc32 !important;
}

.aboutMissionBG {
    background-image: url("../images/map.png");
    padding: 100px 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.math-confidence--section {
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

.math-confidence--section .math-confidence-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.math-confidence--section .math-confidence--container {
    padding: 50px 12px;
    max-width: 1130px;
    margin: auto;
    z-index: 10;
}

.math-confidence--section h1 {
    max-width: 790px;
    margin: auto;
}

.sec__title-text {
    font-size: 28px;
    line-height: 37px;
    font-weight: 800;
    color: #44403f;
    margin-bottom: 16px;
}

.challangecards--section .channangecard-section-head {
    padding-bottom: 36px;
}

.why-choose-us--section .why-choose-us__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: nowrap;
    padding: 50px 0px;
}

.why-choose-us--section .img-section .img-1 {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    width: 190px;
    height: auto;
    border: 4px solid white;
    position: absolute;
    left: 40px;
    top: 0px;
}

.why-choose-us--section .img-section .img-2 {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: full;
    height: full;
    object-fit: cover;
    margin: 75px 0px;
}

.why-choose-us--section .img-section .img-3 {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    width: 190px;
    height: auto;
    border: 4px solid white;
    position: absolute;
    right: 40px;
    bottom: 0px;
}

.why-choose-us--section .img-section__container {
    width: 35%;
    display: flex;
    justify-content: center;
}

.why-choose-us--section .img-section {
    max-width: 420px;
    position: relative;
}

.why-choose-us--section .text-section {
    width: 60%;
    color: #44403f;
}

.why-choose-us--section .text-section h4 {
    font-size: 18px;
    font-weight: 600;
}

.why-choose-us--section .text-section .title-p-text {
    max-width: 640px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 4px;
}

.why-choose-us--section .text-section .feature-list__container {
    display: grid;
    padding-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.why-choose-us--section .text-section .feature-icon__container {
    height: 62px;
    width: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.why-choose-us--section .text-section .feature-icon {
    height: 30px;
    width: auto;
}

.why-choose-us--section .text-section .feature-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: start;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 4px 4px 6px #00000017;
    max-height: 350px;
}

.why-choose-us--section .text-section .info-list {
    flex-grow: 1;
}

.why-choose-us--section .text-section .info-list h4 {
    font-weight: 800;
    font-size: 16px;
}

.why-choose-us--section .text-section .info-list p {
    font-weight: 400;
    font-size: 16px;
    margin-top: -4px;
}

.carousel-control-next-icon {
    background-image: url(../images/icons/chevron-right.svg);
    height: 4.5rem;
    width: 4.5rem;
}

.carousel-control-prev-icon {
    background-image: url(../images/icons/chevron-left.svg);
    height: 4.5rem;
    width: 4.5rem;
}

.carousel-control-next {
    right: -50px;
}

.carousel-control-prev {
    left: -50px;
}

.faq--section .faq__sub-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 44px;
    color: #00705d;
    border-bottom: 2px solid;
    border-image-source: linear-gradient(to right, #fffdf6, #00705d, #fffdf6);
    border-image-slice: 1;
    margin: auto;
    margin-top: 55px;
}

.faq--section .accordion-item {
    border: none;
    border-bottom: 1px solid #eaecf0;
    /*padding-bottom: 30px;
    padding-top: 25px;*/
    padding: 15px;
    color: #44403f;
}

.faq--section .accordion-item:last-child {
    border-bottom: none;
}

.faq--section .accordion-item .accordion-button {
    padding: 2px 0px;
    color: #00705d;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    border: none;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
}

.faq--section .accordion-item .accordion-body {
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0px 0px 0px;
}

.faq--section .accordion-item .icon-open,
.icon-close {
    margin-left: auto;
    width: 24px;
    height: auto;
}

.faq--section .accordion-item .accordion-button::after,
.faq--section .accordion-item .icon-close,
.faq--section .accordion-item .accordion-button.collapsed .icon-open,
.faq--section .accordion-item .accordion-button:not(.collapsed) .icon-close {
    display: none;
}

.faq--section .accordion-item .icon-open,
.faq--section .accordion-item .accordion-button.collapsed .icon-close,
.faq--section .accordion-item .accordion-button:not(.collapsed) .icon-open {
    display: inline-block;
}

.challangecards--section .ch__card {
    background-color: #fff;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.challangecards--section .ch__card:hover {
    box-shadow: 0px 0px 8px 1px #64410e42;
}

.challangecards--section .ch__card .ch__card-title {
    font-size: 20px;
    font-weight: 600;
    padding: 5px 50px;
    margin-top: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0px 4px 5px #64410e42;
    color: #fff;
    margin-bottom: 0px;
}

.challangecards--section .ch__card .ch__card-body {
    padding: 16px;
}

.challangecards--section .ch__card .ch__card-body .ch__cover-img {
    aspect-ratio: 352 / 230;
    border-radius: 8px;
    object-fit: cover;
}

.challangecards--section .ch__card .ch__card-p {
    padding-top: 16px;
    border-bottom: 1px solid #33333333;
    color: #333333;
}

.challangecards--section .ch__card .ch__tag-list {
    padding: 0px;
    padding-top: 16px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-items: center;
    justify-content: start;
    color: #000;
    list-style: none inside;
    margin: 0px;
}

.challangecards--section .ch__card .ch__tag {
    padding: 6px 8px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.common__hero-cover,
.about-us__hero-cover {
    color: #f5f5f5;
    background: linear-gradient(90deg, #0ea78d 43%, #aceab0 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px;
}

.common__hero-section,
.about-us__hero-section {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.common__hero-section .common__hero-container,
.about-us__hero-section .about-us__hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
    height: 300px;
}

.common__hero-section .common__hero-container .common__hero-title,
.about-us__hero-section .about-us__hero-container .about-us__hero-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-top: -60px;
    color: #ffffff;
}

.common__hero-section .common__hero-container .common__hero-text,
.about-us__hero-section .about-us__hero-container .about-us__hero-text {
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 500;
}

.about-us__hero-section .about-us__hero-card-list {
    position: relative;
    min-height: 300px;
}

.about-us__hero-section .about-us__hero-card {
    background: white;
    color: black;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    position: absolute;
    z-index: 10;
    transform: translate(-50%, 0%);
    top: 2px;
    left: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    margin-top: 8px;
    max-width: 280px;
    height: 330px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.about-us__hero-section .about-us__hero-card-shadow {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    width: 290px;
    height: 305px;
    border-radius: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    background: rgba(0, 0, 0, 0.05);
    z-index: 5;
    transform: translate(-50%, 0%) scale(1);
    filter: blur(15px);
}

.about-us__hero-section .about-us__hero-card-background {
    position: absolute;
    top: 40px;
    right: 0;
    width: 240px;
    height: 300px;
    left: 50%;
    border-radius: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    z-index: 1;
    transform: translate(-50%, 32px);
}

.about-us__hero-section .about-us__card-title {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 16px;
    margin-top: 40px;
}

.about-us__hero-section .about-us__hero-card p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 33px;
}

.about-us__hero-section .about-us__hero-card .about-us__card-footer {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 40px;
}

.about-us__hero-section .about-us__hero-card-wrapper {
    margin-bottom: 360px;
}

.about-us__card-list .about-us__feat-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 4px 4px 15px #0000001a;
    height: 100%;
}

.about-us__card-list .about-us__card-body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    justify-content: center;
}

.about-us__card-list .about-us__feat-card .about-us__feat-cover-img {
    height: 212px;
    width: auto;
    object-fit: contain;
}

.about-us__card-list .about-us__feat-card .about-us__card-text h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #00705d;
    text-align: center;
}

.about-us__card-list .about-us__feat-card .about-us__card-text p {
    font-size: 14px;
    line-height: 22px;
    color: #44403f;
    text-align: center;
}

.about-us__join-us-section .about-us__join-cover-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.about-us__worksheets .about-us__worksheets-img-container {
    width: 308px;
    height: 398px;
    position: relative;
}

.about-us__worksheets .worksheets-img {
    width: 300px;
    height: 391px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    box-shadow: 6px 6px 6px #00000040;
}

.about-us__worksheets .worksheets-img-bg {
    width: 300px;
    height: 391px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 5;
}

.about-us__worksheets .btn__worksheets {
    font-size: 20px;
    font-weight: 500;
    width: 186px;
    margin-top: 4px;
    color: #ffffff;
}

.about-us__worksheets .btn__worksheets:hover {
    color: #ffffff;
    filter: brightness(108%);
}

.input-field {
    background-color: #fff !important;
    border: 1px solid #c1c5c6 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    height: 40px !important;
    width: 100%;
    font-weight: 400 !important;
    transition: all 0.2s ease-in;
}

.input-textarea {
    background-color: #fff !important;
    border: 1px solid #c1c5c6 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    width: 100%;
    font-weight: 400 !important;
    transition: all 0.01s ease-in;
}

.input-field::placeholder {
    color: #a1a7a8 !important;
}

.input-field:focus {
    border: 1px solid #00705d !important;
}

form .text-link {
    color: #00705d;
    font-weight: 400;
    font-size: 13px;
    color: #1d70e4;
    text-decoration: underline;
}

form .icon__input-field-wrapper {
    position: relative;
}

form .icon__input-field-wrapper .icon-field {
    position: absolute;
    top: 14px;
    left: 12px;
    width: auto;
}

form .icon__input-field-wrapper .icon-field__right {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: auto;
}

form .icon__input-field-wrapper .icon__input-field {
    padding-left: 32px;
}

.card__wave {
    position: relative;
    overflow: hidden;
    margin-top: -16px;
}

.card__wave-img {
    display: block;
    object-fit: contain;
    width: 100%;
    height: auto;
    margin-top: -50px;
}

.plan-card .plan-button {
    width: 260px;
    height: 50px;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 8px;
    background-color: #2db494;
    border: none;
}

.plan-card .plan-button:hover {
    background-color: #259f7e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 180, 148, 0.4);
}

.plan-card .plan-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(45, 180, 148, 0.3);
}

.plan-card .plan-button img {
    height: 20px;
    width: 20px;
}

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

.timeline-container {
    position: relative;
    padding: 20px 0;
}

.timeline-container::after {
    content: "";
    position: absolute;
    width: 2px;
    background-color: #b3b3b3;
    top: 50px;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    opacity: 0;
    animation: fade-in 0.6s ease-out forwards;
    animation-delay: calc(var(--index) * 0.2s);
}

.timeline-item[data-index="0"] {
    --index: 0;
}

.timeline-item[data-index="1"] {
    --index: 1;
}

.timeline-item[data-index="2"] {
    --index: 2;
}

.timeline-item[data-index="3"] {
    --index: 3;
}

.timeline-item[data-index="4"] {
    --index: 4;
}

.timeline-item[data-index="5"] {
    --index: 5;
}

.timeline-item[data-index="6"] {
    --index: 6;
}

.timeline-item[data-index="7"] {
    --index: 7;
}

.timeline-content {
    padding: 0px 10px;
    border-radius: 8px;
    max-width: 45%;
}

.timeline-content.left {
    margin-right: auto;
}

.timeline-content.right {
    margin-left: auto;
}

.timeline-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 4px solid #f5a942;
    border-radius: 50%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.timeline-year {
    background-color: #f5a942;
    color: white;
    display: inline-block;
    padding: 15px 28px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    max-width: 270px;
    text-align: center;
}

.timeline-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    height: 2px;
    color: #3d3d3d;
}

.timeline-text {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: #44403f;
}

/* Animation */
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive styling */
@media (max-width: 768px) {
    .heading {
        font-size: 2rem;
    }

    .timeline-container::after {
        left: 30px;
    }

    .timeline-content {
        max-width: calc(100% - 60px);
        margin-left: 60px !important;
        margin-right: 0 !important;
    }

    .timeline-dot {
        left: 30px;
    }

    .timeline-content.left,
    .timeline-content.right {
        margin-left: 60px;
        margin-right: 0;
    }

    .inden-learning ul li {
        width: 100%;
    }

    .inden-learning ul {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .heading {
        font-size: 1.5rem;
    }

    .timeline-year {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .timeline-title {
        font-size: 1.2rem;
    }

    .timeline-text {
        font-size: 0.9rem;
    }
}

@media (min-width: 768px) {
    .payment__form-container .payment__form-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
    }
}

@media (min-width: 1024px) {
    .payment__form-container .payment__form-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Three columns */
    }
}

.skill-listing--section {
    padding: 28px 0px;
}

/* Common css classes ---------------------------  */
.rounded-sm {
    border-radius: 0.25rem;
    /* 4 px  */
}

.rounded-md {
    border-radius: 0.375rem;
    /* 6 px  */
}

.rounded-lg {
    border-radius: 0.5rem;
    /* 8 px  */
}

.rounded-xl {
    border-radius: 0.75rem;
    /* 12 px  */
}

.rounded-2xl {
    border-radius: 1rem;
    /* 16 px  */
}

.w-full {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.h-full {
    height: 100%;
}

.drop-shadow-xs {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}

.drop-shadow-sm {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.drop-shadow-md {
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.12));
}

.drop-shadow-lg {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}

.drop-shadow-xl {
    filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.1));
}

.drop-shadow-2xl {
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}

/* Line height classes  ---------------------------------------------- */
.leading-3 {
    line-height: 0.75rem;
    /* 12px */
}

.leading-4 {
    line-height: 1rem;
    /* 16px */
}

.leading-5 {
    line-height: 1.25rem;
    /* 20px */
}

.leading-5-5 {
    line-height: 1.375rem;
    /* 22px */
}

.leading-6 {
    line-height: 1.5rem;
    /* 24px */
}

.leading-7 {
    line-height: 1.75rem;
    /* 28px */
}

.leading-8 {
    line-height: 2rem;
    /* 32px */
}

.leading-9 {
    line-height: 2.25rem;
    /* 36px */
}

.leading-10 {
    line-height: 2.5rem;
    /* 40px */
}

.drop-shadow-none {
    filter: drop-shadow(0 0 rgba(0, 0, 0, 0));
}

.overflow-hidden {
    overflow: hidden;
}

.hidden {
    display: none;
}

.justify-between {
    justify-content: space-between;
}

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

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

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow {
    flex-grow: 1;
}

.items-end {
    align-items: end;
}

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

.items-stretch {
    align-items: stretch;
}

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

.flex-row {
    flex-direction: row;
}

/* ----- Font Weight Style ----------------------------------- */
.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-semibold {
    font-weight: 600;
}

.font-weight-bold {
    font-weight: 700;
}

.font-weight-bolder {
    font-weight: 800;
}

.text-purple-primary {
    color: #9830a7;
}

.text-base-black {
    color: #222222;
}

.text-white {
    color: #ffffff;
}

.mt-1 {
    margin-top: 4px;
}

.mb-1 {
    margin-bottom: 4px;
}

.ml-1 {
    margin-left: 4px;
}

.mr-1 {
    margin-right: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mb-2 {
    margin-bottom: 8px;
}

.ml-2 {
    margin-left: 8px;
}

.mr-2 {
    margin-right: 8px;
}

.pt-1 {
    padding-top: 4px;
}

.pb-1 {
    padding-bottom: 4px;
}

.pl-1 {
    padding-left: 4px;
}

.pr-1 {
    padding-right: 4px;
}

.pt-2 {
    padding-top: 8px;
}

.pb-2 {
    padding-bottom: 8px;
}

.pl-2 {
    padding-left: 8px;
}

.pr-2 {
    padding-right: 8px;
}


/* Input Style ---------------------------------------------- */
.custom-number-input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

.custom-number-input[type="number"]::-webkit-outer-spin-button,
.custom-number-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Skill Section main section styles -----------------------------------  */
.skill-test__main-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 4px;

}

/* ------- Buttons Variants Types ------------------------------  -----------------*/
/* btn varaint 1  */
.btn-v-3d {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-3d-overlay.webp");
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 25px;
    padding: 6px 60px;
    color: white;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
}

.btn-v-3d::before {
    content: "Submit";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-3d.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 4px;
    font-size: 25px;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    z-index: 0;
    transition: all 150ms ease-in-out;
}

.btn-v-3d:active::before {
    top: -6px;
}

/* btn varaint 2 
.btn-v-3d-2 {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-3d-2.webp");
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 22px;
    padding: 6px 45px;
    color: white;
    filter: drop-shadow(1px 4px 0px #ffffff) drop-shadow(-1px 2px 0px #ffffff);
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
}
.btn-v-3d-2:active {
    filter: drop-shadow(0px 1px 0px #ffffff) drop-shadow(0px 1px 0px #ffffff);
    transform: translateY(3px);
}


.btn-v-3d-2.skill-test-option-submit.btn-1 {
    display: inline-block;
    zoom: 1;
    cursor: pointer;
    line-height: normal;
    text-align: center;
    vertical-align: initial;
    white-space: nowrap;
    -webkit-user-drag: none;
    background-color: #52B700;
    border: rgba(0, 0, 0, 0);
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
    min-width: 135px;
    padding: .46em 1.5em .54em;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    transition: box-shadow .1s linear;

    
}  */
.btn-v-3d-2.skill-test-option-submit {
    display: inline-block;
    zoom: 1;
    cursor: pointer;
    line-height: normal;
    text-align: center;
    vertical-align: initial;
    white-space: nowrap;
    -webkit-user-drag: none;

    border: rgba(0, 0, 0, 0);
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
    min-width: 135px;
    padding: .46em 1.5em .54em;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    transition: box-shadow .1s linear;
}

.btn-v-3d-2.skill-test-option-submit.btn-1 {
    background-color: #52B700;
}

.btn-v-3d-2.skill-test-option-submit.btn-2 {
    background-color: #EA4C89;
}

.btn-v-3d-2.skill-test-option-submit.btn-3 {
    background-color: #2c974b;
}

.btn-v-3d-2.skill-test-option-submit.btn-4 {
    background-color: #07c;
}

.btn-v-3d-2.skill-test-option-submit.btn-5 {
    background-color: #fb8332;
}

.btn-v-3d-2.skill-test-option-submit.btn-6 {
    background-color: #36A9AE;
}

.btn-v-3d-2.skill-test-option-submit.btn-7 {
    background-color: #ffe54c;
}

.btn-v-3d-2.skill-test-option-submit.btn-8 {
    background-color: #6200ee;
}

.btn-v-3d-2.skill-test-option-submit.btn-9 {
    background-color: hsl(345deg 100% 47%);
}


/* btn varaint 3 cloud  */
.btn-v-cloud {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-cloud.webp");
    width: 100%;
    height: 75px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 25px;
    padding: 6px 60px;
    color: white;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
    color: #0074A5;
}

.btn-v-cloud span {
    color: #0074A5;
}

.btn-v-cloud::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 41px;
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-cloud-overlay-1.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 4px;
    font-size: 25px;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    z-index: 0;
    transition: all 150ms ease-in-out;
}

.btn-v-cloud::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 22px;
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-cloud-overlay-2.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 4px;
    font-size: 25px;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    z-index: 0;
    transition: all 150ms ease-in-out;
}

.btn-v-cloud:hover::before,
.btn-v-cloud:hover::after {
    opacity: 0;
}

.btn-v-cloud:active,
.btn-v-cloud:active::before,
.btn-v-cloud:active::after {
    transform: scale(0.9);
}

/* btn varaint 4 rock  */
.btn-v-rock {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-rock.webp");
    width: 100%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 22px;
    padding: 6px 45px;
    color: white;
    filter: drop-shadow(0px 3px 0px #823920);
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
}

.btn-v-rock span {
    filter: drop-shadow(2px 3px 0px #823920);
    transition: all 150ms ease-in-out;
}

.btn-v-rock:hover span {
    filter: drop-shadow(1px 1px 1px #823920);
}

.btn-v-rock:active {
    filter: drop-shadow(0px 0px 0px #823920);
    transform: translateY(3px);
}

/* btn varaint 5 arrow  */
.btn-v-arrow {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-arrow.webp");
    width: 100%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 22px;
    padding: 6px 45px;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
}

.btn-v-arrow span {
    filter: drop-shadow(2px 3px 0px #ffffff);
    color: #134968;
    transition: all 150ms ease-in-out;
    padding-right: 8px;
    padding-bottom: 4px;
}

.btn-v-arrow:hover span {
    filter: drop-shadow(1px 1px 1px #ffffff);
}

.btn-v-arrow:active {
    transform: scale(0.9)
}

/* btn varaint 6 candy  */
.btn-v-candy {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-candy.webp");
    width: 100%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 22px;
    padding: 6px 45px;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
}

.btn-v-candy span {
    filter: drop-shadow(2px 2px 0px #85000A);
    color: #ffffff;
    transition: all 150ms ease-in-out;
}

.btn-v-candy:hover span {
    filter: drop-shadow(0px 0px 0px #85000A);
}

.btn-v-candy:active {
    filter: drop-shadow(0px 0px 0px #85000A);
    transform: scale(0.9)
}


/* btn varaint 7 candy 2  */
.btn-v-candy-2 {
    background-color: transparent;
    background-image: url("../images/skill-test/btn-bg-candy-2.webp");
    width: 100%;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 22px;
    padding: 6px 45px;
    color: white;
    filter: drop-shadow(0px 3px 0px #00454F);
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: none;
}

.btn-v-candy-2 span {
    filter: drop-shadow(2px 2px 0px #00454F);
    color: #ffffff;
    transition: all 150ms ease-in-out;
}

.btn-v-candy-2:hover {
    transform: translateY(2px);
    filter: drop-shadow(0px 1px 0px #00454F);
}

.btn-v-candy-2:active {
    transform: translateY(3px);
    filter: drop-shadow(0px 0px 0px #00454F);
}

/* ---------- Skill test Background Image variations ------------------------------  */
.skill-test__card-k-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 16px;
}

/*  */
/* .skill-test__card-k-bg-img-sky-orange {
    background-image: url("../images/skill-test/skill-test-k-bg-sky-orange.webp");
} */

table.g-2-u-8-1-L-1,
table.g-2-u-8-1-L-1 tr,
table.g-2-u-8-1-L-1 td,
table.borderless-td-with-input,
table.borderless-td-with-input tr,
table.borderless-td-with-input td {
    border: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}

.card-gpre-k-new-l3-u5 table.g-2-u-8-1-L-1 td,
.card-gpre-k-new-l3-u6 table.g-2-u-8-1-L-1 td,
.card-gk-new-l1-u10 table.g-2-u-8-1-L-1.mt-20 td,
.card-gk-new-l2-u7 table.g-2-u-8-1-L-1.gk-l2-u7 td,
.card-gk-new-l3-u3 table.g-2-u-8-1-L-1 td,
.card-gk-new-l3-u7 table.g-2-u-8-1-L-1 td {
    height: 60px;
    width: 80px;
    font-size: 24px;
}

.ten-frames .generic-table tr td,
.g-2-u-8-1-L-1 tr td {
    background-color: #ffffff;
    aspect-ratio: 140 / 98;
    width: auto;
    height: 65px !important;
    flex-shrink: 0;
    filter: drop-shadow(2px 2px 0px #00000040);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    color: #EA9909;
    font-weight: 600;
}

.l_230-u_1665 .ten-frames .generic-table tr td,
.g-2-u-8-1-L-1 tr td {
    border-collapse: collapse;
    border: 1px solid blue;
    filter: none;
    border-radius: 0;
    width: 50px;
}

.l_230-u_1665 .ten-frames .generic-table tr td,
.g-2-u-8-1-L-1 tr .ttitle {
    font-size: 18px !important;
    width: 120px !important;
}

.l_230-u_1665 .g-2-u-8-1-L-1 tr td input.skill-test-answer-input:focus,
.g-2-u-8-1-L-1 tr td input.skill-test-answer-input {
    height: auto;
    width: auto;
    border-bottom: 0;
    filter: none;
    background-image: none;
}

.l_230-u_1665 table.g-2-u-8-1-L-1,
table.g-2-u-8-1-L-1 tr,
table.g-2-u-8-1-L-1 td,
table.borderless-td-with-input,
table.borderless-td-with-input tr,
table.borderless-td-with-input td {
    gap: 0;
}

.l_229-u_1624 table.g-2-u-8-1-L-1 tr {
    gap: 0;
}

.l_229-u_1624 table.g-2-u-8-1-L-1 tr td {
    width: 50px;
    height: 50px;
    border: 1px solid;
    border-radius: 0;
    gap: 0;
    padding: 0;
}

.l_229-u_1624 table.g-2-u-8-1-L-1 tr td input.skill-test-answer-input {
    border-bottom: none;
    min-width: 45px;
    width: 99%;
}

.g-2-u-8-1-L-1 tr td input.skill-test-answer-input:focus,
.g-2-u-8-1-L-1 tr td input.skill-test-answer-input {
    border-bottom: 2px solid #EA9909;
    border-radius: 0;
    font-size: 20px !important;
    color: #EA9909;
    font-weight: 600 !important;
    outline: none;
}

/* skill test number box variants ------------------  */
.answer-set.btmized .answer-set__option-2 {
    font-family: "Nunito", sans-serif;
    background-image: url("../images/skill-test/skill-test-number-box-1.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    margin-top: 10px;
    */ text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 25px;
    gap: 4px;
    height: 50px;
    width: auto;
    line-height: 46px;
    color: #ffffff;
    border-radius: 0px !important;
    transition: all 0.2s ease-in-out;
}

.col-5-ten-frame {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    /* adjust spacing */
    max-width: 500px;
    margin: 0 auto;
}

.col-5-ten-frame>div {
    width: 60px;
    height: 60px;
    min-height: 60px;
    border: solid 2px rgb(51 82 255 / 31%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure dropped dots behave like static ones */
.col-5-ten-frame .drop-target .dropped {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    /* keep for draggable */
}

/* Keep consistent image sizing */
.col-5-ten-frame .drop-target .dropped img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.el_dropable.col-5-ten-frame {
    margin-bottom: 25px;
}

.col-5-ten-frame.el_dropable .dropped {
    margin-bottom: 0;
}


.small-font-italic {
    font-size: 14px !important;
    font-style: italic;
}

.container-bg-white {
    background: white !important;
    padding-top: 20px;
}

.imgMargin {
    margin-top: -20px;
}

.indexingImg {
    z-index: 999;
}

.box-100 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 300px;
}

.box-100>div {
    border: 1px solid #ccc;
    height: 30px;
    cursor: pointer;
    background: #fff;
}

.box-100>div.active {
    background: #4caf50;
    /* selected color */
}

.faq-container {
    padding: 50px 0px;
}

.grid-table {
    border-collapse: collapse;
}

.grid-table td {
    width: 40px;
    height: 40px;
    border: 1px solid #000;
}

.filled {
    background-color: lightblue !important;
}

.use-block-to-show-tens-ones #dt2 {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, 22px);
    grid-template-columns: repeat(5, 30px);
    align-items: end;
    row-gap: 2px;
    column-gap: 2px;
}

.sorting-skill {
    /* max-width: 800px; */
    margin: 0 auto;
    padding: 20px;
}

.sortable-only-wrap {
    display: flex;
    flex-direction: row;
    gap: 15px;
    min-height: 120px;
    width: 500px !important;
    padding: 20px;
    background: #f9f9f9;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: relative;
}

.btn-gery {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
    color: white;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
    /* min-height: 80px;
    min-width: 120px; */
    flex-shrink: 0;
    opacity: 1 !important;
}

/* Horizontal overlap effect */
.btn-gery.overlap-left {
    transform: translateX(-20px);
}

.btn-gery.overlap-right {
    transform: translateX(20px);
}

/* Placeholder styling */
.ui-sortable-placeholder {
    /* background: rgba(37, 117, 252, 0.2) !important;
    border: 2px dashed #2575fc !important;
    border-radius: 8px !important; */
    margin: 0 !important;
    width: auto;
    height: auto;
    flex-shrink: 0;
    visibility: visible !important;
}

/* Smooth animations */
.btn-gery.placed {
    animation: placed 0.3s ease;
}

@keyframes placed {
    0% {
        transform: scale(1.05);
    }

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

/* New layout ONLY for estimate questions */
.answer-set.estimate-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: 820px;
    margin: 0 auto;
    /* border: 1px solid #e2e2e2; */
    border-radius: 6px;
    background: #fff;
}

/* Options inside estimate row */
.answer-set.estimate-row .answer-set__option {
    /* flex: 1; */
    text-align: center;
    padding: 14px 10px;
    font-size: 18px;
    font-weight: 600;
    color: #f39c12;
    cursor: pointer;
}

/* Hover */
.answer-set.estimate-row .answer-set__option:hover {
    background: #fff7eb;
}

/* Selected / feedback states (reuse existing logic) */
.answer-set.estimate-row .answer-set__option.selected {
    background: #fff3e0;
    color: #f39c12;
}

/* Cost Calculation Styling */
.cost-breakdown-section {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    min-width: 500px !important;
}

/* Cost Items */
.answer-set-inline-entry.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 8px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #4a90e2;
    transition: all 0.2s ease;
}

.answer-set-inline-entry.cost-item:hover {
    background-color: #e8f4fc;
    /* transform: translateX(2px); */
}

.cost-description {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #2c3e50;
}

.item-name {
    font-weight: 600;
    min-width: 150px;
}

.equals-sign {
    color: #7f8c8d;
    font-weight: 500;
}

.cost-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dollar-sign {
    color: #27ae60;
    font-weight: 700;
    font-size: 16px;
}

.skill-test-answer-input.cost-field {
    min-width: 100px !important;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    color: #2c3e50;
    background-color: white;
    transition: all 0.2s ease;
}

/* Total Cost */
.answer-set-inline-entry.total-cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #e3f2fd;
    border-radius: 6px;
    border: 2px solid #1976d2;
    font-weight: 700;
}

.total-label {
    font-size: 18px;
    color: #1976d2;
    min-width: 150px;
}

.skill-test-answer-input.total-field {
    min-width: 100px !important;
    padding: 10px 12px;
    border: 2px solid #1976d2;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    text-align: right;
    color: #1976d2;
    background-color: white;
}

/* Change Calculation */
.change-calculation-section {
    padding: 20px;
    background-color: #f1f8e9;
    border-radius: 8px;
    border-left: 4px solid #689f38;
}

.change-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background: white;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
}

.money-given {
    color: #388e3c;
    font-weight: 700;
}

.minus-sign {
    color: #f57c00;
}

.total-spent {
    color: #d32f2f;
}

.skill-test-answer-input.change-field {
    min-width: 100px !important;
    padding: 8px 10px;
    border: 2px solid #ff9800;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    color: #d32f2f;
}

.change-result {
    color: #1976d2;
}

.change-label {
    font-size: 16px;
    font-weight: 600;
    color: #5d4037;
}

.skill-test-answer-input.final-change-field {
    width: 100px;
    padding: 10px 12px;
    border: 2px solid #689f38;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    text-align: right;
    color: #388e3c;
    background-color: white;
}

/* Main Wrapper - scoped */
.cost-calculation-wrapper {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 515px !important;
    margin: 0 auto;
}

/* Common Box Styling - scoped */
.cost-calculation-wrapper .static-box.cost-item-box,
.cost-calculation-wrapper .static-box.remaining-amount-box {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
}

.cost-calculation-wrapper .fraction-text>span,
.cost-calculation-wrapper .description-text>span {
    font-size: 19px !important;
    text-align: left;
    line-height: 24px;
    /* font-weight: 500;
    color: #2c3e50; */
}

/* Fraction Items - scoped */
.cost-calculation-wrapper .answer-set-inline-entry.fraction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    border-left: 4px solid #6c5ce7;
}

.cost-calculation-wrapper .fraction-description {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #2d3436;
}

.cost-calculation-wrapper .fraction-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Fraction Styling - scoped */
.cost-calculation-wrapper .frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
    font-weight: 700;
    color: #6c5ce7;
}

.cost-calculation-wrapper .frac>span {
    display: block;
    padding: 0.1em;
}

.cost-calculation-wrapper .frac span:first-child {
    border-bottom: 1.5px solid #6c5ce7;
    padding-bottom: 0;
}

.cost-calculation-wrapper .frac .symbol {
    display: none;
}

.cost-calculation-wrapper .frac .bottom {
    padding-top: 0;
}

/* Cost Input Section - scoped */
.cost-calculation-wrapper .cost-input-section {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cost-calculation-wrapper .dollar-sign {
    color: #00b894;
    font-weight: 700;
    font-size: 16px;
}

.cost-calculation-wrapper .skill-test-answer-input.fraction-input {
    min-width: 80px !important;
    padding: 8px 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    color: #2d3436;
    background-color: white;
}

/* Remaining Amount Box - scoped */
.cost-calculation-wrapper .static-box.remaining-amount-box {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
}

.cost-calculation-wrapper .answer-set-inline-entry.remaining-item,
.cost-calculation-wrapper .answer-set-inline-entry.decimal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #039be5;
}

.cost-calculation-wrapper .answer-set-inline-entry.decimal-item {
    border-left-color: #00acc1;
    background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
}

.cost-calculation-wrapper .description-text {
    font-size: 16px;
    color: #1565c0;
    font-weight: 500;
    flex: 1;
    min-width: 250px;
}

.cost-calculation-wrapper .skill-test-answer-input.remaining-input,
.cost-calculation-wrapper .skill-test-answer-input.decimal-input {
    min-width: 80px !important;
    padding: 8px 12px;
    border: 2px solid #039be5;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    color: #1565c0;
    background-color: white;
}

.cost-calculation-wrapper .skill-test-answer-input.decimal-input {
    border-color: #00acc1;
    color: #00838f;
}

.cost-calculation-wrapper .period {
    color: #666;
    font-weight: 400;
}

.cost-calculation-wrapper .cost-input-section {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border-left: 4px solid #4a90e2;
    margin-bottom: 10px;
}

.cost-calculation-wrapper .cost-input-section span {
    margin: 0 5px;
}

.cost-calculation-wrapper .skill-test-answer-input {
    min-width: 80px !important;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: right;
}

.cost-calculation-wrapper,
.cost-calculation-wrapper * {
    font-size: 19px !important;
}