mario-education 2.4.102-beta → 2.5.0-beta

package/dist/index.css

@@ -1,940 +1,894 @@
-/* add css module styles here (optional) */
-:root {
-    --custom-gray: #ccc;
-    --custom-blue: #0090e3;
-}
-
-._3ybTi {
-    margin: 2em;
-    padding: 0.5em;
-    border: 2px solid #000;
-    font-size: 2em;
-    text-align: center;
-}
-._1H0W8 {
-    height: 426px !important;
-}
-tbody._b-AXV {
-    height: 300px;
-    display: block;
-    width: 370px;
-    overflow: auto;
-    border: 2px solid #ced4da;
-    margin-top: 15px;
-}
-tbody._b-AXV::-webkit-scrollbar {
-    width: 10px;
-    background-color: #ced4da;
-}
-tbody._b-AXV tr td {
-    display: block;
-    width: 100%;
-    border: none;
-}
-tbody._b-AXV tr {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-._1fgfO {
-    width: 40px;
-    height: 40px;
-}
-
-._2YR4l {
-    width: 40px;
-    height: 20px;
-    border-radius: 4px;
-    box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-._114IY {
-    max-height: 600px;
-}
-
-._qE7J0 {
-    width: 70px;
-}
-
-._2BV3o {
-    width: 300px;
-    font-size: 1.5rem;
-    font-weight: 600;
-}
-
-._1P4F2 {
-    height: 40px;
-}
-
-._1SRmg {
-    font-weight: 500;
-}
-._ZDINp img {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-}
-
-._Kzkzd > i {
-    color: #f9e517;
-    font-size: 25px;
-    margin-right: 10px;
-}
-
-._Q0sF1 {
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-    margin-bottom: 8px;
-}
-
-._gu_yD {
-    font-weight: 550;
-    padding: 8px 16px;
-    border: 1px solid var(--custom-gray);
-    border-radius: 4px;
-    margin-bottom: 8px;
-    background-color: white;
-}
-
-._33tYy {
-    background-color: var(--custom-blue);
-    color: white;
-}
-
-._2VZin {
-    background: #fff;
-    border: 1px solid rgba(51, 51, 51, 0.1);
-    border-radius: 6px;
-    padding: 10px 17px;
-    margin-bottom: 10px;
-}
-
-._2VZin ._2M0vR{
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 13px;
-}
-
-._1d6uY {
-    margin-right: 10px;
-    position: relative;
-}
-
-._1d6uY:last-child {
-    margin-right: 0;
-}
-
-._1XSIo {
- position: absolute;
- width:100%;
- z-index: 100;
-}
-
-._3o8gR {
-  display: none;
-}
-
-._3ru37 {
-    background: #ffff;
-    border-radius: 4px;
-    min-width: 160px;
-    padding: 5px 0px 12px;
-    overflow: auto;
-    overflow-x: hidden;
-    border: 1px solid rgba(51, 51, 51, 0.1);
-    box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.05);
-}
-
-._1tQvL {
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-}
-
-._1tQvL:checked + ._3VNX5::before {
-    border: 0.35rem solid #3c65e0;
-}
-
-._3VNX5::before {
-    display: inline-block;
-    content: "";
-    height: 1.25rem;
-    width: 1.25rem;
-    margin-right: 0.625rem;
-    border: 0.1rem solid #cccccc;
-    background: #fcfcfc;
-    border-radius: 50%;
-}
-
-._3VNX5 {
-    display: flex;
-    align-items: center;
-    margin: 15px 0;
-}
-
-._3VNX5 > p {
-    margin-bottom: 0;
-}
-
-._I8kqz {
-    position: absolute;
-    z-index: 999;
-}
-
-._3xuSa {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-._15ep6 {
-    display: flex;
-    width: 40%;
-    padding-bottom: 10px;
-}
-._1WxAe {
-    border-right: 1px solid #d8dbe0;
-    height: 100vh;
-    padding: 20px 0px 35px 0px;
-    margin: 0;
-}
-._3_Ed7 {
-    text-align: center;
-    margin-bottom: 25px;
-    cursor: pointer;
-    height: 260px;
-}
-
-._3_Ed7 h5 {
-    font-size: 15px;
-}
-._3uUiv {
-    height: 200px;
-    border-radius: 10px;
-    background: #fff;
-    box-shadow: 0px 0px 10px 5px  #cdcdcd;
-    margin-bottom: 12px;
-}
-._3_Ed7._3sodH ._3uUiv {
-    box-shadow: 0px 0px 10px 5px #3c65e0;
-}
-._3_Ed7._3sodH h5 {
-    font-size: 15px;
-    color: #3c65e0;
-}
-
-._Az5Kt {
-    padding: 15px;
-    display: flex;
-    border-bottom: 1px solid #d8dbe0;
-    position: sticky;
-    justify-content: space-between;
-    align-items: center;
-}
-._Az5Kt h5 {
-    font-size: 15px;
-    margin-bottom: 0px;
-}
-._1Jrg_ {
-    padding: 15px 20px;
-}
-._3DVMZ {
-  display: flex;
-  flex: 0 0 17%;
-  flex-direction: column;
-  margin-right: 2rem;
-}
-._3DVMZ > div {
-  border: 1px solid #eaeaea;
-}
-h6._3zOGW {
-  text-decoration: underline;
-  font-size: 13px;
-  cursor: pointer;
-}
-._3DQwX {
-  padding: 10px 0px 20px;
-    border-bottom: 1px solid #cdcdcd;
-}
-
-._1Jgr2 {
-  padding: 16px;
-  min-height: 530px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-  border: 1px solid #ebeff2;
-  box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06);
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-._3Thdy {
-  max-width: 200px;
-}
-
-._24PRg {
-  font-family: 'Roboto' !important;
-  font-weight: 400;
-  margin-top: 2px;
-}
-._1WLBo {
-  font-size: 20px;
-}
-
-._10Pgm {
-  /* background: #E5E5E5; */
-}
-
-._3jPb_ {
-  font-size: 30px;
-}
-
-._1c43y {
-  color: #fc4747;
-}
-
-._F1afY {
-  color: #0dc16a;
-}
-
-._1kqUQ {
-  background: #f6f6f6;
-}
-
-._10hbz {
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 16px;
-}
-
-._2rmw_ {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 100%;
-  margin: 0;
-}
-
-._1tdQu {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 14px;
-}
-
-._2BvFN {
-  font-weight: 400;
-  font-size: 10px;
-  line-height: 12px;
-}
-
-._10hbz,
-._2rmw_,
-._1tdQu,
-._2BvFN {
-  font-family: "Roboto", sans-serif;
-}
-
-._2TBTW {
-  margin: 10px 0;
-}
-
-._3XXJp {
-  width: 35px;
-  color: #0d9994;
-  text-align: center;
-}
-
-._LCuWQ {
-  background: #cef7f5;
-  color: #0d9994;
-  border-radius: 8px;
-}
-
-._3x9D7 {
-  color: #1da370;
-}
-
-._2In63 {
-  border: none;
-  background: #fff;
-}
-
-._1Vhg_ {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-._6yLxd {
-  min-width: 200px;
-  margin-bottom: 10px;
-  height: 100%;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
-  padding: 8px;
-  width: 100%;
-}
-
-._h74SO {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  padding: 0px 16px;
-}
-
-._3e2pi {
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  max-width: 700px;
-}
-
-._ntUB6 {
-  min-width: 200px;
-  margin-left: 20px;
-  margin-bottom: 10px;
-  height: 38px;
-}
-
-._1DlZ4 {
-  width: 220px;
-  margin-right: 20px;
-  margin-bottom: 10px;
-  height: 38px;
-}
-
-._1tYDM {
-  max-width: 440px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-._3hSow {
-  background: #ffffff;
-  border: 1px solid #ebeff2;
-  box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06);
-  border-radius: 8px;
-}
-
-._1yuC9 {
-  min-width: 255px;
-  flex-basis: 19%;
-}
-
-._1yuC9 ._10hbz {
-  font-family: 'Roboto';
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-}
-
-._1yuC9:last-child {
-  padding: 20px 0px !important;
-}
-
-._1yuC9:last-child div {
-  width: 80%;
-  margin: 0 auto;
-}
-
-._2PMoX {
-  height: auto;
-  width: 100%;
-  -o-object-fit: scale-down;
-     object-fit: scale-down;
-    max-height: 300px;
-}
-
-._2PMoX._3ZX0b {
-  height: 300px;
-  width: 100%;
-  -o-object-fit: scale-down;
-     object-fit: scale-down;
-}
-
-._2asi- ._muT01 ._35BzZ {
-  font-size: 20px;
-}
-
-._2asi- {
-  overflow: hidden;
-  max-height: 470px;
-}
-
-@media (min-width: 1024px) {
-  ._3pkbc {
-    max-width: 60%;
-  }
-
-  ._16MpB {
-    max-width: 55%;
-  }
-}
-
-._CHu-i {
-  font-weight: 700;
-  font-size: 24px;
-  line-height: 116%;
-}
-
-._3Y-Dd {
-  overflow: hidden;
-  height: 416px;
-}
-
-@media (min-width: 2250px) {
-  ._3Y-Dd {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-@media (max-width: 720px) {
-  ._1YJnk {
-    padding-right: 20px;
-  }
-}
-
-
-/* new design; */
-._2eMbe {
-  box-shadow: 6px 0 18px rgb(0 0 0 / 6%);
-}
-
-._6ZvFg {
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-}
-
-._24CNV._6ZvFg::after {
-  content: "";
-  width: 1px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-  display: block;
-  background: rgba(51, 51, 51, 0.1);
-}
-
-._6ZvFg ._2vtSi {
-  background: #FFFFFF;
-  border-radius: 8px;
-  padding: 20px;
-  /* cursor: pointer; */
-}
-
-._IpsVf {}
-
-._IpsVf ._gzxWe {
-  color: "#B2B2B2";
-  font-size: 18px;
-}
-
-._2vtSi ._37IcR {
-  color: #D9D9D9;
-  display: flex;
-  align-items: center;
-}
-
-._2vtSi ._2G6Wz {
-  font-weight: 700;
-  font-size: 18px;
-  letter-spacing: 0.01em;
-  color: #262626;
-  font-family: "Roboto";
-}
-
-._2vtSi ._IpsVf {
-  display: flex;
-  align-items: center;
-}
-
-._3xpNv {
-  border-radius: 4px;
-  background: #ffff;
-}
-
-._3H5Ly {
-  padding: 6px 12px 6px 0px;
-  border-radius: 0 4px 4px 0;
-  background: #336DDA;
-  color: #fff;
-}
-
-._J_n-D {
-  padding: 5px 8px 7px 6px;
-  border-radius: 4px 0 0 4px;
-  background: #336DDA;
-}
-
-._2vtSi ._3AALV {
-  font-size: 16px;
-}
-
-._11Xjn {
-  cursor: pointer;
-}
-
-._2vtSi ._2htKu {
-  cursor: pointer;
-}
-
-._2htKu svg {
-  width: 20px !important;
-  height: auto !important;
-}
-
-._2vtSi ._1qXAT {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 100%;
-  color: #252733;
-}
-
-._3NgrB,
-._32fu3 {
-  background-color: #fff;
-}
-
-._3NgrB {
-  padding-bottom: 10px;
-}
-
-._3NgrB ._DmMzw {
-  padding-left: 10px;
-}
-
-._3NgrB ._1eUXn {
-  width: 10px;
-  height: 10px;
-  margin-right: 5px;
-  border-radius: 2px;
-}
-
-._3NgrB ._3hrrC ._Q-iiW {
-  font-weight: 400;
-  font-size: 14px;
-  letter-spacing: 0.01em;
-  color: #4d4d4d;
-  margin-bottom: 0;
-  font-family: 'Roboto';
-}
-
-._3NgrB ._cD4ey {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 10px;
-}
-
-._3NgrB ._24PRg {
-  font-weight: 400;
-  font-size: 16px;
-  letter-spacing: 0.01em;
-  color: #252733 !important;
-  font-family: "Roboto";
-}
-
-._3NgrB ._2HWhv>label {
-  font-weight: 600;
-  font-size: 18px;
-  color: #252733 !important;
-  font-family: "Roboto";
-}
-
-._2Hdbu {
-  width: 100%;
-  padding: 20px;
-}
-
-._2Hdbu ._3RJ2T {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-._3hrrC {
-  padding-right: 50px;
-}
-._38ikt{
-  /* height: 410px; */
-}
-
-._38ikt ._1TnWs {
-  position: absolute;
-  right: 60px;
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  width: 150px;
-}
-
-._38ikt ._1TnWs label {
-  color: #333333;
-  font-weight: 500;
-  font-size: 14px;
-  align-items: center;
-  text-align: right;
-  color: #333333;
-  margin-bottom: 5px;
-  font-family: "Roboto";
-}
-
-._38ikt ._1TnWs span {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: right;
-  color: #4d4d4d;
-  font-family: "Roboto";
-}
-
-._3BTJi ._1Ws0m {
-  margin-top: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-._3BTJi ._1Ws0m ._2HnO_ {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-._3BTJi ._1Ws0m ._1eUXn {
-  width: 12px;
-  height: 12px;
-  margin-right: 8px;
-  border-radius: 2px;
-}
-
-._3BTJi ._1Ws0m ._2BFJw {
-  padding-right: 8px;
-  color: #4d4d4d;
-  letter-spacing: 0.01em;
-  font-weight: 400;
-  font-size: 16px;
-  font-family: "Roboto";
-}
-
-._2az-l {
-  padding-right: 10px;
-  padding-left: 10px;
-  padding-bottom: 10px;
-}
-
-._2az-l ._1TnWs {
-  position: absolute;
-  right: 35px;
-  top: 10px;
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  width: 150px;
-}
-
-._2az-l ._1TnWs label {
-  color: #333333;
-  font-weight: 500;
-  font-size: 14px;
-  align-items: center;
-  text-align: right;
-  color: #333333;
-  margin-bottom: 5px;
-  font-family: "Roboto";
-}
-
-._2az-l ._1TnWs span {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: right;
-  color: #4d4d4d;
-  font-family: "Roboto";
-}
-
-._2j8fp {
-  position: relative;
-}
-
-._2j8fp ._1BN5z {
-  width: 100%;
-  bottom: 40px;
-  position: relative;
-
-}
-
-._2j8fp ._1rYav {
-  width: 80%;
-  margin: 35px auto 0px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-._2j8fp ._1rYav div {
-  font-family: "Roboto";
-  font-weight: 600;
-  font-size: 12px;
-}
-
-._2j8fp ._3-zAs {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  bottom: 20px;
-}
-
-._2j8fp ._3-zAs ._3RJ2T {
-  display: flex;
-  margin-right: 20px;
-  align-items: center;
-}
-
-._2j8fp ._3-zAs ._1eUXn {
-  width: 10px;
-  height: 10px;
-  margin-right: 5px;
-  border-radius: 2px;
-}
-
-._2j8fp ._3-zAs ._Q-iiW {
-  font-family: "Roboto";
-  font-weight: 400;
-  font-size: 14px;
-  letter-spacing: 0.01em;
-  color: #4d4d4d;
-  margin-bottom: 0;
-  margin: 0;
-}
-
-._2j8fp ._3-zAs ._cD4ey {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 10px;
-}
-
-._2j8fp ._3-zAs ._24PRg {
-  font-weight: 400;
-  font-size: 16px;
-  letter-spacing: 0.01em;
-  color: #252733;
-  font-family: "Roboto";
-}
-
-._2j8fp ._1PPhv {
-  position: absolute;
-  right: 22px;
-  top: 20px
-}
-
-._2j8fp ._1PPhv ._1rjWR {
-  margin-bottom: 22.5px;
-  font-weight: 400;
-  font-size: 12px;
-  text-align: center;
-  letter-spacing: 0.01em;
-  color: #9a9a9a;
-  font-family: "Roboto";
-}
-
-._2j8fp ._f-Ti4 {
-  position: relative;
-}
-
-._2j8fp ._TPa6x {
-  padding-right: 50px;
-}
-
-._1hZ_V {
-  width: 100%;
-  text-align: center;
-  font-weight: 400;
-  font-size: 16px;
-  text-align: right;
-  letter-spacing: 0.01em;
-  color: #808080;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Roboto";
-}
-
-
-._3L9WC {
-  font-size: 24px;
-  font-weight: 700;
-  margin-bottom: 5px !important;
-  font-family: "Roboto";
-}
-
-._1TFtP {
-  font-size: 16px;
-  font-weight: 400;
-  margin-bottom: 5px !important;
-}
-
-._37aqf {
-  display: flex !important;
-  align-items: center;
-}
-
-._1iabV {
-  font-size: 16px;
-  font-weight: 400;
-  font-family: "Roboto";
-}
-
-._1eQAg {
-  background-color: #28BE76;
-}
-._38ikt ._pFFg9{
-  font-weight: 400;
-  font-size: 16px;
-  text-align: center;
-  letter-spacing: 0.01em;
-  color: #808080;
-  margin-bottom: 20px;
-  font-family: "Roboto";
-}
-
-
-._1eqkj {
-  position: absolute;
-  /* opacity: 0; */
-  z-index: -999;
-  left: 0;
-  top: 0;
-}
-
-._1eqkj > img {
-  /* width: 100%; */
-  /* height: 100%; */
-  /* object-fit: cover; */
-}
-
-._2IQ8b {
-  position: absolute;
-  z-index: -9999;
-  width: 1792px;
-  opacity: 0;
-  top: -35px;
-  left: -630px;
+/* add css module styles here (optional) */
+:root {
+    --custom-gray: #ccc;
+    --custom-blue: #0090e3;
+}
+
+._3ybTi {
+    margin: 2em;
+    padding: 0.5em;
+    border: 2px solid #000;
+    font-size: 2em;
+    text-align: center;
+}
+._1H0W8 {
+    height: 426px !important;
+}
+tbody._b-AXV {
+    height: 300px;
+    display: block;
+    width: 370px;
+    overflow: auto;
+    border: 2px solid #ced4da;
+    margin-top: 15px;
+}
+tbody._b-AXV::-webkit-scrollbar {
+    width: 10px;
+    background-color: #ced4da;
+}
+tbody._b-AXV tr td {
+    display: block;
+    width: 100%;
+    border: none;
+}
+tbody._b-AXV tr {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+._1fgfO {
+    width: 40px;
+    height: 40px;
+}
+
+._2YR4l {
+    width: 40px;
+    height: 20px;
+    border-radius: 4px;
+    box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+._114IY {
+    max-height: 600px;
+}
+
+._qE7J0 {
+    width: 70px;
+}
+
+._2BV3o {
+    width: 300px;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+._1P4F2 {
+    height: 40px;
+}
+
+._1SRmg {
+    font-weight: 500;
+}
+._ZDINp img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+}
+
+._Kzkzd > i {
+    color: #f9e517;
+    font-size: 25px;
+    margin-right: 10px;
+}
+
+._Q0sF1 {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    margin-bottom: 8px;
+}
+
+._gu_yD {
+    font-weight: 550;
+    padding: 8px 16px;
+    border: 1px solid var(--custom-gray);
+    border-radius: 4px;
+    margin-bottom: 8px;
+    background-color: white;
+}
+
+._33tYy {
+    background-color: var(--custom-blue);
+    color: white;
+}
+
+._2VZin {
+    background: #fff;
+    border: 1px solid rgba(51, 51, 51, 0.1);
+    border-radius: 6px;
+    padding: 10px 17px;
+    margin-bottom: 10px;
+}
+
+._2VZin ._2M0vR{
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+}
+
+._1d6uY {
+    margin-right: 10px;
+    position: relative;
+}
+
+._1d6uY:last-child {
+    margin-right: 0;
+}
+
+._1XSIo {
+ position: absolute;
+ width:100%;
+ z-index: 100;
+}
+
+._3o8gR {
+  display: none;
+}
+
+._3ru37 {
+    background: #ffff;
+    border-radius: 4px;
+    min-width: 160px;
+    padding: 5px 0px 12px;
+    overflow: auto;
+    overflow-x: hidden;
+    border: 1px solid rgba(51, 51, 51, 0.1);
+    box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.05);
+}
+
+._1tQvL {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+}
+
+._1tQvL:checked + ._3VNX5::before {
+    border: 0.35rem solid #3c65e0;
+}
+
+._3VNX5::before {
+    display: inline-block;
+    content: "";
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.625rem;
+    border: 0.1rem solid #cccccc;
+    background: #fcfcfc;
+    border-radius: 50%;
+}
+
+._3VNX5 {
+    display: flex;
+    align-items: center;
+    margin: 15px 0;
+}
+
+._3VNX5 > p {
+    margin-bottom: 0;
+}
+
+._I8kqz {
+    position: absolute;
+    z-index: 999;
+}
+
+._3xuSa {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+._15ep6 {
+    display: flex;
+    width: 40%;
+    padding-bottom: 10px;
+}
+._3DVMZ {
+  display: flex;
+  flex: 0 0 17%;
+  flex-direction: column;
+  margin-right: 2rem;
+}
+._3DVMZ > div {
+  border: 1px solid #eaeaea;
+}
+h6._3zOGW {
+  text-decoration: underline;
+  font-size: 13px;
+  cursor: pointer;
+}
+._3DQwX {
+  padding: 10px 0px 20px;
+    border-bottom: 1px solid #cdcdcd;
+}
+
+._1Jgr2 {
+  padding: 16px;
+  min-height: 530px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #ebeff2;
+  box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+._3Thdy {
+  max-width: 200px;
+}
+
+._24PRg {
+  font-family: 'Roboto' !important;
+  font-weight: 400;
+  margin-top: 2px;
+}
+._1WLBo {
+  font-size: 20px;
+}
+
+._10Pgm {
+  /* background: #E5E5E5; */
+}
+
+._3jPb_ {
+  font-size: 30px;
+}
+
+._1c43y {
+  color: #fc4747;
+}
+
+._F1afY {
+  color: #0dc16a;
+}
+
+._1kqUQ {
+  background: #f6f6f6;
+}
+
+._10hbz {
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+._2rmw_ {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 100%;
+  margin: 0;
+}
+
+._1tdQu {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+._2BvFN {
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+._10hbz,
+._2rmw_,
+._1tdQu,
+._2BvFN {
+  font-family: "Roboto", sans-serif;
+}
+
+._2TBTW {
+  margin: 10px 0;
+}
+
+._3XXJp {
+  width: 35px;
+  color: #0d9994;
+  text-align: center;
+}
+
+._LCuWQ {
+  background: #cef7f5;
+  color: #0d9994;
+  border-radius: 8px;
+}
+
+._3x9D7 {
+  color: #1da370;
+}
+
+._2In63 {
+  border: none;
+  background: #fff;
+}
+
+._1Vhg_ {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+._6yLxd {
+  min-width: 200px;
+  margin-bottom: 10px;
+  height: 100%;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  padding: 8px;
+  width: 100%;
+}
+
+._h74SO {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 0px 16px;
+}
+
+._3e2pi {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  max-width: 700px;
+}
+
+._ntUB6 {
+  min-width: 200px;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  height: 38px;
+}
+
+._1DlZ4 {
+  width: 220px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  height: 38px;
+}
+
+._1tYDM {
+  max-width: 440px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+._3hSow {
+  background: #ffffff;
+  border: 1px solid #ebeff2;
+  box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+}
+
+._1yuC9 {
+  min-width: 255px;
+  flex-basis: 19%;
+}
+
+._1yuC9 ._10hbz {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+._1yuC9:last-child {
+  padding: 20px 0px !important;
+}
+
+._1yuC9:last-child div {
+  width: 80%;
+  margin: 0 auto;
+}
+
+._2PMoX {
+  height: auto;
+  width: 100%;
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+    max-height: 300px;
+}
+
+._2PMoX._3ZX0b {
+  height: 300px;
+  width: 100%;
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+}
+
+._2asi- ._muT01 ._35BzZ {
+  font-size: 20px;
+}
+
+._2asi- {
+  overflow: hidden;
+  max-height: 470px;
+}
+
+@media (min-width: 1024px) {
+  ._3pkbc {
+    max-width: 60%;
+  }
+
+  ._16MpB {
+    max-width: 55%;
+  }
+}
+
+._CHu-i {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 116%;
+}
+
+._3Y-Dd {
+  overflow: hidden;
+  height: 416px;
+}
+
+@media (min-width: 2250px) {
+  ._3Y-Dd {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media (max-width: 720px) {
+  ._1YJnk {
+    padding-right: 20px;
+  }
+}
+
+
+/* new design; */
+._2eMbe {
+  box-shadow: 6px 0 18px rgb(0 0 0 / 6%);
+}
+
+._6ZvFg {
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+._24CNV._6ZvFg::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  display: block;
+  background: rgba(51, 51, 51, 0.1);
+}
+
+._6ZvFg ._2vtSi {
+  background: #FFFFFF;
+  border-radius: 8px;
+  padding: 20px;
+  /* cursor: pointer; */
+}
+
+._IpsVf {}
+
+._IpsVf ._gzxWe {
+  color: "#B2B2B2";
+  font-size: 18px;
+}
+
+._2vtSi ._37IcR {
+  color: #D9D9D9;
+  display: flex;
+  align-items: center;
+}
+
+._2vtSi ._2G6Wz {
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: 0.01em;
+  color: #262626;
+  font-family: "Roboto";
+}
+
+._2vtSi ._IpsVf {
+  display: flex;
+  align-items: center;
+}
+
+._3xpNv {
+  border-radius: 4px;
+  background: #ffff;
+}
+
+._3H5Ly {
+  padding: 6px 12px 6px 0px;
+  border-radius: 0 4px 4px 0;
+  background: #336DDA;
+  color: #fff;
+}
+
+._J_n-D {
+  padding: 5px 8px 7px 6px;
+  border-radius: 4px 0 0 4px;
+  background: #336DDA;
+}
+
+._2vtSi ._3AALV {
+  font-size: 16px;
+}
+
+._11Xjn {
+  cursor: pointer;
+}
+
+._2vtSi ._2htKu {
+  cursor: pointer;
+}
+
+._2htKu svg {
+  width: 20px !important;
+  height: auto !important;
+}
+
+._2vtSi ._1qXAT {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+  color: #252733;
+}
+
+._3NgrB,
+._32fu3 {
+  background-color: #fff;
+}
+
+._3NgrB {
+  padding-bottom: 10px;
+}
+
+._3NgrB ._DmMzw {
+  padding-left: 10px;
+}
+
+._3NgrB ._1eUXn {
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+  border-radius: 2px;
+}
+
+._3NgrB ._3hrrC ._Q-iiW {
+  font-weight: 400;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  color: #4d4d4d;
+  margin-bottom: 0;
+  font-family: 'Roboto';
+}
+
+._3NgrB ._cD4ey {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+}
+
+._3NgrB ._24PRg {
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: 0.01em;
+  color: #252733 !important;
+  font-family: "Roboto";
+}
+
+._3NgrB ._2HWhv>label {
+  font-weight: 600;
+  font-size: 18px;
+  color: #252733 !important;
+  font-family: "Roboto";
+}
+
+._2Hdbu {
+  width: 100%;
+  padding: 20px;
+}
+
+._2Hdbu ._3RJ2T {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+._3hrrC {
+  padding-right: 50px;
+}
+._38ikt{
+  /* height: 410px; */
+}
+
+._38ikt ._1TnWs {
+  position: absolute;
+  right: 60px;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  width: 150px;
+}
+
+._38ikt ._1TnWs label {
+  color: #333333;
+  font-weight: 500;
+  font-size: 14px;
+  align-items: center;
+  text-align: right;
+  color: #333333;
+  margin-bottom: 5px;
+  font-family: "Roboto";
+}
+
+._38ikt ._1TnWs span {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: right;
+  color: #4d4d4d;
+  font-family: "Roboto";
+}
+
+._3BTJi ._1Ws0m {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+._3BTJi ._1Ws0m ._2HnO_ {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+._3BTJi ._1Ws0m ._1eUXn {
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+._3BTJi ._1Ws0m ._2BFJw {
+  padding-right: 8px;
+  color: #4d4d4d;
+  letter-spacing: 0.01em;
+  font-weight: 400;
+  font-size: 16px;
+  font-family: "Roboto";
+}
+
+._2az-l {
+  padding-right: 10px;
+  padding-left: 10px;
+  padding-bottom: 10px;
+}
+
+._2az-l ._1TnWs {
+  position: absolute;
+  right: 35px;
+  top: 10px;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  width: 150px;
+}
+
+._2az-l ._1TnWs label {
+  color: #333333;
+  font-weight: 500;
+  font-size: 14px;
+  align-items: center;
+  text-align: right;
+  color: #333333;
+  margin-bottom: 5px;
+  font-family: "Roboto";
+}
+
+._2az-l ._1TnWs span {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: right;
+  color: #4d4d4d;
+  font-family: "Roboto";
+}
+
+._2j8fp {
+  position: relative;
+}
+
+._2j8fp ._1BN5z {
+  width: 100%;
+  bottom: 40px;
+  position: relative;
+
+}
+
+._2j8fp ._1rYav {
+  width: 80%;
+  margin: 35px auto 0px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+._2j8fp ._1rYav div {
+  font-family: "Roboto";
+  font-weight: 600;
+  font-size: 12px;
+}
+
+._2j8fp ._3-zAs {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  bottom: 20px;
+}
+
+._2j8fp ._3-zAs ._3RJ2T {
+  display: flex;
+  margin-right: 20px;
+  align-items: center;
+}
+
+._2j8fp ._3-zAs ._1eUXn {
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+  border-radius: 2px;
+}
+
+._2j8fp ._3-zAs ._Q-iiW {
+  font-family: "Roboto";
+  font-weight: 400;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  color: #4d4d4d;
+  margin-bottom: 0;
+  margin: 0;
+}
+
+._2j8fp ._3-zAs ._cD4ey {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+}
+
+._2j8fp ._3-zAs ._24PRg {
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: 0.01em;
+  color: #252733;
+  font-family: "Roboto";
+}
+
+._2j8fp ._1PPhv {
+  position: absolute;
+  right: 22px;
+  top: 20px
+}
+
+._2j8fp ._1PPhv ._1rjWR {
+  margin-bottom: 22.5px;
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  letter-spacing: 0.01em;
+  color: #9a9a9a;
+  font-family: "Roboto";
+}
+
+._2j8fp ._f-Ti4 {
+  position: relative;
+}
+
+._2j8fp ._TPa6x {
+  padding-right: 50px;
+}
+
+._1hZ_V {
+  width: 100%;
+  text-align: center;
+  font-weight: 400;
+  font-size: 16px;
+  text-align: right;
+  letter-spacing: 0.01em;
+  color: #808080;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Roboto";
+}
+
+
+._3L9WC {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px !important;
+  font-family: "Roboto";
+}
+
+._1TFtP {
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 5px !important;
+}
+
+._37aqf {
+  display: flex !important;
+  align-items: center;
+}
+
+._1iabV {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: "Roboto";
+}
+
+._1eQAg {
+  background-color: #28BE76;
+}
+._38ikt ._pFFg9{
+  font-weight: 400;
+  font-size: 16px;
+  text-align: center;
+  letter-spacing: 0.01em;
+  color: #808080;
+  margin-bottom: 20px;
+  font-family: "Roboto";
+}
+
+
+._1eqkj {
+  position: absolute;
+  /* opacity: 0; */
+  z-index: -999;
+  left: 0;
+  top: 0;
+}
+
+._1eqkj > img {
+  /* width: 100%; */
+  /* height: 100%; */
+  /* object-fit: cover; */
+}
+
+._2IQ8b {
+  position: absolute;
+  z-index: -9999;
+  width: 1792px;
+  opacity: 0;
+  top: -35px;
+  left: -630px;
 }