button.swal2-cancel.swal2-styled {
  color: black !important;
  border: 1px solid black !important;
  border-radius: 20px !important;
}

button.swal2-confirm.swal2-styled {
  border-radius: 20px !important;
}

.upload-profile-img-modals {
  text-align: center;
  padding: 29px 0px;
  background-color: #f4f5f8;
}

.profile-imgs {
  background-color: #878787;
  color: white;
  border: 0px;
  border-radius: 20px;
  padding: 3px 22px;
  font-size: 18px;
  font-weight: 500;
}

.kyc-imgs {
  background-color: #878787;
  color: white;
  border: 0px;
  border-radius: 20px;
  padding: 3px 22px;
  font-size: 18px;
  font-weight: 500;
}

#profile-img-name {
  margin-top: 16px;
  color: grey;
  font-size: 18px;
  font-weight: 500;
}

p#profile-img-size {
  font-size: 18px;
  color: #afaaaa;
  margin-bottom: 0px;
}

/*----------------------------------------------------*/

div#mywallet2 {
  /*margin-top: 620px !important;*/
  /*height: 4.5vh !important;*/
}

div#main_container {
  top: 157px !important;
  /*position: absolute !important;*/
}

.main_container .main_heading {
  display: none !important;
}

.div_view_more {
  bottom: 15% !important;
}

div#myorders_header {
  display: none !important;
}

div#main-div {
  height: 516px !important;
}

/*-----------------------------------------------------------*/
div#myprofile {
  background-color: white;
}

.input-group-addon.pl-1 {
  margin-top: -54px !important;
  margin-left: 230px !important;
}

div#mobile-verify {
  margin-top: 28px;
  margin-bottom: 41px;
}

i#PROFILE {
  background-color: #878787;
  padding: 11px 28px;
  font-size: 87px;
}

#main #myaccount .card {
  /* margin-bottom: 13px; */
  border: 1px solid;
  border-left: 0px;
  border-right: 0px;
}

#main #myaccount .card .card-header {
  border: 0;
  border-radius: 0px;
  padding: 0;
  background-color: #f1f3f7;
}

#main #myaccount .card .card-header .btn-header-link {
  color: #fff;
  display: block;
  text-align: center;
  background: #f1f3f7;
  color: #222;
  padding: 10px;
  font-weight: 600;
  font-size: 18px;
}

#main #myaccount .card .card-header .btn-header-link:after {
  content: "\f106";
  font-weight: 900;
  float: right;
  color: rgb(206, 15, 15);
  font-size: 22px;
  font-family: "FontAwesome";
}

#main #myaccount .card .card-header .btn-header-link.collapsed {
  background: #f1f3f7;
  color: #5d6471;
  border: 2px solid #d4d4d3;
  border-left: 0px;
  border-right: 0px;
  font-weight: 600;
  font-size: 18px;
}

#main #myaccount .card .card-header .btn-header-link.collapsed:after {
  content: "\f107";
}

#main #myaccount .card .collapsing {
  background: #f1f3f7;
  line-height: 30px;
}

#main #myaccount .card .collapse {
  border: 0;
}

#main #myaccount .card .collapse.show {
  background: white;
  line-height: 30px;
  color: #222;
}

body {
  background-color: white !important;
}

/*-----------------------------------------------------------*/
label#login-buttonn {
  border: 0px;
  background-color: #a21c1c;
  color: white;
  padding: 10px 25px;
  border-radius: 20px;
  font-size: 19px;
  font-weight: 500;
  margin-top: 14px;
}

/*-----------------------------BANK DETAILS CSS START----------------*/
.cam-icons {
  color: #fff;
  text-align: center;
  margin-left: -55px;
  border-radius: 50%;
  padding: 5px 7px;
  font-size: 18px;
  font-weight: bolder;
}

.form-check-input[type="checkbox"] {
  border-radius: 0.25em;
  border: 2px solid !important;
  margin-top: 6px !important;
}

/*-----------------------------BANK DETAILS CSS END----------------*/
.input-field {
  width: 100%;
  margin-bottom: 10px;
}

input-field i {
  position: absolute;
}

.icon {
  color: #fff;
  text-align: center;
  margin-left: -55px;
  background-color: green;
  border-radius: 50%;
  padding: 5px 7px;
  font-size: 18px;
  font-weight: bolder;
}

.icons {
  color: #fff;
  text-align: center;
  margin-left: -55px;
  background-color: rgb(183, 9, 9);
  border-radius: 50%;
  padding: 5px 7px;
  font-size: 18px;
  font-weight: bolder;
}

/* ------------------ Header css start -----------------*/
img#logo {
  width: 46%;
  margin-top: 13px;
}

/* ------------------ Header css end ------------------*/
/*----------------- Menu css start ------------------ */
button#img-update-btns {
  font-size: 16px;
  background-color: #ad1b26;
  color: white;
  border-radius: 20px;
  padding: 5px 20px;
}

