:root {
  --white: #ffffff;
  --black: #000000;
  --primary: #486898;
  --brand_red: #ed1c24;

  --acumin_light: Acumin_Light;
  --acumin_exlight: Acumin_exLight;
  --acumin_regular: acumin_regular;
  --acumin_medium: Acumin_Medium;
  --acumin_semibold: Acumin_Semibold;
  --acumin_bold: Acumin_Bold;

  --roboto_light: roboto_light;
  --roboto_reg: roboto_reg;
}

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  color: initial;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

/* MAIN FONT USED BY BODY */

@font-face {
  font-family: "Acumin_Light";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/AcuminPro-Light.ttf) format("truetype");
}

@font-face {
  font-family: "Acumin_exLight";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/AcuminPro-ExtraLight.ttf) format("truetype");
}

@font-face {
  font-family: "Acumin_Regular";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Acumin-RPro.woff) format("woff");
}

@font-face {
  font-family: "Acumin_Medium";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/AcuminPro-Medium.otf) format("opentype");
}

@font-face {
  font-family: "Acumin_Semibold";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/AcuminPro-Semibold.otf) format("opentype");
}

@font-face {
  font-family: "Acumin_Bold";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Acumin-BdPro.woff) format("woff");
}

@font-face {
  font-family: "roboto_light";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Roboto-Light.ttf) format("truetype");
}

@font-face {
  font-family: "roboto_reg";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Roboto-Regular.ttf) format("truetype");
}

/* END OF MAIN FONT USED BY BODY */

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: var(--acumin_regular);
  font-size: 15px;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  background: #f7f8fa 0% 0% no-repeat padding-box;
}

.object-fit {
  object-fit: cover;
  object-position: center;

  object-position: center;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--black);
}

::selection {
  color: var(--white);
  background: var(--primary);
}

section {
  position: relative;
}

/* header CSS starts */

header {
  top: 0;
  left: 0;
  position: fixed;
  transition: all 0.5s ease-in-out;
  width: 100%;
  z-index: 9;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 15px #0000000d;
}

.nav_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

a.brand_logo {
  /* position: absolute; */
  background: #ed1c24 0% 0% no-repeat padding-box;
  height: 80px;
  width: 200px;
  /* left: 100px; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-left: 100px;
}

a.brand_logo img {
  height: 32px;
}

.desired-range-wrapper {
  margin-top: 90px;
  padding: 50px 18%;
  background: #f7f8fa 0% 0% no-repeat padding-box;
  opacity: 1;
  height: calc(100vh - 90px);
}

.header-wrapper h2 {
  font-size: 36px;
  line-height: 16px;
  text-align: center;
  font: normal normal bold 36px/46px var(--acumin_bold);
  letter-spacing: -1.1px;
  color: #222222;
  opacity: 1;
  margin-bottom: 0;
}

.login-profile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login-profile-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  height: 80px;
  padding: 0 60px 0 25px;
  cursor: pointer;
  position: relative;
}

.profile-image {
  width: 39px;
  border-radius: 25px;
}

.needhelp-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-left: auto;
  padding-right: 40px;
  border: 1px solid rgba(224, 224, 224, 1);
  cursor: pointer;
  margin-right: 15px;
  padding: 10px 28px;
  border-radius: 8px;
  position: relative;
}

.needhelp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid #383636;
  border-radius: 25px;
  opacity: 1;
  padding: 9px; */
}

.needhelp-icon img {
  width: 18px;
}

.needhelp-title span {
  text-align: left;
  text-decoration: underline;
  font: normal normal 14px/20px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #486898;
  opacity: 1;
}

.needhelp-dropdown {
  position: absolute;
  left: 0;
  padding: 15px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  transition: all 0.5s ease;
  transform: translateY(30px);
  width: 100%;
  max-width: 220px;
  overflow: hidden;
  background: #fff;
  box-shadow: -5px 9px 11px 8px #00000008;
  opacity: 0;
  visibility: hidden;
}

.needhelp-wrapper.open .needhelp-dropdown {
  transition: all 0.5s ease;
  transform: translateY(40px);
  opacity: 1;
  visibility: visible;
}

.needhelp-dropdownlist li {
  padding: 10px 0;
}



.needhelp-dropdownlist li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  font: normal normal 14px / 20px var(--acumin_medium);
  letter-spacing: 0px;
  color: #383636;
  opacity: 1;

}

.needhelp-dropdownlist li a img {
  width: 20px;
}

.needhelp-dropdownlist li:first-child {
  border-bottom: 1px solid #e3e3e3;
  padding-top: 0;
}

.needhelp-dropdownlist li:last-child {
  padding-bottom: 0;
}


.profile-name {
  text-align: left;
  font: normal normal 14px/20px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #11153b;
  opacity: 1;
}

.profile-initial {
  background: #486898;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  padding-top: 4px;
  color: #fff;
  font-size: 16px;
}

.clicked .profile-initial {
  background: #fff;
  color: #486898;

}

.login-profile-wrapper:after {
  position: absolute;
  content: "";
  height: 11px;
  width: auto;
  right: 40px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #00000080;
}

.login-profile-wrapper.clicked:after {
  border-bottom: 5px solid #fff;
  height: auto;
  border-top: none;
}

.login-profile-wrapper.clicked {
  background: #486898;
}

.login-profile-wrapper.clicked .profile-name {
  color: #fff;
}

.post-login-wrapper {
  position: fixed;
  right: 0;
  top: auto;
  margin-top: 4px;
  width: 295px;
  height: auto;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 30px 60px #0000001a;
  transform: translateX(30px);
  transition: all 0.5s ease-in-out;
  opacity: 0;
  z-index: 99;
  visibility: hidden;
}

.post-login-wrapper.show {
  transform: translateX(0px);
  transition: all 0.5s ease-in-out;
  opacity: 1;
  visibility: visible;
}

.account-details-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  bottom: 20px;
  padding: 22px;
  border-bottom: 1px solid #7070701a;
  opacity: 1;
}

.account-img img {
  width: 52px;
}

.account-name h3 {
  text-align: left;
  font: normal normal 16px/22px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #11153b;
  opacity: 1;
  margin: 0;
}

.account-name p {
  text-align: left;
  font: normal normal normal 12px/16px var(--acumin_regular);
  letter-spacing: 0px;
  color: #a1a1a1;
  opacity: 1;
  margin: 0;
}

.account-details-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 19px 32px;
}

.account-details-item img {
  width: 24px;
}

.account-details-item h3 {
  margin: 0;
  text-align: left;
  font: normal normal 14px / 20px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.account-details-bottom {
  border-top: 1px solid #7070701a;
  opacity: 1;
}

h3.log-out-text {
  text-align: left;
  font: normal normal 14px/20px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #d63548;
  opacity: 1;
  margin: 0;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 19px 32px;
  background: none;
  border: 0;
}

.logout-btn img {
  width: 20px;
}

.create-account-wrap {
  margin-right: 40px;
  /* display: none; */
}

.create-account-icon {
  background: none;
  height: 40px;
  width: 40px;
  border-radius: 25px;
  border: 1px solid #486898;
}

.create-account-icon img {
  width: 32px;
}

.showMobile {
  display: none;
}

.hideMobile {
  display: block;
}

/* header CSS ends */

.desired-range-tab-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 60%;
  margin: 0 auto;
}

.desired-range-tab-wrapper .nav-tabs {
  border: 2px solid rgb(56 54 54 / 20%);
  border-radius: 100px;
}

.desired-range-tab-wrapper .nav-tabs .nav-link {
  text-align: left;
  font: normal normal 600 12px / 16px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #383636;
  text-transform: uppercase;
  opacity: 1;
  border: 1px solid #ccc;
  border-radius: 100px;
  padding: 12px 30px 10px;
  white-space: nowrap;
}

.desired-range-tab-wrapper .nav-tabs .nav-item.show .nav-link,
.desired-range-tab-wrapper .nav-tabs .nav-link.active {
  background: #383636 0% 0% no-repeat padding-box;
  border-radius: 100px;
  color: #ffffff;
}

.desired-range-tab-wrapper .nav-tabs {
  border: none;
  gap: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-radius: 0;
  width: 100%;
  padding-bottom: 5px;
  justify-content: start;
}

.desired-range-tab-wrapper .nav-tabs::-webkit-scrollbar {
  display: none;
}

.desired-range-tab-wrapper .nav-tabs .nav-link:focus,
.desired-range-tab-wrapper .nav-tabs .nav-link:hover {
  isolation: isolate;
  background: #000;
  color: #fff;
}

.desired-range-cards-wrapper {
  margin-top: 15px;
}

a.product-logo img {
  width: 72px;
  height: 36px;
}

.desired-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}

.desired-card-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: absolute;
  /* height: 100%;
  top: 0; */
  bottom: 0;
  flex-direction: column;
  padding: 30px;
  transition: all 0.5s ease;
}

.desired-card-text h3 {
  text-align: left;
  font: normal normal 24px/1.5 var(--acumin_medium);
  letter-spacing: 0;
  color: #ffffff;
  text-transform: capitalize;
  opacity: 1;
  margin: 0;
}

.desired-card-text p {
  text-align: left;
  font: normal normal normal 14px/22px var(--roboto_reg);
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 0.7;
  margin: 0;
}

.desired-card-img-wrap {
  height: 100%;
}

.desired-card-img-wrap img {
  overflow: hidden;
  transform: scale(1);
  transition: all 0.5s ease-in-out;
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desired-card-img-wrap .video {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
  object-fit: cover;
}

.desired-card:hover .desired-card-img-wrap img {
  transform: scale(1.2);
  transition: all 0.5s ease-in-out;
}

.desired-card.video-visible:hover .desired-card-img-wrap img {
  opacity: 0;
}

.desired-card.video-visible:hover .desired-card-content {
  opacity: 0;
}

.dark-text h3 {
  color: #383636;
  opacity: 1;
}

.dark-text p {
  color: #383636;
  opacity: 0.7;
}

.desiredRange-slider {
  height: auto;
}

.desiredRange-slider .swiper-wrapper {
  /* display: flex;
  flex-wrap: wrap; */
  justify-content: center;
  height: unset;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.desiredRange-slider .swiper-slide {
  height: 344px;
  width: 100% !important;
  padding: 10px;
}

/* dashboard css starts */

.dashboard-banner-sec {
  margin-top: 90px;
}

.dashboard-banner-wrapper {
  display: grid;
  grid-template-columns: 73% 23%;
  justify-content: space-between;
  padding: 60px 100px 0;
  background: #f7f8fa 0% 0% no-repeat padding-box;
}

.product-status-wrapper {
  padding: 80px 100px;
  background: #f7f8fa 0% 0% no-repeat padding-box;
}

.product-status-wrapper .desired-range-tab-wrapper {
  justify-content: start;
  margin: 0;
}

.product-status-cards-wrapper {
  margin-top: 30px;
}

.product-status-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-status-cards-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.product-status-card-main {
  padding: 25px;
  background: #ffffff 0% 0% no-repeat padding-box;
}

.incomplete-text {
  background: #fff0f0 0% 0% no-repeat padding-box;
  border-radius: 5px;
  padding: 9px 11px 7px;
  text-align: center;
  font: normal normal 12px / 18px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #f72c2c;
  text-transform: uppercase;
  opacity: 1;
}

.product-status-card-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* height: 85px; */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-in-out;
  padding-bottom: 15px;
}

.product-status-card:hover .product-status-card-btns {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease-in-out;
}

.unFill-btn {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #486898;
  border-radius: 100px;
  opacity: 1;
  text-align: center;
  font: normal normal 12px / 16px var(--acumin_bold);
  letter-spacing: 0px;
  color: #486898;
  text-transform: uppercase;
  width: 160px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Fill-btn {
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 100px;
  opacity: 1;
  text-align: center;
  font: normal normal 12px / 16px var(--acumin_bold);
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  width: 160px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

a.unFill-btn:hover {
  color: #486898;
}

a.Fill-btn:hover {
  color: #ffffff;
}

.product-status-card-details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 25px;
  gap: 20px;
}

.edit_text_area {
  text-align: left;
  font: normal normal 22px / 24px var(--acumin_bold);
  letter-spacing: -1.12px;
  color: #344857;
  text-transform: capitalize;
  opacity: 1;
  margin: 0;
  transition: all 0.2s;
}

.product-status-card-subtext span {
  text-align: left;
  font: normal normal 16px/18px var(--acumin_medium);
  letter-spacing: -0.64px;
  color: #344857;
  text-transform: capitalize;
  opacity: 0.7;
  position: relative;
  padding: 0 5px;
}

.product-status-card-subtext span:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background: #344857;
  right: 0px;
  top: -1px;
}

.product-status-card-subtext span:last-child:after {
  display: none;
}

.product-status-card-cost {
  text-align: center;
  font: normal normal 22px / 30px var(--acumin_bold);
  letter-spacing: 0px;
  color: #344857;
  text-transform: uppercase;
  opacity: 1;
}

.product-status-card-img {
  text-align: center;
  height: 170px;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  transform: scale(1.1);
  transition: all 0.5s ease-in-out;
}

.product-status-card-img img {
  width: auto;
  max-width: 100%;
  height: 140px;
}

/* .product-status-card-img {
  text-align: center;
  padding: 42px 0;
  height: 200px; 
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  transform: scale(1.1);
  transition: all 0.5s ease-in-out;
} */

.product-status-card:hover .product-status-card-img {
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}

.product-status-card-bottom {
  padding: 50px 0 0;
}

.product-status-heading h2 {
  text-align: left;
  font: normal normal 30px / 38px var(--acumin_bold);
  letter-spacing: -1.12px;
  color: #344857;
  text-transform: capitalize;
  opacity: 1;
  margin-bottom: 15px;
}

.share-icn-wrap {
  background: #fff 0% 0% no-repeat padding-box;
  opacity: 1;
  height: 45px;
  width: 45px;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #486898;
}

.share-icn {
  background: none;
  border: none;
}

.new-floating .share-icn-wrap {
  background: rgba(72, 104, 152, 0.12);
  border: none;
}

.dashboard-banner-CTA {
  width: 170px;
  height: 45px;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 35px;
  text-align: center;
  font: normal normal 12px/16px var(--acumin_bold);
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  margin-top: 25px;
}

.dashboard-banner-CTA:hover {
  color: #ffffff;
}

.dashboard-banner-content h1 {
  text-align: left;
  font: normal normal 36px/44px var(--acumin_bold);
  letter-spacing: -1.44px;
  color: #ffffff;
  opacity: 1;
}

.dashboard-banner-content p {
  text-align: left;
  font: normal normal normal 14px/20px var(--acumin_regular);
  letter-spacing: 0.1px;
  color: #ffffff;
  opacity: 0.8;
  margin-top: 20px;
}

.dashboard-banner {
  position: relative;
}

.dashboard-banner-content {
  position: absolute;
  left: 60px;
  top: 55px;
  width: 35%;
}

.social-media-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 30px;
}

.share-modal-img {
  padding: 48px 48px;
  background: #f8f8f8 0% 0% no-repeat padding-box;
  text-align: center;
}

.share-modal-img img {
  height: 190px;
  width: auto;
}

.share-modal-wrap .modal-dialog-centered {
  justify-content: center;
}

.share-modal-wrap .modal-content {
  width: 600px;
  height: auto;
  border: none;
  border-radius: 0;
}

.share-modal-wrap .modal-header {
  border-bottom: none;
  padding: 0;
}

.share-modal-wrap .modal-header .btn-close {
  position: absolute;
  right: 30px;
  top: 30px;
  opacity: 1;
  background-size: 25px;
}

.social-community-heading {
  margin-top: 20px;
}

.share-modal-social-community {
  padding: 40px;
}

.social-community-heading h3 {
  text-align: center;
  /* font: normal normal 24px/24px var(--acumin_semibold);
  letter-spacing: -1px;
  color: #222222;
  opacity: 1; */
  color: rgba(56, 54, 54, 0.7);
  opacity: 1;
  font-size: 20px;
  font-family: var(--roboto_reg);
  font-weight: 400;
  word-wrap: break-word;
  letter-spacing: -0.7px;
}

.social-community-CTA {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 50px;
}

