/* login pages CSS */

.image-1-icon {
  position: absolute;
  top: 100px;
  left: 4%;
  height: 50px;
  object-fit: cover;
}

.lorem-ipsum-dolor-sit-amet-co,
.sign-up-b {
  position: relative;
  display: flex;
  align-items: center;
  width: 550px;
  color: var(--login-label-color);
}
.lorem-ipsum-dolor-sit-amet-co {
  font-size: var(--regular-r7-size);
  color: var(--login-label-color); 
}
.frame-div1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-sm);
  font-size: 28px;
}
.activity-div,
.email-div {
  position: relative;
  font-weight: 600;
  display: inline-block;
  color: var(--login-label-color);
}
.activity-div {
  flex: 1;
  font-weight: 500;
}
.icondown,
.search-div {
  position: relative;
  flex-shrink: 0;
}
.icondown {
  width: 16px;
  height: 16px;
  display: none;
}
.search-div {
  align-self: stretch;
  border-radius: var(--br-sm);
  background-color: var(--white);
  border: 1px solid var(--secondary-colors-10);
  box-sizing: border-box;
  height: 48px;
  display: flex;
  flex-direction: row;
  padding: var(--padding-md) var(--padding-lg);
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-xs);
  font-size: var(--medium-m8-size);
  color: var(--color-gray-800);
}
.component-2-div {
  width: 550px;
  flex-direction: column;
  gap: var(--gap-sm);
}
.component-2-div,
.component-3-div,
.frame-div2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.component-3-div {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-sm);
}
.frame-div2 {
  align-self: stretch;
  flex-direction: row;
  gap: var(--gap-xl);
  width: 550px;

  gap: var(--gap-sm);
}
.rectangle-div {
  position: relative;
  border-radius: 2px;
  border: 1px solid var(--color-gray-700);
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.service-agreement-span {
  font-weight: 500;
  color: var(--color-green-200);
}
.i-agree-to-the-service-agreeme {
  position: relative;
  display: inline-block;
}
.frame-div5 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.i-also-agree-to-receive-commun {
  position: relative;
  display: flex;
  align-items: center;
  width: 413px;
  flex-shrink: 0;
}
.frame-div4,
.frame-div6 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-div6 {
  flex-direction: row;
  padding: 0 0 0 26px;
  box-sizing: border-box;
}
.frame-div4 {
  flex-direction: column;
  gap: var(--gap-xs);
}
.frame-div3,
.frame-div7 {
  width: 550px;
  display: flex;
  flex-direction: row;
}
.frame-div3 {
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--medium-m8-size);
  color: var(--login-text-color);
}
.frame-div7 {
  border-radius: var(--br-sm);
  background-color: var(--color-green-100);
  overflow: hidden;
  padding: var(--padding-md) 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--white);
}
.span {
  font-size: var(--regular-r7-size);
}
.dont-have-an-account {
  font-weight: 500;
}
.sign-in-span {
  font-weight: 600;
  color: var(--color-green-100);
}
.dont-have-an-account-sign-in {
  align-self: stretch;
  position: relative;
  text-align: center;
  display: inline-block;
  font-size: var(--medium-m8-size);
  color: var(--color-gray-600);
}
.frame-div {
  position: relative;
  top: 220px;
  left: 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.logo-link-class {
  position: relative;
  top: 0px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.lorem-ipsum-dolor-sit-amet-co1,
.quoting-invoicing-tool-for-h {
  align-self: stretch;
  position: relative;
  display: inline-block;
}
.lorem-ipsum-dolor-sit-amet-co1 {
  font-size: 20px;
  color: #e1e1e1;
}
.frame-div12 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.group-icon {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.frame-div11,
.frame-div13 {
  display: flex;
  justify-content: flex-start;
}
.frame-div13 {
  width: 533px;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-sm);
}
.frame-div11 {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xl);
}
.base-div {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-lg);
  background-color: var(--primary-bg-color);
  box-shadow: 0 33.491336822509766px 44.66px rgba(160, 142, 215, 0.1);
  width: 307px;
  height: 308.78px;
}
.new-leads-div,
.title-div {
  position: relative;
  line-height: 132%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.new-leads-div {
  width: 78.15px;
  height: 10.93px;
  opacity: 0.4;
}
.title-div {
  font-size: var(--font-size-xl);
  font-weight: 600;
  width: 66.98px;
  height: 32.78px;
}
.div,
.icon {
  position: absolute;
}
/* .div {
  height: 100%;
  width: 74.06%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 25.94%;
  letter-spacing: 0.45px;
  line-height: 17.86px;
  font-weight: 600;
  display: flex;
  align-items: center;
} */
.icon {
  height: 42%;
  width: 11.97%;
  top: 28.67%;
  right: 90.02%;
  bottom: 29.33%;
  left: -2%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.content-div {
  position: relative;
  width: 55.94px;
  height: 25.14px;
  flex-shrink: 0;
  color: var(--green-1);
}
.frame-div15 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-lg);
}
.base-div1 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--primary-bg-color);
  width: 142.9px;
  height: 109.26px;
}
.vector-icon {
  position: absolute;
  height: 91.99%;
  width: 85.06%;
  top: 8.88%;
  right: 10.16%;
  bottom: -0.87%;
  left: 4.79%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.content-div1 {
  position: relative;
  width: 142.9px;
  height: 127.99px;
  flex-shrink: 0;
}
.frame-div14,
.we-strongly-believe-that-succe {
  position: absolute;
  display: flex;
  align-items: center;
}
.frame-div14 {
  top: 45.34px;
  left: 28.14px;
  width: 249.97px;
  height: 131.38px;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--gap-md);
}
.we-strongly-believe-that-succe {
  top: 227.48px;
  left: 43.78px;
  font-size: var(--font-size-xs);
  letter-spacing: 0.1px;
  line-height: 150.7%;
  color: var(--login-image-text-color-2);
  text-align: center;
  justify-content: center;
  width: 218.18px;
  height: 49.49px;
}