button#img-cancel-btns {
  color: black;
  background-color: #fff;
  font-size: 16px;
  border-radius: 20px;
  padding: 5px 20px;
}

.w3-sidebar {
  height: 100%;
  width: 230px;
  background-color: black;
  position: fixed !important;
  z-index: 1;
  color: white;
  overflow: auto;
}

.w3-card,
.w3-card-2 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

div#rightMenu a {
  display: flex;
}

button.w3-button.w3-teal.w3-xlarge.w3-right {
  float: right;
  margin-top: 12px;
  width: 38px;
  height: 34px;
  font-size: 24px;
  font-weight: bold;
  border-radius: 5px;
}

a.w3-bar-item.w3-button {
  color: white;
  padding: 10px 20px;
  font-size: 20px;
  border-bottom: 2px solid grey;
}

button.w3-bar-item.w3-button.w3-large {
  margin-bottom: 20px;
  background-color: #d31616;
  color: white;
  margin-right: 2px;
  font-size: 32px;
  margin-left: 12pc;
  margin-top: 3px;
  width: 38px;
}

a.w3-bar-item.w3-button.first {
  border-top: 2px solid grey;
  margin-top: -65px;
}

/*----------------- Menu css end ------------------ */
/*---------------- Tab css start --------------------*/
.tabs {
  background-color: white;
  color: black;
  padding: 1px 3px 12px 3px;
  font-size: 14px;
  /* border-radius: 8px; */
  margin-left: 3px;
  width: 89%;
  border-bottom: 5px solid #c80c0c;
  text-align: center;
  font-weight: 700;
}

.inactiveTab {
  background-color: white;
  color: grey;
  border: 2px solid transparent;
  text-align: center;
  font-size: 14px;
  padding: 0px;
}

div#tabs:nth-last-child(1) {
  border-right: 0px;
}

div#tabs {
  border-right: 2px solid black;
  width: 19%;
  height: 46px;
  padding: 0px;
}

/*--------------------Tab Css End----------------------*/
body {
  margin: 0;
  padding: 0;

  /* make it look decent enough */
  /* background: #232323;
    color: #cdcdcd; */

  overflow-x: hidden;
  /* needed because hiding the menu on the right side is not perfect,  */
}

.main-heads {
  background-color: #d6d6d6;
  text-align: center;
  padding: 7px 0px;
  color: black;
  height: 46px;
  margin-top: 7px;
}

.change-pass-sec {
  margin-top: 25px;
  text-align: center;
}

.myadd-sec {
  margin-top: 25px;
  text-align: center;
}

.personal-det-sec {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 40px;
}

.bank-det-sec {
  margin-top: 25px;
  text-align: center;
}

.input-field input {
  border-radius: 20px;
  margin-bottom: 9px;
  padding: 10px 10px;
  border: 2px solid black;
  text-align: center;
  width: 78%;
  margin-top: 33px;
  background-color: #f4f6fb;
}

.input-fields input {
  border-radius: 20px;
  margin-bottom: 9px;
  padding: 10px 10px;
  border: 2px solid black;
  text-align: center;
  width: 59%;
  margin-top: 10px;
  background-color: #f4f6fb;
}

.input-field textarea {
  margin-top: 10px;
  text-align: center;
  padding: 10px 10px;
  width: 78%;
  border: 2px solid black;
  border-radius: 18px;
  background-color: #f4f6fb;
}

button#change-password {
  border: 0px;
  background-color: #a21c1c;
  color: white;
  padding: 10px 71px;
  border-radius: 20px;
  font-size: 19px;
  font-weight: 500;
}

button#update-profile {
  border: 0px;
  background-color: #a21c1c;
  color: white;
  padding: 10px 71px;
  border-radius: 20px;
  font-size: 19px;
  font-weight: 500;
  margin-top: 14px;
  position: relative;
  transition: transform 0.2s ease;
  cursor: pointer;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
}

/*----------------- Animation code start ---------------------*/
button#update-profile:hover {
  transition-duration: 0.1s;
  background-color: #c22222;
}

button#update-profile:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  width: 100%;
  /* height: 100%; */
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px rgb(7, 164, 175);
  border: 0px;
}

button#update-profile:active:after {
  box-shadow: 0 0 0 0 rgb(7, 164, 175);
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  opacity: 1;
  transition: 0s;
  border: 0px;
}

button#update-profile:active {
  top: 1px;
}

/*-------------------Animation code End -------------------------*/
button#save-addrs {
  border: 0px;
  background-color: #a21c1c;
  color: white;
  padding: 10px 71px;
  border-radius: 20px;
  font-size: 19px;
  font-weight: 500;
}

/* label#home {
    margin-right: 38px;
    text-align: justify;
    font-size: 19px;
} */

/* input.home-add {
    margin-right: 2px;
    width: 37px;
    height: 17px;
    accent-color: #be0f0f;
}

input.work-add {
    margin-right: 2px;
    width: 37px;
    height: 17px;
    accent-color: #be0f0f;
}

input.other {
    margin-right: 2px;
    width: 37px;
    height: 17px;
    accent-color: #be0f0f;
} */