.social-community-CTA .download-img-btn {
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 35px;
  opacity: 1;
  text-align: center;
  font: normal normal bold 16px / 22px var(--acumin_bold);
  letter-spacing: -0.32px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-community-CTA .download-img-btn.outline {
  background: none;
  color: #486898;
  border: 1px solid #486898;
}

.social-community-or-divider {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.social-community-or-divider span {
  text-align: center;
  font: normal normal 14px / 18px var(--acumin_semibold);
  letter-spacing: -0.28px;
  color: #231f20;
  opacity: 0.4;
}

.social-community-or-divider span::before {
  position: absolute;
  content: "";
  background: #231f20;
  height: 2px;
  width: 45%;
  top: 50%;
  left: 0;
  opacity: 0.1;
}

.social-community-or-divider span::after {
  position: absolute;
  content: "";
  background: #231f20;
  height: 2px;
  width: 45%;
  top: 50%;
  right: 0;
  opacity: 0.1;
}

.share-modal-wrap .btn-close:focus {
  box-shadow: none;
}

.need-help-card {
  position: relative;
}

.need-help-card-content {
  position: absolute;
  left: 40px;
  top: 50px;
  width: 52%;
}

.need-help-card-content h2 {
  text-align: left;
  font: normal normal 30px/36px var(--acumin_semibold);
  letter-spacing: -1.2px;
  color: #222222;
  opacity: 1;
}

.need-help-card-content p {
  text-align: left;
  font: normal normal 16px/22px var(--acumin_regular);
  letter-spacing: -0.64px;
  color: #222222;
  opacity: 0.7;
  margin: 15px 0;
}

.contact-us-btn {
  width: 136px;
  height: 45px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: normal normal 12px / 16px var(--acumin_bold);
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  border: 1px solid #222222;
  border-radius: 23px;
  opacity: 1;
}

.product-status-card-subtext span:first-child {
  padding-left: 0;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 20px;
  text-align: center;
}

.swiper-pagination-bullet {
  background: transparent;
}

.swiper-pagination-bullet {
  margin-left: 20px !important;
}

.swiper-pagination-bullet-active .path {
  display: inline-block !important;
  stroke-dasharray: 1000;
  stroke-dashoffset: 50;
  animation: dash linear 120s;
  animation-iteration-count: unset;
}

.path {
  display: none;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.incomplete-text.completed-text {
  color: #50c878;
  background: #ddfff4 0% 0% no-repeat padding-box;
}

.share-icn-wrap:hover {
  background: #486898 0% 0% no-repeat padding-box;
  border: none;
}

.share-icn-wrap svg {
  /* fill: #486898;
  stroke: #486898;
  stroke-width: 0.5; */
  /* opacity: 0.5; */
  width: 22px;
  height: 22px;
}

/* .share-icn-wrap:hover svg {
  stroke: #fff;
  fill: #fff;
} */

/* dashboard css ENDS */

/* share modal css starts */

.share-modal-wrap .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  /* Adjust this value as needed */
  justify-content: center;
}

/* Apply zoom in effect */
.modal.share-modal-wrap.fade .modal-dialog {
  animation: zoomIn 0.3s forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* Apply zoom out effect */
.modal.share-modal-wrap.fade .modal-dialog.zoomOut {
  animation: zoomOut 0.3s forwards;
}

@keyframes zoomOut {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

/* share modal css Ends */

/* create account modal css starts */

.create-account-modal .modal-header {
  border-bottom: none;
}

.create-account-frm-wrap .modal-content {
  width: 600px;
  height: auto;
  border-radius: 0;
  outline: 0;
  border: none;
  padding: 10px 60px 55px;
}

.create-account-modal .modal-header .btn-close {
  background-size: 20px;
  right: 30px;
  position: absolute;
  top: 30px;
}

.create-account-from-header h3 {
  text-align: center;
  font: normal normal bold 36px / 36px var(--acumin_bold);
  letter-spacing: -1.16px;
  color: #222222;
  opacity: 1;
}

.create-account-from-header p {
  text-align: center;
  font: normal normal normal 18px / 30px var(--roboto_reg);
  letter-spacing: -0.72px;
  color: #444444;
  opacity: 1;
}

.create-account-modal .modal-header .btn-close:focus {
  box-shadow: none;
}

.create-account-from .form-control {
  background: #f5f5f5 0% 0% no-repeat padding-box;
  border-radius: 100px;
  opacity: 1;
  border: none;
  padding: 18px 30px;
}

.create-account-from .form-submit {
  width: 100%;
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 35px;
  opacity: 1;
  border: none;
  padding: 22px 30px;
  color: #fff;
}

.create-account-from .form-control::placeholder {
  opacity: 0.5;
}

.OrSignIn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0 30px;
  position: relative;
}

.OrSignIn-wrap span {
  text-align: center;
  font: normal normal 14px / 18px var(--acumin_semibold);
  letter-spacing: -0.28px;
  color: #231f20;
  opacity: 0.4;
}

.OrSignIn-wrap span:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 37%;
  background: #231f20;
  opacity: 0.1;
  left: 0;
  top: 5px;
}

.OrSignIn-wrap span:after {
  position: absolute;
  content: "";
  height: 1px;
  width: 37%;
  background: #231f20;
  opacity: 0.1;
  right: 0;
  top: 5px;
}

.sign-in-CTAs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.sign-in-CTAs a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #ececec;
  border-radius: 8px;
  opacity: 1;
  padding: 19px 15px 17px;
  height: 50px;
  text-align: left;
  font: normal normal 600 14px/14px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #231f20;
  opacity: 1;
  width: 50%;
}

.sign-in-CTAs a img {
  width: 24px;
}

.sign-in-LINk-wrap {
  text-align: center;
  margin-top: 30px;
}

.sign-in-LINk-wrap span {
  text-align: left;
  font: normal normal normal 18px / 18px var(--acumin_regular);
  letter-spacing: -0.36px;
  color: rgb(35 31 32 / 50%);
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.signin-link {
  text-align: left;
  text-decoration: underline;
  font: normal normal 18px/18px var(--acumin_semibold);
  letter-spacing: -0.36px;
  color: #486898;
  text-transform: uppercase;
  opacity: 1;
  background: none;
  border: 0;
  padding: 0;
}

.signin-link:hover {
  color: #486898;
  background: none;
  border: 0;
  padding: 0;
}

.create-account-frm-wrap .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  /* Adjust this value as needed */
  justify-content: center;
}

/* Apply zoom in effect */
.modal.create-account-frm-wrap.fade .modal-dialog {
  animation: zoomIn 0.3s forwards;
  max-width: 600px;
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
  }

  to {
    transform: scale(1);
  }
}

/* Apply zoom out effect */
.modal.create-account-frm-wrap.fade .modal-dialog.zoomOut {
  animation: zoomOut 0.3s forwards;
}

@keyframes zoomOut {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

label.error {
  color: #ff0000cf;
  margin-top: 5px;
  /* text-transform: capitalize; */
  width: 100%;

}

span.error {
  color: #ff0000cf;
  margin-top: 5px;
  /* text-transform: capitalize; */
  width: 100%;
}

.iti__flag-container {
  height: 60px;
}

.password-field span.fa.fa-fw.fa-eye.field-icon.toggle-password,
.password-field span.fa.fa-fw.field-icon.toggle-password.fa-eye-slash {
  position: absolute;
  left: auto;
  right: 20px;
  top: 25px;
}

.form-group.password-field {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  position: relative;
}

.password-field .field-icon {
  opacity: 0.4;
}

.modal.leaflet-modal .dropdownQuery.active::before {
  transform: rotate(135deg);
}

/* create account modal css Ends */

/* enquernow Modal css starts */

.modal.DIY_enquire_form.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  max-width: 700px;
  height: 100%;
  margin: 0 0 0 auto;
}

.modal.right-transform-ex.DIY_enquire_form.fade .modal-dialog {
  transform: translateX(100px);
}

.modal.right-transform-ex.DIY_enquire_form.show .modal-dialog {
  transform: none;
}

.modal.leaflet-modal.DIY_enquire_form .modal-content {
  border: 0;
  border-radius: 0;
  height: 100%;
}

.modal.leaflet-modal.DIY_enquire_form .modal-header {
  border: 0;
  padding: 0;
}

.modal.leaflet-modal.DIY_enquire_form .btn-close {
  position: absolute;
  padding: 0;
  top: 30px;
  right: 30px;
  font-size: 19px;
  color: #1f2127;
  opacity: 1;
  z-index: 1;
}

.modal.leaflet-modal.DIY_enquire_form .modal-body {
  padding: 75px 50px;
  background: #fff;
}

.leaflet_heading-text {
  font-family: var(--acumin_bold);
  font-size: 60px;
  line-height: 1;
  text-transform: capitalize;
  letter-spacing: -2px;
  color: #000;
  margin-bottom: 10px;
}

.modal.leaflet-modal.DIY_enquire_form .form-mb .form-control {
  background: #f9f9f9 0% 0% no-repeat padding-box;
  border: 1px solid #efefef;
  border-radius: 35px;
  height: 60px;
  padding-left: 24px;
  font-size: 16px;
  font-family: var(--roboto_reg);
}

.modal.leaflet-modal.DIY_enquire_form .form-mb .form-control:focus {
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px rgba(72, 104, 152, 0.25);
}

.modal.leaflet-modal.DIY_enquire_form .textareaSec {
  background: #f9f9f9 0% 0% no-repeat padding-box;
  padding: 15px;
  width: 100%;
  height: 108px;
  resize: none;
  font-size: 16px;
  font: normal normal normal 16px / 30px var(--roboto_Reg);
  border: 1px solid #efefef;
  border-radius: 20px;
  font-family: var(--roboto_reg);
  font-size: 16px;
  line-height: 30px;
}

.modal.leaflet-modal.DIY_enquire_form .textareaSec:focus {
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px rgba(72, 104, 152, 0.25);
}

.textRequired {
  font-size: 12px;
  letter-spacing: -0.24px;
  color: #000000;
  opacity: 0.7;
  top: -20px;
  position: relative;
  font-family: var(--roboto_reg);
  font-size: 12px;
  line-height: 1.2;
  font-style: italic;
  left: 15px;
}

.modal.leaflet-modal .dropdownQuery {
  border: 1px solid #efefef;
  color: #000;
  border-radius: 30px;
  height: 60px;
  background: #ffffff0d 0% 0% no-repeat padding-box;
  opacity: 1;
  padding: 0 23px;
  outline: none;
  display: flex;
  align-items: center;
  position: relative;
}

.modal.leaflet-modal .dropdownQuery .dropdownQuery-menu {
  position: absolute;
  background-color: #fff;
  width: 100%;
  left: 0;
  margin-top: 10px;
  border-radius: 0;
  display: none;
  z-index: 9;
  box-shadow: 0px 0px 30px #0000001a;
  border-radius: 0px;
  padding: 13px 4px;
  top: 40px;
}

.modal.leaflet-modal .dropdownQuery .select span {
  color: #000;
  font-family: var(--roboto_reg);
  font-size: 16px;
}

.modal.leaflet-modal .dropdownQuery::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid #5e5e5e;
  position: absolute;
  top: 42%;
  right: 35px;
  border-top: 0;
  border-right: 0;
  transform: rotate(314deg);
  transition: all 0.3s ease-in-out;
}

.modal.leaflet-modal .dropdownQuery .dropdownQuery-menu li {
  border-bottom: 0;
  color: #383636;
  text-transform: uppercase;
  opacity: 0.8;
  font: normal normal 14px / 20px var(--acumin_medium);
  letter-spacing: 0.28px;
}

.filter_heading .dropdownQuery .dropdownQuery-menu li {
  padding: 12px 21px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.modal.leaflet-modal .submitBtn {
  width: 200px;
  height: 56px;
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 35px;
  margin-top: 15px;
  border: 0;
  text-transform: uppercase;
  padding-top: 10px;
  font-size: 14px;
  font-family: var(--acumin_bold);
}

.modal {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* enquernow Modal css ends */

/* coutry code input field starts */

.form-group .iti--separate-dial-code .iti__selected-flag {
  background-color: transparent;
}

.form-group .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: transparent;
}

.form-group .iti {
  width: 100%;
}

.form-group .iti--separate-dial-code input[type="tel"] {
  padding-right: 6px;
  padding-left: 125px !important;
  margin-left: 0;
}

.form-group .iti__flag {
  border-radius: 10px;
}

.iti__selected-flag:after {
  position: absolute;
  content: "";
  height: 50%;
  width: 1px;
  right: 0;
  background: #d8d8d8;
}

.iti__selected-flag {
  padding: 0 12px 0 30px;
}

.form-control:focus {
  /* background-color: #fff;
  border: 1px solid #d8d8d8; */
  outline: 0;
  box-shadow: none;
}

/* coutry code input field Ends */

/* auto pop up range modal css starts */

.range-modal .modal-dialog {
  max-width: 1400px;
}

.range-modal .modal-header {
  border-bottom: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.range-modal .modal-content {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: none;
  border-radius: 0;
  outline: 0;
  padding: 50px 50px;
}

.range-modal .modal-header .btn-close {
  position: absolute;
  right: 50px;
  top: 50px;
  background-size: 24px;
}

.range-modal .modal-header h2 {
  text-align: center;
  font: normal normal 30px / 42px var(--acumin_semibold);
  letter-spacing: -1.2px;
  color: #11153b;
  opacity: 1;
}

.range-modal .modal-header p {
  text-align: center;
  font: normal normal 16px / 23px var(--acumin_regular);
  letter-spacing: -0.32px;
  color: #5e6f84;
  opacity: 1;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

.range-modal-wrapper {
  display: grid;
  grid-template-columns: 35% 65%;
}

.stepper-step-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 30px 30px;
  position: relative;
  height: 107px;
  cursor: pointer;
}

.step-box-number {
  text-align: center;
  font: normal normal 600 16px / 29px var(--roboto_reg);
  letter-spacing: -0.96px;
  color: #fff;
  opacity: 1;
  background: #d4d4d4 0% 0% no-repeat padding-box;
  opacity: 1;
  width: 40px;
  height: 40px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-step-box.active .step-box-number {
  background: #486898 0% 0% no-repeat padding-box;
}

.step-box-right h3 {
  text-align: left;
  font: normal normal 16px / 40px var(--acumin_medium);
  letter-spacing: -0.48px;
  color: #445264;
  /* text-transform: capitalize; */
  opacity: 1;
  font-size: 16px;
  line-height: 20px;
  margin: 5px 0;
  font-family: var(--acumin_medium);
}

.step-box-right p {
  text-align: left;
  font: normal normal normal 12px / 14px var(--acumin_regular);
  letter-spacing: -0.24px;
  color: #445264;
  opacity: 0.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stepper-step-box.active.current .step-box-right h3 {
  color: #486898;
}

.stepper-step-box-wrpper {
  position: relative;
}

.step-details {
  display: none;
}

.step-details.active {
  display: block;
}

.stepper-step-box.current {
  background-color: rgba(209, 209, 211, 255);
}

.step-details-wrap {
  position: relative;
}

.btn-close.skip-CTA {
  background-image: none;
  border: 1px solid #000;
  width: auto;
  height: auto;
  border: 2px solid #486898;
  border-radius: 35px;
  text-align: center;
  font: normal normal 12px / 16px var(--acumin_bold);
  letter-spacing: 0px;
  color: #486898;
  text-transform: uppercase;
  opacity: 1;
  padding: 17px 55px 12px;
}

.step-details-content {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 20px 50px #00000029;
  border: 0.5px solid #486898;
  opacity: 1;
  padding: 10px 15px;
  border-radius: 10px;
}

.step-details-content h3 {
  text-align: left;
  font: normal normal 16px / 25px var(--acumin_semibold);
  letter-spacing: -0.48px;
  color: #445264;
  /* text-transform: capitalize; */
  opacity: 1;
  margin: 0;
}

.step-details-content p {
  text-align: left;
  font: normal normal normal 12px / 14px var(--acumin_regular);
  letter-spacing: -0.24px;
  color: #919dab;
  opacity: 0.7;
  margin: 0;
}

.step1 {
  position: absolute;
  width: 284px;
  height: 79px;
  top: 34%;
  left: 54%;
}

.step1:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: 40%;
  left: -9px;
  border-top: 0.5px solid #486898;
  border-left: 0.5px solid #486898;
  transform: rotate(-45deg);
}

.step2 {
  position: absolute;
  width: 284px;
  height: 79px;
  top: 45%;
  right: 50%;
}

.step2:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: 40%;
  right: -9px;
  border-top: 0.5px solid #486898;
  border-left: 0.5px solid #486898;
  transform: rotate(134deg);
}

.step3 {
  position: absolute;
  width: 284px;
  height: 79px;
  top: 40%;
  right: 50%;
}

.step3:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: 40%;
  right: -9px;
  border-top: 0.5px solid #486898;
  border-left: 0.5px solid #486898;
  transform: rotate(134deg);
}

.step4 {
  position: absolute;
  width: 284px;
  height: 79px;
  top: 40%;
  right: 50%;
}

.step4:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: 40%;
  right: -9px;
  border-top: 0.5px solid #486898;
  border-left: 0.5px solid #486898;
  transform: rotate(134deg);
}

.step5 {
  position: absolute;
  width: 284px;
  height: 79px;
  top: 30%;
  right: 8%;
}

.step5:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: -9px;
  right: 20%;
  border-top: 0.5px solid #486898;
  border-left: 0.5px solid #486898;
  transform: rotate(45deg);
}

.stepper-step-box .step-box-left::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 66px;
  left: 11%;
  top: 74px;
  border: 1px dashed #b6b6b6;
  z-index: 1;
}

.stepper-step-box .step-box-left::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  opacity: 0;
  left: 11%;
  top: 74px;
  border: 1px solid #486898;
  z-index: 1;
}

.stepper-step-box.active .step-box-left::after {
  height: 66px;
  opacity: 1;
  transition: 3s;
}

.stepper-step-box:last-child .step-box-left::before {
  display: none;
}

.stepper-step-box:last-child .step-box-left::after {
  display: none;
}


.range-modal-bottom-wrap {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 30px;
}

.tour-footer-left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.dontshow {}

.dontshow .checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  font-family: var(--acumin_medium);
  letter-spacing: -0.56px;
  color: #243245;
  opacity: 1;
}

.dontshow .checkbox input {
  position: absolute;
  width: 0;
  left: 50px;
  height: 0;
  opacity: 0;
  cursor: pointer;
}

.dontshow .checkbox .checkmark {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  transition: all 0.2s ease;
  background: #eef3fc 0% 0% no-repeat padding-box;
  border-radius: 3px;
  opacity: 1;
}

.dontshow .checkbox:hover .checkmark {
  background: #f4f4f5;
  transition: all 0.2s ease;
}

.dontshow .checkbox input:checked~.checkmark {
  background: #486898 0% 0% no-repeat padding-box;
}

.dontshow .checkbox input[type="radio"]~.checkmark {
  border-radius: 50%;
}

.dontshow .checkbox .checkmark::after {
  position: absolute;
  display: block;
  content: "";
  left: 50%;
  top: 48%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  transition: all 0.2s ease;
}