.card-div1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 307px;
  height: 308.78px;
}
.title-div1 {
  position: absolute;
  top: calc(50% - 76.14px);
  left: 96.02px;
  font-size: var(--font-size-2xl);
  line-height: 132%;
  font-weight: 600;
  color: var(--color-indigo);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 71.78px;
  height: 29.58px;
}
.card-div {
  position: absolute;
  top: 52.88px;
  left: 0;
  width: 307px;
  height: 308.78px;
  opacity: 0.4;
}
.rectangle-div1 {
  position: absolute;
  top: 16.28px;
  left: 93.62px;
  background-color: var(--color-indigo);
  box-shadow: 0 11.963640213012695px 47.85px rgba(160, 142, 215, 0.2);
  width: 77.76px;
  height: 7.04px;
}
.card-div2 {
  position: absolute;
  top: 52.88px;
  left: 270px;
  width: 307px;
  height: 308.78px;
  opacity: 0.4;
}
.mask-group-icon,
.pin-icon {
  position: absolute;
  top: 37.12px;
  left: 0;
  width: 362.33px;
  height: 210.41px;
}
.pin-icon {
  top: -1.08px;
  left: 143.18px;
  width: 60.63px;
  height: 241.67px;
}
.time-div {
  position: absolute;
  width: 14.01%;
  top: calc(50% - -65.63px);
  right: 41.04%;
  left: 44.95%;
  letter-spacing: -0.02em;
  line-height: 21.65px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17.32px;
}
.graph-div {
  position: absolute;
  top: 124.89px;
  left: 0;
  width: 362.33px;
  height: 247.54px;
  text-align: center;
}
.div3,
.oval-7-icon {
  position: relative;
  width: 8.66px;
  height: 8.66px;
  flex-shrink: 0;
}
.div3 {
  letter-spacing: 0.02em;
  font-weight: 500;
  display: inline-block;
  width: 36.81px;
  height: 20.57px;
}
.sell-div {
  position: absolute;
  top: 96.35px;
  left: 161.34px;
  border-radius: 25.98px;
  background: linear-gradient(128.8deg, #fff, rgba(255, 255, 255, 0.13));
  box-shadow: 0 6.495968341827393px 17.32px rgba(27, 192, 237, 0.06);
  backdrop-filter: blur(16.24px);
  width: 97.54px;
  height: 34.57px;
  display: flex;
  flex-direction: row;
  padding: var(--padding-sm) var(--padding-sm) var(--padding-sm)
    17.32258415222168px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 8.66px;
  font-size: 17.32px;
  color: var(--colors-dark-grey-800);
}

[data-bs-theme="dark"] .sell-div {
  background: linear-gradient(128.8deg, #212529, rgba(255, 255, 255, 0.13));
}

.div4,
.dollar-div {
  position: absolute;
  top: 35.19px;
  left: 27.09px;
  font-size: 15.16px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--colors-green-500-primary);
  display: inline-block;
  width: 134.25px;
  height: 30.31px;
}
.dollar-div {
  top: 0;
  left: 25.98px;
  font-size: 25.98px;
  letter-spacing: 0.02em;
  color: var(--colors-green-900);
  width: 217.07px;
  height: 31.33px;
}
.mask-group-div,
.mask-group-div1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 362.33px;
  height: 372.43px;
}
.mask-group-div {
  top: 30.32px;
  left: 0.36px;
  text-align: left;
  color: var(--colors-dark-grey-600);
}
.rectangle-div2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--br-md);
  background-color: var(--color-gray-900);
  backdrop-filter: blur(12.41px);
}
.eth-b {
  position: absolute;
  width: 29.87%;
  top: calc(50% - 8.02px);
  right: 33.65%;
  left: 36.48%;
  letter-spacing: -0.02em;
  line-height: 16.05px;
  display: inline-block;
  height: 16.05px;
}
.oval-6-icon {
  height: 28.57%;
  width: 10.39%;
  top: 35.72%;
  right: 70.13%;
  bottom: 35.71%;
  left: 19.48%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.btc,
.oval-6-icon,
.sell-div1 {
  position: absolute;
}
.sell-div1 {
  top: 315.81px;
  left: 268.26px;
  width: 51.49px;
  height: 18.72px;
  overflow: hidden;
  font-size: var(--font-size-3xs);
}
.btc {
  width: 32.43%;
  top: calc(50% - 8.02px);
  right: 31.03%;
  left: 36.53%;
  letter-spacing: -0.02em;
  line-height: 16.05px;
  display: inline-block;
  height: 16.05px;
}
.buy-div,
.oval-6-icon1 {
  position: absolute;
  overflow: hidden;
}
.oval-6-icon1 {
  height: 28.57%;
  width: 10.81%;
  top: 35.71%;
  right: 68.92%;
  bottom: 35.71%;
  left: 20.27%;
  max-width: 100%;
  max-height: 100%;
}
.buy-div {
  top: 315.81px;
  left: 205.46px;
  width: 65.48px;
  height: 18.72px;
  font-size: var(--font-size-3xs);
}
.all-div,
.icons {
  position: relative;
  width: 17.32px;
  height: 17.32px;
  flex-shrink: 0;
}
.all-div {
  letter-spacing: -0.02em;
  line-height: 21.65px;
  display: inline-block;
  width: 21.65px;
  height: 21.65px;
}
.time-div1 {
  position: absolute;
  top: 30.32px;
  right: 30.31px;
  border-radius: 8.66px;
  background-color: var(--colors-green-500-primary);
  box-shadow: 0 6.495968341827393px 17.32px rgba(0, 222, 163, 0.06);
  backdrop-filter: blur(16.24px);
  width: 61.71px;
  display: flex;
  flex-direction: row;
  padding: 9.82317066192627px 12.991936683654785px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 4.33px;
  text-align: center;
  color: var(--white);
}
.div2 {
  position: absolute;
  top: 0;
  left: 123.19px;
  border-radius: 17.32px;
  background-color: var(--primary-bg-color);
  box-shadow: -10.826615333557129px 60.62904739379883px 151.57px
    rgba(143, 155, 186, 0.2);
  backdrop-filter: blur(20.57px);
  width: 362.69px;
  height: 402.75px;
  text-align: right;
  font-size: var(--font-size-2xs);
  color: var(--dark-2);
}
.group-div {
  position: relative;
  width: 577px;
  height: 402.75px;
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--login-image-text-color);
}