/* label#other {
    float: left;
    margin-left: 8px;
    margin-top: 10px;
    font-size: 19px;
}

label#work {
    font-size: 19px;
} */

.btn.save-addrs-btn {
  margin-top: 20px;
}

.addrs-aadhaar-rel {
  border: 2px solid black;
  border-radius: 18px;
  width: 95%;
  margin-left: 10px;
  padding: 10px;
  margin-top: -16px;
}

/* label#userviable {
    border: 2px solid black;
    border-radius: 20px;
    padding: 2px 5px;
    background-color: grey;
    color: white;
} */

.nick-name {
  border: 1px solid black;
  width: 100px;
  border-radius: 20px;
  padding: 2px 9px;
  background-color: #fff;
  margin-left: -205px;
}

.bank-info1 {
  border: 2px solid black;
  border-radius: 29px;
  padding: 7px 0px;
}

.bank-info1 p {
  line-height: 10px;
  text-align: left;
  margin-left: 69px;
  color: grey;
  font-size: 18px;
  font-weight: 500;
}

.bank-info1 {
  border: 2px solid black;
  border-radius: 29px;
  padding: 32px 0px 10px 0px;
  margin-top: -17px;
  margin-bottom: 20px;
}

div#edit-delete {
  text-align: left;
  margin-left: 19px;
  margin-top: 22px;
}

button#view {
  float: right;
  margin-right: 25px;
  border: 0px;
  background-color: #a10e0e;
  color: white;
  border-radius: 20px;
  padding: 2px 16px;
  font-weight: 500;
}

button#save-details {
  margin-top: 20px;
  border: 0px;
  background-color: #a10e0e;
  color: white;
  padding: 7px 30px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  width: 275px;
}

button.another-bnk-det {
  margin-top: 20px;
  border: 0px;
  background-color: #a10e0e;
  color: white;
  padding: 7px 30px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  width: 360px;
  margin-bottom: 25px;
}

.bank-det-sec2 {
  text-align: center;
  margin-top: 22px;
}

label.upload-btn {
  background-color: #a10e0e;
  color: white;
  float: right;
  margin-right: 51px;
  border-radius: 20px;
  padding: 3px 12px;
}

label.upload-btn-front {
  background-color: #a10e0e;
  color: white;
  margin-right: 51px;
  border-radius: 20px;
  padding: 3px 12px;
  margin-left: 30px;
}

.uploa-doc2 {
  text-align: center;
  margin-top: 28px;
}

label.re-verify {
  background-color: #9c0d0d;
  color: white;
  padding: 2px 10px;
  border-radius: 20px;
  float: right;
  margin-right: 46px;
  font-weight: 500;
}

.agreement {
  margin-top: 19px;
  text-align: justify;
  color: grey;
  font-weight: 500;
  padding: 0px 10px;
}

button.save-detail {
  margin-top: 20px;
  border: 0px;
  background-color: #a10e0e;
  color: white;
  padding: 7px 30px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  width: 360px;
  margin-bottom: 25px;
}

i.fa-solid.fa-user {
  background-color: grey;
  color: white;
  padding: 20px 25px;
  font-size: 50px;
  border-radius: 50%;
  margin-top: 10px;
}

h4.change-pass-head {
  margin-top: 18px;
  margin-bottom: 46px;
  font-weight: 600;
}

h4.DOB-heads {
  margin-top: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}

h4.gender-head,
h4.contact-det-head {
  margin-top: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}

input#email_address {
  margin-top: 4px !important;
}

input#mno {
  margin-top: 31px !important;
  margin-bottom: 26px !important;
}

/* 
label.date {
    margin-right: 5px;
} */

select.day,
select.month,
select.year {
  padding: 7px 15px;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 500;
  color: grey;
  border: 3px solid black;
}

select.month {
  margin: 0px 20px;
}

input.male {
  width: 20px;
  height: 17px;
  accent-color: #c80c0c;
}

span#male {
  margin-left: 10px;
  font-size: 19px;
  font-weight: 450;
}

input.female {
  margin-left: 20px;
  width: 20px;
  height: 17px;
  accent-color: #c80c0c;
}

span#female {
  margin-left: 10px;
  font-size: 19px;
  font-weight: 450;
}

/* 
label.month {
    margin-right: 10px;
} */

.gender {
  text-align: left;
}

span#upload-pan {
  background-color: #a21c1c;
  color: white;
  padding: 3px 9px;
  border-radius: 20px;
  margin-left: 6px;
}

.doc_status_class {
  position: absolute;
  right: 10px;
  margin-right: 10px;
  margin-bottom: 64px;
  border-radius: 14px;
  height: 25px;
}

.doc_status_span_text {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
  position: relative;
  bottom: 2px;
  font-weight: 600;
}

.bd-nick-name {
  font-size: 12px !important;
  width: 55% !important;
  margin-left: -108px !important;
}