.dontshow .checkbox input:checked~.checkmark::after {
  opacity: 1;
  transition: all 0.2s ease;
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tour-cta {
  background-image: none;
  width: auto;
  height: auto;
  border-radius: 35px;
  text-align: center;
  font: normal normal 12px / 16px var(--acumin_semibold);
  letter-spacing: 0px;
  text-transform: uppercase;
  opacity: 1;
  padding: 14px 30px 12px;
  background: none;
}

.tour-cta.btn-prev {
  border: 2px solid #486898;
  color: #486898;
}

.tour-cta.btn-next {
  border: 2px solid #486898;
  background: #486898;
  color: #fff;
}

/* auto pop up range modal css Ends */

.product-status-card-subtext {
  text-align: left;
  font: normal normal 16px/26px var(--acumin_medium);
  letter-spacing: -0.64px;
  color: #344857;
  text-transform: capitalize;
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editableArea {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.conf_edit_button {
  border: none;
  outline: none;
  background: none;
}

.editing {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #e2e2e2;
  opacity: 1;
  padding: 7px 10px;
}

.sign-in-form .modal-header {
  border-bottom: none;
}

.sign-in-form .modal-header .btn-close {
  background-size: 20px;
  right: 30px;
  position: absolute;
  top: 30px;
}

.sign-in-form .modal-content {
  border-radius: 0;
  outline: 0;
  border: none;
  padding: 50px 45px 55px;
}

.forgot-modal .modal-header {
  border-bottom: none;
}

.forgot-modal .modal-header .btn-close {
  background-size: 20px;
  right: 30px;
  position: absolute;
  top: 30px;
}

.forgot-modal .modal-content {
  border-radius: 0;
  outline: 0;
  border: none;
  padding: 10px 45px 55px;
}

.forgot-pswd {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.forgot-pswd-CTA {
  background: none;
  border: none;
  outline: none;
  text-align: right;
  font: normal normal 14px/18px var(--acumin_semibold);
  letter-spacing: -0.28px;
  color: #486898;
  text-transform: capitalize;
  opacity: 1;
}

.forgot-pswd-CTA:hover {
  background: none;
  border: none;
  outline: none;
  text-align: right;
  font: normal normal 14px/18px var(--acumin_semibold);
  letter-spacing: -0.28px;
  color: #486898;
  text-transform: capitalize;
  opacity: 1;
}

.forgot_pass_btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 35px;
  font: normal normal 16px / 22px var(--acumin_bold);
  letter-spacing: -0.32px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  border: none;
}

.OTP-verification-modal .modal-content {
  border-radius: 0;
  outline: 0;
  border: none;
  padding: 45px 45px 55px;
}

.OTP-verification-modal .modal-header .btn-close {
  background-size: 20px;
  right: 30px;
  position: absolute;
  top: 30px;
}

.OTP-verification-modal .modal-header {
  border-bottom: none;
  padding: 0;
}

.OTP-verification-modal .create-account-from-header p {
  font: normal normal 18px/30px var(--acumin_regular);
  letter-spacing: -0.72px;
  color: rgb(68 68 68 / 70%);
  margin: 20px 0 50px;
}

.OTP-verification-modal .create-account-from-header p.otp_ver_timeout {
  font: normal normal normal 14px/20px var(--acumin_regular);
  letter-spacing: -0.42px;
  color: rgb(34 34 34 / 70%);
  margin: 0 0 30px;
}

.otp_ver_timeout span {
  color: #f57f17;
}

.resend_otp_a {
  text-align: center;
}

.resend_otp_a a {
  font: normal normal 12px/16px var(--acumin_regular);
  letter-spacing: -0.36px;
  color: #486898;
  text-transform: uppercase;
  opacity: 1;
  margin-right: 15px;
}

.resend_otp_a p {
  font: normal normal 14px/20px var(--acumin_regular);
  letter-spacing: -0.42px;
  color: #919dab;
  margin-bottom: 40px;
}

.opt-boxes {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.opt-boxes input {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #e8ebf3;
  border-radius: 16px;
  width: 58px;
  height: 60px;
  text-align: center;
  font: normal normal 24px var(--acumin_semibold);
  letter-spacing: -1.44px;
  color: #000000;
  opacity: 1;
}

.stepper-step-box .step-box-left::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 64px;
  left: 11%;
  top: 72px;
  border: 1px dashed #b6b6b6;
  z-index: 1;
}

.stepper-step-box .step-box-left::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  opacity: 0;
  left: 11%;
  top: 70px;
  border: 1px solid #486898;
  z-index: 1;
}

.stepper-step-box.active .step-box-left::after {
  height: 66px;
  opacity: 1;
  transition: 3s;
}

.stepper-step-box:last-child .step-box-left::before {
  display: none;
}

.stepper-step-box:last-child .step-box-left::after {
  display: none;
}

.btn.signin-link:active {
  background: none;
  color: #486898;
}

/* Activity area page CSS starts */
.activity-area-wrapper {
  display: grid;
  grid-template-columns: 60% 40%;
  margin-top: 80px;
  background: #fff;

}

.activity-area-right {
  background: #f9f9f9 0% 0% no-repeat padding-box;
  border-left: 1px solid rgb(0 0 0 / 10%);
}

.activity-main-tabs .nav.nav-pills {
  background: #f9f9f9 0% 0% no-repeat padding-box;
  opacity: 1;
  display: grid;
  grid-template-columns: 50% 50%;
}

.activity-main-tabs .nav-item {
  display: contents;
}

.activity-main-tabs .nav-pills .nav-link {
  text-align: center;
  font: normal normal bold 16px / 20px var(--acumin_regular);
  letter-spacing: 0;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  border-bottom: 2px solid #00000021;
  border-radius: 0;
  padding: 16px 16px 12px;
}

.activity-main-tabs .nav-pills .nav-link.active {
  color: #486898;
  border-bottom: 2px solid #486898;
  background: none;
}

.activity-inner-tabs {
  padding: 30px 40px;
  background: #f9f9f9 0% 0% no-repeat padding-box;
  opacity: 1;
  height: calc(100vh - 230px);
  overflow: auto;
}

.activity-inner-tabs .accordion-body {
  padding: 0;
}

.activity-inner-tabs::-webkit-scrollbar {
  width: 0px;
}

.finish_color_wrapper {
  height: calc(100vh - 202px);
  overflow: auto;
}

.tab-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.activity-inner-tabs-header {
  /* display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; */
}

.activity-inner-tabs .nav-pills .nav-link {
  text-align: center;
  font: normal normal 600 12px/12px var(--acumin_regular);
  letter-spacing: -0.24px;
  color: #383636;
  text-transform: uppercase;
  opacity: 1;
  border: 2px solid #383636;
  border-radius: 100px;
  padding: 8px 16px 6px;
}

.activity-inner-tabs .nav-pills .nav-link.active {
  color: #fff;
  background: #383636 0% 0% no-repeat padding-box;
  border-radius: 100px;
  opacity: 1;
  border: 2px solid #383636;
}

.activity-inner-tabs .nav-pills .nav-link:hover {
  color: #fff;
  background: #383636 0% 0% no-repeat padding-box;
  border-radius: 100px;
  opacity: 1;
  border: 2px solid #383636;
}

.activity-inner-tabs .nav.nav-pills {
  padding: 0;
  flex-wrap: wrap;
  display: flex;
  gap: 15px 10px;
}

.nav_pill_ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 0;
}

.accordion-wrapper .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.5s;
}

.accordion-wrapper .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-wrapper .accordion-button::after {
  transition: all 0.5s;
  width: 30px;
  height: 30px;
  background-size: 30px;
}

.accordion-wrapper .accordion-button {
  background-color: #f9f9f9;
  border: 0;
  text-align: left;
  font: normal normal bold 20px / 45px var(--acumin_bold);
  letter-spacing: -0.6px;
  color: #1f2127;
  text-transform: uppercase;
  opacity: 1;
}

.accordion-wrapper .accordion-item {
  border: 0;
  background: none;
}

.accordion-wrapper .accordion-button:not(.collapsed) {
  background-color: #f9f9f9;
  box-shadow: none;
  color: #1f2127;
}

.accordion-wrapper .accordion-button:focus {
  box-shadow: none;
}

.accordion-wrapper .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion-wrapper .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion-wrapper .accordion-item {
  border-top: 1px solid #00000030;
  border-bottom: 1px solid #00000030;
}

.accordion-wrapper .accordion-item:first-child {
  border-top: 0;
}

.products-wrapper {
  /* display: flex;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  height: auto;
  max-height: calc(100vh - 485px);
  overflow: auto;
}

.products-wrapper::-webkit-scrollbar {
  display: none;
}

.products-card {
  position: relative;
  /* width: 30.7%; */
  width: 100%;
}

