@nyris/nyris-webapp 0.3.4 → 0.3.9

package/src/modules/LandingPage/common.scss

@@ -1,1304 +0,0 @@
-// TODO: CSS common all repo
-* {
-  margin: 0;
-  padding: 0;
-  font-family: "Montserrat" !important;
-}
-.w-100 {
-  width: 100% !important;
-}
-.w-50 {
-  width: 50% !important;
-}
-.textarea-ct {
-  padding: 5px 10px;
-}
-.bg-dark {
-  background-color: #2b2c46 !important;
-}
-.bg-pink2 {
-  background-color: #e31b5d !important;
-}
-a {
-  text-decoration: none !important;
-  &:hover {
-    color: #3e36dc !important;
-  }
-}
-.text-gray2 {
-  color: #55566b !important;
-}
-
-.box-gray2 {
-  background-color: #e9e9ec;
-}
-
-button {
-  min-width: auto !important;
-}
-.ml-auto {
-  margin-left: auto !important;
-}
-.mr-auto {
-  margin-right: auto !important;
-}
-.mt-auto {
-  margin-top: auto !important;
-}
-.w-100 {
-  width: 100%;
-}
-
-.fw-500 {
-  font-weight: 500 !important;
-}
-.fw-600 {
-  font-weight: 600 !important;
-}
-.fw-700 {
-  font-weight: 700 !important;
-}
-.text-dark {
-  color: #1e1f31;
-}
-.text-dark2 {
-  color: #2b2c46;
-}
-.text-white {
-  color: #fff !important;
-}
-
-.text-gray {
-  color: #55566b;
-}
-
-.text-f40 {
-  font-size: 40px !important;
-  line-height: 37px !important;
-}
-
-.text-btn-small {
-  font-family: "Montserrat";
-  font-weight: 500 !important;
-  font-size: 11px !important;
-  line-height: 14px !important;
-  text-transform: initial !important;
-}
-.bg-pink {
-  background-color: #f9d1df !important;
-}
-.text-red {
-  color: #e31b5d !important;
-}
-
-.text-f8 {
-  font-family: "Montserrat" !important;
-  font-weight: 500 !important;
-  font-size: 11px !important;
-  line-height: 14px !important;
-}
-
-.text-f9 {
-  font-family: "Montserrat";
-  font-size: 11px !important;
-  line-height: 14px !important;
-}
-
-.text-f12 {
-  font-size: 12px !important;
-  line-height: 16px !important;
-}
-.text-f13 {
-  font-size: 13px !important;
-  line-height: 16px !important;
-}
-
-.text-f40 {
-  font-size: 40px !important;
-  line-height: 37px !important;
-}
-
-.text-f16 {
-  font-size: 16px;
-  line-height: 17px;
-}
-.max-line-1 {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  max-height: 33px; /* fallback */
-  -webkit-line-clamp: 1; /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-
-.max-line-3 {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  // max-height: 33px; /* fallback */
-  -webkit-line-clamp: 3; /* number of lines to show */
-  -webkit-box-orient: vertical;
-  min-height: 42px;
-}
-
-.btn-ct {
-  border-right: 1px solid #e9e9ec;
-  font-weight: 500;
-  font-size: 11 !important;
-  line-height: 14px !important;
-  color: #2b2c46 !important;
-  font-family: "Montserrat" !important;
-  padding: 0 10px;
-  &::before,
-  &::after {
-    border: 0px !important;
-  }
-  .MuiSelect-select {
-    &:focus {
-      background-color: initial;
-    }
-  }
-}
-.box-wrap-loading {
-  position: absolute;
-  background: #00000075;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  top: 0;
-}
-
-.loadingSpinCT {
-  position: absolute;
-  width: 104px;
-  height: 104px;
-  top: calc(-104px / 2);
-  // background: #fff;
-  border-radius: 100%;
-  z-index: 111;
-  left: 0;
-  right: 0;
-  margin: auto;
-  &::after {
-    content: "loading";
-    position: absolute;
-    top: 0;
-    margin: auto;
-    bottom: 0;
-    width: 87%;
-    height: 87%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 112;
-    font-size: 14px !important;
-    line-height: 38px;
-    font-weight: 500;
-    color: #fff;
-    background: rgba(43, 44, 70, 1);
-    margin: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 100%;
-  }
-  &::before {
-    content: "";
-  }
-  .box-content-spin {
-    width: 104px;
-    height: 104px;
-    position: absolute;
-    border-radius: 100%;
-    animation: spin 2s linear infinite;
-    &:before {
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 0;
-      border-radius: 100%;
-      // background: linear-gradient(
-      //   180deg,
-      //   #3e36dc 0%,
-      //   #e31b5d 44.27%,
-      //   rgba(255, 255, 255, 0) 100%
-      // );
-      background: conic-gradient(
-        from 90deg at 50.46% 50.46%,
-        #322bb0 -30.73deg,
-        #3e36dc 111.58deg,
-        #00ff94 212.7deg,
-        #322bb0 329.27deg,
-        #3e36dc 471.58deg
-      );
-      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
-    }
-    @-webkit-keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-      }
-      100% {
-        -webkit-transform: rotate(360deg);
-      }
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-}
-
-.box-modal-default {
-  height: 80%;
-  width: 40%;
-  min-height: 468px;
-  min-width: 330px;
-  display: flex;
-  flex-direction: column;
-  // justify-content: space-between;
-  background-color: #fff;
-  position: relative;
-  &.box-modal-share {
-    min-height: 192px;
-    width: 186px;
-    box-shadow: 0px 0px 13px rgba(30, 31, 49, 0.3);
-    border-radius: 5px;
-    .box-content-box-share {
-      padding: 0px 10px 10px 10px;
-      .box-input {
-        display: flex;
-        padding: 5px 10px;
-        box-shadow: initial;
-        background-color: #f3f3f5;
-        input {
-          color: #55566b !important;
-        }
-      }
-      .box-media-share {
-        button {
-          width: 100%;
-          padding: 0;
-          .MuiButton-label {
-            justify-content: flex-start !important;
-          }
-        }
-        p {
-          text-transform: initial;
-        }
-      }
-    }
-  }
-  .icon-ct {
-    font-size: 11px;
-  }
-
-  .btn-carousel-left {
-    position: absolute;
-    top: 0;
-    left: -10px;
-    bottom: 0;
-    margin: auto;
-    z-index: 11;
-
-    &:hover {
-      background-color: initial !important;
-    }
-  }
-
-  .btn-carousel-right {
-    position: absolute;
-    top: 0;
-    right: -10px;
-    bottom: 0;
-    margin: auto;
-    z-index: 11;
-    &:hover {
-      background-color: initial !important;
-    }
-  }
-
-  .box-carosel {
-    height: 60%;
-    padding: 0px 14px;
-    min-height: 330px;
-    position: relative;
-    .carousel-root {
-      height: 100%;
-      .carousel-slider {
-        height: 100%;
-      }
-    }
-    .slider-wrapper{
-      height: 100%;
-      .slider{
-        height: 100%;
-      }
-    }
-    .icon-style {
-      border-radius: 100%;
-      position: absolute;
-      bottom: 16px;
-      left: 16px;
-      button {
-        padding: 0;
-      }
-      img {
-        width: 32px !important;
-        height: 32px;
-        padding: 0;
-      }
-    }
-    img {
-      width: fit-content !important;
-      // height: 330px;
-      // padding-bottom: 20px;
-      // max-width: 310px;
-    }
-    // overflow: hidden;
-    .control-dots {
-      margin: 0px;
-      li.dot {
-        box-shadow: none !important;
-        width: 5px;
-        height: 5px;
-        padding: 0;
-        background: #aaabb5;
-        &.active {
-          background: #55566b;
-        }
-      }
-    }
-  }
-
-  .box-content {
-    background-color: #fafafa;
-    padding: 16px;
-    min-height: 138px;
-    margin-top: auto;
-    height: 40%;
-    .MuiIconButton-label {
-      width: 100% !important;
-    }
-    .box-bottom {
-      margin-top: auto;
-      .btn-item {
-        width: fit-content !important;
-        min-width: auto !important;
-        img {
-          width: 20px;
-        }
-        padding: 0 5px;
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-    .box-gray {
-      background: linear-gradient(180deg, #aaabb5 0%, #55566b 100%);
-      &.box-support {
-        width: 21px;
-        height: 21px;
-        border-radius: 100%;
-      }
-      img {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-
-  .box-btn-next-item {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 140%;
-    margin: auto;
-    height: 36px;
-    left: -20%;
-    z-index: 22;
-    .icon-left,
-    .icon-right {
-      border-radius: 100%;
-      width: 32px;
-      height: 32px;
-      background: linear-gradient(0deg, #cc1854 0%, #e31b5d 100%);
-      .style-icon {
-        font-size: 11px;
-        color: #fff;
-      }
-    }
-  }
-}
-
-.wrap-main-item-result {
-  .box-top {
-    position: relative;
-    .box-icon-modal {
-      bottom: 10px;
-      left: 10px;
-      position: absolute;
-      border-radius: 100%;
-      filter: drop-shadow(0px 0px 2.66667px rgba(85, 86, 107, 0.502974));
-      display: block;
-      overflow: hidden;
-      z-index: 11;
-      button {
-        padding: 0px;
-      }
-    }
-    .box-image {
-      text-align: center;
-      background-color: #fff;
-      height: 159px;
-      z-index: 10;
-      position: relative;
-      .img-style {
-        // width: 160px !important;
-        height: 153px !important;
-      }
-      &:hover .box-hover {
-        display: flex;
-      }
-      .box-hover {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 10;
-        background: #56576cb3;
-        width: 100%;
-        height: 100%;
-        display: none;
-        justify-content: center;
-        align-items: center;
-        button {
-          font-size: 11px;
-          font-weight: 600;
-          line-height: 14px;
-          color: #fafafa;
-          text-transform: initial;
-        }
-      }
-    }
-  }
-
-  .box-content {
-    background-color: #e9e9ec;
-    padding: 8px 12px;
-    min-height: 82px;
-    justify-content: space-between;
-    .box-top {
-      .btn-item {
-        width: fit-content !important;
-        min-width: auto !important;
-        padding: 0 5px;
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-    .box-bottom {
-      .btn-item {
-        width: fit-content !important;
-        min-width: auto !important;
-        padding: 0 5px;
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-    .box-gray {
-      background: linear-gradient(180deg, #aaabb5 0%, #55566b 100%);
-      &.box-support {
-        width: 21px;
-        height: 21px;
-        border-radius: 100%;
-      }
-      img {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-}
-
-.box-content-main {
-  position: relative;
-  &.loading {
-    &::before {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: rgba(43, 44, 70, 0.8);
-      z-index: 111;
-    }
-
-    z-index: 111;
-  }
-  .box-thumb {
-    .box-camera,
-    .box-qr {
-      width: 42px;
-      height: 42px;
-      background: #d8d7f8;
-      border-radius: 2px;
-      margin-right: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      button {
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .exampleImages {
-      padding-bottom: 0px !important;
-      display: flex;
-      justify-content: center;
-    }
-    .useExampleImg {
-      margin-top: 0px !important;
-
-      .title-box {
-        font-size: 11px;
-        font-family: "Montserrat" !important;
-        line-height: 21px;
-        color: #fff !important;
-        text-align: center;
-        font-weight: 700;
-      }
-      .exImagesWrap {
-        img {
-          width: 42px;
-          height: 42px;
-          opacity: 1 !important;
-        }
-      }
-    }
-  }
-
-  .text-tractor {
-    font-size: 32px;
-    line-height: 21px;
-    color: #ffffff;
-    font-weight: 300;
-    font-family: "Montserrat";
-  }
-  .text-drop-file {
-    font-family: "Montserrat";
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 21px;
-    color: #ffffff;
-  }
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  background: #fff;
-  .box-content_top {
-    width: 100%;
-    min-height: calc(100% - 341px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding-bottom: 100px;
-    .box-logo {
-      width: 64px;
-      height: 64px;
-      background: linear-gradient(180deg, #fafafa 0%, #e9e9ec 100%);
-      border-radius: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .box-input {
-      margin-top: 27px;
-      max-width: 640px;
-    }
-    .box-bottom {
-      margin-top: 26px;
-      .text-bottom {
-        font-family: "Montserrat";
-        font-weight: 600;
-        font-size: 11px;
-        line-height: 14px;
-        color: #55566b;
-      }
-    }
-  }
-  .box-content_bottom {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    @media screen and (min-width: 2047px)  {
-      position: initial;
-      .loadingSpinCT{
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    .box-content-drop {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    .box-image {
-      width: 64px;
-      height: 64px;
-      background: linear-gradient(180deg, #56577c 0%, #2b2c46 100%);
-      border-radius: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 16px;
-    }
-    .box-content-main-drop {
-      background: linear-gradient(180deg, #3e36dc 0%, #2b2c46 100%);
-      padding: 21px;
-      height: 100%;
-      animation: gradient 15s ease infinite;
-      position: relative;
-      background-size: 100% 100%;
-      @media screen and (min-width: 2047px)  {
-        position: initial;
-      }
-      @keyframes gradient {
-        0% {
-          background-position: 0% 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-        100% {
-          background-position: 0% 50%;
-        }
-      }
-    }
-    .box-content-main {
-      background: #1e1f31;
-      padding: 21px;
-      height: 100%;
-      @media screen and (min-width: 2047px)  {
-        position: inherit;
-      }
-    }
-    .box-border {
-      border: 2px dashed #aaabb5;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-}
-.btn-input-search {
-  background: #f7f7f7;
-  border: 0px;
-  width: 32px;
-  height: 32px;
-  border-radius: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.inputFile {
-  // display: block !important;
-}
-.text-blue {
-  color: #3e36dc !important;
-}
-
-.box-blue {
-  background: #3e36dc;
-  box-shadow: 1.33333px 1.33333px 13.3333px rgba(0, 0, 0, 0.3);
-  border-radius: 16px;
-  padding: 5px;
-}
-.text-f20 {
-  font-family: "Montserrat";
-  font-size: 16px;
-  line-height: 21px;
-}
-.text-bold {
-  font-weight: 600 !important;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-// TODO: css result component
-.box-wrap-result-component {
-  min-height: calc(100vh - 32px);
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  // height: calc(100vh - 32px);
-  background-color: #fafafa;
-  .box-search {
-    margin: 0px auto;
-    padding: 32px 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #fff;
-    flex-direction: column;
-    width: 100%;
-    .box-filter {
-      margin-top: 26px;
-      background: #f3f3f5;
-      max-width: 1083px;
-      width: 100%;
-      min-height: 32px;
-    }
-  }
-  .box-result {
-    // max-width: 1280px;
-    // height: calc(100% - 164px - 32px);
-    // overflow: hidden;
-    height: calc(100vh - 164px - 104px);
-    // width: 1280px;
-    display: flex;
-    justify-content: space-between;
-    // margin: auto;
-    overflow: auto;
-    .col-left {
-      width: fit-content;
-      height: fit-content;
-      margin-right: 62px;
-      // width: 517px;
-      min-height: 462px;
-      // transform: rotate(90deg);
-      // transition: ease-in-out 0.5s;
-      position: relative;
-      &.toggle {
-        .box-title_col-left {
-          display: none;
-        }
-      }
-      .box-title_col-left {
-        position: absolute;
-        bottom: 10px;
-        left: 0;
-        right: 0;
-        margin: auto;
-        width: fit-content;
-      }
-      &.toggle {
-        width: 32px;
-        padding: 0px;
-        div {
-          // display: none;
-        }
-        .box-preview {
-          border: 0px;
-          .preview-item {
-          }
-        }
-        .button-toggle {
-          right: -5px;
-        }
-      }
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: #1e1f31;
-      padding: 32px;
-      .box-preview {
-        width: 100%;
-        // border: 2px dashed #55566b;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        height: 100%;
-        position: relative;
-        // transition: ease-in-out 0.5s;
-        .preview-item {
-          // height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          // width: 100%;
-          max-width: 500px;
-          max-height: 500px;
-        }
-      }
-      .button-toggle {
-        height: 32px;
-        width: 10px;
-        padding: 0px;
-        min-width: auto;
-        position: absolute;
-        right: -37px;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        background-color: #e9e9ec;
-        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-        border-radius: 5px;
-        // transition: ease-in-out 1s;
-      }
-    }
-    .col-right {
-      width: calc(100% - 462px);
-      // overflow: auto;
-      .box-item-result {
-        max-width: 714px;
-        @media screen and (min-width: 2047px) {
-          max-width: 1300px;
-        }
-        margin: 16px 0;
-        // margin-right: auto !important;
-        ul {
-          padding: 0;
-          display: flex;
-          flex-wrap: wrap;
-          // justify-content: center;
-          li {
-            list-style: none;
-            width: 174px;
-            &:last-child {
-              margin-right: auto !important;
-            }
-          }
-        }
-        .ais-InfiniteHits-loadMore {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .box-notify {
-    height: 32px;
-    background: #f3f3f5;
-    border-top: 1px solid #e9e9ec;
-    .item-notify {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.box-main-filter {
-  .item {
-    width: calc(44% - 20px);
-    padding: 0 10px;
-    .btn-ct {
-      padding: 2px !important;
-      border: 0px;
-    }
-  }
-  .item-one {
-    min-width: 243px;
-  }
-  .item-tow {
-    min-width: 122px;
-  }
-  .item-three {
-    min-width: 259px;
-  }
-  .item-four {
-    min-width: 125px;
-  }
-  .item-five {
-    min-width: 123px;
-  }
-  .item-six {
-    min-width: 115px;
-  }
-  .item-seven {
-    min-width: 94px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-// TODO: search history
-.wrap-main-search-history {
-  background-color: #fafafa;
-  height: 100%;
-  .box-main-top {
-    background-color: #fff;
-    padding: 32px 0;
-    margin: auto;
-    display: flex;
-    justify-content: center;
-  }
-
-  .box-main-bottom {
-    padding: 20px 16px;
-    height: calc(100% - 106px);
-    display: flex;
-    .col-left {
-      .box-time {
-        padding: 0;
-        li {
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-          .active {
-            font-weight: 700;
-          }
-          button {
-            padding: 0;
-          }
-        }
-      }
-    }
-    .col-right {
-      min-width: 568px;
-      margin-left: auto;
-      margin-right: auto;
-      // background-color: aquamarine;
-      overflow: auto;
-      .box-image-search {
-        width: 32px;
-        height: 32px;
-        border-radius: 2px;
-        background-color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-        img {
-          max-width: fit-content !important;
-        }
-      }
-      .MuiDataGrid-root {
-        flex: none !important;
-        border: 0 !important;
-        .MuiDataGrid-columnHeader:focus-within,
-        .MuiDataGrid-root .MuiDataGrid-cell:focus-within {
-          outline: none !important;
-        }
-        .MuiDataGrid-columnHeaderTitleContainer {
-          justify-content: space-between;
-        }
-        .MuiDataGrid-sortIcon {
-          opacity: 1;
-        }
-        .MuiDataGrid-window {
-          top: 43px !important;
-          // height: f;
-        }
-        .MuiDataGrid-iconSeparator {
-          display: none !important;
-        }
-        .MuiDataGrid-columnsContainer {
-          background: #aaabb5;
-          min-height: auto !important;
-          line-height: 12px !important;
-          .MuiSvgIcon-root {
-            color: #fff !important;
-          }
-        }
-        .MuiDataGrid-row {
-          max-width: inherit !important;
-          min-height: inherit !important;
-          &.Mui-selected {
-            background-color: inherit !important;
-          }
-        }
-        .MuiDataGrid-cell--textLeft.MuiDataGrid-cell--withRenderer,
-        .MuiDataGrid-cell--textCenter.MuiDataGrid-cell--withRenderer {
-          line-height: inherit !important;
-          min-height: inherit !important;
-          max-height: inherit !important;
-        }
-        .MuiDataGrid-cell {
-          border: 0px !important;
-          &:last-child {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Todo: css page saved
-.wrap-main-saved {
-  height: 100%;
-  background-color: #fafafa;
-  .box-main-top {
-    .box-top {
-      background-color: #fff;
-      padding: 32px 0;
-    }
-    .box-bottom {
-      margin-top: 26px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-    }
-  }
-
-  .box-main-bottom {
-    max-width: 726px;
-    width: 726px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-// TODO: css page Profile
-
-.wrap-main-profile {
-  max-width: 1280px;
-  margin: auto;
-  .box-col-left {
-    .box-top {
-      min-height: 170px;
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-direction: column;
-      padding: 0 94px;
-      background-color: #fff;
-    }
-    .box-bottom {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      height: calc(100% - 170px);
-      background: #fafafa;
-      .box-content {
-        width: 242px;
-        span {
-          font-size: 11px !important;
-          line-height: 14px !important;
-          color: #2b2c46 !important;
-          font-weight: 500 !important;
-          margin-bottom: 5px;
-        }
-        input {
-          min-height: 21px !important;
-          background: #f3f3f5 !important;
-          width: 100% !important;
-          border: 0px !important;
-        }
-        .btn-log-out {
-          background: #2b2c46;
-          border-radius: 0px !important;
-          padding: 10px 35px 10px 10px;
-          span {
-            color: #fff !important;
-            font-size: 11px !important;
-            line-height: 14px !important;
-            font-weight: bold !important;
-            margin: 0;
-            padding: 0;
-          }
-        }
-      }
-    }
-  }
-  .box-col-right {
-    .box-bg-image {
-      // background-image: url("/common/assets/images/Rectangle.png");
-    }
-  }
-}
-.wrap-input-search {
-  width: 640px;
-  .box-input-search {
-    justify-content: space-between;
-    background: #ffffff;
-    box-shadow: 0px 0px 6.66667px rgba(0, 0, 0, 0.2);
-    border-radius: 21px;
-    padding: 5px 10px !important;
-    height: 42px;
-    form {
-      width: 100%;
-      display: flex;
-    }
-    .input-search {
-      padding: 0 6px;
-      width: 100%;
-      border: 0px !important;
-      &::-webkit-search-cancel-button {
-        position: relative;
-        right: 20px;
-
-        -webkit-appearance: none;
-        height: 20px;
-        width: 20px;
-        border-radius: 10px;
-        background: red;
-      }
-      &:focus-visible {
-        outline: none !important;
-      }
-      &::before,
-      &::after {
-        display: none !important;
-      }
-    }
-    .btn-clear-text {
-      width: 32px;
-      height: 32px;
-      border-radius: 100%;
-      background-color: #f3f3f5;
-      z-index: 10;
-      cursor: pointer !important;
-    }
-  }
-}
-
-.box-panigation {
-  .ais-Pagination-list {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 22px;
-    li {
-      list-style-type: none;
-      margin: 0px !important;
-      padding: 0px 5px !important;
-      a {
-        font-weight: 500 !important;
-      }
-
-      font-size: 12px;
-      &.ais-Pagination-item--selected {
-        a {
-          font-weight: 700 !important;
-        }
-
-        font-size: 13px;
-      }
-    }
-  }
-}
-
-.wrap-main-result {
-  position: relative;
-  &.loading {
-    .loadingSpinCT {
-      display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      margin: auto;
-      left: 0;
-      right: 0;
-    }
-  }
-  .loadingSpinCT {
-    display: none;
-  }
-}
-
-.wrap-main-support-page {
-  // background-color: red;
-  min-height: calc(100vh - 32px);
-  // max-width: 1280px;
-  margin: auto;
-  .col-left {
-    width: 50%;
-    background-color: #322bb0;
-    .col-left__top {
-      background-color: #3e36dc;
-      min-height: 170px;
-    }
-
-    .col-left__bottom {
-      .box-form {
-        max-width: 224px;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 74px;
-        .MuiButton-label {
-          justify-content: flex-start !important;
-        }
-      }
-      .box-btn-upload {
-        .btn-upload {
-          background-color: #2b2c46;
-          border-radius: 3px;
-        }
-        .MuiIconButton-label {
-          width: 122px;
-          font-weight: 700 !important;
-          font-size: 11px !important;
-          line-height: 14px !important;
-          display: flex;
-          color: #fff;
-          justify-content: space-between;
-        }
-      }
-      .box-preview-image {
-        .box-image {
-          position: relative;
-          width: fit-content !important;
-          height: 106px !important;
-          border-radius: 2px;
-          padding: 5px 7px;
-          text-align: center;
-
-          .btn-close {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            padding: 0px;
-            .MuiButton-label {
-              justify-content: flex-end !important;
-            }
-          }
-        }
-      }
-    }
-  }
-  .col-right {
-    width: 50%;
-    background-image: url("../../common/assets/images/bg-support-page.svg");
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-}
-
-.border-rd-0 {
-  border-radius: 0px !important;
-}
-
-.hide-btn-arrow {
-  .btn-carousel-right,
-  .btn-carousel-left {
-    display: none !important;
-  }
-}