@media only screen and (min-width: 369px) and (max-width: 397px) {
  select.day,
  select.month,
  select.year {
    padding: 7px !important;
  }

  .bd-nick-name {
    font-size: 11px !important;
    width: 70% !important;
    margin-left: -45px !important;
  }

  .doc-text {
    font-size: 17px !important;
  }

  input#pancard_input {
    font-size: 17px !important;
  }

  input#idcard_input {
    font-size: 17px !important;
  }
}

@media only screen and (min-width: 300px) and (max-width: 365px) {
  select.day,
  select.month,
  select.year {
    padding: 5px 2px !important;
    font-size: 16px !important;
  }

  

  .doc-text {
    font-size: 17px !important;
  }

  input#pancard_input {
    font-size: 17px !important;
  }

  input#idcard_input {
    font-size: 17px !important;
  }
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main_container {
  display: block;
  flex-direction: column;
  /*position: fixed;*/
  width: 100%;
  /*height: 85vh;*/
  height: auto;
  background-color: white;
  border-top: 2px solid gray;
  top: 61px;
}

.main_container .main_heading {
  text-align: center;
  border-bottom: 2px solid gray;
  padding-top: 10px;
  background-color: #f4f5f8;
}

.main_content {
  background-color: #ffffff;
  height: auto;
  /*margin-bottom: 120px;*/
}

/* llll */
.total_bal {
  width: 100%;
  display: block;
  padding: 0px;
  padding-top: 10px;
}

.total_bal h4 {
  margin-bottom: 5px;
  text-align: center;
}

/* link  */
.link-row {
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  justify-items: center;
  margin-top: 10px;
}

.link-row > div {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.link-row > div > .side-border-left {
  border-left: 2px solid black;
}

.link-row > div > .side-border-right {
  border-right: 2px solid black;
}

.link-row > div > a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #9d9da1;
  font-weight: bold;
}

.link-row > div > a > span {
  display: block;
}

.grid_butn {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  justify-items: center;
  margin-top: 20px;
}

.link_butn {
  width: 100px;
  padding: 2px 0px;
  border-radius: 15px;
  font-size: 12px;
  color: white;
  border: none;
}

.bg-green {
  background: #4d9c3a;
}

.bg-red {
  background: #a21c1c;
}

.transaction_heading h4 {
  margin-top: 15px;
  text-align: center;
  font-weight: bold;
}

.transaction_container {
  width: 100%;
  margin: 0px;
  position: relative;
  display: block;
  overflow-y: scroll;
  height: 39vh;
}

.transaction_container_wallet {
  height: 43vh;
}

.div_view_more {
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2%;
  display: inline-block;
  margin-bottom: 100px;
}

.div_view_more .btn_view_more {
  display: block;
  width: 80%;
  background: #a21c1c;
  border: none;
  border-radius: 18px;
  padding: 10px;
  color: white;
  margin: auto;
  font-weight: 500;
}

/*----------------- Animation code start ---------------------*/
.div_view_more .btn_view_more:hover {
  transition-duration: 0.1s;
  background-color: #c22222;
}

.div_view_more .btn_view_more:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px rgb(7, 164, 175);
}

.div_view_more .btn_view_more:active:after {
  box-shadow: 0 0 0 0 rgb(7, 164, 175);
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  opacity: 1;
  transition: 0s;
}

.div_view_more .btn_view_more:active {
  top: 1px;
}

/*-------------------Animation code End -------------------------*/

.img-bank-logo {
  width: 35px;
  height: 35px;
  margin-top: 5px;
  margin-right: 5px;
}

.div_drawdate {
  padding: 20px;
  color: black;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  background-color: #f4f5f8;
}

.div_trans_card {
  background-color: #ffffff;
  height: 85px;
  padding: 5px;
  display: flex;
  width: 100%;
}

.img_trans_type {
  height: 70px;
  width: 40px;
  margin-top: 5px;
}

.div_trans_info_card {
  height: 70px;
  width: 100%;
  margin: 5px 15px;
  display: grid;
}

@media screen and (max-width: 320px) {
  .sidebar {
    width: 100%;
  }

  .link-row > div > a {
    padding: 0px 25px;
  }

  .link_butn {
    width: 80px;
    font-size: 9px;
  }
}




* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main_myorder_container {
    display: block;
    flex-direction: column;
    width: 100%;
    background-color: white;
    border-top: 2px solid gray;
    top: 61px;
    z-index: 1000;
}

.main_myorder_container .main_heading {
    text-align: center;
    border-bottom: 2px solid gray;
    padding-top: 10px;
    background-color: #f4f5f8;
}

#div_no_record {
    color: red;
    text-align: center;
    display: none;
    background-color: white;
    padding: 10px;
}

.div_view_more {
    height: 7%;
    width: 100%;
    text-align: center;
    background-color: white;
    margin: auto;
    /* padding: 12px; */
    padding-top: 5px;
    padding-bottom: 10px;
    /* position:fixed; */
    bottom: 2%;
}

.btnViewMore {
    background-color: white;
    text-align: center;
    display: inline;
    border: 0px;
}