.products-card-img {
  padding: 20px;
  background: #fff;
  border: 1px solid #ececec;
  height: 160px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.products-card-img img {
  max-width: 90px;
  height: 90px;
  object-fit: contain;
  transition: all 0.5s ease;
  transform: scale(1);
}

.products-card:hover .products-card-img img {
  transform: scale(1.2);
}

.product-content p {
  text-align: left;
  font: normal normal 13px / 18px var(--acumin_semibold);
  letter-spacing: 0;
  color: #1f2127;
  opacity: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-content span {
  text-align: left;
  font: normal normal 12px/15px var(--acumin_regular);
  letter-spacing: -0.36px;
  color: #1f2127;
  text-transform: uppercase;
  opacity: 0.5;
}

.product-content {
  padding: 10px 0;
}

.products-card:hover {
  cursor: pointer;
}

.products-card:hover .products-card-img {
  box-shadow: 0px 6px 20px #0000000a;
  opacity: 1;
}

.delete-icon {
  position: absolute;
  top: 15px;
  right: 20px;
  opacity: 0;
  transition: all;
}

.delete-icon img {
  height: auto;
}

.show-delete .delete-icon {
  opacity: 1;
}

.show-delete .products-card-img {
  border: 1px solid #486898;
}

.show-delete .platefinishes-card-img {
  border: 1px solid #486898;
}

.products-card.show-delete:hover .products-card-img {
  box-shadow: 0px 6px 20px #0000000a;
  border: 1px solid #486898;
  opacity: 1;
}

.activity-main-tabs-header {
  position: sticky;
  top: 0px;
  z-index: 1;
}

.platefinishes-wrapper {
  padding: 30px 30px 0;
  position: relative;
}

.platefinishes-header h2 {
  text-align: left;
  font: normal normal 18px / 20px var(--acumin_bold);
  letter-spacing: 0;
  color: #1f2127;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 20px;
}

.platefinishes-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* display: flex;
  flex-wrap: wrap; */
  gap: 20px;
  overflow: auto;
  height: auto;
  /* max-height: calc(100vh - 490px); */
  padding-bottom: 20px;
}

.platefinishes-body::-webkit-scrollbar {
  display: none;
}

.platefinishes-card {
  /* width: 22.3%; */
  width: 100%;
  position: relative;
  cursor: pointer;
}

.platefinishes-card-img {
  padding: 30px 24px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #ececec;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.platefinishes-card-img img {
  width: 73px;
  height: 61px;
  object-fit: contain;
}

.platefinishes-card-content p {
  text-align: left;
  font: normal normal 14px / 20px var(--acumin_semibold);
  letter-spacing: -0.48px;
  color: rgb(31 33 39 / 50%);
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 0;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.functioncolor-wrapper {
  padding: 30px 30px;
  background: #f1f1f1 0% 0% no-repeat padding-box;
  opacity: 1;
  border-top: 1px solid rgb(0 0 0 / 10%);
  position: relative;
  z-index: 2;
}

.functioncolor-header h2 {
  text-align: left;
  font: normal normal 16px/20px var(--acumin_bold);
  letter-spacing: -0.54px;
  color: #1f2127;
  text-transform: uppercase;
  opacity: 1;
}

.color-box-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  height: 110px;
  overflow: auto;
}

.color-box-wrap::-webkit-scrollbar {
  width: 2px;
}

.color-box-wrap1 {
  height: 75px;
  overflow: auto;
}

.color-box-wrap1::-webkit-scrollbar {
  width: 2px;
}

.box {
  width: 100%;
  height: 33px;
  overflow: hidden;
  /* opacity: 0.5; */
  border: 1px solid #b3b3b3;
}

.color-box.selected .box {
  opacity: 1;
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px rgba(72, 104, 152, 0.25);
}

.platefinishes-card.show-delete- .platefinishes-card-img {
  border: 1px solid #486898;
}

.sand {
  background: #ccb095 0% 0% no-repeat padding-box;
}

.white {
  background: #ffffff 0% 0% no-repeat padding-box;
}

.black {
  background: #000000 0% 0% no-repeat padding-box;
}

.box-name {
  text-align: center;
  font: normal normal 12px/14px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #383636;
  text-transform: uppercase;
  /* opacity: 0.5; */
  margin: 10px 0 0 0;
}

.selected .box-name {
  opacity: 1;
}

.color-box {
  cursor: pointer;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

/* Activity area page CSS Ends */

/* #f4f4f4: #f4f4f4; */
/* $color2: #486898 ; */

.radio {
  position: absolute;
  top: 10px;
  right: 10px;
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
  content: "";
  background: #fff;
  /* Assuming #f4f4f4 is a variable */
  border-radius: 100%;
  border: 1px solid #00000012;
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
  background-color: #486898;
  /* Assuming#486898  is a variable */
  box-shadow: inset 0 0 0 1px #f4f4f4;
  /* Assuming #f4f4f4 is a variable */
}

.radio input[type="radio"]:focus+.radio-label:before {
  outline: none;
  border-color: #486898;
  /* Assuming#486898  is a variable */
}

.radio input[type="radio"]:disabled+.radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  /* Assuming #f4f4f4 is a variable */
  border-color: darken(#f4f4f4, 25%);
  /* Assuming darken() is a SCSS function */
  background: darken(#f4f4f4, 25%);
  /* Assuming darken() is a SCSS function */
}

.radio input[type="radio"]+.radio-label:empty:before {
  margin-right: 0;
}

/* Activity area page CSS Ends */

/* #f4f4f4: #f4f4f4; */
/* $color2: #486898 ; */

.radio {
  position: absolute;
  top: 10px;
  right: 10px;
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
  content: "";
  background: #fff;
  /* Assuming #f4f4f4 is a variable */
  border-radius: 100%;
  border: 1px solid #00000012;
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
  background-color: #486898;
  /* Assuming#486898  is a variable */
  box-shadow: inset 0 0 0 1px #f4f4f4;
  /* Assuming #f4f4f4 is a variable */
}

.radio input[type="radio"]:focus+.radio-label:before {
  outline: none;
  border-color: #486898;
  /* Assuming#486898  is a variable */
}

.radio input[type="radio"]:disabled+.radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  /* Assuming #f4f4f4 is a variable */
  border-color: darken(#f4f4f4, 25%);
  /* Assuming darken() is a SCSS function */
  background: darken(#f4f4f4, 25%);
  /* Assuming darken() is a SCSS function */
}

.radio input[type="radio"]+.radio-label:empty:before {
  margin-right: 0;
}

/* Activity area page CSS Ends */

/* #f4f4f4: #f4f4f4; */
/* $color2: #486898 ; */

.radio {
  position: absolute;
  top: 10px;
  right: 10px;
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
  content: "";
  background: #fff;
  /* Assuming #f4f4f4 is a variable */
  border-radius: 100%;
  border: 1px solid #00000012;
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
  background-color: #486898;
  /* Assuming#486898  is a variable */
  box-shadow: inset 0 0 0 1px #f4f4f4;
  /* Assuming #f4f4f4 is a variable */
}

.radio input[type="radio"]:focus+.radio-label:before {
  outline: none;
  border-color: #486898;
  /* Assuming#486898  is a variable */
}

.radio input[type="radio"]:disabled+.radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  /* Assuming #f4f4f4 is a variable */
  border-color: darken(#f4f4f4, 25%);
  /* Assuming darken() is a SCSS function */
  background: darken(#f4f4f4, 25%);
  /* Assuming darken() is a SCSS function */
}

.radio input[type="radio"]+.radio-label:empty:before {
  margin-right: 0;
}

/* DIY ACTIVITY AREA CSS STARTS */
.range_selector_dropdown_div {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  width: fit-content;
  z-index: 0;
}

.activated_range_Wrapper {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font: normal normal 24px / 16px var(--acumin_bold);
  letter-spacing: -0.48px;
  color: #383636;
  text-transform: capitalize;
  opacity: 1;
  height: 100%;
  width: 230px;
  border-bottom: 4px solid #383636;
  padding: 0 40px;
  top: 0px;
  position: relative;
  transition: all 0.5s ease;
}

.edit_activated_range_Wrapper {
  display: grid;
  justify-content: center;
  align-items: center;
  font: normal normal 24px / 16px var(--acumin_bold);
  letter-spacing: -0.48px;
  color: #383636;
  text-transform: capitalize;
  opacity: 1;
  height: 100%;
  width: 230px;
  border-bottom: 4px solid #383636;
  padding: 0 40px;
  top: 0px;
  position: relative;
  transition: all 0.5s ease;
}

.activated_range_Wrapper img {}

.edit_activated_range_Wrapper img {}

.f-dropdown {
  --max-scroll: 10;
  position: relative;
  z-index: 0;
  height: 100%;
}

.f-dropdown select {
  display: none;
}

.f-dropdown>span {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 509px;
  justify-content: center;
  position: relative;
  background: #fff;
  transition: color 0.2s ease, border-color 0.2s ease;
  height: 100%;
}

.f-dropdown>span>span {
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  padding-right: 0;
}

.f-dropdown>span img {
  width: 30px;
  display: none;
  margin-right: 10px;
}

.f-dropdown>span:before,
.f-dropdown>span:after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  top: 41%;
  right: 167px;
  background: #000;
  transition: all 0.3s ease;
}

.f-dropdown>span:before {
  margin-right: 6px;
  transform: scale(0.96, 0.8) rotate(-45deg);
}

.f-dropdown>span:after {
  transform: scale(0.96, 0.8) rotate(45deg);
}

.f-dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid #486898;
  opacity: 0;
  visibility: hidden;
  width: 509px;
  position: absolute;
  max-height: calc(var(--max-scroll) * 46px);
  top: 88px;
  left: 0;
  z-index: 1;
  right: 0;
  margin: 0 auto;
  box-shadow: 0px 10px 30px #0000000a;
  background: #fff;
  border-radius: 0 0 16px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transition: opacity 0.2s ease, visibility 0.2s ease,
    transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  transform: translate(0, 5px);
}

.f-dropdown ul li {
  padding: 0;
  margin: 0;
}

.f-dropdown ul li a {
  cursor: pointer;
  display: block;
  color: #000;
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.2s ease;
  height: 100%;
  padding: 5px;
  background: #f8f8f8 0% 0% no-repeat padding-box;
  border-radius: 6px;
}

.f-dropdown ul li a img {
  max-width: 150px;
}

.f-dropdown ul li a:hover {}

.f-dropdown ul li.active a {
  background: #f8f8f8 0% 0% no-repeat padding-box;
  border: 1px solid #486898;
  border-radius: 6px;
}

.f-dropdown ul li.active a:before,
.f-dropdown ul li.active a:after {
  --scale: 0.6;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  position: absolute;
  right: 12px;
  top: 50%;
  opacity: 0;
  background: #fff;
  transition: all 0.2s ease;
}

.f-dropdown ul li.active a:before {
  transform: rotate(45deg) scale(var(--scale));
}

.f-dropdown ul li.active a:after {
  transform: rotate(-45deg) scale(var(--scale));
}

.f-dropdown ul li.active a:hover:before,
.f-dropdown ul li.active a:hover:after {
  --scale: 0.9;
  opacity: 1;
}

.f-dropdown ul li:first-child a {}

.f-dropdown ul li:last-child a {
  /* border-radius: 0 0 6px 6px; */
}

.f-dropdown.disabled {
  opacity: 0.7;
}

.f-dropdown.disabled>span {
  cursor: not-allowed;
}

.f-dropdown.filled>span {
  color: #000;
}

.f-dropdown.open {}

.f-dropdown.open>span {
  border-color: #aaa;
  width: 509px;
  justify-content: center;
  border-radius: 16px 16px 0 0;
}

.f-dropdown.open>span:before,
.f-dropdown.open>span:after {
  background: #000;
}

.f-dropdown.open>span:before {
  transform: scale(0.96, 0.8) rotate(-135deg);
}

.f-dropdown.open>span:after {
  transform: scale(0.96, 0.8) rotate(135deg);
}

.f-dropdown.open ul {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -8px);
  transition: opacity 0.3s ease, visibility 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  z-index: 9;
}

.f-dropdown ul li.disabled.active {
  pointer-events: none;
}

/* --------------------------- */
.f-group {
  /* max-width: 250px; */
  margin: 0 auto;
  text-align: left;
  height: 100%;
  display: flex;
  align-items: center;
}

.f-group select {
  width: 100%;
}

.f-control {
  /* font-size: 14px;
  line-height: normal; */
  color: #000;
  display: inline-block;
  background-color: #fff;
  /* border: #ccc 1px solid; */
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  outline: none;
  max-width: 250px;
  font-family: var(--acumin_bold);
}

.f-dropdown ul>li span {
  display: none;
}

.f-dropdown ul {
  gap: 20px;
  display: grid;
  grid-template-columns: auto auto;
  padding: 25px;
}

.overlay {
  position: relative;
}

.overlay:before {
  position: fixed;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000000 0% 0% no-repeat padding-box;
  opacity: 0.2;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9;
}

.diy_nav_wrapper {
  z-index: 0;
  position: relative;
}

.overlay .activated_range_Wrapper {
  border: 0;
  width: 509px;
  box-shadow: 0px 8px 18px #00000033;
  border-radius: 16px 16px 0 0px;
  z-index: 99999999999;
}

.overlay .edit_activated_range_Wrapper {
  border: 0;
  width: 509px;
  box-shadow: 0px 8px 18px #00000033;
  border-radius: 16px 16px 0 0px;
  z-index: 99999999999;
}

.f-dropdown.open>span:before,
.f-dropdown.open>span:after {
  right: 167px;
}

.are_you_sure_modal.show {
  z-index: 999999;
  display: flex !important;
  background: #00000017 0% 0% no-repeat padding-box;
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.are_you_sure_modal .modal-dialog {
  width: 411px;
}

.are_you_sure_modal .modal-body img {
  max-width: 100px;
}

.are_you_sure_modal .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  opacity: 1;
}

.are_you_sure_modal h2 {
  font: normal normal 30px/36px var(--acumin_bold);
  letter-spacing: -1.2px;
  color: #000000;
  opacity: 1;
}

.are_you_sure_modal .modal-body p {
  font: normal normal 14px/20px var(--roboto_reg);
  letter-spacing: -0.28px;
  color: #383636;
  opacity: 0.7;
}

.are_you_sure_modal .modal-content {
  justify-content: center;
  text-align: center;
  box-shadow: 0px 10px 30px #0000000a;
  border-radius: 16px;
  padding: 60px 40px;
}

.are_you_sure_modal .modal-footer {
  justify-content: center;
  padding: 0;
  border: 0;
  width: 100%;
  flex-wrap: nowrap;
}

.are_you_sure_modal .modal-body {
  padding: 0;
}

.are_you_sure_modal .btn.btn-secondary {
  border: 2px solid #486898;
  background: no-repeat;
  color: #486898;
}

.are_you_sure_modal .btn {
  width: 100%;
  height: 45px;
  border-radius: 35px;
  font: normal normal 12px/16px var(--acumin_semibold);
  letter-spacing: 0px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}

.are_you_sure_modal .btn.btn-primary {
  background: #486898;
  border-color: #486898;
}

.are_you_sure_modal {
  z-index: -1;
}

.modal.share-modal-wrap.fade.show {
  z-index: 99999;
}

.share-icn-wrap:hover svg path {
  /* fill: #fff; */
  stroke: #fff;
}

.share-icn-wrap:hover .share-arrow svg path {
  fill: #fff;
  stroke: #fff;
}


.share-icn-wrap:hover .share-icn-link svg path {
  fill: #486898;
  stroke: #fff;
}

.share-icn-wrap:hover .reset-icn-link svg path {
  fill: #fff;
}

.floating_share_icons {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.floating_share_icons-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 0px;
  position: absolute;
  top: 40%;
  left: 100px;
  height: auto;
}

.activity-area-left {
  position: relative;
}

.diy_config_wrapper {
  display: flex;
  justify-content: center;
  /* height: 100%; */
  align-items: center;
  position: relative;
  align-items: center;
}

.diy_config_center_panel {
  display: flex;
}

.diy_config_main_wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.number_of_module_plates p {
  margin: 0;
  font: normal normal 20px / 28px var(--acumin_regular);
  letter-spacing: 0;
  color: #222222;
  opacity: 1;
}

.number_of_module_plates {
  position: absolute;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
}

.configuration_details_wrapper {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
  justify-content: space-between;
  align-items: flex-end;
}

.added_product img {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

.configuration_details_wrapper p {
  margin: 0;
}

.added_configurations {
  display: flex;
  align-items: center;
  height: 72px;
  background: #404040;
  padding-left: 40px;
  transition: all 0.5s ease;
  width: 60%;
  border-right: 1px solid #ffffff1a;
  justify-content: space-between;
}

.added_config_head {
  padding: 0 50px 0 0px;
}

.added_config_head p {
  font: normal normal 16px/20px var(--acumin_semibold);
  letter-spacing: 0;
  color: #ffffff;
  opacity: 1;
  width: 127px;
}

.added_product {
  padding: 21px;
  display: none;
  align-items: center;
  /* width: 200px; */
  width: 100%;
  /* background: rgb(255 255 255 / 10%); */
  gap: 15px;
  /* border-right: 1px solid rgb(255 255 255 / 20%); */
  position: relative;
  height: 80px;
  background: linear-gradient(270deg, #616161 0%, #3B3B3B 100%);

}

.added_product:nth-child(-n + 3) {
  display: flex;
}

.added_configurations.added_config_expanded .added_product {
  display: flex;
  /* height: auto; */
}

.delete_added_products {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background: #ffffff 0% 0% no-repeat padding-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 100px;
}

.delete_added_products img {
  max-width: 7px;
}

.function_div {
  overflow-wrap: anywhere;
}

.function_div span {
  display: flex;
  font: normal normal 12px/12px var(--acumin_medium);
  letter-spacing: 0;
  color: #ffffff;
  /* text-transform: capitalize; */
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.function_div p {
  font: normal normal 14px/1 var(--acumin_bold);
  letter-spacing: 0;
  color: #ffffff;
  text-transform: capitalize;
  opacity: 1;
}

.configuration_btn_Wrapper {
  display: flex;
  align-items: center;
  background: #383636;
  padding: 0 40px;
  height: 72px;
  width: 40%;
  justify-content: space-between;
}

.config_grand_amnt p {
  font: normal normal 24px/30px var(--acumin_bold);
  letter-spacing: -1.04px;
  color: #ffffff;
  text-transform: capitalize;
  opacity: 1;
}

.config-cta-wraper {
  display: flex;
  align-items: center;
}

.config_btn {
  padding: 0 20px;
  display: flex;
  width: auto;
  height: 42px;
  border-radius: 35px;
  font: normal normal 14px / 18px var(--acumin_bold);
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.bordered_white_btn {
  border: 1px solid #fff;
  color: #fff;
  margin-right: 10px;
}

.solid_white_btn {
  background: #fff;
  color: #486898;
}

.solid_white_btn:hover,
.solid_white_btn:focus {
  color: #486898;
}

.config_grand_amnt {
  margin-right: 40px;
}

.bordered_white_btn:hover {
  color: #fff;
}

.cart_product_details_main_Wrapper {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #e2e2e2;
  border-radius: 24px;
  opacity: 1;
  padding: 40px;
  margin-bottom: 30px;
}

.product_qty .product_count {
  padding: 4px 0;
  display: inline-flex;
  text-align: center;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  font: normal normal 16px / 18px var(--acumin_bold);
  letter-spacing: 0;
  color: #ffffff;
  text-transform: capitalize;
  opacity: 1;
  background: transparent;
}

.product_qty .product_count_plus {
  cursor: pointer;
  display: inline-flex;
  vertical-align: top;
  position: relative;
  opacity: 1;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background: #ffffff1a 0% 0% no-repeat padding-box;
  border-radius: 25px;
}

.product_qty .product_count_minus {
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
  opacity: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 25px;
  height: 25px;
  background: #ffffff1a 0% 0% no-repeat padding-box;
  border-radius: 25px;
}

.rest_of_the_prod p.bom_qty {
  font: normal normal 12px / 12px var(--acumin_light);
  letter-spacing: 0;
  color: #ffffff;
  text-transform: capitalize;
  opacity: 1;
  text-decoration: none;
  margin-bottom: 5px;
}

.product_qty {
  text-align: right;
  display: flex;
  justify-content: space-between;
  gap: 0;
  width: -webkit-fill-available;
  height: 45px;
  background: #383636 0% 0% no-repeat padding-box;
  border: 1px solid #ffffff1a;
  align-items: center;
  padding: 0 10px;
}

/*Prevent text selection*/
.product_qty span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.product_qty input {
  border: 0;
  width: min-content;
  height: 100%;
  width: 25%;
}

.product_qty input::-webkit-outer-spin-button,
.product_qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product_qty input:disabled {
  background-color: white;
}

/* Firefox */
.product_qty input[type="number"] {
  -moz-appearance: textfield;
}

.product_qty .product_count_plus:hover svg line,
.product_qty .product_count_minus:hover svg line {
  stroke: #fff;
}

.product_qty .product_count_plus svg,
.product_qty .product_count_minus svg {
  position: relative;
  width: 10px;
}

.product_count_plus:hover:before {
  transform: scale(1);
}

.product_count_minus:before {
  z-index: 0;
  position: absolute;
  content: "";
  border-radius: 100px;
  left: 0;
  right: 0;
  width: 100%;
  background: rgb(255 255 255 / 10%);
  height: 100%;
  transition: all 0.2s ease;
  transform: scale(0);
}

.product_count_plus:before {
  z-index: 0;
  position: absolute;
  content: "";
  border-radius: 100px;
  left: 0;
  right: 0;
  width: 100%;
  background: rgb(255 255 255 / 10%);
  height: 100%;
  transition: all 0.2s ease;
  transform: scale(0);
}

.product_count_minus:hover:before {
  transform: scale(1);
}

.rest_of_the_prod {
  display: grid;
  align-items: center;
  padding: 0 30px;
  grid-template-columns: auto 50%;
  height: 100%;

}



.rest_of_the_prod p {
  font: normal normal 16px / 18px var(--acumin_semibold);
  letter-spacing: 0;
  color: #ffffff;
  text-transform: capitalize;
  opacity: 1;
  text-decoration: underline;
}

.product_qty input[type="number"]:focus-visible {
  outline: none;
}

.config_wrapper_expand {
  position: absolute;
  top: -15px;
  width: 54px;
  height: 25px;
  background: #404040 0% 0% no-repeat padding-box;
  border-radius: 12px 12px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 40px;
  cursor: pointer;
  padding-top: 5px;
}

.config_wrapper_expand a img {
  max-width: 12px;
  rotate: 180deg;
  transition: all 0.5s ease;
  display: none;
}

.config_wrapper_expand a:before {
  content: "";
  position: absolute;
  /* border-right: 3px solid black; */
  height: 10px;
  width: 2px;
  transition: all 0.5s ease-in-out;
  transform: rotate(45deg);
  background: #ffffff;
  right: calc(50% - -3px);
  top: 25%;
}

.config_wrapper_expand a:after {
  content: "";
  position: absolute;
  /* border-left: 3px solid black; */
  height: 10px;
  width: 2px;
  transform: rotate(135deg);
  background: #ffffff;
  right: calc(50% - 3px);
  top: 25%;
  transition: all 0.5s ease-in-out;
}

.config_wrapper_expand.added_config_expanded a:before {
  transform: rotate(135deg);
}

.config_wrapper_expand.added_config_expanded a:after {
  transform: rotate(45deg);
}

.added_products_Wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;

}

.added_products_main_Wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  /* padding-top: 3px; */
  width: 90%;

}

.config_wrapper_expand.added_config_expanded img {
  rotate: 0deg;
}

.added_configurations.added_config_expanded {
  height: 359px;
  padding-top: 30px;
  padding-left: 45px;
}

.added_configurations.added_config_expanded .rest_of_the_prod p {
  opacity: 0;
  width: 0;
}

.added_configurations.added_config_expanded .rest_of_the_prod p.bom_qty {
  opacity: 1;
  width: 100%;
}

.added_configurations.added_config_expanded .rest_of_the_prod {
  align-items: end;
  padding-bottom: 17px;
}

.added_configurations.added_config_expanded .added_products_main_Wrapper {
  display: block;
}

.added_configurations.added_config_expanded .added_products_main_Wrapper .added_config_head {
  /* padding: 0 0 20px; */
}

.added_configurations.added_config_expanded .added_products_main_Wrapper .added_config_head p {
  width: auto;
  padding: 0;
}

.added_configurations.added_config_expanded .added_products_main_Wrapper .added_products_Wrapper {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 190px;
  overflow: scroll;
  overflow-x: hidden;
  padding-top: 20px;
}

.added_configurations.added_config_expanded .added_products_main_Wrapper .added_products_Wrapper .added_product {
  border: none;
}

.added_configurations.added_config_expanded .added_products_main_Wrapper .added_products_Wrapper::-webkit-scrollbar {
  width: 0;
}

/* DIY ACTIVITY AREA CSS ENDS */
#rangeModal,
#create-account-modal,
#signIn-modal,
#forgot-paswd-modal,
#verification-modal,
#change_password_modal,
#create_paswd_modal,
#create-password-otp-modal,
#confirm-password_modal,
#modal_exe_1,
.share-modal-wrap,
#enter_Details_modal {
  z-index: 999999;
}

.platefinishes-card.selected .platefinishes-card-img {
  border: 1px solid #486898;
}

.platefinishes-card.selected .platefinishes-card-content p {
  color: #486898;
}

.desired-card.video-visible:before {
  position: absolute;
  content: "";
  background: #00000020;
  height: 100%;
  width: 100%;
}

.more_prod {
  cursor: pointer;
}

.config_btn:focus {
  color: #fff;
}

.solid_white_btn.config_btn:focus {
  color: #486898;
}

.white-tooltip .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.white-tooltip .bs-tooltip-bottom .tooltip-arrow::before {
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  background-color: #fff;
  top: 2px;
  left: 20%;
  border-top: #00000033 solid 1px;
  border-left: #00000033 solid 1px;
  transform: rotate(45deg);
}

.white-tooltip .tooltip-inner {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 30px #0000001a;
  border: 1px solid #00000033;
  opacity: 1;
  color: #000;
}



.preloader {
  background: #76747438;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 9999999;
  display: none;
}

.loading {
  padding: 0;
  /* background: url(../img/Legrand_loader.gif) no-repeat center center; */
  /* background: url(../images/Legrand_loader.gif) no-repeat center center; */
  background-size: cover;
  border: 6px solid #accaff36;
  border-right-color: #d32f35;
  border-radius: 50%;
  -webkit-animation: rotate 1s infinite linear;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 40px;
  width: 40px;
  z-index: 9;
}

@-webkit-keyframes rotate {

  /* 100% keyframe for  clockwise. 
     use 0% instead for anticlockwise */
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.products-card-img.show-delete {
  border: 1px solid #486898;
}

.platefinishes-card-img .delete-icon img {
  height: auto;
  width: auto;
}

.alert-massege {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-massege-wrap {
  display: flex;
  align-items: center;
  padding: 15px;
  position: absolute;
  top: 8%;
  width: 45%;
  gap: 10px;
  z-index: 1;
  background: #f0e6e2 0% 0% no-repeat padding-box;
  box-shadow: 0px 30px 40px #0000000d;
  /* border: 1px solid #e5464f; */
  opacity: 1;
  z-index: 9;
}

.alert-massege-right p {
  margin: 0;
  text-align: left;
  font: normal normal 18px / 25px var(--acumin_bold);
  letter-spacing: -0.36px;
  color: #222222;
  opacity: 1;
}

.alert-massege-right span {
  text-align: left;
  font: normal normal normal 15px/18px var(--acumin_regular);
  letter-spacing: -0.3px;
  color: #222222;
  opacity: 0.5;
  display: block;
}

.closeAlert {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

.alert-massege-wrap {
  display: none;
  animation: fadeIn 0.8s ease-in both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.common-alert-massege {
  display: flex;
  align-items: center;
  justify-content: center;
}

.common-alert-massege-wrap {
  display: flex;
  align-items: center;
  padding: 15px;
  position: absolute;
  top: 15%;
  width: 25%;
  gap: 10px;
  z-index: 1;
  background: #f0e6e2 0% 0% no-repeat padding-box;
  box-shadow: 0px 30px 40px #0000000d;
  /* border: 1px solid #e5464f; */
  opacity: 1;
  z-index: 9;
}

.common-alert-massege-right p {
  margin: 0;
  text-align: left;
  font: normal normal 18px / 25px var(--acumin_bold);
  letter-spacing: -0.36px;
  color: #222222;
  opacity: 1;
}

.common-alert-massege-right span {
  text-align: left;
  font: normal normal normal 15px/18px var(--acumin_regular);
  letter-spacing: -0.3px;
  color: #222222;
  opacity: 0.5;
  display: block;
}

.closeAlert {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

.common-alert-massege-wrap {
  /* display: none; */
  animation: fadeIn 0.8s ease-in both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.diy_component {
  position: relative;
  justify-content: center;
  display: flex;
}

.diy_component .hover_diy_component {
  display: none;
}

.diy_component.switchs .hover_diy_component {
  display: flex;
  gap: 2px;
}

.diy_component:hover .hover_diy_component {
  opacity: 1;
  transition: all 0.5s ease;
}

.hover_diy_component {
  opacity: 0;
  position: absolute;
  top: -32px;
  transition: all 0.5s ease;
}

.diy_component_icn {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #486898;
  position: relative;
}

.diy_component_icn:hover {
  box-shadow: 0px 0px 0px 2px #48689840;
}

.diy_component_icn svg {
  width: 16px;
  height: auto;
}

.diy_component_icn img {
  width: 13px;
  height: auto;
}

.pre-congif-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 90px;
  height: calc(100vh - 180px);
}

.config-share-icon {
  position: absolute;
  left: 10%;
  top: 45%;
}

.pre-config-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.pre-config-name p {
  margin: 0;
  font: normal normal 28px / 28px var(--acumin_bold);
  letter-spacing: -0.56px;
  color: #222222;
  opacity: 1;
  margin-bottom: 10px;
}

.pre-config-name span {
  margin: 0;
  font: normal normal 28px / 28px var(--acumin_bold);
  letter-spacing: -0.56px;
  color: #222222;
  opacity: 1;
}

.pre-config-container {
  width: 30%;
}

.diy_config_left_panel img {
  width: 100px;
}

.diy_config_right_panel img {
  width: 100px;
}

.diy_component img {
  width: 100%;
  max-width: 90px;
  /* height: 145px; */
}

.swiper.module-Swiper {
  height: 440px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.swiper.module-Swiper .swiper-wrapper {
  cursor: pointer;
}

.module-Swiper .swiper-slide.swiper-slide-active {
  scale: 1;
  opacity: 1;
}

.module-Swiper .swiper-slide {
  scale: 0.9;
  opacity: 0.6;
  transition: all 0.7s ease;
}

.module-Swiper .swiper-button-next:after,
.module-Swiper .swiper-rtl .swiper-button-prev:after {
  content: "";
  display: none;
}

.module-Swiper .swiper-button-prev:after,
.module-Swiper .swiper-rtl .swiper-button-next:after {
  content: "prev";
  display: none;
}

/* .swiper-button-next:after {
  background: url(./assets/images/arrow-up-circle.svg) no-repeat;
  content: "";
  height: 120px;
  width: 120px;
  position: absolute;
} */

.module-Swiper .swiper-button-next,
.module-Swiper .swiper-button-prev {
  border: 1px solid #000;
  border-radius: 100%;
  justify-content: center;
  width: 55px;
  height: 55px;
  position: absolute;
  right: 10%;
  left: auto;
  top: 60%;
}

.module-Swiper .swiper-button-next img,
.module-Swiper .swiper-button-prev img {
  width: 25px;
  height: 25px;
}

.module-Swiper .swiper-button-next {
  top: 50%;
}

.module-Swiper .swiper-button-prev {
  top: 60%;
}

.module-Swiper .swiper-pagination {
  position: relative;
  transform: none;
  right: 0;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.module-Swiper .module-slider-tab .swiper-pagination-bullet {
  height: 45px;
  width: 145px;
  border: 1px solid #e9e9e9;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0 20px;
  gap: 10px;
  background: #ffffff 0% 0% no-repeat padding-box;
  opacity: 1;
}

.module-Swiper .module-slider-tab .swiper-pagination-bullet-active {
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px #48689840;
  transform: scale(1.1);
}

.imgsrc img {
  width: 20px;
}

.module-slider-tab .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.module-slider-tab .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 0 10px !important;
}

.module-Swiper .swiper-pagination-bullet .stepTitle-text {
  text-align: left;
  font: normal normal bold 16px / 16px var(--acumin_regular);
  letter-spacing: -0.32px;
  color: #383636;
  text-transform: capitalize;
  opacity: 0.5;
}

.module-Swiper .swiper-pagination-bullet-active .stepTitle-text {
  color: #486898;
  opacity: 1;
}

.module-slider-tab {
  position: absolute;
  top: 50%;
  right: 0;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  transform: translateY(-50%);
  z-index: 1;
}

.navigatetitle {
  text-align: center;
  font: normal normal bold 14px/16px var(--acumin_regular);
  letter-spacing: -0.28px;
  color: #383636;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 20px;
}

.backd-CTA-wrap {
  position: absolute;
  left: 45%;
  top: auto;
  bottom: 135px;
}

.backd-CTA {
  height: 55px;
  width: max-content;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #486898;
  border: 2px solid transparent;
  border-radius: 35px;
  opacity: 1;
  text-align: center;
  font: normal normal 16px / 16px var(--acumin_bold);
  letter-spacing: 0;
  color: #fff;
  text-transform: capitalize;
  /* opacity: 0.5; */
  position: absolute;
  z-index: 9;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 2px;

}

.backd-CTA img {
  width: 20px;
  margin-left: 10px;
}

.inner_plate_wrapper {
  display: none;
  transition: all 0.5s ease-in-out;
}

.main_plate_wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.module_24 {
  position: relative;
  width: 450px;
  height: 483px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.mod-row-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 36px 42px;
  /* z-index: 3; */
}

.mod-row {
  position: relative;
  width: 100%;
  height: 90px;
  top: 0px;
  /* overflow: hidden;
  border-radius: 4px; */
}

.hov_row {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #e3ebf3; */
  border: 2px dashed #486898ad;
  font: normal normal 12px / 16px var(--acumin_regular);
  color: #000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  border-radius: 4px;
}

.mod-row:hover .hov_row {
  opacity: 1;
  visibility: visible;
}

.row-inner-plate {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* border: 1px solid #b5b5b5; */
  border-radius: 4px;
}

.row-inner-plate img {
  /* width: 41px; */
  width: 100%;
  height: 80px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.number_of_module_plates.num_of_24_mod {
  bottom: 8%;
}

/* module dropdown css starts */
.module-dropdown-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  top: 25px;
  left: 0;
  /* z-index: 2; */
}

.module-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 40px;
  opacity: 1;
  width: 235px;
  height: 60px;
  padding: 0 8px;
  z-index: 2;
  cursor: pointer;
}

.module-dropdown.clicked {
  background: #f8f8f8 0% 0% no-repeat padding-box;
  /* border: 1px solid #f8f8f8; */
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px rgba(72, 104, 152, 0.25);
}

.module-dropdown:hover {
  background: #f8f8f8 0% 0% no-repeat padding-box;
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px rgba(72, 104, 152, 0.25);
}

.module-dropdown-conent p {
  margin: 0;
  text-align: left;
  font: normal normal medium 14px / 16px var(--acumin_medium);
  letter-spacing: -0.28px;
  color: #383636;
  text-transform: capitalize;
  opacity: 0.5;
  margin-bottom: 0;
}

.module-dropdown-conent h5 {
  text-align: left;
  font: normal normal 16px/20px var(--acumin_semibold);
  letter-spacing: -0.4px;
  color: #383636;
  text-transform: capitalize;
  opacity: 1;
  margin: 0;
}

.module-dropdown-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8f8f8 0% 0% no-repeat padding-box;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.module-dropdown:hover .module-dropdown-img {
  background: #fff 0% 0% no-repeat padding-box;
}

.clicked .module-dropdown-img {
  background: #fff 0% 0% no-repeat padding-box;
}



.module-dropdown-img img {
  width: 18px;
  height: 18px;
}

.module-dropdown span::before {
  content: "";
  position: absolute;
  /* border-right: 3px solid black; */
  height: 10px;
  width: 2px;
  transition: all 0.5s ease-in-out;
  transform: rotate(-45deg);
  background: #383636;
  right: 32px;
  top: 45%;
}

.module-dropdown span:after {
  content: "";
  position: absolute;
  /* border-left: 3px solid black; */
  height: 10px;
  width: 2px;
  transform: rotate(45deg);
  background: #383636;
  right: 26px;
  top: 45%;
  transition: all 0.5s ease-in-out;
}

.module-dropdown.clicked span::before {
  transform: rotate(-135deg);
}

.module-dropdown.clicked span:after {
  transform: rotate(135deg);
}

.module-dropdown_list_wrapper {
  /* transition: all 0.5s ease;
  transform: translateY(-20px);
  width: 90%;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 20px 50px #0000000a;
  border: 1px solid #e9e9e9;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  transform: translateY(-20px);
  width: auto;
  min-width: 200px;
  max-width: 90%;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 20px 50px #0000000a;
  border: 1px solid #e9e9e9;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.module-dropdown_list_wrapper.open {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.module-dropdown_list {
  /* display: flex;
  align-items: center;
  justify-content: flex-start; */
  gap: 20px;
  width: 100%;
  /* overflow-x: auto; */
  /* padding-bottom: 10px; */
  cursor: grab;
  display: grid;
  grid-template-columns: repeat(4, 1fr);

}

.module-dropdown_list::-webkit-scrollbar {
  height: 2px;
}

.module-drop-card.deactive {
  background: #f8f8f8 0% 0% no-repeat padding-box;
  border: 1px solid #f8f8f8;
  pointer-events: none;
}

.module-drop-card-img {
  /* padding: 30px 35px;
  background: #fff;
  border: 1px solid rgba(236, 236, 236, 1); */
}

.module-drop-card {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #486898;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px 30px;
  opacity: 1;
}

.module-drop-card-img img {
  width: 65px;
  height: 55px;
  object-fit: contain;
  /* opacity: 60%; */
}

.module-drop-card-content p {
  text-align: center;
  font: normal normal normal 12px/16px var(--acumin_regular);
  letter-spacing: -0.24px;
  color: #383636;
  opacity: 0.5;
  margin: 0;
  margin-bottom: 5px;
}

.module-drop-card-content h5 {
  text-align: center;
  font: normal normal bold 14px/16px var(--acumin_bold);
  letter-spacing: -0.32px;
  color: #383636;
  text-transform: capitalize;
  opacity: 1;
  margin: 0;
}

.backd-CTA.back-CTA-Mob {
  display: none !important;
  border: 1px solid #486898;
  color: #486898;
  opacity: 1;
  position: relative;
}

.floating_share_icons-wrap .back-CTA-Mob {
  display: none;
}

/* module dropdown css Ends */

.main-wrapper {
  margin-top: 90px;
  /* height: calc(100vh - 90px); */
}

/* BOQ cart page css starts */

.breadcrumb1 a {
  text-align: center;
  letter-spacing: 0px;
  color: rgb(0 0 0 / 50%);
  text-transform: uppercase;
  opacity: 1;
  font-family: var(--acumin_bold);
  font-size: 14px;
  line-height: 1.2;
  width: 100%;
}

.breadcrumb1 {
  text-align: center;
  letter-spacing: 0px;
  color: rgb(0 0 0 / 50%);
  text-transform: uppercase;
  opacity: 1;
  font-family: var(--acumin_bold);
  font-size: 14px;
  line-height: 1.2;
  width: 100%;
}

.breadcrumb1 span {
  margin: 0 2px;
}

.breadcrumb1 .page {
  color: #000;
}

.temp-4 h2 {
  text-align: center;
  letter-spacing: -4.5px;
  color: #000000;
  text-transform: capitalize;
  opacity: 1;
  font-family: var(--acumin_bold);
  font-size: 90px;
  line-height: 1.2;
  margin-top: 69px;
}

.bg-gray {
  background-color: #f3f3f3;
}

.boq-banner .container {
  max-width: 100%;
  padding-top: 100px;
}

.boq-banner .breadcrumb1 {
  text-align: left;
}

.boq-banner .temp-4 h2 {
  text-align: left;
}

.boq-banner .temp-4-inner {
  padding: 0 56px;
}

.boq-banner .temp-4 {
  padding-bottom: 80px;
}

.product-details-wrapper {
  display: grid;
  grid-template-columns: 60% 34%;
  gap: 100px;
  padding: 0 80px 100px;
}

.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px 0;
}

.product-header-left {
  width: 60%;
}

.product-header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 40%;
}

.product-header p {
  text-align: left;
  font: normal normal bold 16px / 22px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.product-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.counter {
  width: 122px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #486898;
  border-radius: 15px;
  opacity: 1;
}

.counter input {
  width: 40px;
  border: 0;
  text-align: center;
  appearance: none;
  background: none;
  border-left: 1px solid #4b4d5333;
  border-right: 1px solid #4b4d5333;
  text-align: center;
  font: normal normal 600 16px / 30px var(--acumin_semibold);
  letter-spacing: -0.64px;
  color: #1b2d3a;
  text-transform: capitalize;
  opacity: 1;
}

.counter span {
  display: block;
  font-size: 20px;
  padding: 0 10px;
  cursor: pointer;
  color: #1b2d3a;
  user-select: none;
}

.product-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px 40px 34px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dadada;
  opacity: 1;
}

.product-card-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 50px;
  width: 20%;
}

/* .product-card-content {
  width: 60%;
} */

.product-card-right {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 80%;
}

.product-price {
  text-align: right;
  font: normal normal bold 18px / 26px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.product-totalPrice {
  text-align: right;
  font: normal normal bold 18px / 26px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.product-title {
  text-align: left;
  font: normal normal bold 24px / 34px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.product-SKU {
  text-align: left;
  font: normal normal 16px / 24px var(--acumin_medium);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin-bottom: 15px;
}

.product-SKU span {
  font-family: var(--acumin_bold);
}

.product-subTitle {
  text-align: left;
  font: normal normal normal 14px / 20px var(--acumin_regular);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin: 0px;
}

.order-summary-wrapper {
  padding: 50px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dadada;
  opacity: 1;
  margin-top: 38px;
}

.order-summary-title h3 {
  text-align: left;
  font: normal normal bold 24px / 34px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.summary-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.summary-list-item p {
  text-align: left;
  font: normal normal 600 18px / 26px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

.summary-list-item span {
  text-align: right;
  font: normal normal bold 18px/26px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

.summary-list-item .subItem {
  opacity: 0.6;
}

.order-summary-title {
  margin-bottom: 20px;
}

.summary-list {
  border-bottom: 1px solid #dadada;
  margin: 30px 0;
  padding-bottom: 10px;
}

.subTotal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  font: normal normal bold 24px/34px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

.download-CTA {
  margin-top: 30px;
}

.download-boq-btn {
  width: 100%;
  height: 70px;
  border: 0;
  background: #486898 0% 0% no-repeat padding-box;
  border-radius: 35px;
  color: #ffffff;
  text-align: center;
  font: normal normal bold 14px / 20px var(--acumin_bold);
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
}

.boq-wrapper {
  height: 42px;
  width: 42px;
  margin-right: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #383636;
}

.boq-wrapper img {
  width: 15px;
  filter: invert(1);
}

.more-details-wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
}

.viewmore-cta {
  background: none;
  border: none;
  color: #486898;
  text-decoration: underline;
}

.more-details-list {
  display: none;
  padding-left: 15px;
  padding: 30px;
  background: #f8f8f8;
  padding-left: 50px;
  margin-bottom: 20px;
}

.more-details-list li {
  list-style: auto;
  font-family: var(--acumin_bold);
  margin-bottom: 10px;
}

.more-details-listitem h5 {
  text-align: left;
  font: normal normal 16px / 20px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #222222;
  opacity: 1;
  margin: 0;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.more-details-listitem p {
  text-align: left;
  font: normal normal normal 14px / 18px var(--acumin_regular);
  letter-spacing: 0px;
  color: #787777;
  opacity: 1;
  margin: 0px;
}

.product-card-content-wrap {
  display: grid;
  width: 100%;
  grid-template-columns: 45% 15% 16% 16%;
  gap: 20px;
}

.moredetails {
  display: grid;
  grid-template-columns: 51% 15% 10% 15%;
  gap: 20px;
  text-align: center;
}

.moredetails .counter {
  opacity: 0;
}

.moredetails .product-Price {
  text-align: center;
  font: normal normal bold 16px / 20px var(--acumin_bold);
  letter-spacing: 0px;
  color: #787777;
  opacity: 1;
}

.more-details-header {
  display: grid;
  grid-template-columns: 51% 15% 10% 15%;
  gap: 20px;
  text-align: center;
}

.more-details-header p {
  text-align: center;
  font: normal normal 14px / 20px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #222222;
  opacity: 1;
}

.moredetails .product-totalprice {
  text-align: center;
  font: normal normal bold 16px / 20px var(--acumin_bold);
  letter-spacing: 0px;
  color: #787777;
  opacity: 1;
}

.moredetails .quantity {
  text-align: center;
  font: normal normal bold 16px / 20px var(--acumin_bold);
  letter-spacing: 0px;
  color: #787777;
  opacity: 1;
}

.product-price-mob {
  display: none;
}

/* BOQ cart page css Ends */

/*My Orders page css starts */

.product-details-wrapper.my-orders {
  display: grid;
  grid-template-columns: 24% 70%;
  gap: 100px;
  padding: 0 80px 100px;
}

/* .my-orders .product-card-content {
  width: 50%;
} */

.my-orders .product-card-content-wrap {
  display: grid;
  width: 100%;
  grid-template-columns: 43% 20% 25%;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
}

.my-orders .product-card-right {
  width: 80%;
}

.myOrder-CTA {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.myOrder-CTA a {
  width: 185px;
  height: 45px;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}

.outline-button {
  border: 1px solid #222222;
  color: #222222;
  border-radius: 20px;
  font-family: var(--acumin_semibold);
  font-weight: 600;
  cursor: pointer;
}

.solid-button {
  background: var(--primary);
  color: #fff;
  border-radius: 20px;
  border: 1px solid var(--primary);
  cursor: pointer;
}

.solid-button:hover {
  color: #fff;
}

.order-status {
  text-align: left;
  /* font-size: 16px;
  line-height: 24px;
  font-weight: var(--acumin_light); */
  font: normal normal 16px / 24px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin: 0;
  margin-top: 0px;
}

.order-statusdetail {
  text-align: left;
  font: normal normal normal 14px / 20px var(--acumin_regular);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin: 0px;
}

.delivery-Adress {
  text-align: left;
  font: normal normal 16px / 24px var(--acumin_semibold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin: 0;
  margin-top: 0px;
  margin-right: 50%;
}

.delivery-adressdetail {
  text-align: left;
  font: normal normal normal 14px / 20px var(--acumin_regular);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin: 0px;
}

.delivery-adressdetail p {
  margin: 0;
}

.profile-details-wrap {
  padding: 50px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dadada;
  opacity: 1;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.profile-logo {
  text-align: center;
}

.profile-logo img {
  width: 100px;
}

.profile-details {
  margin-top: 50px;
}

.my-profile-header h2 {
  text-align: left;
  letter-spacing: -2.5px;
  color: #000000;
  text-transform: capitalize;
  opacity: 1;
  font-family: var(--acumin_bold);
  font-size: 60px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 30px;
}

.form-label {
  text-align: left;
  font: normal normal 14px / 24px var(--acumin_medium);
  letter-spacing: 0px;
  color: #00000073;
  opacity: 1;
  margin-bottom: 5px;
}

.form-title {
  text-align: left;
  font: normal normal 16px / 24px var(--acumin_bold);
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin-bottom: 15px;
}

.profile-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -40px;
  z-index: -1;
}

.editable {
  display: inline-block;
  cursor: text;
}

.pencil-icon {
  cursor: pointer;
  margin-left: 20px;
  color: #007bff;
}

.product-details-mobile-wrap {
  padding: 40px;
  display: none;
}

.accordion-button.orders-button {
  box-shadow: unset;
  background-color: unset;
  text-align: center;
  letter-spacing: -2.5px;
  color: #000000;
  text-transform: capitalize;
  opacity: 1;
  font-family: var(--acumin_bold);
  font-size: 40px;
  line-height: 1.2;
  margin-top: 0;
  justify-content: space-between;
}

.accordion-button.orders-button::after {
  margin-left: 35px;
}

.accordion.orders-wrap {
  border-radius: 50px;
}

.accordion-item.order-item {
  color: unset;
  background-color: unset;
  border: none;
}

.my-orders .product-totalPrice {
  text-align: left;
}

.myorder-dropdown {
  position: relative;
}

.myorder-dropdown-CTA {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #486898;
  background: #486898;
  height: 48px;
  width: 190px;
  border-radius: 35px;
  padding: 0 20px;
  cursor: pointer;
  color: #fff;
}

.myorder-dropdown-list-wrap {
  position: absolute;
  width: 140px;
  transition: all 0.5s ease;
  transform: translateY(-20px);
  background: aliceblue;
  border-radius: 10px;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
}

.myorder-dropdown-list-wrap {
  background: #fff;
  border: 1px solid #f1f1f1;
  border: -ra;
  border-radius: 10px;
  width: 100%;
  padding: 20px;
  z-index: 1;
}

.myorder-dropdown-list-item a {
  font-family: var(--acumin_regular);
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -0.04em;
  text-align: left;
  margin-bottom: 10px;
  cursor: pointer;
}

.myorder-dropdown.expanded .myorder-dropdown-list-wrap {
  transform: translateY(10px);
  opacity: 1;
  visibility: visible;
}

.myorder-dropdown-title {
  margin: 0;
  font-family: var(--acumin_semibold);
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.04em;
  text-align: left;
  transition: all 0.5s ease-in-out;
}

.my-orders .arrow:after,
.my-orders .arrow::before {
  background: #fff;
}

/*My Orders page css ENDS */

img.width82 {
  width: 82px !important;
}

img.width125 {
  width: 125px !important;
}

img.width110 {
  width: 110px !important;
}

/* plate adjustemt css */

.mod_24_img {
  position: relative;
}

/* 
.plate-img {
  width: auto;
} */

.frame_16mod_2x8 .mod-row-wrap {
  padding: 93px 122px;
  gap: 25px 32px;
}

.frame_16mod_2x8 .mod-row {
  height: 50px;
}

.frame_16mod_2x8 .row-inner-plate img {
  width: 28px;
  height: 52px;
}

/* frame_12mod_2x6 css */

.frame_12mod_2x6 .row-inner-plate img {
  width: 41px;
  height: 88px;
}

.frame_12mod_2x6 .mod-row-wrap {
  padding: 124px 102px;
  gap: 30px 42px;
}

/* .frame_18mod_3X6 CSS  */

.frame_18mod_3X6 .mod-row-wrap {
  padding: 80px 110px;
}

/* .frame_8mod_2x4  CSS */

.frame_8mod_2x4 .mod-row-wrap {
  padding: 109px 110px 99px;
  gap: 50px 42px;
}

.frame_8mod_2x4 .mod-row {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0px;
}

.frame_8mod_2x4 .row-inner-plate img {
  width: 60px;
  height: 115px;
}

/* .frame_8mod_1x8  CSS */

.frame_8mod_1x8 .mod-row-wrap {
  padding: 50px 75px;
}

.frame_8mod_1x8 .row-inner-plate {
  border: none;
}

/* .frame_6mod_1x6  CSS */

.frame_6mod_1x6 .mod-row-wrap {
  padding: 55px 105px;
}

.frame_6mod_1x6 .row-inner-plate {
  border: none;
}

.frame_4mod_1x4 .mod-row-wrap {
  padding: 82px 105px;
}

.frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.frame_4mod_1x4 .row-inner-plate img {
  width: 60px;
  height: 100%;
}

.frame_3mod_1x3 .mod-row-wrap {
  padding: 95px 120px;
}

.frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.frame_2mod_1x2 .mod-row-wrap {
  padding: 130px 130px;
}

.frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.frame_1mod_1x1 .mod-row-wrap {
  padding: 130px 175px;
}

.frame_1mod_1x1 .mod-row {
  width: 100%;
  height: 100%;
}

.frame_1mod_1x1 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.color-box-wrap1 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.modal.leaflet-modal.DIY_enquire_form .textareaSec:focus-visible {
  outline: none;
}

.mod-col-wrap {
  flex-direction: row;
}


.allzy_frame_1mod_1x1 .blankframe1 .mod-row-wrap {
  padding: 125px 160px 105px 170px;
}

.allzy_frame_1mod_1x1 .mod-row-wrap {
  padding: 110px 160px 105px 170px;
}

.allzy_frame_1mod_1x1 .mod-row {
  width: 100%;
  height: 100%;
}

.allzy_frame_1mod_1x1 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_1mod_1x1 .mod-row-wrap {
  padding: 99px 160px;
}

.lyncus_frame_1mod_1x1 .blankframe1 .mod-row-wrap {
  padding: 115px 170px;
}

.lyncus_frame_1mod_1x1 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_1mod_1x1 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.mylinc_frame_1mod_1x1 .blankframe1 .switch-select .mod-row-wrap {
  padding: 110px 160px;
}

.mylinc_frame_1mod_1x1 .mod-row-wrap {
  padding: 120px 155px;
}

.mylinc_frame_1mod_1x1 .blankframe1 .mod-row-wrap {
  padding: 115px 170px;
}

.mylinc_frame_1mod_1x1 .mod-row {
  width: 100%;
  height: 100%;
}

.mylinc_frame_1mod_1x1 .row-inner-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myrius_frame_1mod_1x1 .mod-row-wrap {
  padding: 100px 160px;
}

.myrius_frame_1mod_1x1 .blankframe1 .mod-row-wrap {
  padding: 105px 165px;
}

.myrius_frame_1mod_1x1 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_1mod_1x1 .row-inner-plate img {
  width: 100%;
  height: 100%;
}


.allzy_frame_2mod_1x2 .mod-row-wrap {
  padding: 108px 108px 105px 110px;
}

.allzy_frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.allzy_frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_2mod_1x2 .mod-row-wrap {
  padding: 102px 102px;
}

.lyncus_frame_2mod_1x2 .blankframe2 .mod-row-wrap {
  padding: 95px 95px;
}

.lyncus_frame_2mod_1x2 .blankframe2 .switch-select .mod-row-wrap {
  padding: 95px 95px;
}

.lyncus_frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.mylinc_frame_2mod_1x2 .mod-row-wrap {
  padding: 120px 95px;
}

.mylinc_frame_2mod_1x2 .blankframe2 .mod-row-wrap {
  padding: 95px 95px;
}

.mylinc_frame_2mod_1x2 .blankframe2 .switch-select .mod-row-wrap {
  padding: 100px 100px;
}

.mylinc_frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.mylinc_frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myrius_frame_2mod_1x2 .mod-row-wrap {
  padding: 102px 105px;
}

.myrius_frame_2mod_1x2 .blankframe2 .mod-row-wrap {
  padding: 105px 105px;
}

.myrius_frame_2mod_1x2 .blankframe2 .switch-select .mod-row-wrap {
  padding: 105px 105px;
}

.myrius_frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.arteor_frame_2mod_1x2 .mod-row-wrap {
  padding: 104px 105px;
}

.arteor_frame_2mod_1x2 .blankframe2 .mod-row-wrap {
  padding: 125px 163px;
}

.arteor_frame_2mod_1x2 .blankframe2 .switch-select .mod-row-wrap {
  padding: 140px 140px;
}

.arteor_frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.arteor_frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.living-now_frame_2mod_1x2 .mod-row-wrap {
  padding: 0px 124px;
}

.living-now_frame_2mod_1x2 .blankframe2 .mod-row-wrap {
  padding: 125px 163px;
}

.living-now_frame_2mod_1x2 .mod-row {
  width: 100%;
  height: 100%;
}

.living-now_frame_2mod_1x2 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.arteor_frame_3mod_1x3 .mod-row-wrap {
  padding: 66px 125px;
}

.arteor_frame_3mod_1x3 .blankframe3 .mod-row-wrap {
  padding: 125px 130px;
}

.arteor_frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.arteor_frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.living-now_frame_3mod_1x3 .mod-row-wrap {
  padding: 0px 101px;
}

.living-now_frame_3mod_1x3 .blankframe3 .mod-row-wrap {
  padding: 125px 132px;
}

.living-now_frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.living-now_frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_3mod_1x3 .mod-row-wrap {
  padding: 77px 95px 72px 99px;
}

.lyncus_frame_3mod_1x3 .blankframe3 .mod-row-wrap {
  padding: 72px 95px;
}

.lyncus_frame_3mod_1x3 .blankframe3 .switch-select .mod-row-wrap {
  padding: 73px 93px 72px 95px;
}

.lyncus_frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.mylinc_frame_3mod_1x3 .module_24 {
  width: 580px;
  /* height: 483px; */
}

.mylinc_frame_3mod_1x3 .mod-row-wrap {
  padding: 110px 115px;
}

.mylinc_frame_3mod_1x3 .blankframe3 .mod-row-wrap {
  padding: 90px 115px;
}

.mylinc_frame_3mod_1x3 .blankframe3 .switch-select .mod-row-wrap {
  padding: 110px 115px;
}

.mylinc_frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.mylinc_frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myrius_frame_3mod_1x3 .mod-row-wrap {
  padding: 72px 95px;
}

.myrius_frame_3mod_1x3 .blankframe3 .mod-row-wrap {
  padding: 75px 97px;
}

.myrius_frame_3mod_1x3 .blankframe3 .switch-select .mod-row-wrap {
  padding: 75px 95px;
}

.myrius_frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_3mod_1x3 .blankframe3 .mod-row-wrap {
  padding: 80px 90px 80px 90px;
}

.allzy_frame_3mod_1x3 .mod-row-wrap {
  padding: 78px 95px 75px 100px;
}

.allzy_frame_3mod_1x3 .mod-row {
  width: 100%;
  height: 100%;
}

.allzy_frame_3mod_1x3 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_4mod_1x4 .mod-row-wrap {
  padding: 60px 85px;
}

.allzy_frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.allzy_frame_4mod_1x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.living_now_frame_4mod_1x4 .mod-row-wrap {
  padding: 0px 85px;
}

.living_now_frame_4mod_1x4 .blankframe4 .mod-row-wrap {
  padding: 125px 100px;
}

.living_now_frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.living_now_frame_4mod_1x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_4mod_1x4 .mod-row-wrap {
  padding: 60px 80px;
}

.lyncus_frame_4mod_1x4 .blankframe4 .mod-row-wrap {
  padding: 60px 85px;
}

.lyncus_frame_4mod_1x4 .blankframe4 .switch-select .mod-row-wrap {
  padding: 60px 80px;
}


.lyncus_frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_4mod_1x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.mylinc_frame_4mod_1x4 .module_24 {
  width: 580px;
  height: 483px;
}

.mylinc_frame_4mod_1x4 .mod-row-wrap {
  padding: 90px 90px;
}

.mylinc_frame_4mod_1x4 .blankframe4 .mod-row-wrap {
  padding: 75px 100px;
}

.mylinc_frame_4mod_1x4 .blankframe4 .switch-select .mod-row-wrap {
  padding: 80px 85px;
}

.mylinc_frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.mylinc_frame_4mod_1x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myrius_frame_4mod_1x4 .mod-row-wrap {
  padding: 60px 83px;
}

.myrius_frame_4mod_1x4 .blankframe4 .mod-row-wrap {
  padding: 60px 80px;
}

.myrius_frame_4mod_1x4 .blankframe4 .switch-select .mod-row-wrap {
  padding: 65px 80px;
}

.myrius_frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_4mod_1x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.arteor_frame_4mod_1x4 .mod-row-wrap {
  padding: 66px 94px;
}

.arteor_frame_4mod_1x4 .blankframe4 .mod-row-wrap {
  padding: 125px 100px;
}

.arteor_frame_4mod_1x4 .blankframe4 .switch-select .mod-row-wrap {
  padding: 179px 100px;
}

.arteor_frame_4mod_1x4 .mod-row {
  width: 100%;
  height: 100%;
}

.arteor_frame_4mod_1x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.living_now_frame_6mod_1x6 .blankframe6 .mod-row-wrap {
  padding: 157px 89px;
}

.living_now_frame_6mod_1x6 .mod-row-wrap {
  padding: 0px 67px;
}

.living_now_frame_6mod_1x6 .mod-row {
  width: 100%;
  height: 100%;
}

.living_now_frame_6mod_1x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.myrius_frame_6mod_1x6 .module_24 {
  width: 580px;
  height: auto;
}

.myrius_frame_6mod_1x6 .mod-row-wrap {
  padding: 50px 105px 50px 105px;
}

.myrius_frame_6mod_1x6 .blankframe6 .mod-row-wrap {
  padding: 45px 85px;
}

.myrius_frame_6mod_1x6 .blankframe6 .switch-select .mod-row-wrap {
  padding: 45px 85px;
}

.myrius_frame_6mod_1x6 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_6mod_1x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_6mod_1x6 .module_24 {
  width: 600px;
  height: 483px;
}

.allzy_frame_6mod_1x6 .blankframe6 .mod-row-wrap {
  padding: 62px 122px;
}

.allzy_frame_6mod_1x6 .mod-row-wrap {
  padding: 54px 122px;
}

.allzy_frame_6mod_1x6 .mod-row {
  width: 100%;
  height: 100%;
  /* border-radius: 4px;
  overflow: hidden; */
}

.allzy_frame_6mod_1x6 .row-inner-plate img {
  width: 100%;
  height: 100%;

}

.lyncus_frame_6mod_1x6 .module_24 {
  width: 620px;
}

.lyncus_frame_6mod_1x6 .mod-row-wrap {
  padding: 55px 120px 55px 115px;
}

.lyncus_frame_6mod_1x6 .blankframe6 .mod-row-wrap {
  padding: 45px 90px;
}

.lyncus_frame_6mod_1x6 .blankframe6 .switch-select .mod-row-wrap {
  padding: 45px 90px;
}

.lyncus_frame_6mod_1x6 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_6mod_1x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.mylinc_frame_6mod_1x6 .mod-row-wrap {
  padding: 45px 58px;
}

.mylinc_frame_6mod_1x6 .blankframe6 .mod-row-wrap {
  padding: 145px 67px;
}

.mylinc_frame_6mod_1x6 .mod-row {
  width: 100%;
  height: 100%;
}

.mylinc_frame_6mod_1x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}


.allzy_frame_8mod_1x8 .module_24 {
  width: 600px;
  height: 483px;
}

.allzy_frame_8mod_1x8 .mod-row-wrap {
  padding: 52px 88px 50px 90px;
}

.allzy_frame_8mod_1x8 .mod-row {
  width: 100%;
  height: 100%;
}

.allzy_frame_8mod_1x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_8mod_1x8 .module_24 {
  width: 620px;
}

.lyncus_frame_8mod_1x8 .mod-row-wrap {
  padding: 45px 75px;
}

.lyncus_frame_8mod_1x8 .blankframe8 .mod-row-wrap {
  padding: 55px 85px;
}

.lyncus_frame_8mod_1x8 .blankframe8 .switch-select .mod-row-wrap {
  padding: 55px 70px;
}

.lyncus_frame_8mod_1x8 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_8mod_1x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.myrius_frame_8mod_1x8 .module_24 {
  width: 650px;
  height: 490px;
}

.myrius_frame_8mod_1x8 .mod-row-wrap {
  padding: 52px 70px 52px 70px;
}

.myrius_frame_8mod_1x8 .blankframe8 .mod-row-wrap {
  padding: 55px 80px;
}

.myrius_frame_8mod_1x8 .blankframe8 .switch-select .mod-row-wrap {
  padding: 60px 80px;
}

.myrius_frame_8mod_1x8 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_8mod_1x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.mylinc_frame_8mod_1x8 .mod-row-wrap {
  padding: 44px 45px;
}

.mylinc_frame_8mod_1x8 .mod-col-wrap {
  gap: 23px;
}

.mylinc_frame_8mod_1x8 .blankframe8 .mod-row-wrap {
  padding: 145px 67px;
}

.mylinc_frame_8mod_1x8 .mod-row {
  width: 100%;
  height: 100%;
}

.mylinc_frame_8mod_1x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_9mod_1x9 .module_24 {
  width: 630px;

}

.allzy_frame_9mod_1x9 .mod-row-wrap {
  padding: 48px 90px;
}

.allzy_frame_9mod_1x9 .mod-row {
  width: 100%;
  height: 100%;
}

.allzy_frame_9mod_1x9 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_9mod_1x9 .blankframe6 .mod-row-wrap {
  padding: 175px 64px;
}

.lyncus_frame_9mod_1x9 .module_24 {
  width: 650px;
}

.lyncus_frame_9mod_1x9 .mod-row-wrap {
  padding: 45px 80px;
}

.lyncus_frame_9mod_1x9 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_9mod_1x9 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_9mod_1x9 .blankframe9 .mod-row-wrap {
  padding: 40px 70px;
}

.lyncus_frame_9mod_1x9 .blankframe9 .switch-select .mod-row-wrap {
  padding: 45px 80px;
}

.myrius_frame_9mod_1x9 .module_24 {
  width: 650px;
  height: 483px;
}

.myrius_frame_9mod_1x9 .mod-row-wrap {
  padding: 44px 92px 68px;
}

.myrius_frame_9mod_1x9 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_9mod_1x9 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.myrius_frame_9mod_1x9 .blankframe9 .mod-row-wrap {
  padding: 40px 65px;
}

.myrius_frame_9mod_1x9 .blankframe9 .switch-select .mod-row-wrap {
  padding: 40px 65px;
}



.allzy_frame_12mod_2x6 .module_24 {
  width: 590px;
  height: 455px;
}


.allzy_frame_12mod_2x6 .mod-row {
  height: 100%;
  width: 100%;
}

.allzy_frame_12mod_2x6 .mod-row-wrap {
  padding: 80px 110px 75px;
  gap: 45px 35px;
}

.allzy_frame_12mod_2x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_12mod_2x6 .blankframe12 .switch-select .mod-row-wrap {
  /* padding: 130px 70px; */
}

.allzy_frame_12mod_2x6 .blankframe12 .mod-row {
  height: 100%;
}

.lyncus_frame_12mod_2x6 .mod-row-wrap {
  padding: 60px 90px 59px 85px;
  gap: 50px 40px;
}

.lyncus_frame_12mod_2x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_12mod_2x6 .blankframe12 .mod-row-wrap {
  padding: 50px 88px;
}

.lyncus_frame_12mod_2x6 .blankframe12 .switch-select .mod-row-wrap {
  padding: 40px 60px;
}

.lyncus_frame_12mod_2x6 .blankframe12 .mod-row {
  height: 100%;
}

.myrius_frame_12mod_2x6 .module_24 {
  width: 550px;
  height: 483px;
}

.myrius_frame_12mod_2x6 .mod-row-wrap {
  padding: 68px 95px 65px;
  gap: 50px 42px;
}

.myrius_frame_12mod_2x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.myrius_frame_12mod_2x6 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_12mod_2x6 .blankframe12 .mod-row-wrap {
  padding: 75px 100px;
}

.myrius_frame_12mod_2x6 .blankframe12 .switch-select .mod-row-wrap {
  padding: 65px 80px;
}

.allzy_frame_16mod_2x8 .mod-row-wrap {
  padding: 55px 55px;
  gap: 36px 42px;
}

.allzy_frame_16mod_2x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_16mod_2x8 .mod-row {
  width: 100%;
  height: 100%;
}

.arteor_frame_16mod_2x8 .mod-row-wrap {
  padding: 60px 50px;
  gap: 35px 42px;
}

.arteor_frame_16mod_2x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.arteor_frame_16mod_2x8 .mod-row {
  width: 100%;
  height: 100%;
}

.arteor_frame_16mod_2x8 .blankframe16 .mod-row-wrap {
  padding: 100px 91px;
}

.arteor_frame_16mod_2x8 .blankframe16 .switch-select .mod-row-wrap {
  padding: 143px 60px;
}

.lyncus_frame_16mod_2x8 .mod-row-wrap {
  padding: 60px 40px 57px 42px;
  gap: 40px 42px;
}

.lyncus_frame_16mod_2x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_16mod_2x8 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_16mod_2x8 .blankframe16 .mod-row-wrap {
  padding: 60px 51px;
}

.lyncus_frame_16mod_2x8 .blankframe16 .switch-select .mod-row-wrap {
  padding: 70px 55px;
}

.myrius_frame_16mod_2x8 .module_24 {
  width: 550px;
  height: 483px;
}

.myrius_frame_16mod_2x8 .mod-row-wrap {
  padding: 68px 40px 70px 45px;
  gap: 50px 53px;
}

.myrius_frame_16mod_2x8 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.myrius_frame_16mod_2x8 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_16mod_2x8 .blankframe16 .mod-row-wrap {
  padding: 85px 75px;
}

.myrius_frame_16mod_2x8 .blankframe16 .switch-select .mod-row-wrap {
  padding: 90px 85px;
}

.bli_tabs_select-dropdown {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.bli_tabs_select-dropdown__button {
  cursor: pointer;
  width: 100%;
  font: normal normal 14px/18px var(--acumin_medium);
  letter-spacing: -0.14px;
  color: #000;
  background: #fff;
  border: 1px solid #000000;
  border-radius: 0;
  opacity: 1;
  height: auto;
  text-align: left;
  padding: 15px 20px;
  position: relative;
  margin-top: 30px;
  text-transform: uppercase;
}

.bli_tabs_select-dropdown__button::focus {
  outline: none;
}

.bli_tabs_select-dropdown__button .zmdi-chevron-down {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateX(-50%);
}

.bli_tabs_select-dropdown__list {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow: hidden;
  margin: 10px 0 0;
  padding: 26px;
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(1, 0);
  transition: all ease-in-out 0.3s;
  z-index: 1;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 14px 22px #00000052;
  border: 1px solid #ffffff4d;
  border-radius: 0;
  opacity: 1;
}

.bli_tabs_select-dropdown__list.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1, 1);
}

.bli_tabs_select-dropdown__list-item {
  display: block;
  list-style-type: none;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
  position: relative;
  padding-bottom: 5px;
}

.bli_tabs_select-dropdown__list-item a {
  font: normal normal 14px/18px var(--acumin_medium);
  letter-spacing: -0.14px;
  color: #383636;
  /*text-transform: capitalize;*/
  opacity: 1;
  position: relative;
}

.bli_tabs_select-dropdown__list-item:last-child {
  margin-bottom: 0;
}

.bli_tabs_select-dropdown__list-item a.active {
  font-family: var(--acumin_medium);
}

.bli_tabs_select-dropdown__list-item.tab_dropdown_selected a:before {
  top: 0;
  position: absolute;
  content: "";
  left: -26px;
  width: 3px;
  height: 100%;
  background: #486898;
  bottom: 0;
  display: flex;
  align-items: center;
}

.bli_tabs_select-dropdown__button .zmdi-chevron-down:before,
.bli_tabs_select-dropdown__button .zmdi-chevron-down:after {
  background: none;
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background-color: #000;
  display: inline-block;
  border-radius: 50px;
  transition: all 0.5s ease;
  right: 0px;
  top: 50%;
}

.bli_tabs_select-dropdown__button .zmdi-chevron-down:before {
  transform: rotate(-45deg);
  right: -5px;
}

.bli_tabs_select-dropdown__button .zmdi-chevron-down:after {
  transform: rotate(45deg);
  right: 0;
}

.bli_tabs_select-dropdown {
  width: 100%;
}

.bli_tabs_select-dropdown__button.drop_clicked .zmdi-chevron-down:before {
  transform: rotate(45deg);
}

.bli_tabs_select-dropdown__button.drop_clicked .zmdi-chevron-down:after {
  transform: rotate(-45deg);
}

.activity-inner-dropdown {
  display: flex;
  align-items: left;
  justify-content: space-between;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
}

.switchfunctions-body {
  padding: 30px 30px 15px;
  position: relative;
}

.activity-inner-dropdown .bli_tabs_select-dropdown__button {
  margin-top: 0;
}



.allzy_frame_18mod_3x6 .mod-row-wrap {
  padding: 70px 90px;
  gap: 40px 42px;
}

.allzy_frame_18mod_3x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.allzy_frame_18mod_3x6 .mod-row {
  width: 100%;
  height: 100%;
}

.lyncus_frame_18mod_3x6 .mod-row-wrap {
  padding: 50px 75px 55px 80px;
  gap: 40px 42px;
}

.lyncus_frame_18mod_3x6 .switch-select .mod-row-wrap {
  padding: 75px 85px;
  gap: 31px 42px;
}

.lyncus_frame_18mod_3x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.lyncus_frame_18mod_3x6 .blankframe18 .mod-row {
  height: 100%;
}

.lyncus_frame_18mod_3x6 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_18mod_3x6 .mod-row-wrap {
  padding: 55px 70px;
  gap: 35px 42px;
}

.myrius_frame_18mod_3x6 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.myrius_frame_18mod_3x6 .mod-row {
  width: 100%;
  height: 100%;
}

.myrius_frame_18mod_3x6 .blankframe18 .mod-row-wrap {
  padding: 60px 70px;
  gap: 30px 42px;
}

.myrius_frame_18mod_3x6 .blankframe18 .switch-select .mod-row-wrap {
  padding: 70px 75px;

}

.arteor_frame_24mod_3x8 .mod-row-wrap {
  padding: 60px 60px;
  gap: 38px 42px;
}

.arteor_frame_24mod_3x8 .row-inner-plate img {
  /* width: 41px; */
  width: 100%;
  height: 100%;
}

.arteor_frame_24mod_3x8 .mod-row {
  width: 100%;
  height: 100%;
}


/* js select dropdown */

.select2-container {
  width: 50% !important;
}

.select2-results__option {
  padding: 10px 15px;
  vertical-align: middle;
  font: normal normal 14px / 18px var(--acumin_medium);
  letter-spacing: -0.14px;
  text-transform: uppercase;
  position: relative;
  display: flex;
  gap: 10px;
}

.select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 0;
  vertical-align: middle;
}

.select2-results__option[aria-selected=true]:before {
  font-family: fontAwesome;
  content: "\f00c";
  color: #fff;
  background-color: #486898;
  border: 0;
  display: inline-block;
  padding-left: 3px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #eaeaeb;
  color: #272727;
}

.select2-container--default .select2-selection--multiple {
  /* margin-bottom: 10px; */
  border-width: 2px;
  border: 1px solid #E9E9E9;
  border-radius: 35px;
  cursor: text;
  padding: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-radius: 35px;
  /* border: 1px solid #E9E9E9; */
  border: 1px solid #486898;
  box-shadow: 0px 0px 0px 2px rgba(72, 104, 152, 0.25);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid #E9E9E9;
  outline: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
  padding: 10px 13px 0;

}

.select2-container--open .select2-dropdown {
  left: 0;
  top: 10px;
}

.select2-container--open .select2-dropdown--below {
  border-radius: 22px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
  overflow: hidden;
  border: 1px solid #e9e9e9;

}

.select2-selection .select2-selection--multiple:after {
  content: 'hhghgh';
}

/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
  display: none;
}

.select-icon .placeholder {
  /* 	display: none; */
}

.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
  display: none !important;
  /* content: "" !important; */
}

.select-icon .select2-search--dropdown {
  /* display: none; */
}



.select2-container--default .select2-selection--multiple .select2-selection__rendered:before,
.select2-container--default .select2-selection--multiple .select2-selection__rendered:after {
  position: absolute;
  content: "";
  height: 10px;
  width: 2px;
  background: #000;
  top: 40%;
  left: auto;
  right: 16px;
  transition: all 0.5s ease;
  transform: translateY(-50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered:before {
  right: 22px;
  transform: rotate(45deg);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered:after {
  right: 28px;
  transform: rotate(-45deg);
}

.select2-container--default .select2-selection--multiple[aria-expanded=true] .select2-selection__rendered:before {
  transform: rotate(135deg);
}

.select2-container--default .select2-selection--multiple[aria-expanded=true] .select2-selection__rendered:after {
  transform: rotate(-135deg);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  display: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  font: normal normal 14px / 18px var(--acumin_medium);
  letter-spacing: -0.14px;
  text-transform: uppercase;
  padding: 6px 8px 3px;
  white-space: break-spaces;
  margin-top: 0;
}

.select2-container--default .select2-search--inline .select2-search__field {
  width: 100% !important;
  margin-top: 0px;
}

.select2-results__option[role="alert"]:before {
  display: none !important;
}

.select2-results__options::-webkit-scrollbar {
  width: 2px;
}


/* Preloader
-------------------------------------------------------*/

.loader-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 99999;
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  font-size: 0;
  color: #00c9d0;
  display: inline-block;
  margin: -25px 0 0 -25px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.lead {
  font-size: 13px;
}

.loader div {
  background-color: #d9b06a;
  display: inline-block;
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  opacity: .5;
  border-radius: 50%;
  -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
  animation: ballPulseDouble 2s ease-in-out infinite;
}

.loader div:last-child {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes ballPulseDouble {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ballPulseDouble {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.activity-loadingarea-wrapper {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
  left: 0;
}


/* loading-dots dots */
.loading-dots {
  color: #000;
  font-family: var(--acumin_bold);
  font-size: 40px;
  line-height: 40px;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  display: none;
}

.loading-dots:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {

  0%,
  20% {
    color: rgba(0, 0, 0, 0);
    text-shadow:
      .25em 0 0 rgba(0, 0, 0, 0),
      .5em 0 0 rgba(0, 0, 0, 0);
  }

  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0, 0, 0, 0),
      .5em 0 0 rgba(0, 0, 0, 0);
  }

  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0, 0, 0, 0);
  }

  80%,
  100% {
    text-shadow:
      .25em 0 0 #000,
      .5em 0 0 #000;
  }
}


.product-loader {
  /* background: rgba(0, 0, 0, 0.5); */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 9;
  display: none;
  left: 0;
}

.productloading {
  height: 0;
  width: 0;
  padding: 15px;
  border: 6px solid #accaff36;
  border-right-color: #222;
  border-radius: 50%;
  -webkit-animation: rotate 1s infinite linear;
  position: absolute;
  left: 50%;
  top: 50%;
}



p.no-product-found {
  position: absolute;
  width: 100%;
  text-align: center;
  font: normal normal bold 18px / 22px var(--acumin_regular);
  letter-spacing: -0.72px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  display: none;
}

img.width76 {
  overflow: unset;
}

.allzy_frame_8mod_2x4 .mod-row-wrap {
  padding: 92px 84px 93px;
  gap: 53px 42px;
}


.allzy_frame_8mod_2x4 .blankframe8 .mod-row {
  height: 100%;
}

.allzy_frame_8mod_2x4 .mod-row {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0px;
}

.allzy_frame_8mod_2x4 .row-inner-plate img {
  width: 100%;
  height: 100%;
}

.diy_component img.width76 {
  max-width: 180px;
}



.form-control.error,
.textareaSec.error {
  border: 1px solid #FF0000CF !important;
}



/* seclect dropdown start  */
.custom-dropdown {
  display: inline-block;
  position: relative;
  width: 100%;
}

.custom-dropdown__button {
  align-items: center;
  background: #f9f9f9;
  border: 1px solid #efefef;
  border-radius: 45px;
  color: rgb(0 0 0/64%);
  cursor: pointer;
  display: flex;
  font: normal normal 16px/0px var(--acumin_medium);
  font-size: 16px;
  line-height: 0;
  height: 50px;
  letter-spacing: 0;
  opacity: 1;
  padding: 0 20px;
  position: relative;
  text-align: left;
  width: 100%;
  font-family: var(--roboto_reg);
}

.custom-dropdown__list.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1, 1);
}

.custom-dropdown__list {
  background: #fff;
  border: 1px solid #d3d3d34d;
  border-radius: 15px;
  display: block;
  left: 0;
  list-style-type: none;
  margin: 5px 0 0;
  opacity: 0;
  opacity: 1;
  padding: 15px 0 15px;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: scale(1, 0);
  transform-origin: top left;
  transition: all ease-in-out 0.3s;
  z-index: 2;
}

.cust-listwrap {
  max-height: 200px;
  overflow: auto;
}

.cust-listwrap::-webkit-scrollbar {
  width: 2px;
}

.custom-dropdown__list-item {
  cursor: pointer;
  display: block;
  list-style-type: none;
  position: relative;
  transition: all ease-in-out 0.3s;
}

.custom-dropdown__list-item a {
  border-bottom: 0 solid #fff;
  color: #383636;
  display: flex;
  font: normal normal 14px/20px var(--acumin_medium);
  justify-content: left;
  letter-spacing: 0.28px;
  margin-bottom: 10px;
  opacity: 0.8;
  padding: 0 22px;
  position: relative;
}

.custom-dropdown__list-item:hover a {
  color: #000;
}

.custom-dropdown__button .zmdi-chevron-down {
  position: absolute;
  right: 30px;
  top: 50%;
  transition: all 0.5s ease;
  transform: translateY(-50%);
  display: none;
}

.custom-dropdown__list-item:last-child a {
  margin: 0;
}

/* .custom-dropdown__button.custom_drp_clicked .zmdi-chevron-down {
position: absolute;
right: 15px;
top: 32px;
transform: rotate(180deg);
transition: all 0.5s ease;
} */
.custom-dropdown__button .zmdi-chevron-down:before,
.custom-dropdown__button .zmdi-chevron-down:after {
  background: 0 0;
  background-color: rgb(0 0 0/50%);
  border-radius: 50px;
  content: "";
  display: inline-block;
  height: 2px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.5s ease;
  width: 6px;
  opacity: 0.5;
}

.custom-dropdown__button .zmdi-chevron-down:before {
  right: -10px;
  transform: rotate(-45deg);
}

.custom-dropdown__button .zmdi-chevron-down:after {
  right: -7px;
  transform: rotate(45deg);
}

.chage1 .zmdi-chevron-down:before {
  transform: rotate(45deg);
}

.chage1 .zmdi-chevron-down:after {
  transform: rotate(-45deg);
}

.custom-dropdown-box {
  height: 125px;
  overflow-y: auto;
  max-height: fit-content;
}

.custom-dropdown-box::-webkit-scrollbar {
  width: 2px;
}

a.custom-dropdown__button:hover {
  color: rgb(0 0 0/64%);
}

.custom-dropdown__button.chage1 {
  color: #000;
}

a.custom-dropdown__button.error {
  border: 1px solid #FF0000CF;
}

/* seclect dropdown end  */


.edit-row-icn-img {
  width: 24px;
  margin-right: 10px;
}


div#moduleOptionsContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  padding: 15px 0;
}

.form-check-input:checked {
  background-color: #486898;
  border-color: #486898;
}

/* Coachmark Base Styles */

.coach-mark-wrapper {
  background: rgb(0 0 0 / 20%);
  height: 100%;
  width: 100%;
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
}

#coach-mark {

  position: absolute;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  width: 400px;
  height: fit-content;
  z-index: 999999;
  transition: top 0.3s ease, left 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.coachmark-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

#coach-mark .close-btn {
  position: absolute;
  top: 8px;
  right: 15px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
}

#coach-mark .close-btn:hover {
  color: #000;
}

/* Buttons */
.coachmark-footer {
  display: flex;
  justify-content: end;
  gap: 15px;
}

#coach-mark .btn {
  padding: 0.3rem 0.7rem;
  background: #ed1c24;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 9px 16px;
  font-size: 16px;
  line-height: 1.1;
  font-family: 'Acumin_Regular';
  padding-top: 13px;
}

#coach-mark .previous-btn {
  background: #e1e1e1;
  color: #2b2b2b;
}

/* Example step positions */
#coach-mark.cm-step1 {
  top: 100px !important;
  left: 50%;
  transform: translateX(-50%);
}

#coach-mark.cm-step2 {
  top: 22% !important;
  left: 19%;
}

#coach-mark.cm-step3 {
  top: 40% !important;
  left: 45%;
}

