:root {
  --generic-white: #FFFFFF;
  --generic-black: #000000;
  --generic-font: sans-serif;
  --primary-font: "Noto Sans Bengali", sans-serif;
  --secondary-font: "Inter", sans-serif;
  --brand-col-1: #18AC5D;
  --brand-col-2: #6BD071;
  --brand-col-3: rgba(24, 172, 93, 0.10);
  --dark-col-1: #181818;
  --dark-col-2: #020202;
  --light-col-1: #fcfcfc;
  --light-col-2: #f1f1f1;
  --light-col-3: #f9f9f9;
  --light-col-4: #eef2f2;
  --gray-col-1: #dcdcdc;
  --gray-col-2: #707070;
  --red-col-1: #da4a4a;
  --website-primary-bg: var(--generic-white);
  --primary-website-text-color: var(--dark-col-2);
  --dashboard-primary-bg: var(--light-col-3);
  --primary-dashboard-text-color: var(--dark-col-1);
  --bg-col-1: var(--generic-white);
  --bg-col-2: var(--light-col-1);
  --bg-col-3: var(--brand-col-3);
  --bg-col-4: var(--brand-col-1);
  --bg-col-5: var(--brand-col-2);
  --bg-col-6: var(--dark-col-1);
  --bg-col-7: var(--gray-col-1);
  --bg-col-8: var(--light-col-4);
  --text-col-1: var(--brand-col-1);
  --text-col-2: var(--red-col-1);
  --text-col-3: var(--light-col-1);
  --text-col-4: var(--dark-col-2);
  --text-col-5: var(--gray-col-2);
  --text-col-6: var(--generic-white);
  --border-col-1: var(--light-col-2);
  --border-col-2: var(--gray-col-1);
  --border-col-3: var(--brand-col-1);
  --border-col-4: var(--gray-col-2);
  --shadow-1: drop-shadow(0px 64px 32px rgba(0, 0, 0, .04));
  --shadow-2: drop-shadow(0px 0px 12px rgba(0, 0, 0, .04));
  --shadow-3: 0px 0px 12px rgba(24, 24, 24, .05);
  --shadow-4: drop-shadow(0px 5px 10px rgba(0, 0, 0, .08));
  --shadow-5: drop-shadow(0px 10px 20px rgba(0, 0, 0, .08));
}

.box-model {
  width: 100%;
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.box-model .row-20 {
  width: 100%;
}
.box-model .row-25 {
  width: 100%;
}
.box-model .row-33 {
  width: 100%;
}
.box-model .row-40 {
  width: 100%;
}
.box-model .row-50 {
  width: 100%;
}
.box-model .row-60 {
  width: 100%;
}
.box-model .row-66 {
  width: 100%;
}
.box-model .row-75 {
  width: 100%;
}
.box-model .row-80 {
  width: 100%;
}
.box-model .row-90 {
  width: 100%;
}
.box-model .row-95 {
  width: 100%;
}
.box-model .row-100 {
  width: 100%;
}
.box-model .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.box-model .flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.box-model .flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.box-model .flex-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.box-model .flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.box-model .flex-column-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.box-model .y-top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.box-model .y-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.box-model .y-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
.box-model .x-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}
.box-model .x-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.box-model .x-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}
@media screen and (min-width: 640px) {
  .box-model .row-20 {
    width: 20%;
  }
  .box-model .row-25 {
    width: 25%;
  }
  .box-model .row-33 {
    width: 33%;
  }
  .box-model .row-40 {
    width: 40%;
  }
  .box-model .row-50 {
    width: 50%;
  }
  .box-model .row-60 {
    width: 60%;
  }
  .box-model .row-66 {
    width: 66%;
  }
  .box-model .row-75 {
    width: 75%;
  }
  .box-model .row-80 {
    width: 80%;
  }
  .box-model .row-90 {
    width: 90%;
  }
  .box-model .row-95 {
    width: 95%;
  }
  .box-model .row-100 {
    width: 100%;
  }
}

/* Add generic styles here! */
/* CROSS BROWSER SCROLL BAR */
/* The emerging W3C standard that is currently Firefox-only */
::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-track {
  background: var(--generic-white);
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--bg-col-7);
  border: 1px solid var(--generic-white);
}

/* Generic body style */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--primary-font);
  color: var(--primary-website-text-color);
  background-color: var(--website-primary-bg);
}

body[data-page-type=dashboard] {
  color: var(--primary-dashboard-text-color);
  background-color: var(--dashboard-primary-bg);
}

[data-section=size] {
  max-width: 1200px;
  margin: 0 auto 0 auto;
}

[data-gap=side-gap] {
  margin: 0 auto;
  gap: 0 16px 0 16px;
  width: calc(100% - 32px);
}
@media screen and (min-width: 744px) {
  [data-gap=side-gap] {
    gap: 0 32px 0 32px;
    width: calc(100% - 64px);
  }
}