.imgViewMore {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    margin-left: 10px;
}

.div_order_card {
    border: 2px solid #999ca6;
    background-color: #f4f5f6;
    border-radius: 10px;
    margin: 10px;
    padding: 0px;
    cursor: pointer;
}

.labelTitle {
    color: #626876;
    font-size: 16px;
}

.labelValues {
    color: #8d919b;
    font-size: 16px;
}

.floatLabelLeft {
    float: left;
}

.floatLabelRight {
    float: right;
}

.styleMarginPaddingZero {
    margin: 0px;
    padding: 0px;
}

.styleContentRow {
    margin: 2px 10px;
    padding: 0px;
}

.styleCheckbox {
    margin: 5px;
    font-size: 14px;
    font-weight: bold;
    color: black;
}

.myorder_accordion {
    background-color: white;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 20px;
    transition: 0.4s;
}

.myorder_active,
.myorder_accordion:hover {
    background-color: white;
}

.myorder_accordion:after {
    content: '\25bc';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.myorder_active:after {
    content: '\25bc';
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.content_panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    text-align: left;
    transition: max-height 0.2s ease-out;
}

hr {
    border: none;
    height: 2px;
    /* Set the hr color */
    color: #b5b3b3;
    /* old IE */
    background-color: #b5b3b3;
    /* Modern Browsers */
}

.datepicker {
    z-index: 2000 !important;
}



/*-----------------------------BANK DETAILS CSS START----------------*/
.cam-icons {
  color: #fff;
  text-align: center;
  /* margin-left: -55px; */
  border-radius: 50%;
  padding: 5px 7px;
  font-size: 18px;
  font-weight: bolder;
}

.form-check-input[type="checkbox"] {
  border-radius: 0.25em;
  border: 2px solid !important;
  margin-top: 6px !important;
}

.agreement {
  margin-top: 19px;
  text-align: justify;
  color: grey;
  font-family: system-ui;
  font-weight: 500;
  padding: 0px 10px;
}

/*-----------------------------BANK DETAILS CSS END----------------*/

.bd-nick-name {
  border: 1px solid black;
  width: 43%;
  border-radius: 20px;
  padding: 2px 9px;
  background-color: #fff;
  margin-left: -166px;
}

.bank-detail-head {
  margin-bottom: 15px;
  font-weight: 600;
}

.add-new-bd {
  font-weight: bold;
}

.bd-input-field input {
  border-radius: 10px;
  margin-bottom: 9px;
  padding: 15px 15px;
  border: 1px solid #c0c2c3;
  font-size: 16px;
  color: #909599;
  text-align: left;
  width: 90%;
  margin-top: 10px;
  background-color: #f1f5f6;
}

.bd-input-field select {
  border-radius: 20px;
  margin-bottom: 9px;
  border: 2px solid black;
  text-align: center;
  width: 78%;
  margin-top: 10px;
  background-color: #f4f6fb;
}

.form-select {
  display: inline;
}

.fa-clock-o {
  background-color: #ffbf00;
}

.fa-close {
  background-color: #dc143c;
}

.fa-check {
  background-color: #4aab4f;
}

#edit-view {
  color: #878787;
  font-weight: bold;
}

button.bd-save-edit-detail {
  margin-top: 20px;
  border: 0px;
  background-color: #a10e0e;
  color: white;
  padding: 10px 30px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  width: 360px;
  margin-bottom: 25px;
}

/*----------------- Animation code start ---------------------*/
button.bd-save-edit-detail:hover {
  transition-duration: 0.1s;
  background-color: green;
}

button.bd-save-edit-detail:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px rgb(7, 164, 175);
}

button.bd-save-edit-detail:active:after {
  box-shadow: 0 0 0 0 rgb(7, 164, 175);
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  opacity: 1;
  transition: 0s;
}

button.bd-save-edit-detail:active {
  top: 1px;
}

/*-------------------Animation code End -------------------------*/

button.bd-cancel-detail {
  border: 0px;
  background-color: #a10e0e;
  color: white;
  padding: 10px 30px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  width: 360px;
  margin-bottom: 25px;
}

.view-bd {
  background-color: #a21c1c;
  color: #ffffff;
  font-weight: 100;
  border-radius: 10px;
  padding: 0px 10px 0px 10px;
  display: none;
}

.bank-details-div {
  border: 2px solid black;
  border-radius: 18px;
  width: 95%;
  margin-left: 10px;
  padding: 10px;
  margin-top: 1px;
}

.ac-holder-name {
  position: relative;
}

.bd-text-align {
  text-align: left;
  margin: 0px 0px 0px 5px;
}

.upload-img-modal {
  text-align: center;
  padding: 29px 0px;
  background-color: #f4f5f8;
}

#ac_doc_img_upload_bt {
  background-color: #878787;
  color: white;
  border: 0px;
  border-radius: 20px;
  padding: 3px 22px;
  font-size: 18px;
  font-family: system-ui;
  font-weight: 500;
}