#coach-mark.cm-step4 {
  top: 40% !important;
  right: 42%;
}

#coach-mark.cm-step5 {
  top: 38% !important;
  right: 42%;
}


#coach-mark.cm-step6 {
  top: auto !important;
  bottom: 110px;
  right: 4%;
}

#coach-mark.cm-step1:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: -10px;
  left: 50%;
  border-top: 0.5px solid #e3e3e3;
  border-left: 0.5px solid #e3e3e3;
  transform: rotate(45deg);
}

#coach-mark.cm-step2:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: -10px;
  right: 45%;
  border-top: 0.5px solid #e3e3e3;
  border-left: 0.5px solid #e3e3e3;
  transform: translateX(-45%) rotate(45deg);

}

#coach-mark.cm-step3:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  top: 40%;
  left: -10px;
  border-top: 0.5px solid #e3e3e3;
  border-left: 0.5px solid #e3e3e3;
  transform: rotate(-45deg);
}

#coach-mark.cm-step4:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  bottom: auto;
  top: 45%;
  right: -9px;
  border-top: 0.5px solid #e3e3e3;
  border-left: 0.5px solid #e3e3e3;
  transform: rotate(135deg);
}

#coach-mark.cm-step5:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  bottom: auto;
  top: 45%;
  right: -9px;
  border-top: 0.5px solid #e3e3e3;
  border-left: 0.5px solid #e3e3e3;
  transform: rotate(135deg);
}