[data-padding=y-axis] {
  padding: 48px 0;
  min-height: calc(100% - 96px);
}
@media screen and (min-width: 744px) {
  [data-padding=y-axis] {
    padding: 64px 0;
    min-height: calc(100% - 128px);
  }
}
@media screen and (min-width: 1240px) {
  [data-padding=y-axis] {
    padding: 96px 0 64px;
    min-height: calc(100% - 160px);
  }
}

[data-attr=p-text] {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}
@media screen and (min-width: 744px) {
  [data-attr=p-text] {
    font-size: 15px;
    line-height: 19px;
  }
}

.remove-item-animation {
  -webkit-animation: fade-out 350ms ease;
          animation: fade-out 350ms ease;
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}

@keyframes fade-out {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}
.add-item-animation {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: fade-in 350ms ease;
          animation: fade-in 350ms ease;
}

@-webkit-keyframes fade-in {
  0% {
    display: none;
  }
  20% {
    display: block;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
  100% {
    display: block;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
}

@keyframes fade-in {
  0% {
    display: none;
  }
  20% {
    display: block;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
  100% {
    display: block;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
}
/* Styles For Editable Item Placeholder */
.editable-item[contenteditable=true] {
  cursor: text;
  outline: none;
  display: block;
  position: relative;
}
.editable-item[contenteditable=true]::before {
  width: 100%;
  opacity: 40%;
  position: absolute;
  content: "";
  bottom: -4px;
  border-bottom: 2px solid var(--border-col-1);
}
.editable-item[contenteditable=true]:empty {
  width: 100%;
  min-width: 200px;
}
.editable-item[contenteditable=true]:empty::before {
  bottom: unset;
  white-space: nowrap;
  padding-bottom: 4px;
  padding-bottom: 4px;
  content: attr(data-placeholder);
}

.add-new-field-btn {
  gap: 8px;
  opacity: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  margin-top: 12px;
  margin-left: auto;
  line-height: 13px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  padding: 12px 16px;
  border-radius: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--text-col-1);
  -webkit-transition: all 350ms ease;
  transition: all 350ms ease;
  background-color: transparent;
}
.add-new-field-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/resource/icons/plus.svg");
}
.add-new-field-btn:hover, .add-new-field-btn:focus {
  opacity: 100%;
  background-color: var(--bg-col-3);
}

.skeleton {
  opacity: 0.7;
  border-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 8px !important;
}
.skeleton::before {
  content: "" !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  position: absolute !important;
  background-size: 0% !important;
  background-image: none !important;
  -webkit-animation: skeleton-loading 1s linear infinite alternate !important;
          animation: skeleton-loading 1s linear infinite alternate !important;
}
.skeleton::after {
  display: none !important;
}

@-webkit-keyframes skeleton-loading {
  0% {
    background-color: hsl(180, 1%, 85%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(180, 1%, 85%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}
.ssr-form {
  margin-top: 48px;
}
.ssr-form bitl-input {
  margin-bottom: 6px;
  --input-bg-col: transparent;
  --input-border-radius: 24px;
  --input-border-col: var(--gray-col-2);
  --country-bg-col: var(--bg-col-1);
  --input-error-left: 36px;
  --input-dropdown-bg-col: var(--bg-col-1);
  --input-dropdown-border-col: var(--border-col-1);
}
.ssr-form bitl-input:last-child {
  margin-bottom: 0;
}
.ssr-form bitl-button {
  --btn-border-radius: 24px;
}
.ssr-form .account-role {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 24px auto;
}
.ssr-form bitl-button {
  margin-top: 32px;
}
.ssr-form [data-attr=check-options] .terms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ssr-form [data-attr=check-options] .terms .check_box {
  width: 17px;
  height: 17px;
  cursor: pointer;
  margin-left: 3px;
}
.ssr-form [data-attr=check-options] .terms p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  margin-left: 8px;
  font-weight: 400;
  line-height: 14px;
}
.ssr-form [data-attr=check-options] .terms p a {
  margin: 0 2px;
  font-weight: 400;
  display: contents;
  color: var(--text-col-1);
}
.ssr-form [data-attr=or] {
  gap: 14px;
  width: 100%;
  height: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 32px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--gray-col-2);
}
.ssr-form [data-attr=or]::before, .ssr-form [data-attr=or]::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--gray-col-2);
}
.ssr-form .bottom-link {
  gap: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.ssr-form .bottom-link .link {
  font-weight: 700;
  color: var(--text-col-1);
}
.ssr-form #toggle-to-forgot-password {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--text-col-1);
  margin: -6px 16px -12px auto;
}
@media screen and (min-width: 744px) {
  .ssr-form {
    margin-top: 64px;
  }
  .ssr-form [data-attr=check-options] .terms .check_box {
    margin-left: 12px;
  }
  .ssr-form [data-attr=check-options] .terms p {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: -3px;
  }
  .ssr-form .bottom-link {
    font-size: 16px;
    line-height: 16px;
  }
}

#ssr-form-otp form {
  gap: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#ssr-form-otp form bitl-input {
  margin: unset;
  min-width: 36px;
  --input-border-radius: 6px;
  --input-text-align: center;
  --input-bg-col: transparent;
  --input-text-size: 18px;
  --input-wrapper-padding-xl: 4px;
  --input-wrapper-padding-xr: 4px;
  --input-border-col: var(--border-col-3);
}
#ssr-form-otp [data-attr=otp-timer] {
  margin: 6px 0 16px;
}
#ssr-form-otp [data-attr=otp-timer] p {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
}
#ssr-form-otp [data-attr=otp-timer] p #time {
  color: var(--text-col-1);
}
#ssr-form-otp [data-attr=button-container][data-btn=otp] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#ssr-form-otp [data-attr=button-container][data-btn=otp] #resend-otp {
  gap: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: unset;
  font-weight: 500;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--text-col-1);
  background-color: transparent;
}
#ssr-form-otp [data-attr=button-container][data-btn=otp] #resend-otp::before {
  content: "";
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  background-image: url("/resource/icons/authentication/resend.svg");
}
#ssr-form-otp [data-attr=button-container][data-btn=otp] #resend-otp.rotate-icon::before {
  -webkit-transform: rotate(720deg);
          transform: rotate(720deg);
  -webkit-transition: -webkit-transform 4s;
  transition: -webkit-transform 4s;
  transition: transform 4s;
  transition: transform 4s, -webkit-transform 4s;
}
#ssr-form-otp [data-attr=button-container][data-btn=otp] #resend-otp:disabled {
  opacity: 50%;
}
@media screen and (min-width: 744px) {
  #ssr-form-otp form bitl-input {
    min-width: 44px;
  }
}