.upload-img-modal p {
  line-height: 14px;
}

p#file-name {
  margin-top: 16px;
  color: grey;
  font-size: 18px;
  font-weight: 500;
  font-family: system-ui;
}

p#img-size {
  font-size: 18px;
  color: #afaaaa;
  margin-bottom: 23px;
  font-family: system-ui;
}

button#bd-img-update-btns {
  border: 0px;
  background-color: #ad1b26;
  color: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 20px;
}

button#bd-img-cancel-btns {
  border: 3px solid;
  background-color: transparent;
  color: black;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 20px;
}

div#bdImg img {
  width: 80%;
}

div#bdImg {
  padding: 12px;
  margin-bottom: 20px;
  background-color: #373f4f;
  width: 103px;
  height: 98px;
  border-radius: 50%;
}

#ac_proof_doc_img {
  width: 100%;
  padding-bottom: 20px;
}

.bd-icon-custom {
  border-radius: 50px;
  font-size: 18px;
  padding: 5px;
  color: #ffffff;
  right: 0px;
  bottom: 2px;
  margin-left: 8px;
}

/* bluer bank details  */

.bluer_disable_div {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  position: relative;
}

.disable-overlay-bluer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto; 
  background: rgba(255, 255, 255, 0); 
}
.unblur {
  opacity: 1 !important; 
  pointer-events: auto !important; 
  user-select: auto !important;
  position: relative;
}
.kyc-show-status {
  width: 102px;
  margin: 5px auto 5px 1px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color:#bbc1c4;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  font-size: 15px;
  font-weight:bold;
}
.kyc-show-status:hover {
  background-color: #e9ecef;
}
.kyc-tick-icon {
  display: inline-block;
  margin-left: 38px;
  color: #28a745;
}
/* bluer bank details  */
.bd-text-align-right {
  text-align: left;
  float: right;
  margin: 0px 0px 0px 5px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 10px;
  line-height: 10px;
}

.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: -2px;
  background-color: white;
  border: 1px solid #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}


input:checked + .toggle-slider {
  background-color: #a21c1c;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .toggle-slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded sliders */
.toggle-slider.round {
  border-radius: 34px;
}

.toggle-slider.round:before {
  border-radius: 50%;
}

.primary-label {
    padding: 1px 10px;
    background-color: #c5f8c5;
    color: #033f03;
    border: 1px solid #033f03;
    margin-left: 10px;
    font-size: 16px;
    border-radius: 5px;
}

::placeholder {
    color: #909599;
}
 





label#userviable {
    border: 3px solid #373f4f;
    border-radius: 20px;
    padding: 2px 5px;
    background-color: #fff;
    color: #878787;
}

#add_edit_sec{
    text-align: center;
}

.add-input-field input {
    border-radius: 10px;
    margin-bottom: 9px;
    padding: 15px 15px;
    border: 1px solid #c0c2c3;
    font-size: 16px;
    color: #909599;
    text-align: left;
    width: 90%;
    margin-top: 10px;
    background-color: #f1f5f6;
}

.add-new-add {
    font-weight: bold;
}

button#save-address {
    border: 0px;
    background-color: #a21c1c;
    color: white;
    padding: 10px;
    border-radius: 25px;
    font-size: 19px;
    font-weight: 500;
    width: 50%;
    margin: 20px 0px;
}

.btn.save-address-btn {
    margin-top: 20px;
    width: 100%;
}

.add-name {
    position: relative;
}

.icon-custom {
    background-color: #4aab4f;
    border-radius: 50px;
    font-size: 24px;
    padding: 5px;
    color: #ffffff;
    position: absolute;
    right: 0px;
    bottom: 2px;
}

.addrs-aadhaar-rel {
    border: 3px solid #373f4f;
    border-radius: 18px;
    width: 95%;
    margin-left: 10px;
    padding: 10px;
    margin-top: -16px;
    color: #878787;
    background-color: #f4f5f8;
}

#edit-remove {
    color: #878787;
    font-weight: bold;
}

h4.add-top-header {
    margin-top: 18px;
    margin-bottom: 20px;
    font-weight: bold;
}

.add-input-field textarea {
    margin-top: 10px;
    text-align: center;
    padding: 10px 10px;
    width: 78%;
    border: 2px solid black;
    border-radius: 18px;
    background-color: #f4f6fb;
}

input.home-add {
    margin-right: 2px;
    width: 37px;
    height: 17px;
    accent-color: #be0f0f;
}

input.work-add {
    margin-right: 2px;
    width: 37px;
    height: 17px;
    accent-color: #be0f0f;
}

input.other {
    margin-right: 2px;
    width: 37px;
    height: 17px;
    accent-color: #be0f0f;
}

label#other {
    float: left;
    margin-left: 8px;
    margin-top: 10px;
    font-size: 19px;
}

label#work {
    font-size: 19px;
}

label#home {
    margin-right: 38px;
    text-align: justify;
    font-size: 19px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 10px;
    line-height: 10px;
  }
  