#coach-mark.cm-step6:after {
  content: "";
  height: 17px;
  width: 17px;
  position: absolute;
  background-color: #ffffff;
  bottom: auto;
  top: auto;
  bottom: -9px;
  right: 50%;
  border-top: 0.5px solid #e3e3e3;
  border-left: 0.5px solid #e3e3e3;
  transform: rotate(224deg);
}


span#step-count {
  font-size: 16px;
  font-family: 'Acumin_Semibold';
  line-height: 1.1;
  color: #2b2b2b;
}

div#coach-text {
  font-size: 18px;
  line-height: 1.1;
  font-family: 'Acumin_Semibold';
  color: #2b2b2b;
}

div#coach-subtext {
  font-size: 16px;
  line-height: 1.1;
  font-family: 'Acumin_Regular';
  color: #444444;
}

.coach-step1-active header {
  z-index: 99;
  pointer-events: none;
}

.coach-step2-active .module-dropdown {
  z-index: 9;
  pointer-events: none;
}

.coach-step3-active .mod-row .hov_row {
  opacity: 1;
  visibility: visible;
}

.coach-step3-active .mod-row-wrap {
  z-index: 9;
  pointer-events: none;
}

.coach-step4-active .activity-area-right {
  position: relative;
  z-index: 9;
  pointer-events: none;
}