.frame-div10,
.frame-div8,
.frame-div9 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame-div10 {
  justify-content: flex-start;
  gap: 100px;
}
.frame-div8,
.frame-div9 {
  justify-content: center;
}

@media (max-width: 1550px) {
  .frame-div8 {
    display: table;
    position: absolute;
    top: 0;

    left: 48% !important;
  }
}

@media (max-width: 1350px) {
  .frame-div8 {
    display: table;
    position: absolute;
    top: 0;

    left: 51% !important;
  }
}
@media (max-width: 1250px) {
  .frame-div8 {
    display: table;
    position: absolute;
    top: 0;

    left: 46% !important;
  }
}
@media (max-width: 1150px) {
  .frame-div8 {
    display: table;
    position: absolute;
    top: 0;

    left: 55% !important;
  }
}
@media (max-width: 930px) {
  .frame-div8 {
    display: table;
    position: absolute;
    top: 0;

    left: 65% !important;
  }
}
@media (max-width: 930px) {
  .frame-div8 {
    display: none !important;
  }
  /* .component-2-div {
    width: 80% !important;
  } */
  /* .frame-div2 {
    width: 80% !important;
  }
  .frame-div3 {
    width: 80% !important;
  } */
  /* .frame-div7 {
    width: 80% !important;
  } */
}
@media (max-width: 500px) {
  .frame-div8 {
    display: none !important;
  }
  .component-2-div {
    width: 350px !important;
  }
  .frame-div2 {
    width: 350px !important;
  }
  .frame-div3 {
    width: 350px !important;
  }
  .frame-div7 {
    width: 350px !important;
  }
  .link-login {
    width: 340px !important;
  }
  .frame-div1 {
    width: 340px !important;
  }
  .sign-up-b {
    width: 340px !important;
  }
}
.frame-div8 {
  display: table;
  position: absolute;
  top: 0;
  left: 38%;
  background-color: var(--color-gray-600);
  height: 100vh;
  flex-direction: row;
  padding: 100px 70px;
  box-sizing: border-box;
  font-size: 30px;
  color: var(--white);
  width: -webkit-fill-available;
}
.sign-up-div {
  position: relative;
  background-color: var(--secondary-text-color);
  height: 100vh;
  text-align: left;
  font-size: var(--regular-r7-size);
  color: var(--color-gray-700);
}

