::root {
  --cs-primary-color: "#696cff";
}

.complete-profile-popup {
  width: 200px;
  object-fit: contain;
}
.complete-profile-popup-card {
  background: var(--cs-primary-color);
  background: linear-gradient(
    135deg,
    rgba(105, 108, 255, 0.28) 0%,
    rgba(255, 255, 255, 1) 10%,
    rgba(255, 255, 255, 1) 66%,
    rgba(105, 108, 255, 0.45) 100%
  );
}

/* CircularProgressBar css */
.circular-progress-container {
  display: inline-block;
}

.spinner {
  transform: rotate(-90deg);
}

.spinner-bg {
  stroke: #1a1a1a;
  opacity: 0.2;
}

.spinner-path {
  transform-origin: center;
  transition: stroke-dashoffset 0.3s;
}

.progress-text {
  font-size: 1rem;
  transform: rotate(90deg); /* counteracts -90deg from parent */
  transform-origin: center;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
.emojiimg {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
}

.hide-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.hide-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}
.app-brand.demo {
  position: sticky;
  top: 0;
  z-index: 99;
  background: white;
}
.fpopic {
  object-fit: contain;
  background-color: rgba(128, 128, 128, 0.279);
  /* max-width: 200px;
  max-height: 200px;
  min-height: 50px;
  min-width: 50px; */
  border-radius: 50%;
  overflow: hidden;
  height: 15vw;
  width: 15vw;
}
.fpo-name-heading {
  color: #fe5e00;
}
.fpo-icons {
  font-size: 20px;
  color: #696cff;
}
.fpo-icons1 {
  font-size: 20px;
  color: #63d10f;
}
.fpo-icons2 {
  font-size: 20px;

  color: #fe5e00;
}
.fpo-info {
  font-size: 25px;
  color: black;
}
i.fpo-icons,
i.fpo-icons1,
i.fpo-icons2 {
  /* width: 100%; */
  font-size: 30px;
}
img.intoggle-table-image {
  width: 50px;
  height: 80px;
  object-fit: contain;
}
.add-cat-img-preview img {
  width: 100%;
  height: 220px;
  object-fit: contain;
}
.add-cat-img-left img,
.addlang-img-left img {
  width: 100%;
  object-fit: contain;
}
/* .addradio-form-main {
  background-image: linear-gradient(rgba(255, 255, 255, 0.63), rgba(255, 255, 255, 0.692)), url("../public/assets/img/elements/radio.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
} */
.radioimg-preview img {
  width: 60%;
  object-fit: contain;
}
.news-imgs img,
.news-imgs iframe {
  max-width: 100%;
  object-fit: contain;
  max-height: 150px;
}