.coach-step5-active .activity-area-right {
  position: relative;
  z-index: 9;
  pointer-events: none;
}

/* .coach-step5-active .activity-main-tabs-header {
  z-index: 9;
  pointer-events: none;
} */

.coach-step6-active .configuration_details_wrapper {
  z-index: 9;
  pointer-events: none;
}

.componentSection.width38,
.componentSection.width76 {
  transition: all 0.5s ease;
  animation: plateanimate 1s ease forwards;
}

@keyframes plateanimate {
  from {
    /* transform: scale(0.9); */
    opacity: 0;
    transition: all 0.5s ease;
  }

  to {
    opacity: 1;
    /* transform: scale(1); */
    transition: all 0.5s ease;
  }
}



.blankframe1 .row-inner-plate,
.blankframe2 .row-inner-plate,
.blankframe3 .row-inner-plate,
.blankframe4 .row-inner-plate,
.blankframe6 .row-inner-plate,
.blankframe8 .row-inner-plate,
.blankframe9 .row-inner-plate,
.blankframe12 .row-inner-plate,
.blankframe16 .row-inner-plate,
.blankframe18 .row-inner-plate,
.blankframe24 .row-inner-plate {
  border: 1px solid #b5b5b5;
}



/* Tablet */
@media (max-width: 1024px) {
  #coach-mark.cm-step5 {
    top: 20px !important;
    right: 22%;
  }

}

