* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body {
  font-family: "Raleway_Regular";
  overflow-x: hidden;
  overflow: hidden;
  overflow: unset;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  width: 100%;
  margin: 0;
  
}

.fa-solid, .fas {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display,inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}
.fa-chevron-right:before {
  content: "\f054";
}
button{
  cursor: pointer;
}

.d-none {
  display: none !important;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

input:focus{
  outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
picture {
  display: inline-block;
  width: 100%;
}

/* img {
  border: 0;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
  width: 100%;
} */

.region-header {
  height: auto;
}

.BgWrap {
  /* height: 100%; */
  position: relative;
  /* background: url('../images/Component.jpg') no-repeat;
  background-size: contain;
  padding-bottom: 50px; */
}

.BgWrap .logo-absolute {
  position: relative;
}
            
.BgWrap .logo-absolute img {
  position: absolute;
  right: 0px;
  top: -70px;
  z-index: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 25px;
  max-width: 100%;
}
.pt-11{
  padding-top: 11%;
}

.topHeading {
  text-align: center;
  font-size: 32px;
  line-height: 32px;
  font-family: "Raleway_Bold";
  color: #00205B;
  width: 100%;
  padding: 15px 0;
}

.topSecHeader {
  text-align: center;
  font-size: 16px;
  line-height: 16px;
  font-family: "Raleway_Bold";
  color: #00205B;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 30px;
}
.linkHeading {
  display: block;
  color: #00205B;
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  font-family: "Raleway_Bold";
  position: relative;
}


.linkHeading:before {
  background: transparent;
  content: "";
  height: 5px;
  width: 0%;
  position: absolute;
  bottom: -15px;
  left: 0;
  margin: 0 auto;
  right: 0;
  border-radius: 30px;
  transition: all 0.2s linear;
}
.formHeading{
  display: block;
  color: #00205B;
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  font-family: "Raleway_Bold";
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}
.BtnStyle{
  background: transparent linear-gradient(356deg, #E7194F 50%, #FFFFFF 100%) 0% 0% no-repeat;
  width: 145px;
  border: 0;
  font-size: 16px;
  line-height: 19px;
  font-family: "Raleway_SemiBold";
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #E7194F;
  display: block;
  text-align: center;
}
.BtnStyle2{
  background: transparent;
  width: fit-content;
  border: 0;
  font-size: 16px;
  line-height: 19px;
  font-family: "Raleway_SemiBold";
  color: #00205B;
  padding: 10px 40px;
  border-radius: 10px;
  border: 1px solid #E7194F;
}
.BtnStyle.prev{
  background: transparent;
  color: #00205B;
  margin-right: 20px;
}
.BtnStyle2:hover{
  color: inherit !important;
}


.BgWrap .mainPageWrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 25px 20px 40px 20px;
  box-shadow: 0px 10px 20px #00000029;
  border-radius: 20px;
}
.BgWrap .contentInfo{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 25px 20px 40px 20px;
  box-shadow: 0px 10px 20px #00000029;
  border-radius: 20px;
}
.BgWrap .mainPageWrap.loginPageWrap{
  width: 52%;
}

.boxHeader {
  width: auto; 
  display: flex;
  gap: 5px;
  border-radius: 20px;
}

.boxHeader .tabBox {
  width: 50%;
  text-align: center;
  background: #f1f1f1;
  padding: 20px 60px;
  border-end-end-radius: 15px;
  border-start-start-radius: 0px;
  border-end-start-radius: 0px;
  border-start-end-radius: 15px;
}
.boxHeader .tabBox span{
  font-size: 14px;
  line-height: 14px;
  color: #696969;
  font-family: "Raleway_Medium";
  letter-spacing: 0px;
  display: block;
  padding-bottom: 10px;
}

.boxHeader .tabBox:first-child {
  border-end-end-radius: 0px;
  border-start-start-radius: 15px;
  border-end-start-radius: 15px;
  border-start-end-radius: 0px;
}
.boxHeader .tabBox.active .linkHeading:before {
  background: #e7194f;
  width: 20%;
  transition: all 0.2s linear;
}
.boxHeader .tabBox:hover .linkHeading:before {
  background: #e7194f;
  width: 20%;
  transition: all 0.2s linear;
}

.boxBody {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
}
.loginForm{
  width: 65%;
  margin: 0 auto;
}
.loginPageWrap .formHeading{
  font-size: 18px;
  line-height: 18px;
}
.formFieldWrap{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.formFieldBox{
  width: 100%;
  position: relative;
}
.boxBody input,
.boxBody select,
.boxBody textarea {
  margin: 10px;
  border: 0;
  outline: 0;
  padding: 5px 10px;
  border-bottom: 2px solid #CCDEFF;
  color: #545454;
  font-size: 14px;
  line-height: 16px;
  font-family: "Raleway_Regular";
  width: calc(100% - 20px);
  text-align: center;
}
.OTPField,
.sendOTP{
  position: relative;
}
.sendOTP .sendOTPBtn{
  position: absolute;
  right: 0;
  top: 0;
  margin: 10px;
  padding: 5px 10px;
  background: #E7194F;
  width: 80px;
  border: 0;
  font-size: 10px;
  line-height: 10px;
  font-family: "Raleway_SemiBold";
  color: #ffffff;
}
.OTPField span{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  padding-bottom: 20px;
  color: #545454;
  font-size: 14px;
  line-height: 16px;
  font-family: "Raleway_Regular";
  display: inline-block;
}
.OTPinputs input:valid ~ span{
  display: none;
}

.OTPinputs{
  display: flex;
  width: 100%;
  margin: 10px;
  padding: 5px 10px;
}
.OTPinputs input{
  border-bottom: 2px solid #707070;
  cursor: pointer;
}
.OTPinputs input:focus{
  border-bottom: 2px solid #CCDEFF;
}
.OTPField:has(input:focus) span{
  display: none;
}

.flex-action-btn {
  padding: 20px;
  text-align: -webkit-center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.loginPageWrap .flex-action-btn a {
  display: block;
  color: #ffffff;
  padding: 10px 40px;
  border: 0;
  font-size: 14px;
  top: 20px;
  position: relative;
  width: 147px;
  height: 40px;
  background: #E7194F 0% 0% no-repeat padding-box;
  border-radius: 20px;
  opacity: 1;
}

.BgWrap .registrationPageWrap{
  width: 70%;
}


.registrationPageWrap .boxBody{
  overflow: hidden;
  text-align: -webkit-center;
width: 90%;
}
.registrationPageWrap .boxBody .formRegistrationWrap{
  display: flex;
  width: 200%;
  overflow: hidden;
}
.registrationPageWrap .boxBody form .fromSteps{
  width: 100%;
  transition: margin-left 0.3s ease-in-out;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  transition: all 0.5s linear;
}
.fromSteps.fromStepOne{
  transform: translateX(-100%);
  transition: all 0.5s linear;
}
.fromSteps.fromStepOne.active{
  transform: translateX(0%);
  transition: all 0.5s linear;
}
.fromSteps.fromStepTwo.active {
  transform: translateX(-100%);
  transition: all 0.5s linear;
}


select{
  appearance: none;
}
select{
  background: url("../images/select-down.png") no-repeat;
  background-position: right center;
  background-size: auto;
  padding-right: 25px !important;
}
.uploadBtnWrap{
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}
.uploadBtnWrap .uploadFeild img{
  width: auto;
  height: 100%;
}
.uploadBtnWrap .upload-btn{
  background-color: transparent;
  color: #545454;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  line-height: 14px;
  font-family: "Raleway_SemiBold";
  width: fit-content;
  display: flex;
  border: 1px solid #707070;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.registrationPageWrap .progressHeader{
  display: flex;
  margin: 0 auto;
  user-select: none;
  background-color: #eaeaed;
  padding-top: 10px;
  width: 100%;
  padding: 25px 40px;
  padding-bottom: 35px;
  border-radius: 20px;
}
.registrationPageWrap .progressHeader .step{
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.registrationPageWrap .progressHeader .step .stpesBox{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.registrationPageWrap .progressHeader .step:before{
  position: absolute;
  content: '';
  bottom: -20px;
  height: 2px;
  width: 100%;
  background: #4c638c;
  left: 0;
}
.registrationPageWrap .progressHeader .step.active:before{
  background: #e7194f;
  height: 4px;
  bottom: -20.9px;
}
.step1 .stepBgImg{
  background: url("../images/reg-personal.svg") no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}
.step1.active .stepBgImg{
  background: url("../images/reg-personal-col.svg") no-repeat;
  background-size: contain;
}
.step2 .stepBgImg{
  background: url("../images/reg-purchase.svg") no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}
.step2.active .stepBgImg{
  background: url("../images/reg-purchase-col.svg") no-repeat;
  background-size: contain;
}
.step3 .stepBgImg{
  background: url("../images/reg-complete.svg") no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}
.step3.active .stepBgImg{
  background: url("../images/reg-complete-col.svg") no-repeat;
  background-size: contain;
}
.registrationPageWrap .formFieldWrap .formFieldBox{
  width: calc((100% / 3) - 5px);
}
.registrationPageWrap .fromStepTwo .formFieldWrap .formFieldBox{
  width: calc((100% / 4) - 5px);
}
.registrationPageWrap .formRegistrationWrap .fromStepTwo .formFieldWrap{
  justify-content: flex-start;
}
.registrationPageWrap .formRegistrationWrap .fromStepTwo .formFieldWrap:has(.formFieldBox.radioType){
  justify-content: center;
}
.registrationPageWrap .formFieldWrap .formFieldBox input, 
.registrationPageWrap .formFieldWrap .formFieldBox select{
  text-align: left;
}


.BgWrap.userPage .mainPageWrap {
  width: 75%;
  overflow: hidden;
  padding: 40px;
}
.BgWrap.userPage .contentInfo {
  width: 75%;
  overflow: hidden;
  padding: 40px;
  margin-top: 20px;
}
.mainPageWrap .tabWrap{
  display: flex;
  background: #7070704d;
  border-radius: 15px;
  gap: 1px;
}
.mainPageWrap .menuTabs{
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  background: #F2F2F2;
}
.mainPageWrap .menuTabs a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}
.mainPageWrap .menuTabs.active a .tablinks{
  font-size: 16px;
  line-height: 19px;
  color: #E71850;
  opacity: 1;
  font-family: "Raleway_SemiBold";
}
.mainPageWrap .menuTabs a .tablinks{
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  opacity: 0.3;
  font-family: "Raleway_SemiBold";
}
.mainPageWrap .menuTabs a img{
  width: 32px;
  height: 32px;
}
.mainPageWrap .menuTabs.active{
  background: rgba(231, 24, 80, 0.1);
}
.mainPageWrap .menuTabs:first-child{
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.mainPageWrap .menuTabs:last-child{
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.mainPageWrap .contentInfo {
  width: 100%;
  overflow: hidden;
}

.BgWrap.userPage .contentInfo.warrantyDetails{
  padding-top: 0;
}
.warrantySatusPage{
  display: flex;
  width: 100%;
  overflow: hidden;
}
.warrantyListPage{
  width: 100%;
}
.headingBoxWrap{
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: flex-start;
  padding: 30px 0;
  border-bottom: 1px solid rgba(112, 112, 112, 0.3);
}
.userInfo{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.userInfo .userName{
  font-size: 36px;
  line-height: 36px;
  color: #00205B;
  font-family: "Raleway_Medium";
}
.userInfo .userLocation{
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  opacity: 0.5;
  font-family: "Raleway_Regular";
}
.userAction{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.userAction span{
  font-size: 16px;
  line-height: 19px;
  color: #8E8E8E;
  font-family: "Raleway_Regular";
}
.userAction .logoutBtn{
  display: flex;
  gap: 10px;
}
.bodyBoxWrap{
  padding: 20px 0;
}
.bodyBoxWrap .boxTitle{
  font-size: 18px;
  line-height: 19px;
  color: #00205B;
  font-family: "Raleway_SemiBold";
}
.registrationListWrap{
  display: flex;
  padding-top: 20px;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}
.registrationListWrap ul{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(112, 112, 112, 0.5);
  padding: 20px;
  border-radius: 20px;
  width: 100%;
}
.registrationListWrap ul li{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.registrationListWrap ul li .BtnStyle:hover{
  color: #FFFFFF !important;
}
.registrationListWrap ul li img{
  width: 100%;
  height: auto;
}
.topText{
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  opacity: 0.5;
  font-family: "Raleway_Regular";
}
.bottomText{
  font-size: 20px;
  line-height: 24px;
  color: #00205B;
  font-family: "Raleway_SemiBold";
}
.paginationWrap{
  padding-top: 50px;
  width: 100%;
  overflow-x: auto;
}
.paginationWrap .paginationBox{
  display: flex;
  list-style-type: none;
  gap: 10px;
  align-items: center;
}
.paginationWrap .paginationBox li{
  cursor: pointer;
  font-size: 18px;
  line-height: 21px;
  color: #9B9B9B;
  font-family: "Raleway_Bold";
}
.paginationWrap .paginationBox li.active{
  color: #E71850;
}

.warrantyDetailsPage {
  padding: 30px 0;
  position: relative;
  margin-top: 20px;
  width: 100%;
  transition: all 0.5s linear;
  padding-bottom: 0;
}

.closeBtnBox{
  position: absolute;
  top: 0px;
  right: 10px;
  cursor: pointer;
}
.topBox{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-direction: column;
  padding-bottom: 20px;
}
.middleBox {
  padding: 20px 0;
  border-bottom: 1px solid rgba(112, 112, 112, 0.5);
  border-top: 1px solid rgba(112, 112, 112, 0.5);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 30px;
}
ul.listWrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.listWrap li{
  width: 100%;
  border-left: 1px solid rgba(112, 112, 112, 0.5);
  padding-left: 50px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 5px;
}
ul.listWrap li:first-child{
  border-left: 0;
  padding-left: 0;
}
.bottomBox{
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
}
.bottomBox .leftBox{
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
}
.bottomBox .rightBox{
  width: 35%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
}
.bottomText.rejectStatus{
  color: #E71850;
}
.downloadBtn {
  background-color: rgba(0, 32, 912, 0.05);
  color: #545454;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  line-height: 14px;
  font-family: "Raleway_SemiBold";
  width: fit-content;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  padding-right: 25px;
}

.BgWrap.adminPage .mainPageWrap {
  width: 75%;
  overflow: hidden;
  padding: 40px;
}
.BgWrap.adminPage .contentInfo{
  width: 75%;
  overflow: hidden;
  padding: 40px;
  margin-top: 20px;
}
.pendingApprovalsList{
  display: block;
  padding: 20px 0;
}
.pendingApprovalsList table{
  font-family: "Raleway_Regular";
  border-collapse: collapse;
  width: 100%;
}
.pendingApprovalsList table th {
  border-left: 1px solid rgba(112, 112, 112, 0.5);
  padding: 8px 15px;
  font-family: "Raleway_Regular";
  text-align: left;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  opacity: 0.5;
}
.pendingApprovalsList table th:first-child,
.pendingApprovalsList table th:last-child{
  border: 0;
}
.pendingApprovalsList table td {
  border-bottom: 1px solid rgba(112, 112, 112, 0.5);
  text-align: left;
  font-family: "Raleway_SemiBold";
  font-size: 20px;
  line-height: 24px;
  color: #00205B;
  padding: 15px;
  border-left: 1px solid rgba(112, 112, 112, 0.5);
}
.pendingApprovalsList table td:first-child,
.pendingApprovalsList table td:last-child{
  border-left: 0;
}
.pendingApprovalsList table td a {
  color: #E71850;
  font-size: 16px;
  line-height: 19px;
  font-family: "Raleway_SemiBold";
  cursor: pointer;
}
.backBox{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.backBox .backBtn{
  color: #00205B;
  font-size: 16px;
  line-height: 19px;
  font-family: "Raleway_SemiBold";
}

.adminWarrantyDetailsWrap .bodyBoxWrap .boxTitle{
  font-size: 16px;
}
.adminWarrantyDetailsWrap .approvalDetailsBox.bodyBoxWrap .boxTitle{
  color: #989898;
}
.adminWarrantyDetailsWrap .approvalDetailsBox.bodyBoxWrap .boxTitle a{
  color: #00205B;
  cursor: pointer;
}
.ListNameWrap{
  color: #E2164E;
  font-size: 20px;
  line-height: 24px;
  font-family: "Raleway_Bold";
}
.adminWarrantyDetailsWrap .middleBox{
  border-top: 0;
  padding: 30px 0;
}
.middleBox.productDetailsList ul.listWrap{
  align-items: flex-start;
}
.middleBox.productDetailsList ul.listWrap li{
  padding: 0 25px;
  border-right: 1px solid rgba(112, 112, 112, 0.5);
  border-left: 0;
}
.middleBox.productDetailsList ul.listWrap li:first-child{
  padding-left: 0;
}
.middleBox.productDetailsList ul.listWrap li:last-child{
  border-right: 0;
  padding-right: 0;
}
.adminWarrantyDetailsWrap .middleBox:nth-child(3){
  border-bottom: 0;
}
.adminWarrantyDetailsWrap .bottomBox{
  flex-wrap: wrap;
  flex-direction: column;
  gap: 50px;
}

.adminWarrantyDetailsWrap .bottomBox .leftBox{
  width: 50%;
}
.adminWarrantyDetailsWrap .bottomBox .rightBox{
  flex-direction: row;
  width: 50%;
}
.adminWarrantyDetailsWrap .bottomBox .rightBox .BtnStyle2{
  border-radius: 5px;
}
.adminWarrantyDetailsWrap {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.approvalBox {
  width: 100%;
}

.approvalDetailsBox {
  padding-top: 30px;
  position: relative;
  margin-top: 20px;
  width: 100%;
  transition: all 0.5s linear;
}
.BgWrap.faqPage .mainPageWrap {
  width: 75%;
  overflow: hidden;
  padding: 40px;
}
.BgWrap.faqPage .contentInfo {
  width: 75%;
  overflow: hidden;
  padding: 40px;
  margin-top: 20px;
}
.faqWrap{
  display: block;
  padding: 20px 0;
}
.faqBox{
  padding: 20px 0;
  border-bottom: 1px solid rgba(112, 112, 112, 0.5);
}
.faqBox .faqTitle{
  color: #00205B;
  font-size: 18px;
  line-height: 21px;
  font-family: "Raleway_SemiBold";
  position: relative;
  cursor: pointer;
  padding-right: 50px;
}
.faqBox .faqContent{
  display: none;
  color: #000000;
  opacity: 0.7;
  font-size: 18px;
  line-height: 24px;
  font-family: "Raleway_Medium";
  padding-top: 20px;
  padding-right: 50px;
}
.faqBox .faqContent.active{
  display: block;
}
.faqTitle::before{
  content: "";
  display: inline-flex;
  width: 10px;
  height: 10px;
  position: absolute;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: rotate(-45deg);
  margin-right: 10px;
  margin-bottom: 0.3rem;
  border-color: #E81056;
  right: 0;
  transition: all 0.5s linear;
}
.faqTitle.active::before{
  transform: rotate(135deg);
  margin-bottom: -0.3rem;
  top: -2px;
  transition: all 0.5s linear;
}

.BgWrap.supportPage .mainPageWrap {
  width: 75%;
  overflow: hidden;
  padding: 40px;
}
.BgWrap.supportPage .contentInfo {
  width: 75%;
  overflow: hidden;
  padding: 40px;
  margin-top: 20px;
}
.supportWrap{
  display: block;
  padding: 20px 0;
}
.supportList{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.supportList .supportListBox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 5px;
  padding: 0 40px;
  border-left: 1px solid #707070;
}
.supportList .supportListBox:first-child{
  border-left: 0;
}
.supportList .supportListBox img{
  width: 25px;
  height: 25px;
}
.supportList .supportListBox .supportTitle{
  color: #000000;
  opacity: 0.5;
  font-size: 16px;
  line-height: 19px;
  font-family: "Raleway_Regular";
  padding-top: 5px;
}
.supportList .supportListBox .supportInfo{
  color: #00205B;
  font-size: 24px;
  line-height: 29px;
  font-family: "Raleway_SemiBold";
}
.supportList .supportListBox .supportInfo a:hover{
  color: inherit !important;
}

.BgWrap.personalInfoPage .mainPageWrap {
  width: 75%;
  overflow: hidden;
  padding: 40px;
}
.BgWrap.personalInfoPage .contentInfo {
  width: 75%;
  overflow: hidden;
  padding: 40px;
  margin-top: 20px;
}
.personalWrapPage{
  padding: 30px 0;
  position: relative;
  margin-top: 20px;
  width: 100%;
  transition: all 0.5s linear;
  padding-bottom: 0;
}
.personalWrapPage .middleBox{
  border-bottom: 0;
}
.formRegistrationWrap .form-feild-box.terms{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.formRegistrationWrap .form-feild-box .checkBoxWrap label {
  color: #222222;
  font-size: 1rem;
  padding: 10px 0;
  z-index: 0;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.formRegistrationWrap .form-feild-box .checkBoxWrap label a {
  color: #E71850;
  display: contents;
}

.formRegistrationWrap .form-feild-box .checkBoxWrap .checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.formRegistrationWrap .form-feild-box .checkBoxWrap .checkmark {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 1px solid #E71850;
  margin-right: 10px;
}
.formRegistrationWrap .form-feild-box .checkBoxWrap .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  width: 5px;
  height: 10px;
  border: solid #E71850;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  left: 5px;
  border-width: 0 2px 2px 0;
}
.formRegistrationWrap .form-feild-box .checkBoxWrap .checkBox input:checked ~ .checkmark:after {
  display: block;
}
.error-message{
  color: #E71850;
  position: absolute;
  width: 100%;
  bottom: -11px;
  left: 0;
  text-align: left;
  padding: 0 10px;
  margin: 0 10px;
}

.formRegistrationWrap .error-message{
  top: 45px;
  bottom: auto;
}
.formRegistrationWrap .formFieldBox.radioType .error-message{
  bottom: -11px;
  top: auto;
}
#updateForm .adminBtns{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* date picker */
#ui-datepicker-div {
	display: none;
	background-color: #fff;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
	margin-top: 0.25rem;
	border-radius: 0.5rem;
	padding: 0.5rem;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.ui-datepicker-calendar thead th {
	padding: 0.25rem 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 400;
	color: #78909c;
}
.ui-datepicker-calendar tbody td {
	width: 2.5rem;
	text-align: center;
	padding: 0;
}
.ui-datepicker-calendar tbody td a {
	display: block;
	border-radius: 0.25rem;
	line-height: 2rem;
	transition: 0.3s all;
	font-size: 0.875rem;
	text-decoration: none;
}
.ui-datepicker-calendar tbody td.ui-state-disabled a{
    color: #546e7a;
}
.ui-datepicker-calendar tbody td a:hover {
	background-color: #e7194f70;
    color: #FFFFFF;
}
.ui-datepicker-calendar tbody td a.ui-state-active {
	background-color: #E7194F;
	color: #FFFFFF;
}
.ui-datepicker-today a.ui-state-default.ui-state-highlight{
    background-color: #E7194F;
	color: #FFFFFF;
    border: 1px solid #000;
}
.ui-datepicker-header a.ui-corner-all {
	cursor: pointer;
	position: absolute;
	top: 0;
	width: 2rem;
	height: 2rem;
	margin: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.3s all;
}
.ui-datepicker-header a.ui-corner-all:hover {
	background-color: #eceff1;
}
.ui-datepicker-header a.ui-datepicker-prev {
	left: 0;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-size: 0.5rem;
	background-position: 50%;
	transform: rotate(180deg);
}
.ui-datepicker-header a.ui-datepicker-next {
	right: 0;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-size: 10px;
	background-position: 50%;
}
.ui-datepicker-header a > span {
	display: none;
}
.ui-datepicker-title {
	width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    margin: 0 auto;
    gap: 10px;
    margin-bottom: 20px;
    padding-top: 5px;
}
select.ui-datepicker-month,
select.ui-datepicker-year{
    width: -webkit-fill-available;
    border: 0;
    height: 25px;
    background-position: right 10px center;
}
select:focus{
    outline: none;
}
.ui-datepicker-week-col {
	color: #78909c;
	font-weight: 400;
	font-size: 0.75rem;
}
.formRegistrationWrap .formFieldBox .dateBox{
  position: relative;
}

.formRegistrationWrap .formFieldBox .dateBox:before {
  content: "";
  background: url('../images/date-icon.png') no-repeat;
  width: 16px;
  height: 15px;
  background-position: center center;
  background-size: contain;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* date picker */

.radioLabel {
  position: relative;
  display: inline-flex;
  padding-left: 20px;
}

label.radioLabel:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border: 2px solid #E7194F;
  border-radius: 50%;
}
label.radioLabel:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #E7194F;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s linear;
}
/* input:valid + label:after {
  opacity: 1;
  transition: all 0.5s linear;
} */
[type="radio"]:checked + label:after{
  opacity: 1;
  transition: all 0.5s linear;
}
.registrationPageWrap .formFieldWrap .formFieldBox.radioType{
  display: flex;
  gap: 30px;
  justify-content: center;
  padding-bottom: 10px;
  width: auto;
}
.registrationPageWrap .formFieldWrap .formFieldBox.radioType input{
  display: none;
}
@media only screen and (min-width: 1500px) {
  .BgWrap .mainPageWrap.loginPageWrap{
    width: 45%;
  }
  .BgWrap .registrationPageWrap{
    width: 55%;
  }
  .BgWrap.userPage .mainPageWrap{
    width: 60%;
  }
  .BgWrap.userPage .contentInfo{
    width: 60%;
  }
  .BgWrap.adminPage .mainPageWrap{
    width: 60%;
  }
  .BgWrap.adminPage .contentInfo{
    width: 60%;
  }
  .BgWrap.faqPage .mainPageWrap{
    width: 60%;
  }
  .BgWrap.faqPage .contentInfo{
    width: 60%;
  }
  .BgWrap.supportPage .mainPageWrap{
    width: 60%;
  }
  .BgWrap.supportPage .contentInfo{
    width: 60%;
  }
  .BgWrap.personalInfoPage .mainPageWrap{
    width: 60%;
  }
  .BgWrap.personalInfoPage .contentInfo{
    width: 60%;
  }
}


@media only screen and (max-width: 820px) {
  .container{
    padding: 0 12px;
  }
  .topHeading {
    font-size: 26px;
  }
  .BgWrap{
    background-size: auto;
  }
  .pt-11 {
    padding-top: 30%;
  } 
  .BgWrap .mainPageWrap.loginPageWrap{
    width: 100%;
  }
  .boxHeader .tabBox{
    padding: 20px 10px;
  }
  .boxHeader .tabBox span{
    line-height: 20px;
  }
  .boxBody{
    width: 100%;
  }
  .loginPageWrap .formHeading {
    font-size: 18px;
    line-height: 24px;
  }
  .loginForm{
    width: 100%;
  }
  .BgWrap .registrationPageWrap {
    width: 100%;
  }
  .registrationPageWrap .progressHeader{
    overflow: hidden;
    overflow-x: auto;
  }
  .registrationPageWrap .progressHeader .step{
    padding-left: 25px;
  }
  .registrationPageWrap .progressHeader .step:first-child{
    padding-left: 0;
  }
  .registrationPageWrap .formFieldWrap .formFieldBox{
    width: calc((100% / 1) - 5px);
  }
  .registrationPageWrap .fromStepTwo .formFieldWrap .formFieldBox {
    width: calc((100% / 1) - 5px);
  }
  .uploadBtnWrap{
    flex-wrap: wrap;
  }
  .flex-action-btn{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
  .flex-action-btn .BtnStyle.prev{
    width: 45%;
  }
  .flex-action-btn .BtnStyle{
    width: 45%;
    padding: 10px 15px;
  }
  .BgWrap.userPage .mainPageWrap{
    width: 100%;
    padding: 25px 20px 20px 20px;
  }
  .BgWrap.userPage .contentInfo{
    width: 100%;
    padding: 25px 20px 40px 20px;
  }
  .mainPageWrap .tabWrap{
    flex-wrap: wrap;
    width: 100%;
    border-radius: 0;
  }
  .mainPageWrap .menuTabs{
    min-width: 250px;
    border-radius: 0 !important;
    width: calc((100% / 2 - 1px));
  }
  .mainPageWrap .menuTabs a{
    justify-content: flex-start;
    padding: 10px;
  }
  .headingBoxWrap{
    flex-wrap: wrap;
    gap: 20px;
  }
  .userAction{
    align-items: flex-start;
  }
  .registrationListWrap ul{
    width: 100%;
    overflow-x: auto;
    gap: 20px;
    flex-wrap: wrap;
  }
  .registrationListWrap ul li{
    min-width: fit-content;
  }
  .registrationListWrap ul li img{
    width: 40px;
  }
  ul.listWrap{
    flex-wrap: wrap;
  }
  ul.listWrap li{
    width: calc(100% / 1);
    padding: 10px 0;
    border-bottom: 1px solid rgba(112, 112, 112, 0.5);
    border-left: 0;
  }
  ul.listWrap li:first-child{
    border-top: 0;
  }
  .bottomBox{
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 0;
  }
  .bottomBox .leftBox{
    width: 100%;
    gap: 0;
  }
  .bottomBox .rightBox{
    width: 100%;
    gap: 10px;
  }
  .middleBox{
    padding: 0;
    gap: 0;
    border-bottom: 0;
  }
  .BgWrap.adminPage .mainPageWrap{
    width: 100%;
    padding: 25px 20px 20px 20px;
  }
  .BgWrap.adminPage .contentInfo{
    width: 100%;
    padding: 25px 20px 40px 20px;
  }
  .pendingApprovalsList table{
    overflow-x: auto;
    white-space: nowrap;
    display: block;
    padding-bottom: 10px;
  }
  .pendingApprovalsList table::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .pendingApprovalsList table::-webkit-scrollbar-thumb {
    background-color: #e7194f;
    height: 1px;
    border-radius: 10px;
    cursor: pointer;
  }
  .pendingApprovalsList table::-webkit-scrollbar-track {
    background-color: #b6b3b3;
  }
  .adminWarrantyDetailsWrap .middleBox{
    padding-bottom: 0;
  }
  .middleBox.productDetailsList ul.listWrap li{
    padding: 10px 0;
    border-right: 0;
  }
  .adminWarrantyDetailsWrap .bottomBox{
    padding-top: 20px;
    gap: 20px;
  }
  .adminWarrantyDetailsWrap .bottomBox .leftBox{
    width: 100%;
    gap: 10px;
  }
  .adminWarrantyDetailsWrap .bottomBox .rightBox{
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
  }
  .BgWrap.faqPage .mainPageWrap{
    width: 100%;
    padding: 25px 20px 20px 20px;
  }
  .BgWrap.faqPage .contentInfo{
    width: 100%;
    padding: 25px 20px 40px 20px;
  }
  .faqTitle.active::before{
    top: 5px;
  }
  .faqBox .faqTitle{
    padding-right: 30px;
  }
  .faqBox .faqContent{
    padding-right: 30px;
  }
  .BgWrap.supportPage .mainPageWrap{
    width: 100%;
    padding: 25px 20px 20px 20px;
  }
  .BgWrap.supportPage .contentInfo{
    width: 100%;
    padding: 25px 20px 40px 20px;
  }
  .supportList{
    flex-direction: column;
  }
  .supportList .supportListBox{
    padding: 20px 0;
    border-top: 1px solid #707070;
    border-left: 0;
  }
  .supportList .supportListBox:first-child{
    border-top: 0;
  }
  .supportList .supportListBox .supportInfo{
    word-break: break-word;
  }
  .BgWrap.personalInfoPage .mainPageWrap{
    width: 100%;
    padding: 25px 20px 20px 20px;
  }
  .BgWrap.personalInfoPage .contentInfo{
    width: 100%;
    padding: 25px 20px 40px 20px;
    overflow-x: auto;
  }
  .BgWrap.personalInfoPage .contentInfo::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .BgWrap.personalInfoPage .contentInfo::-webkit-scrollbar-thumb {
      background-color: #e7194f;
      height: 1px;
      border-radius: 10px;
      cursor: pointer;
  }
  .BgWrap.personalInfoPage .contentInfo::-webkit-scrollbar-track {
      background-color: #b6b3b3;
  }
}
@media only screen and (max-width: 767px){
  .mainPageWrap .menuTabs{
    width: 100%;
  }
  .userAction .logoutBtn{
    flex-wrap: wrap;
  }
  
}


#updateForm .formFieldBox.boxBody input{
  text-align: left;
}
.BgWrap .mainPageWrap.thankYouPage {
  width: 52%;
}
.thankYouPage .formHeading{
  margin-bottom: 0;
  line-height: 24px;
}
.select2-container--default .select2-selection--single{
  border-radius: 0px;
  border: 0;
  border-bottom: 2px solid #CCDEFF;
  text-align: left;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #545454;
  font-size: 14px;
  line-height: 16px;
  font-family: "Raleway_Regular";
  background: url("../images/select-down.png") no-repeat;
    background-position: right center;
    background-size: auto;
    padding-right: 25px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  display: none;
}
.formFieldsForRegistration{
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
}
.registrationPageWrap .formRegistrationWrap .formFieldsForRegistration:has(.formFieldBox .error-message:not(:empty)){
  row-gap: 45px;
}
.fieldsGroupHeading{
  width: 100%;
    text-align: left;
    margin: 0 10px;
    color: #00205B;
    padding: 0 10px;
    margin-top: 10px;
}
.uploadBtnWrap{
  align-items: flex-start;
}
.uploadFeild{
  position: relative;
}
.uploadFeild lable{
  border: 1px solid #707070;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 14px;
    font-family: "Raleway_SemiBold";
    color: #545454;
    top: 10px;
    position: relative;
}
.uploadFeild input{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:0;
  padding: 0;
  margin: 0;
}
.uploadedFiles{
  padding-top: 20px;
}
.uploadedFiles li{
  gap: 20px;
  text-align: left;
}
.registrationPageWrap .formRegistrationWrap .uploadBtnWrap:has(.uploadFeild .error-message:not(:empty)){
  row-gap: 55px;
}
.uploadedFiles li .remove-button{
  cursor: pointer;
}

.registrationPageWrap .formRegistrationWrap .firstSetpFields:has(.formFieldBox .error-message:not(:empty)){
  row-gap: 25px;
}
.registrationPageWrap .boxBody form .fromSteps .flex-action-btn{
  padding-top: 40px;
}
.registrationPageWrap .boxBody form .fromSteps .uploadBtnWrap{
  width: 100%;
}
.formRegistrationWrap .form-feild-box.terms{
  width: auto;
  top:30px;
}

/* for otp send login form */
/* CSS for overlay and loader */
#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  z-index: 9999;
  display: none; /* Initially hidden */
}

#loader {
  position: fixed;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  margin-top: -60px; /* Half of the height */
  margin-left: -60px; /* Half of the width */
  animation: spin 2s linear infinite; /* Apply rotation animation */
  z-index: 10000;
  display: none; /* Initially hidden */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.editUserPage .registrationPageWrap .boxBody .formRegistrationWrap{
  width: 100%;
}
@media only screen and (max-width: 767px){
	.formFieldsForRegistration{
		row-gap: 20px;
	}
}
.num-list-tc {
            list-style-type: decimal;
            padding-left: 1rem;
        }

        .list-with-disc {
            list-style-type: disc;
            padding-left: 2rem;
        }

        .alpha-list-tc {
            list-style-type: upper-alpha;
            padding-left: 2rem;
        }

        .tc-table {
            margin: unset;
        }
 /*@keyframes blink {
	0% { background-color: yellow; }
	50% { background-color: transparent; }
	100% { background-color: yellow; }
}*/

.blinking-row td{
	color:#E9004B !important;
}
.downloadcontainer{
	position: relative;right:0;
}

/* Search Form Container Start */
.formsearchcontainer {
    display: flex;
    align-items: center;
	margin-bottom:30px;
}

.formsearchcontainer .formFieldBox {
    display: flex;
    align-items: center;
}

.formsearchcontainer .formFieldBox select,
.formsearchcontainer .formFieldBox input {
    margin-right: 10px; /* Adjust spacing between select and input */
}

.formsearchcontainer .adminBtns {
    margin-left: 10px; /* Optional: adjust spacing between input and button */
}
/* Search Form Container End */