.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
  
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
  
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: -2px;
    background-color: white;
    border: 1px solid #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
  
  
input:checked + .toggle-slider {
    background-color: #a21c1c;
}
  
input:focus + .toggle-slider {
    box-shadow: 0 0 1px #2196F3;
}
  
input:checked + .toggle-slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}
  
  /* Rounded sliders */
.toggle-slider.round {
    border-radius: 34px;
}
  
.toggle-slider.round:before {
    border-radius: 50%;
}

::placeholder {
    color: #909599;
}

.all-radio-btn {
    margin-top: 5px;
    width: 90%;
    margin-left: 5%;


    background-color: white;
    padding: 10px;
    overflow-x: auto;
    display: flex;
    position: relative;
    height: 10%;
}

.all-radio-btn input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}
  .all-radio-btn .btn_transaction {
    border: 1px solid black;
    border-radius: 20px;
    font-size: 12px;
    margin: 10px;
    height: 4vh;
    min-width: 110px;
  }


.all-radio-btn label {
    position: relative;
    display: inline-flex;
    background-color: #f7fbfe;
    padding: 7px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    color: #6b6f79;
    border: 2px solid #d1d5d9;
    border-radius: 4px;
}

.all-radio-btn input[type="radio"]:checked + label {
    background-color: #f7f8fd;
    border-color: #343060;
    color: #343060;
}
.bd-icon-custom-primary-addr {
    background-color: #4aab4f;
    border-radius: 50px;
    font-size: 24px;
    padding: 5px;
    color: #ffffff;
    position: absolute;
    right: 25px;
    margin-top: -10px;
}


.change-mpin-sec {
    margin-top: 25px;
    text-align: center;
}

h4.change-mpin-head {
    margin-top: 18px;
    font-weight: 600;
}

.change-mpin-input-field input {
    border-radius: 25px;
    margin-bottom: 9px;
    padding: 10px 10px;
    border: 2px solid black;
    text-align: center;
    width: 78%;
    margin-top: 10px;
    background-color: #f4f6fb;
}

button#change-mpin {
    border: 0px;
    background-color: #a21c1c;
    color: white;
    padding: 10px 71px;
    border-radius: 20px;
    font-size: 19px;
    font-weight: 500;
    margin: 20px 0px;
}




.tabs {
    background-color: white;
    /*color: blue;*/
    padding: 1px 3px 12px 3px;
    font-size: 14px;
    /* border-radius: 8px; */
    margin-left: 3px;
    width: 89%;
    /*border-bottom: 3px solid blue;*/
    text-align: center;
    font-weight: 700;
}

.helpnavtab {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    height: 45px;
}

label#raiserequest {
    font-size: 22px !important;
    padding: 6px 6px 8px 6px !important;
    font-weight: bold !important;
}

label#requeststatus {
    font-size: 22px !important;
    padding: 6px 6px 8px 6px !important;
    font-weight: bold !important;
}

.inactiveTab {
    background-color: white;
    color: grey;
    border: 2px solid transparent;
    text-align: center;
    font-size: 14px;
    padding: 0px;
}

.div_raise_request {
    width: 100%;
    height: calc(100% - 240px);
    position: fixed;
    overflow-y: auto;
}

.main_wrap {
    padding: 12px 28px;
}

.problem_label, .subproblem_label {
    background-color: #e8eefe;
    border-radius: 10px;
    font-size: 19px;
    padding: 7px 10px;
    color: #5e70d4;
}

.div_problem, .div_subproblems {
    margin: 10px 15px;
}

.problem_selected {
    background-color: #e5e5e6;
    color: black;
}

.subproblem_selected {
    background-color: #626dd2;
    color: white;
}

.div_subproblems {
    display: none;
    margin-left: 10px;
}

/*.common-center {
    width: 100%;
    position: absolute;
    overflow: auto;
    top: 0px !important;
}*/

.subProblemContainer {
    bottom: 185px !important;
}

.uploadImageContainer {
    text-align: center;
    display: grid;
    position: fixed;
    bottom: 10%;
    width: 100%;
}

.upload-container{
    width:60px;
    height:60px;
    margin:auto;
}

.attachment-upload-container{
    width: 20%;
    height: 20%;
    margin: auto;
    padding-top: 10px;
    padding-left: 10px;
}
.upload-icon {
    display: inline-block;
    cursor: pointer;
    width: 50px; 
    height: 50px;
}

.upload-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    transition: transform 0.2s ease;
}

.upload-icon:hover .upload-image {
    transform: scale(1.1); 
}

.gap-3 {
    width: 85%;
    margin: auto;
}

.d-none {
    display: none;
}

.remove-icon{
    top: -7px; 
    right: -7px; 
    display: none; 
    border:none; 
    background:none; 
    color:red;
    font-size:32px;
}

.problemDescTextarea {
    width: 85%;
    border: 3px solid #e5e5e6;
    border-radius: 10px;
    margin: auto;    
    font-size: 18px;
    height: 40px;
}