/* Mobile */
@media (max-width:991px) {
  #coach-mark {
    width: 238px;
    gap: 10px;
  }


  #coach-mark.cm-step1 {
    top: 70px !important;
  }

  #coach-mark.cm-step2 {
    left: 50%;
    transform: translateX(-50%);
  }



  #coach-mark.cm-step3 {

    left: 50%;
    top: 60% !important;
    transform: translateX(-50%);
  }

  #coach-mark.cm-step3:after {
    top: -9px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

  #coach-mark.cm-step4 {
    top: 32vh !important;
    left: 50%;
    transform: translateX(-50%);
  }

  #coach-mark.cm-step4:after {
    bottom: auto;
    top: auto;
    bottom: -9px;
    transform: rotate(135deg);
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
  }



  #coach-mark.cm-step5 {
    top: 32vh !important;
    left: 50%;
    transform: translateX(-50%);
  }

  #coach-mark.cm-step5:after {
    bottom: -9px;
    top: auto;
    right: 50%;
    transform: translateX(-50%) rotate(225deg);
  }
}


/* page-configurator css starts */


.main-wrapper {
  margin-top: 90px;
  background: #F7F8FA;
}

.custom-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.page-configurator {
  padding: 40px 70px 40px;
}

.config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.config-breadcrumb {
  display: flex;
  align-items: center;
  gap: 25px;
}

.config-breadcrumb-item {
  font-size: 12px;
  font-family: var(--acumin_regular);
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0;
  color: #222222CC;
  position: relative;
}

.config-breadcrumb-item:first-child {
  font-family: var(--acumin_medium);
  color: #222;
}

.config-breadcrumb-item.active {
  color: #222222CC;
}

.config-breadcrumb-item:after {
  position: absolute;
  content: "";
  top: 3px;
  right: -15px;
  left: auto;
  height: 7px;
  width: 7px;
  border: 2px solid #1F2127;
  border-top: none;
  border-left: none;
  rotate: -45deg;
}

.config-breadcrumb-item:last-child::after {
  display: none;
}

h2.config-header-title {
  font-size: 24px;
  font-family: var(--acumin_semibold);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  margin-bottom: 0;
  margin-top: 10px;
}

/* page-configurator css Ends */


/* view configuration page css starts */

.config-body {
  display: grid;
  grid-template-columns: calc(35% - 16px) calc(65% - 16px);
  gap: 32px;
  margin-top: 40px;
}

.config-product {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 70px;
  background: #fff;
  border-bottom: 1px solid #E3E3E3;
  position: relative;
}

.config-product-img img {
  width: 300px;
  object-fit: contain;
}

.config-details {
  background: #fff;
  padding: 32px;
}

.config-details-title {
  font-family: var(--acumin_semibold);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: #000;
  margin-bottom: 24px;
}

.config-details-label {
  font-family: var(--acumin_medium);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: #000;
  margin-bottom: 5px;
}

.config-details-value {
  font-family: var(--acumin_regular);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: #1F2127CC;
  margin-bottom: 0;
}

.config-details-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.download-img-wrap {
  position: absolute;
  top: 15px;
  right: 15px;
}

.download-img {
  background: none;
  border: 1px solid #e3e3e3;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-img img {
  width: 16px;
  height: 16px;
}

.download-img svg {
  stroke: #486898;
}

.download-img:hover {
  background: #486898;
  border: transparent;
}

.download-img:hover svg {
  stroke: #fff;
}

.product-details-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity-group {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.quantity-box {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e3e3e3;
  padding: 6px 14px;
  border-radius: 40px;
  gap: 18px;
  min-width: 122px;
  height: 32px;
  justify-content: center;
}

.qty-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #444;
  outline: none;
  padding: 0;
}

.qty-btn:hover {
  color: #000;
}

.qty-value {
  font-size: 16px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

label.quantity-label {
  font-family: var(--acumin_medium);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  color: #333;
}

.shop-wrap {
  display: flex;
  gap: 20px;
  align-items: center;
}

.action-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.action-icons-item {
  height: 41px;
  width: 41px;
  background: rgba(72, 104, 152, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.action-icons-item:hover {
  background: #486898;
  border: transparent;
}

.action-icons-item svg {
  height: 20px;
  width: 20px;
  stroke: #486898;
}

.action-icons-item img {
  width: 20px;
  height: 20px;
}

.action-icons-item:hover img {
  filter: brightness(0) invert(1);
}

.product-details-title {
  margin-top: 24px;
}

.product-details-title h3 {
  font-family: var(--acumin_medium);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: #222222CC;
}

.product-details-table {
  margin-top: 24px;
}

.product-table-th {
  display: grid;
  grid-template-columns: 62px 1fr 98px 98px 98px 98px 50px;
  gap: 20px;
  background: #fff;
  padding: 12px;
  margin-top: 20px;
  align-items: center;
}

.product-table-th div {
  font-family: var(--acumin_medium);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: capitalize;
  color: rgb(34 34 34 / 60%);
}

.product-table-row {
  display: grid;
  grid-template-columns: 62px 1fr 98px 98px 98px 98px 50px;
  gap: 20px;
  background: #fff;
  padding: 8px 12px;
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  align-items: center;
}

.product-table-img img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.product-table-text {
  font-family: var(--acumin_semibold);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #222;
}

.product-table-row .quantity-box {
  min-width: fit-content;
  width: fit-content;
  gap: 5px;
}

.product-table-qty {
  font-family: var(--acumin_regular);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  padding: 6px 18px 5px;
  border-radius: 20px;
  width: fit-content;
}

.product-table-qty.red {
  color: #F4313F;
  background: #F4313F1A;

}

.product-table-qty.blue {
  color: #486898;
  background: #4868981A;
}

.product-table-row-wrapper {
  height: 540px;
  overflow-Y: auto;

}

.product-table-row-wrapper::-webkit-scrollbar {
  width: 0;
}

.edit-config {
  font-family: var(--roboto_reg);
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0;
  text-decoration: underline;
  color: #486898;
}

.edit-config img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

a.edit-config:hover {
  text-decoration: underline;
}

a.shoponline-cta {
  padding: 17px 24px 14px 24px;
  background: #486898;
  border-radius: 35px;
  color: #fff;
  margin: 0;
  line-height: 1;
  font-size: 14px;
  font-family: var(--acumin_bold);
}

/* view configuration page css Ends */


/* Tooltip CSS starts here */
/* Tooltip base */

[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  background: #1A1A1A;
  color: #fff;
  font-family: var(--acumin_medium);
  font-size: 9.6px;
  line-height: 1;
  padding: 8px 8px 6px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2;
}

.product-content div[data-tooltip]::before {
  white-space: normal;
  width: 100%;
  text-align: center;
}

.function_div div[data-tooltip]::before {
  white-space: normal;
  width: 100%;
  text-align: center;
}

.platefinishes-card-content[data-tooltip]::before {
  white-space: normal;
  width: 100%;
  text-align: center;
}

/* Arrow */
[data-tooltip]::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  z-index: 1;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
}

[data-tooltip][data-placement="top"]::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

/* [data-tooltip][data-placement="top"]::after {
  border-top-color: #1A1A1A;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
} */

[data-tooltip][data-placement="bottom"]::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

/* [data-tooltip][data-placement="bottom"]::after {
  border-bottom-color: #1A1A1A;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
} */

[data-tooltip][data-placement="left"]::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 8px;
}

/* [data-tooltip][data-placement="left"]::after {
  border-left-color: #1A1A1A;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
} */

[data-tooltip][data-placement="right"]::before {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 8px;
}

/* [data-tooltip][data-placement="right"]::after {
  border-right-color: #1A1A1A;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
} */


/* Tooltip CSS   ends here*/


/* Modals css starts */

.common .modal-content {
  padding: 32px;
  border-radius: 0;

}


.common .modal-header {
  border: none;
  padding: 0;
  position: relative;
  right: 0;
  width: 100%;
}

.popup-logo {
  margin: 0 auto;
}

.popup-logo img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.common .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 45px;
  padding: 0;
  flex-direction: column;
}

.common .popup-content {
  display: flex;
  flex-direction: column;
}

.common .popup-content h3 {
  font-family: var(--acumin_medium);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 20px;
}

.common .popup-content p {
  font-family: var(--acumin_regular);
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  color: #383636B2;
  margin-bottom: 10px;
}

.common .popup-content a {
  font-family: var(--acumin_semibold);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: underline;
  color: #486898;
}

.modal-outline-cta {
  font-family: var(--acumin_semibold);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #486898;
  border: 1px solid #486898;
  padding: 18px 19px;
  border-radius: 35px;
  background: none;
}

.modal-solid-cta {
  font-family: var(--acumin_semibold);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #ffffff;
  padding: 18px 19px;
  border-radius: 35px;
  background: #486898;
  border: none;
}

.boq-modal-solid-cta {
  font-family: var(--acumin_semibold);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #ffffff;
  padding: 18px 19px;
  border-radius: 35px;
  background: #486898;
  border: none;
}

.popup-cta {
  display: flex;
  gap: 12px;
}

.popup-cta a {
  text-align: center;
  min-width: 134px;
  max-height: 50px;

}

.popup-note {
  font-family: var(--roboto_reg);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  color: #1F212780;
  margin-top: 15px;
  ;
}

.Login-required .popup-cta {
  width: 100%;
  padding: 0 30px;
}

.Login-required .popup-cta a {
  width: 100%;
}

.modal-solid-cta:hover {
  color: #fff;
}

.usedetailsCTA {
  padding: 18px 50px;
}

.usermodal_mobilecode .iti__selected-flag {
  padding: 0 12px 0 20px;
}

.form-group.usermodal_mobilecode .iti--separate-dial-code input[type="tel"] {
  padding-left: 75px !important;
}

.form-group.usermodal_mobilecode .iti__flag {
  display: none;
}

.form-group.usermodal_mobilecode .iti__selected-flag:after {
  display: none;
}

.form-group.usermodal_mobilecode .iti--separate-dial-code .iti__selected-dial-code {
  margin-left: 0;
}

.form-group.usermodal_mobilecode .iti__flag-container {
  height: 100%;
}

/* Modals css Ends */

.custom-dropdown-enquiry-state,
.custom-dropdown-enquiry-city {
  pointer-events: none;
  /* completely disable clicks */
  opacity: 0.6;
  cursor: not-allowed;
}