.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-btn {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
@media screen and (max-width: 625px) {
  .container-btn button {
    max-width: 100%;
  }
}
.image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  min-width: 374px;
}
.image img {
  width: 100%;
  border-radius: 8px;
}
@media screen and (max-width: 769px) {
  .image {
    min-width: 280px;
    width: 280px;
  }
}
@media screen and (max-width: 625px) {
  .image {
    min-width: 100%;
    width: 100%;
  }
}
.gridOne {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 5px;
}
.gridOne .image-grid-one {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  min-width: 374px;
}
.gridOne .image-grid-one img {
  width: 100%;
  border-radius: 8px;
}
@media screen and (max-width: 769px) {
  .gridOne .image-grid-one {
    min-width: 280px;
    width: 280px;
  }
}
@media screen and (max-width: 625px) {
  .gridOne .image-grid-one {
    min-width: 100%;
    width: 100%;
  }
}
.gridOne .card-one {
  max-width: 380px;
}
.gridOne .card-one .content {
  font-weight: 600;
  text-decoration: underline;
}
.gridOne .card-one .card-one-h1 {
  margin-bottom: 20px;
}
.gridOne .card-one .card-one-p {
  margin: 60px 0;
}
@media screen and (max-width: 840px) {
  .gridOne .card-one .card-one-h1 {
    margin-bottom: 10px;
  }
  .gridOne .card-one .card-one-p {
    margin: 30px 0;
  }
}
@media screen and (max-width: 625px) {
  .gridOne .card-one {
    padding-right: 0;
    padding-bottom: 30px;
    padding: 0 10px;
  }
  .gridOne .card-one .card-one-h1 {
    margin-bottom: 20px;
  }
  .gridOne .card-one .card-one-p {
    margin: 60px 0;
  }
}
@media screen and (max-width: 625px) {
  .gridOne {
    flex-direction: column;
    align-items: start;
  }
}
.gridOne-text h1,
.gridOne-text h3,
.gridOne-text p {
  color: #2c2d33;
}
.gridTwo {
  padding: 5px;
}
.gridTwo .gridTwo-text {
  text-align: center;
}
.gridTwo .gridTwo-text h1,
.gridTwo .gridTwo-text h3,
.gridTwo .gridTwo-text p {
  color: #2c2d33;
}
.gridTwo .gridTwo-text h1 {
  margin-bottom: 30px;
}
.gridTwo .gridTwo-text p {
  margin: 0;
}
.gridTwo .gridTwo-text .span {
  color: #ef4f30;
}
@media screen and (max-width: 769px) {
  .gridTwo .gridTwo-text h1 {
    margin-bottom: 10px;
  }
  .gridTwo .gridTwo-text h3 {
    margin: 0;
  }
}
@media screen and (max-width: 625px) {
  .gridTwo .gridTwo-text {
    margin: 0;
    margin-bottom: 10px;
    padding: 0 10px;
  }
}
.gridTwo .gridTwo-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  min-width: 374px;
  display: none;
  margin-top: 30px;
}
.gridTwo .gridTwo-image img {
  width: 100%;
  border-radius: 8px;
}
@media screen and (max-width: 769px) {
  .gridTwo .gridTwo-image {
    min-width: 280px;
    width: 280px;
  }
}
@media screen and (max-width: 625px) {
  .gridTwo .gridTwo-image {
    min-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 625px) {
  .gridTwo .gridTwo-image {
    display: flex;
  }
}
.gridTree {
  gap: 80px;
}
.gridTree .gridTree-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 625px) {
  .gridTree .gridTree-card .gridTree-card-text {
    margin: 0;
    padding: 0 10px;
  }
}
.gridTree .gridTree-card .gridTree-card-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  min-width: 374px;
  width: 450px;
  display: flex;
  align-items: center;
}
.gridTree .gridTree-card .gridTree-card-image img {
  width: 100%;
  border-radius: 8px;
}
@media screen and (max-width: 769px) {
  .gridTree .gridTree-card .gridTree-card-image {
    min-width: 280px;
    width: 280px;
  }
}
@media screen and (max-width: 625px) {
  .gridTree .gridTree-card .gridTree-card-image {
    min-width: 100%;
    width: 100%;
  }
}
.gridTree .gridTree-card .gridTree-card-p {
  margin-bottom: 20px;
}
.gridTree .gridTree-card .gridTree-card-h1 {
  margin-bottom: 20px;
}
@media screen and (max-width: 769px) {
  .gridTree .gridTree-card .gridTree-card-h1 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 769px) {
  .gridTree {
    gap: 50px;
  }
}
@media screen and (max-width: 625px) {
  .gridTree {
    gap: 10px;
  }
  .gridTree .gridTree-card {
    flex-direction: column;
    gap: 0;
  }
  .gridTree .gridTree-col-one {
    margin-bottom: 20px;
  }
  .gridTree .rtl-direction-mobile {
    direction: ltr !important;
  }
}
.gridTree-text {
  max-width: 600px;
}
.gridTree-text h1,
.gridTree-text h3,
.gridTree-text p {
  color: #2c2d33;
}
.card-icon {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.card-icon .icon {
  height: 40px;
  width: 40px;
  color: #f2f6f9;
}
@media screen and (max-width: 769px) {
  .card-icon .icon {
    width: 25px;
    height: 25px;
  }
}
@media screen and (max-width: 769px) {
  .card-icon {
    width: 60px;
    height: 60px;
  }
}
.gridFour {
  padding: 0 15px;
}
.gridFour .gridFour-container-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
  padding: 0 5px;
}
.gridFour .gridFour-container-text .gridFour-h1 {
  color: #2c2d33;
}
.gridFour .gridFour-container-text .gridFour-p {
  color: #b3b3b3;
  max-width: 600px;
  width: 100%;
}
@media screen and (max-width: 376px) {
  .gridFour .gridFour-container-text {
    margin-bottom: 20px;
  }
}
.gridFour .gridFour-container-card {
  display: flex;
  justify-content: center;
}
.gridFour .gridFour-container-card .gridFour-card {
  text-align: center;
  width: 223px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gridFour .gridFour-container-card .gridFour-card .gridFour-card-icon {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.gridFour .gridFour-container-card .gridFour-card .gridFour-card-icon .icon {
  height: 40px;
  width: 40px;
  color: #f2f6f9;
}
@media screen and (max-width: 769px) {
  .gridFour .gridFour-container-card .gridFour-card .gridFour-card-icon .icon {
    width: 25px;
    height: 25px;
  }
}
@media screen and (max-width: 769px) {
  .gridFour .gridFour-container-card .gridFour-card .gridFour-card-icon {
    width: 60px;
    height: 60px;
  }
}
.gridFour .gridFour-container-card .gridFour-card .gridFour-card-p {
  color: #b3b3b3;
}
.gridFour .gridFour-container-card .gridFour-card .gridFour-card-h1 {
  color: #b3b3b3;
  margin: 30px 0 15px;
}
.gridFour .detail {
  position: absolute;
  top: 40px;
  left: -50%;
  width: 100%;
  padding: 0 23%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gridFour .detail .point {
  min-height: 16px;
  min-width: 16px;
  background: transparent;
  border: 3px solid #757575;
  border-radius: 50%;
}
.gridFour .detail .line {
  width: 100%;
  border: 2px solid #757575;
  border-style: dashed;
}
@media screen and (max-width: 992px) {
  .gridFour .detail {
    display: none;
  }
}
.gridFive {
  margin: 120px 0;
}
@media screen and (min-width: 769px) {
  .gridFive .active-tablet {
    display: none;
  }
}
@media screen and (max-width: 769px) {
  .gridFive .active-tablet {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (min-width: 769px) {
  .gridFive .active-desktop {
    display: flex;
  }
}
@media screen and (max-width: 769px) {
  .gridFive .active-desktop {
    display: none;
  }
}
.gridFive .gridFive-container {
  background: #ef4f30;
  height: 292px;
  padding: 0 33px;
}
.gridFive .gridFive-container .gridFive-content {
  display: flex;
  justify-content: space-between;
  height: 100%;
  gap: 100px;
}
.gridFive .gridFive-container .gridFive-content .gridFive-image {
  height: 100%;
  min-width: 250px;
  max-width: 465px;
  width: 100%;
}
.gridFive .gridFive-container .gridFive-content .gridFive-image img {
  height: 100%;
}
@media screen and (max-width: 769px) {
  .gridFive .gridFive-container .gridFive-content .gridFive-image {
    max-width: 250px;
  }
}
.gridFive .gridFive-container .gridFive-content .gridFive-container-text {
  max-width: 350px;
  min-width: 220px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  text-align: end;
}
.gridFive .gridFive-container .gridFive-content .gridFive-container-text > h1 {
  text-wrap: nowrap;
}
.gridFive .gridFive-container .gridFive-content .gridFive-container-text .gridFive-text-color {
  color: #f2f6f9;
}
.gridFive .gridFive-container .gridFive-content .gridFive-container-text .gridFive-button {
  background: #f2f6f9 !important;
}
.gridFive .gridFive-container .gridFive-content .gridFive-container-text .gridFive-button:hover {
  background: #f2f6f9 !important;
  color: #ef4f30 !important;
}
@media screen and (max-width: 769px) {
  .gridFive .gridFive-container {
    height: 160px;
  }
}
.gridFive .gridFive-container-active-tablet-button {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding: 0 20px;
}
.gridFive .gridFive-container-active-tablet-button .gridFive-button {
  text-align: center;
  max-width: 320px;
}
.gridFive .gridFive-container-active-tablet-button .gridFive-button h1 {
  color: #ef4f30;
}
.gridFive .gridFive-container-active-tablet-button .gridFive-button p {
  color: #6d758c;
}
@media screen and (max-width: 769px) {
  .gridFive {
    margin: 60px 0;
  }
}
@media screen and (max-width: 376px) {
  .gridFive {
    margin: 30px 0;
  }
}
.gridSix {
  padding: 0 15px;
}
.gridSix .gridSix-container-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 90px;
  padding: 0 5px;
}
.gridSix .gridSix-container-text .gridSix-h1 {
  color: #2c2d33;
}
.gridSix .gridSix-container-text .gridSix-p {
  color: #b3b3b3;
  max-width: 730px;
}
@media screen and (max-width: 769px) {
  .gridSix .gridSix-container-text {
    margin-bottom: 40px;
  }
}
.gridSix .gridSix-container-card {
  display: flex;
  justify-content: center;
  height: 320px;
}
.gridSix .gridSix-container-card .gridSix-card {
  text-align: center;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.gridSix .gridSix-container-card .gridSix-card .gridSix-card-icon {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border-radius: 50%;
}
.gridSix .gridSix-container-card .gridSix-card .gridSix-card-icon .icon {
  height: 40px;
  width: 40px;
  color: #f2f6f9;
}
@media screen and (max-width: 769px) {
  .gridSix .gridSix-container-card .gridSix-card .gridSix-card-icon .icon {
    width: 25px;
    height: 25px;
  }
}
@media screen and (max-width: 769px) {
  .gridSix .gridSix-container-card .gridSix-card .gridSix-card-icon {
    width: 60px;
    height: 60px;
  }
}
.gridSix .gridSix-container-card .gridSix-card .gridSix-card-p {
  color: #b3b3b3;
  margin: 0;
  max-width: 240px;
}
.gridSix .gridSix-container-card .gridSix-card .gridSix-card-h1 {
  color: #b3b3b3;
  margin: 0;
}
@media screen and (max-width: 769px) {
  .gridSix .gridSix-container-card .gridSix-card .gridSix-card-button {
    max-width: 100%;
  }
}
@media screen and (max-width: 769px) {
  .gridSix .gridSix-container-card .gridSix-card {
    max-width: 320px;
    width: 100%;
  }
  .gridSix .gridSix-container-card .gridSix-card .gridSix-card-icon {
    width: 60px;
    height: 60px;
  }
  .gridSix .gridSix-container-card .gridSix-card .gridSix-card-p {
    max-width: 220px;
  }
}
@media screen and (max-width: 769px) {
  .gridSix .gridSix-container-card {
    height: 220px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.switch-dark-mode .toggle {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
}
.switch-dark-mode .input {
  display: none;
}
.switch-dark-mode .icon {
  grid-column: 1;
  grid-row: 1;
  transition: transform 500ms;
}
.switch-dark-mode .icon:hover {
  color: #ef4f30;
  transition: color 0.2s ease;
}
.switch-dark-mode .icon-moon {
  transition-delay: 200ms;
  color: #222222;
}
.switch-dark-mode .icon-sun {
  transform: scale(0);
  color: #f2f6f9;
}
.switch-dark-mode #switch:checked + .icon-moon {
  transform: rotate(360deg) scale(0);
}
.switch-dark-mode #switch:checked ~ .icon-sun {
  transition-delay: 200ms;
  transform: scale(1.2) rotate(360deg);
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.navbar {
  min-height: 65px;
  max-height: 65px;
  margin: 54px 0;
  padding: 12px 5px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.navbar .icon {
  height: 18px;
  width: 18px;
  color: #6d758c;
  font-size: 18px;
}
@media screen and (max-width: 875px) {
  .navbar .disabled {
    display: none !important;
  }
}
@media screen and (min-width: 875px) {
  .navbar .active {
    display: none !important;
  }
}
.navbar .color-gray-6 {
  color: #6d758c;
}
.navbar .cursor-pointer {
  cursor: pointer;
  transition: 0.2s ease;
}
.navbar .cursor-pointer:hover {
  color: #ef4f30;
}
.navbar .navbar-container-one {
  display: flex;
  align-items: center;
  gap: 62px;
}
.navbar .navbar-container-one div {
  display: flex;
  align-items: center;
  gap: 62px;
}
.navbar .navbar-container-two {
  display: flex;
  align-items: center;
  gap: 62px;
}
.navbar .navbar-container-two div {
  display: flex;
  align-items: center;
  gap: 40px;
}
.navbar .navbar-container-two button {
  min-width: 130px;
  height: 40px;
}
@media screen and (max-width: 376px) {
  .navbar .navbar-container-two div {
    gap: 25px;
  }
  .navbar .navbar-container-two button {
    display: none;
  }
}
@media screen and (max-width: 769px) {
  .navbar {
    margin-bottom: 54px;
    margin-top: 25px;
  }
}
@media screen and (max-width: 376px) {
  .navbar {
    margin-bottom: 44px;
    padding: 12px 20px;
  }
}
.title-drawer {
  display: flex;
  justify-content: space-between;
}
.title-drawer .icons-title-drawer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ul {
  padding: 0;
  margin: 0;
}
.ul li {
  margin: 20px 0;
}
.ul li .font-size {
  font-size: 18px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.backTop {
  right: 30px !important;
  margin: 20px !important;
  width: 50px !important;
  height: 50px !important;
}
.btn-support {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0cf453;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: all 0.3s;
  box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.1);
  font-size: 25px;
  color: #f2f6f9;
}
.btn-support:hover {
  opacity: 1;
  background: #0cf453;
}
@media (max-width: 376px) {
  .backTop {
    right: 0 !important;
    bottom: 0 !important;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-maintenance-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}
.container-maintenance-layout .container-img {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.container-maintenance-layout .container-img img {
  max-width: 200px;
}
.container-maintenance-layout .container-text {
  text-align: center;
}
.container-maintenance-layout .container-text h1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .container-maintenance-layout .container-text h1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .container-maintenance-layout .container-text h1 {
    line-height: 30px;
  }
}
.container-maintenance-layout .container-text p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .container-maintenance-layout .container-text p {
    font-weight: 500;
  }
}

.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,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)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap}
.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.conversation-search {
  position: relative;
  margin-bottom: 12px;
}
.conversation-search input {
  padding: 1em 2em;
  padding-left: 5em;
  width: 100%;
  border: none;
  background: #f5f5f5;
  color: #b3b3b3;
  font-size: 1em;
  border-radius: 0.5em;
  outline: none;
  height: 40px;
}
.conversation-search .anticon-search {
  font-size: 18px;
  color: #8a96a3;
  position: absolute;
  top: calc(50% - 9px);
  left: 24px;
}
.conversation-search-input {
  background: #eee;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
}
.conversation-search-input::placeholder {
  text-align: center;
}
.conversation-search-input:focus::placeholder {
  text-align: left;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.performer-advanced-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.performer-advanced-filter .ant-select,
.performer-advanced-filter .ant-select-selector,
.performer-advanced-filter input {
  height: 100% !important;
}
.performer-advanced-filter .custom {
  height: 40px;
}
.performer-advanced-filter .btn-category {
  cursor: pointer;
  height: 34px;
  min-width: 60px;
  max-width: max-content;
  text-wrap: nowrap;
  border-radius: 8px;
  padding: 0 10px;
  background: #c7d0d9;
  color: #41444d;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.performer-advanced-filter .btn-category:hover,
.performer-advanced-filter .btn-category:active,
.performer-advanced-filter .btn-category.hide {
  background: #878787;
  color: #f2f6f9;
}
.performer-advanced-filter .icon-search {
  cursor: pointer;
  font-size: 20px;
  color: #c7d0d9;
  margin: 0 5px;
  transition: all 0.2s ease;
}
.performer-advanced-filter .icon-search:hover,
.performer-advanced-filter .icon-search:active {
  color: #878787;
}
.performer-advanced-filter .input-category {
  position: relative;
  background: #ebeff2;
  height: 40px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebeff2;
  display: flex;
  overflow: hidden;
}
.performer-advanced-filter .input-category.hide {
  border-color: #878787;
}
.performer-advanced-filter .input-category .icon-input-category {
  cursor: pointer;
  width: 70px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #c7d0d9;
  transition: all 0.2s ease;
}
.performer-advanced-filter .input-category .icon-input-category:hover,
.performer-advanced-filter .input-category .icon-input-category:active {
  color: #878787;
}
.performer-advanced-filter .input-category .categories-input-category {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  padding: 2px;
  overflow: auto;
}
.performer-advanced-filter .input-category .categories-input-category p {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  color: #757575;
}
.performer-advanced-filter .input-category .categories-input-category .btn-category {
  height: 100%;
  min-width: max-content;
}
.performer-advanced-filter .container-categories {
  height: max-content;
  width: 100%;
  border-radius: 8px;
  background: #ebeff2;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.custom-row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 992px) {
  .custom-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 676px) {
  .custom-row {
    grid-template-columns: repeat(1, 1fr);
  }
}
.custom-row .custom-col {
  min-width: 100%;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-avatar-edit-profile-user .ant-form-item {
  padding: 5px;
}
.container-avatar-edit-profile-user .ant-form-item-label {
  height: max-content;
}
.container-avatar-edit-profile-user .ant-form-item-control {
  padding: 5px;
}
.container-avatar-edit-profile-user .avatar-edit-profile-user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 124px;
  border-radius: 8px;
  background: #ebeff2;
}
.container-avatar-edit-profile-user .avatar-edit-profile-user .ant-upload {
  margin: 0;
}
.container-form-mercado-pago {
  position: relative;
  background: #fff;
  border-radius: 8px;
}
.container-form-mercado-pago .title-form-mercado-pago {
  margin-bottom: 18px;
  padding: 16px 16px 0;
  display: flex;
  align-items: center;
}
.container-form-mercado-pago .title-form-mercado-pago h1 {
  font-size: 18px;
  color: #1a1a1a;
  font-weight: 600;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.block-user {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
@media screen and (max-width: 376px) {
  .payout-request-form .payout-request-form-buttons {
    flex-direction: column;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.title {
  color: #ef4f30;
  text-align: center;
}
.purchase-form {
  margin: 20px 0;
}
.purchase-form .ant-form {
  max-width: 550px;
  margin: auto;
}
.purchase-form .ant-form .ant-input-number-input {
  border-radius: 8px;
}
.input-wallet {
  height: 100%;
}
.current-balance {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 25px;
}
.current-balance svg {
  height: 60px;
  width: auto;
}
.current-balance .balance {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.coupon-dc {
  width: 100%;
}
.coupon-dc .ant-input {
  border-radius: 0px !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.coupon-dc .ant-btn {
  min-height: 40px;
  background: #757575;
  color: #f2f6f9;
  border-radius: 8px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.coupon-dc .ant-btn:hover {
  background: #6d758c;
  color: #f2f6f9;
}
.coupon-dc .ant-btn:active {
  background: #757575;
  color: #f2f6f9;
}
.total-price {
  margin: 0;
}
.total-price .amount {
  padding-left: 5px;
  font-size: 16px;
}
.wallet-qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;
  max-width: 540px;
  margin: auto;
}
.wallet-qr-code .qr-code {
  background: #696e80;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  max-width: 240px;
  margin: 20px 0;
  overflow: hidden;
}
.wallet-qr-code .qr-code img {
  width: 100%;
  height: 100%;
}
.container-add-founds {
  margin: auto;
  max-width: 1076px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.publisher-player {
  width: 100%;
  max-width: 100%;
  display: block;
  position: relative;
}
.publisher-player .processed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.publisher-player video {
  object-fit: cover;
  transform: rotateY(180deg);
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.custom-google-button {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d758c;
}
.custom-google-button svg {
  height: 22px;
  width: 22px;
}
.btn-google-login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.btn-google-login-box span.ant-typography {
  font-size: 12px;
}
.btn-google-login-box .btn-google-login {
  display: flex;
  justify-content: center;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.prd-card {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 4px;
  height: 250px;
  margin-bottom: 40px;
}
.prd-card .prd-info {
  position: absolute;
  bottom: -25px;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-transform: capitalize;
  color: #f2f6f9;
  background-color: #ef4f30;
  padding: 5px 10px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.prd-card .label-wrapper {
  position: absolute;
  right: auto;
  left: 0px;
  top: 10px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.prd-card .label-wrapper .label-wrapper-price {
  color: #f2f6f9;
  background-color: #c82538;
  padding: 3px 15px;
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 90% 50%, 100% 0);
  font-size: 11px;
  font-weight: 600;
  margin: 5px 0;
}
.prd-card .label-wrapper .label-wrapper-digital {
  color: #f2f6f9;
  background-color: #ef4f30;
  padding: 3px 15px;
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 90% 50%, 100% 0);
  font-size: 11px;
  font-weight: 600;
  margin: 5px 0;
}
.prd-card:hover {
  opacity: 0.9;
}
.prd-card:hover .prd-info {
  background-color: #c82538;
}
@media screen and (max-width: 769px) {
  .prd-card {
    height: 220px;
  }
}
@media screen and (max-width: 376px) {
  .prd-card {
    height: 150px;
  }
}
.address-option {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 30px;
}
.address-option .delete-btn {
  position: absolute;
  right: 0;
  top: 0;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.loading-screen {
  z-index: 99998;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f6f9;
}
.loading-screen img,
.loading-screen span {
  animation-name: loading;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
  text-align: center;
}
.loading-screen p {
  font-size: 16px;
}
@keyframes loading {
  0% {
    font-size: 25px;
    width: 150px;
  }
  25% {
    width: 160px;
    font-size: 27px;
  }
  50% {
    width: 170px;
    font-size: 30px;
  }
  75% {
    width: 160px;
    font-size: 27px;
  }
  100% {
    width: 150px;
    font-size: 25px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.padding-landing-page {
  padding: 0 20px;
}
@media screen and (max-width: 625px) {
  .padding-landing-page {
    padding: 0 5px;
  }
}
.gap {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
@media screen and (max-width: 769px) {
  .gap {
    gap: 60px;
  }
}
@media screen and (max-width: 376px) {
  .gap {
    gap: 30px;
  }
}
.margin-bottom {
  margin-bottom: 230px !important;
}
@media screen and (max-width: 769px) {
  .margin-bottom {
    margin-bottom: 40px !important;
  }
}
@media screen and (max-width: 376px) {
  .margin-bottom {
    margin-bottom: 30px !important;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.terms {
  max-width: 1000px;
}
.terms h1 {
  color: #ebeff2 !important;
}
.terms h2,
.terms h3 {
  color: #f2f6f9 !important;
}
.terms p {
  color: #cdcdcd !important;
}
.terms ul {
  list-style-type: none;
  color: #cdcdcd !important;
}
.terms ul li {
  color: #cdcdcd !important;
}
.terms ul li:before {
  content: '\2022   ';
  font-size: 20px;
  color: #cdcdcd !important;
}
.padding-folder-legal {
  margin: 40px 0;
  padding: 0 20px;
}
@media screen and (max-width: 376px) {
  .padding-folder-legal {
    margin: 20px 0;
  }
}
.padding-left {
  padding-left: 40px;
}
@media screen and (max-width: 376px) {
  .padding-left {
    padding-left: 20px;
  }
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1rem;
  font-family: 'Segoe UI', sans-serif;
  background: #161616;
  border: 1px solid #767676;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: #ebeff2;
}
table thead {
  border-bottom: 1px solid #767676;
  background-color: #343434 !important;
  color: #f2f6f9 !important;
}
table thead th {
  text-align: left;
  padding: 1rem;
  border-bottom: 2px solid #767676;
  font-weight: 600;
  font-size: 1.05rem;
}
table tbody tr:nth-child(even) {
  background-color: #222222;
}
table tbody tr td {
  padding: 1rem;
  border-bottom: 1px solid #767676;
  vertical-align: top;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.header-notification-container {
  width: 280px;
}
.header-notification-container .content-one {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header-notification-container .content-two {
  overflow: auto;
}
.header-notification-container .content-two .content-two-scrool {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px;
}
.header-notification-container .content-two .content-two-scrool .btn-content-two {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  max-width: max-content;
  min-width: max-content;
  padding: 0 10px;
  height: 20px;
  border-radius: 4px;
  color: #f2f6f9;
  background: #2d2d2e;
  border: none;
  text-transform: capitalize;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
@media screen and (max-width: 769px) {
  .header-notification-container .content-two .content-two-scrool .btn-content-two {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .header-notification-container .content-two .content-two-scrool .btn-content-two {
    font-weight: 500;
    line-height: 14px;
  }
}
.header-notification-container .content-two .content-two-scrool .btn-content-two:hover {
  color: #f2f6f9 !important;
  filter: brightness(1.5);
}
.header-notification-container .content-two .content-two-scrool .btn-content-two.active {
  background: #5a5a5a;
  transform: scale(0.95);
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.noti-card-container {
  cursor: default;
  overflow: hidden;
  position: relative;
  height: 52px;
  width: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.2s ease;
  padding: 0 5px;
  border: 1px solid #767676;
  margin-bottom: 10px;
}
.noti-card-container:hover,
.noti-card-container:active {
  color: white !important;
}
.noti-card-container:hover .noti-icon,
.noti-card-container:active .noti-icon,
.noti-card-container:hover .after,
.noti-card-container:active .after {
  border-color: #5a5a5a;
}
.noti-card-container p {
  margin: 0;
}
.noti-card-container .noti-not-displayed {
  min-width: 8px;
  min-height: 8px;
  background: #878787;
  border-radius: 50%;
  visibility: visible;
}
.noti-card-container .container-noti-icons {
  position: relative;
  min-width: 50px;
  height: 100%;
}
.noti-card-container .noti-icon {
  position: absolute;
  top: 3px;
  left: 0;
  min-width: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4f30;
  border-radius: 50%;
  overflow: hidden;
  color: #f2f6f9;
  font-size: 22px;
}
.noti-card-container .noti-icon:nth-child(2) {
  left: 4px !important;
}
.noti-card-container .noti-icon:nth-child(3) {
  left: 7px !important;
}
.noti-card-container .after {
  position: absolute;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 2px;
  bottom: 3px;
  z-index: 10;
  color: #ebeff2;
  font-size: 20px;
  line-height: 28px;
  background: #ef4f30;
  border: 2px solid #ebeff2;
  border-radius: 4px;
}
.noti-card-container .noti-container-info {
  width: 70%;
  color: #757575;
}
.noti-card-container .noti-card-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.noti-card-container .noti-card-name .name {
  padding-right: 4px;
  text-transform: capitalize;
  color: #c7d0d9;
}
.noti-card-container .noti-card-name .timer {
  padding-right: 10px;
  font-size: 9px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.005em;
  text-wrap: nowrap;
  color: #c7d0d9;
}
.noti-card-container .close-icon {
  cursor: pointer;
  position: absolute;
  color: #ebeff2;
  font-size: 16px;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: #5a5a5a;
  transition: 0.2s ease;
}
.noti-card-container .close-icon:hover,
.noti-card-container .close-icon:active {
  color: #ef4f30;
  background: transparent;
}
.noti-card-container.isRead .noti-icon,
.noti-card-container.isRead .after {
  background: #c7d0d9;
}
.noti-card-container.isRead .noti-not-displayed {
  visibility: hidden;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.sidebar-notification-drawer.settings {
  z-index: 99999;
}
.sidebar-notification-drawer .container-center {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-notification-drawer .container-center p {
  margin: 0;
  color: #b3b3b3;
}
.sidebar-notification-drawer .container-center svg {
  cursor: pointer;
  color: #757575;
  font-size: 16px;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sidebar-notification-drawer .container-center svg:hover {
  color: #f2f6f9 !important;
  filter: brightness(1.5) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.5));
}
.sidebar-notification-drawer .container-center svg:active {
  transform: scale(0.95);
}
.sidebar-notification-drawer .ant-drawer-mask {
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px);
}
.sidebar-notification-drawer .ant-drawer-content {
  background: #222222;
}
.sidebar-notification-drawer .ant-drawer-body {
  padding: 0 10px 10px;
}
.sidebar-notification-drawer .ant-drawer-body .ant-divider {
  margin: 0;
  margin-bottom: 20px;
}
.sidebar-notification-drawer .ant-drawer-header {
  padding: 10px 0;
  border: none;
}
.sidebar-notification-drawer .no-notifications-found {
  text-align: center;
  margin: 0;
  color: #b3b3b3;
}
.sidebar-notification-drawer.settings {
  color: #c7d0d9;
}
.sidebar-notification-drawer.settings .ant-drawer-content-wrapper {
  max-height: max-content;
}
.sidebar-notification-drawer.settings .ant-drawer-mask {
  background: rgba(51, 51, 51, 0);
  backdrop-filter: blur(2px);
}
.sidebar-notification-drawer.settings .ant-divider {
  margin: 0;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.sidebar-notification-drawer-settings-body {
  padding: 10px;
}
.sidebar-notification-drawer-settings-body p {
  margin: 0;
}
.sidebar-notification-drawer-settings-body .space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-notification-drawer-settings-body .content-one {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-notification-drawer-settings-body .content-two {
  display: flex;
  flex-direction: column;
}
.sidebar-notification-drawer-settings-body .content-two .ant-checkbox-wrapper {
  margin: 0;
}
.sidebar-notification-drawer-settings-body .content-two .ant-checkbox-wrapper .ant-checkbox {
  overflow: hidden;
  border-radius: 2px;
}
.sidebar-notification-drawer-settings-body .content-two .ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
  border-color: #ef4f30;
  background: transparent;
}
.sidebar-notification-drawer-settings-body .content-two .ant-checkbox-wrapper:hover .ant-checkbox-inner {
  background: #9d40ff80;
}
.sidebar-notification-drawer-settings-body .content-two .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
  background: #ef4f30;
  border-color: #ef4f30;
}
.sidebar-notification-drawer-settings-body .content-two .ant-checkbox-wrapper .ant-checkbox-checked::after {
  border-color: #ef4f30 !important;
}
.sidebar-notification-drawer-settings-body .content-tree {
  margin: 10px 0;
}
.sidebar-notification-drawer-settings-body .content-four {
  padding-top: 5px;
}
.sidebar-notification-drawer-settings-body .content-four .btn-settings {
  max-width: 100%;
  height: 36px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.main-header {
  border-bottom: 1px solid #c7d0d9;
  background-color: #f2f6f9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 999;
  height: 65px;
  padding: 0 20px;
}
.main-container-header {
  margin: auto;
  max-width: 1076px;
  width: 100%;
}
.header.ant-layout-header {
  padding: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 9;
  align-items: center;
  background-color: transparent;
  line-height: unset;
  gap: 20px;
}
.header.ant-layout-header .logo-header {
  cursor: pointer;
}
.header.ant-layout-header .logo-header img {
  transition: all 0.2s ease;
}
.header.ant-layout-header .logo-header img:hover {
  filter: brightness(1.5) drop-shadow(0 0 16px #ff7800);
}
.header.ant-layout-header .logo-header img:active {
  transform: scale(0.93);
}
@media screen and (max-width: 769px) {
  .header.ant-layout-header .logo-header img {
    width: 30px;
  }
}
.header.ant-layout-header .nav-bar {
  width: 100%;
  display: flex;
  justify-content: end;
  gap: 6%;
}
@media screen and (max-width: 376px) {
  .header.ant-layout-header .nav-bar .disabled {
    display: none;
  }
}
.header.ant-layout-header .nav-bar .btn-dark-and-light {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header.ant-layout-header .nav-bar .btn-dark-and-light div {
  height: 24px;
  width: 24px;
}
.header.ant-layout-header .nav-bar .container-btn-dark-and-avatar {
  display: flex;
  gap: 20px;
}
.header.ant-layout-header .buttons-login-and-register {
  display: flex;
  gap: 10px;
  align-items: center;
}
.header.ant-layout-header .buttons-login-and-register .button-login-or-register {
  height: 35px;
  min-width: 100px;
  font-size: 14px;
}
@media screen and (max-width: 376px) {
  .header.ant-layout-header .buttons-login-and-register .button-login-or-register {
    min-width: 80px;
    font-size: 12px;
  }
}
.header.ant-layout-header .button {
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.header.ant-layout-header .button:hover {
  color: #ef4f30;
  background-color: #ef4f30;
}
.iconButton {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.iconButton:hover {
  background-color: #ef4f30;
}
.iconButton:hover .iconFont {
  color: #ef4f30;
}
.iconButton + .iconButton {
  margin-left: 8px;
}
.iconButton .iconFont {
  color: #b2b0c7;
  font-size: 24px;
}
.notification {
  padding: 24px 0;
  width: 320px;
}
.notification .notificationItem {
  transition: all 0.3s;
  padding: 12px 24px;
  cursor: pointer;
}
.notification .notificationItem:hover {
  background-color: #ef4f30;
}
.notification .clearButton {
  text-align: center;
  height: 48px;
  line-height: 48px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.notification .clearButton:hover {
  background-color: #ef4f30;
}
.notificationPopover .ant-popover-inner-content {
  padding: 0;
}
.notificationPopover .ant-popover-arrow {
  display: none;
}
.notificationPopover .ant-list-item-content {
  flex: 0;
  margin-left: 16px;
}
.nav-icons {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.nav-icons .icon {
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #2c2d33;
  transition: 0.3s ease;
}
.nav-icons .icon:hover,
.nav-icons .icon.active {
  color: #ef4f30;
}
.nav-icons .icon .link {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.nav-icons .icon .cart-total {
  position: absolute;
  top: -30%;
  left: 50%;
}
.nav-icons .BsSearchHeart {
  width: 20px;
  height: 20px;
}
.avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c2d33;
  transition: 0.3s ease;
}
.avatar:hover {
  color: #ef4f30;
}
.ant-menu.ant-menu-sub li a:hover {
  color: #333;
}
.ant-menu.ant-menu-sub li.ant-menu-item-selected a {
  color: #333 !important;
}
.switchTheme {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  overflow: hidden;
  transition: all 0.3s;
  color: #8a96a3;
  position: absolute;
  bottom: 0;
  left: 0;
}
.switchTheme span {
  white-space: nowrap;
  overflow: hidden;
  font-size: 11px;
}
.switchTheme .anticon {
  margin-right: 4px;
  font-size: 15px;
}
.profile-drawer .ant-drawer-mask {
  border: none !important;
  box-shadow: none !important;
}
.profile-drawer .ant-drawer-content {
  background: #ebeff2;
}
.profile-drawer .profile-user {
  display: flex;
}
.profile-drawer .profile-user .avatar {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-drawer .profile-user .profile-name {
  display: flex;
  width: 100%;
  flex-direction: column;
  text-transform: capitalize;
  font-size: 13px;
}
.profile-drawer .profile-user .profile-name .sub-name {
  color: #8a96a3;
  font-size: 11px;
  text-transform: none;
}
.profile-drawer .sub-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 10px;
}
.profile-drawer a {
  display: inline-flex;
  color: #666;
}
.profile-drawer a.user-balance {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
.profile-drawer a.user-balance svg {
  height: 25px;
  width: auto;
}
.profile-drawer a.user-balance .icon-dollar svg {
  height: 19px;
}
.profile-drawer a.user-balance .anticon.anticon-plus-circle {
  color: #ef4f30;
}
.profile-drawer a.user-balance .anticon.anticon-plus-circle svg {
  height: unset;
}
.profile-drawer a .anticon {
  font-size: 18px;
  margin: 0 5px;
}
.profile-drawer .ant-drawer-body {
  padding: 10px 15px 60px;
}
.profile-drawer .ant-drawer-body .profile-menu-item .menu-item {
  padding: 5px;
  margin-bottom: 2px;
  width: 100%;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.8;
}
.profile-drawer .ant-drawer-body .profile-menu-item .menu-item.active,
.profile-drawer .ant-drawer-body .profile-menu-item .menu-item:hover {
  background-color: #5a5a5a;
  color: #f2f6f9;
  border-radius: 5px;
}
.profile-drawer .ant-drawer-body .profile-menu-item .menu-item .anticon {
  font-size: 18px;
  color: #666;
}
.profile-drawer .ant-drawer-body .profile-menu-item .ant-divider {
  margin: 10px 0;
}
@media (max-width: 769px) {
  .nav-bar .nav-icons .logo-nav {
    width: 75%;
  }
}
@media (max-width: 376px) {
  .nav-bar .nav-icons {
    gap: 10px;
  }
  .nav-bar .nav-icons li {
    font-size: 14px;
    padding: 2px 12px;
  }
  .nav-bar .nav-icons li span {
    font-size: 25px;
  }
  .nav-bar .nav-icons li .cart-total {
    top: -2px;
    right: 2px;
  }
  .nav-bar .nav-icons .logo-nav {
    width: 50%;
  }
  .nav-bar .nav-icons .logo-nav img {
    height: 23px;
    width: auto;
  }
}

.emoji-mart,
.emoji-mart * {
  box-sizing: border-box;
  line-height: 1.15;
}

.emoji-mart {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 16px;
  display: inline-block;
  color: #222427;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}

.emoji-mart .emoji-mart-emoji {
  padding: 6px;
}

.emoji-mart-bar {
  border: 0 solid #d9d9d9;
}
.emoji-mart-bar:first-child {
  border-bottom-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.emoji-mart-bar:last-child {
  border-top-width: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.emoji-mart-anchors {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 6px;
  line-height: 0;
}

.emoji-mart-anchor {
  position: relative;
  display: block;
  flex: 1 1 auto;
  color: #858585;
  text-align: center;
  padding: 12px 4px;
  overflow: hidden;
  transition: color .1s ease-out;
  margin: 0;
  box-shadow: none;
  background: none;
  border: none;
}
.emoji-mart-anchor:focus { outline: 0 }
.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
  color: #464646;
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
  bottom: 0;
}

.emoji-mart-anchor-bar {
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 3px;
  background-color: #464646;
}

.emoji-mart-anchors i {
  display: inline-block;
  width: 100%;
  max-width: 22px;
}

.emoji-mart-anchors svg,
.emoji-mart-anchors img {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.emoji-mart-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 270px;
  padding: 0 6px 6px 6px;
  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
}

.emoji-mart-search {
  margin-top: 6px;
  padding: 0 6px;
  position: relative;
}

.emoji-mart-search input {
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 5px 25px 6px 10px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  outline: 0;
}

.emoji-mart-search input,
.emoji-mart-search input::-webkit-search-decoration,
.emoji-mart-search input::-webkit-search-cancel-button,
.emoji-mart-search input::-webkit-search-results-button,
.emoji-mart-search input::-webkit-search-results-decoration {
  /* remove webkit/blink styles for <input type="search">
   * via https://stackoverflow.com/a/9422689 */
  -webkit-appearance: none;
}

.emoji-mart-search-icon {
  position: absolute;
  top: 7px;
  right: 11px;
  z-index: 2;
  padding: 2px 5px 1px;
  border: none;
  background: none;
}

.emoji-mart-category .emoji-mart-emoji span {
  z-index: 1;
  position: relative;
  text-align: center;
  cursor: default;
}

.emoji-mart-category .emoji-mart-emoji:hover:before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #f4f4f4;
  border-radius: 100%;
}

.emoji-mart-category-label {
  z-index: 2;
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.emoji-mart-category-label span {
  display: block;
  width: 100%;
  font-weight: 500;
  padding: 5px 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, .95);
}

.emoji-mart-category-list {
  margin: 0;
  padding: 0;
}

.emoji-mart-category-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.emoji-mart-emoji {
  position: relative;
  display: inline-block;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.emoji-mart-emoji-native {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}

.emoji-mart-no-results {
  font-size: 14px;
  text-align: center;
  padding-top: 70px;
  color: #858585;
}
.emoji-mart-no-results-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.emoji-mart-no-results .emoji-mart-category-label {
  display: none;
}
.emoji-mart-no-results .emoji-mart-no-results-label {
  margin-top: .2em;
}
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
  content: none;
}

.emoji-mart-preview {
  position: relative;
  height: 70px;
}

.emoji-mart-preview-emoji,
.emoji-mart-preview-data,
.emoji-mart-preview-skins {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.emoji-mart-preview-emoji {
  left: 12px;
}

.emoji-mart-preview-data {
  left: 68px; right: 12px;
  word-break: break-all;
}

.emoji-mart-preview-skins {
  right: 30px;
  text-align: right;
}

.emoji-mart-preview-skins.custom {
  right: 10px;
  text-align: right;
}

.emoji-mart-preview-name {
  font-size: 14px;
}

.emoji-mart-preview-shortname {
  font-size: 12px;
  color: #888;
}
.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
  margin-left: .5em;
}

.emoji-mart-preview-emoticon {
  font-size: 11px;
  color: #bbb;
}

.emoji-mart-title span {
  display: inline-block;
  vertical-align: middle;
}

.emoji-mart-title .emoji-mart-emoji {
  padding: 0;
}

.emoji-mart-title-label {
  color: #999A9C;
  font-size: 26px;
  font-weight: 300;
}

.emoji-mart-skin-swatches {
  font-size: 0;
  padding: 2px 0;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background-color: #fff;
}

.emoji-mart-skin-swatches.custom {
  font-size: 0;
  border: none;
  background-color: #fff;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
  width: 16px;
  padding: 0 2px;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
  opacity: .75;
}

.emoji-mart-skin-swatch {
  display: inline-block;
  width: 0;
  vertical-align: middle;
  transition-property: width, padding;
  transition-duration: .125s;
  transition-timing-function: ease-out;
}

.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }

.emoji-mart-skin-swatch.selected {
  position: relative;
  width: 16px;
  padding: 0 2px;
}

.emoji-mart-skin-swatch.selected:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background-color: #fff;
  border-radius: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease-out;
}

.emoji-mart-skin-swatch.custom {
  display: inline-block;
  width: 0;
  height: 38px;
  overflow: hidden;
  vertical-align: middle;
  transition-property: width, height;
  transition-duration: .125s;
  transition-timing-function: ease-out;
  cursor: default;
}

.emoji-mart-skin-swatch.custom.selected {
  position: relative;
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}

.emoji-mart-skin-swatch.custom.selected:after {
  content: "";
  width: 0;
  height: 0;
}

.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
  background-color: #f4f4f4;
  border-radius: 10%;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
  opacity: .75;
}

.emoji-mart-skin-text.opened {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  color: #888;
  font-size: 11px;
  padding: 5px 2px;
  width: 95px;
  height: 40px;
  border-radius: 10%;
  background-color: #fff;
}

.emoji-mart-skin {
  display: inline-block;
  width: 100%;
  padding-top: 100%;
  max-width: 12px;
  border-radius: 100%;
}

.emoji-mart-skin-tone-1 { background-color: #ffc93a }
.emoji-mart-skin-tone-2 { background-color: #fadcbc }
.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
.emoji-mart-skin-tone-5 { background-color: #9b643d }
.emoji-mart-skin-tone-6 { background-color: #594539 }

/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
.emoji-mart-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*
 * Dark mode styles
 */

.emoji-mart-dark {
  color: #fff;
  border-color: #555453;
  background-color: #222;
}

.emoji-mart-dark .emoji-mart-bar {
  border-color: #555453;
}

.emoji-mart-dark .emoji-mart-search input {
  color: #fff;
  border-color: #555453;
  background-color: #2f2f2f;
}

.emoji-mart-dark .emoji-mart-search-icon svg {
  fill: #fff;
}

.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
  background-color: #444;
}

.emoji-mart-dark .emoji-mart-category-label span {
  background-color: #222;
  color: #fff;
}

.emoji-mart-dark .emoji-mart-skin-swatches {
  border-color: #555453;
  background-color: #222;
}

.emoji-mart-dark .emoji-mart-anchor:hover,
.emoji-mart-dark .emoji-mart-anchor:focus,
.emoji-mart-dark .emoji-mart-anchor-selected {
  color: #bfbfbf;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.compose-stream-chat {
  display: flex;
  align-items: center;
  position: absolute;
  width: calc(100% + 2px);
  bottom: -1px;
  left: -1px;
  background-color: #222222;
  border-top: 1px solid #ef4f30;
}
.compose-stream-chat .compose-input {
  flex: 1;
  border: none;
  font-size: 14px;
  height: 48px;
  background: transparent !important;
  background-color: transparent !important;
  color: #333;
  outline: thin;
  padding: 5px 10px;
}
.compose-stream-chat .compose-input::placeholder {
  opacity: 0.3;
}
.compose-stream-chat .grp-icons {
  padding: 0 10px;
  cursor: pointer;
  position: relative;
  font-size: 22px;
  color: #8a96a3;
}
.compose-stream-chat .grp-icons.custom {
  display: flex;
}
.compose-stream-chat .grp-icons.custom .anticon-send {
  margin-left: 15px;
}
.compose-stream-chat .grp-icons .grp-emotions {
  position: relative;
  right: 0;
  top: 0;
}
.compose-stream-chat .grp-icons .grp-send {
  padding: 5px 15px;
}
.compose-stream-chat .grp-send {
  height: 48px;
  background: #ef4f30;
  padding: 12px 15px;
  transition: all ease 0.2s;
}
.compose-stream-chat .grp-send .anticon {
  font-size: 18px;
  color: #f2f6f9;
  transform: rotate(-45deg);
}
.compose-stream-chat .grp-send:hover {
  opacity: 0.8;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.message-stream-chat {
  display: flex;
  flex-direction: column;
}
.message-stream-chat .timestamp {
  display: flex;
  justify-content: center;
  color: #8a96a3;
  font-weight: 600;
  font-size: 8px;
  margin: 5px 0px;
}
.message-stream-chat .bubble-container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  font-size: 13px;
  margin: 3px 0;
}
.message-stream-chat .bubble-container .bubble {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #333;
  word-break: break-all;
  margin-left: 38px;
  font-weight: 500;
}
.message-stream-chat .bubble-container .bubble .anticon-ellipsis {
  transform: rotate(90deg);
  font-size: 12px;
}
.message-stream-chat .bubble-container .sender-info {
  white-space: nowrap;
  line-height: 30px;
  display: flex;
  align-items: center;
}
.message-stream-chat .bubble-container .sender-info a {
  font-weight: 600;
  color: #8a96a3 !important;
  vertical-align: middle;
}
.message-stream-chat .bubble-container .sender-info .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 8px 0 0;
}
.message-stream-chat .bubble-container.owner .sender-info a {
  font-weight: 600;
  color: #ef4f30;
}
.message-stream-chat .bubble-container.owner .sender-info .avatar {
  width: 30px;
  height: 30px;
}
.message-stream-chat .bubble-container.joined {
  position: relative;
  padding-bottom: 5px;
  opacity: 0.8;
}
.message-stream-chat .bubble-container.joined .joined-text {
  position: absolute;
  top: 20px;
  font-weight: 500;
  color: #8a96a3 !important;
  margin-left: 38px;
  margin-bottom: 10px;
  font-size: 12px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.message-list-stream-chat {
  height: 100%;
  width: 100%;
  position: relative;
}
.message-list-stream-chat .message-list-container {
  padding: 10px;
  overflow-y: auto;
  max-height: calc(100% - 50px);
}
.message-list-stream-chat .message-list-container .sub-text {
  text-align: center;
  color: #f04134;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
@media all and (max-width: 376px) {
  .message-list-stream-chat .message-list-container .sub-text {
    font-size: 14px;
  }
}

.message-stream-stream-chat {
  height: 428px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.conversation-stream-stream-chat {
  width: 100%;
  min-height: 375px;
  max-height: 600px;
  height: 480px;
  border: solid 1px #ef4f30;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.conversation-stream-stream-chat .tablist {
  margin: 0;
}
.conversation-stream-stream-chat .ant-tabs > .ant-tabs-nav,
.conversation-stream-stream-chat .ant-tabs > div > .ant-tabs-nav {
  margin: 0 !important;
}
.conversation-stream-stream-chat .ant-tabs-nav-list {
  width: 100%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  overflow: hidden;
}
.conversation-stream-stream-chat .ant-tabs-nav-list .ant-tabs-tab {
  width: 100%;
  justify-content: center;
  margin: 0;
  height: 50px;
}
.conversation-stream-stream-chat .ant-tabs-nav-list .ant-tabs-tab-active {
  background-color: #ef4f30;
  color: #f2f6f9;
}
.conversation-stream-stream-chat .ant-tabs-nav-list .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #f2f6f9;
}
.conversation-stream-stream-chat.active .ant-tabs-tab {
  width: 100%;
}
.conversation-stream-stream-chat .tip-box {
  margin: 3px 0;
  padding: 4px;
  text-align: center;
  font-weight: 600;
  color: #c82538;
  background-color: #e5e5e5;
  border-radius: 4px;
}
.clear-chat-history {
  margin: 10px 0;
  width: 100%;
}
.clear-chat-history .ant-btn-primary {
  width: 100%;
}
@media screen and (max-width: 376px) {
  .conversation-stream {
    height: 440px;
  }
  .conversation-stream .message-stream {
    height: 388px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.stream-video {
  display: block;
}
.stream-description {
  margin: 10px 0;
  display: flex;
  width: 100%;
}
.container-switch-cam {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.container-switch-cam .button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.container-switch-cam .button svg {
  font-size: 20px;
  position: absolute;
}
.stream-duration {
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 14px;
  color: #8a96a3;
  margin: 0;
}
.stream-duration .anticon-clock-circle,
.stream-duration .ant-rate-star-full .anticon {
  color: #ef4f30;
}
.stream-duration > * {
  margin-right: 10px;
}
.card-meta .ant-card-meta .ant-card-meta-detail {
  padding: 10px 10px 0;
}
.streaming-user {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.streaming-user .streaming-user-btns {
  display: flex;
  gap: 10px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.comment-form {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 20px;
  gap: 5px;
}
.comment-form .cmt-area {
  width: 100%;
}
.comment-form .cmt-area .ant-form-item {
  margin: 0;
}
.comment-form .cmt-area .ant-form-item .ant-form-item-control {
  padding: 0;
}
.comment-form .cmt-area .ant-input-textarea::after {
  font-size: 9px;
}
.comment-form .cmt-area .ant-input-textarea .ant-input {
  background: #c7d0d9;
  padding: 5px 15px;
  padding-right: 30px;
  border: none;
  height: 50px;
  min-height: unset;
}
@media screen and (max-width: 376px) {
  .comment-form .cmt-area {
    padding: 0 5px 0 0;
  }
}
.comment-form .cmt-area-reply .ant-input-textarea .ant-input {
  height: 40px;
}
.comment-form .cmt-btn {
  display: flex;
  gap: 5px;
}
.comment-form .cmt-btn .emotion-popover,
.comment-form .cmt-btn .send-comment {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  background: #ef4f30;
  border-radius: 8px;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: 0.2s ease !important;
}
.comment-form .cmt-btn .emotion-popover .anticon,
.comment-form .cmt-btn .send-comment .anticon {
  color: #f2f6f9 !important;
  font-size: 20px;
}
.comment-form .cmt-btn .emotion-popover:hover,
.comment-form .cmt-btn .send-comment:hover {
  opacity: 0.8 !important;
}
.comment-form .cmt-btn .emotion-popover {
  position: relative !important;
  top: 0;
  right: 0;
}
.comment-form .cmt-btn-reply .emotion-popover,
.comment-form .cmt-btn-reply .send-comment {
  height: 40px;
  width: 40px;
}
.comment-form .cmt-btn-reply .emotion-popover .anticon,
.comment-form .cmt-btn-reply .send-comment .anticon {
  font-size: 18px;
}
.cmt-list {
  border-radius: 8px;
}
.cmt-list .cmt-item {
  display: flex;
  margin-bottom: 10px;
  padding: 5px;
}
.cmt-list .cmt-item img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}
.cmt-list .cmt-item .cmt-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0 10px;
}
.cmt-list .cmt-item .cmt-content .cmt-user {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}
.cmt-list .cmt-item .cmt-content .cmt-user .cmt-time {
  color: #666;
  font-size: 10px;
  font-weight: normal;
  margin-left: 20px;
}
.cmt-list .cmt-item .cmt-content .cmt-action {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.cmt-list .cmt-item .cmt-content .cmt-action .cmt-reply {
  font-size: 13px;
  color: #41444d;
  margin-left: 15px;
}
.cmt-list .cmt-item .cmt-content .cmt-action .cmt-reply.active {
  color: #ef4f30;
}
.cmt-list .cmt-item .cmt-content .cmt-action .cmt-like {
  display: flex;
  align-items: center;
  color: #41444d;
}
.cmt-list .cmt-item .cmt-content .cmt-action .cmt-like.active {
  color: #ef4f30;
}
.cmt-list .cmt-item .cmt-content .cmt-reply:hover,
.cmt-list .cmt-item .cmt-content .cmt-like:hover {
  color: #ef4f30 !important;
}
.cmt-list .cmt-item .cmt-content .cmt-text {
  color: #666;
  margin-bottom: 5px;
  white-space: pre-line;
}
.ant-form-item-control-input-content .ant-input {
  background-color: #222222;
  color: #f2f6f9;
  padding: 4.8px 11px;
  border: 1px solid #eee;
}
.reply-bl-form {
  display: none;
  transition: all 0.3s ease-in-out;
}
.reply-bl-form .feed-comment-comment-itemt .comment-form .cmt-user {
  display: none;
}
.reply-bl-form.active {
  display: block;
}
.reply-bl-list {
  padding-left: 45px;
  transition: all 0.3 ease-in-out;
}
.reply-bl-list .cmt-list .cmt-item img {
  width: 30px;
  height: 30px;
}
.view-cmt a {
  color: #ef4f30;
  font-size: 12px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-custom-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.container-custom-avatar .avatar-photo {
  width: 100%;
  height: 100%;
}
.container-custom-avatar .online-status {
  position: absolute;
  right: 0;
  top: 0;
  margin: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #888;
  border: 1px solid #f2f6f9;
}
.container-custom-avatar .online-status.active {
  background-color: #4ec52a;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.conversation-list-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  color: #f2f6f9;
  padding-right: 100px;
  overflow: hidden;
}
.conversation-list-item .btn-dropdown {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 24px;
  color: #757575;
  margin: 10px;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: all;
}
.conversation-list-item .notification-badge {
  position: absolute;
  top: 0;
  left: 0;
  margin: 5px;
}
.conversation-list-item::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 155, 155, 0.1), rgba(155, 155, 155, 0.1));
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease-in-out;
  filter: blur(5px);
}
.conversation-list-item:hover::before,
.conversation-list-item:active::before,
.conversation-list-item.active::before {
  transform: translate(-50%, -50%) scale(2);
  z-index: 1;
}
.conversation-list-item.active {
  pointer-events: none;
}
.conversation-list-item .conversation-time {
  text-transform: lowercase;
  white-space: nowrap;
  color: #6d758c;
  margin: 0;
}
.ant-dropdown {
  background-color: #2d2d2e !important;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
}
.ant-dropdown .ant-dropdown-menu {
  background-color: transparent !important;
}
.ant-dropdown .ant-dropdown-menu-item {
  background-color: transparent;
  color: #f2f6f9;
}
.ant-dropdown .ant-dropdown-menu-item:hover {
  background-color: #5a5a5a;
  color: #f2f6f9;
}
.ant-dropdown .ant-dropdown-menu-item-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.conversation-left-corner {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.conversation-left-corner span {
  font-size: 10px;
}
.conversation-info {
  width: 100%;
}
.conversation-info .conversation-title {
  text-transform: capitalize;
  margin: 0;
  color: #ebeff2;
}
.conversation-info .conversation-title .anticon {
  font-size: 14px;
  color: #ef4f30;
}
.conversation-info .conversation-snippet {
  font-size: 12px;
  color: #888;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.conversation-list {
  height: 100%;
  width: 100%;
  padding: 0 0 20px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.conversation-list .c-list-container {
  overflow: auto;
  max-height: calc(100% - 100px);
  margin-top: 10px;
}
.user-bl {
  display: flex;
  align-items: center;
  color: #6d758c;
  padding: 5px 0;
  height: 43px;
  margin-bottom: 5px;
  gap: 5px;
  text-transform: capitalize;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.heading-tab {
  margin-bottom: 30px;
}
@media screen and (max-width: 376px) {
  .heading-tab {
    padding: 0 9px;
  }
}
.heading-tab .search-post-bar {
  padding: 0;
  margin: 0;
}
.heading-tab .search-post-bar .grid-btns .btn-menu {
  color: #ef4f30;
}
.heading-tab h4 {
  color: #757575;
  margin: 0;
}
.container-btns-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.container-btns-social .btn-social {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 20px;
  transition: 0.2s ease;
}
.container-btns-social .btn-social:active,
.container-btns-social .btn-social:hover {
  opacity: 0.8;
}
.container-btns-social .twitter,
.container-btns-social .facebook,
.container-btns-social .instagram {
  color: #f2f6f9;
}
.container-btns-social .twitter {
  background: black;
}
.container-btns-social .facebook {
  background: #0866ff;
}
.container-btns-social .instagram {
  background: #dd2a7b;
}
.padding-model-performer {
  padding: 24px 20px;
}
@media screen and (max-width: 376px) {
  .padding-model-performer {
    padding: 0;
  }
  .padding-model-performer .progress-bar {
    margin-top: 20px;
  }
}
@media screen and (max-width: 376px) {
  .padding-model-performer .padding-main-container {
    padding: 0 9px;
  }
}
.ant-dropdown-menu {
  background: rgba(255, 255, 255, 0.77);
  -webkit-backdrop-filter: blur(9.89999962px);
  backdrop-filter: blur(9.89999962px);
}
.paragraph-profile-model {
  font-size: 10px;
  line-height: 20.43px;
  margin: 0;
  padding: 0 5px;
}
.button-form-profile-model {
  padding: 0 5px;
  margin-top: 10px;
}
.button-form-profile-model .ant-form-item-control {
  margin: 0;
}
.container-video-profile-model .video-model {
  display: flex;
  justify-content: center;
}
.container-video-profile-model .video-profile-model {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
  border-radius: 8px;
  background: #ebeff2;
}
.container-video-profile-model .ant-form-item {
  padding: 5px;
}
.container-video-profile-model .ant-form-item-label {
  height: max-content;
}
.container-video-profile-model .ant-form-item-control {
  padding: 5px;
}
.cover-upload {
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
}
.cover-upload .ant-upload-select-picture-card {
  margin: 0;
  background: #ef4f30 !important;
}
.ant-collapse-header {
  padding: 12px 0;
  color: #41444d;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  width: 100%;
  max-width: 150px;
}
.model-content .ant-tabs .ant-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.model-content .ant-tabs .ant-tabs-nav:before {
  border-bottom: none;
}
.model-content .ant-tabs .ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  width: 100px;
  color: #757575;
  justify-content: center;
  margin: 0;
  padding: 8px;
}
@media screen and (max-width: 769px) {
  .model-content .ant-tabs .ant-tabs-nav .ant-tabs-tab {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .model-content .ant-tabs .ant-tabs-nav .ant-tabs-tab {
    font-size: 13px;
  }
}
.model-content .ant-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #41444d;
}
.model-content .ant-tabs .ant-tabs-ink-bar {
  background: #ef4f30;
}
.model-content .ant-tabs .ant-tabs-nav-wrap {
  max-width: 800px;
}
@media screen and (max-width: 376px) {
  .model-content .ant-tabs .ant-tabs-nav-wrap {
    padding: 0;
  }
  .model-content .ant-tabs .ant-tabs-nav-wrap::before {
    opacity: 0;
  }
  .model-content .ant-tabs .ant-tabs-nav-wrap::after {
    opacity: 0;
  }
}
.model-content .ant-tabs .ant-tabs-nav-list {
  width: 100%;
  justify-content: space-between;
}
.model-content .ant-tabs .ant-tabs-content-holder .ant-tabs-tabpane.ant-tabs-tabpane-active {
  overflow: none;
  max-height: none;
}
@media screen and (max-width: 376px) {
  .model-content .ant-tabs-nav {
    padding: 0 9px;
  }
  .model-content .ant-tabs-tab .anticon {
    margin: 0;
  }
}
.show-all {
  padding: 30px;
  margin-top: 20px;
  text-align: center;
}
.show-all a {
  padding: 10px 25px;
  font-size: 16px;
  color: #f2f6f9;
  background-image: linear-gradient(0deg, #ef4f30, #ef4f30);
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.show-all a:hover {
  background-color: #ef4f30;
}
.model-card {
  position: relative;
  transition: all 0.3s ease-in-out;
  height: 173px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #b3b3b3;
  border-radius: 15px;
  overflow: hidden;
}
.model-card .card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14px;
  display: flex;
  align-items: end;
}
.model-card .card .live-status {
  position: absolute;
  top: 3px;
  left: 3px;
  background: #c82538;
  color: #f2f6f9;
  padding: 0 5px;
  border-radius: 7px;
  border: 2px solid #f2f6f9;
  font-size: 11px;
  line-height: 17px;
  text-transform: uppercase;
}
.model-card .card .container-info {
  position: relative;
  width: 100%;
}
.model-card .card .container-info .ant-avatar {
  position: absolute;
  bottom: 0;
  left: 0;
  min-width: 56px;
  min-height: 56px;
  border: 2px solid #f2f6f9;
}
.model-card .card .container-info .model-name {
  width: 100%;
  height: 56px;
  color: #f2f6f9;
  text-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(56px + 15px);
}
.model-card .card .container-info .model-name .name {
  display: flex;
  align-items: center;
  gap: 5px;
}
.model-card .card .container-info .model-name .name p {
  color: #f2f6f9;
  font-weight: 500;
  font-size: 16px;
  margin: 0;
}
.model-card .card .container-info .model-name .name svg {
  color: #878787;
  min-width: 16px;
  min-height: 16px;
  font-size: 16px;
}
.model-card .card .container-info .model-name .at-sing {
  color: #f2f6f9;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
.model-card:not(:last-child) {
  margin-bottom: 15px;
}
.grid-table .ant-col {
  border: 1px solid #ef4f30;
  padding: 5px 15px;
}
.suggestion-bl {
  position: -webkit-sticky;
  position: sticky;
  top: calc(65px + 10px);
}
.suggestion-bl .sug-content .slider-performers {
  max-height: max-content;
}
.suggestion-bl .sug-top {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  padding: 2px;
}
.suggestion-bl .sug-top .sug-text {
  font-size: 18px;
  color: #8a96a3;
  width: 60%;
  font-weight: 500 !important;
}
.suggestion-bl .sug-top .btns-grp {
  width: 40%;
  display: flex;
  justify-content: end;
  align-items: start;
  gap: 15%;
}
.suggestion-bl .sug-top .reload-btn {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #16171a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suggestion-bl .sug-top .prev-and-next {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #16171a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}
.suggestion-bl .sug-top .prev-and-next:hover {
  color: #ef4f30;
}
.suggestion-bl .sug-top .reload-btn,
.suggestion-bl .sug-top .prev-and-next {
  transition: all 0.3s ease;
}
.suggestion-bl .sug-top .reload-btn:hover,
.suggestion-bl .sug-top .prev-and-next:hover {
  color: #ef4f30;
}
.suggestion-bl .sug-top .free-btn {
  font-size: 22px;
  margin-right: 15px;
  color: #8a96a3;
}
.suggestion-bl .sug-top .free-btn .anticon-tag.active {
  position: relative;
}
.suggestion-bl .sug-top .free-btn .anticon-tag.active::after {
  content: '';
  border-bottom: 2px solid;
  width: 20px;
  height: 0;
  position: absolute;
  left: 2px;
  top: 10px;
  transform: rotate(45deg);
}
.suggestion-bl .ant-carousel .slick-slide {
  height: unset;
  line-height: normal;
}
.suggestion-bl .ant-carousel .slick-prev {
  top: -23px;
  right: 40px;
  left: unset;
  padding: 12px;
  border-radius: 50%;
  background-color: #ef4f30;
  opacity: 0.8;
}
.suggestion-bl .ant-carousel .slick-prev::before {
  background-size: 10px;
  width: 10px;
  height: 10px;
}
.suggestion-bl .ant-carousel .slick-prev:hover,
.suggestion-bl .ant-carousel .slick-prev:focus {
  background-color: #ef4f30;
  opacity: 0.5;
}
.suggestion-bl .ant-carousel .slick-next {
  top: -23px;
  right: 0px;
  left: unset;
  padding: 12px;
  border-radius: 50%;
  background-color: #ef4f30;
  opacity: 0.8;
}
.suggestion-bl .ant-carousel .slick-next::before {
  background-size: 10px;
  width: 10px;
  height: 10px;
}
.suggestion-bl .ant-carousel .slick-next:hover,
.suggestion-bl .ant-carousel .slick-next:focus {
  background-color: #ef4f30;
  opacity: 0.5;
}
.suggestion-bl .ant-carousel .slick-dots.slick-dots-bottom {
  bottom: -5px;
}
.suggestion-bl .ant-carousel .slick-dots.slick-dots-bottom button {
  background: #888;
}
.suggestion-bl .ant-carousel .slick-dots.slick-dots-bottom .slick-active button {
  background: #ef4f30;
}
@media screen and (max-width: 769px) {
  .suggestion-bl .sug-top .sug-text {
    width: 50%;
    font-size: 16px;
  }
  .suggestion-bl .sug-top .btns-grp {
    width: 50%;
  }
  .suggestion-bl .ant-carousel .slick-prev {
    right: 32px;
  }
  .suggestion-bl .ant-carousel .slick-next {
    right: 2px;
  }
}
@media screen and (max-width: 376px) {
  .suggestion-bl .sug-top .sug-text {
    width: 85%;
  }
}
.hr-divider {
  margin: 20px 0px 0px;
  border-bottom: 1px solid #ef4f30;
}
.document-upload {
  display: flex;
  justify-content: space-between;
}
.document-upload .ant-upload-picture-card-wrapper.avatar-uploader {
  width: 50%;
}
.list-issued-id li {
  font-size: 11px;
  margin-bottom: 5px;
  list-style: auto;
}
.subscription-modal {
  border-radius: 5px;
  overflow: hidden;
}
.subscription-modal .ant-modal-body {
  padding: 0 0 15px;
}
.social-share-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  -webkit-backdrop-filter: blur(4.5px);
  backdrop-filter: blur(4.5px);
}
.social-share-btns .react-share__ShareButton {
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-subcribers-and-likes {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 35px;
}
.container-subcribers-and-likes .text-subcribers-and-likes {
  display: flex;
  align-items: end;
  gap: 4px;
}
.container-subcribers-and-likes .text-subcribers-and-likes h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  font-size: 15px;
  margin: 0;
  vertical-align: baseline;
}
@media screen and (max-width: 769px) {
  .container-subcribers-and-likes .text-subcribers-and-likes h3 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .container-subcribers-and-likes .text-subcribers-and-likes h3 {
    line-height: 17px;
  }
}
.container-subcribers-and-likes .text-subcribers-and-likes h3 span {
  font-weight: 600;
}
@media screen and (max-width: 769px) {
  .container-subcribers-and-likes {
    margin-bottom: 10px;
  }
  .container-subcribers-and-likes .text-subcribers-and-likes h3 {
    font-size: 13px;
  }
}
.container-values-model {
  gap: 15px;
}
@media screen and (max-width: 376px) {
  .container-values-model {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.container-values-model .subscription-bl {
  padding: 5px 11px;
  border: 1px solid #c7d0d9;
  border-radius: 8px;
  margin: 5px 0;
}
.container-values-model .subscription-bl h5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .container-values-model .subscription-bl h5 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .container-values-model .subscription-bl h5 {
    font-size: 11px;
    line-height: 11px;
  }
}
.container-values-model .subscription-bl .sub-btn {
  max-width: 100%;
  height: 34px;
}
.container-grid-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.container-grid-buttons button {
  max-width: 100%;
  height: 34px;
}
.tip-input-modal {
  width: 100%;
  margin: 15px 0;
}
.tip-input-modal .ant-input-number-affix-wrapper {
  width: 100%;
}
.tip-input-modal .ant-input-number {
  width: 100%;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.modal-header-performer .container-image {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100px;
  margin-bottom: calc(75px / 2);
}
.modal-header-performer .container-image .avatar-container-image {
  width: 75px;
  height: 75px;
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-75px / 2);
  border: 4px solid #f2f6f9;
}
.modal-header-performer .name {
  color: #2c2d33;
}
.modal-header-performer .sign {
  color: #757575;
}

.vjs-svg-icon{display:inline-block;background-repeat:no-repeat;background-position:center;fill:currentColor;height:1.8em;width:1.8em}.vjs-svg-icon:before{content:none!important}.vjs-control:focus .vjs-svg-icon,.vjs-svg-icon:hover{filter:drop-shadow(0 0 .25em #fff)}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content{position:absolute;top:0;left:0;width:100%;height:100%}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder,.vjs-icon-play{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.vjs-icon-play:before{content:"\F101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\F102"}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,.vjs-icon-pause{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,.vjs-icon-pause:before{content:"\F103"}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,.vjs-icon-volume-mute{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,.vjs-icon-volume-mute:before{content:"\F104"}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,.vjs-icon-volume-low{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,.vjs-icon-volume-low:before{content:"\F105"}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,.vjs-icon-volume-mid{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,.vjs-icon-volume-mid:before{content:"\F106"}.video-js .vjs-mute-control .vjs-icon-placeholder,.vjs-icon-volume-high{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control .vjs-icon-placeholder:before,.vjs-icon-volume-high:before{content:"\F107"}.video-js .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-enter:before{content:"\F108"}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-exit:before{content:"\F109"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\F10A"}.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-subtitles{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-subtitles:before{content:"\F10B"}.video-js .vjs-captions-button .vjs-icon-placeholder,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-captions{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-captions-button .vjs-icon-placeholder:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-captions:before{content:"\F10C"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\F10D"}.video-js .vjs-chapters-button .vjs-icon-placeholder,.vjs-icon-chapters{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-chapters-button .vjs-icon-placeholder:before,.vjs-icon-chapters:before{content:"\F10E"}.vjs-icon-downloading{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-downloading:before{content:"\F10F"}.vjs-icon-file-download{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download:before{content:"\F110"}.vjs-icon-file-download-done{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download-done:before{content:"\F111"}.vjs-icon-file-download-off{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-file-download-off:before{content:"\F112"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\F113"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\F114"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\F115"}.video-js .vjs-play-progress,.video-js .vjs-volume-level,.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before{content:"\F116"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\F117"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\F118"}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,.vjs-icon-cancel{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,.vjs-icon-cancel:before{content:"\F119"}.vjs-icon-repeat{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-repeat:before{content:"\F11A"}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,.vjs-icon-replay{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,.vjs-icon-replay:before{content:"\F11B"}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder,.vjs-icon-replay-5{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before,.vjs-icon-replay-5:before{content:"\F11C"}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder,.vjs-icon-replay-10{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before,.vjs-icon-replay-10:before{content:"\F11D"}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder,.vjs-icon-replay-30{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before,.vjs-icon-replay-30:before{content:"\F11E"}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder,.vjs-icon-forward-5{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before,.vjs-icon-forward-5:before{content:"\F11F"}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder,.vjs-icon-forward-10{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before,.vjs-icon-forward-10:before{content:"\F120"}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder,.vjs-icon-forward-30{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before,.vjs-icon-forward-30:before{content:"\F121"}.video-js .vjs-audio-button .vjs-icon-placeholder,.vjs-icon-audio{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-audio-button .vjs-icon-placeholder:before,.vjs-icon-audio:before{content:"\F122"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\F123"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\F124"}.vjs-icon-shuffle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-shuffle:before{content:"\F125"}.vjs-icon-cast{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cast:before{content:"\F126"}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-enter:before{content:"\F127"}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-exit:before{content:"\F128"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\F129"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\F12A"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\F12B"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\F12C"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\F12D"}.video-js .vjs-descriptions-button .vjs-icon-placeholder,.vjs-icon-audio-description{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,.vjs-icon-audio-description:before{content:"\F12E"}.video-js{display:inline-block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:0}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid{width:100%;max-width:100%}.video-js.vjs-1-1:not(.vjs-audio-only-mode),.video-js.vjs-16-9:not(.vjs-audio-only-mode),.video-js.vjs-4-3:not(.vjs-audio-only-mode),.video-js.vjs-9-16:not(.vjs-audio-only-mode),.video-js.vjs-fluid:not(.vjs-audio-only-mode){height:0}.video-js.vjs-16-9:not(.vjs-audio-only-mode){padding-top:56.25%}.video-js.vjs-4-3:not(.vjs-audio-only-mode){padding-top:75%}.video-js.vjs-9-16:not(.vjs-audio-only-mode){padding-top:177.7777777778%}.video-js.vjs-1-1:not(.vjs-audio-only-mode){padding-top:100%}.video-js.vjs-fill:not(.vjs-audio-only-mode){width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.video-js.vjs-audio-only-mode .vjs-tech{display:none}body.vjs-full-window,body.vjs-pip-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen,body.vjs-pip-window .video-js{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),body.vjs-pip-window .video-js{width:100%!important;height:100%!important;padding-top:0!important;display:block}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-pip-container .vjs-pip-text{position:absolute;bottom:10%;font-size:2em;background-color:rgba(0,0,0,.7);padding:.5em;text-align:center;width:100%}.vjs-layout-small.vjs-pip-container .vjs-pip-text,.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,.vjs-layout-x-small.vjs-pip-container .vjs-pip-text{bottom:0;font-size:1.4em}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1!important;visibility:visible!important}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.63332em;width:3em;display:block;position:absolute;top:50%;left:50%;padding:0;margin-top:-.81666em;margin-left:-1.5em;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:rgba(43,51,63,.7);border-radius:.3em;transition:all .4s}.vjs-big-play-button .vjs-svg-icon{width:1em;height:1em;position:absolute;top:50%;left:50%;line-height:1;transform:translate(-50%,-50%)}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{border-color:#fff;background-color:#73859f;background-color:rgba(115,133,159,.5);transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking,.vjs-scrubbing,.vjs-error) .vjs-big-play-button{display:block}.video-js button{background:0 0;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{display:flex;justify-content:center;list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.js-focus-visible .vjs-menu li.vjs-menu-item:hover,.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:rgba(115,133,159,.5)}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon,.vjs-menu li.vjs-selected .vjs-svg-icon,.vjs-menu li.vjs-selected:focus .vjs-svg-icon,.vjs-menu li.vjs-selected:hover .vjs-svg-icon{fill:#000}.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible){background:0 0}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em 0;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0;margin-bottom:1.5em;border-top-color:rgba(43,51,63,.7)}.vjs-pip-window .vjs-menu-button-popup .vjs-menu{left:unset;right:1em}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:rgba(43,51,63,.7);position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;transition:all .4s}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js:not(.vjs-controls-disabled,.vjs-using-native-controls,.vjs-error) .vjs-control-bar.vjs-lock-showing{display:flex!important}.vjs-audio-only-mode .vjs-control-bar,.vjs-has-started .vjs-control-bar{display:flex;visibility:visible;opacity:1;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;pointer-events:none;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible;pointer-events:auto}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;flex:none}.video-js .vjs-control.vjs-visible-text{width:auto;padding-left:1em;padding-right:1em}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.vjs-button>.vjs-icon-placeholder{display:block}.vjs-button>.vjs-svg-icon{display:inline-block}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js :not(.vjs-visible-text)>.vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;flex:auto;display:flex;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:flex;align-items:center}.video-js .vjs-progress-holder{flex:auto;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;line-height:.35em;z-index:1}.vjs-svg-icons-enabled .vjs-play-progress:before{content:none!important}.vjs-play-progress .vjs-svg-icon{position:absolute;top:-.35em;right:-.4em;width:.9em;height:.9em;pointer-events:none;line-height:.15em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em 0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#73859f;background-color:rgba(115,133,159,.5)}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control{visibility:visible;opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;margin-right:0}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical{left:-3.5em;transition:left 0s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active{width:10em;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em;z-index:1}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em;z-index:1}.vjs-svg-icons-enabled .vjs-volume-level:before{content:none}.vjs-volume-level .vjs-svg-icon{position:absolute;width:.9em;height:.9em;pointer-events:none;z-index:1}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{line-height:.35em;right:-.5em}.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon{right:-.3em;transform:translateY(-50%)}.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon{top:-.55em;transform:translateX(-50%)}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.video-js .vjs-volume-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-control:hover .vjs-volume-tooltip{display:block;font-size:1em;visibility:visible}.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip{left:1em;top:-12px}.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip{font-size:1em}.video-js .vjs-volume-control .vjs-mouse-display{display:none;position:absolute;width:100%;height:1px;background-color:#000;z-index:1}.video-js .vjs-volume-horizontal .vjs-mouse-display{width:1px;height:100%}.video-js .vjs-volume-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.vjs-mouse-display .vjs-volume-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.vjs-poster{display:inline-block;vertical-align:middle;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-has-started .vjs-poster,.vjs-using-native-controls .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster,.vjs-has-started.vjs-audio-poster-mode .vjs-poster,.vjs-pip-container.vjs-has-started .vjs-poster{display:block}.vjs-poster img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.video-js .vjs-live-control{display:flex;align-items:flex-start;flex:auto;font-size:1em;line-height:3em}.video-js.vjs-liveui .vjs-live-control,.video-js:not(.vjs-live) .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{align-items:center;cursor:pointer;flex:none;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-svg-icons-enabled .vjs-seek-to-live-control{line-height:0}.vjs-seek-to-live-control .vjs-svg-icon{width:1em;height:1em;pointer-events:none;fill:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon{fill:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.video-js .vjs-current-time,.video-js .vjs-duration,.vjs-live .vjs-time-control,.vjs-live .vjs-time-divider{display:none}.vjs-time-divider{display:none;line-height:3em}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{position:absolute;bottom:3em;left:0;right:0;top:0;pointer-events:none}.vjs-error .vjs-text-track-display{display:none}.video-js.vjs-controls-disabled .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js .vjs-picture-in-picture-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,.vjs-pip-window .vjs-picture-in-picture-control{display:none}.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-fullscreen-control,.vjs-pip-window .vjs-fullscreen-control{display:none}.vjs-playback-rate .vjs-playback-rate-value,.vjs-playback-rate>.vjs-menu-button{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.85;text-align:left;border:.6em solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:5em;height:5em;border-radius:50%;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:flex;justify-content:center;align-items:center;animation:vjs-spinner-show 0s linear .3s forwards}.vjs-error .vjs-loading-spinner{display:none}.vjs-loading-spinner:after,.vjs-loading-spinner:before{content:"";position:absolute;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{100%{transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}.video-js.vjs-audio-only-mode .vjs-captions-button{display:none}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js.vjs-audio-only-mode .vjs-descriptions-button{display:none}.vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-svg-icon{width:1.5em;height:1.5em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"\F10C";font-size:1.5em;line-height:inherit}.video-js.vjs-audio-only-mode .vjs-subs-caps-button{display:none}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" \F12E";font-size:1.5em;line-height:inherit}.video-js.vjs-layout-small .vjs-current-time,.video-js.vjs-layout-small .vjs-duration,.video-js.vjs-layout-small .vjs-playback-rate,.video-js.vjs-layout-small .vjs-remaining-time,.video-js.vjs-layout-small .vjs-time-divider,.video-js.vjs-layout-small .vjs-volume-control,.video-js.vjs-layout-tiny .vjs-current-time,.video-js.vjs-layout-tiny .vjs-duration,.video-js.vjs-layout-tiny .vjs-playback-rate,.video-js.vjs-layout-tiny .vjs-remaining-time,.video-js.vjs-layout-tiny .vjs-time-divider,.video-js.vjs-layout-tiny .vjs-volume-control,.video-js.vjs-layout-x-small .vjs-current-time,.video-js.vjs-layout-x-small .vjs-duration,.video-js.vjs-layout-x-small .vjs-playback-rate,.video-js.vjs-layout-x-small .vjs-remaining-time,.video-js.vjs-layout-x-small .vjs-time-divider,.video-js.vjs-layout-x-small .vjs-volume-control{display:none}.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:auto;width:initial}.video-js.vjs-layout-tiny .vjs-progress-control,.video-js.vjs-layout-x-small .vjs-progress-control{display:none}.video-js.vjs-layout-x-small .vjs-custom-control-spacer{flex:auto;display:block}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:rgba(43,51,63,.75);color:#fff;height:70%}.vjs-error .vjs-text-track-settings{display:none}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-controls,.vjs-text-track-settings .vjs-track-settings-font{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display:grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0 24px}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-text-track-settings select{font-size:inherit}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:10px;border:none}.vjs-text-track-settings fieldset span{display:inline-block;padding:0 .6em .8em}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;font-weight:700;font-size:1.2em}.vjs-text-track-settings .vjs-label{margin:0 .5em .5em 0}.vjs-track-settings-controls button:active,.vjs-track-settings-controls button:focus{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:rgba(43,51,63,.75)}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}.vjs-title-bar{background:rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 60%,rgba(0,0,0,0) 100%);font-size:1.2em;line-height:1.5;transition:opacity .1s;padding:.666em 1.333em 4em;pointer-events:none;position:absolute;top:0;width:100%}.vjs-error .vjs-title-bar{display:none}.vjs-title-bar-description,.vjs-title-bar-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vjs-title-bar-title{font-weight:700;margin-bottom:.333em}.vjs-playing.vjs-user-inactive .vjs-title-bar{opacity:0;transition:opacity 1s}.video-js .vjs-skip-forward-5{cursor:pointer}.video-js .vjs-skip-forward-10{cursor:pointer}.video-js .vjs-skip-forward-30{cursor:pointer}.video-js .vjs-skip-backward-5{cursor:pointer}.video-js .vjs-skip-backward-10{cursor:pointer}.video-js .vjs-skip-backward-30{cursor:pointer}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js :focus:not(.focus-visible){outline:0}.video-js :focus:not(:focus-visible){outline:0}
.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.modal-confirm-subscription .container-prices {
  padding: 0 15px;
}
.modal-confirm-subscription .container-prices h4 {
  color: #ef4f30;
}
.modal-confirm-subscription .container-prices .check-list {
  padding: 0;
}
.modal-confirm-subscription .container-prices .check-list .anticon-check-square {
  color: #ef4f30;
  background: #ef4f30;
  border-radius: 4px;
}
.modal-confirm-subscription .container-prices .check-list .anticon-check-square svg path:first-child {
  color: #f2f6f9;
}
.modal-confirm-subscription .container-prices .container-btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.modal-confirm-subscription .container-prices .container-btns button {
  max-width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 23px;
  border-radius: 4px;
}
.modal-confirm-subscription .alert {
  text-align: start;
  width: 100%;
  font-size: 12px;
  margin-bottom: 5px;
  color: #16171a;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.form-calendar {
  padding: 0 20px;
}
.form-calendar .custom-calendar {
  background: transparent;
}
.form-calendar .custom-calendar .ant-picker-calendar-header .ant-select-open .ant-select-selector,
.form-calendar .custom-calendar .ant-picker-calendar-header .ant-select-focused .ant-select-selector {
  box-shadow: none;
  border-color: #ef4f30;
  color: #ef4f30;
}
.form-calendar .custom-calendar .ant-picker-calendar-header .ant-select-open .ant-select-selector:hover,
.form-calendar .custom-calendar .ant-picker-calendar-header .ant-select-focused .ant-select-selector:hover {
  border-color: #ef4f30 !important;
}
.form-calendar .custom-calendar .ant-picker-calendar-header .ant-radio-group .ant-radio-button-wrapper-checked {
  border-color: #ef4f30;
  color: #ef4f30;
  box-shadow: none;
}
.form-calendar .custom-calendar .ant-picker-calendar-header .ant-radio-group .ant-radio-button-wrapper-checked::before {
  border-color: #ef4f30 !important;
  background: #ef4f30 !important;
}
.form-calendar .custom-calendar .ant-picker-panel {
  background: transparent;
}
.form-calendar .custom-calendar .ant-picker-panel .ant-picker-content thead tr th,
.form-calendar .custom-calendar .ant-picker-panel .ant-picker-content tbody tr th {
  font-weight: 600;
}
.form-calendar .custom-calendar .ant-picker-panel .ant-picker-content .ant-picker-cell-selected div {
  background: transparent;
  color: #ef4f30;
  font-weight: 700;
}
.form-calendar .custom-calendar .ant-picker-panel .ant-picker-content .ant-picker-cell-today div::before {
  border-color: #ef4f30 !important;
  border-width: 2px;
}
.form-calendar .container-btns-calendar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #c7d0d9;
  padding: 8px 0;
}
.form-calendar .container-btns-calendar button {
  border-color: transparent !important;
  height: 30px;
  max-width: 100px;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.005em;
  box-shadow: none;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.pay-per-view {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #c7d0d9;
  padding: 10px 0;
}
.pay-per-view h2 {
  margin: 0;
  color: #41444d;
  text-wrap: nowrap;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.pay-per-view .container-custom-radio-group {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pay-per-view .container-custom-radio-group .custom-radio-group {
  display: flex;
  gap: 10px;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper-checked {
  box-shadow: none;
  border-color: #ef4f30 !important;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper-checked span:last-child {
  color: #ef4f30 !important;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper-checked .ant-radio-button-checked {
  box-shadow: none;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper {
  overflow: hidden;
  height: 20px;
  border-radius: 4px;
  max-width: 70px;
  width: 100%;
  border: 1px solid transparent;
  background: #ebeff2;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper::before {
  display: none;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper span:last-child {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7d0d9;
}
.pay-per-view .container-custom-radio-group .custom-radio-group .ant-radio-button-wrapper span:last-child b {
  margin-left: 3px;
}
.pay-per-view .container-custom-radio-group .desactive .ant-radio-button-wrapper-checked {
  border: 1px solid transparent !important;
}
.pay-per-view .container-custom-radio-group .desactive .ant-radio-button-wrapper-checked span:last-child {
  color: #c7d0d9 !important;
}
.pay-per-view .container-custom-radio-group .desactive .ant-radio-button-wrapper {
  border: 1px solid transparent !important;
}
.pay-per-view .container-custom-radio-group .desactive .ant-radio-button-wrapper span:last-child {
  color: #c7d0d9 !important;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  height: 20px;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: #ebeff2 !important;
  box-shadow: none;
  max-width: 120px;
  min-width: 80px;
  width: 100%;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper .ant-input-number-prefix {
  color: #c7d0d9;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper .ant-input-number-input-wrap {
  display: flex;
  align-items: center;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper .ant-input-number-input {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  height: 100%;
  font-weight: 600;
  color: #c7d0d9;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper .ant-input-number-input::placeholder {
  color: #c7d0d9;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper-focused {
  border: 1px solid #ef4f30 !important;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper-focused .ant-input-number-prefix {
  color: #ef4f30;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper-focused .ant-input-number-input {
  color: #ef4f30;
}
.pay-per-view .container-custom-radio-group .ant-input-number-affix-wrapper-focused .ant-input-number-input::placeholder {
  color: #ef4f30;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.videojs-player .vjs-poster {
  border: none !important;
}
.videojs-player .video-js {
  position: relative;
}
.videojs-player .video-js .filter-blur {
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 110% !important;
  height: 110% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-clip: content-box !important;
  -webkit-filter: blur(10px) !important;
  filter: blur(10px) !important;
}
.videojs-player .video-js .vjs-big-play-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}
.videojs-player .video-js .vjs-big-play-button:hover {
  background: #ef4f30 !important;
}
.videojs-player .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 35px !important;
}
.videojs-player .video-js .vjs-control-bar {
  background: transparent !important;
  margin-bottom: 5px !important;
}
.videojs-player .video-js .vjs-text-track-display,
.videojs-player .video-js .vjs-tech,
.videojs-player .video-js .vjs-poster,
.videojs-player .video-js .vjs-modal-dialog,
.videojs-player .video-js .vjs-loading-spinner,
.videojs-player .video-js .vjs-big-play-button,
.videojs-player .video-js .vjs-control-bar,
.videojs-player .video-js .vjs-error-display {
  z-index: 1 !important;
}
.videojs-player .vjs-fullscreen {
  max-height: 100svh !important;
  min-height: 100svh !important;
}
.videojs-player .vjs-fullscreen .vjs-text-track-display,
.videojs-player .vjs-fullscreen .vjs-tech,
.videojs-player .vjs-fullscreen .vjs-poster,
.videojs-player .vjs-fullscreen .vjs-modal-dialog {
  height: 100svh !important;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.uploads {
  display: flex;
  padding-right: 100px;
}
.uploads .uploads-overflow {
  overflow-x: auto;
  max-width: 100%;
  display: flex;
}
.uploads .upload-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  min-width: 70px;
  min-height: 70px;
  max-width: 70px;
  max-height: 70px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #757575;
  margin-right: 10px;
}
.uploads .upload-item .remove-upload-item,
.uploads .upload-item .uploading,
.uploads .upload-item .loading,
.uploads .upload-item .thumb-video {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  margin: 3px;
  font-size: 18px;
  color: #ff0303;
  transition: 0.2s ease;
}
.uploads .upload-item .remove-upload-item:hover,
.uploads .upload-item .thumb-video:hover,
.uploads .upload-item .remove-upload-item:active,
.uploads .upload-item .thumb-video:active {
  opacity: 0.7;
}
.uploads .upload-item .uploading {
  color: #03ff96;
  font-size: 16px;
  margin: 4px;
}
.uploads .upload-item .loading {
  color: aqua;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.uploads .upload-item .thumb-video {
  left: 48%;
  top: 46%;
  transform: translate(-50%, -50%);
  max-width: 16px;
  max-height: 16px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16171a;
}
.uploads .upload-item .upload-thumb {
  height: 100%;
  width: 100%;
  filter: blur(1px);
}
.uploads .upload-item .upload-thumb .ant-image {
  height: 100%;
  width: 100%;
}
.uploads .upload-item .upload-thumb img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
}
.uploads .upload-item .info-upload-item {
  position: absolute;
  z-index: 1;
  bottom: 0;
  height: max-content;
  width: 100%;
  padding: 5px;
}
.uploads .upload-item .info-upload-item svg {
  color: #03ff96;
}
.uploads .upload-item .info-upload-item .upload-size,
.uploads .upload-item .info-upload-item .upload-name {
  margin: 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 10px;
  letter-spacing: 0.005em;
  color: #f2f6f9;
}
.uploads .upload-item .info-upload-item .upload-name {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploads .add-more {
  min-width: 70px;
  min-height: 70px;
  max-width: 70px;
  max-height: 70px;
  border-radius: 4px;
  border: 1px dotted #c7d0d9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7d0d9;
  background: #ebeff2;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.compose {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-top: 1px solid #c7d0d9;
  background: #2d2d2e;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.compose .container-uploads-and-text {
  padding: 0 10px;
  padding-top: 10px;
}
.compose .custom-pay-per-view-compose {
  padding: 5px 0;
  padding-right: 10px;
  overflow-x: auto;
}
.compose .content-icons-message-two {
  display: flex;
  align-items: center;
  gap: 16px;
}
.compose .content-icons-message-two .emotion-popover {
  position: relative;
  right: 0;
  top: calc(50% - (20px / 2));
  font-size: 20px;
  min-height: 20px;
  max-height: 20px;
  min-width: 20px;
  max-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4f30;
  cursor: pointer;
}
.compose .content-icons-message-two .ant-btn {
  width: 140px;
  height: 40px;
}
.compose .content-icons-message {
  display: flex;
  gap: 16px;
}
.compose textarea {
  background: transparent !important;
  height: 70px;
  padding: 0;
  color: #ebeff2;
}
.compose textarea:disabled::placeholder {
  color: red;
}
.compose .grp-file-icon {
  height: 16px;
  width: 16px;
}
.compose .grp-file-icon span,
.compose .grp-file-icon div {
  height: 16px;
  width: 16px;
}
.compose .grp-file-icon svg {
  color: #b3b3b3;
  font-size: 16px;
}
.compose .grp-file-icon .avatar-uploader .ant-upload {
  width: max-content;
  height: max-content;
  background: transparent;
  border: none;
  margin: 0;
}
.compose .grp-file-icon .avatar-uploader .ant-upload img {
  display: none;
  width: 20px !important;
  height: 20px;
  object-fit: cover;
}
.compose .grp-file-icon .ant-upload-select.ant-upload-select-picture-card .anticon {
  position: unset;
  top: unset;
  left: unset;
  color: #6d758c !important;
  font-size: 22px;
  padding: 0;
  background: transparent;
}
.compose .grp-send {
  height: 48px;
  width: 48px;
  background: #ef4f30;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compose .grp-send .anticon {
  font-size: 18px;
  color: #f2f6f9;
  transform: rotate(-45deg);
}
.compose .grp-send:hover {
  background: #ef4f30;
}
.compose.stream {
  border-color: #ef4f30;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.compose.stream .grp-icons .grp-emotions {
  position: relative;
  right: 0;
  top: 0;
}
.compose.stream .grp-send {
  padding: 5px 15px;
}
.compose .container-icons-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px;
  margin-left: 10px;
}
.compose .container-icons-message .icon {
  cursor: pointer;
  font-size: 16px;
  transition: 0.2s ease;
  color: #b3b3b3;
}
.compose .container-icons-message .icon:hover,
.compose .container-icons-message .icon:active,
.compose .container-icons-message .icon.active {
  color: #ef4f30;
}
.compose .container-icons-message .icon.disabled {
  color: #b3b3b3 !important;
  cursor: no-drop;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.model-earning-list-values .grid-container-earning {
  position: relative;
  border-radius: 8px;
  border: 1px solid #c7d0d9;
  background: #ffffff;
  margin-top: calc(12px + 20px);
  padding: 20px 30px;
}
.model-earning-list-values .grid-container-earning .title-grid-container-earning {
  position: absolute;
  z-index: 1;
  left: 30px;
  top: -12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ef4f30;
  border-radius: 4px;
  color: #f2f6f9;
  padding: 0 10px;
  height: 24px;
}
.model-earning-list-values .grid-container-earning .title-grid-container-earning p {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.005em;
}
.model-earning-list-values .col-container-earning {
  margin-top: 10px;
  min-width: 180px;
  max-width: 180px;
}
.model-earning-list-values .col-container-earning p {
  margin: 0;
}
.model-earning-list-values .col-container-earning .container-description {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #757575 !important;
}
.model-earning-list-values .col-container-earning .container-description p {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.019em;
  color: #757575 !important;
}
.model-earning-list-values .col-container-earning .container-description svg {
  cursor: pointer;
  font-size: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-left: 10px;
}
.model-earning-list-values .col-container-earning .value {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.019em;
  color: #b3b3b3 !important;
}
.model-earning-list-values .col-container-earning .text1 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.005em;
  color: #757575 !important;
}
.ant-popover {
  max-width: 200px;
  padding: 0;
  top: 0;
}
.ant-popover .ant-popover-content .ant-popover-inner {
  border-radius: 8px;
  background: rgba(242, 242, 242, 0.95);
  border: 1px solid #f2994a;
}
.ant-popover .ant-popover-content .ant-popover-inner .ant-popover-title {
  border: none !important;
  font-size: 9px;
  font-weight: 400;
  line-height: 10px;
  letter-spacing: 0.005em;
  padding: 10px;
  color: #757575;
}
.ant-popover .ant-popover-content .ant-popover-arrow {
  display: none;
  left: 7px;
}
.ant-popover .ant-popover-content .ant-popover-arrow .ant-popover-arrow-content::before {
  background: #f2994a;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.stats-earning {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.stats-earning .ant-statistic {
  padding: 0 10px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.content-custom-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.content-custom-image .loading-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: #f2f6f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-custom-image .loading-image .loader {
  width: 60px;
  height: 60px;
  border: 4px solid transparent;
  border-left-color: #ef4f30;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.content-custom-image .filter-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: content-box;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.content-custom-image.ant-image-mask {
  transform: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
.content-custom-image .ant-image {
  display: flex;
  justify-content: center;
  height: 100%;
}
.content-custom-image .ant-image img {
  height: 100%;
  object-position: center;
  object-fit: cover;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-btns-carrousel-prev-and-next div {
  position: absolute;
  z-index: 1;
  top: calc(50% - 10px);
  cursor: pointer;
  margin: 0 10px;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: 0.2s ease;
}
.container-btns-carrousel-prev-and-next div svg {
  font-size: 20px;
  color: #f2f6f9;
}
@media screen and (max-width: 376px) {
  .container-btns-carrousel-prev-and-next div svg {
    font-size: 14px;
  }
}
.container-btns-carrousel-prev-and-next div:hover {
  background: rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 376px) {
  .container-btns-carrousel-prev-and-next div {
    top: calc(50% - 9px);
    padding: 5px;
  }
  .container-btns-carrousel-prev-and-next div svg {
    font-size: 18px;
  }
}
.container-btns-carrousel-prev-and-next .prev {
  left: 0;
}
.container-btns-carrousel-prev-and-next .next {
  right: 0;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.footer {
  border-top: 1px solid #757575;
  background: transparent;
  min-height: 65px;
  max-height: max-content;
  display: flex;
  align-items: center;
}
.footer ul li p {
  color: #8a96a3;
  font-weight: 600;
}
.footer ul li p:hover {
  opacity: 0.8;
}
.footer ul li a:active,
.footer ul li p:active {
  transition-duration: 0s;
  color: #ef4f30;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.input-copy {
  overflow: hidden;
  width: 100%;
  margin-bottom: 10px;
  height: 40px;
  border-radius: 8px;
  background: #222222 !important;
}
.input-copy .ant-space {
  width: 100%;
  height: 100%;
}
.input-copy .ant-space .ant-space-item {
  width: 100%;
  height: 100%;
}
.input-copy .ant-space .ant-space-item .ant-space-compact {
  width: 100%;
  height: 100%;
}
.input-copy .ant-space .ant-space-item .ant-space-compact input {
  box-shadow: none;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
}
.input-copy .ant-space .ant-space-item .ant-space-compact .pi-files {
  cursor: pointer;
  min-width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: #c7d0d9;
  transition: all 0.2s ease;
}
.input-copy .ant-space .ant-space-item .ant-space-compact .pi-files svg {
  margin: 0;
  font-size: 20px;
  color: #f2f6f9;
  transform: rotateZ(180deg) rotateY(180deg);
}
.input-copy .ant-space .ant-space-item .ant-space-compact .pi-files.disabled {
  cursor: no-drop;
}
.input-copy .ant-space .ant-space-item .ant-space-compact .pi-files.disabled svg {
  color: #757575;
}
.input-copy .ant-space .ant-space-item .ant-space-compact .pi-files:hover,
.input-copy .ant-space .ant-space-item .ant-space-compact .pi-files:active {
  background: #757575;
}
.vid-split {
  background-color: #e2e8ec;
  border-radius: 15px;
  padding: 22px 25px;
}
.vid-split .vid-act {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vid-split .vid-act .o-w-ner {
  display: flex;
  cursor: pointer;
}
.vid-split .vid-act .o-w-ner .owner-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vid-split .vid-act .o-w-ner .owner-name small {
  font-size: 14px;
  color: #696e80;
}
.vid-split .vid-act .o-w-ner .owner-name .name {
  color: #2c2d33;
  font-weight: 500;
  font-size: 16px;
}
.vid-split .vid-act .o-w-ner .owner-name .anticon {
  font-size: 14px;
  margin-left: 2px;
  color: #ef4f30;
}
.vid-split .vid-act .o-w-ner:hover {
  opacity: 0.9;
}
.vid-split .vid-act .o-w-ner .ant-avatar {
  width: 50px;
  height: 50px;
  border: none;
  margin-right: 10px;
}
.vid-split .vid-act .act-btns .react-btn {
  color: #b3b3b3;
  background: #f2f6f9;
  font-weight: 500;
  border: none;
  margin-left: 5px;
  border-radius: 6px;
  padding: 6px 14px;
  outline: none;
  cursor: pointer;
  transition: 0.2s ease;
}
.vid-split .vid-act .act-btns .react-btn.active,
.vid-split .vid-act .act-btns .react-btn:hover {
  color: #f2f6f9;
  background: #ef4f30;
}
.vid-split .vid-act .act-btns .react-btn:disabled {
  color: #f2f6f9;
  background: #757575;
  opacity: 1;
  cursor: auto;
}
@media screen and (max-width: 376px) {
  .vid-split {
    border-radius: 0;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    padding: 22px 15px;
  }
}
.footer-checklist {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.footer-checklist .content-footer-checklist {
  position: relative;
  background: #ebeff2;
  border-top: 1px solid #c7d0d9;
  width: 100vw;
  padding: 20px;
}
.footer-checklist .content-footer-checklist .container-grid {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer-checklist .content-footer-checklist .container-grid .grid {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 20px;
}
.footer-checklist .content-footer-checklist .container-grid .row {
  animation: slide 15s infinite linear;
  display: flex;
  flex-wrap: nowrap;
  min-width: 100vw;
  justify-content: space-between;
  overflow: hidden;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.footer-checklist .content-footer-checklist .container-grid .col {
  text-wrap: nowrap;
  margin-right: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.footer-checklist .content-footer-checklist .container-grid .col .incomplete,
.footer-checklist .content-footer-checklist .container-grid .col .complete {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-checklist .content-footer-checklist .container-grid .col .incomplete svg,
.footer-checklist .content-footer-checklist .container-grid .col .complete svg {
  font-size: 20px;
  min-height: 20px;
  min-width: 20px;
  border-radius: 4px;
}
.footer-checklist .content-footer-checklist .container-grid .col .incomplete p,
.footer-checklist .content-footer-checklist .container-grid .col .complete p {
  margin: 0;
  color: #16171a;
  font-weight: 600px;
  font-size: 16px;
}
.footer-checklist .content-footer-checklist .container-grid .col .incomplete svg {
  color: yellow;
  font-size: 24px;
}
.footer-checklist .content-footer-checklist .container-grid .col .complete svg {
  color: #06c258;
}
.footer-checklist .content-footer-checklist .container-grid .title-checklist {
  margin: 0;
  font-size: 18px;
  max-width: 700px;
  font-weight: 600px;
}
@media screen and (max-width: 376px) {
  .footer-checklist .content-footer-checklist .container-grid .title-checklist {
    font-size: 16px;
  }
}
.footer-checklist .content-footer-checklist .container-grid .title-checklist a {
  color: #ef4f30;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.btn-create-partner {
  max-width: 100%;
  width: 100%;
  height: 40px;
  margin-top: 10px;
}
.content-form-create-partner {
  max-width: 1076px;
}
.container-form-partner {
  max-width: 768px;
}
.container-form-partner .page-heading {
  padding-left: 20px;
}
.container-form-partner .custom-col {
  padding: 0 5px;
}
@media screen and (max-width: 376px) {
  .container-form-partner .page-heading {
    padding-left: 0;
  }
  .container-form-partner .custom-col {
    padding: 0;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-page-indication {
  padding-bottom: 20px;
}
.container-page-indication .verify-info {
  margin-top: 20px;
  margin-bottom: 0;
}
.container-page-indication .page-heading {
  color: #6d758c;
}
.container-page-indication .custom-statistic {
  text-align: center;
}
.container-page-indication .custom-statistic .ant-statistic-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.019em;
  color: #ef4f30;
  margin: 0;
}
.container-page-indication .custom-statistic .ant-statistic-content {
  line-height: 18px;
}
.container-page-indication .custom-statistic .ant-statistic-content .ant-statistic-content-value {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.017em;
  color: #757575;
}
.container-page-indication .col-two {
  padding: 0 10px !important;
}
@media screen and (max-width: 376px) {
  .container-page-indication .col-two {
    padding: 10px 0 !important;
  }
}
.container-page-indication .container-inputs-copy {
  display: flex;
  flex-direction: column;
  align-items: end;
  margin: 20px 0;
}
.container-page-indication .container-inputs-copy .custom-space {
  gap: 4px !important;
}
.container-page-indication .container-inputs-copy .custom-space:first-child {
  margin-bottom: 10px;
}
.container-page-indication .container-inputs-copy .custom-space .input-copy {
  background: #ffffff;
  height: 34px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid #c7d0d9;
}
.container-page-indication .container-inputs-copy .custom-space .input-copy input {
  background: transparent !important;
  color: #b3b3b3;
}
.container-page-indication .container-inputs-copy .custom-space .input-copy .pi-files {
  background: transparent;
  min-width: 34px;
}
.container-page-indication .container-inputs-copy .custom-space .input-copy .pi-files:hover,
.container-page-indication .container-inputs-copy .custom-space .input-copy .pi-files:active {
  background: transparent;
}
.container-page-indication .container-inputs-copy .custom-space .input-copy .pi-files svg {
  color: #ef4f30;
  font-size: 16px;
}
.container-page-indication .container-inputs-copy .custom-space .input-copy .pi-files svg:hover,
.container-page-indication .container-inputs-copy .custom-space .input-copy .pi-files svg:active {
  opacity: 0.8;
}
@media screen and (max-width: 376px) {
  .container-page-indication .container-inputs-copy .custom-space {
    width: 100%;
    align-items: start;
    flex-direction: column;
  }
  .container-page-indication .container-inputs-copy .custom-space .ant-space-item {
    width: 100%;
  }
}
.container-page-indication .container-inputs-copy p {
  margin: 0;
  color: #757575;
}
@media screen and (max-width: 376px) {
  .container-page-indication .container-inputs-copy {
    margin: 15px 0;
  }
}
.container-page-indication .container-table th,
.container-page-indication .container-table td {
  text-align: center;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.prod-card {
  display: flex;
  margin: 30px 0;
}
.prod-card .prod-img {
  position: relative;
}
.prod-card .prod-img img {
  width: 450px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #333f55;
  border-radius: 15px;
}
.prod-card .prod-img .prod-stock {
  position: absolute;
  right: auto;
  left: 0px;
  top: 10px;
  color: #f2f6f9;
  line-height: 2em;
  background-color: #c82538;
  width: auto;
  padding: 0.2em 2em;
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 90% 50%, 100% 0);
  font-size: 12px;
  font-weight: 600;
  margin: 5px 0;
}
.prod-card .prod-img .prod-digital {
  position: absolute;
  right: auto;
  left: 0px;
  top: 40px;
  color: #f2f6f9;
  line-height: 2em;
  background-color: #ef4f30;
  width: auto;
  padding: 0.2em 2em;
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 90% 50%, 100% 0);
  font-size: 12px;
  font-weight: 600;
  margin: 5px 0;
  text-transform: capitalize;
}
.prod-card .prod-img .ant-image-mask {
  border-radius: 7px;
}
.prod-card .prod-info {
  width: 100%;
  padding: 0 20px;
}
.prod-card .prod-info .prod-name {
  color: #333;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: capitalize;
}
.prod-card .prod-info .prod-desc {
  font-size: 13px;
  color: #666;
}
@media screen and (max-width: 376px) {
  .prod-card {
    flex-direction: column;
  }
}
.prod-price {
  font-size: 28px;
  color: #16171a;
  font-weight: 600;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.two-fa-and-exclude-account {
  max-width: 600px;
}
.two-fa-and-exclude-account .custom-heading {
  padding-left: 5px;
}
.two-fa-and-exclude-account .input {
  max-width: 300px;
}
.two-fa-and-exclude-account .custom-btn-2fa-and-exclude-account {
  margin-top: 15px;
  height: 40px;
  max-width: 100%;
}
.two-fa-and-exclude-account .form-2fa .custom-input-copy label {
  font-size: 10px;
  line-height: 20.43px;
  padding: 0 5px;
}
.two-fa-and-exclude-account .form-2fa .custom-input-copy .input-copy {
  margin: 0;
}
.two-fa-and-exclude-account .container-qr-code-two-fa {
  display: flex;
  align-items: center;
  justify-content: center;
}
.two-fa-and-exclude-account .container-qr-code-two-fa .content-qr-code-two-fa p,
.two-fa-and-exclude-account .container-qr-code-two-fa .content-qr-code-two-fa .container-qr-code {
  color: #878787;
  margin: 0;
}
.two-fa-and-exclude-account .container-qr-code-two-fa .content-qr-code-two-fa p {
  font-weight: 600;
  text-align: center;
  margin-bottom: 5px;
}
.two-fa-and-exclude-account .container-qr-code-two-fa .content-qr-code-two-fa .container-qr-code {
  border: 4px solid #878787;
  border-radius: 8px;
  width: 186px;
  height: 186px;
  background: #f2f6f9;
  overflow: hidden;
}
.two-fa-and-exclude-account .container-qr-code-two-fa .content-qr-code-two-fa .container-qr-code img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
@media screen and (max-width: 576px) {
  .two-fa-and-exclude-account .input {
    max-width: 100%;
  }
  .two-fa-and-exclude-account .container-qr-code-two-fa {
    margin-top: 10px;
  }
}
.modal-account-secury {
  padding: 10px;
}
.modal-account-secury .icon-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.modal-account-secury .icon-alert svg {
  color: #e12222;
  font-size: 140px;
}
.modal-account-secury .container-btns-account-secury {
  display: flex;
  width: 100%;
  gap: 20px;
}
.modal-account-secury .container-btns-account-secury button {
  max-width: 100%;
  width: 100%;
  height: 36px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.vid-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
}
.vid-card .vid-thumb {
  height: 185px;
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vid-card .vid-thumb .lock-middle {
  position: relative;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
}
.vid-card .vid-thumb .lock-middle .anticon {
  font-size: 32px;
  color: #f2f6f9;
}
.vid-card .vid-thumb .lock-middle .ant-btn {
  font-size: 11px;
  color: #f2f6f9;
}
.vid-card .vid-thumb .card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 376px) {
  .vid-card .vid-thumb {
    height: 150px;
  }
}
.vid-card .vid-stats {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  color: #f2f6f9;
  font-size: 10px;
  padding: 5px 0 5px 5px;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to bottom, #04040e00 0%, rgba(60, 60, 60, 0.5) 100%);
}
.vid-card .vid-stats a {
  color: #f2f6f9;
  padding-right: 10px;
}
.vid-card .vid-info {
  color: #f2f6f9;
  background-color: #ef4f30;
  padding: 5px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 376px) {
  .vid-card .vid-info {
    font-size: 11px;
  }
}
.vid-card .vid-price {
  position: absolute;
  left: 0px;
  top: 10px;
  z-index: 1;
}
.vid-card .vid-price .label-price {
  color: #f2f6f9;
  background-color: #c82538;
  padding: 3px 15px;
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 90% 50%, 100% 0);
  font-size: 11px;
  font-weight: 600;
  margin: 5px 0;
}
.vid-card .vid-calendar {
  position: absolute;
  right: 5px;
  top: 10px;
  z-index: 1;
  color: #f2f6f9;
  font-size: 20px;
}
.vid-card:hover {
  opacity: 0.9;
}
.vid-card:hover .vid-info {
  background-color: #c82538;
}
.upload-bl {
  position: relative;
  background-color: #eee;
  border-radius: 3px;
}
.upload-bl .remove-btn {
  position: absolute;
  right: 0;
  top: 0;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.model-videos-container-btn {
  display: flex;
  gap: 10px;
  flex-direction: row;
}
.model-videos-container-btn button {
  height: 38px;
  font-size: 14px;
  max-width: max-content;
}
@media screen and (max-width: 992px) {
  .model-videos-container-btn {
    width: 100%;
    margin-bottom: 10px;
  }
  .model-videos-container-btn button {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 376px) {
  .model-videos-container-btn {
    flex-direction: column;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.gallery-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
}
.gallery-card .gallery-thumb {
  height: 320px;
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery-card .gallery-thumb .lock-middle {
  position: relative;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
}
.gallery-card .gallery-thumb .lock-middle .anticon {
  font-size: 32px;
  color: #f2f6f9;
}
.gallery-card .gallery-thumb .lock-middle .ant-btn {
  font-size: 11px;
}
.gallery-card .gallery-thumb .card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 376px) {
  .gallery-card .gallery-thumb {
    height: 220px;
  }
}
.gallery-card .gallery-stats {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  color: #f2f6f9;
  font-size: 10px;
  padding: 5px 0 5px 5px;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to bottom, #04040e00 0%, rgba(60, 60, 60, 0.5) 100%);
}
.gallery-card .gallery-stats a {
  color: #f2f6f9;
  padding-right: 10px;
}
.gallery-card .gallery-info {
  color: #f2f6f9;
  background-color: #ef4f30;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.gallery-card .gallery-info a {
  color: #f2f6f9;
}
@media screen and (max-width: 376px) {
  .gallery-card .gallery-info {
    font-size: 11px;
  }
}
.gallery-card .gallery-price {
  position: absolute;
  left: 0px;
  top: 10px;
  z-index: 99;
}
.gallery-card .gallery-price .label-price {
  color: #f2f6f9;
  background-color: #c82538;
  font-size: 11px;
  width: auto;
  padding: 3px 15px;
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 90% 50%, 100% 0);
  font-weight: 600;
  margin: 5px 0;
}
.gallery-card:hover {
  opacity: 0.9;
}
.gallery-card:hover .gallery-info {
  background-color: #c82538;
}
.photo-upload-list {
  position: relative;
}
.photo-upload-list .photo-thumb {
  margin-right: 10px;
}
.photo-upload-list .photo-thumb .anticon {
  font-size: 50px;
}
.photo-upload-list .photo-thumb img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.photo-upload-list .remove-photo {
  position: absolute;
  right: 5px;
  top: 5px;
}
.photo-upload-list .cover-photo {
  position: absolute;
  right: 25px;
  top: 5px;
}

.list-photos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.list-photos .container-img-list-photos {
  position: relative;
  min-width: 130px;
  max-width: 130px;
  height: 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.list-photos .container-img-list-photos .ant-image {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.list-photos .container-img-list-photos .filter-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: content-box;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.list-photos.blur img {
  filter: blur(20px);
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.contentInner {
  background: #fff;
  padding: 24px;
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.01);
  min-height: calc(100vh - 230px);
  position: relative;
}
@media (max-width: 767px) {
  .contentInner {
    padding: 12px;
    min-height: calc(100vh - 160px);
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
@media screen and (min-width: 576px) {
  .home-page {
    padding: 0 10px;
  }
}
.banner {
  margin-bottom: 25px;
}
.custom.main-background {
  margin-bottom: 25px;
}
.custom.main-background .ant-col {
  padding: 10px 12px;
}
@media screen and (max-width: 376px) {
  .custom.main-background .ant-col {
    padding: 5px;
  }
}
.home-container {
  display: flex;
  width: 100%;
}
.home-container .left-container {
  width: 59%;
  padding: 10px 10px 10px 0;
}
.home-container .right-container {
  width: 41%;
  padding: 10px 0 10px 10px;
}
@media screen and (max-width: 768px) {
  .home-container {
    flex-direction: column-reverse;
  }
  .home-container .left-container,
  .home-container .right-container {
    width: 100%;
    padding: 0;
  }
  .home-container .right-container {
    margin: 15px 0;
  }
}
.filter-feed {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.filter-feed .anticon {
  font-size: 22px;
  color: #ef4f30;
}
.filter-feed .ant-btn {
  margin: 0 5px;
  border: none;
  font-size: 15px;
  color: #666;
  border-radius: 0;
}
.filter-feed .ant-btn.active {
  color: #333;
  border-bottom: 2px solid #c82538;
}
@media screen and (max-width: 376px) {
  .filter-feed .ant-btn {
    margin: 0;
  }
}
.visit-history .top-story {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.visit-history .story-list {
  overflow: auto;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 15px;
  display: flex;
  border-bottom: 1px solid #eee;
}
.visit-history .story-list .story-per-card {
  cursor: pointer;
  margin-right: 10px;
  text-align: center;
  position: relative;
}
.visit-history .story-list .story-per-card .blink-border {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px;
  background: linear-gradient(90deg, orange 10%, #ff0066 50%, violet 90%);
}
.visit-history .story-list .story-per-card .per-avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  position: relative;
  margin: 3px;
  border: 2px solid white;
}
.visit-history .story-list .story-per-card .live-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 80%);
  background: linear-gradient(90deg, #ff0066 10%, #ff0066 90%);
  color: #fff;
  padding: 0 5px;
  border-radius: 7px;
  border: 2px solid #fff;
  font-size: 11px;
  line-height: 17px;
}
.suggestions {
  border-radius: 8px;
  border: 1px solid #c7d0d9;
  padding: 16px;
}
@media screen and (max-width: 376px) {
  .suggestions {
    border: none;
    padding: 0;
    padding: 0 9px;
  }
}
.home-footer {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.home-footer .footer {
  border: none;
  margin: 0;
  background: transparent !important;
}
.home-footer.active {
  opacity: 1;
}
@media screen and (max-width: 769px) {
  .home-footer {
    display: none;
  }
}
.sug-text {
  color: #41444d !important;
}
.slick-prev,
.slick-next {
  display: none !important;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.feed-card {
  margin-bottom: 25px;
  border-bottom: 1px solid #c7d0d9;
}
.feed-card .feed-top {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 376px) {
  .feed-card .feed-top {
    padding: 0 9px;
  }
}
.feed-card .feed-top .feed-top-left {
  cursor: pointer;
  display: flex;
}
.feed-card .feed-top .feed-top-left .container-per-avt {
  position: relative;
}
.feed-card .feed-top .feed-top-left .container-per-avt .online-status {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #888;
  border-radius: 50%;
  border: 1px solid #f2f6f9;
  bottom: 0;
  right: 0;
}
.feed-card .feed-top .feed-top-left .container-per-avt .online-status.active {
  animation-name: twinkle;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
  background-color: #4ec52a;
}
@media screen and (max-width: 376px) {
  .feed-card .feed-top .feed-top-left .container-per-avt .online-status {
    bottom: 0;
    left: 30px;
  }
}
.feed-card .feed-top .feed-top-left .feed-name {
  padding: 0 10px;
}
.feed-card .feed-top .feed-top-left .feed-name div {
  display: flex;
  align-items: center;
}
.feed-card .feed-top .feed-top-left .feed-name div h4 {
  margin: 0;
  text-transform: capitalize;
}
@media screen and (max-width: 425px) {
  .feed-card .feed-top .feed-top-left .feed-name div h4 {
    max-width: 11ch;
  }
}
.feed-card .feed-top .feed-top-left .feed-name div .anticon {
  margin-left: 2px;
  font-size: 16px;
  color: #878787;
}
.feed-card .feed-top .feed-top-left .feed-name div .live-status {
  background: #c82538;
  color: #f2f6f9;
  padding: 0 5px;
  border-radius: 7px;
  border: 2px solid #f2f6f9;
  font-size: 11px;
  line-height: 17px;
  text-transform: uppercase;
}
.feed-card .feed-top .feed-top-left .feed-name svg {
  min-height: 16px;
  min-width: 16px;
}
.feed-card .feed-top .feed-top-left .feed-name h5 {
  font-size: 13px;
  line-height: 20px;
  color: #757575;
}
.feed-card .feed-top .feed-top-right {
  display: flex;
  height: max-content;
}
.feed-card .feed-top .feed-top-right .feed-time {
  color: #757575;
  margin: 0 10px;
  white-space: nowrap;
  text-align: right;
  display: flex;
  align-items: center;
  font-size: 11px !important;
}
.feed-card .feed-top .feed-top-right .dropdown-options {
  font-size: 20px;
  color: #696e80;
  display: flex;
  align-items: center;
}
.feed-card .feed-container {
  position: relative;
}
.feed-card .feed-container .loading-feed {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  background: #f2f6f9;
  display: none;
  align-items: center;
  justify-content: center;
}
.feed-card .feed-container .loading-feed .loader {
  width: 60px;
  height: 60px;
  border: 4px solid transparent;
  border-left-color: #ef4f30;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.feed-card .feed-container .disabled-loading-feed {
  display: none;
}
.feed-card .feed-container .active-loading-feed {
  display: flex;
}
.feed-card .feed-container .feed-content {
  border-radius: 15px;
}
.feed-card .feed-container .feed-content div,
.feed-card .feed-container .feed-content img {
  border-radius: 15px;
}
@media screen and (max-width: 576px) {
  .feed-card .feed-container .feed-content {
    border-radius: 0px;
  }
  .feed-card .feed-container .feed-content div,
  .feed-card .feed-container .feed-content img {
    border-radius: 0px;
  }
}
.feed-card .feed-container .lock-content-container {
  position: relative;
  height: 440px;
}
.feed-card .feed-container .feed-text {
  margin-bottom: 5px;
  color: #666;
}
.feed-card .feed-container .feed-text p {
  white-space: pre-line;
  font-weight: 400;
}
.feed-card .feed-container .feed-text::first-letter {
  text-transform: capitalize;
}
@media screen and (max-width: 376px) {
  .feed-card .feed-container .feed-text {
    padding: 0 9px;
  }
}
.feed-card .feed-bottom .feed-actions {
  display: flex;
  width: 100%;
  transition: all 0.3s ease-in-out;
  padding: 10px 0;
}
.feed-card .feed-bottom .feed-actions .action-item {
  width: 100%;
  text-align: left;
  align-items: center;
  display: flex;
  gap: 20px;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico {
  cursor: pointer;
  padding: 0;
  transition: 0.2s ease;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico .anticon {
  font-size: 24px;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico:hover:not(.disabled),
.feed-card .feed-bottom .feed-actions .action-item .action-ico.active {
  color: #ef4f30;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico.disabled {
  cursor: auto;
  color: #757575;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico:nth-child(3) {
  display: flex;
  align-items: center;
  gap: 5px;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico:nth-child(3):hover {
  color: #0cf453;
}
.feed-card .feed-bottom .feed-actions .action-item .action-ico:nth-child(3).disabled {
  cursor: auto;
  color: #757575;
}
.feed-card .feed-bottom .feed-actions .action-item:last-child {
  text-align: right;
  justify-content: flex-end;
  width: 25%;
}
@media screen and (max-width: 376px) {
  .feed-card .feed-bottom .feed-actions {
    padding: 10px;
  }
}
@media screen and (max-width: 376px) {
  .feed-card .feed-bottom .feed-comment {
    padding: 0 10px;
  }
}
.feed-card .videojs-player .video-js {
  border-radius: 3px;
}
.feed-card .videojs-player .video-js .vjs-poster {
  border-radius: 3px;
  border: none;
}
.f-upload-list {
  display: flex;
  width: 100%;
  overflow: auto;
  flex-wrap: wrap;
}
.f-upload-list .f-upload-item {
  border-radius: 5px;
  overflow: hidden;
  padding: 5px;
  margin: 5px;
  background-color: #f7f7f7;
  position: relative;
}
.f-upload-list .f-upload-item .f-remove {
  position: absolute;
  right: 5px;
  top: 5px;
}
.f-upload-list .f-upload-item .f-upload-thumb {
  height: 100px;
  width: 120px;
}
.f-upload-list .f-upload-item .f-upload-thumb .f-thumb-vid {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f6f9;
  cursor: pointer;
}
.f-upload-list .f-upload-item .f-upload-thumb .f-thumb-vid:hover {
  background-color: #eee;
}
.f-upload-list .f-upload-item .f-upload-thumb .f-thumb-vid .anticon {
  color: #ef4f30;
  font-size: 22px;
}
.f-upload-list .f-upload-item .f-upload-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
}
.f-upload-list .f-upload-item .f-upload-size {
  font-size: 8px;
}
.f-upload-list .add-more {
  display: flex;
  height: 130px;
  align-self: center;
  justify-content: center;
  padding: 10px;
  background-color: #eee;
  border-radius: 5px;
  cursor: pointer;
}
.f-upload-list .add-more:hover {
  opacity: 0.8;
}
.f-upload-list .add-more .ant-upload {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.content-slider-teaser {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  height: 100%;
}
.content-slider-teaser .videojs-player {
  height: 100%;
}
.content-slider-teaser .videojs-player .video-js {
  height: 100%;
  padding-top: 440px;
}
.feed-slider {
  position: relative;
  max-height: 600px !important;
}
.feed-slider .ant-carousel .slick-slide {
  height: auto;
  line-height: normal;
}
.feed-slider .ant-carousel .slick-slide > div {
  height: 100%;
  display: flex;
  align-items: center;
}
.feed-slider .ant-carousel .slick-slide > div .content-slider {
  max-height: 600px;
}
.feed-slider .ant-carousel .slick-slide > div .content-slider .ant-image-mask {
  transform: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
.feed-slider .ant-carousel .slick-slide > div .content-slider a,
.feed-slider .ant-carousel .slick-slide > div .content-slider img {
  height: 600px;
  object-fit: contain;
}
.feed-slider .ant-carousel .slick-slide > div .content-slider a:hover,
.feed-slider .ant-carousel .slick-slide > div .content-slider img:hover {
  transform: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
.feed-slider .ant-carousel .ant-image-img-placeholder {
  background-color: transparent;
}
.feed-slider .videojs-player {
  max-height: 600px !important;
  overflow: hidden;
}
@media screen and (min-width: 376px) {
  .feed-slider .videojs-player {
    border-radius: 15px !important;
  }
}
.feed-slider .videojs-player .video-js {
  height: 600px !important;
  padding-top: 0px !important;
}
.feed-slider .videojs-player .video-js .vjs-text-track-display,
.feed-slider .videojs-player .video-js .vjs-tech,
.feed-slider .videojs-player .video-js .vjs-poster,
.feed-slider .videojs-player .video-js .vjs-modal-dialog {
  height: 600px !important;
}
.feed-slider .videojs-player .vjs-fullscreen {
  max-height: 100svh !important;
}
.feed-slider .videojs-player .vjs-fullscreen .vjs-text-track-display,
.feed-slider .videojs-player .vjs-fullscreen .vjs-tech,
.feed-slider .videojs-player .vjs-fullscreen .vjs-poster,
.feed-slider .videojs-player .vjs-fullscreen .vjs-modal-dialog {
  height: 100svh !important;
}
.feed-slider .proccessing {
  background-image: url('/v1/static/leaf.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
@media screen and (max-width: 769px) {
  .feed-slider .proccessing {
    height: 300px;
  }
}
@media screen and (max-width: 376px) {
  .feed-slider .proccessing {
    height: 215px;
  }
}
.feed-input:focus {
  background-color: #757575;
}
.ant-input-number-input-wrap input {
  height: 30px;
}
.input-f-desc {
  position: relative;
}
.input-f-desc .grp-emotions {
  z-index: 1;
  position: absolute;
  bottom: 5px;
  top: unset;
  right: 5px;
}
.input-f-desc .grp-colors {
  z-index: 9;
  position: absolute;
  bottom: 5px;
  right: 35px;
}
.input-f-desc .grp-colors .anticon {
  font-size: 22px;
  color: #ef4f30;
}
.input-f-desc .grp-colors .colors {
  position: absolute;
  top: 50%;
  right: 0;
  display: none;
}
.input-f-desc .grp-colors:hover .colors {
  display: block;
}
.poll-form {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  background-color: #f7f7f7;
}
.poll-form .poll-top {
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.poll-form .poll-top span {
  cursor: pointer;
}
.poll-form .poll-top span:hover {
  color: #ef4f30;
}
.poll-form .poll-top a {
  color: #f2f6f9;
  padding: 1px 7px;
  border-radius: 50%;
  background-color: #ef4f30;
}
.poll-form .poll-input {
  margin-bottom: 10px;
}
.poll-form .form-item-no-pad .ant-col {
  padding: 5px 0;
}
.feed-polls {
  max-width: 400px;
  margin: 10px auto;
}
.feed-polls .p-question {
  text-align: center;
  font-weight: 600;
}
.feed-polls .p-item {
  display: flex;
  background-color: #f0f8ff;
  padding: 5px;
  border-radius: 3px;
  justify-content: space-between;
  cursor: pointer;
  margin: 3px 0;
}
.feed-polls .p-item .p-desc {
  font-size: 11px;
}
.feed-polls .p-item .p-desc::first-letter {
  text-transform: capitalize;
}
.feed-polls .p-item:hover {
  opacity: 0.8;
}
.feed-polls .total-vote {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 10px;
  color: #888;
}
.story-switch-type {
  display: flex;
  flex-wrap: wrap;
  max-width: 660px;
  margin: auto;
  padding: 10px;
}
.story-switch-type .type-item {
  width: calc(50% - 20px);
  margin: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  padding: 100px 5px;
  border-radius: 8px;
  color: #f2f6f9;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  opacity: 0.8;
}
.story-switch-type .type-item:hover {
  opacity: 1;
}
.story-switch-type .type-item.left {
  background: linear-gradient(90deg, #ef4f30 10%, #ef4f30 50%, #ef4f30 90%);
}
.story-switch-type .type-item.right {
  background: linear-gradient(180deg, #ffa75c 10%, #c82538 50%, #ffa75c 90%);
}
.story-switch-type .type-item.middle {
  margin: auto;
  background: linear-gradient(180deg, #ef4f30 10%, #00a2ae 50%, #ef4f30 90%);
}
.story-switch-type .type-item span {
  padding: 5px 10px;
  font-size: 40px;
  color: #f2f6f9;
}
.story-switch-type .type-item span .anticon {
  font-size: 40px;
  color: #f2f6f9;
}
@media screen and (max-width: 376px) {
  .story-switch-type .type-item {
    padding: 50px 5px;
  }
}
.submit-btns {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.submit-btns .ant-upload,
.submit-btns .ant-btn {
  max-width: max-content;
  min-width: 140px;
  height: 40px;
  font-size: 14px;
}
.submit-btns .ant-upload svg,
.submit-btns .ant-btn svg {
  font-size: 16px;
}
@media screen and (max-width: 376px) {
  .submit-btns {
    flex-direction: column;
  }
  .submit-btns .ant-upload,
  .submit-btns .ant-btn {
    max-width: 100%;
    width: 100%;
  }
}
.search-post-bar {
  display: flex;
  width: 100%;
  margin: 0 0 5px;
  padding: 0 10px;
  justify-content: space-between;
  align-items: center;
}
.search-post-bar .ant-input-group-addon {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}
.search-post-bar .ant-input-affix-wrapper {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border-radius: 0 !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  display: flex;
  align-items: center;
}
.search-post-bar .ant-input-affix-wrapper button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  background: #ef4f30;
  border-color: #ef4f30;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.search-post-bar .ant-input-affix-wrapper input {
  height: 100%;
}
.search-post-bar .ant-input-search {
  min-height: 34px;
  max-height: 34px;
}
.search-post-bar .ant-input-group-addon button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  background: #ef4f30;
  border-color: #ef4f30;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.search-post-bar .ant-picker.ant-picker-range {
  height: 40px;
  position: absolute;
  left: 0;
  width: calc(100% - 120px);
}
.search-post-bar .ant-input-group-wrapper.ant-input-search {
  position: absolute;
  left: 0;
  width: calc(100% - 120px);
}
.search-post-bar .ant-input-group-wrapper.ant-input-search input {
  height: 30px;
}
.search-post-bar .ant-input-group-wrapper.ant-input-search .ant-input-search-button {
  height: 40px;
}
.search-post-bar .grid-btns {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.search-post-bar .grid-btns a {
  font-size: 20px;
  color: #666;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-post-bar .grid-btns a.active {
  color: #ef4f30;
}
@media screen and (max-width: 376px) {
  .search-post-bar {
    gap: 10px;
  }
  .search-post-bar .ant-input-search {
    margin-left: 9px;
  }
  .search-post-bar .ant-picker.ant-picker-range {
    width: calc(100% - 140px);
  }
  .search-post-bar .ant-input-group-wrapper.ant-input-search {
    width: calc(100% - 140px);
  }
  .search-post-bar .grid-btns a {
    margin: 0;
  }
}
.grid-view {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.grid-view .feed-grid-card {
  width: 33.33%;
  padding: 0 5px;
  margin-bottom: 10px;
  overflow: hidden;
}
.grid-view .feed-grid-card:hover {
  opacity: 0.9;
}
.grid-view .feed-grid-card .card-thumb {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}
.grid-view .feed-grid-card .card-thumb .card-middle {
  position: relative;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
}
.grid-view .feed-grid-card .card-thumb .card-middle .anticon {
  font-size: 32px;
  color: #f2f6f9;
}
.grid-view .feed-grid-card .card-thumb .card-middle .ant-btn {
  font-size: 11px;
}
.grid-view .feed-grid-card .card-thumb .card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
.grid-view .feed-grid-card .card-thumb .card-bottom .stats {
  background: rgba(121, 121, 121, 0.4);
  padding: 5px;
  border-radius: 5px;
  font-size: 10px;
  z-index: 999;
  display: flex;
}
.grid-view .feed-grid-card .card-thumb .card-bottom .stats a {
  margin-right: 10px;
  color: #f2f6f9;
}
.grid-view .feed-grid-card .card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  background-image: url(/v1/static/leaf.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 769px) {
  .grid-view .feed-grid-card .card-thumb {
    height: 325px;
  }
}
@media screen and (max-width: 376px) {
  .grid-view .feed-grid-card {
    width: 50%;
  }
  .grid-view .feed-grid-card .card-thumb {
    height: 250px;
  }
}
.fixed-scroll .feed-card:last-child {
  border: none;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.container-form-become-creator {
  max-width: 768px;
  width: 100%;
  padding: 25px 0;
}
.container-form-become-creator .title-form-become-creator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}
.container-form-become-creator .title-form-become-creator h1 {
  margin: 0;
  color: #6d758c;
  display: flex;
}
.container-form-become-creator .checked-icon-check {
  color: #878787 !important;
}
.container-form-become-creator .checked-button-check {
  background: #ebeff2 !important;
  color: #878787 !important;
  border: none;
}
.container-form-become-creator .checked-button-check:hover,
.container-form-become-creator .checked-button-check:active {
  color: #878787 !important;
  background: #ebeff2 !important;
}
.container-form-become-creator .awaiting-verification-id-block {
  border: 1px solid #ffc803 !important;
}
.container-form-become-creator .verified-account-id-block {
  border: 1px solid #03ff96 !important;
}
.container-form-become-creator .awaiting-verification-image-doc {
  background: #ffc803 !important;
}
.container-form-become-creator .verified-account-image-doc {
  background: #03ff96 !important;
}
.container-cover-upload {
  position: relative;
  margin: 10px 5px;
  margin-bottom: 54px;
  border-radius: 15px;
  height: 230px;
  background-color: #4a4a4a;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.container-cover-upload .avatar-upload {
  position: absolute;
  bottom: -54px;
  display: flex;
}
.container-cover-upload .avatar-upload .avatar-rounded {
  overflow: hidden;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 5px solid #f2f6f9;
  background: #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-cover-upload .avatar-upload .avatar-rounded img {
  width: 100%;
  height: 100%;
}
.container-cover-upload .avatar-upload .ant-form-item-control {
  padding: 0;
}
.container-cover-upload .avatar-upload .avatar-uploader {
  position: relative;
  overflow: hidden;
  width: 108px !important;
  height: 108px !important;
  border-radius: 50%;
  border: 5px solid #f2f6f9;
}
.container-cover-upload .avatar-upload .avatar-uploader img {
  height: 100%;
  object-fit: cover;
  scale: 1.1;
}
.container-cover-upload .avatar-upload .avatar-uploader .ant-btn-default {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 22px;
  background: #00000066;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #f2f6f9;
  font-size: 20px;
  padding: 0;
}
.container-cover-upload .avatar-upload .avatar-uploader .ant-btn-default svg {
  margin-bottom: 10px;
}
.container-cover-upload .avatar-upload .avatar-uploader .ant-upload-picture-card-wrapper {
  border: none;
}
.container-cover-upload .avatar-upload .avatar-uploader .ant-upload-picture-card-wrapper .ant-upload-select-picture-card {
  position: absolute;
  margin: 0 !important;
  border: none !important;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}
.container-cover-upload .avatar-upload .container-name-and-username {
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-left: 15px;
}
.container-cover-upload .avatar-upload .container-name-and-username p {
  margin: 0;
}
.container-cover-upload .avatar-upload .container-name-and-username p:first-child {
  color: #2c2d33;
}
.container-cover-upload .avatar-upload .container-name-and-username p:last-child {
  color: #757575;
}
.container-cover-upload .cover-upload {
  position: absolute;
  margin: 10px;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: end;
}
.container-cover-upload .cover-upload .ant-form-item-control {
  padding: 0;
}
.container-cover-upload .cover-upload .btns-cover-upload {
  display: flex;
  gap: 10px;
}
.container-cover-upload .cover-upload .btns-cover-upload .ant-upload-picture-card-wrapper,
.container-cover-upload .cover-upload .btns-cover-upload .ant-upload-select-picture-card,
.container-cover-upload .cover-upload .btns-cover-upload .ant-btn-default {
  min-height: 32px;
  min-width: 32px;
  max-height: 32px;
  max-width: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent !important;
  font-size: 20px;
}
.container-cover-upload .cover-upload .btns-cover-upload .ant-upload-picture-card-wrapper::before,
.container-cover-upload .cover-upload .btns-cover-upload .ant-upload-select-picture-card::before,
.container-cover-upload .cover-upload .btns-cover-upload .ant-btn-default::before {
  background: transparent;
}
.container-cover-upload .cover-upload .btns-cover-upload .ant-btn-loading-icon {
  position: relative;
  width: 32px;
  height: 32px;
}
.container-cover-upload .cover-upload .btns-cover-upload .anticon-loading {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-cover-upload .cover-upload .btns-cover-upload .ant-btn-default {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #f2f6f9;
}
.container-cover-upload .cover-upload .btns-cover-upload .ant-upload-picture-card-wrapper {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #f2f6f9;
}
.custom-textarea {
  height: 188px !important;
}
.custom-textarea::after {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 25px;
  color: #c7d0d9;
}
.container-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container-input .ant-form-item-control-input-content {
  height: 40px;
}
.image-doc {
  min-height: 100px;
  min-width: 100px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-confirm-action-become-creator .confirm_action_become_creator {
  padding-bottom: 20px;
}
.container-confirm-action-become-creator .confirm_action_become_creator p {
  font-size: 16px;
}
.container-confirm-action-become-creator .container-btns {
  display: flex;
  gap: 10px;
}
.container-confirm-action-become-creator .container-btns button {
  max-width: 100%;
  height: 40px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.model-account-edit-profile .model-account-edit-profile-top-profile {
  position: relative;
  margin: 10px;
  margin-bottom: 55px;
  border-radius: 15px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 230px;
}
.model-account-edit-profile .model-account-edit-profile-top-profile .avatar-upload {
  position: absolute;
  bottom: -60px;
}
.model-account-edit-profile .model-account-edit-profile-top-profile .avatar-upload img {
  width: 105px !important;
  height: 105px !important;
  object-fit: cover;
  border: 5px solid #f2f6f9;
  border-radius: 50%;
}
.model-account-edit-profile .model-account-edit-profile-top-profile .avatar-upload .ant-image {
  border: none !important;
}
.model-account-edit-profile .model-account-edit-profile-top-profile .avatar-upload .ant-image .ant-image-mask {
  border-radius: 50%;
}
@media screen and (max-width: 769px) {
  .model-account-edit-profile .model-account-edit-profile-top-profile .avatar-upload img {
    width: 75px;
    height: 75px;
  }
}
@media screen and (max-width: 376px) {
  .model-account-edit-profile .model-account-edit-profile-top-profile {
    height: 165px;
  }
}
.performer-url {
  width: 100%;
  background-color: #222222;
  padding: 15px;
  border-radius: 5px;
  gap: 8px;
}
.performer-url a,
.performer-url p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #f2f6f9;
  text-align: center;
  margin: 0;
}
@media screen and (max-width: 376px) {
  .performer-url a,
  .performer-url p {
    font-weight: 500;
  }
}

.container-afiliation {
  max-width: 400px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.custom-modal-payment .color-red {
  color: #ff4200;
}
.custom-modal-payment .color-label {
  color: #757575;
}
.custom-modal-payment .ant-modal-body {
  padding: 24px 15px 15px;
}
.custom-modal-payment .ant-tabs .ant-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.custom-modal-payment .ant-tabs .ant-tabs-nav:before {
  border-bottom: none;
}
.custom-modal-payment .ant-tabs .ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  width: 100px;
  color: #757575;
  justify-content: center;
  margin: 0;
  padding: 8px;
}
@media screen and (max-width: 769px) {
  .custom-modal-payment .ant-tabs .ant-tabs-nav .ant-tabs-tab {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .custom-modal-payment .ant-tabs .ant-tabs-nav .ant-tabs-tab {
    font-size: 13px;
  }
}
.custom-modal-payment .ant-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #41444d;
}
.custom-modal-payment .ant-tabs .ant-tabs-ink-bar {
  background: #ef4f30;
}
.custom-modal-payment .ant-tabs .ant-tabs-nav-wrap {
  max-width: 224px;
}
@media screen and (max-width: 376px) {
  .custom-modal-payment .ant-tabs .ant-tabs-nav-wrap {
    padding: 0;
  }
  .custom-modal-payment .ant-tabs .ant-tabs-nav-wrap::before {
    opacity: 0;
  }
  .custom-modal-payment .ant-tabs .ant-tabs-nav-wrap::after {
    opacity: 0;
  }
}
.custom-modal-payment .ant-tabs .ant-tabs-nav-list {
  width: 100%;
  justify-content: space-between;
}
.custom-modal-payment .ant-tabs .ant-tabs-content-holder .ant-tabs-tabpane.ant-tabs-tabpane-active {
  overflow: none;
  max-height: none;
}
@media screen and (max-width: 376px) {
  .custom-modal-payment .ant-tabs-tab .anticon {
    margin: 0;
  }
}
.add-card {
  padding: 0 5px;
}
.add-card .card-select .ant-select-selector .ant-select-selection-placeholder {
  padding-top: 5px;
}
.add-card .card-select .ant-select-selector .ant-select-selection-item {
  padding-top: 5px;
}
.add-card .container-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.add-card p {
  color: #757575;
  margin-bottom: 30px;
}
.generate-qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.generate-qr-code .qr-code {
  background: #696e80;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  max-width: 240px;
  margin: 20px 0;
  overflow: hidden;
}
.generate-qr-code .qr-code img {
  width: 100%;
  height: 100%;
}
.generate-qr-code .copy {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 5%;
}
.generate-qr-code .copy svg {
  cursor: pointer;
  min-width: 16px;
  min-height: 16px;
  margin-bottom: 13px;
  margin-left: 8px;
  transition: all 0.2s ease;
}
.generate-qr-code .copy svg:hover {
  color: #ef4f30;
}
.generate-qr-code .copy p {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ef4f30;
}
.modal-analyzing-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-analyzing-payment p {
  text-align: center;
}
.modal-analyzing-payment p span {
  color: #ef4f30;
}
.modal-analyzing-payment .p-last-child {
  max-width: 75%;
}
.modal-payment-success {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-payment-success .icon-success {
  font-size: 48px;
  color: #0cf453;
  margin-bottom: 13px;
}
.modal-payment-success p {
  color: #757575;
}
.modal-payment-success div {
  width: 100%;
  display: flex;
  gap: 16px;
}
.modal-payment-success div button {
  max-width: 100%;
}
.input-add-card {
  height: 40px;
  width: 100%;
  padding: 10px 11px;
}
.input-add-card div {
  height: 30px !important;
}
.input-add-card div iframe {
  height: 100% !important;
}
.input-add-card div input {
  height: 100% !important;
}
.error-input {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 10px;
}
.input-card {
  display: flex;
  flex-direction: column;
}
.input-card label {
  margin-bottom: 2px;
}
.input-card input {
  height: 40px;
  padding: 5px 11px;
  color: #424770;
}
.input-card input::placeholder {
  color: #aab7c4;
}
.input-card input:focus {
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
}
.card-form {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  border: 1px solid #e6e3e3;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}
.card-form .stripe-card-form {
  padding: 15px 10px;
}
.card-list {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.text-custom-collapse {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 15px;
  justify-content: end;
}
.text-custom-collapse h4 {
  text-wrap: nowrap;
  margin: 0;
  color: #41444d;
  font-weight: 400;
}
.text-custom-collapse div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-custom-collapse div svg {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: #41444d;
}
@media screen and (max-width: 769px) {
  .text-custom-collapse div svg {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .text-custom-collapse div svg {
    font-size: 11px;
    line-height: 11px;
  }
}
.container-custom-collapse {
  margin-bottom: 10px;
}
.container-custom-collapse .custom-collapse {
  position: relative;
  padding: 10px 0;
}
.container-custom-collapse .active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(242, 246, 249, 0) 0%, #f2f6f9 100%);
}
.container-items-custom-collapse {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.container-items-custom-collapse .items-custom-collapse {
  padding: 10px 0;
  padding-top: 25px;
}
@media screen and (max-width: 376px) {
  .container-items-custom-collapse .items-custom-collapse {
    padding-top: 15px;
  }
}
.container-collapse-payment-method {
  margin-bottom: 10px;
}
.container-collapse-payment-method .collapse-payment-method {
  position: relative;
  padding: 10px 0;
  overflow: hidden;
}
.container-collapse-payment-method .collapse-payment-method .subscription-bl {
  padding: 5px 11px;
  border: 1px solid #c7d0d9;
  border-radius: 8px;
  margin: 5px 0;
}
.container-collapse-payment-method .collapse-payment-method .subscription-bl h5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .container-collapse-payment-method .collapse-payment-method .subscription-bl h5 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .container-collapse-payment-method .collapse-payment-method .subscription-bl h5 {
    font-size: 11px;
    line-height: 11px;
  }
}
.container-collapse-payment-method .collapse-payment-method .subscription-bl .sub-btn {
  max-width: 100%;
  height: 34px;
}
.container-collapse-payment-method .collapse-payment-method .items-collapse-payment-method {
  transition: all 0.3s ease;
  margin-top: 35px;
}
@media screen and (max-width: 376px) {
  .container-collapse-payment-method .collapse-payment-method .items-collapse-payment-method {
    margin-top: 25px;
  }
}
.container-collapse-payment-method .collapse-payment-method .active::before {
  content: '';
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(242, 246, 249, 0) 0%, #f2f6f9 100%);
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.btn-subscription-bl {
  padding: 5px 11px;
  border: 1px solid #c7d0d9;
  border-radius: 8px;
  margin: 5px 0;
}
.btn-subscription-bl h5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .btn-subscription-bl h5 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .btn-subscription-bl h5 {
    font-size: 11px;
    line-height: 11px;
  }
}
.btn-subscription-bl .sub-btn {
  max-width: 100%;
  height: 34px;
}
.btn-alert-lock {
  border-radius: 4px;
}
.btn-alert-lock div {
  display: flex;
  justify-content: center;
}
.btn-alert-lock div img {
  height: 70px;
  padding: 10px;
}
.btn-alert-lock button {
  width: 100px;
  height: 40px;
  border-radius: 4px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.photo-carousel {
  margin: 15px 0;
}
.photo-carousel .subscription {
  max-width: 400px;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
}
.photo-carousel .subscription .ant-btn {
  width: 100%;
  margin: 5px;
}
.gal-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gal-stats a {
  font-size: 12px;
  color: #666;
  margin-right: 15px;
}
.vid-split {
  margin-bottom: 15px;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.lock-content {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 15px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}
.lock-content .lock-content-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.lock-content .filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.lock-content .lock-middle {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.lock-content .lock-middle .anticon {
  font-size: 32px;
  color: #f2f6f9;
}
.lock-content .lock-middle .ant-btn.secondary {
  border-radius: 25px;
  font-size: 14px;
  width: auto;
}
.lock-content .lock-middle .ant-btn.ant-btn-link {
  font-size: 12px;
  color: #f2f6f9;
}
.lock-content .lock-middle .ant-btn.ant-btn-link .anticon {
  font-size: 14px;
}
.lock-content p {
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  color: #f2f6f9;
  padding: 5px 15px;
  border: 1px solid;
  border-radius: 25px;
  font-weight: 600;
  background-color: #c82538;
}
.lock-content p:hover {
  opacity: 0.8;
}
@media screen and (max-width: 576px) {
  .lock-content {
    border-radius: 0px;
    height: 350px;
  }
  .lock-content .lock-content-bg,
  .lock-content .filter {
    border-radius: 0px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.home-banners {
  position: relative;
  background: transparent;
  margin: 10px 0;
  width: 100%;
  aspect-ratio: 4px;
}
.home-banners .slick-dots {
  display: none !important;
}
.home-banners .ant-carousel {
  height: 100%;
  width: 100%;
}
.home-banners .ant-carousel .slick-slider {
  height: 100%;
  width: 100%;
}
.home-banners .ant-carousel .slick-slider div {
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .home-banners {
    margin: 0;
    margin-top: 10px;
  }
}
@media screen and (max-width: 576px) {
  .home-banners {
    margin: 0;
  }
}
@media screen and (min-width: 376px) {
  .home-banners .slider a img {
    border-radius: 15px;
  }
}
.home-banners .slider div {
  display: flex;
  gap: 0.8%;
  width: 100%;
}
.home-heading {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.home-heading h3 {
  width: 50%;
  color: #41444d;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}
@media screen and (max-width: 769px) {
  .home-heading h3 {
    font-size: 16px;
  }
}
.home-heading .search-bar-feed {
  max-width: 220px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  border: 1px solid #c7d0d9;
  padding: 0 10px;
  height: 40px;
}
.home-heading .search-bar-feed input {
  height: 100%;
  width: 100%;
  text-align: start;
  border: none;
  background: transparent;
}
.home-heading .search-bar-feed input:focus {
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
}
.home-heading .search-bar-feed .open-search {
  color: #757575;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.home-heading .search-bar-feed .open-search .anticon {
  font-size: 18px;
}
@media screen and (max-width: 769px) {
  .home-heading .search-bar-feed {
    height: 35px;
    border-radius: 4px;
  }
}
@media screen and (max-width: 376px) {
  .home-heading {
    padding: 0 9px;
  }
  .home-heading .search-bar-feed {
    height: 30px;
    max-width: 325px;
    margin-left: 20px;
  }
  .home-heading .search-bar-feed .anticon {
    font-size: 16px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.model-top-profile {
  position: relative;
}
.model-top-profile .banner-top-profile {
  margin-bottom: 85px;
}
.model-top-profile .banner-top-profile .banner-top-profile-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 15px;
  height: 230px;
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  gap: 5px;
  color: #f2f6f9;
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .container-icons-top-profile-one {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 376px) {
  .model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .container-icons-top-profile-one {
    gap: 5px;
  }
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .container-icons-top-profile-two {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 376px) {
  .model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .container-icons-top-profile-two {
    gap: 5px;
  }
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .tab-item {
  color: #f2f6f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  min-height: 36px;
  min-width: 36px;
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .tab-item span {
  display: flex;
  align-items: center;
  text-wrap: nowrap;
  gap: 8px;
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .btn-menu {
  cursor: pointer;
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .drop-actions {
  position: absolute;
  right: 20px;
  top: 20px;
}
.model-top-profile .banner-top-profile .banner-top-profile-container .banner-top-profile-content .drop-actions .ant-dropdown-trigger.dropdown-options {
  color: #f2f6f9;
  font-size: 22px;
}
@media screen and (max-width: 769px) {
  .model-top-profile .banner-top-profile .banner-top-profile-container {
    height: 165px;
  }
}
@media screen and (max-width: 376px) {
  .model-top-profile .banner-top-profile .banner-top-profile-container {
    border-radius: 0;
  }
}
@media screen and (max-width: 769px) {
  .model-top-profile .banner-top-profile {
    margin-bottom: 75px;
  }
}
.model-top-profile .avatar-banner-top-profile {
  position: absolute;
  bottom: -60px;
  width: 100%;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container {
  position: relative;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one {
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .avatar-stream-container {
  min-width: 105px;
  min-height: 105px;
  max-width: 105px;
  max-height: 105px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .avatar-stream-container .avatar-stream-image {
  min-width: 105px;
  min-height: 105px;
  max-width: 105px;
  max-height: 105px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .avatar-stream-container .avatar-stream-image img {
  min-width: 105px;
  min-height: 105px;
  max-width: 105px;
  max-height: 105px;
}
@media screen and (max-width: 769px) {
  .model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .avatar-stream-container {
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
  }
  .model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .avatar-stream-container .avatar-stream-image {
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
  }
  .model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .avatar-stream-container .avatar-stream-image img {
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
  }
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name {
  overflow: hidden;
  margin-left: 15px;
  max-width: 100%;
  width: 100%;
  margin-right: 150px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name div {
  display: flex;
  align-items: center;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name div h4 {
  margin: 0;
  text-transform: capitalize;
  line-height: 23px !important;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name div h4 a {
  color: #2c2d33;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name div h4 a:hover {
  color: #ef4f30;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name div svg {
  color: #878787;
  min-height: 16px;
  min-width: 16px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name h5 {
  color: #757575;
  margin: 0;
  font-weight: 400;
  line-height: 23px !important;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name .anticon {
  color: #ef4f30;
  font-size: 18px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name .live-status {
  background: #c82538;
  color: #f2f6f9;
  padding: 0 5px;
  border-radius: 7px;
  border: 2px solid #f2f6f9;
  font-size: 11px;
  line-height: 17px;
  text-transform: uppercase;
}
@media screen and (max-width: 769px) {
  .model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-one .m-user-name {
    margin-left: 10px;
  }
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-two {
  position: absolute;
  display: flex;
  right: 0;
  bottom: 5px;
  gap: 10px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-two .btn-chat {
  max-width: 37px;
  min-width: 37px;
  padding: 0;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-two .btn-chat svg {
  margin-left: 9px;
}
.model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-two button {
  position: relative;
  max-width: max-content;
  height: 37px;
}
@media screen and (max-width: 376px) {
  .model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-two button {
    height: 30px;
    border-radius: 4px;
  }
}
@media screen and (max-width: 376px) {
  .model-top-profile .avatar-banner-top-profile .avatar-banner-top-profile-container .avatar-banner-top-profile-container-two .btn-chat {
    max-width: 30px;
  }
}
@media screen and (max-width: 769px) {
  .model-top-profile .avatar-banner-top-profile {
    bottom: -52px;
    padding: 0 10px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.avatar-stream-container {
  text-align: center;
  position: relative;
}
.avatar-stream-container .avatar-stream-image {
  overflow: hidden;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-stream-container .avatar-stream-image img {
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}
.avatar-stream-container .avatar-stream-blink-border {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px;
  background: linear-gradient(90deg, orange 10%, #ff0066 50%, violet 90%);
}
.avatar-stream-container .avatar-stream-live-tag {
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  background: linear-gradient(90deg, #ff0066 10%, #ff0066 90%);
  color: #fff;
  padding: 2px 10px;
  border-radius: 7px;
  border: 2px solid #fff;
  font-size: 11px;
  line-height: 17px;
}
@media screen and (max-width: 769px) {
  .avatar-stream-container .avatar-stream-blink-border {
    border-width: 3px;
  }
  .avatar-stream-container .avatar-stream-live-tag {
    padding: 0 5px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.model-biography .bio {
  white-space: pre-line;
  font-size: 12px;
  color: #666;
  line-height: 2;
}
@media screen and (max-width: 376px) {
  .model-biography {
    margin-top: 10px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.user-profile-box {
  margin: 40px 0;
}
.user-account .atention {
  padding: 10px;
  margin-top: 70px;
}
.user-account .atention h1 {
  color: #b3b3b3;
}
.user-account .atention div {
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px solid #ef4f30;
}
.user-account .atention div p {
  color: #b3b3b3;
  padding: 0;
}
@media screen and (max-width: 992px) {
  .user-account .atention {
    margin-top: 0;
    margin-bottom: 10px;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.vid-title {
  margin: 15px 0 10px;
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  word-break: break-all;
}
.vid-duration {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vid-duration a {
  font-size: 12px;
  color: #666;
}
.vid-player {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  margin: 15px 0;
}
.vid-player .vid-player-content {
  position: relative;
  height: 600px;
}
.vid-player .vid-player-content .videojs-player {
  height: 100%;
}
.vid-player .vid-player-content .videojs-player .video-js {
  height: 100%;
  padding-top: 600px;
}
.vid-player .vid-player-content-teaser {
  position: relative;
  height: 600px;
  height: 440px;
}
.vid-player .vid-player-content-teaser .videojs-player {
  height: 100%;
}
.vid-player .vid-player-content-teaser .videojs-player .video-js {
  height: 100%;
  padding-top: 600px;
}
.vid-player .vid-player-content-teaser .videojs-player .video-js {
  padding-top: 440px;
}
.vid-player .vid-processing {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #333;
  color: #f2f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.vid-player .lock-content {
  height: 440px;
}
@media screen and (max-width: 576px) {
  .vid-player {
    border-radius: 0;
  }
}
.vid-split {
  margin-bottom: 15px;
}
.discount-price {
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}
.vid-tags {
  margin: 15px 0;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  text-transform: lowercase;
}
.participant-card {
  display: flex;
  width: 100%;
  cursor: pointer;
  margin-bottom: 10px;
}
.participant-card:hover {
  opacity: 0.8;
}
.participant-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #ef4f30;
}
.participant-card .participant-info {
  padding: 10px;
  width: calc(100% - 100px);
}
.participant-card .participant-info h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #ef4f30;
  text-transform: capitalize;
}
.participant-card .participant-info h5 {
  font-size: 13px;
  color: #ef4f30;
}
.participant-card .participant-info .p-bio {
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.coupon-form {
  margin: 20px 0;
}
.coupon-form .ant-input {
  height: 40px;
}
.coupon-form .ant-btn.primary {
  height: 40px;
  background-image: linear-gradient(0deg, #ef4f30, #ef4f30);
  color: #f2f6f9;
  font-weight: 600;
}
.coupon-form .ant-btn.normal {
  height: 40px;
  background-color: #c82538;
  color: #333;
  font-weight: 600;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.message {
  display: flex;
  flex-direction: column;
}
.message .bubble-container {
  display: flex;
}
.message .bubble-container .lock-content {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.message .bubble-container .lock-content .lock-middle .btn-alert-lock img {
  width: 70px;
  height: 70px;
}
.message .bubble-container .container-videojs-player {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 100%;
}
.message .bubble-container .container-videojs-player .videojs-player {
  height: 100%;
}
.message .bubble-container .container-videojs-player .videojs-player .video-js {
  height: 100%;
  padding-top: 245px;
}
.message .bubble-container .bubble {
  margin: 2px 0px;
  background: #2d2d2e;
  padding: 5px 15px;
  border-radius: 8px;
  max-width: 70%;
  border-bottom-left-radius: 0px;
  text-wrap: wrap;
  display: flex;
  flex-direction: column;
}
.message .bubble-container .bubble.isFile {
  position: relative;
  width: 100%;
  padding: 10px;
  height: 265px;
}
.message .bubble-container .bubble.timestamp {
  padding-bottom: 5px;
}
.message .bubble-container .bubble p {
  margin: 0;
  text-wrap: wrap;
  color: #ebeff2;
  overflow-wrap: break-word;
}
.message .bubble-container .bubble .anticon-ellipsis {
  transform: rotate(90deg);
  font-size: 12px;
}
.message .bubble-container .bubble img {
  width: 100%;
  max-width: 320px;
}
.message .bubble-container .avatar {
  width: 22px;
  height: 22px;
  margin: 6px 8px 0 0;
}
.message .timestamp {
  display: flex;
  justify-content: flex-start;
  color: #8a96a3;
  font-weight: 600;
  font-size: 8px;
  color: #757575;
  margin-top: 4px;
}
.message.mine .timestamp {
  justify-content: flex-end;
  color: #f2f6f9;
}
.message.mine .bubble-container {
  justify-content: flex-end;
}
.message.mine .bubble-container .bubble {
  background: #9d40ff9c;
  max-width: 70%;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 0px;
}
.message.mine .bubble-container .bubble p {
  color: #f2f6f9;
}
.message.mine .bubble-container .avatar {
  margin: 6px 0 0 8px;
}
.message.start .bubble-container .bubble {
  margin-top: 8px;
}
.message.end .bubble-container .bubble {
  margin-bottom: 8px;
}
.message-stream .message .bubble-container {
  justify-content: flex-start;
  align-items: center;
  font-size: 13px;
  margin: 3px 0;
}
.message-stream .message .bubble-container .bubble {
  background: none;
  padding: 0 5px;
  border-radius: 0;
  color: #666;
  word-break: break-all;
}
.message-stream .message .bubble-container .bubble .anticon-ellipsis {
  transform: rotate(90deg);
  font-size: 12px;
}
.message-stream .message .bubble-container .sender-info {
  white-space: nowrap;
  line-height: 30px;
}
.message-stream .message .bubble-container .sender-info a {
  font-weight: 600;
  color: #333;
  vertical-align: middle;
}
.message-stream .message .bubble-container .sender-info .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 8px 0 0;
}
.message-stream .message .bubble-container.owner .sender-info a {
  font-weight: 600;
  color: #ef4f30;
}
.message-stream .message .bubble-container.owner .sender-info .avatar {
  width: 30px;
  height: 30px;
}
.message-stream .message .timestamp {
  justify-content: center;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.message-list {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 10px;
}
.message-list .mess-recipient {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #c7d0d9;
  padding-bottom: 10px;
}
.message-list .mess-recipient .recipient {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.message-list .mess-recipient .recipient p {
  text-transform: capitalize;
  color: #41444d;
  margin: 0;
}
.message-list .mess-recipient .recipient:hover {
  opacity: 0.9;
}
.message-list .mess-recipient .btn-dropdown {
  cursor: pointer;
  font-size: 24px;
  color: #ebeff2;
  margin: 10px;
  display: flex;
  align-items: center;
}
.message-list .message-list-container {
  overflow-y: auto;
  height: 100%;
  padding-bottom: calc(140px + 50px);
}
.message-list .message-list-container.paid-content {
  padding-bottom: calc(140px + 50px + 35px);
}
.message-list .message-list-container .sub-text {
  text-align: center;
  color: #f04134;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
@media all and (max-width: 376px) {
  .message-list .message-list-container .sub-text {
    font-size: 14px;
  }
}
.message-list .scheduling {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.messenger {
  display: flex;
  width: 100%;
  height: calc(100vh - (65px + 65px + 40px));
  position: relative;
  margin: 20px 0;
}
.container-scheduling-btns {
  border-bottom: 1px solid #c7d0d9;
  padding-bottom: 16px;
}
.container-scheduling-btns p {
  margin: 5px 0;
}
.container-scheduling-btns div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.container-scheduling-btns div button,
.container-scheduling-btns div button:not(.active) {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  background: #222222 !important;
  color: #ebeff2 !important;
  width: max-content;
  height: 28px;
  border: none;
}
@media screen and (max-width: 769px) {
  .container-scheduling-btns div button,
  .container-scheduling-btns div button:not(.active) {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .container-scheduling-btns div button,
  .container-scheduling-btns div button:not(.active) {
    font-weight: 500;
    line-height: 14px;
  }
}
.container-scheduling-btns div button svg,
.container-scheduling-btns div button:not(.active) svg {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .container-scheduling-btns div button svg,
  .container-scheduling-btns div button:not(.active) svg {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .container-scheduling-btns div button svg,
  .container-scheduling-btns div button:not(.active) svg {
    font-weight: 500;
    line-height: 14px;
  }
}
.container-scheduling-btns div .active {
  background: #878787 !important;
  color: #f2f6f9 !important;
}
.container-scheduling-btns div button:hover {
  background: #878787 !important;
  color: #f2f6f9 !important;
}
.container-scheduling-btns div button:active {
  background: #878787 !important;
  color: #f2f6f9 !important;
  transform: scale(0.9);
}
.scrollable {
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.sidebar {
  width: 30%;
}
.chat-content {
  width: 70%;
  border-radius: 15px;
  border: 1px solid #49494a;
}
.footer {
  background: #f2f6f9;
}
.message-stream {
  height: 428px;
}
@media all and (max-width: 376px) {
  .sidebar {
    width: 100%;
  }
  .sidebar.active {
    display: none;
  }
  .chat-content {
    display: none;
  }
  .chat-content.active {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #f2f6f9;
  }
}

.color-1 {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.color-1:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
}
.color-1:hover {
  filter: brightness(1.5);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}
.color-1:active {
  transform: scale(0.95);
}
.color-1.disabled {
  color: #b3b3b3 !important;
  cursor: not-allowed;
}
.color-1-overlay {
  background: transparent !important;
  border-color: #ef4f30 !important;
  color: #ef4f30 !important;
}
.color-1-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-2 {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-2:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
}
.color-2-overlay {
  background: transparent !important;
  border-color: #ff00b6 !important;
  color: #ff00b6 !important;
}
.color-2-overlay:hover {
  background: #ff00b6 !important;
  border-color: #ff00b6 !important;
  color: #f2f6f9 !important;
}
.color-3 {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
  color: #f2f6f9 !important;
}
.color-3:hover {
  background: #0cf453 !important;
  border-color: #0cf453 !important;
}
.color-4 {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #f2f6f9 !important;
}
.color-4:hover {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
}
.color-5 {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
  color: #f2f6f9 !important;
}
.color-5:hover {
  background: #ff4200 !important;
  border-color: #ff4200 !important;
}
.color-6 {
  background: #878787 !important;
  border-color: #878787 !important;
  color: #f2f6f9 !important;
}
.color-6:hover {
  background: #878787 !important;
  border-color: #878787 !important;
}
.color-7 {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #ef4f30 !important;
}
.color-7:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-11 {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
  color: #f2f6f9 !important;
}
.color-11:hover {
  background: #ff0066 !important;
  border-color: #ff0066 !important;
}
.color-gray-3-overlay {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #f2f6f9 !important;
  color: #696e80 !important;
}
.color-gray-3-overlay:hover {
  background: #222222 !important;
  border-color: #222222 !important;
}
.color-gray-3-overlay:hover {
  background: #ef4f30 !important;
  border-color: #ef4f30 !important;
  color: #f2f6f9 !important;
}
.color-gray-4-overlay {
  background: transparent !important;
  border-color: #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.color-gray-4-overlay:hover {
  background: #b3b3b3 !important;
  border-color: #b3b3b3 !important;
  color: #f2f6f9 !important;
}
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-gradient {
  background-image: -webkit-gradient(linear, 37.219838% 34.532506%, 36.425669% 93.178216%, from(#29cdff), to(#0a60ff), color-stop(0.37, #148eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.background-hover {
  transition: all 0.3s ease-out;
}
.background-hover:hover {
  background-color: #ef4f30;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightmode {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes scaling {
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blackpink {
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.T1 {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .T1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T1 {
    line-height: 30px;
  }
}
.T2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .T2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
  }
}
@media screen and (max-width: 376px) {
  .T2 {
    font-size: 13px;
  }
}
.S1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S1 {
    font-size: 19px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .S1 {
    line-height: 29.5px;
  }
}
.S2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S2 {
    font-size: 19px;
    line-height: 42px;
  }
}
@media screen and (max-width: 376px) {
  .S2 {
    font-size: 24px;
  }
}
.S3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .S3 {
    font-size: 17px;
  }
}
@media screen and (max-width: 376px) {
  .S3 {
    font-size: 13px;
    line-height: 20px;
  }
}
.S4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 769px) {
  .S4 {
    font-size: 19px;
    line-height: 30.5px;
  }
}
@media screen and (max-width: 376px) {
  .S4 {
    line-height: 26px;
  }
}
.S5 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 769px) {
  .S5 {
    line-height: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S5 {
    font-weight: 500;
    line-height: 14px;
  }
}
.S6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 376px) {
  .S6 {
    font-weight: 500;
  }
}
.S7 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .S7 {
    font-size: 12px;
  }
}
@media screen and (max-width: 376px) {
  .S7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B1 {
    font-size: 15px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B1 {
    line-height: 17px;
  }
}
.B2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
@media screen and (max-width: 769px) {
  .B2 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (max-width: 376px) {
  .B2 {
    line-height: 16px;
    font-weight: 500;
  }
}
.B3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 769px) {
  .B3 {
    font-size: 17px;
    line-height: 30px;
  }
}
@media screen and (max-width: 376px) {
  .B3 {
    font-size: 13px;
    line-height: 17px;
  }
}
.B4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
.B5 {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.B6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}
@media screen and (max-width: 376px) {
  .B6 {
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
  }
}
.B7 {
  font-size: 17px;
  font-weight: 400;
  line-height: 21px;
}
@media screen and (max-width: 769px) {
  .B7 {
    line-height: 18px;
  }
}
@media screen and (max-width: 376px) {
  .B7 {
    font-size: 11px;
    line-height: 11px;
  }
}
.B8 {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (max-width: 376px) {
  .B8 {
    font-size: 11px;
    line-height: 13px;
  }
}
.D1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
@media screen and (max-width: 769px) {
  .D1 {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .D1 {
    font-size: 13px;
  }
}
.card-filter-model {
  overflow: hidden;
  position: relative;
  height: 390px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.card-filter-model .live-status {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  background: #c82538;
  color: #f2f6f9;
  padding: 0 5px;
  border-radius: 8px;
  margin: 10px;
  border: 2px solid #f2f6f9;
  font-size: 11px;
  line-height: 17px;
  text-transform: uppercase;
}
.card-filter-model .card-filter-model-info {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: calc(100% - 20px);
  height: 132px;
  backdrop-filter: blur(10px);
  margin: 10px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.card-filter-model .card-filter-model-info-star {
  position: absolute;
  right: 0;
  top: 0;
  margin: 14px;
  color: #f2f6f9;
  transition: all 0.3s ease;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-custom-avatar {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-500%);
  height: 80px;
  width: 80px;
  transition: all 0.3s ease;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-custom-avatar .avatar-stream-container {
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-custom-avatar .avatar-stream-container .avatar-stream-blink-border {
  border-width: 3px;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-custom-avatar .avatar-stream-container .avatar-stream-image {
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-custom-avatar .avatar-stream-container .avatar-stream-image img {
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 14px;
  transform: translateX(0);
  transition: all 0.3s ease;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info p {
  margin: 0;
  color: #f2f6f9;
  text-wrap: nowrap;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info p:last-child {
  max-width: 20ch;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info .container-ellipsis {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 20ch;
}
.card-filter-model .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info .container-ellipsis .tick-icon {
  font-size: 16px;
  min-width: 16px;
  min-height: 16px;
}
.card-filter-model .container-discount-options {
  overflow: hidden;
  position: relative;
  visibility: hidden;
  height: 46px;
  transform: translateY(200%);
  border-top: 1px solid #c7d0d9;
  display: flex;
  flex-direction: column;
  justify-content: end;
  transition: all 0.3s ease;
}
.card-filter-model .container-discount-options .colapse-btns-discount-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 20px 15px 0;
}
.card-filter-model .container-discount-options .colapse-btns-discount-options button {
  max-width: 100%;
  height: 30px;
}
.card-filter-model .container-discount-options .btn-discount-options {
  cursor: pointer;
  color: #f2f6f9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 0;
}
.card-filter-model .container-discount-options .btn-discount-options p {
  margin: 0;
}
.card-filter-model .container-discount-options .btn-discount-options svg {
  font-size: 16px;
}
.card-filter-model .container-discount-options:hover,
.card-filter-model .container-discount-options:active {
  height: 135px;
}
.card-filter-model .container-discount-options:hover .btn-discount-options svg,
.card-filter-model .container-discount-options:active .btn-discount-options svg {
  transform: rotateX(180deg);
}
.card-filter-model .container-btn-card-filter-model-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  transition: all 0.3s ease;
}
.card-filter-model .container-btn-card-filter-model-info button {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  max-width: max-content;
  height: 30px;
  color: #f2f6f9 !important;
}
@media screen and (max-width: 376px) {
  .card-filter-model .container-btn-card-filter-model-info button {
    font-weight: 500;
  }
}
.card-filter-model .container-btn-card-filter-model-info.hover-colapse {
  bottom: 125px !important;
}
.card-filter-model .container-btn-card-filter-model-info.is-performer button {
  max-width: 100%;
}
.card-filter-model:hover .card-filter-model-info,
.card-filter-model:active .card-filter-model-info {
  height: 100%;
  width: 100%;
  margin: 0;
}
.card-filter-model:hover .card-filter-model-info-star,
.card-filter-model:active .card-filter-model-info-star {
  margin: 24px;
  transform: translateY(50%);
}
.card-filter-model:hover .container-username-and-avatar-card-filter-model-info .container-custom-avatar,
.card-filter-model:active .container-username-and-avatar-card-filter-model-info .container-custom-avatar {
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  top: 25px;
}
.card-filter-model:hover .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info,
.card-filter-model:active .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info {
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  top: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-filter-model:hover .container-btn-card-filter-model-info,
.card-filter-model:active .container-btn-card-filter-model-info {
  bottom: 46px;
  padding: 22px 24px;
}
.card-filter-model:hover .container-discount-options,
.card-filter-model:active .container-discount-options {
  visibility: visible;
  transform: translateY(0);
}
@media screen and (max-width: 576px) {
  .card-filter-model:hover .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info,
  .card-filter-model:active .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info {
    top: 50px;
  }
}
@media screen and (max-width: 576px) {
  .card-filter-model .container-username-and-avatar-card-filter-model-info .container-username-card-filter-model-info .container-ellipsis {
    margin-bottom: 5px;
  }
}