.btnSendProblem {
    width: 100px;
    margin: auto;
    margin-top: 15px;
    font-size: 18px;
}

#requestStatusCentre {
    display: none;
}

.requestChatConatiner {
    display: flow-root;
}

/*.main_content {
    border: 2px solid #3f3f3f8f;
    margin: 15px 6px;
    background-color: #f2f2f2;
}*/

.date-time {
    color: #373e4e;
    font-size: 19px;
    padding: 4px 10px;
}

.message {
    font-size: 19px;
    color: blue;
    padding: 6px 10px;
}

.status {
    background-color: #eab977;
    padding: 2px 10px;
    font-weight: bold;
}

.text_status {
    color: blue;
    font-size: 19px;
}

.pending {
    font-size: 19px;
    color: #92288d;
}

.complaint_status {
    font-size: 19px;
    color: #5a8225;
}

.message-show {
    background-color: #8cc63e;
}

.chat {
    padding: 10px 10px 43px 10px;
    margin-top: 15px;
}

span#team_chat {
    color: #0000fe;
    font-size: 20px;
    font-weight: bold;
}

.message-by-team {
    background-color: #eab977;
    width: 85%;
    padding: 10px;
    margin: 5px 0px;
    display: flex;
    float: left;
}

.divLogo {
    width: 50px;
    height: 50px;
}

.divMsg {
    width: calc(100% - 50px);
}


.message-by-user {
    background-color: #eab977;
    width: 85%;
    padding: 10px;
    margin: 5px 0px;
    display: flex;
    float: right;
}

span#logo img {
    width: 100%;
}

span#text {
    color: #0000fe;
    font-size: 19px;
    font-weight: bold;
}

span#times {
    margin-top: 26px;
    margin-left: 9px;
    color: #0000fe;
    font-size: 18px;
    font-weight: 300;
}

.text-box {
    margin-top: 15px;
    color: #9e005d;
    font-size: 19px;
    font-weight: 600;
    width: 100%;
}

button.reply-btn {
    color: blue;
    border: 0px;
    background-color: transparent;
    font-size: 20px;
    font-weight: bold;
}

span#user img {
    width: 90%;
    float: right;
    margin-right: 5px;
}

span#time {
    color: #0000fe;
    font-size: 18px;
}
@media only screen and (min-width: 270px) and (max-width: 350px) {
label#raiserequest {
    font-size: 17px !important;
  }
  label#requeststatus {
    font-size: 17px !important;
   }
   .uploadImageContainer {
    bottom: 14%!important;
  }
}
@media only screen and (min-width: 352px) and (max-width: 365px) {
    label#raiserequest {
        font-size: 19px !important;
    }
    label#requeststatus {
        font-size: 19px !important;
       }
}

h2 {
    text-align: center;
}

.col-12 {
    margin-top: 2px;
    margin-bottom: 2px;
}

#header {
    background: #f1f3f7;
    color: #222;
    height: 50px;
    padding-top: 7px;
    border: 1px solid #d4d4d3;
}

#main_div {
    margin-left: 10px;
    margin-right: 10px;
}

body {
    background-color: #fff !important;
}

/*--------------------------------------------------------------*/
div#main {
    height: 70vh;
    overflow-y: scroll;
}

div#header h2 {
    font-size: 27px;
}

#main #faq .card {
    border: 3px solid #bdbdbe;
    border-radius: 13px;
    padding: 2px;
    margin-bottom: 8px;
}

#main #faq .card .card-header {
    border: 0;
    border-radius: 0px;
    padding: 0;
    background-color: #f1f3f7;
}

#main #faq .card .card-header .btn-header-link {
    display: block;
    /* text-align: center; */
    background: #f1f3f7;
    color: #5d6471;
    padding: 10px;
    font-weight: 600;
    font-size: 18px;
    text-align: justify !important;
    white-space: wrap !important;
}

#main #faq .card .card-header .btn-header-link:after {
    content: "\f106";
    font-weight: 900;
    float: right;
    font-family: 'FontAwesome';
    color: rgb(206, 15, 15);
    font-size: 22px;
}

#main #faq .card .card-header .btn-header-link.collapsed:focus {
    outline: none;
}

#main #faq .card .card-header .btn-header-link:focus {
    outline: none;
}

#main #faq .card .card-header .btn-header-link.collapsed {
    background: #f1f3f7;
    color: #5d6471;
    border-left: 0px;
    border-right: 0px;
    font-weight: 600;
    font-size: 18px;
}

#main #faq .card .card-header .btn-header-link.collapsed:after {
    content: "\f107";
}

#main #faq .card .collapsing {
    background: #f1f3f7;
    line-height: 30px;
}

#main #faq .card .collapse {
    border: 0;
}

#main #faq .card .collapse.show {
    background: #f1f3f7;
    line-height: 30px;
    color: #222;
}

.card-body {
    padding: 0.25rem !important;
    color: #787575 !important;
    font-size: 18px !important;
    font-weight: 500;
}



/*--------------------------------------------------------------*/