.home {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.home .div {
  background-color: #ffffff;
  height: 710px;
  overflow: hidden;
  position: relative;
  width: 360px;
}

.home .overlap {
  height: 675px;
  left: -2px;
  position: absolute;
  top: 0px;
  width: 426px;
}

.home .rectangle {
  /* background-color: #ffffff; */
  border-radius: 30px 30px 0px 0px;
  height: 392px;
  left: 2px;
  position: absolute;
  top: 207px;
  width: 360px;
}

.home .line {
  height: 1px;
  left: 4px;
  object-fit: cover;
  position: absolute;
  top: 586px;
  width: 360px;
}

.home .rectangle-2 {
  background-color: #ffffff;
  box-shadow: 0px -4px 4px #00000040;
  height: 76px;
  left: 0;
  position: absolute;
  top: 599px;
  width: 360px;
}

.home .text-wrapper-2 {
  color: var(--black-1);
  font-family: "Roboto-SemiBold", Helvetica;
  font-size: 10px;
  font-weight: 600;
  left: 26px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 652px;
  width: 47px;
}

.home .text-wrapper-3 {
  color: var(--black-1);
  font-family: "Roboto-SemiBold", Helvetica;
  font-size: 10px;
  font-weight: 600;
  left: 92px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 652px;
  width: 47px;
}

.home .text-wrapper-4 {
  color: var(--black-1);
  font-family: "Roboto-SemiBold", Helvetica;
  font-size: 10px;
  font-weight: 600;
  left: 154px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 652px;
  width: 57px;
}

.home .text-wrapper-5 {
  color: var(--black-1);
  font-family: "Roboto-SemiBold", Helvetica;
  font-size: 10px;
  font-weight: 600;
  left: 229px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 652px;
  width: 57px;
}

.home .text-wrapper-6 {
  color: var(--black-1);
  font-family: "Roboto-SemiBold", Helvetica;
  font-size: 10px;
  font-weight: 600;
  left: 283px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 652px;
  width: 85px;
}

.home .ellipse {
  height: 44px;
  left: 17px;
  position: absolute;
  top: 609px;
  width: 44px;
}

.home .group {
  height: 29px;
  left: 297px;
  position: absolute;
  top: 617px;
  width: 28px;
}

.home .group-2 {
  height: 29px;
  left: 228px;
  position: absolute;
  top: 618px;
  width: 27px;
}

.home .group-3 {
  height: 20px;
  left: 94px;
  position: absolute;
  top: 620px;
  width: 30px;
}

.home .vector {
  height: 26px;
  left: 27px;
  position: absolute;
  top: 617px;
  width: 26px;
  font-size: 22px;
}

.home .group-4 {
  height: 30px;
  left: 166px;
  position: absolute;
  top: 614px;
  width: 25px;
}

.home .group,
.home .group-2,
.home .group-4,
.home .group-3 {
  font-size: 21px;
}

.home .frame-2 {
  height: 26px;
  left: 26px;
  position: absolute;
  top: 617px;
  width: 26px;
}

.home .rectangle-3 {
  height: 571px;
  left: 2px;
  position: absolute;
  top: 29px;
  width: 397px;
}

.home .rectangle-4 {
  background-color: #ffffffed;
  border-radius: 15px 40px 15px 0px;
  height: 150px;
  left: 11px;
  position: absolute;
  top: 195px;
  width: 342px;
}

.home .rectangle-5 {
  background-color: #ffffffbd;
  border-radius: 15px;
  height: 116px;
  left: 11px;
  position: absolute;
  top: 478px;
  width: 342px;
}

.home .p {
  color: var(--black-1);
  font-family: var(--sub-text-13-semi-bold-font-family);
  font-size: var(--sub-text-13-semi-bold-font-size);
  font-style: var(--sub-text-13-semi-bold-font-style);
  font-weight: var(--sub-text-13-semi-bold-font-weight);
  left: 64px;
  letter-spacing: var(--sub-text-13-semi-bold-letter-spacing);
  line-height: var(--sub-text-13-semi-bold-line-height);
  position: absolute;
  top: 491px;
  white-space: nowrap;
}

.home .text-wrapper-7 {
  color: var(--black-1);
  font-family: var(--sub-text-2-12-med-font-family);
  font-size: var(--sub-text-2-12-med-font-size);
  font-style: var(--sub-text-2-12-med-font-style);
  font-weight: var(--sub-text-2-12-med-font-weight);
  left: 106px;
  letter-spacing: var(--sub-text-2-12-med-letter-spacing);
  line-height: var(--sub-text-2-12-med-line-height);
  position: absolute;
  top: 554px;
  white-space: nowrap;
}

.home .text-wrapper-8 {
  color: var(--black-1);
  font-family: "Roboto-Medium", Helvetica;
  font-size: 12px;
  font-weight: 500;
  left: 263px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 568px;
  white-space: nowrap;
}

.home .frame-3 {
  height: 52px;
  left: 18px;
  position: absolute;
  top: 526px;
  width: 82px;
}

.home .text-wrapper-9 {
  color: var(--black-1);
  font-family: var(--body-16-reg-font-family);
  font-size: var(--body-16-reg-font-size);
  font-style: var(--body-16-reg-font-style);
  font-weight: var(--body-16-reg-font-weight);
  left: 106px;
  letter-spacing: var(--body-16-reg-letter-spacing);
  line-height: var(--body-16-reg-line-height);
  position: absolute;
  top: 525px;
  width: 126px;
}

.home .vector-2 {
  height: 34px;
  left: 277px;
  position: absolute;
  top: 526px;
  width: 34px;
  font-size: 34px;
}

.home .text-wrapper-10 {
  color: #173a22;
  font-family: "Roboto-SemiBold", Helvetica;
  font-size: 14px;
  font-weight: 600;
  left: 47px;
  letter-spacing: 0;
  line-height: 18px;
  position: absolute;
  top: 213px;
  white-space: nowrap;
}

.home .tell-us-your-farming {
  color: var(--black-1);
  font-family: var(--body-16-reg-font-family);
  font-size: var(--body-16-reg-font-size);
  font-style: var(--body-16-reg-font-style);
  font-weight: var(--body-16-reg-font-weight);
  left: 98px;
  letter-spacing: var(--body-16-reg-letter-spacing);
  line-height: var(--body-16-reg-line-height);
  position: absolute;
  top: 245px;
  width: 328px;
}

.home .button-instance {
  background-color: unset !important;
  left: 226px !important;
  position: absolute !important;
  top: 296px !important;
  width: 112px !important;
  color: white;
}

.home .design-component-instance-node {
  margin-left: -8.5px !important;
  margin-right: -8.5px !important;
}

.home .text-wrapper-11 {
  color: var(--black-1);
  font-family: var(--sub-text-13-semi-bold-font-family);
  font-size: var(--sub-text-13-semi-bold-font-size);
  font-style: var(--sub-text-13-semi-bold-font-style);
  font-weight: var(--sub-text-13-semi-bold-font-weight);
  left: 16px;
  letter-spacing: var(--sub-text-13-semi-bold-letter-spacing);
  line-height: var(--sub-text-13-semi-bold-line-height);
  position: absolute;
  top: 62px;
  white-space: nowrap;
}

.home .rectangle-6 {
  /* background: linear-gradient(
    180deg,
    rgb(103, 209, 139.04) 0%,
    rgb(92, 189, 170) 51.04%
  ); */
  height: 46px;
  left: 2px;
  position: absolute;
  top: 0;
  width: 360px;
}

.home .ci-hamburger-md {
  height: 24px;
  left: 18px;
  position: absolute;
  top: 13px;
  width: 24px;
  font-size: 24px;
}

.home .text-wrapper-12 {
  color: #ffffff;
  font-family: var(--sub-text-13-semi-bold-font-family);
  font-size: var(--sub-text-13-semi-bold-font-size);
  font-style: var(--sub-text-13-semi-bold-font-style);
  font-weight: var(--sub-text-13-semi-bold-font-weight);
  left: 58px;
  letter-spacing: var(--sub-text-13-semi-bold-letter-spacing);
  line-height: var(--sub-text-13-semi-bold-line-height);
  position: absolute;
  top: 15px;
  white-space: nowrap;
}

.home .ellipse-2 {
  height: 31px;
  left: 315px;
  object-fit: cover;
  position: absolute;
  top: 9px;
  width: 31px;
}

.home .overlap-group-wrapper {
  height: 70px;
  left: 13px;
  position: absolute;
  top: 390px;
  width: 343px;
}

.home .overlap-group {
  border-radius: 7px;
  height: 70px;
  position: relative;
  width: 335px;
}

.home .rectangle-7 {
  background-color: #ffffff;
  border-radius: 7px;
  height: 70px;
  left: 0;
  opacity: 0.58;
  position: absolute;
  top: 0;
  width: 335px;
}

.home .ellipse-3 {
  background-color: #e95b5b;
  border-radius: 10px;
  height: 20px;
  left: 288px;
  position: absolute;
  top: 36px;
  width: 20px;
}

.home .text-wrapper-13 {
  color: #7b7b7b;
  font-family: "Roboto-Regular", Helvetica;
  font-size: 14px;
  font-weight: 400;
  left: 66px;
  letter-spacing: 0.5px;
  line-height: 20px;
  position: absolute;
  top: 38px;
  white-space: nowrap;
}

.home .text-wrapper-14 {
  color: #7b7b7b;
  font-family: "Roboto-Regular", Helvetica;
  font-size: 12px;
  font-weight: 400;
  left: 274px;
  letter-spacing: 0.5px;
  line-height: 20px;
  position: absolute;
  top: 15px;
  white-space: nowrap;
}

.home .text-wrapper-15 {
  color: #ffffff;
  font-family: "Roboto-Regular", Helvetica;
  font-size: 12px;
  font-weight: 400;
  left: 294px;
  letter-spacing: 0.5px;
  line-height: 20px;
  position: absolute;
  top: 36px;
  white-space: nowrap;
}

.home .text-wrapper-16 {
  color: #000000;
  font-family: "Roboto-Medium", Helvetica;
  font-size: 16px;
  font-weight: 500;
  left: 64px;
  letter-spacing: 0.5px;
  line-height: 24px;
  position: absolute;
  top: 14px;
  width: 264px;
}

.home .ellipse-4 {
  background-color: #ffffff;
  border-radius: 24px;
  height: 48px;
  left: 10px;
  position: absolute;
  top: 11px;
  width: 48px;
}

.home .text-wrapper-17 {
  color: var(--black-1);
  font-family: var(--sub-text-13-semi-bold-font-family);
  font-size: var(--sub-text-13-semi-bold-font-size);
  font-style: var(--sub-text-13-semi-bold-font-style);
  font-weight: var(--sub-text-13-semi-bold-font-weight);
  left: 50px;
  letter-spacing: var(--sub-text-13-semi-bold-letter-spacing);
  line-height: var(--sub-text-13-semi-bold-line-height);
  position: absolute;
  top: 367px;
  white-space: nowrap;
}

.home .aquarium {
  height: 32px;
  left: 31px;
  object-fit: cover;
  position: absolute;
  top: 411px;
  width: 32px;
}

.home .rectangle-8 {
  height: 87px;
  left: 14px;
  object-fit: cover;
  position: absolute;
  top: 91px;
  width: 69px;
}

.home .rectangle-9 {
  height: 87px;
  left: 171px;
  object-fit: cover;
  position: absolute;
  top: 91px;
  width: 69px;
}

.home .rectangle-10 {
  height: 87px;
  left: 250px;
  object-fit: cover;
  position: absolute;
  top: 91px;
  width: 70px;
}

.home .rectangle-11 {
  height: 87px;
  left: 329px;
  object-fit: cover;
  position: absolute;
  top: 91px;
  width: 69px;
}

.home .rectangle-12 {
  height: 87px;
  left: 92px;
  object-fit: cover;
  position: absolute;
  top: 91px;
  width: 70px;
}

.home .bell-icon {
  height: 34px;
  left: 16px;
  object-fit: cover;
  position: absolute;
  top: 205px;
  width: 34px;
}

.home .group-5 {
  height: 57px;
  left: 16px;
  position: absolute;
  top: 246px;
  width: 66px;
}

.home .frame-4 {
  height: 20px;
  left: 23px;
  position: absolute;
  top: 490px;
  width: 35px;
  font-size: 20px;
}

.home .frame-5 {
  background-image: url(../public/assets/img/previewassets/msg.svg);
  background-size: 100% 100%;
  height: 24px;
  left: 17px;
  position: absolute;
  top: 361px;
  width: 28px;
}

.home .subtract {
  height: 46px;
  left: 271px;
  position: absolute;
  top: 520px;
  width: 46px;
}

.home .frame-1 {
  left: 0 !important;
  position: fixed !important;
  top: 0 !important;
}

.home .frame-instance {
  height: 10px !important;
}

@media (min-width: 768px) {
  .settings-left {
    height: 710px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
@media (max-width: 768px) {
  .settings-left {
    margin-bottom: 20px;
  }
}

.previous-image img {
  max-height: 300px;
  max-width: 100%;
  object-fit: contain;
}
.rectangle-8,
.rectangle-9,
.rectangle-10,
.rectangle-11,
.rectangle-12 {
  border-style: inset;
  border-radius: 15px;
  color: #000000;
}

/* old colors */
/* linear-gradient(180deg,rgb(103, 209, 139.04) 0%,rgb(92, 189, 170) 51.04%) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.cover_img_profile img {
  width: 100%;
  height: 250px;
}

.profile_pic_main {
  position: relative;
}

.profile_pic {
  position: absolute;
  top: -50px;
  left: 0;
}

.profile_pic img {
  /* width: 50%; */
  min-height: 98px;
  object-fit: contain;
  background-color: white;
  max-height: 100px;
}
@media (max-width: 768px) {
  .cover_img_profile img {
    width: 100%;
    height: 150px;
  }
  .profile_pic img {
    /* width: 30%; */
    min-height: 98px;
    background-color: white;
    max-height: 100px;
  }
}
.settings_link {
  cursor: pointer;
}

.profile_pic_inner_icon {
  position: absolute;
  bottom: -10px;
  /* border-radius: 50%; */
  background-color: white;
}
.profile_short_d {
  margin-top: 90px;
}

.all_fpo_backbtn {
  cursor: pointer;
}
.message_div {
  text-wrap: balance;
}
.lottie_ani svg {
  width: 206px !important;
  height: 206px !important;
  object-fit: contain;
}
.btn-block {
  display: block;
}
.radio_options_card {
  scale: 1;
  transition: scale 0.3s ease-in-out;
}
.radio_options_card:hover {
  scale: 1.05;
}

.fpo_image_dashboard img {
  max-width: 100%;
  max-height: 50px;
  object-fit: contain;
}

.add_notify_inner img,
.img_notification img {
  width: 100%;
  object-fit: contain;
}

.pending-note {
  background: #696cff;
  color: white;
  border-radius: 50%;
  width: 22px;
  font-size: 11px;
  height: 22px;
}

.refresh_btn_int {
  position: fixed;
  /* top: 50%; */
  right: 20px;
  z-index: 999999;
  bottom: 20px;
}

.mydoc-link-icon {
  font-size: 30px;
}

.image_preview_product_page img,
.image_preview_product_page video {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.product_images_preview {
  height: 400px;
}

@media (max-width: 796px) {
  .image_preview_product_page img,
  .image_preview_product_page video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .product_images_preview {
    height: 400px;
  }
}

.revenue-card h5,
.revenue-card h3 {
  color: white;
}