:root {
  /* fonts */
  /* --font-poppins: Poppins;
  --font-gilroy: Gilroy;
  --regular-r7: Mulish; */

  /* font sizes */
  --font-size-3xs: 9.36px;
  --font-size-2xs: 12.99px;
  --font-size-xs: 12.12px;
  --font-size-sm: 13.4px;
  --medium-m8-size: 14px;
  --regular-r7-size: 16px;
  --font-size-xl: 22.33px;
  --font-size-2xl: 23.93px;

  /* Colors */
  --white: #fff;
  --secondary-colors-10: #e9ebef;
  --grey-palette-grey-8: #b0bec5;
  --dark-2: #6f6c99;
  --color-gray-400: #3e3e3e;
  --color-gray-500: #1b455f;
  --color-gray-600: #0a486d;
  --color-gray-700: #263238;
  --color-gray-800: #232d42;
  --color-gray-900: rgba(0, 0, 0, 0);
  --colors-green-500-primary: #00dea3;
  --color-indigo: #7951f9;
  --color-green-100: #75b543;
  --color-green-200: #59bd60;
  --green-1: #4aaf05;

  /* Gaps */
  --gap-xs: 2px;
  --gap-sm: 6px;
  --gap-md: 18.92px;
  --gap-lg: 21.27px;
  --gap-xl: 30px;

  /* Paddings */
  --padding-sm: 8.66129207611084px;
  --padding-md: 14px;
  --padding-lg: 16px;

  /* border radiuses */
  --br-sm: 8px;
  --br-md: 9.7px;
  --br-lg: 11.16px;
}