.authentication {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  max-height: 90vh;
  min-height: 20vh;
  overflow-y: auto;
  position: absolute;
  border-radius: 24px 24px 0 0;
}
.authentication .popup-cross-btn {
  top: 14px;
  right: 14px;
  background-color: rgba(2, 2, 2, 0.2);
  background-image: url("/resource/icons/plus-white.svg");
}
.authentication .authentication-form {
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 320px;
  max-width: 644px;
  padding-bottom: 64px;
  background-color: var(--bg-col-1);
}
.authentication .authentication-form .header {
  overflow: hidden;
  padding: 24px 16px 0;
  background-size: cover;
  width: calc(100% - 32px);
  height: 140px;
  background-repeat: no-repeat;
  background-color: var(--bg-col-4);
  background-image: url("/resource/icons/authentication/bg.png");
}
.authentication .authentication-form .header .heading-title {
  color: var(--text-col-3);
}
.authentication .authentication-form .header .heading-title .welcome {
  gap: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 17px;
  line-height: 17px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.authentication .authentication-form .header .heading-title .welcome::after {
  content: "";
  width: 24px;
  height: 24px;
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/resource/icons/authentication/wave.svg");
}
.authentication .authentication-form .header .heading-title .title {
  display: block;
  margin-top: 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 19px;
  text-transform: uppercase;
}
.authentication .authentication-form .content-wrapper {
  max-width: 296px;
  padding: 0 16px 24px;
  overflow: hidden;
  margin: -35px auto 0;
}
.authentication .authentication-form .content-wrapper .from-heading {
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
}
.authentication .authentication-form .content-wrapper .from-heading .from-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background-size: 114%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-color: var(--bg-col-2);
  border: 4px solid var(--border-col-3);
  background-image: url("/resource/icons/authentication/user.svg");
}
.authentication .authentication-form .content-wrapper .from-heading .from-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  color: var(--text-col-1);
  text-transform: capitalize;
}
.authentication .authentication-form .content-wrapper .from-heading .from-subtitle {
  margin-top: 14px;
}
.authentication .authentication-form .content-wrapper .from-wrapper {
  gap: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
@media screen and (min-width: 440px) {
  .authentication .authentication-form {
    min-width: 396px;
  }
  .authentication .authentication-form .content-wrapper {
    max-width: 364px;
  }
}
@media screen and (min-width: 644px) {
  .authentication {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .authentication .authentication-form {
    width: 644px;
  }
  .authentication .authentication-form .header {
    padding: 24px 24px 0;
    width: calc(100% - 48px);
    height: 192px;
  }
  .authentication .authentication-form .header .heading-title .welcome {
    gap: 6px;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 1.5px;
  }
  .authentication .authentication-form .header .heading-title .welcome::after {
    width: 32px;
    height: 32px;
  }
  .authentication .authentication-form .header .heading-title .title {
    margin-top: 16px;
    font-size: 24px;
    line-height: 24px;
    white-space: nowrap;
  }
  .authentication .authentication-form .content-wrapper {
    margin-top: -44px;
    max-width: 396px;
  }
  .authentication .authentication-form .content-wrapper .from-heading .from-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
  }
  .authentication .authentication-form .content-wrapper .from-heading .from-title {
    font-size: 32px;
    line-height: 32px;
  }
}