body{background-color: #F5F5F5; font-family: Poppins; font-weight: 400; font-size: 15px; color: #000;}
.login{ font-family: "Inter", serif;}
.login_left{position: fixed; left: 0; top:0; bottom: 0; width: 50%; background:#fff url('../img/login-overlay.png'); background-size: 100% 100%;}
.login_right{margin-left: 50%;}
.login_form_padding{padding: 50px 50px;}
.form-content {max-width: 550px; margin: 0 auto; padding-top: 30px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.login_logo{max-width: 220px; display: inline-block;}
.login_logo img{width: 100%;}
.app_store-icons a{display: block;}
.app_store-icons img{width: 160px; transition: transform .25s, visibility .25s ease-in;}
.app_store-icons a:hover img {transform: scale(1.1);}
.login-form {border-radius: 10px;border: 1px solid #DFDFDF; background: #FFF; max-width: 550px; margin: 0 auto;}
.login-form .header_top{color: #333; border-bottom: 1px solid #DFDFDF;}
.form-label {color: #737373;font-family: Inter; font-size: 14px; font-weight: 400;}

.login_right .form-control{border-radius: 5px; border: 1px solid #E6E6E6; background: #FFF; height: 50px; font-size: 14px; font-weight: 400; color: #000; padding: 0 16px; outline: none;}
.login_right .form-control::placeholder {color: #BABABA;}
.login_right .form-control:hover{ border-color: #000;}
.login_right .form-control:focus{ border-color: #000; box-shadow: none;}
.eye_show_box{position: absolute; right: 20px; color: #B3B3B3; font-size: 14px; top: 14px; cursor: pointer;}
.forgot-link {color: #F00000; text-decoration: underline; font-size: 14px;}
.theme_button {color: #fff; border: none; background-color: #4A7CC7; border-radius: 10px; padding: 16px; font-weight: 400;font-size: 15px;}
.theme_button:hover{background: #087DCD;}
.account-link:after{content: "";height: 2px; width: 100%; position: absolute;left: 0; background: linear-gradient(90deg, rgba(102, 102, 102, 0.00) 0%, rgba(0, 0, 0, 0.25) 65%, rgba(102, 102, 102, 0.00) 100%);}
.account-link span {background-color: #fff;color: #111; padding: 4px 14px; z-index: 2;}
.outline-button {border-radius: 15px; border: 1px solid #E4E4E4; height: 50px; display: flex; align-items: center; justify-content: center; color: #1A1A1A; }
.outline-button:hover, .outline-button:focus {background-color: #E4E4E4;}

.login_logo_mobile{max-width: 150px; margin: auto; display: none;}
.login_logo_mobile img{width: 100%;}
.sidebar-wrapper::before{content: ""; height: 400px; width: 100%; background: url('../img/crystal-ico.svg'); background-size: contain; background-repeat: no-repeat; position: absolute; bottom: 100px; z-index: -1;  mix-blend-mode: luminosity;}
.sidebar-wrapper{background: linear-gradient(180deg, #F5F5F5 0%, #ECFEF5 100%); backdrop-filter: blur(5.5px);}
.sidebar-menu > li > a.active{color: #fff !important; background: linear-gradient(130deg, #4A7CC7 0%, #4A7CC7 100%) !important;}
.sidebar-menu > li > a {color: #343434 !important; padding: 10px 15px !important; z-index: 11; font-weight: 500; border-radius: 8px;}
.sidebar-menu .treeview.active > a{background: #dbdbdb;}
.treeview-menu li .active{color: #4A7CC7 !important; font-weight: 600;}
.sidebar-menu > li > a:hover{background: linear-gradient(130deg, rgb(77 188 134 / 50%) 0%, rgb(102 191 111 / 70%) 100%);}
.page_breadcrumb h1{font-size: 1.55rem; font-weight: 700;}
.app-container{background: url('../img/content-bg.svg'); background-repeat: no-repeat; background-size: contain;}
.card{background-color: #fff; overflow: hidden; border-radius: 14px; border: solid 2px #fff;}
.welcome-note {border-radius: 15px; padding: 25px 30px; border: 2px solid #F2F5F3; background: #0C2746; box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.10); }
.breadcrumb-item a{color: #7F828F;}
.breadcrumb-item{color: #4A7CC7;}
.breadcrumb {font-size: 14px;}
.breadcrumb .home-ico {height: 14px; width: 14px; margin-right: .25rem; margin-top: -5px;}
.breadcrumb a:hover img {filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(3654%) hue-rotate(79deg) brightness(71%) contrast(112%);}
.breadcrumb a:hover {color: #4A7CC7;}
.page_breadcrumb{position: absolute; top: 19px;}
.mobile_menu{display: none;}
.mobile_menu .toggle-sidebar {z-index: 9; padding: 0; font-size: 26px;background: #4A7CC7;color: #ffffff; width: 45px; height: 45px; border: solid #fff; border-width: 2px; box-shadow: 0px 2px 4px #00000026; border-radius: 8px;}
.notify-btn { width: 50px; height: 50px; border-radius: 8px; background-color: #D8EFE4; display: flex; justify-content: center; align-items: center;}
.notify-btn:hover, .notify-btn:focus {background: #4A7CC7;}
.notify-btn:hover img, .notify-btn:focus img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7488%) hue-rotate(151deg) brightness(90%) contrast(119%);}
.notification-card{max-height: 300px; overflow-y: auto;}
.logout-btn {width: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #17B066; background: rgba(102, 191, 111, 0.15); padding: 12px 20px; border-radius: 50px;color: #4A7CC7;}
.logout-btn:hover, .logout-btn:focus {background: linear-gradient(130deg, #4A7CC7 0%, #4A7CC7 100%); color: #fff;}
.page-title {line-height: 24px; font-weight: 600; position: relative;}
.hover_card{background-color: #fff; overflow: hidden; border-radius: 14px; border: solid 2px #fff;}
.hover_card:hover{box-shadow: 6px 6px 10px 0px rgba(77, 188, 134, 0.10); border-color: rgba(77, 188, 134, 0.35);}
.hover_card.active{box-shadow: 6px 6px 10px 0px rgba(77, 188, 134, 0.10); border-color: rgba(77, 188, 134, 0.35);}
.card-ico {width: 60px; height: 60px; padding: 12px; border-radius: 12px; border: 1px solid #DEDEDE; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px;}
.card-ico img{width: 100%;}
.cursor-pointer{cursor: pointer;}
.viewlink {color: #0C2746; font-weight: 500; }
.viewlink:hover, .viewlink:focus {color: #4A7CC7;}
.act-tag {position: relative;border-radius: 50px;background: #4A7CC7; padding: 4px 10px 4px 8px; color: #fff; font-size: 12px;font-weight: 400; min-width: 70px; display: inline-flex; align-items: center;justify-content: center;}
.act-tag::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 4px;}
.table th {background-color: #E7F5EA; color: #000; font-weight: 500 !important; white-space: nowrap; line-height: 26px; border: none !important;}
.table th:first-child {border-radius: 10px 0 0 10px;}
.table th:last-child {border-radius: 0 10px 10px 0;}
.table th strong{font-weight: 500 !important;}

.custom-btn:hover {background-color: transparent; color: #4A7CC7 !important;}
.custom-btn {cursor: pointer; font-weight: 500; padding: 10px 14px; border-radius: 8px; font-size: 16px; line-height: 22px; color: #fff; background-color: #4A7CC7; border: 1px solid #4A7CC7; display: inline-flex; align-items: center; justify-content: center;}
.btn-primary:hover {background-color: transparent; color: #4A7CC7 !important;}
.btn-primary {cursor: pointer; font-weight: 500; padding: 10px 14px; border-radius: 8px; font-size: 16px; line-height: 22px; color: #fff; background-color: #4A7CC7; border: 1px solid #4A7CC7; display: inline-flex; align-items: center; justify-content: center;}
.KYC-Verification-img{max-width: 230px;}

label {color: #737373; font-weight: 400; }

.form-control {border-radius: 5px;border: 1px solid #E6E6E6;color: #000 !important;background: #FFF; min-height: 50px; box-shadow: none !important;}
.form-control::placeholder {color: #BABABA;}
.form-control:hover, .form-control:focus {border-color: #4A7CC7;}
select.form-control{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE1IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjY5NTU2NSAwLjgyNjY2OEMwLjkzNjE2NCAwLjU4NjA2OSAxLjMxMjY2IDAuNTY0MTk2IDEuNTc3OTcgMC43NjEwNUwxLjY1Mzk4IDAuODI2NjY4TDcuNSA2LjY3MjM4TDEzLjM0NiAwLjgyNjY2OEMxMy41ODY2IDAuNTg2MDY5IDEzLjk2MzEgMC41NjQxOTYgMTQuMjI4NCAwLjc2MTA1TDE0LjMwNDQgMC44MjY2NjhDMTQuNTQ1IDEuMDY3MjcgMTQuNTY2OSAxLjQ0Mzc3IDE0LjM3MDEgMS43MDkwOEwxNC4zMDQ0IDEuNzg1MDhMNy45NzkyMSA4LjExMDMxQzcuNzM4NjEgOC4zNTA5MSA3LjM2MjExIDguMzcyNzggNy4wOTY4IDguMTc1OTNMNy4wMjA3OSA4LjExMDMxTDAuNjk1NTY1IDEuNzg1MDhDMC40MzA5MDUgMS41MjA0MyAwLjQzMDkwNSAxLjA5MTMzIDAuNjk1NTY1IDAuODI2NjY4WiIgZmlsbD0iI0JBQkFCQSIvPgo8L3N2Zz4K) !important;
    background-repeat: no-repeat !important;
    background-position-x: calc(100% - 15px) !important;
    background-position-y: center !important;
    padding-right: 36px !important;
  }
.form-control::file-selector-button {min-height: 50px;}
.rd3t-leaf-node {fill: unset !important; font-weight: 600; stroke: unset !important;}
.rd3t-node {fill: unset !important; font-weight: 600; stroke: unset !important;}
.tab_bg{padding: 10px 10px; background: #E7F5EA;}
.modal-content{border: none; border-radius: 20px; box-shadow: 0px 0px 22px 0px rgba(26, 26, 26, 0.16);}
.modal-content .card{box-shadow: 0px 0px 22px 0px rgba(26, 26, 26, 0.16);}
.pl-container{box-shadow: 6px 6px 10px 0px rgba(77, 188, 134, 0.10) !important; border-color: rgba(77, 188, 134, 0.35) !important;}
.table-outer{border: none;}

.bank_card_box{padding: 20px 20px; border-radius: 15px;  background: url(../img/bank_card.png) no-repeat; background-size: 100% 100%;}

.card.hover_card .d-flex{position: relative; padding: 14px; min-height: 60px; padding-left: 75px;}
.card-ico {position: absolute; left: 0;}

.otp_input{text-align: center;}
.otp_input input{height: 40px; width: 40px !important; border-radius:6px; border:1px solid #9d9c9c;}
.otp_input input:focus{border:1px solid #9d9c9c; outline: none;}






.color_737373{color: #737373;}
.color_001449{color: #001449;}
.letter_spacing_15{letter-spacing: 15px;}
.letter_spacing_10{letter-spacing: 10px;}
.letter_spacing_5{letter-spacing: 5px;}

.fw-300{font-weight: 300 !important;}
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}
.fw-900{font-weight: 900 !important;}

.font-10{font-size: 10px !important;}
.font-11{font-size: 11px !important;}
.font-12{font-size: 12px !important;}
.font-13{font-size: 13px !important;}
.font-14{font-size: 14px !important;}
.font-15{font-size: 15px !important;}
.font-16{font-size: 16px !important;}
.font-17{font-size: 17px !important;}
.font-18{font-size: 18px !important;}
.font-19{font-size: 19px !important;}
.font-20{font-size: 20px !important;}
.font-21{font-size: 21px !important;}
.font-22{font-size: 22px !important;}
.font-23{font-size: 23px !important;}
.font-24{font-size: 24px !important;}
.font-25{font-size: 25px !important;}
.font-26{font-size: 26px !important;}
.font-27{font-size: 27px !important;}
.font-28{font-size: 28px !important;}
.font-29{font-size: 29px !important;}
.font-30{font-size: 30px !important;}
.font-31{font-size: 31px !important;}
.font-32{font-size: 32px !important;}
.font-33{font-size: 33px !important;}
.font-34{font-size: 34px !important;}
.font-35{font-size: 35px !important;}
.font-40{font-size: 40px !important;}
.font-45{font-size: 45px !important;}
.font-50{font-size: 50px !important;}
.font-60{font-size: 60px !important;}
.font-65{font-size: 65px !important;}
















/*for mobile*/
@media only screen and (max-width:760px) {
body{font-size: 15px;}
.otp_input input {height: 35px; width: 35px !important}
.mb-5 {margin-bottom: 1.5rem !important;}
.mt-5 {margin-top: 1.5rem !important;}
.mb-4 {margin-bottom: 1rem !important;}
.p-4 {padding: 1rem !important;}
.mt-4 {margin-top: 1rem !important;}
.pb-5 {padding-bottom: 1.5rem !important;}
.pt-5 {padding-top: 1.5rem !important;}
.pb-4 {padding-bottom: 1rem !important;}
.pt-4 {padding-top: 1rem !important;}
.p-5 {padding: 1.5rem !important;}
.login_left{display: none;}
.login_right{margin-left: 0%;}
.login_form_padding {padding: 20px 20px;}
.login_logo_mobile{display: block;}
.welcome-note {padding: 20px 20px;}
.page_breadcrumb {position: static;margin-bottom: 13px;}
.page_breadcrumb h1 {font-size: 1.3rem;}
.app-header {padding: 0 1rem;}
.mobile_menu{display: inline-block;}
.pb-3 {padding-bottom: .6rem !important;}
.pt-3 {padding-top: .6rem !important;}










}
/*for medium mobile*/
@media only screen and (min-width:480px) and (max-width:760px) {


}
/*for tablet*/
@media only screen and (min-width:760px) and (max-width:1000px) {
  .app-brand-sm {visibility: hidden;}
}

.user-message {
  display: flex;
  justify-content: start;
  flex-direction: column;
  gap: 2px;
  align-items: end;
  margin-bottom: 5px;
}

.bot-message {
  display: flex;
  justify-content: start;
  flex-direction: column;
  gap: 2px;
  align-items: start;
  margin-bottom: 5px;
}

.user-message-text {
  width: fit-content;
  border-radius: 5px;
  padding: 0.5rem;
  /* font-family: serif; */
  background: #bbbbd2;
  max-width: 16rem;
}

.bot-message-text {
  width: fit-content;
  border-radius: 5px;
  padding: 0.5rem;
  /* font-family: serif; */
  background: #bbbbd2;
  max-width: 16rem;
}

.chat-input {
  display: flex;
  padding: 3px;
  gap: 3px;
}

.chat-input-input {
  flex-grow: 1;
  flex-shrink: 1;
  border: 2px black;
  border-radius: 5px;
  padding: 5px;
}

.chat-input-button {
  background: #333336;
  color: white;
  padding: 8px 20px;
  cursor: pointer;
  border: 0;
}

.chat-input-button:hover {
  background: #333336;
}

.chatBox {
  height: 70vh;
  display: flex;
}

.chatRaise {
  justify-content: flex-end;
  display: flex;
  margin: 5px;
}

.chatRaiseM {
  display: none;
  justify-content: flex-end;
  display: flex;
  margin: 5px;
}

.chatHead {
  display: none;
}

.chatListM {
  display: block;
  opacity: 1;
}

.chatMsgM {
  border: solid 1px #000 !important;
}

@media only screen and (max-width: 990px) {
  .chatListM {
    z-index: 1;
    position: absolute !important;
    display: block;
    background: #d6cfd9;
    height: inherit;
    min-width: 40% !important;
  }

  .card-task .emoji-task {
    display: block;
    gap: 5px;
    font-size: 15px;
    align-items: baseline;
  }

  .banner_graph {
    height: 100%;
  }

  .chatMsgM {
    width: 100% !important;
    border: solid 1px #000 !important;
  }

  .chatRaise {
    display: none !important;
  }

  .chatRaiseM {
    display: block !important;
  }

  .chatHead {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .qrimage{
    width: 100%;
  }
}

.expendHash {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
  cursor: pointer;
  text-align: center;
}

.expendHash:hover {
  /* width: unset; */
  white-space: wrap;
}